/* =====================================================================
   HANDLING-IN — TATA WARNA SITUS
   Memakai warna yang sama dengan aplikasi operasional supaya situs dan
   panel terasa satu keluarga: navy #12305E dan oranye #F15A24.
   ===================================================================== */

:root{
  --tinta:#12305E;        /* navy utama, dari logo */
  --tinta-2:#1B4179;
  --tinta-3:#2C5490;
  --emas:#F15A24;         /* oranye logo */
  --emas-tua:#D44A16;
  --emas-muda:#FDF1EB;
  --hijau:#12795C;
  --teks:#1B2A3A;
  --redup:#5F718F;
  --redup-2:#8697B0;
  --kanvas:#F7F9FC;
  --krem:#FBF8F4;
  --garis:#DDE5F0;
  --garis-2:#EDF1F7;
  --r:14px;
  --r-kecil:9px;
  --lebar:1140px;
}

*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth; scroll-padding-top:86px}
body{font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  background:#fff; color:var(--teks); font-size:16px; line-height:1.7;
  -webkit-font-smoothing:antialiased; overflow-x:hidden}
img{max-width:100%; display:block}
a{color:var(--tinta); text-decoration:none}
a:hover{color:var(--emas)}
.lebar{max-width:var(--lebar); margin:0 auto; padding:0 24px}

h1,h2,h3{line-height:1.25; color:var(--tinta); font-weight:800; letter-spacing:-.02em}
h1{font-size:clamp(28px,4.4vw,46px)}
h2{font-size:clamp(23px,3.2vw,34px)}
h3{font-size:19px}

/* ---------- Penanda bagian ---------- */
.tanda{display:inline-flex; align-items:center; gap:8px; font-size:11.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--emas); margin-bottom:12px}
.tanda::before{content:""; width:22px; height:2px; background:var(--emas); border-radius:2px}
.tengah{text-align:center}
.tengah .tanda{justify-content:center}
.tengah .sub-bagian{margin-left:auto; margin-right:auto}
.sub-bagian{color:var(--redup); font-size:16px; max-width:620px; margin-top:12px}

section{padding:76px 0}
.abu{background:var(--kanvas)}
.krem{background:var(--krem)}

/* ---------- Tombol ---------- */
.tbl{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 24px; border-radius:99px; font-weight:700; font-size:14.5px;
  border:2px solid transparent; cursor:pointer; transition:.18s ease; white-space:nowrap}
.tbl:hover{text-decoration:none; transform:translateY(-1px)}
.tbl-emas{background:var(--emas); color:#fff}
.tbl-emas:hover{background:var(--emas-tua); color:#fff}
.tbl-tinta{background:var(--tinta); color:#fff}
.tbl-tinta:hover{background:var(--tinta-2); color:#fff}
.tbl-garis{border-color:var(--garis); color:var(--tinta); background:#fff}
.tbl-garis:hover{border-color:var(--tinta); color:var(--tinta)}
.tbl-putih{background:#fff; color:var(--tinta)}
.tbl-putih:hover{background:var(--emas-muda); color:var(--tinta)}
.tbl-besar{padding:15px 30px; font-size:15.5px}
.tbl-kecil{padding:9px 17px; font-size:13px}

/* ---------- Kepala situs ---------- */
.atas{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--garis-2)}
.atas-isi{display:flex; align-items:center; justify-content:space-between; gap:20px; height:74px}

/* Nama perusahaan tidak boleh patah jadi dua baris */
.merek{display:flex; align-items:center; gap:11px; font-size:20px; font-weight:800;
  color:var(--tinta); letter-spacing:-.02em; flex:none; white-space:nowrap; line-height:1.1}
.merek img{border-radius:9px; flex:none}
.merek > span{white-space:nowrap}
.merek span span{color:var(--emas)}
.merek-terang{color:#fff}
.merek-terang span span{color:var(--emas)}

.nav{display:flex; align-items:center; gap:22px; flex:1; justify-content:flex-end}
.nav a{font-size:14.5px; font-weight:600; color:var(--teks); white-space:nowrap}
.nav a:hover,.nav a.aktif{color:var(--emas)}
.nav-tombol{display:flex; align-items:center; gap:10px; flex:none; margin-left:6px}
/* Kedua tombol di kepala dibuat setinggi dan sepadan bentuknya:
   sama tinggi baris, sama tebal bingkai, hanya beda warna. */
.nav .nav-cek,
.nav .nav-tbl{display:inline-flex; align-items:center; justify-content:center;
  height:40px; padding:0 18px; border-radius:99px; font-size:13.5px; font-weight:700;
  border:2px solid transparent; line-height:1; white-space:nowrap}
.nav .nav-cek{border-color:var(--garis); color:var(--tinta); background:#fff}
.nav .nav-cek:hover{border-color:var(--tinta); color:var(--tinta)}
.nav .nav-tbl{background:var(--emas); color:#fff; margin-left:0}
.nav .nav-tbl:hover{background:var(--emas-tua); color:#fff}
.buka-menu,.tombol-menu{display:none}

/* ---------- Hero ---------- */
.hero{background:linear-gradient(160deg,#12305E 0%,#0E2549 62%,#143A72 100%);
  color:#fff; padding:86px 0 92px; position:relative; overflow:hidden}
.hero::after{content:""; position:absolute; right:-14%; top:-38%; width:62%; aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle, rgba(241,90,36,.22), transparent 62%)}
.hero::before{content:""; position:absolute; left:-16%; bottom:-46%; width:56%; aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.09), transparent 62%)}
.hero .lebar{position:relative; z-index:2}
.hero-kisi{display:grid; grid-template-columns:1.15fr .85fr; gap:52px; align-items:center}
.hero h1{color:#fff; margin-bottom:18px}
.hero h1 em{font-style:normal; color:var(--emas)}
.hero p.utama{font-size:17px; color:#C9D6E9; max-width:520px; margin-bottom:26px}
.hero-tombol{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:34px}
.hero-angka{display:flex; gap:34px; flex-wrap:wrap; padding-top:26px;
  border-top:1px solid rgba(255,255,255,.15)}
.hero-angka b{display:block; font-size:27px; font-weight:800; color:#fff; line-height:1.2}
.hero-angka span{font-size:12.5px; color:#9FB3D1; letter-spacing:.03em}

.hero-kartu{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  border-radius:20px; padding:26px; backdrop-filter:blur(6px)}
.hero-kartu h3{color:#fff; font-size:17px; margin-bottom:16px}
.hero-daftar{display:flex; flex-direction:column; gap:13px}
.hero-daftar div{display:flex; gap:12px; align-items:flex-start}
.hero-daftar i{flex:none; width:26px; height:26px; border-radius:50%; background:var(--emas);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-style:normal; font-size:13px; font-weight:700}
.hero-daftar p{font-size:14px; color:#DCE6F4; line-height:1.6}
.hero-daftar b{display:block; color:#fff; font-size:14.5px; margin-bottom:2px}

/* ---------- Kepala halaman dalam ---------- */
.kepala-halaman{background:linear-gradient(150deg,#12305E,#0E2549); color:#fff;
  padding:60px 0 56px; text-align:center}
.kepala-halaman h1{color:#fff}
.kepala-halaman p{color:#BCCCE4; margin-top:10px; font-size:16px;
  max-width:640px; margin-left:auto; margin-right:auto}
.remah{font-size:13px; color:#8FA5C6; margin-top:16px}
.remah a{color:var(--emas)}
.remah span{margin:0 7px; opacity:.5}

/* ---------- Kartu umum ---------- */
.kisi{display:grid; gap:22px}
.kisi-2{grid-template-columns:repeat(2,1fr)}
.kisi-3{grid-template-columns:repeat(3,1fr)}
.kisi-4{grid-template-columns:repeat(4,1fr)}

.kartu{background:#fff; border:1px solid var(--garis); border-radius:var(--r);
  padding:26px; transition:.2s ease}
.kartu:hover{border-color:var(--tinta-3); box-shadow:0 16px 40px -22px rgba(18,48,94,.35);
  transform:translateY(-3px)}
.kartu h3{margin-bottom:9px}
.kartu p{color:var(--redup); font-size:14.5px}
.kartu-ikon{width:48px; height:48px; border-radius:12px; background:var(--emas-muda);
  color:var(--emas); display:flex; align-items:center; justify-content:center;
  font-size:21px; font-weight:800; margin-bottom:16px}

/* ---------- Langkah ---------- */
.langkah{display:grid; grid-template-columns:repeat(4,1fr); gap:26px}
.langkah > div{position:relative}
.langkah b{display:block; font-size:38px; font-weight:800; color:var(--emas);
  line-height:1; margin-bottom:10px; letter-spacing:-.02em}
.langkah > div{padding-top:14px; border-top:2px solid var(--emas)}
.langkah h3{font-size:17px; margin-bottom:7px}
.langkah p{font-size:14px; color:var(--redup)}

/* ---------- Paket ---------- */
.paket-kisi{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:start}
.paket{background:#fff; border:1.5px solid var(--garis); border-radius:18px;
  padding:28px; display:flex; flex-direction:column; height:100%; position:relative}
.paket.unggulan{border-color:var(--emas); box-shadow:0 22px 54px -26px rgba(241,90,36,.5)}
.paket-label{position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--emas); color:#fff; font-size:11.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; padding:6px 15px; border-radius:99px; white-space:nowrap}
.paket h3{font-size:20px}
.paket .paket-sub{color:var(--redup); font-size:13.5px; margin-top:5px; min-height:38px}
.paket-harga{font-size:31px; font-weight:800; color:var(--tinta); margin:16px 0 3px;
  letter-spacing:-.02em}
.paket-satuan{font-size:13px; color:var(--redup-2); margin-bottom:18px}
.paket-rinci{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:18px}
.paket-rinci span{font-size:11.5px; font-weight:600; background:var(--kanvas);
  color:var(--redup); padding:5px 11px; border-radius:99px}
.paket-daftar{list-style:none; display:flex; flex-direction:column; gap:9px;
  margin-bottom:22px; flex:1}
.paket-daftar li{display:flex; gap:9px; font-size:14px; color:var(--teks); line-height:1.55}
.paket-daftar li::before{content:"✓"; flex:none; width:19px; height:19px; border-radius:50%;
  background:var(--emas-muda); color:var(--emas); font-size:11px; font-weight:800;
  display:flex; align-items:center; justify-content:center; margin-top:3px}
.paket-judul-kecil{font-size:12px; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; color:var(--redup-2); margin-bottom:11px}

/* ---------- Tanya jawab ---------- */
.tanya{border:1px solid var(--garis); border-radius:var(--r-kecil); margin-bottom:11px;
  background:#fff; overflow:hidden}
.tanya summary{cursor:pointer; padding:17px 20px; font-weight:700; font-size:15px;
  color:var(--tinta); display:flex; justify-content:space-between; gap:14px;
  align-items:center; list-style:none}
.tanya summary::-webkit-details-marker{display:none}
.tanya summary::after{content:"+"; flex:none; width:26px; height:26px; border-radius:50%;
  background:var(--kanvas); color:var(--emas); font-size:17px; font-weight:700;
  display:flex; align-items:center; justify-content:center}
.tanya[open] summary{background:var(--tinta); color:#fff}
.tanya[open] summary::after{content:"−"; background:var(--emas); color:#fff}
.tanya-isi{padding:17px 20px; color:var(--redup); font-size:14.5px;
  border-top:1px solid var(--garis-2)}

/* ---------- Testimoni ---------- */
.testi{background:var(--tinta); color:#fff; border-radius:18px; padding:28px}
.testi p{color:#D5E0F0; font-size:14.5px; line-height:1.75}
.testi-orang{display:flex; align-items:center; gap:12px; margin-top:20px;
  padding-top:18px; border-top:1px solid rgba(255,255,255,.15)}
.testi-orang b{display:block; font-size:14.5px; color:#fff}
.testi-orang span{font-size:12px; color:#9FB3D1}
.testi-huruf{flex:none; width:42px; height:42px; border-radius:50%; background:var(--emas);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:16px}

/* ---------- Ajakan penutup ---------- */
.ajakan{background:linear-gradient(150deg,#12305E,#0E2549); color:#fff; text-align:center;
  position:relative; overflow:hidden}
.ajakan::after{content:""; position:absolute; right:-10%; top:-60%; width:50%; aspect-ratio:1;
  border-radius:50%; background:radial-gradient(circle, rgba(241,90,36,.2), transparent 62%)}
.ajakan .lebar{position:relative; z-index:2}
.ajakan h2{color:#fff; margin-bottom:14px}
.ajakan .tanda{justify-content:center}
.ajakan-sub{color:#BCCCE4; max-width:560px; margin:0 auto 28px}
.ajakan-tombol{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

/* ---------- Kaki ---------- */
.kaki{background:#0E2549; color:#A9BDD8; padding:64px 0 28px}
.kaki-kisi{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:36px}
.kaki h3{color:#fff; font-size:14px; letter-spacing:.05em; text-transform:uppercase;
  margin-bottom:16px}
.kaki a{display:block; color:#A9BDD8; font-size:14px; padding:5px 0}
.kaki a:hover{color:var(--emas)}
.kaki-merek .merek{gap:14px; font-size:19px; margin-bottom:16px; align-items:center}
.kaki-merek .merek img{width:46px; height:46px}
.kaki-merek p{font-size:14px; margin-top:0; max-width:290px}
.kaki-legal{color:#7B92B4; font-size:13px !important; margin-top:8px !important}
.kaki-alamat{font-size:14px; padding:5px 0}
/* Tombol di kaki tidak boleh melebar mengikuti kolomnya */
.kaki .tbl{display:inline-flex; align-items:center; justify-content:center; height:40px;
  padding:0 20px; width:auto; font-size:13.5px; line-height:1; border-radius:99px}
.kaki-merek .merek{margin-bottom:2px}
.kaki-bawah{margin-top:44px; padding-top:22px; border-top:1px solid rgba(255,255,255,.1);
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-size:13px; color:#7B92B4}

/* ---------- Tombol WhatsApp melayang ---------- */
.wa-lekat{position:fixed; right:20px; bottom:20px; z-index:60; width:54px; height:54px;
  border-radius:50%; background:#25D366; color:#fff; display:flex; align-items:center;
  justify-content:center; box-shadow:0 12px 30px -8px rgba(37,211,102,.6)}
.wa-lekat:hover{background:#1EBE5A; color:#fff; transform:scale(1.06)}

/* ---------- Isi tulisan ---------- */
.tulisan p{color:var(--redup); margin-bottom:16px}
.tulisan h3{margin:26px 0 10px}
.tulisan ul{margin:0 0 16px 20px; color:var(--redup)}
.tulisan li{margin-bottom:7px}

/* ---------- Kotak info ---------- */
.info{background:var(--emas-muda); border-left:4px solid var(--emas);
  border-radius:var(--r-kecil); padding:18px 20px; margin:22px 0}
.info p{color:#7A4326; font-size:14.5px; margin:0}

/* =====================================================================
   PONSEL DAN TABLET
   ===================================================================== */
/* Aturan 1000px seluruhnya disatukan di blok "Tablet mendatar" di bawah.
   Sebelumnya ditulis dua kali pada ambang yang sama, sehingga yang di
   atas tidak pernah berlaku dan hanya menyesatkan saat ditelusuri. */

/* Ruang menu mulai sempit: kecilkan dulu sebelum ditarik ke bawah.
   Ambangnya dinaikkan setelah menu bertambah menjadi sembilan butir. */
@media (max-width:1420px){
  .nav{gap:16px}
  .nav a{font-size:13.5px}
  .nav .nav-cek{padding:8px 13px; font-size:12.5px}
  .nav .nav-tbl{padding:11px 18px; font-size:13.5px}
  .merek{font-size:18px}
}

/* Di bawah ini menu tidak muat lagi, jadi ditarik ke bawah.
   Dihitung dari lebar sebenarnya sembilan butir menu ditambah dua tombol,
   bukan dikira-kira. */
@media (max-width:1260px){
  .tombol-menu{display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:42px; height:42px; cursor:pointer; padding:0 8px; flex:none}
  .tombol-menu span{display:block; height:2.5px; background:var(--tinta); border-radius:2px;
    transition:.2s ease}
  .nav{position:absolute; top:74px; left:0; right:0; background:#fff; flex-direction:column;
    align-items:stretch; gap:0; padding:0 22px; max-height:0; overflow:hidden;
    border-bottom:1px solid transparent; transition:max-height .25s ease; z-index:60;
    -webkit-overflow-scrolling:touch}
  .nav a{padding:14px 0; border-bottom:1px solid var(--garis-2); font-size:15px}
  .nav-tombol{flex-direction:column; align-items:stretch; gap:10px;
    margin:16px 0 20px; padding-bottom:2px}
  .nav .nav-cek{text-align:center; padding:12px}
  .nav .nav-tbl{margin:0; text-align:center; justify-content:center}
  /* Tinggi menu dibatasi layar, bukan angka tetap. Dengan angka tetap,
     butir terakhir terpotong dan tidak bisa digulir sama sekali. */
  .buka-menu:checked ~ .nav{max-height:calc(100vh - 74px); overflow-y:auto;
    border-bottom-color:var(--garis); padding-bottom:12px}
  @supports (height: 100dvh) {
    .buka-menu:checked ~ .nav{max-height:calc(100dvh - 74px)}
  }
  .buka-menu:checked ~ .tombol-menu span:first-child{transform:translateY(7.5px) rotate(45deg)}
  .buka-menu:checked ~ .tombol-menu span:nth-child(2){opacity:0}
  .buka-menu:checked ~ .tombol-menu span:last-child{transform:translateY(-7.5px) rotate(-45deg)}
}

@media (max-width:760px){
  section{padding:54px 0}
  html{scroll-padding-top:78px}
  .lebar{padding:0 18px}

  .tombol-menu{display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:42px; height:42px; cursor:pointer; padding:0 8px}
  .tombol-menu span{display:block; height:2.5px; background:var(--tinta); border-radius:2px;
    transition:.2s ease}
  /* Aturan menu tarik-turun ada di blok 1260px di atas. Sebelumnya
     ditulis ulang di sini dengan tinggi tetap 460px, dan itulah yang
     membuat butir terakhir terpotong tanpa bisa digulir. */
  .nav{padding:0 18px}

  .kisi-2,.kisi-3,.kisi-4,.langkah{grid-template-columns:1fr}
  .hero{padding:56px 0 62px}
  .hero-angka{gap:24px}
  .hero-angka b{font-size:23px}
  .kepala-halaman{padding:44px 0 40px}
  .kaki-kisi{grid-template-columns:1fr; gap:26px}
  .kaki-bawah{flex-direction:column; gap:8px}
  .tbl{width:100%}
  .hero-tombol .tbl,.ajakan-tombol .tbl{width:100%}
  .wa-lekat{right:14px; bottom:14px; width:50px; height:50px}
}

/* =====================================================================
   TAMBAHAN TAMPILAN: gambar, pola, dan pemanis
   ===================================================================== */

/* ---------- Bingkai gambar ---------- */
.gambar{position:relative; border-radius:18px; overflow:hidden; background:var(--kanvas);
  box-shadow:0 26px 60px -34px rgba(18,48,94,.5)}
.gambar img{width:100%; height:100%; object-fit:cover; display:block}
.gambar-tinggi{aspect-ratio:3/4}
.gambar-lebar{aspect-ratio:4/3}
.gambar-panjang{aspect-ratio:16/9}

/* Blok warna saat foto belum ada. Dibuat agar terlihat sebagai pilihan
   rancangan, bukan sebagai gambar yang gagal dimuat. */
.polos{position:relative; overflow:hidden}
.polos::after{content:""; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 20% 10%, rgba(255,255,255,.22), transparent 60%)}
.polos-1{background:linear-gradient(150deg,#1B4179 0%,#12305E 55%,#0E2549 100%)}
.polos-2{background:linear-gradient(150deg,#26548F 0%,#1B4179 60%,#12305E 100%)}

/* ---------- Susunan gambar bertumpuk pada hero ---------- */
.hero-gambar{position:relative}
.hero-gambar .gambar:first-child{aspect-ratio:4/5}
.hero-gambar .gambar:last-child{position:absolute; right:-18px; bottom:-26px;
  width:52%; aspect-ratio:1/1; border:5px solid #fff}

/* ---------- Pita angka ---------- */
.pita{background:var(--tinta); color:#fff; border-radius:18px; padding:30px 34px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:-56px;
  position:relative; z-index:5; box-shadow:0 30px 70px -40px rgba(18,48,94,.75)}
.pita div{text-align:center}
.pita b{display:block; font-size:29px; font-weight:800; line-height:1.15; color:#fff}
.pita span{font-size:12.5px; color:#A9BDD8; letter-spacing:.02em}

/* ---------- Kartu layanan bergambar ---------- */
.kartu-gambar{padding:0; overflow:hidden; display:flex; flex-direction:column}
.kartu-gambar .gambar{border-radius:0; aspect-ratio:16/10}
.kartu-gambar .kartu-isi{padding:22px 24px 26px}
.kartu-gambar h3{margin-bottom:8px}

/* ---------- Kartu paket bergambar ---------- */
.paket-gambar{margin:-28px -28px 20px; aspect-ratio:16/9; border-radius:18px 18px 0 0;
  overflow:hidden}
.paket-gambar .gambar{border-radius:0; height:100%}

/* ---------- Pembatas lengkung ---------- */
.lengkung{position:relative}
.lengkung::after{content:""; position:absolute; left:0; right:0; bottom:0; height:52px;
  background:#fff; border-radius:52px 52px 0 0}

/* ---------- Kutipan besar ---------- */
.kutip{position:relative; padding-left:34px}
.kutip::before{content:"\201C"; position:absolute; left:0; top:-14px; font-size:62px;
  line-height:1; color:var(--emas); font-family:Georgia,serif}

/* ---------- Lencana kecil ---------- */
.lencana-mini{display:inline-flex; align-items:center; gap:6px; font-size:11.5px;
  font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  background:var(--emas-muda); color:var(--emas); padding:6px 12px; border-radius:99px}

/* =====================================================================
   TATA LETAK LAYAR: laptop, tablet, ponsel
   ===================================================================== */

/* Laptop kecil */
@media (max-width:1100px){
  :root{--lebar:960px}
}

/* Tablet mendatar */
@media (max-width:1000px){
  .hero-kisi{grid-template-columns:1fr; gap:40px}
  .hero-gambar{max-width:460px; margin:0 auto}
  .pita{grid-template-columns:repeat(2,1fr); gap:24px; margin-top:-40px; padding:26px}
  .kisi-4{grid-template-columns:repeat(2,1fr)}
  .langkah{grid-template-columns:repeat(2,1fr); gap:24px}
  .paket-kisi{grid-template-columns:repeat(2,1fr)}
  .kaki-kisi{grid-template-columns:repeat(2,1fr); gap:30px}
}

/* Tablet tegak */
@media (max-width:860px){
  .kisi-3{grid-template-columns:repeat(2,1fr)}
}

/* Ponsel */
@media (max-width:760px){
  .pita{grid-template-columns:repeat(2,1fr); margin-top:-30px; padding:22px 18px; gap:18px}
  .pita b{font-size:23px}
  .paket-kisi{grid-template-columns:1fr; max-width:460px; margin:0 auto}
  .hero-gambar .gambar:last-child{width:46%; right:-8px; bottom:-16px; border-width:4px}
  .kutip{padding-left:26px}
  .kutip::before{font-size:48px}
}

/* Ponsel kecil */
@media (max-width:430px){
  :root{--r:12px}
  .pita{grid-template-columns:1fr; gap:16px}
  .pita div{display:flex; align-items:baseline; gap:10px; justify-content:center}
  .pita b{font-size:20px}
  .hero-gambar .gambar:last-child{width:42%; right:-6px; bottom:-12px; border-width:3px}
}

/* ================= DAFTAR HARGA LAYANAN ================= */
.harga-kelompok{margin-bottom:34px}
.harga-kelompok h3{display:flex; align-items:center; gap:12px; margin-bottom:16px;
  font-size:19px}
.harga-kelompok h3::after{content:""; flex:1; height:1px; background:var(--garis)}
.harga-baris{display:flex; align-items:center; gap:16px; padding:15px 18px;
  border:1px solid var(--garis); border-radius:var(--r-kecil); margin-bottom:9px;
  background:#fff; transition:.15s ease}
.harga-baris:hover{border-color:var(--tinta-3)}
.harga-baris .nama{flex:1; min-width:0}
.harga-baris .nama b{display:block; font-size:15px; color:var(--tinta); font-weight:700}
.harga-baris .nama span{font-size:12.5px; color:var(--redup)}
.harga-baris .angka{text-align:right; flex:none}
.harga-baris .angka b{display:block; font-size:17px; font-weight:800; color:var(--tinta);
  white-space:nowrap}
.harga-baris .angka span{font-size:11.5px; color:var(--redup-2)}
.harga-periode{display:inline-flex; align-items:center; gap:6px; font-size:11.5px;
  font-weight:600; background:var(--kanvas); color:var(--redup); padding:4px 10px;
  border-radius:99px; margin-top:6px}
.harga-periode.nanti{background:var(--emas-muda); color:var(--emas-tua)}
.harga-baris .tbl{flex:none}

@media (max-width:560px){
  .harga-baris{flex-direction:column; align-items:flex-start; gap:9px}
  .harga-baris .angka{text-align:left}
  .harga-baris .tbl{width:100%; justify-content:center}
}

/* ---------- Blok harga berkelompok (satu nama, beberapa varian) ---------- */
.harga-blok{border:1px solid var(--garis); border-radius:var(--r); background:#fff;
  margin-bottom:12px; overflow:hidden}
.harga-blok-kepala{display:flex; align-items:flex-start; justify-content:space-between;
  gap:14px; padding:16px 18px; background:var(--kanvas); flex-wrap:wrap}
.harga-blok-kepala b{display:block; font-size:15.5px; color:var(--tinta); font-weight:700}
.harga-blok-kepala span{font-size:12.5px; color:var(--redup)}
.harga-varian{display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:12px 18px; border-top:1px solid var(--garis-2)}
.harga-varian .v-nama{font-size:14px; color:var(--teks); font-weight:600}
.harga-varian .v-harga{text-align:right; white-space:nowrap}
.harga-varian .v-harga b{font-size:16px; font-weight:800; color:var(--tinta)}
.harga-varian .v-harga span{display:block; font-size:11.5px; color:var(--redup-2)}

@media (max-width:560px){
  .harga-blok-kepala{flex-direction:column; gap:8px}
  .harga-varian{flex-direction:column; align-items:flex-start; gap:4px}
  .harga-varian .v-harga{text-align:left}
}

/* =====================================================================
   PENYAMBUNG ANTAR BAGIAN
   Supaya halaman terasa mengalir, bukan kotak-kotak yang berdiri sendiri.
   ===================================================================== */

/* Bagian gelap melebar penuh, dipakai sebagai jeda visual di tengah halaman */
.pita-foto{position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(150deg,#12305E 0%,#0E2549 60%,#143A72 100%);
  padding:82px 0}
.pita-foto::after{content:""; position:absolute; right:-12%; top:-46%; width:56%;
  aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(241,90,36,.2), transparent 62%)}
.pita-foto .lebar{position:relative; z-index:2}
.pita-foto h2{color:#fff}
.pita-foto p{color:#C3D2E8}

/* Tiga angka di dalam pita gelap */
.pita-angka{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:38px;
  padding-top:32px; border-top:1px solid rgba(255,255,255,.16)}
.pita-angka b{display:block; font-size:26px; font-weight:800; color:#fff; line-height:1.2}
.pita-angka span{font-size:13px; color:#9FB3D1}

/* Tepi lengkung supaya bagian terang menyatu ke bagian gelap */
.sambung{position:relative}
.sambung::before{content:""; position:absolute; left:0; right:0; top:-1px; height:58px;
  background:inherit; border-radius:0 0 60px 60px; z-index:1}

/* Bagian bergambar dua kolom, gambarnya sedikit menjorok keluar */
.duet{display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center}
.duet-gambar{position:relative}
.duet-gambar .gambar{aspect-ratio:4/3}
.duet-gambar .gambar:last-child:not(:first-child){position:absolute; right:-24px; bottom:-32px;
  width:46%; aspect-ratio:1/1; border:6px solid #fff; box-shadow:0 20px 50px -26px rgba(18,48,94,.55)}

/* Kotak tempel berisi angka di atas gambar */
.tempel{position:absolute; left:-22px; bottom:26px; background:#fff; border-radius:14px;
  padding:16px 20px; box-shadow:0 22px 48px -24px rgba(18,48,94,.5); z-index:3}
.tempel b{display:block; font-size:23px; font-weight:800; color:var(--tinta); line-height:1.15}
.tempel span{font-size:12px; color:var(--redup)}

@media (max-width:1000px){
  .duet{grid-template-columns:1fr; gap:38px}
  .duet-gambar{max-width:520px}
  .pita-angka{gap:20px}
}
@media (max-width:640px){
  .pita-foto{padding:56px 0}
  .pita-angka{grid-template-columns:1fr; gap:18px; text-align:center}
  .duet-gambar .gambar:last-child:not(:first-child){width:44%; right:-10px; bottom:-18px;
    border-width:4px}
  .tempel{left:-8px; bottom:-14px; padding:13px 16px}
  .tempel b{font-size:19px}
  .sambung::before{height:38px; border-radius:0 0 40px 40px}
}

/* ---------- Hero tanpa kolom gambar (foto latar sudah terpasang) ---------- */
.hero-lebar .hero-kisi{grid-template-columns:1fr}
.hero-lebar .hero-kisi > div{max-width:720px}
.hero-lebar h1{font-size:clamp(30px,4.8vw,52px)}
.hero-lebar p.utama{max-width:600px; font-size:17.5px}
.hero-lebar{padding:104px 0 108px}

/* Bagian dua kolom yang belum berfoto: tulisannya melebar, tidak menyisakan
   kolom kosong di sebelahnya */
.duet-tanpa-gambar{grid-template-columns:1fr; max-width:760px; margin:0 auto}

/* Kartu paket tanpa foto tetap punya jarak dalam yang wajar */
.kartu > div:not(.kartu-isi) > .lencana-mini:first-child{margin-top:0}

@media (max-width:760px){
  .hero-lebar{padding:64px 0 68px}
}

/* =====================================================================
   BAGIAN BERLATAR FOTO
   Dipakai untuk memberi jeda gelap di antara bagian yang terang.
   Tanpa foto pun tetap tampil sebagai gradasi navy yang rapi.
   ===================================================================== */
.bagian-foto{position:relative; color:#fff; padding:78px 0;
  background:linear-gradient(155deg,#12305E 0%,#0E2549 58%,#16386E 100%)}
.bagian-foto::after{content:""; position:absolute; left:-12%; bottom:-40%; width:48%;
  aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(241,90,36,.16), transparent 62%)}
.bagian-foto .lebar{position:relative; z-index:2}
.bagian-foto h2{color:#fff}
.bagian-foto .sub-bagian{color:#C3D2E8}

/* Kartu di atas latar gelap: tembus pandang, bukan putih pekat */
.kartu-kaca{background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.16);
  backdrop-filter:blur(6px)}
.kartu-kaca:hover{background:rgba(255,255,255,.11); border-color:rgba(255,255,255,.3);
  box-shadow:0 18px 44px -24px rgba(0,0,0,.55)}
.kartu-kaca h3{color:#fff}
.kartu-kaca p{color:#BCCCE4}
.kartu-kaca .kartu-ikon{background:rgba(241,90,36,.2); color:#FBB595}

@media (max-width:760px){
  .bagian-foto{padding:54px 0}
}

/* =====================================================================
   TESTIMONI BERJALAN
   Bergerak dari kanan ke kiri tanpa henti. Berhenti saat disentuh atau
   ditunjuk, supaya orang sempat membacanya sampai selesai.
   ===================================================================== */
.jalan{width:100%; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,
  transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent)}
.jalan-isi{display:flex; gap:22px; width:max-content; padding:6px 0;
  animation:jalan-kiri 64s linear infinite}
.jalan:hover .jalan-isi,
.jalan:focus-within .jalan-isi{animation-play-state:paused}
.jalan-kartu{width:360px; flex:none}
.testi-bintang{color:var(--emas); font-size:14px; letter-spacing:2px; margin-bottom:10px}

@keyframes jalan-kiri{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* Sebagian orang pusing melihat gerakan terus-menerus. Sistem operasinya
   punya pengaturan untuk itu, dan kita menghormatinya. */
@media (prefers-reduced-motion:reduce){
  .jalan{overflow-x:auto; -webkit-overflow-scrolling:touch;
    -webkit-mask-image:none; mask-image:none}
  .jalan-isi{animation:none}
}

@media (max-width:760px){
  .jalan-kartu{width:290px}
  .jalan-isi{gap:16px; animation-duration:48s}
}

/* ---------- Kartu katalog hotel ---------- */
.katalog{display:flex; align-items:center; gap:15px; padding:18px 20px;
  border:1.5px solid var(--garis); border-radius:var(--r); background:#fff;
  transition:.18s ease}
.katalog:hover{border-color:var(--emas); transform:translateY(-2px);
  box-shadow:0 18px 40px -26px rgba(241,90,36,.55)}
.katalog-ikon{flex:none; width:46px; height:46px; border-radius:12px;
  background:var(--emas-muda); color:var(--emas); display:flex; align-items:center;
  justify-content:center}
.katalog-ikon svg{width:24px; height:24px}
.katalog-teks{flex:1; min-width:0}
.katalog-teks b{display:block; font-size:15.5px; color:var(--tinta); font-weight:700}
.katalog-teks small{font-size:12.5px; color:var(--redup)}
.katalog-panah{flex:none; font-size:19px; color:var(--emas)}

@media (max-width:560px){
  .katalog{padding:15px 16px; gap:12px}
}

/* =====================================================================
   KALKULATOR BIAYA
   ===================================================================== */
.kalk{display:grid; grid-template-columns:1fr 380px; gap:26px; align-items:start}
.kalk-isi{background:#fff; border:1px solid var(--garis); border-radius:18px;
  padding:8px 26px 26px}
.kalk-blok{padding:20px 0; border-bottom:1px solid var(--garis-2)}
.kalk-blok:last-child{border-bottom:none}
.kalk-judul{font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--redup-2); margin:0 0 13px}
.kalk .mini{display:block; font-size:12px; font-weight:600; color:var(--redup);
  margin-bottom:6px}
.kalk input[type=text],.kalk input[type=tel],
.kalk input[type=number],.kalk select{width:100%; padding:11px 13px; font-size:14.5px;
  border:1.5px solid var(--garis); border-radius:var(--r-kecil); background:#fff;
  color:var(--teks); font-family:inherit}
.kalk input[type=text]:focus,.kalk input[type=tel]:focus,
.kalk input[type=number]:focus,.kalk select:focus{outline:none; border-color:var(--emas)}
.kalk-kisi-2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.kalk-kisi-3{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.kalk-angka small{display:block; font-size:11px; color:var(--redup-2); margin-top:5px}
.kalk-angka-teks{min-width:0}
.kalk-angka-teks .mini{margin-bottom:0}
.kalk-angka-teks small{margin-top:3px; margin-bottom:7px}

/* Tombol tambah dan kurang */
.kalk-stepper{display:flex; align-items:center; gap:6px}
.kalk-stepper input{flex:1 1 auto; min-width:0; text-align:center; padding-left:4px;
  padding-right:4px; -moz-appearance:textfield}
.kalk-stepper input::-webkit-outer-spin-button,
.kalk-stepper input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.kalk-stepper button{flex:none; width:38px; height:42px; border:1.5px solid var(--garis);
  background:#fff; border-radius:var(--r-kecil); font-size:18px; font-weight:700;
  color:var(--tinta); cursor:pointer; line-height:1; transition:.15s ease}
.kalk-stepper button:hover{border-color:var(--emas); color:var(--emas)}

/* Pilihan tipe kamar */
.kalk-kotak{position:relative; margin:0; cursor:pointer}
.kalk-kotak input{position:absolute; opacity:0; width:0; height:0}
.kalk-kotak span{display:block; padding:11px 13px; border:1.5px solid var(--garis);
  border-radius:var(--r-kecil); background:#fff; transition:.15s ease}
.kalk-kotak strong{display:block; font-size:14px; color:var(--tinta)}
.kalk-kotak small{font-size:11.5px; color:var(--redup)}
.kalk-kotak.terpilih span{border-color:var(--emas); background:var(--emas-muda)}
.kalk-kotak:hover span{border-color:var(--emas)}

/* Panel hasil */
.kalk-hasil-lekat{position:sticky; top:96px; background:var(--tinta); color:#fff;
  border-radius:18px; padding:26px}
.kalk-label{font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:#9FB3D1; margin:0 0 8px}
.kalk-besar{font-size:clamp(28px,3.6vw,36px); font-weight:800; color:#fff; line-height:1.15;
  letter-spacing:-.02em; margin:0}
.kalk-total{font-size:13.5px; color:#BCCCE4; margin:6px 0 0}
.kalk-total strong{color:#fff}
.kalk-rinci{margin:20px 0; padding-top:18px; border-top:1px solid rgba(255,255,255,.16)}
.kalk-baris{display:flex; justify-content:space-between; gap:12px; padding:8px 0;
  font-size:13px; color:#D5E0F0; align-items:flex-start}
.kalk-baris small{display:block; font-size:11.5px; color:#8FA5C6; margin-top:2px}
.kalk-baris b{color:#fff; white-space:nowrap; font-weight:700}
.kalk-belum{font-size:13px; color:#9FB3D1; margin:0}
.kalk-catatan{background:rgba(241,90,36,.16); border-radius:var(--r-kecil); padding:12px 14px;
  font-size:12.5px; color:#FBD3C2; line-height:1.6; margin-bottom:16px}
.kalk-catatan strong{color:#fff}

.kalk-kosong{background:#fff; border:1px dashed var(--garis); border-radius:18px;
  padding:40px 28px; text-align:center; max-width:560px; margin:0 auto}
.kalk-kosong h3{margin-bottom:10px}
.kalk-kosong p{color:var(--redup); margin-bottom:20px}

@media (max-width:980px){
  .kalk{grid-template-columns:1fr}
  .kalk-hasil-lekat{position:static}
}
@media (max-width:560px){
  .kalk-isi{padding:6px 18px 20px}
  .kalk-kisi-2{grid-template-columns:1fr}

  /* Tiga kolom terlalu sempit di HP: angkanya sampai tidak muat dan
     terpotong habis. Dijadikan satu kolom, dengan nama di kiri dan
     pengatur di kanan — sama seperti baris kamar. */
  .kalk-kisi-3{grid-template-columns:1fr; gap:9px}
  .kalk-angka{display:flex; align-items:center; justify-content:space-between; gap:14px;
    padding:11px 14px; border:1.5px solid var(--garis); border-radius:var(--r-kecil);
    background:#fff}
  .kalk-angka .mini{margin-bottom:2px}
  .kalk-angka small{margin-top:0}
  .kalk-angka > .kalk-stepper{flex:none}
  .kalk-angka .kalk-stepper input{width:54px; flex:none}
  .kalk-stepper button{width:34px}
  .kalk-hasil-lekat{padding:20px}
}

/* =====================================================================
   MENU LAINNYA
   ===================================================================== */
.nav-lain{position:relative}
.nav-lain-tombol{display:inline-flex; align-items:center; gap:5px; background:none;
  border:none; padding:0; font-family:inherit; font-size:14.5px; font-weight:600;
  color:var(--teks); cursor:pointer; white-space:nowrap}
.nav-lain-tombol:hover,.nav-lain.aktif .nav-lain-tombol{color:var(--emas)}
.nav-lain-tombol svg{transition:transform .18s ease}
.nav-lain.buka .nav-lain-tombol svg{transform:rotate(180deg)}

.nav-lain-isi{position:absolute; top:calc(100% + 14px); right:0; min-width:196px;
  background:#fff; border:1px solid var(--garis); border-radius:var(--r);
  box-shadow:0 22px 48px -24px rgba(18,48,94,.4); padding:7px;
  opacity:0; visibility:hidden; transform:translateY(-6px); transition:.16s ease; z-index:70}
.nav-lain.buka .nav-lain-isi{opacity:1; visibility:visible; transform:translateY(0)}
.nav-lain-isi a{display:block; padding:9px 13px; border-radius:var(--r-kecil);
  font-size:14px; font-weight:600; color:var(--teks)}
.nav-lain-isi a:hover{background:var(--kanvas); color:var(--emas)}
.nav-lain-isi a.aktif{color:var(--emas); background:var(--emas-muda)}

/* Di layar sempit, menu Lainnya ikut menumpuk ke bawah tanpa lipatan */
@media (max-width:1260px){
  .nav-lain{width:100%}
  .nav-lain-tombol{display:none}
  .nav-lain-isi{position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:none; padding:0; min-width:0; background:none}
  .nav-lain-isi a{padding:14px 0; border-bottom:1px solid var(--garis-2);
    border-radius:0; font-size:15px}
  .nav-lain-isi a:hover{background:none}
  .nav-lain-isi a.aktif{background:none}
}

/* =====================================================================
   TAB DAFTAR HARGA
   ===================================================================== */
.tab-tombol{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px;
  padding:7px; background:var(--kanvas); border-radius:99px}
.tab-tbl{display:inline-flex; align-items:center; gap:7px; padding:10px 18px;
  border:none; background:none; border-radius:99px; font-family:inherit; font-size:14px;
  font-weight:700; color:var(--redup); cursor:pointer; transition:.16s ease; white-space:nowrap}
.tab-tbl:hover{color:var(--tinta)}
.tab-tbl.terpilih{background:var(--tinta); color:#fff}
.tab-tbl small{font-size:11px; font-weight:700; padding:2px 7px; border-radius:99px;
  background:rgba(18,48,94,.09); color:var(--redup)}
.tab-tbl.terpilih small{background:rgba(255,255,255,.2); color:#fff}
.tab-isi{display:none}
.tab-isi.terlihat{display:block; animation:tab-masuk .22s ease}

@keyframes tab-masuk{
  from{opacity:0; transform:translateY(6px)}
  to{opacity:1; transform:translateY(0)}
}

@media (max-width:640px){
  .tab-tombol{border-radius:var(--r); padding:6px; gap:6px}
  .tab-tbl{padding:9px 14px; font-size:13px; flex:1 1 auto; justify-content:center}
}

/* ---------- Susunan kamar ---------- */
.kalk-kamar{display:flex; flex-direction:column; gap:9px}
.kalk-kamar-baris{display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:11px 14px; border:1.5px solid var(--garis); border-radius:var(--r-kecil);
  background:#fff}
.kalk-kamar-nama strong{display:block; font-size:14.5px; color:var(--tinta)}
.kalk-kamar-nama small{font-size:11.5px; color:var(--redup)}
.kalk-kamar .kalk-stepper{flex:none}
.kalk-kamar .kalk-stepper input{width:56px}

.kalk-kapasitas{margin-top:11px; padding:10px 13px; border-radius:var(--r-kecil);
  font-size:12.5px; line-height:1.6; background:var(--kanvas); color:var(--redup)}
.kalk-kapasitas.pas{background:#E8F5EF; color:#0E5C46}
.kalk-kapasitas.kurang{background:#FDECEA; color:#A3271A}
.kalk-kapasitas.lebih{background:var(--emas-muda); color:#8A4A22}

@media (max-width:560px){
  .kalk-kamar-baris{padding:10px 12px; gap:10px}
  .kalk-kamar .kalk-stepper input{width:46px}
}

/* ---------- Sakelar tampilan di kaki situs ---------- */
.sakelar-tampilan a{color:var(--emas); font-weight:600}
.sakelar-tampilan a:hover{text-decoration:underline}

/* Hanya ditawarkan di layar sentuh. Di laptop tombol ini tidak ada
   gunanya, dan pilihan yang tidak berguna hanya menambah keraguan. */
@media (min-width:1000px){
  .sakelar-tampilan{display:none}
}

/* ---------- Dua mode kalkulator ---------- */
.kalk-mode{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.kalk-mode-kotak{position:relative; margin:0; cursor:pointer}
.kalk-mode-kotak input{position:absolute; opacity:0; width:0; height:0}
.kalk-mode-kotak span{display:block; padding:14px 16px; border:1.5px solid var(--garis);
  border-radius:var(--r-kecil); background:#fff; transition:.15s ease; height:100%}
.kalk-mode-kotak strong{display:block; font-size:14.5px; color:var(--tinta); margin-bottom:3px}
.kalk-mode-kotak small{font-size:12px; color:var(--redup); line-height:1.55; display:block}
.kalk-mode-kotak.terpilih span{border-color:var(--emas); background:var(--emas-muda)}
.kalk-mode-kotak:hover span{border-color:var(--emas)}
.kalk-blok[hidden]{display:none}

@media (max-width:560px){
  .kalk-mode{grid-template-columns:1fr}
}