/* =========================================================
   Katalog Produk Bank WM — sistem desain (v2)
   Meniru presentasi: kanvas full-screen berbingkai warna seksi,
   badge produk asli, tombol solid, nav Back/Home lingkaran.
   Warna seksi disuntik via --sec / --sec-rgb dari app.js
   ========================================================= */

:root {
  --navy: #2e3192;
  --red:  #ed1c24;
  --gold: #f5b301;

  --sec: #2e3192;
  --sec-2: #1f2166;
  --sec-rgb: 46, 49, 146;

  --panel: #ffffff;       /* kanvas slide */
  --panel-2: #f4f7fc;
  --text: #14182b;
  --muted: #5c6685;
  --line: #dfe4f0;
  --line-2: #c9d2e6;
  --shadow: 0 2px 4px rgba(15,20,50,.06), 0 18px 40px -16px rgba(15,20,50,.28);
  --shadow-lg: 0 30px 60px -22px rgba(15,20,50,.42);
  --radius: 16px;

  --frame: 12px;          /* tebal bingkai warna */
  --topbar-h: 52px;
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

[data-theme="dark"] {
  --panel: #141a29;
  --panel-2: #1b2233;
  --text: #eaedf7;
  --muted: #9aa3c0;
  --line: #2a3247;
  --line-2: #38425c;
  --shadow: 0 2px 4px rgba(0,0,0,.4), 0 22px 46px -18px rgba(0,0,0,.7);
  --shadow-lg: 0 34px 70px -22px rgba(0,0,0,.8);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: var(--font);
  color: var(--text);
  /* bingkai = warna seksi, dengan aurora lembut */
  background:
    radial-gradient(1100px 700px at 88% -12%, color-mix(in srgb, var(--gold) 30%, transparent), transparent 60%),
    radial-gradient(900px 640px at -8% 112%, rgba(255, 90, 100, .22), transparent 55%),
    linear-gradient(160deg, var(--sec), var(--sec-2));
  display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased;
  transition: background-color .35s ease;
}
/* blob cahaya yang berenang pelan di balik kanvas */
body::before, body::after {
  content: ""; position: fixed; z-index: 0; border-radius: 50%;
  pointer-events: none; filter: blur(70px); will-change: transform;
}
body::before {
  width: 46vw; height: 46vw; left: -12vw; top: -16vw;
  background: radial-gradient(circle, rgba(255,255,255,.2), transparent 68%);
  animation: blobDrift 20s ease-in-out infinite alternate;
}
body::after {
  width: 40vw; height: 40vw; right: -10vw; bottom: -14vw;
  background: radial-gradient(circle, color-mix(in srgb, var(--gold) 42%, transparent), transparent 70%);
  animation: blobDrift 26s ease-in-out infinite alternate-reverse;
}
@keyframes blobDrift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(9vw, 7vh) scale(1.18); }
}
#app-loader { position: fixed; inset: 0; z-index: 120; display: grid; place-content: center; justify-items: center; gap: 9px; overflow: hidden; color: #17224a; background: radial-gradient(circle at 50% 35%, #fff 0, #f8faff 46%, #edf2fb 100%); transition: opacity .48s ease, visibility .48s ease; }
#app-loader::before, #app-loader::after { content: ""; position: absolute; border: 1px solid rgba(46,49,146,.12); border-radius: 50%; pointer-events: none; }
#app-loader::before { width: min(84vw, 680px); height: min(84vw, 680px); animation: loaderHalo 6s linear infinite; }
#app-loader::after { width: min(58vw, 450px); height: min(58vw, 450px); border-style: dashed; animation: loaderHaloReverse 9s linear infinite; }
#app-loader.is-ready { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-mark { position: relative; z-index: 2; width: 150px; height: 150px; display: grid; place-items: center; }
.loader-mark img { position: relative; z-index: 2; width: 96px; height: 96px; object-fit: contain; filter: drop-shadow(0 12px 20px rgba(0,0,0,.32)); animation: loaderMark 1.55s ease-in-out infinite; }
.loader-orbit { position: absolute; border: 1.5px dashed rgba(46,49,146,.34); border-radius: 50%; }
.loader-orbit-outer { inset: 3px; animation: loaderOrbit 5.8s linear infinite; }
.loader-orbit-inner { inset: 22px; border-color: rgba(245,179,1,.48); animation: loaderOrbitReverse 3.7s linear infinite; }
.loader-title { position: relative; z-index: 2; margin-top: 3px; color: #202a69; font-size: 16px; letter-spacing: .2em; animation: loaderTextIn .62s .25s both; }
.loader-subtitle { position: relative; z-index: 2; font-size: 12px; color: #66708f; animation: loaderTextIn .6s .58s both; }
.loader-progress { position: relative; z-index: 2; width: 154px; height: 3px; margin-top: 7px; overflow: hidden; border-radius: 99px; background: rgba(46,49,146,.12); }
.loader-progress i { display: block; width: 48%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--red), var(--gold), #7dd3fc); animation: loaderProgress 1.5s .5s ease-in-out infinite; }
.loader-credit { position: absolute; z-index: 2; bottom: max(24px, calc(env(safe-area-inset-bottom) + 16px)); display: flex; align-items: center; gap: 10px; animation: loaderCreditIn .6s 1.05s both; }
.loader-credit img { width: 36px; height: 36px; object-fit: cover; border-radius: 9px; box-shadow: 0 7px 18px rgba(0,0,0,.36); }
.loader-credit span { display: grid; gap: 3px; line-height: 1; }
.loader-credit b { font-size: 10px; letter-spacing: .18em; }
.loader-credit small { color: #66708f; font-size: 8px; font-weight: 700; letter-spacing: .16em; }
@keyframes loaderOrbit { to { transform: rotate(360deg); } }
@keyframes loaderOrbitReverse { to { transform: rotate(-360deg); } }
@keyframes loaderHalo { to { transform: rotate(360deg) scale(1.04); } }
@keyframes loaderHaloReverse { to { transform: rotate(-360deg) scale(.96); } }
@keyframes loaderMark { 0%,100% { transform: translateY(2px) scale(.96); } 50% { transform: translateY(-5px) scale(1.04); } }
@keyframes loaderTextIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes loaderProgress { 0% { transform: translateX(-120%); } 60%,100% { transform: translateX(220%); } }
@keyframes loaderCreditIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
img { max-width: 100%; }
::selection { background: rgba(var(--sec-rgb), .25); }

/* ================= Strip atas (bingkai) ================= */
#topbar {
  flex: none; position: relative; z-index: 50;
  height: calc(var(--topbar-h) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  display: flex; align-items: center; gap: 8px;
  padding-left: clamp(10px, 2.5vw, 20px);
  padding-right: clamp(10px, 2.5vw, 20px);
  color: #fff;
}
.ico-btn {
  flex: none; width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 0; border-radius: 11px;
  background: rgba(255,255,255,.14); color: #fff;
  cursor: pointer; transition: background .16s, transform .1s, opacity .16s;
}
.ico-btn:hover { background: rgba(255,255,255,.28); }
.ico-btn:active { transform: scale(.93); }
.ico-btn svg { width: 20px; height: 20px; }
.ico-btn:disabled { opacity: .35; cursor: default; }
.ico-btn:disabled:hover { background: rgba(255,255,255,.14); }

#breadcrumb {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 2px;
  font-size: 13px; font-weight: 600;
  overflow-x: auto; white-space: nowrap;
  scrollbar-width: none; -ms-overflow-style: none;
  mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}
#breadcrumb::-webkit-scrollbar { display: none; }
#breadcrumb a { color: rgba(255,255,255,.78); text-decoration: none; padding: 4px 6px; border-radius: 7px; transition: background .15s, color .15s; }
#breadcrumb a:hover { color: #fff; background: rgba(255,255,255,.16); }
#breadcrumb .sep { color: rgba(255,255,255,.4); flex: none; }
#breadcrumb .current { color: #fff; font-weight: 800; padding: 4px 6px; overflow: hidden; text-overflow: ellipsis; }
.home-topbar #btn-back { display: none; }
.home-topbar #breadcrumb { mask-image: none; }
#breadcrumb .topbar-brand { display: inline-flex; align-items: center; gap: 9px; padding: 3px 7px 3px 3px; color: #fff; font-weight: 800; letter-spacing: .01em; }
#breadcrumb .topbar-brand img { width: 30px; height: 30px; object-fit: contain; }
#breadcrumb .topbar-brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#breadcrumb .topbar-brand:hover { color: #fff; background: rgba(255,255,255,.12); }
.top-actions { flex: none; display: flex; gap: 6px; }
.ic-moon { display: none; }
[data-theme="dark"] .ic-sun { display: none; }
[data-theme="dark"] .ic-moon { display: block; }

/* ================= Kanvas slide ================= */
#stage {
  flex: 1; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  background: var(--panel);
  border-radius: var(--radius);
  margin: 0 var(--frame) var(--frame);
  box-shadow: 0 10px 40px rgba(0,0,0,.28);
  padding: 0 clamp(16px, 3.4vw, 52px) clamp(90px, 10vh, 120px);
  position: relative; z-index: 1;
  isolation: isolate;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--sec) 38%, var(--line-2)) transparent;
}
#stage::-webkit-scrollbar { width: 11px; }
#stage::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--sec) 38%, var(--line-2));
  border-radius: 99px; border: 3px solid var(--panel);
}
#stage::-webkit-scrollbar-track { background: transparent; }
#stage.snap { scroll-snap-type: y mandatory; scroll-padding-top: 70px; }
#page { animation: pageIn .34s cubic-bezier(.22,.61,.36,1); }
@keyframes pageIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #page { animation: none; } html { scroll-behavior: auto; } }
@media (prefers-reduced-motion: reduce) { .loader-mark img, .loader-orbit, #app-loader::before, #app-loader::after, .loader-progress i, .loader-title, .loader-subtitle, .loader-credit, .homepage-credit { animation: none; } }

.wrap { max-width: 1500px; margin: 0 auto; }

/* ================= Beranda ================= */
.home { max-width: 1180px; margin: 0 auto; padding-top: clamp(22px, 4vh, 42px); text-align: center; }
.home-hero { display: block; }
.home-brand { display: flex; align-items: center; justify-content: center; width: min(240px, 70vw); margin: 0 auto; padding: 6px 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 8px 20px -17px rgba(15,20,50,.5); }
.home .logo { display: block; width: min(210px, 100%); height: auto; max-height: 37px; object-fit: contain; }
.home-title { margin-top: clamp(20px, 3.2vh, 30px); text-align: center; }
.home h1 {
  margin-top: 0;
  font-size: clamp(32px, 4.3vw, 52px); font-weight: 800; letter-spacing: -.025em;
  color: var(--navy); line-height: 1;
}
[data-theme="dark"] .home h1 { color: #8f92e8; }
.tricolor {
  height: 5px; border-radius: 6px; margin: clamp(18px, 2.8vh, 26px) auto 0; width: min(760px, 76vw);
  background: linear-gradient(90deg, #1b56c4 0 34%, var(--gold) 34% 66%, var(--red) 66% 100%);
}
.badge-row {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: clamp(22px, 3vw, 38px); margin-top: clamp(34px, 5.5vh, 56px);
}
.badge {
  flex: 1 1 250px; max-width: 330px; display: block;
  transition: transform .18s cubic-bezier(.22,.61,.36,1), filter .18s;
}
.badge img { width: 100%; height: auto; display: block; filter: drop-shadow(0 8px 14px rgba(0,0,0,.16)); }
.badge:hover { transform: translateY(-6px) scale(1.02); }
.pill-row {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: clamp(20px, 2.8vw, 32px); margin-top: clamp(28px, 4.2vh, 42px);
}
.pill { flex: 0 1 245px; max-width: 270px; display: block; transition: transform .18s, filter .18s; }
.pill img { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 12px rgba(0,0,0,.15)); }
.pill:hover { transform: translateY(-4px) scale(1.02); }
.homepage-credit { position: fixed; z-index: 30; left: 50%; bottom: max(24px, calc(var(--frame) + env(safe-area-inset-bottom) + 12px)); display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border: 1px solid rgba(46,49,146,.12); border-radius: 999px; background: color-mix(in srgb, var(--panel) 88%, transparent); box-shadow: 0 8px 22px rgba(15,20,50,.13); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: homeCreditIn .5s .18s both; }
.homepage-credit img { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; }
.homepage-credit span { display: grid; gap: 3px; line-height: 1; text-align: left; }
.homepage-credit b { color: var(--text); font-size: 10px; letter-spacing: .17em; }
.homepage-credit small { color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: .15em; }
@keyframes homeCreditIn { from { opacity: 0; transform: translate(-50%, 9px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ================= Kepala halaman (terpusat) ================= */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.doc-head-c { position: sticky; top: 0; z-index: 100; isolation: isolate; margin: 0; padding: 0; background: var(--panel); box-shadow: 0 10px 18px -18px rgba(15,20,50,.5); }
.doc-head-c::before { content: ""; position: absolute; z-index: -1; top: -3px; bottom: 0; left: calc(clamp(16px, 3.4vw, 52px) * -1); right: calc(clamp(16px, 3.4vw, 52px) * -1); background: var(--panel); }
.product-header { position: relative; display: grid; grid-template-columns: minmax(120px, .8fr) minmax(0, 1.7fr) minmax(120px, .8fr); align-items: center; gap: 14px; min-height: 64px; padding: 6px 0; background: var(--panel); border-bottom: 1px dashed var(--line-2); }
.product-header-logo {
  min-width: 0; display: flex; align-items: center; justify-content: flex-start; color: var(--sec);
  border: 0; background: transparent; padding: 4px; margin: -4px; border-radius: 10px; cursor: pointer;
  transition: transform .16s var(--ease-out, ease-out), background .15s;
}
.product-header-logo:hover { background: rgba(var(--sec-rgb), .08); }
.product-header-logo:active { transform: scale(.95); transition-duration: 100ms; }
@media (hover: none) { .product-header-logo:hover { background: transparent; } }
.product-header-logo img { display: block; width: auto; height: 42px; max-width: 124px; object-fit: contain; }
.product-header-logo svg { width: 28px; height: 28px; }
.product-header-title { min-width: 0; text-align: center; font-size: clamp(18px, 2.2vw, 29px); font-weight: 800; line-height: 1.1; letter-spacing: -.4px; color: var(--text); text-transform: uppercase; }
.product-header-ref { min-width: 0; display: flex; justify-content: flex-end; }
.product-header-ref .ref { max-width: 100%; margin: 0; padding: 7px 10px; font-size: 11px; white-space: nowrap; }
.product-header-ref .ref svg { width: 14px; height: 14px; }
.doc-title {
  font-size: clamp(24px, 3.8vw, 42px); font-weight: 800; letter-spacing: -.5px;
  line-height: 1.1; color: var(--text); text-transform: uppercase;
}
.prod-logo { width: auto; height: clamp(46px, 6vw, 76px); max-width: min(90%, 360px); object-fit: contain; }
.product-title { margin-top: 6px; font-size: clamp(18px, 2.3vw, 28px); }
[data-theme="dark"] .prod-logo { background: #fff; padding: 10px 20px; border-radius: 14px; box-shadow: var(--shadow); }
[data-theme="dark"] .menu-card { background: #fbfcfe; }
.ref {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--sec);
  border: 1.5px solid rgba(var(--sec-rgb), .35); border-radius: 999px;
  padding: 7px 16px; background: rgba(var(--sec-rgb), .07); text-decoration: none;
  transition: background .15s;
}
[data-theme="dark"] .ref { color: color-mix(in srgb, var(--sec) 55%, #fff); }
a.ref:hover { background: rgba(var(--sec-rgb), .16); }
.ref.static { cursor: default; }
.ref svg { width: 15px; height: 15px; flex: none; }

@media (max-width: 720px) and (orientation: portrait) {
  .home { padding-top: 18px; }
  .home-brand { width: min(220px, 72vw); }
  .home .logo { max-height: 34px; }
  .home-title { margin-top: 18px; }
  .home h1 { font-size: clamp(28px, 9vw, 38px); }
  .tricolor { margin-top: 16px; width: 84vw; }
  .product-header { grid-template-columns: 46px minmax(0, 1fr) auto; gap: 8px; min-height: 48px; padding-bottom: 9px; }
  .product-header-logo img { height: 32px; max-width: 46px; }
  .product-header-title { font-size: 15px; }
  .product-header-ref .ref span { display: none; }
  .product-header-ref .ref { padding: 8px; }
}

/* menu head (terpusat) */
.view-head { text-align: center; margin-bottom: 22px; }
.view-head h1 {
  font-size: clamp(24px, 4vw, 42px); font-weight: 800; letter-spacing: -.5px;
  color: var(--text); text-transform: uppercase;
}

/* ================= Layout detail: sections + nav samping ================= */
.detail { display: flex; gap: clamp(20px, 2.2vw, 34px); align-items: flex-start; }
.detail.nonav { display: block; }
.sections { flex: 1; min-width: 0; }
.sections > * + * { margin-top: 16px; }
.sec { scroll-margin-top: 70px; }
.sec + .sec { margin-top: 0; padding-top: 0; border-top: 0; }
.sec-h {
  font-size: clamp(17px, 2.2vw, 24px); font-weight: 800; color: var(--sec);
  text-transform: uppercase; letter-spacing: -.2px; margin-bottom: 14px;
  display: inline-flex; align-items: center; gap: 10px;
}
[data-theme="dark"] .sec-h { color: color-mix(in srgb, var(--sec) 55%, #fff); }
.sec-h::before { content: ""; width: 6px; height: 22px; border-radius: 3px; background: linear-gradient(var(--sec), var(--sec-2)); }
#stage.snap .sec { display: grid; align-content: start; padding-top: clamp(12px, 2.2vh, 22px); scroll-snap-align: start; scroll-snap-stop: always; min-height: calc(100dvh - var(--topbar-h) - var(--frame) - 72px); }

/* navigasi section (selalu terlihat / sticky) */
.sidenav {
  flex: none; width: min(270px, 25vw); display: flex; flex-direction: column; gap: 8px;
  position: sticky; top: 50%; max-height: calc(100dvh - 150px); overflow-x: hidden; overflow-y: auto; transform: translateY(-50%); align-self: flex-start; z-index: 5;
}
.sidenav-title {
  font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); padding: 0 4px 4px;
}
.navlink {
  position: relative; display: flex; align-items: center; gap: 11px; padding: 13px 15px 13px 17px;
  border-radius: 12px; text-decoration: none; color: var(--text); background: var(--panel-2);
  border: 1.5px solid transparent; font-weight: 700; font-size: 14px; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s, box-shadow .15s, transform .12s;
}
.navlink::before {
  content: ""; position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 0; border-radius: 3px; background: #fff; transition: height .18s;
}
.navlink:hover { border-color: rgba(var(--sec-rgb), .35); transform: translateX(2px); }
.navlink.active { background: var(--panel-2); color: var(--text); border-color: rgba(var(--sec-rgb), .22); box-shadow: none; }
.navlink.active::before { height: 25px; background: var(--sec); box-shadow: 0 0 9px rgba(var(--sec-rgb), .72); }
.navlink.active svg { color: var(--sec); }
.navlink svg { width: 18px; height: 18px; flex: none; }
.navlink .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Tautan dokumen berada dalam panel kanan, dipisahkan dari navigasi halaman. */
.sidebar-divider { height: 1px; margin: 8px 3px 3px; background: var(--line-2); }
.external-title { margin-top: 1px; }
.sidebar-doclinks { display: flex; flex-direction: column; gap: 8px; }
.doclink {
  --c: var(--sec);
  display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0;
  padding: 10px 11px; border-radius: 10px; text-decoration: none; cursor: pointer;
  background: transparent; color: var(--sec); border: 1px solid rgba(var(--sec-rgb), .28); font-weight: 700; font-size: 13px;
  transition: transform .14s, background .14s, border-color .14s;
}
.doclink:hover { transform: translateX(2px); background: rgba(var(--sec-rgb), .08); border-color: rgba(var(--sec-rgb), .55); }
.doclink svg { width: 15px; height: 15px; flex: none; opacity: .85; }
.doclink svg:last-child { margin-left: auto; opacity: .62; }
.doclink .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 900px) and (orientation: portrait) {
  .detail { flex-direction: column; }
  .sections { width: 100%; }
  .sidenav {
    width: 100%; flex-direction: row; flex-wrap: wrap; overflow: hidden; gap: 8px;
    order: -1; margin-bottom: 12px; top: 0; max-height: none; transform: none;
    padding: 8px; background: color-mix(in srgb, var(--panel) 94%, transparent);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-radius: 12px; scrollbar-width: none;
  }
  .sidenav::-webkit-scrollbar { display: none; }
  .sidenav-title, .sidebar-divider { display: none; }
  .navlink { flex: 0 0 auto; padding: 10px 14px; }
  .navlink .lbl { white-space: nowrap; }
  .sidebar-doclinks { flex: 1 0 100%; width: 100%; flex-direction: column; gap: 8px; }
  .doclink { flex: none; width: 100%; max-width: none; padding: 10px 13px; }
  #stage.snap { scroll-snap-type: none; }
  #stage.snap .sec { min-height: 0; }
  .table-layout.tables-3 { grid-template-columns: minmax(0, 1.25fr) minmax(230px, 1fr); }
}

@media (max-width: 900px) and (orientation: landscape) {
  #stage { padding-left: 20px; padding-right: 20px; }
  .detail { gap: 14px; }
  .sidenav { width: min(220px, 28vw); max-height: calc(100dvh - 118px); }
  .navlink { gap: 8px; padding: 10px 11px 10px 14px; font-size: 12.5px; }
  .doclink { padding: 8px 9px; font-size: 11.5px; }
  .sidenav-title { font-size: 9.5px; }
}

/* ================= Blok konten ================= */
.p { font-size: 15.5px; line-height: 1.7; }
.p.lead { color: var(--muted); font-size: 16px; }
.list { list-style: none; display: grid; gap: 8px; }
.list li { position: relative; padding-left: 26px; line-height: 1.6; font-size: 15px; }
.list li::before { content: ""; position: absolute; left: 4px; top: 9px; width: 8px; height: 8px; border-radius: 2px; background: var(--sec); }

/* ================= Tabel ala slide ================= */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; }
.table-wrap::-webkit-scrollbar { height: 8px; }
.table-wrap::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; }
table { width: 100%; max-width: 100%; border-collapse: collapse; font-size: 14px; background: var(--panel); }
th, td { border: 1px solid var(--line-2); padding: 11px 15px; text-align: left; vertical-align: top; line-height: 1.5; max-width: 560px; }
thead th {
  background: linear-gradient(var(--sec), var(--sec-2)); color: #fff; font-weight: 700;
  text-transform: uppercase; font-size: 12.5px; letter-spacing: .02em; text-align: center; vertical-align: middle;
  border-color: var(--sec-2);
}
thead th.cell-empty { color: transparent; }
td[rowspan] { vertical-align: middle; font-weight: 700; background: var(--panel-2); }
.cell-na { color: var(--muted); opacity: .55; font-weight: 600; }
tbody td:first-child { font-weight: 700; color: var(--text); background: var(--panel-2); }
tbody tr:hover td { background: rgba(var(--sec-rgb), .05); }
.table-hint { display: none; font-size: 12px; color: var(--muted); margin-top: 8px; align-items: center; gap: 6px; }
.table-hint svg { width: 14px; height: 14px; }

/* Beberapa tabel pada satu halaman disusun memakai seluruh lebar kanvas. */
.table-layout { display: grid; gap: 16px; align-items: start; }
.table-layout.tables-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.table-layout.tables-3 { grid-template-columns: minmax(0, 1.55fr) minmax(260px, 1fr); }
.table-layout.tables-3 > :first-child { grid-row: span 2; }
.table-layout .table-wrap { width: 100%; }
.table-layout table { width: 100%; }
.table-layout.tables-3 > :not(:first-child) th,
.table-layout.tables-3 > :not(:first-child) td { padding: 9px 11px; }

.kredit69-stack { display: grid; gap: 16px; width: min(100%, 1040px); margin-inline: auto; }
.kredit69-stack .table-wrap { width: 100%; }
.kredit69-stack th:first-child,
.kredit69-stack td:first-child { width: 30%; }
.kredit69-stack th:last-child,
.kredit69-stack td:last-child { width: 70%; }

/* Jaringan kantor: tiap lokasi menjadi kartu mandiri, bukan deretan bullet. */
.office-head { display: flex; align-items: flex-start; gap: 14px; padding: 17px 19px; margin-bottom: 16px; border-radius: 15px; color: #fff; background: linear-gradient(120deg, var(--sec), var(--sec-2)); box-shadow: var(--shadow); }
.office-head-icon { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: rgba(255,255,255,.16); }
.office-head svg { width: 19px; height: 19px; }
.office-head strong, .office-head span, .office-head a { display: block; }
.office-head strong { font-size: 15px; }
.office-head span { margin-top: 3px; font-size: 13px; opacity: .92; }
.office-head a { margin-top: 7px; color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; }
.office-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.office-card { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel-2); }
.office-card-title { display: flex; align-items: center; gap: 8px; color: var(--sec); }
.office-card-title svg, .office-card > a svg { width: 16px; height: 16px; flex: none; }
.office-card-title strong { font-size: 14px; }
.office-card p { min-height: 40px; margin: 9px 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.office-card > a { display: inline-flex; align-items: center; gap: 6px; color: var(--sec); text-decoration: none; font-size: 12.5px; font-weight: 800; }

.important-notes { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 14px; max-width: 960px; padding: 20px; border: 1px solid rgba(var(--sec-rgb), .25); border-radius: 16px; background: linear-gradient(135deg, rgba(var(--sec-rgb), .1), var(--panel-2)); }
.important-notes > svg { width: 42px; height: 42px; padding: 10px; border-radius: 12px; color: #fff; background: var(--sec); }
.important-notes strong { display: block; margin-bottom: 9px; color: var(--sec); font-size: 16px; }
.important-notes ul { display: grid; gap: 8px; padding-left: 18px; }
.important-notes li { line-height: 1.55; font-size: 14px; }
.note-foot { margin-top: 12px; font-size: 13px; color: var(--muted); }

/* ================= Periode Program (3 tabel berwarna) ================= */
.periode-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; align-items: start; }
.periode-grid table { width: 100%; }
.periode-grid thead th { background: #3a3f4c; border-color: #2b2f3a; }
.periode-grid td { text-align: center; font-weight: 600; }
.periode-grid td.pd { color: #10131c; }

/* ================= Halaman menu (kartu produk berlogo) ================= */
.menu-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2vw, 26px); max-width: 1280px; margin-inline: auto; }
.menu-card {
  --c: var(--sec);
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 136px; padding: 20px 26px; border-radius: 16px;
  background: #fff; border: 1.5px solid var(--line); border-top: 4px solid var(--c);
  text-decoration: none; cursor: pointer; box-shadow: var(--shadow);
  transition: transform .16s cubic-bezier(.22,.61,.36,1), box-shadow .16s, border-color .16s;
}
.menu-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--c); }
.mc-brand { position: relative; display: flex; align-items: center; justify-content: center; gap: 13px; width: 100%; min-width: 0; }
.mc-logo { position: relative; z-index: 1; display: block; width: auto; height: auto; max-height: 92px; max-width: 92%; object-fit: contain; }
.mc-placeholder { display: grid; place-items: center; min-height: 48px; max-width: 88%; color: var(--c); font-size: clamp(13px, 1.3vw, 17px); font-weight: 800; line-height: 1.22; letter-spacing: .01em; text-align: center; text-transform: uppercase; transition: opacity .18s ease; }
.mc-placeholder.is-loaded { position: absolute; opacity: 0; pointer-events: none; }
.mc-caption { color: var(--c); font-size: clamp(12px, 1.15vw, 15px); font-weight: 800; line-height: 1.25; text-align: left; text-transform: uppercase; }
.mc-txt { font-weight: 800; text-transform: uppercase; color: var(--c); text-align: center; font-size: clamp(15px, 1.5vw, 18px); line-height: 1.22; letter-spacing: .01em; }
.mc-go { position: absolute; top: 12px; right: 12px; color: var(--line-2); transition: color .16s, transform .16s; }
.menu-card:hover .mc-go { color: var(--c); transform: translateX(2px); }
.mc-go svg { width: 18px; height: 18px; display: block; }

@media (max-width: 1100px) {
  .menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) and (orientation: portrait) {
  .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .menu-card { min-height: 116px; padding: 16px; }
  .mc-logo { max-height: 76px; }
}

@media (max-width: 460px) and (orientation: portrait) {
  .menu-grid { grid-template-columns: 1fr; }
}

/* ================= Gambar konten ================= */
.img-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.img-grid.single { grid-template-columns: 1fr; max-width: 900px; margin-inline: auto; }
.img-item { display: block; border-radius: 12px; overflow: hidden; transition: transform .16s, box-shadow .16s; }
a.img-item:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.img-item img { width: 100%; display: block; }

/* ================= Navigasi lingkaran ================= */
.circle-btn {
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--panel); border: 3px solid var(--sec); color: var(--sec);
  box-shadow: 0 6px 16px rgba(0,0,0,.22);
  transition: background .16s, color .16s, transform .12s, opacity .16s;
}
.circle-btn:hover { background: var(--sec); color: #fff; transform: translateY(-2px); }
.circle-btn:active { transform: scale(.92); }
.circle-btn svg { width: 26px; height: 26px; }
.circle-btn.sm { width: 44px; height: 44px; border-width: 2.5px; }
.circle-btn.sm svg { width: 21px; height: 21px; }
.circle-btn:disabled { opacity: .32; cursor: default; }
.circle-btn:disabled:hover { background: var(--panel); color: var(--sec); transform: none; }

#corner-nav {
  position: fixed; right: calc(var(--frame) + 12px); bottom: calc(var(--frame) + 12px + env(safe-area-inset-bottom));
  z-index: 46; display: flex; gap: 12px;
}
#seq-nav {
  position: fixed; left: calc(var(--frame) + 12px); bottom: calc(var(--frame) + 14px + env(safe-area-inset-bottom));
  z-index: 46; display: none; align-items: center; gap: 8px;
  padding: 5px 10px 5px 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 90%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 6px 16px rgba(0,0,0,.2);
}
#seq-count { font-size: 12.5px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 1099px) { #seq-nav { display: flex; } }

.edge-arrow {
  position: fixed; top: 50%; transform: translateY(-50%); z-index: 40;
  width: 44px; height: 84px; display: none; place-items: center;
  background: rgba(255,255,255,.16); border: 0; color: #fff; cursor: pointer;
  transition: background .16s, transform .16s, opacity .16s; opacity: .8;
}
.edge-arrow:hover { background: rgba(255,255,255,.3); opacity: 1; }
.edge-arrow svg { width: 26px; height: 26px; }
#nav-prev { left: 0; border-radius: 0 14px 14px 0; }
#nav-next { right: 0; border-radius: 14px 0 0 14px; }
.edge-arrow:disabled { opacity: 0; pointer-events: none; }
@media (min-width: 1100px) { .edge-arrow { display: grid; } }

/* ================= Overlay pencarian ================= */
#search-overlay[hidden] { display: none; }
#search-overlay {
  position: fixed; inset: 0; z-index: 80;
  display: flex; justify-content: center; align-items: flex-start;
  padding: clamp(16px, 12vh, 120px) 16px 16px;
  background: rgba(10,14,26,.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  animation: fade .2s ease;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
#search-box {
  width: min(600px, 100%); background: var(--panel); border-radius: 18px;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.6); overflow: hidden;
  animation: pop .22s cubic-bezier(.22,.61,.36,1);
}
@keyframes pop { from { opacity: 0; transform: translateY(-12px) scale(.98); } to { opacity: 1; transform: none; } }
.search-field { display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.search-field svg { width: 20px; height: 20px; color: var(--muted); flex: none; }
#search { flex: 1; border: 0; outline: 0; background: transparent; font-family: var(--font); font-size: 16px; color: var(--text); }
#search::placeholder { color: var(--muted); }
.search-field kbd { flex: none; font-family: var(--font); font-size: 11px; font-weight: 600; color: var(--muted); border: 1px solid var(--line-2); border-radius: 6px; padding: 3px 7px; background: var(--panel-2); }
#search-results { max-height: min(52vh, 440px); overflow-y: auto; padding: 8px; }
.sr-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 11px; text-decoration: none; color: var(--text); cursor: pointer; }
.sr-item:hover, .sr-item.active { background: var(--panel-2); }
.sr-ic { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: linear-gradient(var(--sec), var(--sec-2)); }
.sr-ic svg { width: 18px; height: 18px; }
.sr-body { min-width: 0; }
.sr-title { font-weight: 700; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-path { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-snippet { font-style: italic; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; }
.sr-snippet mark { background: rgba(var(--sec-rgb), .22); color: inherit; border-radius: 3px; padding: 0 2px; font-style: normal; }
.sr-empty { padding: 26px; text-align: center; color: var(--muted); }

/* ================= Responsif ================= */
@media (max-width: 720px) and (orientation: portrait) {
  :root { --frame: 8px; --topbar-h: 50px; }
  #stage { padding-left: 14px; padding-right: 14px; padding-bottom: 132px; }
  .badge { flex-basis: 100%; max-width: 440px; }
  table { font-size: 13.5px; }
  th, td { padding: 9px 11px; }
  tbody td:first-child { position: sticky; left: 0; box-shadow: 1px 0 0 var(--line-2); }
  .table-hint { display: inline-flex; }
  .table-layout.tables-2, .table-layout.tables-3 { grid-template-columns: 1fr; }
  .table-layout.tables-3 > :first-child { grid-row: auto; }
  .office-grid { grid-template-columns: 1fr; }
  .circle-btn { width: 48px; height: 48px; }
  .circle-btn svg { width: 23px; height: 23px; }
}

/* =========================================================
   V3 — LAPISAN DINAMIS (entrance, glow, progress, lightbox)
   ========================================================= */

/* ---------- transisi halaman berarah ---------- */
#page[data-dir="fwd"]  { animation-name: pageInFwd; }
#page[data-dir="back"] { animation-name: pageInBack; }
@keyframes pageInFwd  { from { opacity: 0; transform: translateX(34px); } to { opacity: 1; transform: none; } }
@keyframes pageInBack { from { opacity: 0; transform: translateX(-34px); } to { opacity: 1; transform: none; } }

/* ---------- entrance berjenjang ---------- */
/* fill-mode "backwards": setelah animasi selesai elemen kembali ke keadaan
   alaminya, jadi tak ada risiko tersangkut transparan bila animasi terlewat. */
.stagger > * {
  animation: riseIn .55s cubic-bezier(.22,.61,.36,1) backwards;
  animation-delay: calc(var(--i, 0) * 60ms);
}
@keyframes riseIn { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }

/* ---------- beranda: judul gradien + shimmer + badge hidup ---------- */
.home { position: relative; }
.home::before, .home::after {
  content: ""; position: absolute; z-index: -1; border-radius: 50%;
  pointer-events: none; filter: blur(56px); opacity: .6;
}
.home::before { width: 380px; height: 380px; left: -110px; top: 30px;
  background: radial-gradient(circle, rgba(var(--sec-rgb), .16), transparent 70%);
  animation: homeBlob 14s ease-in-out infinite alternate; }
.home::after { width: 330px; height: 330px; right: -90px; top: 180px;
  background: radial-gradient(circle, color-mix(in srgb, var(--gold) 26%, transparent), transparent 70%);
  animation: homeBlob 18s ease-in-out infinite alternate-reverse; }
@keyframes homeBlob { from { transform: translate(0,0) scale(1); } to { transform: translate(26px, 22px) scale(1.12); } }

.home h1 {
  background: linear-gradient(115deg, var(--navy) 20%, #4d51e0 52%, var(--red) 90%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
[data-theme="dark"] .home h1 {
  background: linear-gradient(115deg, #9ea1ff 15%, #d9dbff 50%, #ff8f95 90%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.tricolor { position: relative; overflow: hidden; }
.tricolor::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.85) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: shimmer 3.4s ease-in-out infinite;
}
@keyframes shimmer { 0%, 22% { transform: translateX(-120%); } 58%, 100% { transform: translateX(120%); } }

.badge img { animation: badgeBob 5.2s ease-in-out infinite; }
.badge:nth-child(2) img { animation-delay: -1.7s; }
.badge:nth-child(3) img { animation-delay: -3.4s; }
@keyframes badgeBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.badge:hover img { animation-play-state: paused; }

/* ---------- kartu menu: kilau + glow warna produk ---------- */
.menu-card { overflow: hidden; }
.menu-card::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.5) 50%, transparent 62%);
  transform: translateX(-130%) skewX(-8deg);
  transition: transform .7s ease;
}
.menu-card:hover::after { transform: translateX(130%) skewX(-8deg); }
.menu-card:hover {
  box-shadow: 0 22px 44px -18px color-mix(in srgb, var(--c) 55%, transparent),
              0 4px 14px -6px color-mix(in srgb, var(--c) 30%, transparent);
}

/* ---------- navlink aktif lebih hidup ---------- */
.navlink { will-change: transform; }
.navlink.active {
  background: linear-gradient(120deg, rgba(var(--sec-rgb), .14), rgba(var(--sec-rgb), .05));
  color: var(--sec); border-color: rgba(var(--sec-rgb), .35);
}
[data-theme="dark"] .navlink.active { color: color-mix(in srgb, var(--sec) 50%, #fff); }
.navlink.active .lbl { font-weight: 800; }

/* ---------- panah tepi: kapsul kaca ---------- */
.edge-arrow {
  background: color-mix(in srgb, #fff 16%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.28); border-left-width: 0;
}
#nav-next { border-left-width: 1px; border-right-width: 0; }
.edge-arrow:hover { background: color-mix(in srgb, #fff 30%, transparent); }
#nav-prev:hover { transform: translateY(-50%) translateX(3px); }
#nav-next:hover { transform: translateY(-50%) translateX(-3px); }

/* ---------- tombol lingkaran: glow seksi ---------- */
.circle-btn:hover { box-shadow: 0 10px 26px rgba(var(--sec-rgb), .5); }

/* ---------- tabel: bingkai halus + zebra lembut ---------- */
.table-wrap { border: 1px solid var(--line); }
tbody tr:nth-child(even) td:not([style]):not([rowspan]):not(:first-child) {
  background: color-mix(in srgb, var(--panel-2) 46%, var(--panel));
}
tbody tr:hover td:not([style]) { background: rgba(var(--sec-rgb), .07); }

/* ---------- progress baca (atas kanvas) ---------- */
#scroll-progress {
  position: fixed; z-index: 60; pointer-events: none;
  top: calc(var(--topbar-h) + env(safe-area-inset-top));
  left: var(--frame); right: var(--frame); height: 3px;
  background: linear-gradient(90deg, var(--sec), var(--gold) 55%, var(--red));
  border-radius: 0 3px 3px 0;
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .1s linear;
}

/* ---------- lightbox gambar ---------- */
#lightbox[hidden] { display: none; }
.img-item { cursor: zoom-in; }
a.img-item { cursor: pointer; }
#lightbox {
  position: fixed; inset: 0; z-index: 110;
  display: flex; align-items: center; justify-content: center; padding: 4vmin;
  background: rgba(7, 10, 22, .85);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  cursor: zoom-out; animation: fade .22s ease;
}
#lightbox img {
  max-width: 94vw; max-height: 90vh; border-radius: 14px;
  box-shadow: 0 40px 90px -20px rgba(0,0,0,.8);
  animation: lbZoom .28s cubic-bezier(.22,.61,.36,1);
}
#lightbox .lb-close {
  position: absolute; top: 18px; right: 18px;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255,255,255,.14); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .15s, transform .12s;
}
#lightbox .lb-close:hover { background: rgba(255,255,255,.3); transform: rotate(90deg); }
#lightbox .lb-close svg { width: 22px; height: 22px; }
@keyframes lbZoom { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }

/* ---------- pencarian: highlight + petunjuk ---------- */
#search-box { border: 1px solid var(--line); box-shadow: 0 0 0 4px rgba(var(--sec-rgb), .14), 0 30px 70px -20px rgba(0,0,0,.6); }
.sr-title mark { background: rgba(var(--sec-rgb), .2); color: inherit; border-radius: 3px; padding: 0 2px; }
.sr-item { transition: background .12s, transform .12s; }
.sr-item:hover, .sr-item.active { transform: translateX(3px); }
.search-hints {
  display: flex; gap: 16px; justify-content: center;
  padding: 9px 14px; border-top: 1px solid var(--line);
  font-size: 11.5px; color: var(--muted); background: var(--panel-2);
}
.search-hints span { display: inline-flex; align-items: center; gap: 5px; }
.search-hints kbd {
  font-family: var(--font); font-size: 10px; font-weight: 700; color: var(--muted);
  border: 1px solid var(--line-2); border-radius: 5px; padding: 2px 6px; background: var(--panel);
}

/* ---------- kredit bizdev: ikut alir di layar kecil ---------- */
@media (max-width: 720px) and (orientation: portrait) {
  .homepage-credit { position: static; transform: none; margin: 30px auto 0; width: max-content; animation: none; }
}

/* ---------- hormati preferensi gerak ---------- */
@media (prefers-reduced-motion: reduce) {
  body::before, body::after, .home::before, .home::after,
  .tricolor::after, .badge img, .menu-card::after,
  .stagger > *, #page, #lightbox, #lightbox img { animation: none !important; }
  .stagger > * { opacity: 1; }
  #scroll-progress { transition: none; }
}

/* =========================================================
   V4 — Keseimbangan vertikal, grid menu rata, layar penuh
   ========================================================= */

/* tinggi kanvas yang tersedia (dipakai untuk memusatkan konten) */
:root { --canvas-h: calc(100dvh - var(--topbar-h) - var(--frame) - clamp(90px, 10vh, 120px)); }

/* ---------- ikon layar penuh ---------- */
.ic-compress { display: none; }
html.is-fullscreen .ic-expand { display: none; }
html.is-fullscreen .ic-compress { display: block; }

/* ---------- BERANDA: sebar merata, tidak menumpuk di atas ---------- */
.home {
  min-height: var(--canvas-h);
  display: flex; flex-direction: column; justify-content: center;
  padding-top: 0;
  gap: clamp(14px, 2.6vh, 30px);
}
.home-hero, .home-title, .badge-row, .pill-row { margin-top: 0 !important; }
.home-title { margin-top: clamp(6px, 1.4vh, 16px) !important; }
.badge-row { margin-top: clamp(10px, 2.2vh, 26px) !important; }
.pill-row  { margin-top: clamp(4px, 1.2vh, 14px) !important; }
/* badge sedikit lebih besar supaya kanvas terisi berwibawa */
.badge { flex: 1 1 270px; max-width: 366px; }
.pill  { flex: 0 1 262px; max-width: 292px; }

/* ---------- HALAMAN MENU: pusatkan vertikal + baris rata ---------- */
.menu-shell {
  min-height: var(--canvas-h);
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(16px, 3vh, 34px);
}
.menu-shell .view-head { margin-bottom: 0; }
.menu-grid { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }

/* ---------- HALAMAN DETAIL: konten pendek ikut terpusat ---------- */
#stage.snap .sec { align-content: safe center; }
.detail.nonav .sections,
.detail:not(.nonav) { min-height: calc(var(--canvas-h) - 78px); }
.detail { align-items: stretch; }
.detail .sections { display: flex; flex-direction: column; justify-content: safe center; }
/* sidenav tetap "mengambang" di tengah layar lewat sticky top:50%, bukan lewat flex */
.detail .sidenav { align-self: flex-start; }

/* ---------- responsif: kolom mengikuti lebar (harus setelah aturan --cols) ---------- */
@media (max-width: 1100px) {
  .menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) and (orientation: portrait) {
  .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .menu-shell, .home { min-height: 0; justify-content: flex-start; }
  .menu-shell { gap: 18px; }
  .home { padding-top: 16px; }
  .detail.nonav .sections, .detail:not(.nonav) { min-height: 0; }
  .detail .sections { display: block; }
  .detail .sidenav { align-self: stretch; }
}
@media (max-width: 460px) and (orientation: portrait) {
  .menu-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) and (orientation: landscape) {
  .menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .menu-shell, .home { min-height: 0; justify-content: flex-start; }
  .detail.nonav .sections, .detail:not(.nonav) { min-height: 0; }
  .detail .sections { display: block; }
}

/* =========================================================
   V5 — Emil polish: press feedback, touch-hover, easing
   ========================================================= */

:root { --ease-out: cubic-bezier(.22, 1, .36, 1); }

/* ---------- easing lebih bertenaga untuk entrance ---------- */
.stagger > * {
  animation-timing-function: var(--ease-out);
  /* cascade dibatasi ~360ms supaya grid besar tak terasa lambat */
  animation-delay: calc(min(var(--i, 0), 8) * 45ms);
}
#page[data-dir], #page { animation-timing-function: var(--ease-out); }

/* ---------- umpan-balik tekan: setiap elemen yang bisa diklik ----------
   "Buttons must feel responsive to press." Scale halus 0.97 memberi
   sinyal instan bahwa antarmuka mendengar sentuhan pengguna. */
.badge, .pill, .act, .navlink, .doclink, .sr-item, .menu-card, .banner,
.img-item, .ico-btn, .circle-btn, .topbar-brand, .ref, .doclink, .office-card > a {
  -webkit-tap-highlight-color: transparent;
}
.badge:active, .pill:active, .act:active, .navlink:active, .doclink:active,
.sr-item:active, .menu-card:active, .banner:active, .topbar-brand:active,
a.ref:active, .office-card > a:active {
  transform: scale(.97);
  transition-duration: 110ms;
}
/* elemen yang belum punya transisi transform → tambahkan agar press mulus */
.topbar-brand, a.ref, .office-card > a { transition: transform .14s var(--ease-out), background .15s; }

/* ---------- perangkat sentuh: matikan hover (hindari "sticky hover") ----------
   Di layar sentuh, tap memicu :hover dan efek angkat/kilau tersangkut
   sampai tap berikutnya. Netralkan agar hanya :active (tekan) yang terasa. */
@media (hover: none) {
  .menu-card:hover, .badge:hover, .pill:hover, .act:hover, .navlink:hover,
  .doclink:hover, .img-item:hover, .edge-arrow:hover, .sr-item:hover,
  .banner:hover, .ico-btn:hover, .topbar-brand:hover { transform: none; }
  .menu-card:hover { box-shadow: var(--shadow); border-color: var(--line); }
  .menu-card:hover::after { transform: translateX(-130%) skewX(-8deg); }
  .badge:hover img, .pill:hover img { transform: none; }
  .circle-btn:hover { background: var(--panel); color: var(--sec); transform: none; box-shadow: 0 6px 16px rgba(0,0,0,.22); }
  .navlink:hover { transform: none; border-color: transparent; }
  .doclink:hover { transform: none; background: transparent; }
}

/* ---------- kilau kartu sedikit lebih ringkas ---------- */
.menu-card::after { transition-duration: .55s; }

/* ---------- press pada tombol lingkaran/ikon tetap terasa di sentuh ---------- */
.ico-btn:active { transform: scale(.9); transition-duration: 90ms; }
.circle-btn:active { transform: scale(.9); transition-duration: 90ms; }

/* =========================================================
   V6 — Penataan mobile: ringkas, rapi, profesional
   ========================================================= */

/* pembungkus baris navigasi section: transparan di desktop (layout lama utuh) */
.navrow { display: contents; }

/* ---------- halaman detail di HP: chip dokumen → pill nav sticky → konten ---------- */
@media (max-width: 900px) and (orientation: portrait) {
  .detail { gap: 0; }
  .sidenav { display: contents; }
  .sidenav-title, .sidebar-divider { display: none; }

  /* tautan dokumen = chip kapsul kecil yang mengalir, bukan tumpukan tombol lebar */
  .sidebar-doclinks {
    order: -2; flex: none; width: 100%;
    display: flex; flex-direction: row; flex-wrap: wrap; gap: 7px;
    margin: 10px 0 2px;
  }
  .doclink {
    width: auto; flex: 0 1 auto; max-width: 100%;
    padding: 7px 12px; border-radius: 999px; font-size: 11.5px;
    background: rgba(var(--sec-rgb), .06);
  }
  .doclink svg { width: 13px; height: 13px; }
  .doclink svg:last-child { display: none; }
  .doclink .lbl { white-space: nowrap; }

  /* navigasi section: satu baris pill, digeser horizontal, sticky di bawah header */
  .navrow {
    order: -1; display: flex; flex-wrap: nowrap; gap: 7px;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    position: sticky; top: calc(var(--head-h, 62px) - 1px); z-index: 40;
    margin: 0 -14px 4px; padding: 8px 14px 10px;
    background: var(--panel);
    box-shadow: 0 8px 14px -12px rgba(15,20,50,.35);
  }
  .navrow::-webkit-scrollbar { display: none; }
  .navlink { flex: 0 0 auto; padding: 9px 14px; border-radius: 999px; font-size: 13px; }
  .navlink svg { width: 16px; height: 16px; }

  .sections { margin-top: 8px; }
  .sec { scroll-margin-top: calc(var(--head-h, 62px) + 52px); }
}

/* ---------- HP portrait: kontrol mengambang lebih kecil, beranda seimbang ---------- */
@media (max-width: 720px) and (orientation: portrait) {
  #stage { padding-bottom: 118px; }

  .circle-btn { width: 44px; height: 44px; border-width: 2.5px; }
  .circle-btn svg { width: 21px; height: 21px; }
  .circle-btn.sm { width: 38px; height: 38px; border-width: 2px; }
  .circle-btn.sm svg { width: 17px; height: 17px; }
  #corner-nav { gap: 8px; right: calc(var(--frame) + 8px); bottom: calc(var(--frame) + 8px + env(safe-area-inset-bottom)); }
  #seq-nav { left: calc(var(--frame) + 8px); bottom: calc(var(--frame) + 8px + env(safe-area-inset-bottom)); gap: 6px; padding: 4px 9px 4px 5px; }
  #seq-count { font-size: 11.5px; }

  .home { gap: 10px; }
  .badge { max-width: 350px; }
  .pill-row { flex-wrap: nowrap; gap: 10px; }
  .pill { flex: 1 1 0; min-width: 0; max-width: 200px; }
  .homepage-credit { margin: 16px auto 0; }
}

/* ---------- HP kecil: kartu menu jadi baris ramping ---------- */
@media (max-width: 460px) and (orientation: portrait) {
  .menu-grid { grid-template-columns: 1fr; gap: 10px; }
  .menu-card { min-height: 80px; padding: 10px 16px; border-radius: 14px; border-top-width: 3px; }
  .mc-logo { max-height: 60px; }
  .mc-go { top: 50%; right: 10px; transform: translateY(-50%); }
  .menu-card:hover .mc-go { transform: translateY(-50%); }
}