/* ============================================================
   IJK Design System
   Premium + Trustworthy + Creative + Modern + Human
   ============================================================ */
:root{
  /* navy IJK, jangkar merek. Nama peubahnya sengaja tidak diubah supaya
     seluruh berkas lama tetap jalan, yang berganti hanya nilainya. */
  --hijau:#19388F; --hijau-p:#102662; --hijau-t:#2F57C7; --hijau-l:#E3E8F6; --hijau-ll:#F2F4FB;
  /* amber, sekunder */
  --limau:#D89E00; --limau-c:#FFC31F; --limau-l:#FDF6E3;
  /* oranye hangat, aksen */
  --karang:#F3B714; --karang-t:#FAC123; --karang-l:#FDF7E7;
  /* netral perak */
  --krem:#F5F7FC; --krem2:#EAEDF6; --papan:#FFFFFF;
  --tinta:#0D1C48; --redup:#535D7A; --samar:#8A93AB;
  --garis:#E2E6F0; --garis2:#CBD1E3;
  /* bayang */
  --s1:0 1px 2px rgba(16,38,98,.05);
  --s2:0 4px 14px -4px rgba(16,38,98,.10),0 1px 3px rgba(16,38,98,.05);
  --s3:0 18px 44px -18px rgba(16,38,98,.30),0 3px 10px rgba(16,38,98,.06);
  --s4:0 34px 80px -34px rgba(16,38,98,.42);
  --r1:10px; --r2:16px; --r3:22px; --r4:30px;
  --lebar:1200px;
  --gerak:cubic-bezier(.22,.8,.28,1);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--krem);color:var(--tinta);
  font-family:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,sans-serif;
  font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3,h4{margin:0;line-height:1.1;letter-spacing:-.02em}
h1,h2,.sajian{font-family:"Playfair Display",Georgia,serif;font-weight:600;letter-spacing:-.015em}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--hijau-t);outline-offset:3px;border-radius:6px}
.kotak{max-width:var(--lebar);margin:0 auto;padding-inline:22px}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
.mata{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;color:var(--hijau-t)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============ tombol ============ */
.tbl{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:99px;
  padding:14px 26px;font-weight:700;font-size:15px;border:1.5px solid transparent;cursor:pointer;
  transition:transform .2s var(--gerak),background .2s,box-shadow .2s,border-color .2s;white-space:nowrap}
.tbl svg{width:18px;height:18px;flex:none}
.tbl:hover{transform:translateY(-2px)}
.tbl.utama{background:var(--hijau);color:#fff;box-shadow:0 12px 26px -12px rgba(25,56,143,.75)}
.tbl.utama:hover{background:var(--hijau-p);box-shadow:0 18px 34px -14px rgba(25,56,143,.8)}
.tbl.karang{background:var(--karang);color:#fff;box-shadow:0 12px 26px -12px rgba(217,97,78,.7)}
.tbl.karang:hover{background:#D39E0E}
.tbl.garis{border-color:var(--garis2);background:var(--papan);color:var(--tinta)}
.tbl.garis:hover{border-color:var(--hijau);color:var(--hijau)}
.tbl.terang{border-color:rgba(255,255,255,.45);color:#fff;background:rgba(255,255,255,.08);backdrop-filter:blur(8px)}
.tbl.terang:hover{background:rgba(255,255,255,.2);border-color:#fff}
.tbl.kecil{padding:10px 18px;font-size:13.5px}

/* ============ bilah atas ============ */
.bilah{position:fixed;inset:0 0 auto 0;z-index:70;transition:background .3s,box-shadow .3s,border-color .3s;
  border-bottom:1px solid transparent}
.bilah.turun{background:rgba(244,246,250,.9);backdrop-filter:blur(16px) saturate(1.4);
  border-bottom-color:var(--garis);box-shadow:0 1px 20px -8px rgba(16,38,98,.18)}
.bilah .kotak{display:flex;align-items:center;gap:20px;height:74px}
.merek{display:flex;align-items:center;gap:11px;flex:none}
.merek img{height:40px;width:auto;transition:.3s}
.merek .kata{display:flex;flex-direction:column;gap:1px;line-height:1}
.merek .kata b{font-family:"Plus Jakarta Sans",sans-serif;font-weight:800;font-size:15px;letter-spacing:.05em;color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.4);transition:.3s}
.merek .kata i{font-family:"IBM Plex Mono",monospace;font-style:normal;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.75);transition:.3s}
.bilah.turun .merek .kata b{color:var(--tinta);text-shadow:none}
.bilah.turun .merek .kata i{color:var(--samar)}
.nav{display:flex;align-items:center;gap:3px;margin-left:auto}
.nav a{padding:9px 12px;border-radius:99px;font-size:14px;font-weight:600;color:rgba(255,255,255,.88);
  transition:.18s;white-space:nowrap}
.nav a:hover{background:rgba(255,255,255,.16);color:#fff}
.bilah.turun .nav a{color:var(--redup)}
.bilah.turun .nav a:hover{background:var(--hijau-l);color:var(--hijau)}
.aksi-bilah{display:flex;align-items:center;gap:9px;flex:none}
.keranjang-tbl{position:relative}
.keranjang-tbl .jml{position:absolute;top:-5px;right:-5px;min-width:20px;height:20px;border-radius:99px;
  background:var(--karang);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;
  padding:0 5px;border:2px solid var(--krem);transform:scale(0);transition:transform .25s var(--gerak)}
.keranjang-tbl .jml.ada{transform:scale(1)}
.buka-menu{display:none;width:44px;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.1);align-items:center;justify-content:center;cursor:pointer}
.buka-menu svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round}
.bilah.turun .buka-menu{border-color:var(--garis2);background:var(--papan)}
.bilah.turun .buka-menu svg{stroke:var(--tinta)}

/* ============ hero ============ */
.hero{position:relative;min-height:min(92vh,860px);display:flex;align-items:flex-end;
  background:var(--hijau-p);overflow:hidden}
.hero-gbr{position:absolute;inset:-6% 0;will-change:transform}
.hero-gbr img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(175deg,rgba(13,29,74,.72) 0%,rgba(13,29,74,.22) 32%,
    rgba(13,29,74,.68) 70%,rgba(13,29,74,.95) 100%)}
.hero-isi{position:relative;z-index:2;width:100%;padding-block:150px 132px}
.hero h1{color:#fff;font-size:clamp(40px,7.2vw,82px);max-width:14ch;margin-top:16px;line-height:1.02}
.hero h1 em{font-style:italic;color:var(--limau-c)}
.hero .sub{color:rgba(255,255,255,.88);font-size:clamp(16.5px,2.1vw,21px);max-width:50ch;margin-top:20px;
  line-height:1.55}
.hero .aksi{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.gulir{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.6);display:flex;flex-direction:column;align-items:center;gap:8px}
.gulir::after{content:"";width:1px;height:34px;background:linear-gradient(rgba(255,255,255,.6),transparent);
  animation:turun 2.2s var(--gerak) infinite}
@keyframes turun{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}
  51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ============ perencana ============ */
.perencana{position:relative;z-index:5;margin-top:-92px}
.pnl{background:var(--papan);border-radius:var(--r4);box-shadow:var(--s4);border:1px solid var(--garis);
  overflow:hidden}
.pnl-kepala{display:flex;align-items:center;gap:14px;padding:20px 26px 0;flex-wrap:wrap}
.pnl-kepala h2{font-size:20px;flex:none}
.tab{display:flex;gap:4px;overflow-x:auto;padding:16px 26px 0;scrollbar-width:none}
.tab::-webkit-scrollbar{display:none}
.tab button{border:none;background:transparent;padding:11px 17px;border-radius:99px;font-size:14px;
  font-weight:700;color:var(--redup);cursor:pointer;white-space:nowrap;transition:.18s}
.tab button:hover{background:var(--krem2)}
.tab button[aria-selected=true]{background:var(--hijau);color:#fff;box-shadow:0 8px 18px -8px rgba(25,56,143,.6)}
.ladang{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:1px;background:var(--garis);
  margin:20px 0 0;border-top:1px solid var(--garis)}
.lad{background:var(--papan);padding:15px 20px;position:relative;transition:background .18s}
.lad:hover,.lad:focus-within{background:var(--hijau-ll)}
.lad label{display:flex;align-items:center;gap:6px;font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--samar);font-weight:600;margin-bottom:5px}
.lad label svg{width:13px;height:13px;stroke:var(--hijau-t);fill:none;stroke-width:2;stroke-linecap:round;
  stroke-linejoin:round}
.lad select,.lad input{width:100%;border:none;background:transparent;padding:0;font-size:15.2px;
  font-weight:700;color:var(--tinta);cursor:pointer;appearance:none}
.lad select:focus,.lad input:focus{outline:none}
.lad::after{content:"";position:absolute;right:20px;bottom:20px;width:7px;height:7px;pointer-events:none;
  border-right:1.8px solid var(--samar);border-bottom:1.8px solid var(--samar);transform:rotate(45deg)}
.lad.tanggal::after{display:none}
.pnl-kaki{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 26px;
  flex-wrap:wrap;background:var(--krem)}
.pnl-kaki p{font-size:13.2px;color:var(--samar);max-width:52ch}

/* ============ pita percaya ============ */
.percaya{background:var(--hijau-p);color:#fff;padding-block:26px;position:relative;z-index:2}
.percaya .kotak{display:flex;align-items:center;justify-content:center;gap:14px 40px;flex-wrap:wrap}
.pc{display:flex;align-items:center;gap:10px;font-size:13.8px;color:rgba(255,255,255,.82)}
.pc svg{width:19px;height:19px;stroke:var(--limau-c);fill:none;stroke-width:2;stroke-linecap:round;
  stroke-linejoin:round;flex:none}
.pc b{color:#fff;font-weight:700}

/* ============ bagian umum ============ */
section{padding-block:88px}
.kepala{max-width:60ch;margin-bottom:44px}
.kepala h2{font-size:clamp(30px,4.4vw,46px);margin-top:13px}
.kepala p{color:var(--redup);margin-top:16px;font-size:17.2px}
.kepala.tengah{margin-inline:auto;text-align:center}
.judul-baris{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-bottom:40px}
.judul-baris .kepala{margin-bottom:0}
.tautan-lagi{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:14.5px;color:var(--hijau);
  border-bottom:1.5px solid var(--hijau-l);padding-bottom:3px;transition:.18s}
.tautan-lagi:hover{border-bottom-color:var(--hijau);gap:11px}

/* ============ kartu layanan ============ */
.layanan{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px}
.ly{background:var(--papan);border-radius:var(--r3);overflow:hidden;border:1px solid var(--garis);
  box-shadow:var(--s1);transition:transform .35s var(--gerak),box-shadow .35s;display:flex;flex-direction:column}
.ly:hover{transform:translateY(-6px);box-shadow:var(--s3)}
.ly-gbr{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--krem2)}
.ly-gbr img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--gerak)}
.ly:hover .ly-gbr img{transform:scale(1.07)}
.ly-lencana{position:absolute;top:13px;left:13px;background:rgba(255,255,255,.94);backdrop-filter:blur(6px);
  border-radius:99px;padding:6px 13px;font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--hijau)}
.ly-isi{padding:22px 22px 20px;display:flex;flex-direction:column;flex:1;gap:11px}
.ly h3{font-size:21px;letter-spacing:-.025em}
.ly .kutip{color:var(--redup);font-size:15px;line-height:1.55}
.ly-meta{display:flex;gap:7px;flex-wrap:wrap;margin-top:2px}
.ly-meta span{display:inline-flex;align-items:center;gap:5px;font-size:12.3px;font-weight:600;color:var(--redup);
  background:var(--krem);border:1px solid var(--garis);border-radius:99px;padding:5px 11px}
.ly-meta svg{width:12px;height:12px;stroke:var(--hijau-t);fill:none;stroke-width:2.2;stroke-linecap:round;
  stroke-linejoin:round}
.ly-kaki{margin-top:auto;padding-top:15px;border-top:1px solid var(--garis);display:flex;
  align-items:center;justify-content:space-between;gap:12px}
.ly-harga{font-size:13px;color:var(--samar);font-weight:600}
.ly-harga b{display:block;font-family:"IBM Plex Mono",monospace;font-size:16.5px;color:var(--tinta);
  font-weight:600;letter-spacing:-.02em}

/* ============ destinasi ============ */
.destinasi{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.ds{position:relative;border-radius:var(--r3);overflow:hidden;aspect-ratio:3/4;background:var(--hijau-p);
  display:block;transition:transform .35s var(--gerak),box-shadow .35s;box-shadow:var(--s2)}
.ds:hover{transform:translateY(-6px);box-shadow:var(--s3)}
.ds img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--gerak)}
.ds:hover img{transform:scale(1.08)}
.ds::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(13,29,74,.92) 0%,rgba(13,29,74,.35) 42%,rgba(13,29,74,.06) 72%)}
.ds-isi{position:absolute;inset:auto 0 0 0;padding:20px;z-index:2;color:#fff}
.ds-isi h3{font-size:23px;font-family:"Playfair Display",serif;font-weight:600}
.ds-isi p{font-size:13.3px;color:rgba(255,255,255,.76);margin-top:5px;line-height:1.45}
.ds-isi .n{display:inline-flex;align-items:center;gap:6px;font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--limau-c);margin-bottom:8px;white-space:nowrap}
.ds-segera{position:absolute;top:14px;right:14px;z-index:3;background:rgba(255,255,255,.16);
  backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.3);border-radius:99px;padding:5px 12px;
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#fff}
.ds.segera img{filter:grayscale(.55) brightness(.75)}
.ds.besar{aspect-ratio:auto;grid-row:span 2}
@media (min-width:900px){ .ds.besar{grid-column:span 2;aspect-ratio:16/11;grid-row:auto} }

/* ============ venue ============ */
.venue{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px}
.vn{background:var(--papan);border-radius:var(--r2);overflow:hidden;border:1px solid var(--garis);
  box-shadow:var(--s1);transition:transform .3s var(--gerak),box-shadow .3s;display:flex;flex-direction:column}
.vn:hover{transform:translateY(-4px);box-shadow:var(--s3)}
.vn-gbr{aspect-ratio:16/10;overflow:hidden;background:var(--krem2);position:relative}
.vn-gbr img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--gerak)}
.vn:hover .vn-gbr img{transform:scale(1.06)}
.vn-sumber{position:absolute;bottom:11px;left:11px;border-radius:99px;padding:5px 11px;
  font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;backdrop-filter:blur(8px)}
.vn-sumber.resmi{background:rgba(25,56,143,.9);color:#fff}
.vn-sumber.kira{background:rgba(255,255,255,.9);color:var(--karang);border:1px solid rgba(217,97,78,.4)}
.vn-isi{padding:18px 19px;display:flex;flex-direction:column;gap:9px;flex:1}
.vn h3{font-size:17.5px;letter-spacing:-.02em;line-height:1.25}
.vn .lokasi{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--samar)}
.vn .lokasi svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;flex:none}
.vn .cip{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.vn .cip span{font-size:11.8px;color:var(--redup);background:var(--krem);border:1px solid var(--garis);
  border-radius:7px;padding:4px 9px}
.vn-kaki{margin-top:auto;padding-top:14px;border-top:1px solid var(--garis);display:flex;align-items:flex-end;
  justify-content:space-between;gap:10px}
.vn-kaki .h{font-size:12px;color:var(--samar);font-weight:600;line-height:1.3}
.vn-kaki .h b{display:block;font-family:"IBM Plex Mono",monospace;font-size:17px;color:var(--tinta);
  font-weight:600;letter-spacing:-.02em;margin-top:2px}

/* ============ aktivitas ============ */
.aktivitas{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.ak{background:var(--papan);border:1px solid var(--garis);border-radius:var(--r2);padding:20px 18px;
  display:flex;flex-direction:column;gap:10px;transition:transform .28s var(--gerak),box-shadow .28s,
  border-color .28s;position:relative;overflow:hidden}
.ak::before{content:"";position:absolute;inset:auto 0 0 0;height:3px;background:var(--hijau-t);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--gerak)}
.ak:hover{transform:translateY(-4px);box-shadow:var(--s3);border-color:var(--garis2)}
.ak:hover::before{transform:scaleX(1)}
.ak .ik{width:44px;height:44px;border-radius:13px;background:var(--hijau-l);display:grid;place-items:center;
  color:var(--hijau);transition:.3s}
.ak:hover .ik{background:var(--hijau);color:#fff;transform:rotate(-6deg) scale(1.06)}
.ak .ik svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;
  stroke-linejoin:round}
.ak h3{font-size:16.5px;letter-spacing:-.02em}
.ak p{font-size:13.6px;color:var(--redup);line-height:1.5;flex:1}
.ak .tambah{margin-top:4px;display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;
  color:var(--hijau);background:none;border:none;padding:0;cursor:pointer;transition:.18s}
.ak .tambah svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round}
.ak .tambah:hover{gap:10px}
.ak .tambah.sudah{color:var(--limau)}

/* ============ penyusun acara ============ */
.susun{background:var(--hijau-p);color:#fff;position:relative;overflow:hidden}
.susun::before{content:"";position:absolute;top:-30%;right:-10%;width:60%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(47,87,199,.22),transparent 68%);pointer-events:none}
.susun .kepala h2,.susun .kepala p{color:#fff}
.susun .kepala p{color:rgba(255,255,255,.72)}
.susun-kisi{display:grid;grid-template-columns:1.25fr .85fr;gap:26px;align-items:start;position:relative}
.susun-pil{display:flex;flex-direction:column;gap:14px}
.blok{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--r2);
  padding:18px 20px;backdrop-filter:blur(6px)}
.blok h4{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--limau-c);font-weight:600;margin-bottom:13px}
.pilihan{display:flex;gap:8px;flex-wrap:wrap}
.pilihan button{border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.05);color:rgba(255,255,255,.86);
  border-radius:99px;padding:9px 16px;font-size:13.6px;font-weight:600;cursor:pointer;transition:.18s}
.pilihan button:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4)}
.pilihan button[aria-pressed=true]{background:var(--limau-c);border-color:var(--limau-c);color:#372B0A}
.geser{display:flex;align-items:center;gap:14px}
.geser input[type=range]{flex:1;appearance:none;height:4px;border-radius:99px;background:rgba(255,255,255,.2)}
.geser input[type=range]::-webkit-slider-thumb{appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--limau-c);cursor:pointer;border:3px solid var(--hijau-p);box-shadow:0 2px 8px rgba(0,0,0,.4)}
.geser input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--limau-c);
  cursor:pointer;border:3px solid var(--hijau-p)}
.geser output{font-family:"IBM Plex Mono",monospace;font-size:20px;font-weight:600;min-width:82px;
  text-align:right;letter-spacing:-.02em}
.nota{position:sticky;top:96px;background:var(--papan);color:var(--tinta);border-radius:var(--r3);
  box-shadow:var(--s4);overflow:hidden}
.nota-kepala{background:var(--krem);padding:18px 22px;border-bottom:1px solid var(--garis)}
.nota-kepala h3{font-size:19px}
.nota-kepala p{font-size:13px;color:var(--samar);margin-top:3px}
.nota-baris{display:flex;flex-direction:column;max-height:280px;overflow-y:auto}
.nb{display:flex;align-items:center;gap:11px;padding:12px 22px;border-bottom:1px solid var(--garis);
  font-size:14.2px;animation:masuk .3s var(--gerak)}
@keyframes masuk{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.nb .n{flex:1;line-height:1.35}
.nb .n small{display:block;color:var(--samar);font-size:12px}
.nb .v{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:14px;white-space:nowrap}
.nb .v.tanya{color:var(--samar);font-size:12.2px;font-family:inherit;font-weight:600}
.nb .x{width:24px;height:24px;border-radius:7px;border:none;background:var(--krem2);color:var(--samar);
  cursor:pointer;display:grid;place-items:center;flex:none;transition:.16s}
.nb .x:hover{background:var(--karang-l);color:var(--karang)}
.nb .x svg{width:12px;height:12px;stroke:currentColor;stroke-width:2.6;fill:none;stroke-linecap:round}
.nota-kosong{padding:34px 22px;text-align:center;color:var(--samar);font-size:14px}
.nota-kosong svg{width:38px;height:38px;stroke:var(--garis2);fill:none;stroke-width:1.5;margin:0 auto 12px}
.nota-total{padding:18px 22px;background:var(--krem);border-top:1px solid var(--garis)}
.tot-baris{display:flex;justify-content:space-between;gap:12px;font-size:13.6px;color:var(--redup);
  padding-block:4px}
.tot-baris.besar{font-size:15px;font-weight:800;color:var(--tinta);border-top:1px solid var(--garis2);
  margin-top:8px;padding-top:12px}
.tot-baris.besar .v{font-family:"IBM Plex Mono",monospace;font-size:22px;letter-spacing:-.03em}
.nota-total .catatan{font-size:11.6px;color:var(--samar);line-height:1.45;margin-top:11px}
.nota-aksi{padding:0 22px 20px;display:flex;flex-direction:column;gap:8px}

/* ============ studi kasus ============ */
.kasus{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:22px}
.ks{position:relative;border-radius:var(--r3);overflow:hidden;background:var(--hijau-p);min-height:330px;
  display:flex;align-items:flex-end;box-shadow:var(--s2);transition:transform .35s var(--gerak),box-shadow .35s}
.ks:hover{transform:translateY(-6px);box-shadow:var(--s3)}
.ks img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--gerak)}
.ks:hover img{transform:scale(1.07)}
.ks::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(13,29,74,.94) 4%,rgba(13,29,74,.5) 46%,rgba(13,29,74,.1) 78%)}
.ks-isi{position:relative;z-index:2;padding:24px;color:#fff;width:100%}
.ks-isi .klien{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--limau-c)}
.ks-isi h3{font-size:23px;margin-top:9px;font-family:"Playfair Display",serif;font-weight:600;line-height:1.2}
.ks-fakta{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.ks-fakta span{font-size:12px;font-weight:600;background:rgba(255,255,255,.14);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.2);border-radius:99px;padding:5px 11px}

/* ============ ulasan ============ */
.ulasan{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.ul{background:var(--papan);border:1px solid var(--garis);border-radius:var(--r2);padding:22px;
  box-shadow:var(--s1);display:flex;flex-direction:column;gap:12px}
.bintang{display:flex;gap:2px}
.bintang svg{width:16px;height:16px;fill:#FDC220}
.ul p{font-size:15px;line-height:1.6;color:var(--redup);flex:1}
.ul .siapa{display:flex;align-items:center;gap:11px;padding-top:12px;border-top:1px solid var(--garis)}
.ul .ava{width:40px;height:40px;border-radius:50%;background:var(--hijau-l);color:var(--hijau);display:grid;
  place-items:center;font-weight:800;font-size:15px;flex:none}
.ul .siapa b{display:block;font-size:14.3px}
.ul .siapa span{font-size:12.5px;color:var(--samar)}

/* ============ korporat ============ */
.korporat{background:var(--papan);border-radius:var(--r4);padding:clamp(30px,5vw,58px);
  box-shadow:var(--s2);border:1px solid var(--garis)}
.korporat-kisi{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:2px;
  background:var(--garis);border:1px solid var(--garis);border-radius:var(--r2);overflow:hidden;margin-top:34px}
.kp{background:var(--papan);padding:19px 18px;display:flex;align-items:flex-start;gap:11px;
  transition:background .2s}
.kp:hover{background:var(--hijau-ll)}
.kp svg{width:17px;height:17px;stroke:var(--hijau-t);fill:none;stroke-width:2.4;stroke-linecap:round;
  stroke-linejoin:round;flex:none;margin-top:3px}
.kp b{font-size:14.5px;font-weight:700}
.kp small{display:block;color:var(--samar);font-size:12.6px;line-height:1.45;margin-top:2px}

/* ============ tutup ============ */
.tutup{background:linear-gradient(150deg,var(--hijau-p),#16327E 55%,#0E235C);color:#fff;
  border-radius:var(--r4);padding:clamp(34px,6vw,72px);position:relative;overflow:hidden;text-align:center}
.tutup::before{content:"";position:absolute;inset:-40% -10% auto;height:120%;
  background:radial-gradient(ellipse at 50% 0%,rgba(255,195,31,.16),transparent 62%);pointer-events:none}
.tutup h2{font-size:clamp(30px,5.4vw,54px);color:#fff;position:relative;max-width:17ch;margin-inline:auto}
.tutup p{color:rgba(255,255,255,.76);font-size:17.5px;margin-top:18px;max-width:50ch;margin-inline:auto;
  position:relative}
.tutup .aksi{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:32px;position:relative}

/* ============ kaki ============ */
footer.kaki{background:var(--hijau-p);color:rgba(255,255,255,.9);padding-block:60px 0;margin-top:88px}
footer.kaki .atas{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px;
  padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.13)}
footer.kaki .logo img{height:100px;width:auto;margin-bottom:18px}
footer.kaki .ringkas{color:rgba(255,255,255,.62);font-size:14.2px;line-height:1.6;max-width:38ch}
footer.kaki h4{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--limau-c);margin-bottom:15px;font-weight:600}
footer.kaki ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
footer.kaki li{font-size:14px;color:rgba(255,255,255,.62);line-height:1.5}
footer.kaki a{color:rgba(255,255,255,.88);transition:.16s}
footer.kaki a:hover{color:#fff;text-decoration:underline}
footer.kaki .sos{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}
footer.kaki .sos a{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.09);
  display:grid;place-items:center;color:#fff;transition:.2s var(--gerak)}
footer.kaki .sos a:hover{background:var(--limau-c);color:#372B0A;transform:translateY(-3px)}
footer.kaki .sos svg{width:18px;height:18px;fill:currentColor}
footer.kaki .bawah{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-block:22px 106px;font-size:12.6px;color:rgba(255,255,255,.45)}
footer.kaki .lencana{display:flex;gap:8px;flex-wrap:wrap}
footer.kaki .lencana span{font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  border:1px solid rgba(255,255,255,.17);border-radius:99px;padding:5px 11px;color:rgba(255,255,255,.6)}

/* ============ WA cerdas ============ */
.wa-apung{position:fixed;right:20px;bottom:20px;z-index:80;display:flex;flex-direction:column;
  align-items:flex-end;gap:10px}
.wa-menu{background:var(--papan);border-radius:var(--r2);box-shadow:var(--s4);border:1px solid var(--garis);
  overflow:hidden;width:268px;transform-origin:bottom right;transition:opacity .22s,transform .28s var(--gerak)}
.wa-menu[hidden]{display:block!important;opacity:0;transform:scale(.9) translateY(10px);pointer-events:none}
.wa-menu .kep{padding:15px 17px;background:var(--hijau-p);color:#fff}
.wa-menu .kep b{font-size:14.5px;display:block}
.wa-menu .kep small{font-size:12px;color:rgba(255,255,255,.65);display:flex;align-items:center;gap:6px;
  margin-top:3px}
.wa-menu .kep small::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--limau-c)}
.wa-menu a{display:flex;align-items:center;gap:10px;padding:12px 17px;font-size:14px;font-weight:600;
  border-bottom:1px solid var(--garis);transition:.15s}
.wa-menu a:last-child{border-bottom:none}
.wa-menu a:hover{background:var(--hijau-l);color:var(--hijau);padding-left:21px}
.wa-menu a svg{width:16px;height:16px;stroke:var(--hijau-t);fill:none;stroke-width:2;stroke-linecap:round;
  stroke-linejoin:round;flex:none}
.wa-tombol{display:inline-flex;align-items:center;gap:10px;color:#fff;border:none;background:linear-gradient(135deg,#1C3884,#102662);
  border-radius:99px;padding:15px 24px;font-size:15px;font-weight:700;cursor:pointer;
  box-shadow:0 14px 32px -12px rgba(25,56,143,.85);transition:transform .22s var(--gerak),background .2s}
.wa-tombol:hover{background:linear-gradient(135deg,#25459E,#19388F);transform:translateY(-2px) scale(1.02)}
.wa-tombol svg{width:21px;height:21px;fill:currentColor}

/* ============ nav bawah HP ============ */
.nav-hp{display:none;position:fixed;inset:auto 0 0 0;z-index:75;background:rgba(255,255,255,.94);
  backdrop-filter:blur(18px);border-top:1px solid var(--garis);padding:7px 4px calc(7px + env(safe-area-inset-bottom))}
.nav-hp ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,1fr)}
.nav-hp a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 3px;font-size:10.5px;
  font-weight:700;color:var(--samar);position:relative}
.nav-hp a svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;
  stroke-linejoin:round}
.nav-hp a.aktif{color:var(--hijau)}
.nav-hp .tit{position:absolute;top:3px;right:calc(50% - 19px);min-width:17px;height:17px;border-radius:99px;
  background:var(--karang);color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center;padding:0 4px;
  transform:scale(0);transition:transform .25s var(--gerak)}
.nav-hp .tit.ada{transform:scale(1)}

/* ============ laci menu HP ============ */
.laci{position:fixed;inset:0;z-index:90;background:rgba(13,29,74,.5);backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;transition:opacity .25s}
.laci.buka{opacity:1;pointer-events:auto}
.laci-isi{position:absolute;inset:0 0 0 auto;width:min(340px,86vw);background:var(--krem);padding:22px;
  transform:translateX(100%);transition:transform .32s var(--gerak);overflow-y:auto;
  display:flex;flex-direction:column;gap:6px}
.laci.buka .laci-isi{transform:none}
.laci-isi .tutup-laci{align-self:flex-end;width:42px;height:42px;border-radius:12px;border:1px solid var(--garis2);
  background:var(--papan);display:grid;place-items:center;cursor:pointer;margin-bottom:12px}
.laci-isi .tutup-laci svg{width:18px;height:18px;stroke:var(--tinta);fill:none;stroke-width:2.2;stroke-linecap:round}
.laci-isi a{padding:13px 14px;border-radius:12px;font-weight:700;font-size:16px;transition:.16s}
.laci-isi a:hover{background:var(--hijau-l);color:var(--hijau)}
.laci-isi .pisah{height:1px;background:var(--garis);margin-block:10px}

/* ============ animasi masuk ============ */
.muncul{opacity:0;transform:translateY(22px);transition:opacity .7s var(--gerak),transform .7s var(--gerak)}
.muncul.tampil{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .muncul{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ============ layar kecil ============ */
@media (max-width:1040px){
  .nav{display:none}
  .buka-menu{display:flex}
  .susun-kisi{grid-template-columns:1fr}
  .nota{position:static}
  footer.kaki .atas{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  section{padding-block:62px}
  html{scroll-padding-top:70px}
  .bilah .kotak{height:64px}
  .merek img{height:34px}
  .hero-isi{padding-block:110px 62px}
  .perencana{margin-top:-40px}
  .pnl-kepala,.tab{padding-inline:18px}
  .pnl-kaki{padding:16px 18px}
  .ladang{grid-template-columns:1fr 1fr}
  /* di HP, Acara Saya dan Penawaran sudah ada di menu bawah, jadi bilah atas
     cukup logo dan tombol menu supaya tidak terdorong keluar layar */
  .aksi-bilah .tbl{display:none}
  .merek .kata b{font-size:13.5px}
  .merek .kata i{font-size:8.8px}
  footer.kaki .atas{grid-template-columns:1fr;gap:26px}
  footer.kaki .logo img{height:78px}
  .nav-hp{display:block}
  .wa-apung{bottom:76px;right:14px}
  .wa-tombol{padding:13px 19px;font-size:14px}
  .tutup{padding:34px 22px}
  .gulir{display:none}
}
@media (max-width:430px){
  .ladang{grid-template-columns:1fr}
  .destinasi{grid-template-columns:1fr}
}

/* ============ pita foto lebar ============ */
.pita{position:relative;height:clamp(320px,52vw,580px);overflow:hidden;background:var(--hijau-p);
  display:flex;align-items:flex-end}
.pita img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.pita::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(13,29,74,.9) 2%,rgba(13,29,74,.3) 44%,rgba(13,29,74,.05) 76%)}
.pita .kotak{position:relative;z-index:2;padding-bottom:40px}
.pita blockquote{margin:0;color:#fff;font-family:"Playfair Display",serif;font-weight:600;
  font-size:clamp(23px,3.7vw,42px);line-height:1.2;max-width:19ch;letter-spacing:-.02em}
.pita figcaption{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--limau-c);margin-top:16px}

/* ============ galeri ============ */
.saring{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.saring button{border:1px solid var(--garis2);background:var(--papan);color:var(--redup);border-radius:99px;
  padding:9px 18px;font-size:13.8px;font-weight:700;cursor:pointer;transition:.18s}
.saring button:hover{border-color:var(--hijau);color:var(--hijau)}
.saring button[aria-pressed=true]{background:var(--hijau);border-color:var(--hijau);color:#fff;
  box-shadow:0 8px 18px -8px rgba(25,56,143,.6)}
.galeri{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;grid-auto-rows:210px;
  grid-auto-flow:dense}
.gl{position:relative;overflow:hidden;border-radius:var(--r2);background:var(--krem2);margin:0;
  cursor:zoom-in;transition:opacity .3s,transform .35s var(--gerak)}
.gl img{width:100%;height:100%;object-fit:cover;transition:transform .85s var(--gerak)}
.gl:hover img{transform:scale(1.07)}
.gl.tegak{grid-row:span 2}
.gl.lebar{grid-column:span 2}
.gl figcaption{position:absolute;inset:auto 0 0 0;padding:16px 15px 13px;color:#fff;z-index:2;
  background:linear-gradient(0deg,rgba(13,29,74,.92),transparent);opacity:0;transform:translateY(8px);
  transition:opacity .28s,transform .28s var(--gerak)}
.gl:hover figcaption,.gl:focus-within figcaption{opacity:1;transform:none}
.gl figcaption b{display:block;font-size:14.5px;letter-spacing:-.01em}
.gl figcaption span{font-size:12.2px;color:rgba(255,255,255,.72);line-height:1.4;display:block;margin-top:2px}
.gl[hidden]{display:none}

/* ============ lihat foto besar ============ */
.lihat{position:fixed;inset:0;z-index:95;background:rgba(9,20,51,.94);backdrop-filter:blur(10px);
  display:grid;place-items:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .25s}
.lihat.buka{opacity:1;pointer-events:auto}
.lihat img{max-width:min(1280px,94vw);max-height:80vh;width:auto;border-radius:var(--r2);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8)}
.lihat .ket{color:#fff;text-align:center;margin-top:18px;max-width:60ch}
.lihat .ket b{display:block;font-size:17px;font-family:"Playfair Display",serif}
.lihat .ket span{font-size:13.5px;color:rgba(255,255,255,.66)}
.lihat .tutup-lihat{position:absolute;top:18px;right:18px;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.1);color:#fff;cursor:pointer;
  display:grid;place-items:center;transition:.18s}
.lihat .tutup-lihat:hover{background:rgba(255,255,255,.24)}
.lihat .tutup-lihat svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round}
.lihat .geser-foto{position:absolute;top:50%;width:50px;height:50px;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.1);color:#fff;cursor:pointer;
  display:grid;place-items:center;transform:translateY(-50%);transition:.18s}
.lihat .geser-foto:hover{background:rgba(255,255,255,.24)}
.lihat .geser-foto svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.lihat .mundur{left:18px}.lihat .mundur svg{transform:rotate(180deg)}
.lihat .maju{right:18px}

/* ============ kartu aktivitas berfoto ============ */
.ak.berfoto{padding:0;overflow:hidden}
.ak.berfoto .ak-gbr{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--krem2)}
.ak.berfoto .ak-gbr img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--gerak)}
.ak.berfoto:hover .ak-gbr img{transform:scale(1.07)}
.ak.berfoto .ak-gbr .ik{position:absolute;bottom:-18px;left:16px;width:40px;height:40px;border-radius:12px;
  background:var(--papan);box-shadow:var(--s2);z-index:2}
.ak.berfoto:hover .ak-gbr .ik{background:var(--hijau);color:#fff}
.ak.berfoto .ak-isi{padding:26px 18px 20px;display:flex;flex-direction:column;gap:9px;flex:1}

@media (max-width:900px){ .galeri{grid-template-columns:repeat(2,1fr);grid-auto-rows:172px} }
@media (max-width:560px){
  .galeri{grid-template-columns:1fr;grid-auto-rows:210px}
  .gl.lebar,.gl.tegak{grid-column:auto;grid-row:auto}
  .lihat .geser-foto{top:auto;bottom:20px;transform:none}
  .lihat .mundur{left:24px}.lihat .maju{right:24px}
}

/* ============ pengaman ukuran ikon sebaris ============ */
/* setiap SVG yang ditaruh langsung di dalam teks wajib punya ukuran,
   kalau tidak ia melar mengikuti wadahnya */
.ds-isi .n svg{width:13px;height:13px;flex:none;stroke:currentColor}
.tautan-lagi svg{width:16px;height:16px;flex:none;stroke:currentColor}
.pnl-kaki .tbl svg,.ly-kaki .tbl svg{width:17px;height:17px}
/* kaki kartu layanan: satu tombol selebar kartu */
.ly-kaki{display:block}
.ly-kaki .tbl{width:100%;justify-content:center}

svg:not([width]):not([height]){max-height:1.4em}

/* ============ destinasi yang masih disusun ============ */
.segera-baris{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:20px;
  padding:16px 18px;border:1px dashed var(--garis2);border-radius:var(--r2);background:var(--krem)}
.segera-baris .lab{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--samar);font-weight:600;margin-right:2px}
.segera-baris .sg{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;
  color:var(--redup);background:var(--papan);border:1px solid var(--garis);border-radius:99px;
  padding:7px 14px}
.segera-baris .sg svg{width:13px;height:13px;stroke:var(--samar);fill:none;stroke-width:2;flex:none}
.segera-baris .tautan-lagi{margin-left:auto;font-size:13.5px}
@media (max-width:700px){ .segera-baris .tautan-lagi{margin-left:0;margin-top:4px} }

/* menu yang menuju halaman lain, dibedakan tipis */
.nav a.nav-luar{border:1px solid rgba(255,255,255,.28);margin-left:6px}
.bilah.turun .nav a.nav-luar{border-color:var(--garis2)}
.bilah.turun .nav a.nav-luar:hover{border-color:var(--hijau)}

/* ================= dokumentasi berjalan dua baris ================= */
.ban{margin-top:4px;display:flex;flex-direction:column;gap:14px}
.ban-baris{position:relative;overflow:hidden;padding:10px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.ban-rel{display:flex;gap:14px;width:max-content;will-change:transform}
.ban-baris[data-arah=kiri] .ban-rel{animation:banKiri 64s linear infinite}
.ban-baris[data-arah=kanan] .ban-rel{animation:banKanan 74s linear infinite}
.ban-baris:hover .ban-rel{animation-play-state:paused}
@keyframes banKiri{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes banKanan{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
.ban .gl,.ban .gl-klon{flex:none;height:252px;width:448px;margin:0;position:relative;overflow:hidden;
  border-radius:16px;background:var(--krem2);cursor:zoom-in;
  box-shadow:0 3px 6px rgba(11,24,62,.07),0 22px 38px -20px rgba(11,24,62,.5);
  transition:transform .32s cubic-bezier(.2,.85,.25,1),box-shadow .32s}
.ban .gl[data-bentuk=potret],.ban .gl-klon[data-bentuk=potret]{width:189px}
.ban .gl::after,.ban .gl-klon::after{content:"";position:absolute;inset:0;border-radius:16px;
  pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),
  inset 0 -56px 52px -40px rgba(11,24,62,.6)}
.ban .gl:hover,.ban .gl-klon:hover{transform:translateY(-8px) scale(1.02);
  box-shadow:0 6px 12px rgba(11,24,62,.1),0 38px 58px -22px rgba(11,24,62,.62)}
.ban .gl img,.ban .gl-klon img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .85s ease}
.ban .gl:hover img,.ban .gl-klon:hover img{transform:scale(1.07)}
.ban .gl figcaption,.ban .gl-klon figcaption{position:absolute;inset:auto 0 0 0;z-index:2;
  padding:16px 15px 13px;color:#fff;opacity:0;transform:translateY(7px);
  transition:opacity .28s,transform .28s;background:none;border:0}
.ban .gl:hover figcaption,.ban .gl:focus-within figcaption,
.ban .gl-klon:hover figcaption{opacity:1;transform:none}
.ban .gl figcaption b,.ban .gl-klon figcaption b{display:block;font-size:14.5px;letter-spacing:-.01em}
.ban .gl figcaption span,.ban .gl-klon figcaption span{display:block;margin-top:2px;
  font-size:12.2px;line-height:1.4;color:rgba(255,255,255,.75)}
.ban .gl[hidden],.ban .gl-klon[hidden]{display:none}
@media (max-width:760px){
  .ban .gl,.ban .gl-klon{height:196px;width:348px}
  .ban .gl[data-bentuk=potret],.ban .gl-klon[data-bentuk=potret]{width:147px}
}
@media (prefers-reduced-motion:reduce){
  .ban-rel{animation:none !important}
  .ban-baris{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
}

/* ============ PERENCANA ISIAN: peserta, rentang tanggal, dana ============ */
.lad.isian::after{display:none}
/* sel tanggal butuh ruang dua kolom supaya tanggalnya tidak terpotong */
.lad.tanggal{grid-column:span 2}
.lad .dua-tgl{display:flex;align-items:center;gap:10px}
.lad .dua-tgl input{flex:1 1 0;min-width:0;font-size:14.5px;font-weight:700}
.lad .dua-tgl .pisah{flex:none;font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  letter-spacing:.1em;color:var(--samar)}
.lad .uang{display:flex;align-items:baseline;gap:5px}
.lad .uang .rp{flex:none;font-size:15.2px;font-weight:700;color:var(--tinta)}
.lad .uang input{flex:1 1 0;min-width:0}
.lad-tanda{display:block;margin-top:3px;font-family:"IBM Plex Mono",monospace;
  font-size:10.5px;letter-spacing:.08em;color:var(--samar);line-height:1.35}
.lad-tanda.hidup{color:var(--hijau-t);font-weight:600}
.lad input[type=number]{-moz-appearance:textfield}
.lad input[type=number]::-webkit-outer-spin-button,
.lad input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.lad input::placeholder{font-weight:500;color:var(--samar);opacity:1}
.lad input[type=date]{cursor:pointer}
.lad-tanda.awas{color:#C4506A;font-weight:600}
@media (max-width:980px){.lad.tanggal{grid-column:span 2}}
@media (max-width:680px){
  .lad.tanggal{grid-column:span 1}
  .lad .dua-tgl{flex-direction:column;align-items:stretch;gap:2px}
  .lad .dua-tgl .pisah{align-self:flex-start}
}

/* ============ TOMBOL TIMBUL DAN TANGGAP SENTUHAN ============ */
.tbl{position:relative;overflow:hidden;isolation:isolate;
  transition:transform .18s var(--gerak),background .2s,box-shadow .2s,border-color .2s,filter .2s}
.tbl::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,0) 48%,rgba(0,0,0,.07));
  opacity:.9}
.tbl.utama{background:linear-gradient(178deg,#1B3A91,var(--hijau) 46%,#0E286E);
  box-shadow:0 1px 0 rgba(255,255,255,.24) inset,0 -2px 0 rgba(0,0,0,.22) inset,
             0 2px 3px -1px rgba(25,56,143,.5),0 12px 26px -12px rgba(25,56,143,.8)}
.tbl.utama:hover{background:linear-gradient(178deg,#2145A8,#14307E 46%,#123288);
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 -2px 0 rgba(0,0,0,.22) inset,
             0 4px 6px -2px rgba(25,56,143,.5),0 20px 36px -14px rgba(25,56,143,.85)}
.tbl.karang{background:linear-gradient(178deg,#FBC123,var(--karang) 46%,#CC9705);
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 -2px 0 rgba(0,0,0,.2) inset,
             0 2px 3px -1px rgba(217,97,78,.45),0 12px 26px -12px rgba(217,97,78,.75)}
.tbl.garis{background:linear-gradient(178deg,#fff,var(--papan) 60%,#EAEDF6);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 -2px 0 rgba(0,0,0,.05) inset,
             0 1px 2px rgba(11,24,62,.07),0 8px 18px -10px rgba(11,24,62,.25)}
.tbl.garis:hover{box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 -2px 0 rgba(25,56,143,.14) inset,
             0 2px 4px rgba(11,24,62,.08),0 14px 26px -12px rgba(25,56,143,.35)}
.tbl.terang{box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 -2px 0 rgba(0,0,0,.16) inset,
             0 10px 24px -12px rgba(0,0,0,.5)}
.tbl:hover{transform:translateY(-2px)}
/* ditekan: benar benar terasa masuk ke dalam */
.tbl:active{transform:translateY(1px) scale(.985);filter:saturate(1.06)}
.tbl.utama:active{box-shadow:0 2px 5px rgba(0,0,0,.28) inset,0 1px 0 rgba(255,255,255,.1) inset,
             0 2px 6px -3px rgba(25,56,143,.6)}
.tbl.karang:active{box-shadow:0 2px 5px rgba(0,0,0,.26) inset,0 2px 6px -3px rgba(217,97,78,.6)}
.tbl.garis:active,.tbl.terang:active{box-shadow:0 2px 5px rgba(11,24,62,.16) inset}
.tbl:focus-visible{outline:none;box-shadow:0 0 0 3px var(--papan),0 0 0 5.5px var(--hijau)}
.tbl svg{transition:transform .22s var(--gerak)}
.tbl:hover svg{transform:translateX(3px)}
/* riak saat diklik */
.tbl .riak{position:absolute;border-radius:50%;transform:translate(-50%,-50%) scale(0);
  background:rgba(255,255,255,.45);pointer-events:none;z-index:-1;
  animation:riakTbl .55s var(--gerak) forwards}
.tbl.garis .riak{background:rgba(25,56,143,.16)}
@keyframes riakTbl{to{transform:translate(-50%,-50%) scale(2.6);opacity:0}}
@media (prefers-reduced-motion:reduce){
  .tbl,.tbl svg{transition:none}
  .tbl:hover{transform:none}
  .tbl .riak{display:none}
}
/* tautan teks ikut terasa saat ditekan */
.tautan-lagi:active{transform:translateY(1px)}

/* ============ KARTU LAYANAN TERAKHIR MELEBAR, TIDAK ADA SISA KOLOM ============ */
@media (min-width:980px){
  #layanan .layanan{grid-template-columns:repeat(3,1fr)}
  #layanan .layanan .ly:last-child{grid-column:1/-1;flex-direction:row;align-items:stretch}
  #layanan .layanan .ly:last-child .ly-gbr{flex:0 0 40%;aspect-ratio:auto;min-height:250px}
  #layanan .layanan .ly:last-child .ly-isi{padding:28px 30px;justify-content:center;gap:13px}
  #layanan .layanan .ly:last-child h3{font-size:26px}
  #layanan .layanan .ly:last-child .kutip{font-size:16.5px;max-width:52ch}
  #layanan .layanan .ly:last-child .ly-kaki{padding-top:18px}
  #layanan .layanan .ly:last-child .ly-harga b{font-size:18px}
}
@media (min-width:1180px){
  #layanan .layanan .ly:last-child .ly-gbr{flex:0 0 44%}
}

/* ============ TAMBAL RUANG KOSONG DI HP ============ */
/* lima kolom perencana di kisi dua kolom menyisakan satu sel kosong di baris
   terakhir. Sel terakhir dibuat melebar penuh supaya tidak ada lubang abu abu. */
@media (max-width:979px){
  .ladang .lad:last-child{grid-column:1/-1}
  .lad.tanggal{grid-column:auto}
}
@media (max-width:430px){
  .ladang .lad:last-child{grid-column:auto}
}

/* ============ PITA PERCAYA: DI HP JADI SATU BARIS YANG BISA DIGESER ============ */
@media (max-width:820px){
  .percaya{padding-block:20px 22px;overflow:hidden}
  .percaya .kotak{display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:10px;
    overflow-x:auto;scroll-snap-type:x mandatory;padding-inline:18px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;margin-inline:-18px}
  .percaya .kotak::-webkit-scrollbar{display:none}
  .pc{flex:0 0 auto;scroll-snap-align:start;align-items:flex-start;gap:9px;
    background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
    border-radius:15px;padding:12px 15px;max-width:66vw;line-height:1.4;font-size:13px;
    box-shadow:0 1px 0 rgba(255,255,255,.10) inset,0 8px 20px -14px rgba(0,0,0,.7)}
  .pc svg{margin-top:1px}
  .pc b{display:block;margin-bottom:1px}
  /* penanda kecil bahwa barisnya bisa digeser */
  .percaya::after{content:"";position:absolute;right:0;top:0;bottom:0;width:42px;
    pointer-events:none;background:linear-gradient(90deg,rgba(16,38,98,0),var(--hijau-p))}
}
/* tombol mengambang jangan menindih tulisan pita percaya */
@media (max-width:820px){
  .percaya{padding-bottom:26px}
}

/* ============================================================
   ARAH BARU MOCKUP: font Outfit, kuning cerah CTA, badge hero,
   toggle EN/ID. Semua dilingkup .rumah supaya portal tidak ikut.
   ============================================================ */
:root{
  --kuning:#FFC31F; --kuning-t:#FFC31F; --kuning-p:#EEAF00;
  --limau-x:#FFC31F;
}
/* judul homepage pakai Outfit, bukan Playfair */
.rumah h1,.rumah h2,.rumah h3,.rumah h4,.rumah .sajian,
.rumah .ds-isi h3,.rumah .ks-isi h3,.rumah .pita blockquote,
.rumah .lihat .ket b,.rumah .ly h3{
  font-family:"Outfit","Plus Jakarta Sans",sans-serif;font-weight:700;letter-spacing:-.025em}
.rumah h1{font-weight:800}
.rumah .hero h1 em{font-style:normal;color:var(--limau-x)}

/* tombol kuning cerah, ciri khas mockup */
.tbl.kuning{color:#3A2C06;
  background:linear-gradient(178deg,var(--kuning-t),var(--kuning) 48%,var(--kuning-p));
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 -2px 0 rgba(120,88,0,.22) inset,
             0 3px 5px -1px rgba(200,147,0,.45),0 14px 30px -12px rgba(200,147,0,.7)}
.tbl.kuning:hover{filter:brightness(1.04);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 -2px 0 rgba(120,88,0,.22) inset,
             0 4px 7px -2px rgba(200,147,0,.5),0 22px 40px -14px rgba(200,147,0,.75)}
.tbl.kuning:active{box-shadow:0 2px 6px rgba(120,88,0,.3) inset}

/* badge mengambang di hero: 16 lini layanan, End-to-end */
.hero-badge{position:absolute;z-index:3;background:rgba(255,255,255,.96);
  border:1px solid rgba(255,255,255,.7);border-radius:18px;padding:14px 18px;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 18px 40px -16px rgba(10,22,56,.6);
  backdrop-filter:blur(6px);line-height:1.15}
.hero-badge b{display:block;font-family:"Outfit",sans-serif;font-weight:800;
  font-size:26px;letter-spacing:-.03em;color:var(--hijau)}
.hero-badge span{display:block;font-size:12px;color:var(--redup);margin-top:1px}
.hero-badge.b-atas{top:26%;right:5.2%}
.hero-badge.b-bawah{top:44%;right:9%;background:var(--hijau);border-color:rgba(255,255,255,.12)}
.hero-badge.b-bawah b{color:var(--kuning-t);font-size:19px}
.hero-badge.b-bawah span{color:rgba(255,255,255,.82)}
@media (max-width:1024px){ .hero-badge{display:none} }

/* toggle bahasa EN/ID */
.lang{display:inline-flex;align-items:center;gap:1px;border:1.5px solid var(--garis2);
  border-radius:99px;padding:2px;background:var(--papan);margin-right:4px}
.lang button{border:0;background:none;cursor:pointer;font-family:"IBM Plex Mono",monospace;
  font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--samar);
  padding:5px 9px;border-radius:99px;transition:.15s}
.lang button[aria-pressed=true]{background:var(--hijau);color:#fff}
.bilah.turun .lang{border-color:var(--garis2)}
@media (max-width:980px){ .lang{margin-right:0} }

/* estimasi anggaran hidup di kaki perencana */
.est-biaya{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  font-size:13.5px;color:var(--redup)}
.est-biaya b{font-family:"Outfit",sans-serif;font-weight:800;font-size:22px;
  letter-spacing:-.03em;color:var(--hijau)}
.est-biaya .pp{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--samar)}

/* ============ kartu aktivitas berikon (tanpa foto) ============ */
.ak.berikon{padding:0;overflow:hidden}
.ak.berikon .ak-cover{aspect-ratio:16/10;display:grid;place-items:center;position:relative;overflow:hidden}
.ak.berikon .ak-cover::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 72% 22%,rgba(255,255,255,.20),transparent 55%);pointer-events:none}
.ak.berikon .ak-cover::before{content:"";position:absolute;right:-26px;bottom:-32px;width:120px;height:120px;border-radius:28px;background:rgba(255,255,255,.07);transform:rotate(20deg);pointer-events:none}
.ak.berikon .ak-cover svg{position:relative;width:48px;height:48px;stroke:#fff;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 6px 14px rgba(0,0,0,.28));transition:transform .5s var(--gerak)}
.ak.berikon:hover .ak-cover svg{transform:scale(1.12) rotate(-5deg)}
.ak.berikon .ak-isi{padding:26px 18px 20px;display:flex;flex-direction:column;gap:9px;flex:1}


/* ============ pengalih bahasa, di ujung kanan bilah ============
   Ini kontrol utilitas, bukan aksi. Jadi dibuat setenang mungkin:
   tanpa kotak, dipisah garis tipis dari tombol aksi di sebelahnya. */
.aksi-bilah .lang{order:99;margin:0 0 0 4px;padding:0 0 0 13px;gap:0;
  border:0;background:none;border-radius:0;position:relative}
.aksi-bilah .lang::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:19px;background:rgba(255,255,255,.3)}
.aksi-bilah .lang button{padding:4px 5px;border-radius:6px;font-size:11.5px;letter-spacing:.07em;
  color:rgba(255,255,255,.62);background:none}
.aksi-bilah .lang button:hover{color:#fff;background:rgba(255,255,255,.12)}
.aksi-bilah .lang button[aria-pressed=true]{background:none;color:#fff;font-weight:800}
.aksi-bilah .lang button[aria-pressed=true]::after{content:"";display:block;height:1.5px;
  border-radius:2px;background:var(--limau-c);margin-top:2px}
/* pemisah miring antara ID dan EN */
.aksi-bilah .lang button:first-child{margin-right:1px}
.aksi-bilah .lang button:first-child + button::before{content:"/";margin-right:6px;
  color:rgba(255,255,255,.3);font-weight:400}

/* setelah bilah menempel, latarnya terang jadi tintanya ikut gelap */
.bilah.turun .aksi-bilah .lang::before{background:var(--garis2)}
.bilah.turun .aksi-bilah .lang button{color:var(--samar)}
.bilah.turun .aksi-bilah .lang button:hover{color:var(--hijau);background:var(--hijau-l)}
.bilah.turun .aksi-bilah .lang button[aria-pressed=true]{color:var(--tinta)}
.bilah.turun .aksi-bilah .lang button[aria-pressed=true]::after{background:var(--hijau)}
.bilah.turun .aksi-bilah .lang button:first-child + button::before{color:var(--garis2)}

@media (max-width:760px){
  /* Di HP tombol aksi disembunyikan dan tombol menu jadi kontrol utama,
     jadi tombol menu yang paling kanan. Pengalih bahasa naik ke sebelah kirinya. */
  .aksi-bilah{gap:4px}
  .aksi-bilah .lang{display:inline-flex;order:0;margin:0;padding:0;flex:none}
  .aksi-bilah .lang::before{display:none}
  .aksi-bilah .lang button{padding:5px 5px;font-size:11px}
  .aksi-bilah .lang button:first-child + button::before{margin-right:4px}
  .buka-menu{order:100}
}

@media (max-width:360px){
  /* layar sangat kecil: rapatkan gutter bilah supaya tombol menu tetap muat */
  .bilah .kotak{padding-inline:14px;gap:8px}
  .merek{gap:8px}
  .merek .kata b{font-size:12.2px;letter-spacing:.03em}
  .merek .kata i{font-size:8px}
}
@media (max-width:400px){
  /* pita kredibilitas: biarkan teksnya turun baris di layar sempit */
  .percaya .kotak{gap:10px 18px}
  .pc{align-items:flex-start;max-width:100%}
  .pc span{white-space:normal;overflow-wrap:anywhere}
}

/* ---------- video portofolio ---------- */
#video .vid-bing{position:relative;margin-top:30px;max-width:960px;margin-inline:auto}
.vid-jalur{overflow:hidden;border-radius:var(--r3)}
.vid-rel{display:flex;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.vid-sl{flex:0 0 100%;min-width:0}
.vid-bingkai{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r3);
  background:#0C1C47;box-shadow:var(--s3)}
.vid-bingkai>img{width:100%;height:100%;object-fit:cover;display:block}
.vid-bingkai>iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid-main{position:absolute;inset:0;border:0;padding:0;cursor:pointer;display:block;
  background:linear-gradient(180deg,rgba(12,28,71,.10) 0%,rgba(12,28,71,.18) 46%,rgba(12,28,71,.74) 100%)}
.vid-main .lingkar{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:74px;height:74px;border-radius:50%;background:rgba(255,255,255,.95);
  display:grid;place-items:center;box-shadow:0 14px 36px rgba(12,28,71,.42);
  transition:transform .22s cubic-bezier(.22,1,.36,1),background .22s}
.vid-main .lingkar::before{content:"";width:0;height:0;margin-left:5px;
  border-left:21px solid var(--hijau);border-top:13px solid transparent;
  border-bottom:13px solid transparent}
.vid-main:hover .lingkar,.vid-main:focus-visible .lingkar{transform:translate(-50%,-50%) scale(1.09);
  background:#fff}
.vid-main .tul{position:absolute;left:0;right:0;bottom:0;padding:22px 24px;text-align:left;color:#fff}
.vid-main .tul b{display:block;font-size:17px;font-weight:800;letter-spacing:-.01em;line-height:1.3}
.vid-main .tul span{display:block;margin-top:4px;font-size:13px;color:rgba(255,255,255,.78)}

.vid-alat{display:flex;align-items:center;gap:14px;margin-top:18px}
.vid-titik{display:flex;gap:8px;margin-right:auto}
.vid-titik button{width:34px;height:5px;border:0;padding:0;border-radius:99px;cursor:pointer;
  background:var(--garis2);transition:background .2s,width .3s}
.vid-titik button[aria-current="true"]{width:54px;background:var(--hijau)}
.vid-nav{display:flex;gap:8px}
.vid-nav button{width:42px;height:42px;border-radius:50%;cursor:pointer;background:var(--papan);
  border:1px solid var(--garis2);color:var(--hijau);display:grid;place-items:center;
  transition:background .2s,border-color .2s,transform .2s}
.vid-nav button:hover{background:var(--hijau-ll);border-color:var(--hijau-t);transform:translateY(-1px)}
.vid-nav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}

@media(max-width:640px){
  .vid-main .lingkar{width:58px;height:58px}
  .vid-main .lingkar::before{border-left-width:16px;border-top-width:10px;border-bottom-width:10px}
  .vid-main .tul{padding:15px 16px}
  .vid-main .tul b{font-size:14.5px}
  .vid-main .tul span{font-size:12px}
  .vid-nav button{width:38px;height:38px}
}

/* ---------- pemilih bahasa, satu tombol dropdown ---------- */
.langbox{position:relative;display:inline-flex;flex:none}
.lang-trig{display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;font-weight:700;letter-spacing:.07em;
  padding:7px 9px 7px 8px;border-radius:9px;border:1.5px solid var(--garis2);
  background:var(--papan);color:var(--tinta);transition:border-color .18s,background .18s,color .18s}
.lang-trig:hover{border-color:var(--hijau-t);background:var(--hijau-ll);color:var(--hijau)}
.lang-trig svg{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.lang-trig .lg-bola{width:15px;height:15px;opacity:.75}
.lang-trig .lg-panah{width:13px;height:13px;transition:transform .2s}
.lang-trig[aria-expanded="true"] .lg-panah{transform:rotate(180deg)}

.langpop{position:absolute;top:calc(100% + 8px);right:0;z-index:60;min-width:186px;
  display:flex;flex-direction:column;gap:2px;padding:6px;border-radius:14px;
  background:var(--papan);border:1px solid var(--garis);box-shadow:var(--s3)}
.langpop[hidden]{display:none}
.langpop button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  border:0;background:none;cursor:pointer;padding:9px 10px;border-radius:9px;
  font-family:inherit;font-size:13.5px;color:var(--tinta);transition:background .15s}
.langpop button:hover{background:var(--krem2)}
.langpop button b{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:700;
  letter-spacing:.08em;color:var(--samar);min-width:20px}
.langpop button[aria-pressed="true"]{background:var(--hijau-l)}
.langpop button[aria-pressed="true"] b{color:var(--hijau)}
.langpop button[aria-pressed="true"] span{font-weight:700;color:var(--hijau-p)}

/* di bilah gelap, sebelum halaman digulir */
.bilah:not(.turun) .lang-trig{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.08);
  color:#fff}
.bilah:not(.turun) .lang-trig:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.45);
  color:#fff}
@media(max-width:980px){ .langbox{margin-right:0} }
@media(max-width:560px){
  .lang-trig span{display:none}
  .lang-trig{padding:7px 7px}
  .langpop{right:auto;left:0;min-width:172px}
}

/* ---------- portofolio ---------- */
#portofolio{background:var(--krem)}
.jangkar{display:block;height:0;scroll-margin-top:90px}
.pf-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:28px 0 26px}
.pf-stat{padding:18px 18px 16px;border-radius:var(--r2);background:var(--papan);
  border:1px solid var(--garis);box-shadow:var(--s1)}
.pf-stat b{display:block;font-size:34px;font-weight:800;letter-spacing:-.03em;
  line-height:1;color:var(--hijau);font-variant-numeric:tabular-nums}
.pf-stat span{display:block;margin-top:7px;font-size:12.5px;line-height:1.45;color:var(--redup)}

.pf-tab{display:inline-flex;gap:4px;padding:4px;border-radius:999px;
  background:var(--krem2);border:1px solid var(--garis)}
.pf-tab button{border:0;background:none;cursor:pointer;font:inherit;font-size:13.5px;
  font-weight:700;color:var(--redup);padding:9px 18px;border-radius:999px;
  transition:background .2s,color .2s,box-shadow .2s}
.pf-tab button:hover{color:var(--hijau)}
.pf-tab button[aria-selected="true"]{background:var(--papan);color:var(--hijau-p);
  box-shadow:var(--s1)}

.pf-panel{margin-top:22px}
.pf-panel[hidden]{display:none}
#portofolio .vid-bing{margin-top:0;max-width:900px;margin-inline:0}

.pf-kisi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pf-item{display:flex;gap:13px;padding:17px 18px;border-radius:var(--r2);
  background:var(--papan);border:1px solid var(--garis);
  transition:border-color .2s,box-shadow .2s,transform .2s}
.pf-item:hover{border-color:var(--hijau-t);box-shadow:var(--s2);transform:translateY(-2px)}
.pf-item svg{width:21px;height:21px;flex:none;color:var(--hijau);margin-top:2px}
.pf-item b{display:block;font-size:14.5px;font-weight:800;letter-spacing:-.01em;color:var(--tinta)}
.pf-item p{margin:5px 0 0;font-size:13px;line-height:1.62;color:var(--redup)}

.pf-aksi{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

@media(max-width:860px){
  .pf-stats{grid-template-columns:repeat(2,1fr)}
  .pf-kisi{grid-template-columns:1fr}
  .pf-stat b{font-size:28px}
}
@media(max-width:480px){
  .pf-tab{width:100%}
  .pf-tab button{flex:1;padding:9px 10px;font-size:12.5px}
}

/* ---------- maskot tim kreatif ---------- */
.wa-tombol .wa-maskot{width:34px;height:34px;border-radius:50%;object-fit:cover;
  object-position:50% 50%;background:rgba(255,255,255,.22);
  box-shadow:0 0 0 2px rgba(255,255,255,.55);flex:none}
.wa-menu .kep{display:flex;align-items:center;gap:12px}
.wa-menu .kep img{width:44px;height:44px;border-radius:50%;object-fit:cover;
  object-position:50% 50%;background:rgba(255,255,255,.18);
  box-shadow:0 0 0 2px rgba(255,255,255,.4);flex:none}

.tanya-kop{margin-bottom:26px}

/* ---------- obrolan berpemandu ---------- */
.wa-tombol{position:relative}
.wa-titik{position:absolute;top:6px;right:8px;width:9px;height:9px;border-radius:50%;
  background:#FF5A47;box-shadow:0 0 0 2px #19388F;animation:obDenyut 2.6s infinite}
@keyframes obDenyut{0%,72%,100%{transform:scale(1);opacity:1}82%{transform:scale(1.5);opacity:.6}}
.wa-tombol[aria-expanded="true"] .wa-titik{display:none}

.wa-menu{width:min(352px,calc(100vw - 24px));padding:0;overflow:hidden;border-radius:20px;
  display:flex;flex-direction:column;max-height:min(536px,calc(100vh - 148px));
  box-shadow:0 28px 60px -22px rgba(16,38,98,.42),0 6px 18px rgba(16,38,98,.10)}

.ob-kep{display:flex;align-items:center;gap:10px;padding:12px 12px 12px 13px;flex:none;
  background:linear-gradient(112deg,var(--hijau-p),var(--hijau) 62%,#1C3884);color:#fff}
.ob-ava{position:relative;flex:none;width:38px;height:38px}
.ob-ava img{width:38px;height:38px;border-radius:50%;object-fit:cover;object-position:50% 50%;
  background:rgba(255,255,255,.16);box-shadow:0 0 0 2px rgba(255,255,255,.34)}
.ob-ava::after{content:"";position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;
  border-radius:50%;background:var(--limau-c);box-shadow:0 0 0 2px var(--hijau-p);
  animation:obNyala 2.2s ease-in-out infinite}
@keyframes obNyala{
  0%   {box-shadow:0 0 0 2px var(--hijau-p),0 0 0 0 rgba(255,195,31,.62);opacity:1}
  60%  {box-shadow:0 0 0 2px var(--hijau-p),0 0 0 8px rgba(255,195,31,0);opacity:.72}
  100% {box-shadow:0 0 0 2px var(--hijau-p),0 0 0 0 rgba(255,195,31,0);opacity:1}}
@media (prefers-reduced-motion:reduce){
  .ob-ava::after{animation:none}
  .wa-titik{animation:none}}
.ob-jd{margin-right:auto;min-width:0}
.ob-jd b{display:block;font-size:14px;line-height:1.25;letter-spacing:-.005em}
.ob-jd small{display:block;font-size:11.5px;color:rgba(255,255,255,.72);margin-top:1px}
.ob-x{width:28px;height:28px;border:0;border-radius:8px;background:rgba(255,255,255,.14);color:#fff;
  cursor:pointer;display:grid;place-items:center;flex:none;transition:background .18s}
.ob-x:hover{background:rgba(255,255,255,.26)}
.ob-x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round}

.ob-maju{height:3px;background:var(--garis);flex:none}
.ob-maju[hidden]{display:none}
.ob-maju i{display:block;height:100%;width:0;background:var(--limau);
  transition:width .45s cubic-bezier(.22,1,.36,1)}

.ob-isi{flex:1 1 auto;overflow-y:auto;padding:15px 13px 8px;background:var(--krem);
  display:flex;flex-direction:column;gap:8px}
.ob-b{max-width:88%;padding:10px 13px;border-radius:16px;font-size:13.6px;line-height:1.58;
  animation:obMasuk .3s cubic-bezier(.22,1,.36,1) both}
@keyframes obMasuk{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.ob-b.bot{align-self:flex-start;background:var(--papan);color:var(--tinta);
  border:1px solid var(--garis);border-bottom-left-radius:6px;box-shadow:var(--s1)}
.ob-b.aku{align-self:flex-end;background:var(--hijau);color:#fff;border-bottom-right-radius:6px;
  font-weight:600;box-shadow:0 2px 8px -2px rgba(25,56,143,.45)}
.ob-b.lebar{max-width:100%;padding:0;background:none;border:0;box-shadow:none}
.ob-b b{font-weight:800}
.ob-b ul{margin:6px 0 0;padding-left:16px}
.ob-b li{margin-bottom:3px}
.ob-cat{display:block;margin-top:8px;padding-top:8px;border-top:1px solid var(--garis);
  font-size:12.2px;color:var(--redup)}

/* kartu venue bergambar */
.ob-kartu{display:flex;gap:10px;align-items:center;padding:8px;border-radius:13px;
  background:var(--papan);border:1px solid var(--garis);box-shadow:var(--s1);margin-bottom:6px}
.ob-kartu img{width:56px;height:56px;border-radius:9px;object-fit:cover;flex:none;background:var(--krem2)}
.ob-kartu div{min-width:0}
.ob-kartu b{display:block;font-size:13.2px;line-height:1.3;color:var(--tinta)}
.ob-kartu span{display:block;font-size:11.8px;color:var(--redup);margin-top:2px}

/* deretan angka */
.ob-fakta{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}
.ob-fakta i{font-style:normal;display:inline-flex;flex-direction:column;gap:1px;padding:7px 11px;
  border-radius:10px;background:var(--hijau-ll);border:1px solid var(--hijau-l);min-width:70px}
.ob-fakta i b{font-size:16px;font-weight:800;color:var(--hijau);line-height:1.1}
.ob-fakta i em{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--redup)}

/* nota ringkasan */
.ob-nota{border:1px solid var(--garis);border-radius:13px;overflow:hidden;background:var(--papan);
  box-shadow:var(--s1)}
.ob-nota .kp{padding:9px 13px;background:var(--hijau-ll);font-size:11px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--hijau);
  border-bottom:1px solid var(--hijau-l)}
.ob-nota dl{margin:0;padding:4px 13px 10px}
.ob-nota .br{display:flex;gap:10px;align-items:baseline;padding:6px 0;
  border-bottom:1px dashed var(--garis)}
.ob-nota .br:last-child{border-bottom:0}
.ob-nota dt{flex:none;width:76px;font-size:11.6px;color:var(--samar)}
.ob-nota dd{margin:0;font-size:13.2px;font-weight:700;color:var(--tinta)}

.ob-ketik{align-self:flex-start;display:flex;gap:4px;padding:12px 14px;background:var(--papan);
  border:1px solid var(--garis);border-radius:16px;border-bottom-left-radius:6px}
.ob-ketik i{width:6px;height:6px;border-radius:50%;background:var(--samar);animation:obTitik 1.1s infinite}
.ob-ketik i:nth-child(2){animation-delay:.16s}
.ob-ketik i:nth-child(3){animation-delay:.32s}
@keyframes obTitik{0%,60%,100%{opacity:.28;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.ob-kaki{flex:none;padding:9px 11px 11px;background:var(--papan);border-top:1px solid var(--garis)}
.ob-pilih{display:grid;grid-template-columns:1fr 1fr;gap:6px;align-items:stretch}
.ob-pilih > *:nth-child(odd):last-child{grid-column:1 / -1}
.ob-pilih .ob-wa{grid-column:1 / -1}
.ob-pilih button,.ob-pilih a{display:flex;align-items:center;justify-content:flex-start;gap:7px;
  font:inherit;font-size:11.9px;font-weight:600;line-height:1.28;text-align:left;min-width:0;
  text-decoration:none;cursor:pointer;padding:9px 11px;border-radius:13px;
  border:1px solid var(--garis2);background:var(--papan);color:var(--tinta);
  transition:background .16s,color .16s,border-color .16s,transform .16s}
.ob-pilih .ob-wa{justify-content:center;font-size:12.6px;border-radius:999px}
.ob-pilih button:hover,.ob-pilih a:hover{background:var(--hijau-ll);border-color:var(--hijau-t);
  color:var(--hijau);transform:translateY(-1px)}
.ob-pilih svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;color:var(--hijau-t)}
.ob-pilih button:hover svg,.ob-pilih a:hover svg{color:var(--hijau)}
.ob-pilih .ob-wa{background:#1FA463;border-color:#1FA463;color:#fff}
.ob-pilih .ob-wa:hover{background:#17854F;border-color:#17854F;color:#fff}
.ob-pilih .ob-wa svg{fill:currentColor;stroke:none;color:#fff}
.ob-ulang{margin-top:8px;border:0;background:none;cursor:pointer;font:inherit;font-size:11.8px;
  color:var(--samar);text-decoration:underline;text-underline-offset:3px;padding:0}
.ob-ulang:hover{color:var(--hijau)}

@media(max-width:560px){
  .wa-menu{width:calc(100vw - 18px);max-height:min(74vh,520px)}
  .ob-isi{padding:12px 10px 4px}
  .ob-b{max-width:92%;font-size:13.3px}
}

/* ---------- tombol alat pada kepala obrolan ---------- */
.ob-alat{display:flex;align-items:center;gap:3px;flex:none}
.ob-kep .ob-x{width:26px;height:26px;border-radius:7px;background:rgba(255,255,255,.10)}
.ob-kep .ob-x:hover{background:rgba(255,255,255,.26)}
.ob-kep .ob-x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.ob-kep .ob-x svg.isi{fill:currentColor;stroke:none}
.ob-jd b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- lembar cetak riwayat ---------- */
#ob-cetak{display:none}
@media print{
  body.ob-cetak-mode{visibility:hidden}
  body.ob-cetak-mode #ob-cetak{visibility:visible;display:block;position:absolute;
    left:0;top:0;width:100%;padding:28px 30px;background:#fff;color:#111;
    font:12.5pt/1.55 "Plus Jakarta Sans",Arial,sans-serif}
  body.ob-cetak-mode #ob-cetak *{visibility:visible}
  #ob-cetak h1{font-size:16pt;margin:0 0 3px}
  #ob-cetak .kop{padding-bottom:10px;margin-bottom:16px;border-bottom:2px solid #102662}
  #ob-cetak .kop small{color:#555;font-size:10pt}
  #ob-cetak .br{margin-bottom:9px}
  #ob-cetak .br b{display:block;font-size:9.5pt;letter-spacing:.04em;text-transform:uppercase;
    color:#555;margin-bottom:1px}
  #ob-cetak .kaki{margin-top:20px;padding-top:10px;border-top:1px solid #bbb;
    font-size:9.5pt;color:#555}
}

/* ---------- daftar pilih di dalam obrolan ---------- */
.ob-drop{grid-column:1 / -1;display:flex;gap:7px;align-items:stretch}
.ob-drop select{flex:1 1 auto;min-width:0;padding:10px 32px 10px 12px;border-radius:13px;
  border:1px solid var(--garis2);color:var(--tinta);font:inherit;font-size:12.6px;font-weight:700;
  cursor:pointer;-webkit-appearance:none;appearance:none;
  background:var(--papan) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E1B2B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center;background-size:13px}
.ob-drop select:focus-visible{outline:2px solid var(--hijau-t);outline-offset:1px}
.ob-drop .ob-lanjut{flex:none;padding:10px 17px;border-radius:13px;border:0;cursor:pointer;
  font-size:12.6px;font-weight:800;color:#fff;letter-spacing:-.005em;
  background:linear-gradient(135deg,#1C3884,#102662);transition:opacity .18s}
.ob-drop .ob-lanjut:disabled{opacity:.4;cursor:not-allowed}
.ob-drop .ob-lanjut:not(:disabled):hover{opacity:.9}

/* ---------- daftar venue ringkas di dalam gelembung ---------- */
.ob-daf{display:block;margin-top:9px;padding-top:8px;border-top:1px solid var(--garis)}
.ob-daf i{display:block;font-style:normal;padding:6px 0;border-bottom:1px dashed var(--garis)}
.ob-daf i:last-child{border-bottom:0;padding-bottom:0}
.ob-daf b{display:block;font-size:12.3px;font-weight:800;color:var(--tinta);letter-spacing:-.004em}
.ob-daf em{display:block;font-style:normal;font-size:11.3px;line-height:1.42;color:var(--redup);margin-top:1px}

/* Obrolan tidak pernah ikut tercetak. */
@media print{
  .wa-apung{display:none!important}
}


/* ============ baris kepercayaan: satu pita berjalan pelan ============
   Menggantikan tata letak flex-wrap yang memecah lima keterangan jadi dua
   baris. Isinya digandakan dua kali di HTML, lalu pitanya digeser tepat
   setengah lebar supaya perulangannya tidak terlihat. */
.percaya{padding-block:0;overflow:hidden;position:relative}
.percaya .kotak{display:block;width:100%;max-width:none;margin:0;padding:0;
  overflow:hidden;flex-wrap:nowrap;scroll-snap-type:none;overflow-x:hidden}
.percaya .kotak::-webkit-scrollbar{display:none}
.pc-jalan{display:flex;align-items:center;width:max-content;
  will-change:transform;animation:pcJalan 60s linear infinite}
.percaya:hover .pc-jalan,.percaya:focus-within .pc-jalan{animation-play-state:paused}
@keyframes pcJalan{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

.percaya .pc{flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;
  background:none;border:0;border-radius:0;box-shadow:none;
  padding:18px 0;margin-right:46px;max-width:none;
  white-space:nowrap;font-size:13.5px;line-height:1.25}
.percaya .pc b{display:inline;margin:0}
.percaya .pc span{white-space:nowrap;overflow-wrap:normal}
.percaya .pc svg{margin-top:0}

/* tepi kiri dan kanan dibuat memudar supaya keluar masuknya halus */
.percaya::before,.percaya::after{content:"";position:absolute;top:0;bottom:0;
  width:80px;z-index:2;pointer-events:none}
.percaya::before{left:0;background:linear-gradient(90deg,var(--hijau-p),rgba(16,38,98,0))}
.percaya::after{right:0;width:80px;
  background:linear-gradient(270deg,var(--hijau-p),rgba(16,38,98,0))}

@media (max-width:680px){
  .percaya .pc{font-size:12.6px;margin-right:34px;padding:15px 0}
  .percaya::before,.percaya::after{width:40px}
  .pc-jalan{animation-duration:46s}
}

/* kalau pengguna meminta gerakan dikurangi, pitanya diam dan bisa digeser
   sendiri dengan jari atau tetikus */
@media (prefers-reduced-motion:reduce){
  .pc-jalan{animation:none}
  .percaya .kotak{overflow-x:auto;-webkit-overflow-scrolling:touch}
}


/* ================= baris pilihan daerah di bagian Venue ================= */
.vn-daerah{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 26px}
.vn-daerah button{display:inline-flex;align-items:center;gap:7px;
  font:inherit;font-size:13.4px;font-weight:600;color:var(--redup);
  background:var(--papan);border:1px solid var(--garis);border-radius:999px;
  padding:8px 14px;cursor:pointer;transition:background .16s,border-color .16s,color .16s}
.vn-daerah button i{font-style:normal;font-size:11.5px;font-weight:700;
  color:var(--samar);background:var(--krem);border-radius:999px;padding:1px 7px}
.vn-daerah button:hover{border-color:var(--garis2);color:var(--tinta)}
.vn-daerah button.aktif{background:var(--hijau);border-color:var(--hijau);color:#fff}
.vn-daerah button.aktif i{background:rgba(255,255,255,.18);color:#fff}
.vn-daerah button:focus-visible{outline:2px solid var(--hijau-t);outline-offset:2px}

/* kartu venue yang fotonya belum ada */
.vn-kosong{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:9px;width:100%;height:100%;min-height:190px;color:var(--samar);
  background:linear-gradient(140deg,var(--krem2),var(--krem));
  font-size:12.4px;letter-spacing:.02em}
.vn-kosong svg{width:30px;height:30px;stroke:var(--garis2);fill:none}

.vn-kaki .h.minta b{color:var(--redup);font-size:14.5px}
.vn-tunggu{grid-column:1/-1;text-align:center;color:var(--samar);
  font-size:14px;padding:38px 0}
.vn-lagi{display:flex;justify-content:center;margin-top:26px}
.vn-lagi button[hidden]{display:none}

@media (max-width:680px){
  .vn-daerah{gap:7px;margin:18px 0 20px;flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none;padding-bottom:2px;margin-inline:-18px;padding-inline:18px}
  .vn-daerah::-webkit-scrollbar{display:none}
  .vn-daerah button{flex:0 0 auto;font-size:12.8px;padding:7px 12px}
}


/* =========== kotak Rencanakan Acara, tampilan dirapikan ===========
   Kelima kolom dulu menempel rapat dipisah garis 1 piksel sehingga
   terbaca seperti tabel. Sekarang tiap kolom berdiri sendiri sebagai
   kartu, dan yang sedang diisi diberi cincin biru (lad-cincin). */
.perencana .ladang{gap:10px;background:transparent;border-top:0;margin-top:18px}

.perencana .lad{background:var(--papan);border:1px solid var(--garis);
  border-radius:14px;padding:13px 16px 12px;box-shadow:var(--s1);
  transition:border-color .18s,box-shadow .18s,background .18s}
.perencana .lad:hover{border-color:var(--garis2);box-shadow:var(--s2)}
.perencana .lad:focus-within{background:var(--papan);border-color:var(--hijau-t);
  box-shadow:0 0 0 3px rgba(47,87,199,.15),var(--s2)}   /* lad-cincin */
.perencana .lad::after{right:16px;bottom:15px}

/* nama kolom dibuat lebih kecil dan lega, isian dibuat lebih tegas
   supaya yang menonjol jawabannya, bukan namanya */
.perencana .lad label{font-size:9.8px;letter-spacing:.16em;margin-bottom:7px;gap:7px}
.perencana .lad label svg{width:12px;height:12px}
.perencana .lad select,.perencana .lad input{font-size:15.6px;letter-spacing:-.01em}
.perencana .lad .uang .rp{font-size:15.6px;font-weight:600;color:var(--samar)}
.perencana .lad .dua-tgl input{font-size:14.6px}

/* keterangan kecil di bawah kolom */
.perencana .lad-tanda{margin-top:5px;font-size:10px;letter-spacing:.06em;line-height:1.3}
.perencana .lad-tanda.hidup{color:var(--hijau-t);font-weight:700}

/* kepala panel diberi jarak sedikit lebih lega */
.perencana .pnl-kepala{margin-bottom:2px}
.perencana .pnl-kaki{margin-top:18px}

@media (max-width:680px){
  .perencana .ladang{gap:8px}
  .perencana .lad{padding:12px 14px 11px;border-radius:12px}
  .perencana .lad::after{right:14px;bottom:14px}
}


/* --- panah kolom pilihan disejajarkan dengan tulisannya ---
   Sebelumnya panah dipasang menempel ke dasar kartu, padahal tulisan
   pilihannya ada di atas, jadi klik pada panah tidak mengenai kolomnya. */
.perencana .lad::after{top:45px;bottom:auto;right:16px}
@media (max-width:680px){ .perencana .lad::after{top:42px;right:14px} }

/* tulisan pilihan yang kepanjangan diberi titik titik, bukan dipotong
   di tengah huruf sehingga terbaca seperti kata yang salah */
.perencana .lad select{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding-right:18px}

/* seluruh kartu terasa bisa ditekan, bukan hanya tulisannya */
.perencana .lad:has(select){cursor:pointer}


/* ============ panah geser video, menempel di sisi videonya ============ */
.vid-jalur.ada-panah{position:relative}
.vid-jalur.ada-panah .vid-nav{position:absolute;inset:0;display:flex;
  align-items:center;justify-content:space-between;padding:0 14px;
  pointer-events:none;gap:0}
.vid-jalur.ada-panah .vid-nav button{pointer-events:auto;
  width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.86);border:0;color:var(--hijau);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 6px 20px -6px rgba(16,38,98,.45);
  opacity:.9;
  transition:opacity .2s,transform .2s,background .18s}
.vid-jalur.ada-panah:hover .vid-nav button,
.vid-jalur.ada-panah:focus-within .vid-nav button{opacity:1}
.vid-jalur.ada-panah .vid-nav button:hover{background:#fff;transform:scale(1.06)}
.vid-jalur.ada-panah .vid-nav button:focus-visible{opacity:1;transform:scale(1);
  outline:2px solid var(--limau-c);outline-offset:3px}
.vid-jalur.ada-panah .vid-nav svg{width:20px;height:20px}

/* titik penanda sekarang sendirian di bawah, dibuat rata tengah */
.vid-alat{justify-content:center}
.vid-alat .vid-titik{margin-right:0}

/* di layar sentuh panahnya selalu terlihat, sebab tidak ada arahan kursor */
@media (max-width:680px){
  .vid-jalur.ada-panah .vid-nav button{width:38px;height:38px}
  .vid-jalur.ada-panah .vid-nav svg{width:17px;height:17px}
  .vid-jalur.ada-panah .vid-nav{padding:0 10px}
}


/* ============ kartu Aktivitas, satu bentuk tanpa foto ============
   Dulu sebagian kartu berfoto dan sebagian lagi berkotak gradasi, jadi
   satu kisi berisi dua bentuk yang berbeda dan terlihat tambal sulam.
   Sekarang seluruhnya memakai bentuk yang sama: ikon dalam kotak, judul,
   keterangan, lalu tombol yang selalu rata di dasar kartu. */
.aktivitas{gap:12px}
.ak{padding:20px 18px 18px;gap:0;overflow:visible}

.ak .ak-kepala{display:grid;place-items:center;width:48px;height:48px;
  border-radius:15px;margin-bottom:14px;color:var(--hijau);
  background:linear-gradient(145deg,var(--hijau-l),var(--krem2));
  border:1px solid rgba(47,87,199,.18);
  transition:background .3s var(--gerak),color .3s,border-color .3s,transform .3s var(--gerak)}
.ak .ak-kepala svg{width:23px;height:23px;stroke:currentColor;fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ak:hover .ak-kepala{background:linear-gradient(145deg,var(--hijau-t),var(--hijau));
  border-color:transparent;color:#fff;transform:translateY(-2px)}

.ak h3{font-size:16.2px;letter-spacing:-.02em;margin-bottom:7px}
.ak p{font-size:13.5px;color:var(--redup);line-height:1.52;flex:1;margin-bottom:14px}

/* tombol Masukkan selalu rata di dasar kartu, berapa pun panjang
   keterangannya, supaya sebarisnya terlihat sejajar */
.ak .tambah{margin-top:auto;padding-top:12px;border-top:1px solid var(--garis);
  width:100%;justify-content:flex-start}

/* garis aksen kuning saat kursor diarahkan, menggantikan peran foto
   sebagai penanda kartu yang sedang dilihat */
.ak::before{background:var(--limau-c);height:3px}

/* sisa aturan bentuk lama dimatikan supaya tidak saling menimpa */
.ak .ak-gbr,.ak .ak-cover{display:none}
.ak .ak-isi{padding:0;display:flex;flex-direction:column;gap:0;flex:1}

@media (max-width:680px){
  .ak{padding:17px 15px 15px}
  .ak .ak-kepala{width:42px;height:42px;border-radius:13px;margin-bottom:11px}
  .ak .ak-kepala svg{width:20px;height:20px}
}


/* ============ baris daerah: satu baris yang bisa digeser ============
   Lima belas tombol dulu membungkus jadi dua baris dengan sisa ragged di
   kanan sehingga terlihat berantakan. Sekarang satu baris saja. */
.vn-daerah{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
  padding:2px 2px 4px;margin:20px -2px 6px;scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent)}
.vn-daerah::-webkit-scrollbar{display:none}
.vn-daerah button{flex:0 0 auto;scroll-snap-align:start}

.vn-ringkas{margin:0 0 22px;font-family:"IBM Plex Mono",monospace;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--samar)}

/* kartu venue sekarang bisa dibuka */
.vn.buka{cursor:pointer}
.vn.buka:focus-visible{outline:2px solid var(--hijau-t);outline-offset:3px}
.vn-buka{display:inline-flex;align-items:center;gap:6px;font-size:13px;
  font-weight:700;color:var(--hijau);white-space:nowrap}
.vn-buka svg{width:15px;height:15px;transition:transform .2s var(--gerak)}
.vn.buka:hover .vn-buka svg{transform:translateX(3px)}

/* ==================== tirai detail venue ==================== */
body.vd-kunci{overflow:hidden}
.vd-tirai{position:fixed;inset:0;z-index:120;display:flex;justify-content:flex-end}
.vd-tirai[hidden]{display:none}
.vd-latar{position:absolute;inset:0;background:rgba(11,24,62,.55);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  animation:vdLatar .25s ease}
@keyframes vdLatar{from{opacity:0}to{opacity:1}}

.vd-lembar{position:relative;display:flex;flex-direction:column;
  width:min(620px,100%);height:100%;background:var(--krem);
  box-shadow:-24px 0 60px -30px rgba(11,24,62,.6);
  animation:vdMasuk .3s var(--gerak)}
@keyframes vdMasuk{from{transform:translateX(26px);opacity:0}to{transform:none;opacity:1}}

.vd-kepala{flex:none;display:flex;align-items:flex-start;gap:14px;
  padding:20px 22px 16px;background:var(--papan);border-bottom:1px solid var(--garis)}
.vd-kepala h3{font-size:19px;letter-spacing:-.02em;line-height:1.25;margin:0}
.vd-lokasi{display:block;margin-top:4px;font-size:13px;color:var(--redup)}
.vd-tutup{margin-left:auto;flex:none;width:36px;height:36px;border-radius:50%;
  border:1px solid var(--garis);background:var(--papan);color:var(--redup);
  cursor:pointer;display:grid;place-items:center;transition:.18s}
.vd-tutup:hover{background:var(--krem2);color:var(--tinta)}
.vd-tutup svg{width:17px;height:17px}

.vd-isi{flex:1;overflow-y:auto;padding:18px 22px 26px}
.vd-bag{margin-top:24px}
.vd-bag h4{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--samar);margin:0 0 10px;font-weight:600}
.vd-bag p{font-size:14px;line-height:1.62;color:var(--redup);margin:0}

/* Foto dibuat satu pita mendatar yang bisa digeser, bukan kisi yang
   memenuhi layar. Tujuannya supaya paket dan tipe kamar, yang justru
   paling dicari, langsung terlihat tanpa harus menggulir jauh. */
.vd-foto{display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x mandatory;
  border-radius:var(--r2);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.vd-foto::-webkit-scrollbar{display:none}
.vd-foto img{flex:0 0 auto;width:74%;max-width:340px;height:196px;object-fit:cover;
  display:block;background:var(--krem2);border-radius:12px;scroll-snap-align:start}
.vd-video{display:grid;gap:10px;margin-top:10px}
.vd-video video{width:100%;border-radius:var(--r2);background:#000;display:block}
.vd-video figcaption{margin-top:5px;font-size:12.4px;color:var(--samar)}

.vd-sorot{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:7px}
.vd-sorot li{position:relative;padding-left:22px;font-size:13.8px;line-height:1.5;color:var(--tinta)}
.vd-sorot li::before{content:"";position:absolute;left:2px;top:6px;width:9px;height:5px;
  border-left:2px solid var(--hijau-t);border-bottom:2px solid var(--hijau-t);
  transform:rotate(-45deg)}

.vd-paket{display:grid;gap:10px}
.vd-paket article{background:var(--papan);border:1px solid var(--garis);
  border-radius:var(--r2);padding:14px 16px}
.vd-p-atas{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.vd-p-atas b{font-size:14.6px;letter-spacing:-.01em}
.vd-p-harga{flex:none;font-size:15px;font-weight:800;color:var(--hijau);white-space:nowrap}
.vd-p-harga i{font-style:normal;font-size:11.5px;font-weight:600;color:var(--samar)}
.vd-p-durasi{display:block;margin-top:3px;font-size:12.2px;color:var(--samar)}
.vd-paket ul{margin:9px 0 0;padding-left:17px;display:grid;gap:3px}
.vd-paket li{font-size:13.2px;line-height:1.45;color:var(--redup)}
.vd-paket p{margin:8px 0 0;font-size:13.2px;color:var(--redup)}

.vd-tabel{overflow-x:auto;border:1px solid var(--garis);border-radius:var(--r2);
  background:var(--papan)}
.vd-tabel table{width:100%;border-collapse:collapse;font-size:13px}
.vd-tabel th{text-align:left;font-family:"IBM Plex Mono",monospace;font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--samar);font-weight:600;
  padding:10px 12px;border-bottom:1px solid var(--garis)}
.vd-tabel td{padding:10px 12px;border-bottom:1px solid var(--garis);
  color:var(--redup);vertical-align:top;line-height:1.45}
.vd-tabel tr:last-child td{border-bottom:0}
.vd-tabel td b{display:block;color:var(--tinta);font-size:13.4px}
.vd-tabel td span{display:block;font-size:11.8px;color:var(--samar);margin-top:2px}
.vd-ket{margin:9px 0 0;font-size:12.6px;line-height:1.55;color:var(--samar)}

.vd-fas{display:flex;flex-wrap:wrap;gap:6px}
.vd-fas span{font-size:12.4px;color:var(--redup);background:var(--papan);
  border:1px solid var(--garis);border-radius:9px;padding:5px 10px}

.vd-awas{list-style:none;margin:0;padding:13px 15px;display:grid;gap:7px;
  background:var(--limau-l);border:1px solid rgba(216,158,0,.24);border-radius:var(--r2)}
.vd-awas li{font-size:13.2px;line-height:1.5;color:#6B5108}

.vd-alamat{margin:22px 0 0;font-size:12.8px;color:var(--samar);line-height:1.55}
.vd-alamat a{color:var(--hijau-t);font-weight:600}

.vd-kaki{flex:none;display:flex;gap:10px;padding:14px 22px;
  background:var(--papan);border-top:1px solid var(--garis)}
.vd-kaki .tbl{flex:1;justify-content:center}

@media (max-width:680px){
  .vd-lembar{width:100%}
  .vd-kepala{padding:16px 16px 13px}
  .vd-kepala h3{font-size:17px}
  .vd-isi{padding:15px 16px 22px}
  .vd-kaki{padding:12px 16px;flex-direction:column}
  .vd-foto img{width:86%;height:172px}
}


/* ============ bilah penyaring venue ============
   Menggantikan lima belas tombol daerah yang dulu membungkus jadi dua
   baris berantakan. Tiga dropdown: daerah, jenis paket, dan urutan. */
.vn-bilah{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 10px;
  padding:12px 14px;background:var(--papan);border:1px solid var(--garis);
  border-radius:var(--r2);box-shadow:var(--s1)}
.vn-pilih{position:relative;flex:1 1 200px;min-width:0;display:block;
  padding:8px 12px 7px;border-radius:12px;background:var(--krem);
  border:1px solid transparent;transition:border-color .16s,background .16s}
.vn-pilih:focus-within{background:var(--papan);border-color:var(--hijau-t);
  box-shadow:0 0 0 3px rgba(47,87,199,.14)}
.vn-pilih>span{display:block;font-family:"IBM Plex Mono",monospace;font-size:9.6px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--samar);
  font-weight:600;margin-bottom:3px}
.vn-pilih select{width:100%;border:0;background:transparent;padding:0 20px 0 0;
  font:inherit;font-size:14.4px;font-weight:700;color:var(--tinta);
  cursor:pointer;appearance:none;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.vn-pilih select:focus{outline:none}
.vn-pilih::after{content:"";position:absolute;right:13px;bottom:16px;width:7px;height:7px;
  pointer-events:none;border-right:1.8px solid var(--samar);
  border-bottom:1.8px solid var(--samar);transform:rotate(45deg)}

/* nama paket di bawah harga, supaya angkanya punya arti */
.vn-kaki .h i{display:block;font-style:normal;font-size:11.2px;font-weight:600;
  color:var(--samar);margin-top:2px;letter-spacing:0}

@media (max-width:680px){
  .vn-bilah{gap:8px;padding:10px;flex-direction:column}
  .vn-pilih{flex:1 1 auto}
}

/* harga paket yang belum boleh ditayangkan */
.vd-p-harga.kosong{font-size:12.6px;font-weight:700;color:var(--samar);
  background:var(--krem2);border-radius:8px;padding:3px 9px}


/* ============ dua video berdampingan ============
   Satu video melebar penuh membuat baris portofolio terasa kosong.
   Jarak antar video dibuat dengan padding, bukan gap, supaya lebar
   50 persen tiap slide tetap tepat dan geserannya pas satu layar. */
/* Tanpa margin negatif. Kalau pita dibuat lebih lebar daripada bingkainya,
   geseran 100 persen per halaman melenceng beberapa piksel dan meleset
   makin jauh tiap halaman. */
.vid-rel.vid-duaan .vid-sl{flex:0 0 50%;padding-inline:7px;box-sizing:border-box}
.vid-rel.vid-duaan .vid-sl:first-child{padding-left:0}
.vid-rel.vid-duaan .vid-sl:nth-child(odd){padding-left:0}
.vid-rel.vid-duaan .vid-sl:nth-child(even){padding-right:0}
.vid-rel.vid-duaan .vid-bingkai{border-radius:var(--r2)}
.vid-rel.vid-duaan .vid-bingkai .tul b{font-size:14.4px}
.vid-rel.vid-duaan .vid-bingkai .tul span{font-size:12px}

@media (max-width:760px){
  .vid-rel.vid-duaan .vid-sl{flex:0 0 100%;padding-inline:0}
}


/* penanda venue yang datang dari kiriman mitra, belum kami tinjau sendiri */
.vn-mitra{display:inline-flex;align-items:center;gap:6px;margin-top:8px;
  font-family:var(--fm,ui-monospace,monospace);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--hijau-t);background:var(--hijau-ll);
  border:1px solid var(--hijau-l);border-radius:999px;padding:4px 10px;line-height:1}


/* Pintu masuk mitra di menu atas. Dibedakan tipis dari menu lain karena
   sasarannya bukan calon klien melainkan pemilik usaha, jadi tidak boleh
   menarik perhatian lebih besar daripada menu Venue dan Penawaran. */
.nav .nav-mitra{color:var(--limau);font-weight:700}
.nav .nav-mitra:hover{color:var(--limau-c)}
.nav .nav-mitra::after{background:var(--limau)}

/* kartu venue di dalam obrolan, sekarang bisa ditekan */
.ob-kartu.ob-buka{width:100%;text-align:left;font:inherit;cursor:pointer;
  transition:border-color .15s,box-shadow .15s,transform .15s}
.ob-kartu.ob-buka:hover{border-color:var(--garis2);
  box-shadow:0 6px 16px -8px rgba(16,38,98,.28);transform:translateY(-1px)}
.ob-kartu.ob-buka:focus-visible{outline:2px solid var(--hijau);outline-offset:2px}
.ob-kartu .ob-k-kosong{width:56px;height:56px;border-radius:9px;flex:none;
  background:var(--krem2);display:block}
.ob-kartu .ob-k-isi{min-width:0;flex:1}
.ob-kartu .ob-k-h{display:block;font-size:12px;font-weight:700;color:var(--hijau);margin-top:3px}
.ob-kartu .ob-k-h i{font-style:normal;font-weight:500;color:var(--redup)}
.ob-kartu .ob-k-buka{flex:none;align-self:center;font-size:11px;font-weight:700;
  color:var(--hijau-t);white-space:nowrap;margin-top:0}


/* ====== Aktivitas, sekarang blok kedua di dalam bagian Layanan ======
   Petak kaku diganti baris yang melar. Tiap kartu boleh tumbuh mengisi
   sisa ruang barisnya, jadi baris terakhir tidak pernah menyisakan
   lubang, berapa pun jumlah kartunya. Ikon dipindah ke samping judul
   supaya tinggi kartunya turun hampir separuh. */
.ak-blok{margin-top:46px;padding-top:32px;border-top:1px solid var(--garis)}
.ak-kop{max-width:58ch;margin-bottom:18px}
.ak-kop h3{font-family:var(--fd,"Outfit",sans-serif);font-size:20px;letter-spacing:-.02em}
.ak-kop p{margin-top:7px;color:var(--redup);font-size:14.4px}

.aktivitas.ak-lentur{display:flex;flex-wrap:wrap;gap:10px}
.aktivitas.ak-lentur .ak{flex:1 1 236px;min-width:0;display:flex;flex-direction:row;gap:11px;
  align-items:stretch;padding:13px 15px 12px;border-radius:14px;box-shadow:var(--s1)}
.aktivitas.ak-lentur .ak-isi{display:flex;flex-direction:column;flex:1;min-width:0}
.aktivitas.ak-lentur .ak:hover{transform:none;box-shadow:var(--s2);border-color:var(--garis2)}
.aktivitas.ak-lentur .ak-kepala{flex:none;align-self:flex-start;width:32px;height:32px;
  border-radius:9px;margin:1px 0 0;transform:none}
.aktivitas.ak-lentur .ak:hover .ak-kepala{transform:none}
.aktivitas.ak-lentur .ak-kepala svg{width:16px;height:16px}
.aktivitas.ak-lentur .ak h3{font-size:14.6px;margin-bottom:3px;letter-spacing:-.015em}
.aktivitas.ak-lentur .ak p{font-size:12.7px;line-height:1.45;margin-bottom:9px;
  color:var(--redup);clear:none}
.aktivitas.ak-lentur .ak .tambah{margin-top:auto;padding-top:9px;font-size:12.4px;
  border-top:1px solid var(--garis)}
.aktivitas.ak-lentur .ak .tambah svg{width:13px;height:13px}

@media (max-width:560px){
  .aktivitas.ak-lentur .ak{flex:1 1 100%}
  .ak-blok{margin-top:34px;padding-top:26px}
}


/* ====== Perencana: satuan sebaris dengan angkanya ======
   Satuan yang ditaruh di baris bawah membuat kotak Peserta dan
   Perkiraan dana lebih tinggi daripada kotak Destinasi dan Tanggal,
   sehingga barisnya terlihat tidak rata dan sisa ruangnya kosong.
   Sekarang satuannya sebaris, menempel kanan. Kalau keterangannya
   memanjang, misalnya "per pax, total Rp 65.000.000", barisnya turun
   sendiri karena pembungkusnya boleh melipat. */
.perencana .lad.isian{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:9px}
.perencana .lad.isian > label{flex:0 0 100%}
.perencana .lad.isian > input,
.perencana .lad.isian > .uang{flex:1 1 60px;min-width:0}
.perencana .lad.isian > .lad-tanda{flex:0 1 auto;min-width:0;max-width:100%;margin-top:0;overflow-wrap:anywhere}
.perencana .lad.isian > .lad-tanda:empty{display:none}
.perencana .lad .lad-tanda:empty{display:none}


/* ============================================================
   Panel detail venue: panah antar venue, spanduk halaman penuh,
   dan tombol "lihat venue lainnya" yang lebih pantas.
   ============================================================ */
.vd-kepala{position:relative}
.vd-nav{display:flex;gap:6px;align-items:center;margin-left:auto;margin-right:6px}
.vd-nav[hidden]{display:none}
.vd-gsr{width:34px;height:34px;padding:0;display:grid;place-items:center;cursor:pointer;
  border-radius:10px;border:1px solid rgba(20,38,86,.16);background:#fff;color:#1B3375;
  box-shadow:0 1px 2px rgba(20,38,86,.07);transition:.16s}
.vd-gsr:hover{color:#193789;border-color:#1C4CD0;transform:translateY(-1px);
  box-shadow:0 7px 16px -9px rgba(20,38,86,.55)}
.vd-gsr:active{transform:translateY(0)}
.vd-gsr svg{width:17px;height:17px}

.vd-laman{display:flex;align-items:center;gap:14px;margin:16px 0 4px;padding:15px 17px;
  border-radius:15px;text-decoration:none;color:#142A66;
  background:linear-gradient(135deg,#EAEFFD,#E2E8FA);
  border:1px solid #CAD5F2;box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
  transition:.18s}
.vd-laman:hover{transform:translateY(-2px);border-color:#1C4CD0;
  box-shadow:0 12px 26px -16px rgba(28,76,208,.85), inset 0 1px 0 rgba(255,255,255,.9)}
.vd-laman-in{min-width:0;flex:1 1 auto}
.vd-laman-t{display:block;font-weight:800;font-size:14.5px;letter-spacing:-.01em}
.vd-laman-k{display:block;margin-top:3px;font-size:13px;line-height:1.5;color:#213F8F}
.vd-laman>svg{width:20px;height:20px;margin-left:auto;flex:0 0 auto;color:#1C4CD0}


#vn-lagi{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font:inherit;font-size:14.5px;font-weight:700;letter-spacing:-.01em;
  padding:13px 26px;border-radius:999px;cursor:pointer;
  color:#142A66;background:#fff;border:1px solid rgba(20,38,86,.16);
  box-shadow:0 1px 2px rgba(20,38,86,.07), 0 14px 30px -22px rgba(20,38,86,.6);
  transition:.18s}
#vn-lagi:hover{border-color:#1C4CD0;color:#193789;transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(20,38,86,.08), 0 20px 38px -22px rgba(20,38,86,.75)}
#vn-lagi:active{transform:translateY(0)}
#vn-lagi svg{width:17px;height:17px;transition:transform .18s}
#vn-lagi svg{opacity:.62}
#vn-lagi:hover svg{transform:scale(1.18);opacity:1}

@media(max-width:620px){
  .vd-nav{margin-right:4px}
  .vd-gsr{width:32px;height:32px}
  .vd-laman{padding:13px 14px;gap:10px}
}


/* Kepala panel perencana. Keterangan kecil bergaya mono huruf besar diganti
   kalimat biasa, supaya terbaca sebagai penjelasan, bukan label sistem. */
.pnl-kepala{align-items:baseline;gap:0 14px;padding:22px 26px 0}
.pnl-kepala h2{font-size:21px;letter-spacing:-.02em;flex:none}
.pnl-sub{margin:4px 0 0;font-size:14px;line-height:1.55;color:var(--samar);
  max-width:56ch;flex:1 1 320px}
@media(max-width:720px){
  .pnl-kepala{flex-direction:column;gap:6px}
  .pnl-sub{font-size:13.5px}
}


/* ==================================================================
   BARIS SINYAL DI HERO
   Satu garis tipis di bawah tombol, bukan spanduk. Isinya kepadatan
   tanggal dan janji kecepatan balasan. Sengaja tidak memakai potongan
   harga: pembeli korporat membaca obral sebagai ruang tawar, dan itu
   menggerus margin sebelum pembicaraan dimulai.
   ================================================================== */
.hero-sinyal{display:flex;align-items:center;flex-wrap:wrap;gap:0 20px;
  margin-top:26px;padding-top:20px;max-width:640px;
  border-top:1px solid rgba(255,255,255,.17)}
.hero-sinyal .hs-baris{display:flex;align-items:flex-start;gap:9px;margin:0;
  font-size:13.2px;line-height:1.5;color:rgba(255,255,255,.8);
  letter-spacing:-.005em;flex:1 1 250px}
.hero-sinyal .hs-teks b{color:#FFC31F;font-weight:700}
.hs-pisah{width:1px;align-self:stretch;background:rgba(255,255,255,.17);flex:none}
.hs-ikon{width:15px;height:15px;flex:none;margin-top:2px;opacity:.72}
.hs-titik{width:8px;height:8px;flex:none;margin-top:6px;border-radius:50%;
  background:#34D07F;box-shadow:0 0 0 0 rgba(52,208,127,.6);
  animation:hsDenyut 2.4s ease-out infinite}
@keyframes hsDenyut{
  0%{box-shadow:0 0 0 0 rgba(52,208,127,.55)}
  70%{box-shadow:0 0 0 8px rgba(52,208,127,0)}
  100%{box-shadow:0 0 0 0 rgba(52,208,127,0)}
}
@media (prefers-reduced-motion:reduce){ .hs-titik{animation:none} }

@media (max-width:760px){
  .hero-sinyal{margin-top:20px;padding-top:16px;gap:10px 0;max-width:none}
  .hero-sinyal .hs-baris{flex:1 1 100%;font-size:12.6px}
  .hs-pisah{display:none}
}