/* =========================================================
   Edu-Katik Giriloyo 1.27 — TEMPLATE TAMPILAN
   Situs publik : mori (bawaan) · keraton · galeri · kebun · pesisir
   Panel admin  : nila (bawaan) · cahaya · sogan · daun · grafit
   Template bawaan tidak diubah sama sekali; template lain menimpa token warna, huruf,
   dan bentuk. Setiap template punya mode terang & gelap.
   ========================================================= */

/* ---------- Bilah pratinjau & halaman pemilih ---------- */
.gaya-coba{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:9999;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;max-width:calc(100% - 32px);padding:10px 14px;border-radius:14px;background:#14182b;color:#fff;box-shadow:0 14px 40px rgba(0,0,0,.35);font:600 .88rem/1.3 system-ui,-apple-system,'Segoe UI',sans-serif}
.gaya-coba span{opacity:.75;font-weight:500}
.gaya-coba .btn{font-family:inherit!important;text-transform:none!important;letter-spacing:0!important;border-radius:8px!important;background:#e0a84e!important;color:#1b1206!important;border:0!important;padding:6px 12px!important;font-size:.82rem!important}
.gaya-coba .btn.ghost{background:transparent!important;color:#fff!important;border:1px solid rgba(255,255,255,.4)!important}
/* tombol di dalam kotak peringatan tetap terbaca di semua template & mode */
.alert a.btn{color:var(--on-teal);text-decoration:none}.alert a.btn.ghost{color:var(--ink)}
@media print{.gaya-coba{display:none!important}}
@media (max-width:640px){.gaya-coba{bottom:8px;padding:8px 10px;gap:6px;font-size:.76rem}.gaya-coba span{display:none}.alert.hub-sp,.alert.ttg-ingat{flex-wrap:wrap}.alert.hub-sp .btn,.alert.ttg-ingat .btn{white-space:normal}}

.gy-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.gy-k{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card2);min-width:0}
.gy-k.on{border-color:var(--teal);box-shadow:0 0 0 2px color-mix(in srgb,var(--teal) 35%,transparent)}
.gy-t{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.gy-t h3{margin:0;font-size:1rem;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.gy-t p{margin:0;color:var(--mut);font-size:.84rem;line-height:1.45;flex:1}
.gy-sw{display:flex;gap:4px;align-items:center}
.gy-sw i{width:18px;height:18px;border-radius:50%;border:1px solid rgba(127,127,127,.35)}
.gy-sw small{margin-left:6px;color:var(--mut)}
.gy-a{display:flex;gap:8px;flex-wrap:wrap}
/* gambar mini */
.gy-m{position:relative;aspect-ratio:16/10;background:var(--b);border-bottom:1px solid var(--line);overflow:hidden}
.gy-m :where(i,u,s,b){display:block;font-style:normal;text-decoration:none}
.gy-publik{padding:10px 12px}
.gy-nav{display:flex;gap:6px;align-items:center;margin-bottom:12px}
.gy-nav u{width:22px;height:9px;border-radius:3px;background:var(--a)}
.gy-nav s{width:16px;height:4px;border-radius:2px;background:var(--i);opacity:.45}
.gy-nav b{margin-left:auto;width:26px;height:10px;border-radius:5px;background:var(--a)}
.gy-h1{height:10px;width:62%;border-radius:2px;background:var(--i);margin-bottom:5px}
.gy-h1.p{width:44%}
.gy-p{height:4px;width:70%;border-radius:2px;background:var(--i);opacity:.35;margin:8px 0 10px}
.gy-btn{display:flex;gap:6px}
.gy-btn b{width:40px;height:11px;border-radius:4px;background:var(--a)}
.gy-btn s{width:40px;height:11px;border-radius:4px;border:1.5px solid var(--a2)}
.gy-gl{position:absolute;left:12px;right:12px;bottom:10px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.gy-gl s{height:26px;border-radius:5px;background:var(--c);border-top:3px solid var(--a2);box-shadow:0 2px 6px rgba(0,0,0,.08)}
.gy-panel{display:flex}
.gy-sb{width:26%;background:var(--s);padding:12px 6px;display:flex;flex-direction:column;gap:5px;border-right:1px solid rgba(127,127,127,.2)}
.gy-sb u{height:5px;border-radius:3px;background:var(--i);opacity:.35}
.gy-sb u.on{background:var(--a);opacity:1}
.gy-isi{flex:1;padding:8px;display:flex;flex-direction:column;gap:6px}
.gy-top{height:9px;border-radius:3px;background:var(--c)}
.gy-hero{height:24px;border-radius:6px;background:linear-gradient(110deg,var(--s),var(--a))}
.gy-st{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.gy-st s{height:20px;border-radius:5px;background:var(--c);border-left:3px solid var(--a2)}
.gy-kt{flex:1;border-radius:6px;background:var(--c)}

/* =========================================================
   SITUS PUBLIK
   ========================================================= */

/* ---------- 1. SOGAN KERATON — klasik, krem perkamen, garis ganda ---------- */
html[data-gaya=keraton] body.pub{
  --bg:#F3EBDD;--bg2:#EADFCB;--card:#FBF6EC;--card2:#F4ECDD;--line:#E0D0B6;--line2:#CDB693;
  --ink:#2B1A10;--ink2:#56402E;--mut:#7E6A57;--track:#E6D8C1;
  --teal:#7A3E12;--teal2:#5E2E0B;--on-teal:#FFF8EC;--nila:#7A3E12;--nila2:#94501C;--soga:#9C5A1C;--jalawe:#B8892B;--daun:#5D6B33;
  --sh:0 1px 0 rgba(43,26,16,.06),0 14px 30px -22px rgba(43,26,16,.5);
  --font:'Mulish',system-ui,-apple-system,'Segoe UI',sans-serif;--serif:'Cormorant Garamond','Alegreya',Georgia,serif;
  --kain-garis:#7A3E12;--kain-isi:#FBF6EC;--r:6px;--r2:4px;
}
html[data-gaya=keraton][data-theme=dark] body.pub{
  --bg:#18110C;--bg2:#120C08;--card:#221811;--card2:#2A1E15;--line:#3D2C1F;--line2:#55402D;
  --ink:#F3E8D6;--ink2:#D9C8AE;--mut:#A99379;--track:#33251A;
  --teal:#E0A85E;--teal2:#F0C487;--on-teal:#1B1008;--nila:#E0A85E;--soga:#D69A5B;--jalawe:#E2BE6A;--daun:#A8B77A;
  --kain-garis:#E0A85E;--kain-isi:#221811;--sh:0 16px 34px -22px rgba(0,0,0,.7);
}
html[data-gaya=keraton] body.pub h1,html[data-gaya=keraton] body.pub h2,html[data-gaya=keraton] body.pub h3,html[data-gaya=keraton] body.pub .p-title{font-weight:700;letter-spacing:.005em}
html[data-gaya=keraton] body.pub .gk-hero h1{font-size:clamp(2.6rem,6vw,4.6rem);line-height:.98}
html[data-gaya=keraton] body.pub .pub-nav{border-bottom:3px double var(--line2);padding-bottom:12px;margin-bottom:6px}
html[data-gaya=keraton] body.pub .pub-nav .links a:not(.btn){text-transform:uppercase;letter-spacing:.04em;font-size:.72rem;font-weight:700;padding:8px 6px}
html[data-gaya=keraton] body.pub .pub-nav .links a.on{border-bottom-color:var(--jalawe)}
html[data-gaya=keraton] body.pub .btn{border-radius:3px;text-transform:uppercase;letter-spacing:.06em;font-size:.8rem}
html[data-gaya=keraton] body.pub .pub-act .btn{letter-spacing:.02em}
html[data-gaya=keraton] body.pub .ibtn{border-radius:4px}
html[data-gaya=keraton] body.pub .card{border-radius:6px;box-shadow:inset 0 0 0 4px var(--card),inset 0 0 0 5px var(--line)}
html[data-gaya=keraton] body.pub .kicker,html[data-gaya=keraton] body.pub .kicker-p,html[data-gaya=keraton] body.pub .gk-letak{text-transform:uppercase;letter-spacing:.16em;font-size:.74rem;color:var(--jalawe)}
html[data-gaya=keraton] body.pub .gk-panel{border-radius:4px;box-shadow:0 0 0 6px var(--card),0 0 0 7px var(--line2)}
html[data-gaya=keraton] body.pub .gk-panel .gk-celup{background:linear-gradient(180deg,transparent 0%,color-mix(in srgb,var(--teal) 18%,transparent) 18%,var(--teal) 100%)}
html[data-gaya=keraton] body.pub .gk-sec h2,html[data-gaya=keraton] body.pub .p-sec h2{text-align:center}
html[data-gaya=keraton] body.pub .gk-sec>header{text-align:center;justify-content:center;flex-direction:column;align-items:center}
html[data-gaya=keraton] body.pub .gk-sec>header::after{content:"❖";display:block;color:var(--jalawe);font-size:.9rem;margin-top:6px}
html[data-gaya=keraton] body.pub .pub-foot{border-top:3px double var(--line2)}
html[data-gaya=keraton] body.pub .pub-foot::before{display:none}
html[data-gaya=keraton] body.pub .pf-h{text-transform:uppercase;letter-spacing:.14em;font-size:.78rem}

/* ---------- 2. GALERI KONTEMPORER — putih, garis hitam tegas, siku ---------- */
html[data-gaya=galeri] body.pub{
  --bg:#FFFFFF;--bg2:#F3F3F0;--card:#FFFFFF;--card2:#F6F6F3;--line:#1A1A1A;--line2:#1A1A1A;
  --ink:#111111;--ink2:#2E2E2E;--mut:#616161;--track:#E6E6E2;
  --teal:#2F3BE0;--teal2:#1F28B0;--on-teal:#FFFFFF;--nila:#2F3BE0;--nila2:#2F3BE0;--soga:#E4572E;--jalawe:#E4572E;--daun:#1B7F4C;
  --sh:none;--font:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;--serif:'Bricolage Grotesque','Archivo',system-ui,sans-serif;
  --kain-garis:#111111;--kain-isi:#FFFFFF;--r:0px;--r2:0px;font-size:16px;
}
html[data-gaya=galeri][data-theme=dark] body.pub{
  --bg:#0E0E0E;--bg2:#161616;--card:#141414;--card2:#1B1B1B;--line:#EDEDE8;--line2:#EDEDE8;
  --ink:#F4F4F1;--ink2:#D6D6D1;--mut:#A3A39E;--track:#262626;
  --teal:#9AA1FF;--teal2:#C0C4FF;--on-teal:#0E0E0E;--nila:#9AA1FF;--soga:#FF8A65;--jalawe:#FF8A65;--daun:#6FD39C;--kain-garis:#F4F4F1;--kain-isi:#141414;
}
html[data-gaya=galeri] body.pub h1,html[data-gaya=galeri] body.pub h2,html[data-gaya=galeri] body.pub h3,html[data-gaya=galeri] body.pub .p-title{font-weight:800;letter-spacing:-.035em}
html[data-gaya=galeri] body.pub .gk-hero h1{font-size:clamp(2.5rem,5.4vw,4.3rem);line-height:.95;max-width:14ch;hyphens:manual}
html[data-gaya=galeri] body.pub .pub-nav{border-bottom:2px solid var(--ink);padding-bottom:12px}
html[data-gaya=galeri] body.pub .pub-nav .links a:not(.btn){text-transform:uppercase;letter-spacing:.03em;font-size:.72rem;font-weight:700;color:var(--ink);padding:8px 6px}
html[data-gaya=galeri] body.pub .pub-nav .links a.on{border-bottom:2px solid var(--soga)!important}
html[data-gaya=galeri] body.pub .btn,html[data-gaya=galeri] body.pub .ibtn,html[data-gaya=galeri] body.pub .pill,html[data-gaya=galeri] body.pub input,html[data-gaya=galeri] body.pub select,html[data-gaya=galeri] body.pub textarea{border-radius:0}
html[data-gaya=galeri] body.pub .btn{background:var(--ink);color:var(--bg);border:2px solid var(--ink)}
html[data-gaya=galeri] body.pub .btn:hover{background:var(--teal);border-color:var(--teal);color:var(--on-teal);filter:none}
html[data-gaya=galeri] body.pub .btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--ink)}
html[data-gaya=galeri] body.pub .card{border:1.5px solid var(--line);border-radius:0;box-shadow:none}
html[data-gaya=galeri] body.pub .card:hover{box-shadow:6px 6px 0 var(--ink)}
html[data-gaya=galeri] body.pub .gk-dengar{border-radius:0;border:2px solid var(--ink)}
html[data-gaya=galeri] body.pub .gk-dengar .gk-play{border-radius:0}
html[data-gaya=galeri] body.pub .kicker,html[data-gaya=galeri] body.pub .kicker-p,html[data-gaya=galeri] body.pub .gk-letak{text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;color:var(--soga)}
html[data-gaya=galeri] body.pub .gk-panel{border-radius:0;border:2px solid var(--ink);box-shadow:10px 10px 0 var(--soga)}
html[data-gaya=galeri] body.pub .gk-panel .gk-celup{background:linear-gradient(180deg,transparent 40%,var(--teal) 100%);mix-blend-mode:normal;opacity:.92}
html[data-gaya=galeri] body.pub .gk-sec h2,html[data-gaya=galeri] body.pub .p-sec h2{font-size:clamp(1.8rem,3.6vw,2.8rem)}
html[data-gaya=galeri] body.pub .gk-sec>header{border-top:2px solid var(--ink);padding-top:14px}
html[data-gaya=galeri] body.pub .pub-foot{background:var(--ink);color:var(--bg);border-top:0}
html[data-gaya=galeri] body.pub .pub-foot::before{display:none}
html[data-gaya=galeri] body.pub .pub-foot b,html[data-gaya=galeri] body.pub .pub-foot .pf-h{color:var(--bg)!important}
html[data-gaya=galeri] body.pub .pub-foot a,html[data-gaya=galeri] body.pub .pub-foot .pf-m{color:color-mix(in srgb,var(--bg) 82%,var(--ink))}
html[data-gaya=galeri] body.pub .pub-foot .mut,html[data-gaya=galeri] body.pub .pub-foot p,html[data-gaya=galeri] body.pub .pub-foot small,html[data-gaya=galeri] body.pub .pf-c{color:color-mix(in srgb,var(--bg) 62%,var(--ink))}

/* ---------- 3. KEBUN WARNA ALAM — hijau daun, membulat, lembut ---------- */
html[data-gaya=kebun] body.pub{
  --bg:#EEF2E6;--bg2:#E2E9D5;--card:#FAFCF5;--card2:#F1F5E9;--line:#D3DDC4;--line2:#B9C8A5;
  --ink:#1E2B1F;--ink2:#3C4E3D;--mut:#647462;--track:#DCE5CF;
  --teal:#2F6B3E;--teal2:#23532F;--on-teal:#FFFFFF;--nila:#2F6B3E;--nila2:#3E8350;--soga:#8A6A1F;--jalawe:#A67F14;--daun:#2F6B3E;
  --sh:0 2px 0 rgba(30,43,31,.04),0 20px 40px -26px rgba(30,60,35,.45);
  --font:'Nunito Sans',system-ui,-apple-system,'Segoe UI',sans-serif;--serif:'Fraunces','Alegreya',Georgia,serif;
  --kain-garis:#2F6B3E;--kain-isi:#FAFCF5;--r:22px;--r2:16px;
}
html[data-gaya=kebun][data-theme=dark] body.pub{
  --bg:#0F1A12;--bg2:#0A130D;--card:#16241A;--card2:#1B2C20;--line:#26392B;--line2:#355039;
  --ink:#E6EEDF;--ink2:#C7D4C0;--mut:#93A58F;--track:#21332A;
  --teal:#8FCB97;--teal2:#B4E0B9;--on-teal:#0E1A11;--nila:#8FCB97;--soga:#D6B25A;--jalawe:#E2C366;--daun:#8FCB97;
  --kain-garis:#8FCB97;--kain-isi:#16241A;--sh:0 18px 36px -24px rgba(0,0,0,.7);
}
html[data-gaya=kebun] body.pub h1,html[data-gaya=kebun] body.pub h2,html[data-gaya=kebun] body.pub h3,html[data-gaya=kebun] body.pub .p-title{font-weight:700;letter-spacing:-.01em}
html[data-gaya=kebun] body.pub .btn{border-radius:999px;padding-left:22px;padding-right:22px}
html[data-gaya=kebun] body.pub .ibtn{border-radius:999px}
html[data-gaya=kebun] body.pub .card{border-radius:22px;border-color:transparent;box-shadow:var(--sh)}
html[data-gaya=kebun] body.pub .pub-nav .links a:not(.btn){border-bottom:0;border-radius:999px;padding:7px 12px}
html[data-gaya=kebun] body.pub .pub-nav .links a.on{background:color-mix(in srgb,var(--teal) 14%,transparent)!important;color:var(--teal)!important}
html[data-gaya=kebun] body.pub .kicker,html[data-gaya=kebun] body.pub .kicker-p{display:inline-block;background:color-mix(in srgb,var(--teal) 12%,transparent);color:var(--teal);padding:4px 12px;border-radius:999px}
html[data-gaya=kebun] body.pub .gk-letak{color:var(--jalawe)}
html[data-gaya=kebun] body.pub .gk-panel{border-radius:46% 46% 28px 28px / 32% 32% 28px 28px;border:0;box-shadow:var(--sh)}
html[data-gaya=kebun] body.pub .gk-panel .gk-celup{background:linear-gradient(180deg,transparent 0%,color-mix(in srgb,var(--teal) 18%,transparent) 22%,var(--teal) 100%)}
html[data-gaya=kebun] body.pub .gk-canting{background-image:radial-gradient(ellipse 3px 1.6px,var(--teal) 98%,transparent);background-size:16px 10px;opacity:.5}
html[data-gaya=kebun] body.pub .pub-foot{border-radius:36px 36px 0 0;margin-top:56px}
html[data-gaya=kebun] body.pub .pub-foot::before{display:none}

/* ---------- 4. PESISIR CERAH — biru laut, koral, kunyit ---------- */
html[data-gaya=pesisir] body.pub{
  --bg:#FFF7EE;--bg2:#FCEBD9;--card:#FFFFFF;--card2:#FFF3E6;--line:#F1DCC4;--line2:#E6C49E;
  --ink:#1F1B2E;--ink2:#3E3852;--mut:#6E6779;--track:#F6E2CC;
  --teal:#0E7C86;--teal2:#0A5F67;--on-teal:#FFFFFF;--nila:#0E7C86;--nila2:#139AA6;--soga:#D24A33;--jalawe:#E0951F;--daun:#2E8B57;
  --sh:0 2px 0 rgba(224,83,61,.06),0 18px 36px -24px rgba(14,124,134,.45);
  --font:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;--serif:'DM Serif Display','Alegreya',Georgia,serif;
  --kain-garis:#0E7C86;--kain-isi:#FFFFFF;--r:18px;--r2:12px;
}
html[data-gaya=pesisir][data-theme=dark] body.pub{
  --bg:#111827;--bg2:#0B1220;--card:#192235;--card2:#1F2A40;--line:#2A3650;--line2:#3A4A6A;
  --ink:#F5EFE6;--ink2:#D9D2C6;--mut:#A39CB0;--track:#26324A;
  --teal:#4FC3C9;--teal2:#86DCE0;--on-teal:#0B1220;--nila:#4FC3C9;--soga:#FF7A63;--jalawe:#FFC15A;--daun:#6FD39C;
  --kain-garis:#4FC3C9;--kain-isi:#192235;--sh:0 18px 36px -24px rgba(0,0,0,.7);
}
html[data-gaya=pesisir] body.pub h1,html[data-gaya=pesisir] body.pub h2,html[data-gaya=pesisir] body.pub h3,html[data-gaya=pesisir] body.pub .p-title{font-weight:400;letter-spacing:0}
html[data-gaya=pesisir] body.pub .gk-hero h1{font-size:clamp(2.6rem,6vw,4.6rem);line-height:1}
html[data-gaya=pesisir] body.pub .btn{border-radius:999px}
html[data-gaya=pesisir] body.pub .btn.ghost{border-color:var(--soga);color:var(--soga)}
html[data-gaya=pesisir] body.pub .ibtn{border-radius:999px}
html[data-gaya=pesisir] body.pub .card{border-radius:18px;border:1px solid var(--line);border-top:5px solid var(--teal)}
html[data-gaya=pesisir] body.pub .grid>.card:nth-child(3n+2),html[data-gaya=pesisir] body.pub .gk-g>.card:nth-child(3n+2){border-top-color:var(--soga)}
html[data-gaya=pesisir] body.pub .grid>.card:nth-child(3n),html[data-gaya=pesisir] body.pub .gk-g>.card:nth-child(3n){border-top-color:var(--jalawe)}
html[data-gaya=pesisir] body.pub .pub-nav .links a.on{border-bottom:3px solid var(--soga)!important}
html[data-gaya=pesisir] body.pub .kicker,html[data-gaya=pesisir] body.pub .kicker-p,html[data-gaya=pesisir] body.pub .gk-letak{color:var(--soga)}
html[data-gaya=pesisir] body.pub .gk-panel{border-radius:999px 999px 24px 24px;border:6px solid var(--jalawe);box-shadow:14px 14px 0 color-mix(in srgb,var(--soga) 80%,transparent)}
html[data-gaya=pesisir] body.pub .gk-panel .gk-celup{background:linear-gradient(180deg,transparent 0%,color-mix(in srgb,var(--teal) 20%,transparent) 20%,var(--teal) 100%)}
html[data-gaya=pesisir] body.pub .gk-canting{background-image:linear-gradient(90deg,var(--teal) 0 33%,var(--soga) 33% 66%,var(--jalawe) 66%);background-size:100% 4px;background-repeat:no-repeat;background-position:center;height:6px;opacity:.85}
html[data-gaya=pesisir] body.pub .pub-foot{border-top:6px solid var(--teal);box-shadow:0 -6px 0 var(--soga),0 -12px 0 var(--jalawe)}
html[data-gaya=pesisir] body.pub .pub-foot::before{display:none}

/* =========================================================
   PANEL ADMINISTRATOR
   ========================================================= */

/* ---------- 1. CAHAYA — terang & bersih ---------- */
html[data-gaya=cahaya] body.portal{
  --bg:#0F1117;--bg2:#0B0D12;--card:#171A23;--card2:#1D2130;--line:#272C3B;--line2:#343B4F;
  --ink:#EEF0F7;--ink2:#C9CDDA;--mut:#8E94A8;--track:#252A39;
  --teal:#8B93FF;--teal2:#A9AFFF;--on-teal:#0F1117;--lime:#8B93FF;--indigo:#8B93FF;
  --sb1:#12141B;--sb2:#12141B;--sb-ink:#E7E9F2;--sb-mut:#8A90A6;
  --r:14px;--r2:10px;--sh:0 10px 28px rgba(0,0,0,.35);
  --font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}
html[data-gaya=cahaya][data-theme=light] body.portal{
  --bg:#F5F6FA;--bg2:#ECEEF4;--card:#FFFFFF;--card2:#F8F9FC;--line:#E4E7EF;--line2:#D4D8E4;
  --ink:#1E2336;--ink2:#40465C;--mut:#6B7186;--track:#E9ECF3;
  --teal:#4F46E5;--teal2:#4338CA;--on-teal:#FFFFFF;--lime:#4F46E5;
  --sb1:#FFFFFF;--sb2:#FFFFFF;--sb-ink:#2A3046;--sb-mut:#7A8096;--sh:0 6px 20px rgba(30,35,54,.06);
}
html[data-gaya=cahaya] body.portal .sb{box-shadow:none;border-right:1px solid var(--line)}
html[data-gaya=cahaya] body.portal .sb-name{color:var(--sb-ink)}
html[data-gaya=cahaya] body.portal .sb-role{background:color-mix(in srgb,var(--teal) 14%,transparent);border-color:color-mix(in srgb,var(--teal) 30%,transparent);color:var(--teal)}
html[data-gaya=cahaya] body.portal .sb-a:hover,html[data-gaya=cahaya] body.portal .sb-k:hover{background:color-mix(in srgb,var(--teal) 8%,transparent)}
html[data-gaya=cahaya] body.portal .sb-a.on{background:color-mix(in srgb,var(--teal) 13%,transparent);color:var(--teal);box-shadow:none}
html[data-gaya=cahaya] body.portal .sb-k.on{background:color-mix(in srgb,var(--teal) 12%,transparent);color:var(--teal);box-shadow:none}
html[data-gaya=cahaya] body.portal .sb-grp.open>.sb-t{background:color-mix(in srgb,var(--ink) 4%,transparent)}
html[data-gaya=cahaya] body.portal .sb-kids{border-left-color:var(--line)}
html[data-gaya=cahaya] body.portal .sb-out{border-top-color:var(--line)}
html[data-gaya=cahaya] body.portal .sb-nav{scrollbar-color:var(--line2) transparent}
html[data-gaya=cahaya] body.portal .hero-b,html[data-gaya=cahaya] body.portal .welcome{background:linear-gradient(115deg,#3730A3 0%,#4F46E5 55%,#0EA5E9 100%)}
html[data-gaya=cahaya] body.portal .kj-dash-strip a{background:linear-gradient(135deg,#4F46E5,#6366F1)}
html[data-gaya=cahaya] body.portal .kj-dash-strip a:nth-child(2){background:linear-gradient(135deg,#0284C7,#0EA5E9)}
html[data-gaya=cahaya] body.portal .kj-dash-strip a:nth-child(3){background:linear-gradient(135deg,#0F766E,#14B8A6)}
html[data-gaya=cahaya] body.portal .stat,html[data-gaya=cahaya] body.portal .card{box-shadow:var(--sh)}

/* ---------- 2. SOGAN — cokelat sogan & keemasan ---------- */
html[data-gaya=sogan] body.portal{
  --bg:#17110C;--bg2:#120D09;--card:#211811;--card2:#291E15;--line:#3A2B1E;--line2:#4E3A28;
  --ink:#F4EADB;--ink2:#D8C7AE;--mut:#A8927A;--track:#33261B;
  --teal:#E0A85E;--teal2:#F0C487;--on-teal:#1B1008;--lime:#E9C27A;--indigo:#D9A35A;
  --sb1:#3B2314;--sb2:#24150C;--sb-ink:#F6EBDD;--sb-mut:#CDB59A;
  --font:'Source Sans 3',system-ui,-apple-system,'Segoe UI',sans-serif;--r:12px;--r2:8px;
}
html[data-gaya=sogan][data-theme=light] body.portal{
  --bg:#F6F0E6;--bg2:#EEE5D6;--card:#FFFDF8;--card2:#FAF4EA;--line:#E7DAC6;--line2:#D6C3A6;
  --ink:#2A1A10;--ink2:#4E3A2A;--mut:#7D6A58;--track:#EDE2D0;
  --teal:#9A5B22;--teal2:#7C4718;--on-teal:#FFFFFF;--sh:0 8px 22px rgba(58,34,16,.08);
}
html[data-gaya=sogan] body.portal h1,html[data-gaya=sogan] body.portal h2,html[data-gaya=sogan] body.portal h3,html[data-gaya=sogan] body.portal .top-t{font-family:'Lora',Georgia,serif;font-weight:700;letter-spacing:0}
html[data-gaya=sogan] body.portal .sb-role{background:rgba(233,194,122,.18);border-color:rgba(233,194,122,.4);color:#FBEBD0}
html[data-gaya=sogan] body.portal .sb-a.on{background:rgba(255,236,206,.12)}
html[data-gaya=sogan] body.portal .hero-b,html[data-gaya=sogan] body.portal .welcome{background:linear-gradient(115deg,#3B2314 0%,#7A4518 52%,#C08A3E 100%)}
html[data-gaya=sogan] body.portal .kj-dash-strip a{background:linear-gradient(135deg,#5B3416,#8A5226)}
html[data-gaya=sogan] body.portal .kj-dash-strip a:nth-child(2){background:linear-gradient(135deg,#7A5A1A,#B8892B)}
html[data-gaya=sogan] body.portal .kj-dash-strip a:nth-child(3){background:linear-gradient(135deg,#4F5A2A,#76843F)}
html[data-gaya=sogan] body.portal .card,html[data-gaya=sogan] body.portal .stat{border-top:3px solid color-mix(in srgb,var(--teal) 55%,var(--line))}

/* ---------- 3. DAUN — hijau kebun, membulat ---------- */
html[data-gaya=daun] body.portal{
  --bg:#0B1510;--bg2:#08100C;--card:#122019;--card2:#172820;--line:#22352B;--line2:#2E4638;
  --ink:#E6F1E8;--ink2:#C3D5C7;--mut:#8EA595;--track:#1D2F25;
  --teal:#5FD08F;--teal2:#8FE0B0;--on-teal:#08140D;--lime:#9BE3B5;--indigo:#5FD08F;
  --sb1:#12392A;--sb2:#0A2219;--sb-ink:#E8F6EC;--sb-mut:#A6CBB3;
  --font:'Nunito Sans',system-ui,-apple-system,'Segoe UI',sans-serif;--r:20px;--r2:14px;
}
html[data-gaya=daun][data-theme=light] body.portal{
  --bg:#F1F5EF;--bg2:#E6EDE2;--card:#FFFFFF;--card2:#F6FAF4;--line:#DCE6D7;--line2:#C8D7C1;
  --ink:#16261C;--ink2:#36493C;--mut:#64786A;--track:#E3EBDF;
  --teal:#2E8B57;--teal2:#246F45;--on-teal:#FFFFFF;--sh:0 10px 26px rgba(22,60,38,.08);
}
html[data-gaya=daun] body.portal .btn,html[data-gaya=daun] body.portal .ibtn{border-radius:999px}
html[data-gaya=daun] body.portal .sb-a,html[data-gaya=daun] body.portal .sb-k{border-radius:999px}
html[data-gaya=daun] body.portal .sb-a.on{background:rgba(155,227,181,.18);box-shadow:none}
html[data-gaya=daun] body.portal .sb-k.on{background:rgba(155,227,181,.16);box-shadow:none}
html[data-gaya=daun] body.portal .sb-role{background:rgba(155,227,181,.18);border-color:rgba(155,227,181,.4)}
html[data-gaya=daun] body.portal .hero-b,html[data-gaya=daun] body.portal .welcome{background:linear-gradient(115deg,#12392A 0%,#2E8B57 60%,#C2A14A 100%);border-radius:28px}
html[data-gaya=daun] body.portal .kj-dash-strip a{background:linear-gradient(135deg,#12392A,#2E8B57);border-radius:22px}
html[data-gaya=daun] body.portal .kj-dash-strip a:nth-child(2){background:linear-gradient(135deg,#6B5A1A,#A88B2E)}
html[data-gaya=daun] body.portal .kj-dash-strip a:nth-child(3){background:linear-gradient(135deg,#1E5B5B,#2F8E8A)}
html[data-gaya=daun] body.portal .card,html[data-gaya=daun] body.portal .stat{border-color:transparent;box-shadow:var(--sh)}
html[data-gaya=daun] body.portal .stat-i{border-radius:50%}

/* ---------- 4. GRAFIT RINGKAS — padat, tegas, banyak data ---------- */
html[data-gaya=grafit] body.portal{
  --bg:#0A0A0B;--bg2:#070708;--card:#141416;--card2:#1A1A1D;--line:#26262A;--line2:#333338;
  --ink:#ECECEF;--ink2:#C7C7CD;--mut:#8C8C95;--track:#222226;
  --teal:#F5A524;--teal2:#FFC25C;--on-teal:#141006;--lime:#F5A524;--indigo:#38BDF8;
  --sb1:#111214;--sb2:#111214;--sb-ink:#E7E7EA;--sb-mut:#8A8A93;
  --font:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;--r:6px;--r2:4px;--sh:none;
  font-size:14px;
}
html[data-gaya=grafit][data-theme=light] body.portal{
  --bg:#F4F4F5;--bg2:#EAEAEC;--card:#FFFFFF;--card2:#F8F8F9;--line:#E2E2E5;--line2:#CFCFD4;
  --ink:#18181B;--ink2:#3F3F46;--mut:#6B6B74;--track:#E7E7EA;
  --teal:#B45309;--teal2:#92400E;--on-teal:#FFFFFF;--indigo:#0369A1;
}
html[data-gaya=grafit] body.portal .sb{box-shadow:none;border-right:1px solid #222226}
html[data-gaya=grafit] body.portal .sb-a{padding:7px 10px;border-radius:4px;font-size:.88rem}
html[data-gaya=grafit] body.portal .sb-k{padding:5px 9px;border-radius:4px;font-size:.82rem}
html[data-gaya=grafit] body.portal .sb-a.on,html[data-gaya=grafit] body.portal .sb-k.on{background:rgba(245,165,36,.12);color:#FFD08A;box-shadow:inset 3px 0 0 #F5A524}
html[data-gaya=grafit] body.portal .sb-role{background:rgba(245,165,36,.14);border-color:rgba(245,165,36,.35);color:#FFD08A;border-radius:4px}
html[data-gaya=grafit] body.portal .sb-sec{letter-spacing:.18em;font-size:.6rem}
html[data-gaya=grafit] body.portal .card{padding:14px 16px;border-radius:6px}
html[data-gaya=grafit] body.portal .stat{padding:12px 14px;border-radius:6px}
html[data-gaya=grafit] body.portal .stat-v{font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:600;font-size:1.6rem;letter-spacing:-.02em}
html[data-gaya=grafit] body.portal .stat-i{width:40px;height:40px;border-radius:4px}
html[data-gaya=grafit] body.portal .btn{border-radius:4px;padding:8px 14px}
html[data-gaya=grafit] body.portal .ibtn{border-radius:4px;width:36px;height:36px}
html[data-gaya=grafit] body.portal .pill{border-radius:3px}
html[data-gaya=grafit] body.portal .tbl td{padding:8px 10px}
html[data-gaya=grafit] body.portal .tbl th{padding:8px 10px}
html[data-gaya=grafit] body.portal .top{padding:8px 18px}
html[data-gaya=grafit] body.portal .hero-b,html[data-gaya=grafit] body.portal .welcome{background:#141416;border:1px solid #2A2A2F;border-left:4px solid #F5A524;border-radius:6px;box-shadow:none;color:#ECECEF}
html[data-gaya=grafit][data-theme=light] body.portal .hero-b,html[data-gaya=grafit][data-theme=light] body.portal .welcome{background:#18181B;border-color:#18181B;border-left-color:#F5A524}
html[data-gaya=grafit] body.portal .hero-b::after{display:none}
html[data-gaya=grafit] body.portal .kj-dash-strip a{background:#1A1A1D;border:1px solid #2A2A2F;border-radius:6px}
html[data-gaya=grafit] body.portal .kj-dash-strip a:nth-child(2),html[data-gaya=grafit] body.portal .kj-dash-strip a:nth-child(3){background:#1A1A1D}
html[data-gaya=grafit] body.portal .kj-dash-strip a:hover{border-color:#F5A524}

/* tombol "Portal Publik" di bilah atas panel */
html[data-gaya=cahaya] body.portal .abs-btn{background:var(--teal);border-color:var(--teal);color:var(--on-teal);box-shadow:none}
html[data-gaya=sogan] body.portal .abs-btn{background:linear-gradient(135deg,#3B2314,#7A4518);box-shadow:0 0 0 4px rgba(224,168,94,.12)}
html[data-gaya=daun] body.portal .abs-btn{background:linear-gradient(135deg,#12392A,#2E8B57);box-shadow:0 0 0 4px rgba(95,208,143,.12)}
html[data-gaya=grafit] body.portal .abs-btn{background:#1A1A1D;border:1px solid #F5A524;border-radius:4px;box-shadow:none}
html[data-gaya=grafit][data-theme=light] body.portal .abs-btn{background:#18181B}

/* =========================================================
   1.28 — Transisi geser saat digulir (plus-gulir.js)
   ========================================================= */
.gl-siap .gl{transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1),filter .8s cubic-bezier(.2,.7,.2,1)!important;will-change:opacity,transform}
.gl-siap .gl:not(.gl-in){opacity:0}
.gl-siap .gl-naik:not(.gl-in){transform:translate3d(0,36px,0)}
.gl-siap .gl-kiri:not(.gl-in){transform:translate3d(-40px,0,0)}
.gl-siap .gl-kanan:not(.gl-in){transform:translate3d(40px,0,0)}
.gl-siap .gl-skala:not(.gl-in){transform:scale(.96) translate3d(0,18px,0);filter:blur(6px)}
@media (prefers-reduced-motion:reduce){.gl-siap .gl{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}}
@media print{.gl{opacity:1!important;transform:none!important;filter:none!important}}

/* 1.32: spanduk peringatan panel rapi di layar kecil (tombol tidak lagi menyempit menjadi teks tegak) */
@media (max-width:640px){
  .alert.hub-sp,.alert.ttg-ingat{display:grid!important;grid-template-columns:auto minmax(0,1fr);gap:8px 10px;align-items:start}
  .alert.hub-sp>.hub-sp-a,.alert.ttg-ingat>.btn,.alert.ttg-ingat>a{grid-column:1/-1;justify-self:stretch}
  .alert.hub-sp .hub-sp-a{display:flex;flex-wrap:wrap;gap:8px}
  .alert.hub-sp .hub-sp-a .btn,.alert.hub-sp .hub-sp-a button,.alert.ttg-ingat .btn{white-space:nowrap;writing-mode:horizontal-tb;flex:1 1 auto;justify-content:center}
}

/* =========================================================
   1.51 — PAPAN BUKTI: seluruh panel bergaya Papan Bukti Program Kerja
   (pita gradasi biru gelap, kartu putih bersudut 18px dengan garis aksen,
   ikon berbingkai, lencana bulat, tabel berkepala kapital kecil).
   ========================================================= */
html[data-gaya=papan] body.portal{
  --bg:#0b1120;--bg2:#0f172a;--card:#111a2e;--card2:#16213a;--line:#22304f;--line2:#2c3c60;
  --ink:#e8eeff;--ink2:#c7d6f5;--mut:#93a4c8;--track:#1f2b47;
  --teal:#60a5fa;--teal2:#93c5fd;--on-teal:#0b1120;--lime:#60a5fa;--indigo:#818cf8;
  --sb1:#0f1b3d;--sb2:#0a1128;--sb-ink:#e8eeff;--sb-mut:#9fb2d8;
  --r:18px;--r2:12px;--sh:0 10px 30px -12px rgba(0,0,0,.6);
  --pp-acc:#3b82f6;--pp-acc2:#06b6d4;--pp-ics:rgba(96,165,250,.14);--pp-icb:rgba(96,165,250,.28);
  --font:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}
html[data-gaya=papan][data-theme=light] body.portal{
  --bg:#eef2f8;--bg2:#f5f8fd;--card:#ffffff;--card2:#f5f8fd;--line:#e3e8ef;--line2:#d4dbe6;
  --ink:#0f172a;--ink2:#334155;--mut:#5b6779;--track:#e2e8f0;
  --teal:#2563eb;--teal2:#1d4ed8;--on-teal:#ffffff;--lime:#60a5fa;--indigo:#4f46e5;
  --sh:0 10px 30px -12px rgba(15,23,42,.22);
  --pp-acc:#2563eb;--pp-acc2:#60a5fa;--pp-ics:#eff4ff;--pp-icb:#dbe6ff;
}
/* pita gradasi di belakang bagian atas halaman */
html[data-gaya=papan] body.portal .main{
  background:radial-gradient(1200px 420px at 12% -10%,#1e3a8a 0%,transparent 60%) no-repeat,radial-gradient(900px 360px at 88% 0%,#0e7490 0%,transparent 55%) no-repeat,linear-gradient(180deg,#0f172a 0,#0f172a 230px,transparent 330px) no-repeat,var(--bg);
}
/* bilah atas gelap transparan */
html[data-gaya=papan] body.portal .top{background:rgba(15,23,42,.72);border-bottom-color:rgba(255,255,255,.08)}
html[data-gaya=papan] body.portal .top-t,html[data-gaya=papan] body.portal .who b{color:#fff}
html[data-gaya=papan] body.portal .who small{color:#93c5fd}
html[data-gaya=papan] body.portal .who{border-left-color:rgba(255,255,255,.14)}
html[data-gaya=papan] body.portal .top .ibtn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#c7d6f5}
html[data-gaya=papan] body.portal .top .ibtn:hover{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.3)}
html[data-gaya=papan] body.portal .abs-btn{background:linear-gradient(135deg,#1e40af,#2563eb);border-color:#93c5fd;box-shadow:0 0 0 4px rgba(96,165,250,.16)}
/* bilah samping */
html[data-gaya=papan] body.portal .sb-a.on{background:rgba(96,165,250,.18);box-shadow:inset 4px 0 0 #60a5fa}
html[data-gaya=papan] body.portal .sb-k.on{background:rgba(96,165,250,.16);box-shadow:inset 3px 0 0 #60a5fa}
html[data-gaya=papan] body.portal .sb-role{border-color:rgba(147,197,253,.4)}
/* kepala halaman (hero) = kepala indikator */
html[data-gaya=papan] body.portal .hero-b,html[data-gaya=papan] body.portal .welcome{background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(239,244,255,.94));color:#0f172a;border:1px solid rgba(255,255,255,.6);border-radius:24px;box-shadow:0 30px 80px -20px rgba(15,23,42,.45)}
html[data-gaya=papan] body.portal .hero-b::after{background:radial-gradient(circle,#2563eb22,#2563eb00 70%);top:auto;bottom:-120px;right:-80px;width:280px;height:280px}
html[data-gaya=papan] body.portal .hero-b h2{color:#101c33}
html[data-gaya=papan] body.portal .hero-b h2 .ic{color:#2563eb}
html[data-gaya=papan] body.portal .hero-b p,html[data-gaya=papan] body.portal .welcome small{color:#5b6779;opacity:1}
html[data-gaya=papan] body.portal .hero-b .kicker,html[data-gaya=papan] body.portal .welcome .kicker{background:#eff4ff;color:#2563eb;border:1px solid #d6e2ff;text-transform:uppercase;letter-spacing:.4px;padding:6px 13px}
html[data-gaya=papan] body.portal .hero-b .btn.white{background:#2563eb;color:#fff}
html[data-gaya=papan] body.portal .hero-b .btn.ghost{background:#fff;color:#0f172a;border-color:#e3e8ef}
html[data-gaya=papan] body.portal .hero-a select{background:#fff;color:#0f172a;border-color:#e3e8ef}
html[data-gaya=papan] body.portal .welcome h2{color:#101c33}
html[data-gaya=papan] body.portal .welcome .chips span{background:#fff;border-color:#e3e8ef;color:#334155}
html[data-gaya=papan] body.portal .welcome .av{box-shadow:0 0 0 4px #dbe6ff}
/* kartu = kartu bukti */
html[data-gaya=papan] body.portal .card,html[data-gaya=papan] body.portal .ss,html[data-gaya=papan] body.portal .stat{border-radius:18px;box-shadow:var(--sh),inset 4px 0 0 var(--pp-acc);border-color:var(--line)}
html[data-gaya=papan] body.portal .card:hover,html[data-gaya=papan] body.portal .stat:hover{box-shadow:0 22px 45px -18px rgba(15,23,42,.38),inset 6px 0 0 var(--pp-acc)}
html[data-gaya=papan] body.portal .card .card{box-shadow:none}
html[data-gaya=papan] body.portal .card-h h3{font-weight:700}
html[data-gaya=papan] body.portal .card-h h3 .ic{width:32px;height:32px;padding:7px;border-radius:10px;background:var(--pp-ics);border:1px solid var(--pp-icb);color:var(--pp-acc);box-sizing:border-box}
html[data-gaya=papan] body.portal .ss-k{background:var(--pp-ics);color:var(--pp-acc);border:1px solid var(--pp-icb);border-radius:999px;letter-spacing:.3px}
html[data-gaya=papan] body.portal .ss-h .cap{color:var(--pp-acc)}
/* KPI = cip ringkas */
html[data-gaya=papan] body.portal .kpi{border-radius:16px;box-shadow:var(--sh);border-color:var(--line)}
html[data-gaya=papan] body.portal .kpi.solid{background:linear-gradient(135deg,#1e40af,#2563eb 55%,#06b6d4);box-shadow:0 14px 34px -14px rgba(37,99,235,.7)}
/* tabel */
html[data-gaya=papan] body.portal .tbl th{font-size:.68rem;letter-spacing:.09em;font-weight:800;background:var(--card2)}
html[data-gaya=papan] body.portal .tbl tr:hover td{background:color-mix(in srgb,var(--pp-acc) 4%,transparent)}
/* tombol, tab, segmen = gaya lencana */
html[data-gaya=papan] body.portal .btn{border-radius:11px}
html[data-gaya=papan] body.portal .tabs a{border-radius:999px;font-weight:700}
html[data-gaya=papan] body.portal .tabs a.on,html[data-gaya=papan] body.portal .seg a.on,html[data-gaya=papan] body.portal .seg button.on{background:linear-gradient(135deg,#1e40af,#2563eb);color:#fff;border-color:#2563eb}
html[data-gaya=papan] body.portal .pill{border-radius:7px;letter-spacing:.2px}
html[data-gaya=papan] body.portal .ann{border-radius:14px}
html[data-gaya=papan] body.portal .modal-c{border-radius:22px}
/* teks yang berada langsung di atas pita gelap (sebelum kartu pertama) tetap terbaca */
html[data-gaya=papan] body.portal .content>.tabs:first-child a:not(.on){background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);color:#e8eeff}
html[data-gaya=papan] body.portal .content>h2:first-child,html[data-gaya=papan] body.portal .content>h3:first-child,html[data-gaya=papan] body.portal .content>p:first-child{color:#e8eeff}
/* kotak peringatan buram agar tetap jelas di atas pita gelap */
html[data-gaya=papan][data-theme=light] body.portal .alert{box-shadow:0 10px 26px -14px rgba(15,23,42,.35)}
html[data-gaya=papan][data-theme=light] body.portal .alert.ok{background:#ecfdf5}
html[data-gaya=papan][data-theme=light] body.portal .alert.bad{background:#fef2f2}
html[data-gaya=papan][data-theme=light] body.portal .alert.warn{background:#fffbeb}
html[data-gaya=papan][data-theme=light] body.portal .alert.info{background:#eff6ff}
html[data-gaya=papan][data-theme=dark] body.portal .alert{background-color:#111a2e}
@media (max-width:640px){html[data-gaya=papan] body.portal .hero-b,html[data-gaya=papan] body.portal .welcome{border-radius:18px;padding:20px 18px}}
html[data-gaya=papan] body.portal .kj-dash-strip a{background:linear-gradient(135deg,#1e40af,#2563eb)}
html[data-gaya=papan] body.portal .kj-dash-strip a:nth-child(2){background:linear-gradient(135deg,#0369a1,#0ea5e9)}
html[data-gaya=papan] body.portal .kj-dash-strip a:nth-child(3){background:linear-gradient(135deg,#0f766e,#14b8a6)}

/* =========================================================
   1.53 — 9 TEMA PANEL TAMBAHAN (total 15): samudra · senja · zamrud · mawar · kopi · lavender · langit · malam · kontras
   ========================================================= */
html[data-gaya=samudra] body.portal{
  --bg:#06141C;--bg2:#041017;--card:#0B2230;--card2:#0F2A3A;--line:#17394B;--line2:#21495E;
  --ink:#E3F4F8;--ink2:#BBDCE5;--mut:#86AAB6;--track:#123142;
  --teal:#2DD4BF;--teal2:#5EEAD4;--on-teal:#04201C;--lime:#67E8F9;--indigo:#38BDF8;
  --sb1:#0B3346;--sb2:#061C28;--sb-ink:#E6F7FB;--sb-mut:#93BFCB;
  --font:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
}
html[data-gaya=samudra][data-theme=light] body.portal{
  --bg:#EEF7F9;--bg2:#E2F0F3;--card:#FFFFFF;--card2:#F4FAFB;--line:#D4E6EB;--line2:#BFD8DF;
  --ink:#0B2530;--ink2:#2B4A56;--mut:#5F7C87;--track:#DCEBEF;
  --teal:#0E7490;--teal2:#155E75;--on-teal:#FFFFFF;
  --sh:0 10px 28px -14px rgba(15,23,42,.18);
}
html[data-gaya=samudra] body.portal .sb-a.on{box-shadow:inset 3px 0 0 #2DD4BF}
html[data-gaya=senja] body.portal{
  --bg:#140C1C;--bg2:#0F0815;--card:#1E1329;--card2:#251832;--line:#36244A;--line2:#46305E;
  --ink:#F6ECF8;--ink2:#DCC9E2;--mut:#A890B3;--track:#2C1C3B;
  --teal:#FB923C;--teal2:#FDBA74;--on-teal:#2A1203;--lime:#F472B6;--indigo:#C084FC;
  --sb1:#3B1748;--sb2:#1C0B26;--sb-ink:#FBEFFD;--sb-mut:#C9A8D4;
  --font:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;
}
html[data-gaya=senja][data-theme=light] body.portal{
  --bg:#FBF4F1;--bg2:#F5E8E3;--card:#FFFFFF;--card2:#FDF7F4;--line:#EEDCD4;--line2:#E2C6BA;
  --ink:#2A1630;--ink2:#4E3654;--mut:#7E6684;--track:#F1E2DC;
  --teal:#C2410C;--teal2:#9A3412;--on-teal:#FFFFFF;
  --sh:0 10px 28px -14px rgba(15,23,42,.18);
}
html[data-gaya=senja] body.portal .hero-b{background:linear-gradient(120deg,#7C2D12,#BE185D 55%,#6D28D9)}
html[data-gaya=zamrud] body.portal{
  --bg:#07120D;--bg2:#050D09;--card:#0D1F17;--card2:#11281E;--line:#1B3A2C;--line2:#25503D;
  --ink:#E6F6EE;--ink2:#BFDCCD;--mut:#88AA98;--track:#143024;
  --teal:#34D399;--teal2:#6EE7B7;--on-teal:#032016;--lime:#FCD34D;--indigo:#34D399;
  --sb1:#0F3D2B;--sb2:#06231A;--sb-ink:#E8FAF1;--sb-mut:#9AC9B2;
  --font:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
}
html[data-gaya=zamrud][data-theme=light] body.portal{
  --bg:#EFF7F2;--bg2:#E3F0E8;--card:#FFFFFF;--card2:#F5FBF7;--line:#D5E7DC;--line2:#BFD9C9;
  --ink:#0C2318;--ink2:#2D4A3B;--mut:#5F7A6B;--track:#DDEDE3;
  --teal:#047857;--teal2:#065F46;--on-teal:#FFFFFF;
  --sh:0 10px 28px -14px rgba(15,23,42,.18);
}
html[data-gaya=zamrud] body.portal .kpi.solid{background:linear-gradient(135deg,#065F46,#059669 60%,#CA8A04)}
html[data-gaya=mawar] body.portal{
  --bg:#170B11;--bg2:#11080D;--card:#22111A;--card2:#2A1520;--line:#3D1F2E;--line2:#52293D;
  --ink:#FBEAF1;--ink2:#E7C6D4;--mut:#B48A9C;--track:#331825;
  --teal:#FB7185;--teal2:#FDA4AF;--on-teal:#2B0712;--lime:#F9A8D4;--indigo:#F472B6;
  --sb1:#4C1530;--sb2:#280A19;--sb-ink:#FDEEF4;--sb-mut:#D8A5BA;
  --font:'Rubik',system-ui,-apple-system,'Segoe UI',sans-serif;
}
html[data-gaya=mawar][data-theme=light] body.portal{
  --bg:#FDF2F6;--bg2:#F9E6EE;--card:#FFFFFF;--card2:#FFF7FA;--line:#F1D7E2;--line2:#E7C0D0;
  --ink:#33121F;--ink2:#5A3243;--mut:#8A6274;--track:#F5E1E9;
  --teal:#BE123C;--teal2:#9F1239;--on-teal:#FFFFFF;
  --sb1:#FFFFFF;--sb2:#FFF1F6;--sb-ink:#33121F;--sb-mut:#8A6274;
  --sh:0 10px 28px -14px rgba(15,23,42,.18);
}
html[data-gaya=mawar] body.portal .btn,html[data-gaya=mawar] body.portal .ibtn{border-radius:999px}
html[data-gaya=kopi] body.portal{
  --bg:#120D0A;--bg2:#0D0907;--card:#1D1611;--card2:#241B15;--line:#382A20;--line2:#4A382A;
  --ink:#F4ECE4;--ink2:#DCCBBB;--mut:#A8927F;--track:#2C2119;
  --teal:#D4A373;--teal2:#E6BE95;--on-teal:#1E1207;--lime:#E9C46A;--indigo:#D4A373;
  --sb1:#3A2618;--sb2:#1E130B;--sb-ink:#F7EEE6;--sb-mut:#C4A88F;
  --font:'Work Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}
html[data-gaya=kopi][data-theme=light] body.portal{
  --bg:#F6F0E9;--bg2:#EEE4D9;--card:#FFFDFA;--card2:#FAF5EF;--line:#E6D9CA;--line2:#D7C3AD;
  --ink:#2B1D13;--ink2:#503B2C;--mut:#7D6857;--track:#ECE1D5;
  --teal:#8B5A2B;--teal2:#6F4520;--on-teal:#FFFFFF;
  --sb1:#3A2618;--sb2:#24170E;--sb-ink:#F7EEE6;--sb-mut:#C4A88F;
  --sh:0 10px 28px -14px rgba(15,23,42,.18);
}
html[data-gaya=lavender] body.portal{
  --bg:#0F0C1A;--bg2:#0B0914;--card:#1A1629;--card2:#201B33;--line:#2F2848;--line2:#3D345C;
  --ink:#EEEAFB;--ink2:#CEC6EC;--mut:#9A91BC;--track:#26203B;
  --teal:#A78BFA;--teal2:#C4B5FD;--on-teal:#160E33;--lime:#F0ABFC;--indigo:#A78BFA;
  --sb1:#2C2160;--sb2:#171035;--sb-ink:#F1EEFD;--sb-mut:#B3A8DD;
  --font:'Lexend',system-ui,-apple-system,'Segoe UI',sans-serif;
}
html[data-gaya=lavender][data-theme=light] body.portal{
  --bg:#F5F3FD;--bg2:#ECE8FA;--card:#FFFFFF;--card2:#FAF9FF;--line:#E1DCF5;--line2:#CEC6EE;
  --ink:#1E1638;--ink2:#3F3561;--mut:#6E6690;--track:#E8E4F8;
  --teal:#6D28D9;--teal2:#5B21B6;--on-teal:#FFFFFF;
  --sb1:#FFFFFF;--sb2:#F3F0FE;--sb-ink:#1E1638;--sb-mut:#6E6690;
  --sh:0 10px 28px -14px rgba(15,23,42,.18);
}
html[data-gaya=lavender] body.portal .card{border-radius:22px}
html[data-gaya=langit] body.portal{
  --bg:#081321;--bg2:#060F1A;--card:#0E1E33;--card2:#12253E;--line:#1D3554;--line2:#28456B;
  --ink:#E7F1FD;--ink2:#C2D6EE;--mut:#8EA8C6;--track:#16304D;
  --teal:#38BDF8;--teal2:#7DD3FC;--on-teal:#03213A;--lime:#FDE68A;--indigo:#60A5FA;
  --sb1:#0C2D52;--sb2:#071A31;--sb-ink:#EAF4FE;--sb-mut:#9DBBDC;
  --font:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
}
html[data-gaya=langit][data-theme=light] body.portal{
  --bg:#F0F7FF;--bg2:#E3EFFC;--card:#FFFFFF;--card2:#F6FAFF;--line:#D7E6F7;--line2:#C0D6EF;
  --ink:#0B1F36;--ink2:#2C4560;--mut:#5F7690;--track:#DFEBF8;
  --teal:#0369A1;--teal2:#075985;--on-teal:#FFFFFF;
  --sb1:#0C4A6E;--sb2:#082F49;--sb-ink:#EAF4FE;--sb-mut:#A5C8E4;
  --sh:0 10px 28px -14px rgba(15,23,42,.18);
}
html[data-gaya=malam] body.portal{
  --bg:#000000;--bg2:#000000;--card:#0A0A0A;--card2:#111111;--line:#1F1F1F;--line2:#2A2A2A;
  --ink:#EDEDED;--ink2:#C8C8C8;--mut:#8A8A8A;--track:#171717;
  --teal:#22D3EE;--teal2:#67E8F9;--on-teal:#001A1F;--lime:#A3E635;--indigo:#22D3EE;
  --sb1:#000000;--sb2:#000000;--sb-ink:#EDEDED;--sb-mut:#8A8A8A;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}
html[data-gaya=malam][data-theme=light] body.portal{
  --bg:#FAFAFA;--bg2:#F2F2F2;--card:#FFFFFF;--card2:#F7F7F7;--line:#E5E5E5;--line2:#D4D4D4;
  --ink:#0A0A0A;--ink2:#333333;--mut:#666666;--track:#EBEBEB;
  --teal:#0891B2;--teal2:#0E7490;--on-teal:#FFFFFF;
  --sb1:#0A0A0A;--sb2:#000000;--sb-ink:#EDEDED;--sb-mut:#8A8A8A;
  --sh:0 10px 28px -14px rgba(15,23,42,.18);
}
html[data-gaya=malam] body.portal .card,html[data-gaya=malam] body.portal .ss{box-shadow:none}
html[data-gaya=malam] body.portal .sb{border-right:1px solid #1F1F1F}
html[data-gaya=kontras] body.portal{
  --bg:#000000;--bg2:#000000;--card:#000000;--card2:#0D0D0D;--line:#FFFFFF;--line2:#FFFFFF;
  --ink:#FFFFFF;--ink2:#FFFFFF;--mut:#E5E5E5;--track:#333333;
  --teal:#FFE600;--teal2:#FFF27A;--on-teal:#000000;--lime:#FFE600;--indigo:#FFE600;
  --sb1:#000000;--sb2:#000000;--sb-ink:#FFFFFF;--sb-mut:#FFE600;
  --font:system-ui,system-ui,-apple-system,'Segoe UI',sans-serif;
}
html[data-gaya=kontras][data-theme=light] body.portal{
  --bg:#FFFFFF;--bg2:#FFFFFF;--card:#FFFFFF;--card2:#F2F2F2;--line:#000000;--line2:#000000;
  --ink:#000000;--ink2:#000000;--mut:#1A1A1A;--track:#D9D9D9;
  --teal:#0033CC;--teal2:#001F80;--on-teal:#FFFFFF;
  --sb1:#000000;--sb2:#000000;--sb-ink:#FFFFFF;--sb-mut:#FFE600;
  --sh:0 10px 28px -14px rgba(15,23,42,.18);
}
html[data-gaya=kontras] body.portal{font-size:17px}
html[data-gaya=kontras] body.portal :focus-visible{outline:3px solid #FFE600!important;outline-offset:2px}
html[data-gaya=kontras] body.portal .content p a,html[data-gaya=kontras] body.portal .content td a,html[data-gaya=kontras] body.portal .content li a{text-decoration:underline}
html[data-gaya=kontras] body.portal .card,html[data-gaya=kontras] body.portal .kpi,html[data-gaya=kontras] body.portal .ss{border-width:2px;box-shadow:none}

/* =========================================================
   1.53 — SITUS PUBLIK: MODERN PROFESIONAL
   Putih lembut, bilah atas kaca menempel, kartu membulat berbayang halus,
   tombol kapsul bergradasi nila, judul sans tegas. Mode gelap tersedia.
   ========================================================= */
html[data-gaya=modern] body.pub{
  --bg:#F7F8FB;--bg2:#EEF1F6;--card:#FFFFFF;--card2:#F5F7FB;--line:#E5E9F0;--line2:#D3DAE5;
  --ink:#0B1324;--ink2:#334155;--mut:#64748B;--track:#E2E8F0;
  --teal:#1E40AF;--teal2:#1E3A8A;--on-teal:#FFFFFF;--nila:#1E40AF;--nila2:#2563EB;--soga:#C2410C;--jalawe:#D97706;--daun:#15803D;
  --sh:0 1px 2px rgba(15,23,42,.04),0 12px 32px -16px rgba(15,23,42,.18);
  --font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--serif:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --kain-garis:#1E40AF;--kain-isi:#FFFFFF;--r:18px;--r2:12px;--md-glass:rgba(255,255,255,.78);
  font-size:16px;line-height:1.65;
}
html[data-gaya=modern][data-theme=dark] body.pub{
  --bg:#0A0F1C;--bg2:#070B15;--card:#111827;--card2:#162033;--line:#1F2A40;--line2:#2B3A57;
  --ink:#F1F5F9;--ink2:#CBD5E1;--mut:#94A3B8;--track:#1E293B;
  --teal:#93B4FF;--teal2:#BFD0FF;--on-teal:#0A0F1C;--nila:#93B4FF;--nila2:#60A5FA;--soga:#FDBA74;--jalawe:#FBBF24;--daun:#86EFAC;
  --sh:0 18px 40px -22px rgba(0,0,0,.7);--kain-garis:#93B4FF;--kain-isi:#111827;--md-glass:rgba(10,15,28,.72);
}
html[data-gaya=modern] body.pub h1,html[data-gaya=modern] body.pub h2,html[data-gaya=modern] body.pub h3,html[data-gaya=modern] body.pub .p-title,html[data-gaya=modern] body.pub .p-head h1{font-family:var(--font);font-weight:800;letter-spacing:-.025em}
/* bilah atas kaca buram, menempel saat digulir, selebar layar */
html[data-gaya=modern] body.pub .pub-nav{position:sticky;top:0;z-index:60;padding:12px 20px}
html[data-gaya=modern] body.pub .pub-nav::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);z-index:-1;background:var(--md-glass);-webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line);pointer-events:none}
html[data-gaya=modern] body.pub .pub-nav .brand{font-family:var(--font);font-weight:800;letter-spacing:-.02em}
html[data-gaya=modern] body.pub .pub-nav .links a:not(.btn){border-bottom:0;border-radius:999px;padding:7px 12px;font-weight:600;font-size:.9rem;color:var(--ink2)}
html[data-gaya=modern] body.pub .pub-nav .links a:not(.btn):hover{background:color-mix(in srgb,var(--teal) 8%,transparent);color:var(--teal)}
html[data-gaya=modern] body.pub .pub-nav .links a.on{background:color-mix(in srgb,var(--teal) 11%,transparent)!important;color:var(--teal)!important}
/* tombol */
html[data-gaya=modern] body.pub .btn{border-radius:999px;font-weight:700;letter-spacing:-.005em;background:linear-gradient(135deg,#1E3A8A,#2563EB);border:0;box-shadow:0 8px 20px -10px rgba(37,99,235,.65);transition:transform .15s ease,box-shadow .15s ease,filter .15s}
html[data-gaya=modern][data-theme=dark] body.pub .btn{background:linear-gradient(135deg,#3B82F6,#93B4FF);color:#0A0F1C}
html[data-gaya=modern] body.pub .btn:hover{transform:translateY(-1px);box-shadow:0 12px 26px -12px rgba(37,99,235,.75);filter:none}
html[data-gaya=modern] body.pub .btn.ghost{background:var(--card);color:var(--ink);border:1px solid var(--line2);box-shadow:0 1px 2px rgba(15,23,42,.05)}
html[data-gaya=modern] body.pub .btn.ghost:hover{border-color:var(--teal);color:var(--teal)}
html[data-gaya=modern] body.pub .ibtn{border-radius:999px;background:var(--card);border:1px solid var(--line)}
/* kartu */
html[data-gaya=modern] body.pub .card{border-radius:18px;border:1px solid var(--line);box-shadow:var(--sh);transition:transform .2s ease,box-shadow .2s ease}
html[data-gaya=modern] body.pub a.card:hover,html[data-gaya=modern] body.pub .card:has(a):hover{transform:translateY(-2px);box-shadow:0 22px 44px -22px rgba(15,23,42,.32)}
html[data-gaya=modern] body.pub input,html[data-gaya=modern] body.pub select,html[data-gaya=modern] body.pub textarea{border-radius:12px;border:1px solid var(--line2);background:var(--card)}
html[data-gaya=modern] body.pub input:focus,html[data-gaya=modern] body.pub select:focus,html[data-gaya=modern] body.pub textarea:focus{border-color:var(--teal);box-shadow:0 0 0 4px color-mix(in srgb,var(--teal) 16%,transparent);outline:0}
html[data-gaya=modern] body.pub :focus-visible{outline:3px solid color-mix(in srgb,var(--teal) 55%,transparent);outline-offset:2px}
/* label kecil di atas judul = kapsul */
html[data-gaya=modern] body.pub .kicker,html[data-gaya=modern] body.pub .kicker-p,html[data-gaya=modern] body.pub .gk-letak{display:inline-flex;align-items:center;gap:8px;background:color-mix(in srgb,var(--teal) 9%,var(--card));color:var(--teal);border:1px solid color-mix(in srgb,var(--teal) 20%,transparent);border-radius:999px;padding:6px 14px;font-size:.78rem;font-weight:700;letter-spacing:.02em;text-transform:none}
/* hero dengan latar gradasi jala */
html[data-gaya=modern] body.pub{background:radial-gradient(900px 420px at 12% 0,color-mix(in srgb,#2563EB 12%,transparent),transparent 70%) no-repeat,radial-gradient(760px 380px at 90% 4%,color-mix(in srgb,#06B6D4 10%,transparent),transparent 70%) no-repeat,radial-gradient(700px 320px at 55% 640px,color-mix(in srgb,#C2410C 6%,transparent),transparent 70%) no-repeat,var(--bg)}
html[data-gaya=modern] body.pub .gk-hero h1{font-size:clamp(2.2rem,4.8vw,3.9rem);line-height:1.05;letter-spacing:-.035em;background:linear-gradient(120deg,var(--ink) 30%,var(--teal) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-gaya=modern] body.pub .gk-hero .gk-sub{color:var(--ink2);font-size:1.12rem}
html[data-gaya=modern] body.pub .gk-panel{border-radius:28px;box-shadow:0 40px 80px -36px rgba(15,23,42,.45),0 0 0 1px var(--line)}
/* bagian & judul bagian */
html[data-gaya=modern] body.pub .gk-sec{padding-top:56px}
html[data-gaya=modern] body.pub .gk-sec h2,html[data-gaya=modern] body.pub .p-sec h2{font-size:clamp(1.65rem,3.1vw,2.35rem)}
html[data-gaya=modern] body.pub .gk-canting{background-image:none;height:1px;background:linear-gradient(90deg,transparent,var(--line2),transparent);margin:18px 0}
html[data-gaya=modern] body.pub .pill{border-radius:999px}
/* kaki halaman gelap profesional */
html[data-gaya=modern] body.pub .pub-foot{background:#0B1324;color:#CBD5E1;border-top:0;margin-top:64px}
html[data-gaya=modern] body.pub .pub-foot::before{display:none}
html[data-gaya=modern] body.pub .pub-foot b,html[data-gaya=modern] body.pub .pub-foot .pf-h{color:#FFFFFF!important}
html[data-gaya=modern] body.pub .pub-foot a,html[data-gaya=modern] body.pub .pub-foot .pf-m{color:#BFD0FF}
html[data-gaya=modern] body.pub .pub-foot .mut,html[data-gaya=modern] body.pub .pub-foot p,html[data-gaya=modern] body.pub .pub-foot small,html[data-gaya=modern] body.pub .pf-c{color:#94A3B8}
@media (prefers-reduced-motion:reduce){html[data-gaya=modern] body.pub .btn,html[data-gaya=modern] body.pub .card{transition:none}}
@media (max-width:640px){html[data-gaya=modern] body.pub .pub-nav{padding:10px 14px}}

/* tema 1.53: kepala sambutan & kartu pintasan mengikuti warna tema */
html[data-gaya=samudra] body.portal .welcome,html[data-gaya=senja] body.portal .welcome,html[data-gaya=zamrud] body.portal .welcome,html[data-gaya=mawar] body.portal .welcome,html[data-gaya=kopi] body.portal .welcome,html[data-gaya=lavender] body.portal .welcome,html[data-gaya=langit] body.portal .welcome,html[data-gaya=malam] body.portal .welcome,html[data-gaya=kontras] body.portal .welcome{background:linear-gradient(120deg,var(--sb1) 0%,color-mix(in srgb,var(--teal) 62%,var(--sb2)) 100%);color:#fff}
html[data-gaya=samudra] body.portal .kj-dash-strip a,html[data-gaya=senja] body.portal .kj-dash-strip a,html[data-gaya=zamrud] body.portal .kj-dash-strip a,html[data-gaya=mawar] body.portal .kj-dash-strip a,html[data-gaya=kopi] body.portal .kj-dash-strip a,html[data-gaya=lavender] body.portal .kj-dash-strip a,html[data-gaya=langit] body.portal .kj-dash-strip a,html[data-gaya=malam] body.portal .kj-dash-strip a,html[data-gaya=kontras] body.portal .kj-dash-strip a{background:linear-gradient(135deg,color-mix(in srgb,var(--teal) 78%,#000),var(--teal))}
html[data-gaya=samudra] body.portal .kj-dash-strip a:nth-child(2),html[data-gaya=senja] body.portal .kj-dash-strip a:nth-child(2),html[data-gaya=zamrud] body.portal .kj-dash-strip a:nth-child(2),html[data-gaya=mawar] body.portal .kj-dash-strip a:nth-child(2),html[data-gaya=kopi] body.portal .kj-dash-strip a:nth-child(2),html[data-gaya=lavender] body.portal .kj-dash-strip a:nth-child(2),html[data-gaya=langit] body.portal .kj-dash-strip a:nth-child(2),html[data-gaya=malam] body.portal .kj-dash-strip a:nth-child(2),html[data-gaya=kontras] body.portal .kj-dash-strip a:nth-child(2){background:linear-gradient(135deg,color-mix(in srgb,var(--indigo) 70%,#000),var(--indigo))}
html[data-gaya=samudra] body.portal .kj-dash-strip a:nth-child(3),html[data-gaya=senja] body.portal .kj-dash-strip a:nth-child(3),html[data-gaya=zamrud] body.portal .kj-dash-strip a:nth-child(3),html[data-gaya=mawar] body.portal .kj-dash-strip a:nth-child(3),html[data-gaya=kopi] body.portal .kj-dash-strip a:nth-child(3),html[data-gaya=lavender] body.portal .kj-dash-strip a:nth-child(3),html[data-gaya=langit] body.portal .kj-dash-strip a:nth-child(3),html[data-gaya=malam] body.portal .kj-dash-strip a:nth-child(3),html[data-gaya=kontras] body.portal .kj-dash-strip a:nth-child(3){background:linear-gradient(135deg,color-mix(in srgb,var(--lime) 55%,#000),color-mix(in srgb,var(--lime) 85%,#000))}
html[data-gaya=kontras] body.portal .welcome,html[data-gaya=kontras] body.portal .kj-dash-strip a{background:#000!important;color:#fff;border:2px solid #FFE600}
html[data-gaya=kontras][data-theme=light] body.portal .welcome,html[data-gaya=kontras][data-theme=light] body.portal .kj-dash-strip a{background:#0033CC!important;border-color:#000}
html[data-gaya=mawar][data-theme=light] body.portal .welcome,html[data-gaya=lavender][data-theme=light] body.portal .welcome{background:linear-gradient(120deg,var(--teal2) 0%,var(--teal) 55%,color-mix(in srgb,var(--indigo) 80%,#fff) 100%);color:#fff}

/* sidebar putih (mawar, lavender) — mode terang */
html[data-gaya=mawar][data-theme=light] body.portal .sb{box-shadow:none;border-right:1px solid var(--line)}
html[data-gaya=mawar][data-theme=light] body.portal .sb-name{color:var(--sb-ink)}
html[data-gaya=mawar][data-theme=light] body.portal .sb-role{background:color-mix(in srgb,var(--teal) 14%,transparent);border-color:color-mix(in srgb,var(--teal) 30%,transparent);color:var(--teal)}
html[data-gaya=mawar][data-theme=light] body.portal .sb-a:hover,html[data-gaya=mawar][data-theme=light] body.portal .sb-k:hover{background:color-mix(in srgb,var(--teal) 8%,transparent)}
html[data-gaya=mawar][data-theme=light] body.portal .sb-a.on{background:color-mix(in srgb,var(--teal) 13%,transparent);color:var(--teal);box-shadow:none}
html[data-gaya=mawar][data-theme=light] body.portal .sb-k.on{background:color-mix(in srgb,var(--teal) 12%,transparent);color:var(--teal);box-shadow:none}
html[data-gaya=mawar][data-theme=light] body.portal .sb-grp.open>.sb-t{background:color-mix(in srgb,var(--ink) 4%,transparent)}
html[data-gaya=mawar][data-theme=light] body.portal .sb-kids{border-left-color:var(--line)}
html[data-gaya=mawar][data-theme=light] body.portal .sb-out{border-top-color:var(--line)}
html[data-gaya=mawar][data-theme=light] body.portal .sb-nav{scrollbar-color:var(--line2) transparent}
html[data-gaya=lavender][data-theme=light] body.portal .sb{box-shadow:none;border-right:1px solid var(--line)}
html[data-gaya=lavender][data-theme=light] body.portal .sb-name{color:var(--sb-ink)}
html[data-gaya=lavender][data-theme=light] body.portal .sb-role{background:color-mix(in srgb,var(--teal) 14%,transparent);border-color:color-mix(in srgb,var(--teal) 30%,transparent);color:var(--teal)}
html[data-gaya=lavender][data-theme=light] body.portal .sb-a:hover,html[data-gaya=lavender][data-theme=light] body.portal .sb-k:hover{background:color-mix(in srgb,var(--teal) 8%,transparent)}
html[data-gaya=lavender][data-theme=light] body.portal .sb-a.on{background:color-mix(in srgb,var(--teal) 13%,transparent);color:var(--teal);box-shadow:none}
html[data-gaya=lavender][data-theme=light] body.portal .sb-k.on{background:color-mix(in srgb,var(--teal) 12%,transparent);color:var(--teal);box-shadow:none}
html[data-gaya=lavender][data-theme=light] body.portal .sb-grp.open>.sb-t{background:color-mix(in srgb,var(--ink) 4%,transparent)}
html[data-gaya=lavender][data-theme=light] body.portal .sb-kids{border-left-color:var(--line)}
html[data-gaya=lavender][data-theme=light] body.portal .sb-out{border-top-color:var(--line)}
html[data-gaya=lavender][data-theme=light] body.portal .sb-nav{scrollbar-color:var(--line2) transparent}