/* =====================================================
   GBAK — theme.css  (dimuat PALING AKHIR di semua halaman)
   Latar hidup, kartu kaca, navbar HP ringkas, tabel→kartu di HP
   ===================================================== */
:root{
  --grad-ink:linear-gradient(160deg,#2a261c,#0d0c0a);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --ease:cubic-bezier(.22,.9,.24,1);
  --sh-3:0 30px 60px -28px rgba(120,86,0,.5);
  --r-xl:34px;
  --acc:#d6a319; --acc2:#f4cf5a;
}
body[data-theme=osis]{--acc:#c98a0a;--acc2:#ffd56a}
body[data-theme=mpk]{--acc:#b8860b;--acc2:#f0d27a}
body[data-theme=etika]{--acc:#d9822b;--acc2:#ffc58a}

/* ---------- LATAR ---------- */
html{background:#f6e4a8}
body{
  background:
    linear-gradient(180deg,#fff7de 0%,#fdecb8 30%,#f9dd8c 65%,#f3d070 100%);
  background-color:#fbeab0;
}
body::before{
  background:
    radial-gradient(900px 560px at 4% -4%,rgba(255,255,255,.75),transparent 60%),
    radial-gradient(760px 560px at 104% 14%,rgba(214,163,25,.28),transparent 60%),
    radial-gradient(800px 560px at 40% 112%,rgba(184,120,0,.22),transparent 60%);
}
/* pola titik + garis halus */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.55;
  background-image:radial-gradient(rgba(150,100,0,.22) 1.2px,transparent 1.6px),
    repeating-linear-gradient(135deg,transparent 0 46px,rgba(255,255,255,.28) 46px 47px);
  background-size:26px 26px,auto;
  -webkit-mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.35));mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.35));
}
.bgfx{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.bgfx i{position:absolute;display:block;border-radius:50%;filter:blur(60px);opacity:.55;
  background:radial-gradient(circle at 35% 35%,var(--acc2),var(--acc) 70%);animation:blob 22s ease-in-out infinite}
.bgfx i:nth-child(1){width:46vmax;height:46vmax;left:-14vmax;top:-12vmax}
.bgfx i:nth-child(2){width:38vmax;height:38vmax;right:-12vmax;top:18vh;animation-delay:-7s;opacity:.4}
.bgfx i:nth-child(3){width:34vmax;height:34vmax;left:28vw;bottom:-16vmax;animation-delay:-13s;opacity:.38;filter:blur(70px)}
.bgfx b{position:absolute;display:block;border:2px solid rgba(180,125,0,.28);border-radius:22%;animation:spinF 38s linear infinite;
  translate:0 var(--py,0px)}
.bgfx b:nth-of-type(1){width:90px;height:90px;left:7%;top:62%}
.bgfx b:nth-of-type(2){width:56px;height:56px;right:9%;top:24%;border-radius:50%;animation-duration:50s;animation-direction:reverse}
.bgfx b:nth-of-type(3){width:130px;height:130px;right:14%;bottom:8%;border-style:dashed;animation-duration:70s}
.bgfx b:nth-of-type(4){width:40px;height:40px;left:46%;top:14%;background:rgba(255,255,255,.35);animation-duration:30s}
@keyframes blob{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(6vw,5vh) scale(1.12)}66%{transform:translate(-4vw,8vh) scale(.94)}}
@keyframes spinF{to{rotate:360deg}}
.glow{position:fixed;left:0;top:0;width:420px;height:420px;margin:-210px 0 0 -210px;z-index:-1;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle,rgba(255,244,200,.7),transparent 65%);opacity:0;transition:opacity .4s;will-change:transform}
.glow.on{opacity:.9}

/* ---------- KARTU KACA ---------- */
.info-card,.workflow-card,.document-card,.content-block,.content-intro,.komisi-box:not(.is-dark):not(.komisi-umum):not(.bph-umum),.rule-box,.doc-note,.table-wrapper,.flowchart-container,.acc,details.acc{
  background:linear-gradient(165deg,rgba(255,255,255,.86),rgba(255,248,226,.74));
  -webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);
  border:1px solid rgba(214,163,25,.32);
  box-shadow:0 2px 0 rgba(222,190,100,.7),0 18px 34px -20px rgba(120,86,0,.5),inset 0 1px 0 #fff;
}
.table-wrapper{background:rgba(255,255,255,.9)}
.content-block,.content-intro{position:relative;overflow:hidden}
.content-block::after{content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle,rgba(244,207,90,.35),transparent 70%);pointer-events:none}
.guide-heading h2{background:linear-gradient(180deg,var(--ink),#4a3a10);-webkit-background-clip:text;background-clip:text;color:transparent}
.guide-heading::after{content:"";display:block;width:64px;height:5px;margin:16px auto 0;border-radius:9px;
  background:linear-gradient(90deg,var(--acc2),var(--acc),var(--acc2));background-size:200% 100%;animation:shine 3s linear infinite}
@keyframes shine{to{background-position:200% 0}}
.hero{box-shadow:0 3px 0 #000,0 26px 50px -24px rgba(60,40,0,.7)}
.hero h1 span{background-image:linear-gradient(90deg,#ffe08a,#f4b81f,#ffe08a);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 5s linear infinite}
.hero::after{animation:spinF 60s linear infinite}
.eyebrow{backdrop-filter:blur(6px)}
footer{box-shadow:0 3px 0 #000,0 24px 44px -22px rgba(60,40,0,.7)}
.tab-button,.chip-btn{box-shadow:0 2px 0 rgba(200,160,50,.6)}
.tab-button.active{box-shadow:0 3px 0 #8c6000,0 10px 16px -8px rgba(140,92,0,.7)}

/* ---------- Reveal ---------- */
.rv{opacity:0;transform:translateY(24px)}
.rv.on{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s)}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}.bgfx i,.bgfx b,.hero::after{animation:none}}

/* ---------- Tombol naik + stat ---------- */
.totop{position:fixed;right:16px;bottom:18px;z-index:70;width:48px;height:48px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;color:#fff;font-size:20px;font-weight:800;opacity:0;pointer-events:none;translate:0 14px;
  background:conic-gradient(var(--acc) calc(var(--p,0)*1%),#2a261c 0);transition:opacity .3s,translate .4s var(--spring);
  box-shadow:0 10px 20px -8px rgba(0,0,0,.6)}
.totop::before{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--grad-ink)}
.totop span{position:relative}
.totop.on{opacity:1;pointer-events:auto;translate:0 0}
.totop:hover{translate:0 -3px}

/* ---------- Chip navigasi halaman (otomatis) ---------- */
.pagenav{width:var(--wrap);margin:18px auto 0;display:flex;gap:8px;overflow-x:auto;padding:6px 2px 10px;scrollbar-width:none}
.pagenav::-webkit-scrollbar{display:none}
.pagenav a{flex:none;padding:9px 16px;border-radius:999px;font-size:13px;font-weight:700;text-decoration:none;color:var(--ink-2);
  background:rgba(255,255,255,.8);border:1px solid rgba(214,163,25,.35);box-shadow:0 2px 0 rgba(200,160,50,.6);transition:.25s var(--ease)}
.pagenav a:hover,.pagenav a.on{background:var(--grad-ink);color:#fff;transform:translateY(-2px)}

/* ---------- Tabel → kartu di HP ---------- */
@media(max-width:720px){
  .table-wrapper{overflow:visible;background:transparent;border:0;box-shadow:none;backdrop-filter:none;max-height:none}
  .task-wrapper{max-height:none;overflow:visible}
  .workflow-table,.task-table{min-width:0;display:block}
  .workflow-table thead{display:none}
  .workflow-table tbody{display:grid;gap:14px}
  .workflow-table tr{display:block;border-radius:20px;overflow:hidden;
    background:linear-gradient(165deg,#fff,#fff6dc);border:1px solid rgba(214,163,25,.4);
    box-shadow:0 3px 0 rgba(200,160,50,.7),0 16px 26px -16px rgba(120,86,0,.55)}
  .workflow-table td{display:block;width:auto!important;padding:10px 16px;border-bottom:1px dashed rgba(214,163,25,.35)}
  .workflow-table td:last-child{border-bottom:0}
  .workflow-table td::before{content:attr(data-label);display:block;margin-bottom:3px;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep)}
  .workflow-table td:first-child{background:var(--grad-ink);color:var(--gold-hi,#f4cf5a);font-size:15px}
  .workflow-table td:first-child::before{color:rgba(255,255,255,.55)}
  .workflow-table td:not(:first-child){color:var(--ink-2)}
  .task-table td:nth-child(2){font-size:16px}
}

/* ---------- NAVBAR HP ---------- */
@media(max-width:680px){
  .navbar{position:sticky;top:8px;flex-direction:row;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;padding:8px 8px 8px 12px;border-radius:999px}
  .logo h2{font-size:0;gap:0}
  .logo h2::before{width:32px;height:32px}
  .logo h2::after{content:"GBAK";font-size:15px;margin-left:9px;letter-spacing:.04em}
  .nav-menu{flex-wrap:nowrap;gap:2px;justify-content:flex-end}
  .nav-menu a{padding:8px 11px;font-size:12.5px;white-space:nowrap}
  html{scroll-padding-top:78px}
  .bgfx b{display:none}
  .guide-section{padding-top:44px}
  .content-block{padding:20px 16px 20px 18px}
  .hero{margin-top:14px}
  .totop{width:44px;height:44px;right:12px;bottom:14px}
}
@media(max-width:360px){.nav-menu a:nth-child(2){display:none}}

/* kontras judul beranda (emas di atas latar emas) */
.hero-home h1 span,.hero-home h1 em{background:linear-gradient(90deg,#a86f00,#e2a50f,#a86f00);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent!important;animation:shine 5s linear infinite}
.navbar{background:rgba(255,251,238,.9)}
/* kartu tabel HP: lebih ringkas (nama → jabatan → poin tugas) */
@media(max-width:720px){
  .workflow-table td::before{display:none}
  .workflow-table td:nth-child(2){padding:7px 16px;border-bottom:0;font-size:12.5px;font-weight:800;color:var(--gold-deep);background:rgba(244,207,90,.22)}
  .workflow-table td:nth-child(n+3){padding-top:10px;border-bottom:0}
}

/* ===== LATAR PUTIH (permintaan: kembali ke putih) ===== */
html{background:#fff}
body{background:transparent}
body::before{background:
  radial-gradient(900px 520px at 6% -6%,rgba(244,207,90,.30),transparent 60%),
  radial-gradient(760px 520px at 104% 8%,rgba(214,163,25,.15),transparent 60%),
  radial-gradient(700px 500px at 50% 112%,rgba(244,207,90,.16),transparent 60%)}
body::after,.bgfx,.glow{display:none!important}