/* =====================================================================
   Tema Nagari Manganti — sistem desain bersama (publik, warga, pegawai, admin)
   Zamrud tua + emas songket (dari lambang) dengan aksen warna yang hidup.
   Dimuat SETELAH app.css (Tailwind) sehingga dapat menyempurnakan pola umum.
   ===================================================================== */
:root{
  --em-950:#022c25; --em-900:#04392f; --em-800:#065f46; --em-700:#047857; --em-600:#059669;
  --jade:#10b981; --teal:#14b8a6; --sky:#0ea5e9;
  --gold:#e9c46a; --gold-2:#c9962f; --gold-3:#f6e2a8; --maroon:#7a1f1f;
  --ink:#0f172a; --muted:#64748b; --line:rgba(15,23,42,.07);
  --surface:#f5f8f7;
  --r-lg:1.25rem; --r-xl:1.75rem;
  --sh-1:0 1px 2px rgba(2,44,37,.04),0 4px 14px -4px rgba(2,44,37,.08);
  --sh-2:0 2px 6px rgba(2,44,37,.05),0 18px 40px -14px rgba(2,44,37,.22);
  --sh-gold:0 10px 30px -10px rgba(201,150,47,.55);
  --grad-em:linear-gradient(135deg,#022c25 0%,#065f46 48%,#0d9488 100%);
  --grad-gold:linear-gradient(135deg,#f6e2a8 0%,#e9c46a 38%,#c9962f 100%);
  --ease:cubic-bezier(.16,1,.3,1);
}

/* ---------- Dasar ---------- */
html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}
body.tema{background:
  radial-gradient(1200px 600px at 100% -10%,rgba(16,185,129,.07),transparent 60%),
  radial-gradient(900px 500px at -10% 20%,rgba(233,196,106,.08),transparent 60%),
  var(--surface);
  color:#1f2937;font-family:'Plus Jakarta Sans',ui-sans-serif,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.font-display{font-family:'Playfair Display',Georgia,serif;letter-spacing:-.01em}
::selection{background:rgba(233,196,106,.45);color:#022c25}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#eef3f1}
::-webkit-scrollbar-thumb{background:linear-gradient(#059669,#0d9488);border-radius:8px;border:2px solid #eef3f1}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ---------- Utilitas merek ---------- */
.text-gold{color:var(--gold)}
.text-gradient-gold{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.text-gradient-em{background:linear-gradient(135deg,#047857,#0d9488 60%,#0ea5e9);-webkit-background-clip:text;background-clip:text;color:transparent}
.bg-grad-em{background:var(--grad-em)}
.bg-grad-gold{background:var(--grad-gold)}
.songket{background-image:
  repeating-linear-gradient(45deg,rgba(233,196,106,.16) 0 2px,transparent 2px 14px),
  repeating-linear-gradient(-45deg,rgba(233,196,106,.12) 0 2px,transparent 2px 14px)}
.songket-garis{height:6px;background:
  linear-gradient(90deg,transparent,rgba(233,196,106,.9) 15%,#c9962f 50%,rgba(233,196,106,.9) 85%,transparent),
  #022c25;mask:repeating-linear-gradient(90deg,#000 0 10px,transparent 10px 14px)}
.titik{background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1.5px);background-size:22px 22px}
.kaca{background:rgba(255,255,255,.08);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border:1px solid rgba(255,255,255,.16)}
.kaca-terang{background:rgba(255,255,255,.78);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);border:1px solid rgba(255,255,255,.7)}

/* ---------- Tombol ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:700;border-radius:.9rem;padding:.8rem 1.4rem;transition:transform .25s var(--ease),box-shadow .25s,background .25s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-emas{background:var(--grad-gold);color:#022c25;box-shadow:var(--sh-gold)}
.btn-emas:hover{box-shadow:0 16px 36px -10px rgba(201,150,47,.7)}
.btn-zamrud{background:linear-gradient(135deg,#047857,#0d9488);color:#fff;box-shadow:0 10px 26px -10px rgba(4,120,87,.6)}
.btn-kaca{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(10px)}
.btn-kaca:hover{background:rgba(255,255,255,.18)}
.btn-garis{background:#fff;color:#065f46;border:1.5px solid rgba(4,120,87,.25)}
.btn-garis:hover{border-color:#047857;box-shadow:var(--sh-1)}

/* Kilau melintas pada tombol/ikon */
.kilau{position:relative;overflow:hidden;isolation:isolate}
.kilau::after{content:"";position:absolute;inset:-40% auto -40% -60%;width:40%;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transition:left .8s var(--ease);left:-60%;z-index:1;pointer-events:none}
.kilau:hover::after{left:130%}

/* ---------- Ikon bergradasi ---------- */
.ikon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:3.25rem;height:3.25rem;border-radius:1rem;color:#fff;font-size:1.2rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 22px -10px var(--ik-bayang,rgba(4,120,87,.6));background:var(--ik,linear-gradient(135deg,#10b981,#047857));transition:transform .35s var(--ease)}
.ikon-sm{width:2.5rem;height:2.5rem;border-radius:.8rem;font-size:1rem}
.ikon-lg{width:4rem;height:4rem;border-radius:1.25rem;font-size:1.5rem}
.group:hover .ikon{transform:translateY(-2px) rotate(-6deg) scale(1.06)}
.ik-zamrud{--ik:linear-gradient(135deg,#34d399,#047857);--ik-bayang:rgba(4,120,87,.65)}
.ik-teal{--ik:linear-gradient(135deg,#2dd4bf,#0f766e);--ik-bayang:rgba(15,118,110,.6)}
.ik-langit{--ik:linear-gradient(135deg,#38bdf8,#2563eb);--ik-bayang:rgba(37,99,235,.55)}
.ik-nila{--ik:linear-gradient(135deg,#818cf8,#4338ca);--ik-bayang:rgba(67,56,202,.55)}
.ik-ungu{--ik:linear-gradient(135deg,#c084fc,#7c3aed);--ik-bayang:rgba(124,58,237,.55)}
.ik-mawar{--ik:linear-gradient(135deg,#fb7185,#e11d48);--ik-bayang:rgba(225,29,72,.5)}
.ik-merah{--ik:linear-gradient(135deg,#f87171,#dc2626);--ik-bayang:rgba(220,38,38,.5)}
.ik-amber{--ik:linear-gradient(135deg,#fbbf24,#ea580c);--ik-bayang:rgba(234,88,12,.5)}
.ik-emas{--ik:linear-gradient(135deg,#f6e2a8,#c9962f);--ik-bayang:rgba(201,150,47,.6);color:#022c25}
.ik-limau{--ik:linear-gradient(135deg,#a3e635,#16a34a);--ik-bayang:rgba(22,163,74,.5)}
.ik-pink{--ik:linear-gradient(135deg,#f472b6,#c026d3);--ik-bayang:rgba(192,38,211,.5)}
.ik-batu{--ik:linear-gradient(135deg,#94a3b8,#334155);--ik-bayang:rgba(51,65,85,.5)}

/* ---------- Kartu ---------- */
.kartu{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-1);border:1px solid var(--line);transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.kartu-hidup:hover{transform:translateY(-6px);box-shadow:var(--sh-2);border-color:rgba(4,120,87,.18)}
.kartu-sorot{position:relative}
.kartu-sorot::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(233,196,106,.0),rgba(233,196,106,.0));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;transition:background .4s;pointer-events:none}
.kartu-sorot:hover::before{background:linear-gradient(135deg,rgba(233,196,106,.9),rgba(16,185,129,.6),rgba(14,165,233,.5))}
.garis-atas{position:relative;overflow:hidden}
.garis-atas::after{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--garis,linear-gradient(90deg,#10b981,#0ea5e9))}

/* ---------- Judul seksi ---------- */
.label-seksi{display:inline-flex;align-items:center;gap:.5rem;font-size:.72rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#047857}
.label-seksi::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--grad-gold)}
.label-seksi.terang{color:var(--gold)}
.judul-seksi{font-family:'Playfair Display',Georgia,serif;font-weight:800;color:#0f172a;letter-spacing:-.015em;line-height:1.15}

/* ---------- Animasi ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--tunda,0s)}
.reveal.in{opacity:1;transform:none}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.animate-floaty{animation:floaty 7s ease-in-out infinite}
@keyframes kenburns{0%{transform:scale(1.03)}100%{transform:scale(1.16)}}
.kenburns{animation:kenburns 10s ease-out forwards}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.marquee-track{display:inline-flex;white-space:nowrap;animation:marquee 32s linear infinite}
.marquee-wrap:hover .marquee-track{animation-play-state:paused}
@keyframes orb{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(30px,-20px) scale(1.08)}66%{transform:translate(-20px,15px) scale(.95)}}
.orb{position:absolute;border-radius:9999px;filter:blur(60px);opacity:.55;animation:orb 16s ease-in-out infinite;pointer-events:none}
@keyframes gulir{0%{transform:translateY(0);opacity:1}100%{transform:translateY(10px);opacity:0}}
.gulir-titik{animation:gulir 1.6s ease-in-out infinite}
@keyframes denyut{0%{box-shadow:0 0 0 0 rgba(233,196,106,.6)}100%{box-shadow:0 0 0 14px rgba(233,196,106,0)}}
.denyut{animation:denyut 2s infinite}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* ---------- Header halaman (semua halaman publik) ---------- */
.page-header{background:var(--grad-em);position:relative;overflow:hidden;isolation:isolate;padding-top:3.75rem!important;padding-bottom:5.25rem!important}
.page-header::before{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(600px 300px at 12% 0%,rgba(255,255,255,.10),transparent 60%),
  radial-gradient(520px 320px at 92% 10%,rgba(233,196,106,.30),transparent 60%),
  radial-gradient(500px 260px at 70% 120%,rgba(14,165,233,.25),transparent 60%)}
.page-header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:46px;z-index:0;background:var(--surface);
  -webkit-mask:radial-gradient(120% 46px at 50% 100%,#000 98%,transparent 100%);mask:radial-gradient(120% 46px at 50% 100%,#000 98%,transparent 100%)}
.page-header h1{font-family:'Playfair Display',Georgia,serif;font-weight:800;letter-spacing:-.015em;text-shadow:0 2px 20px rgba(0,0,0,.25)}
.page-header nav{display:inline-flex;align-items:center;gap:.15rem;padding:.35rem .9rem;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(8px);font-size:.78rem}
.page-header nav a{color:var(--gold-3)}

/* ---------- Penyempurnaan pola Tailwind umum (semua halaman) ---------- */
body.tema .bg-white.rounded-xl.shadow,body.tema .bg-white.rounded-lg.shadow,body.tema .bg-white.rounded-2xl.shadow,
body.tema .bg-white.rounded-xl.shadow-sm,body.tema .bg-white.rounded-2xl.shadow-sm,body.tema .bg-white.rounded-lg.shadow-sm,
body.tema .bg-white.rounded-2xl.shadow-md,body.tema .bg-white.rounded-xl.shadow-md{
  border-radius:var(--r-lg);box-shadow:var(--sh-1);border:1px solid var(--line)}
body.tema a.bg-white.rounded-xl,body.tema a.bg-white.rounded-2xl{transition:transform .35s var(--ease),box-shadow .35s}
body.tema a.bg-white.rounded-xl:hover,body.tema a.bg-white.rounded-2xl:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
body.tema .bg-emerald-600:not(.ikon){background-image:linear-gradient(135deg,#059669,#0d9488)}
body.tema .bg-emerald-600:not(.ikon):hover,body.tema .hover\:bg-emerald-700:hover{background-image:linear-gradient(135deg,#047857,#0f766e)}
body.tema button.bg-emerald-600,body.tema a.bg-emerald-600,body.tema input.bg-emerald-600{box-shadow:0 8px 20px -10px rgba(4,120,87,.65);transition:transform .2s var(--ease),box-shadow .2s,background .2s}
body.tema button.bg-emerald-600:hover,body.tema a.bg-emerald-600:hover{transform:translateY(-1px);box-shadow:0 14px 28px -12px rgba(4,120,87,.7)}
body.tema input[type=text],body.tema input[type=email],body.tema input[type=password],body.tema input[type=number],body.tema input[type=tel],
body.tema input[type=date],body.tema input[type=search],body.tema input[type=url],body.tema input[type=time],body.tema input[type=datetime-local],body.tema select,body.tema textarea{
  border-radius:.8rem;border-color:#dbe4e1;transition:border-color .2s,box-shadow .2s;background-color:#fff}
body.tema input:focus,body.tema select:focus,body.tema textarea:focus{border-color:#10b981!important;box-shadow:0 0 0 4px rgba(16,185,129,.15)!important;outline:none}
body.tema table thead{background:linear-gradient(180deg,#f3f8f6,#eaf3ef)}
body.tema table thead th{color:#065f46;font-weight:700;letter-spacing:.02em}
body.tema table tbody tr{transition:background .2s}
body.tema table tbody tr:hover{background:#f6fbf9}

/* ---------- Header situs publik ---------- */
.kepala{position:sticky;top:0;z-index:50;transition:background .35s,box-shadow .35s,backdrop-filter .35s}
.kepala.terang{background:rgba(2,44,37,.82);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);box-shadow:0 10px 30px -12px rgba(0,0,0,.35)}
.kepala.awal{background:linear-gradient(90deg,#022c25,#04392f 50%,#022c25)}
.navlink{position:relative;color:#e7f5ef;font-weight:600;font-size:.9rem;padding:.55rem .8rem;border-radius:.7rem;transition:color .2s,background .2s}
.navlink:hover{color:#fff;background:rgba(255,255,255,.07)}
.navlink::after{content:"";position:absolute;left:.8rem;right:.8rem;bottom:.3rem;height:2px;border-radius:2px;background:var(--grad-gold);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.navlink:hover::after,.navlink.active::after{transform:scaleX(1)}
.navlink.active{color:var(--gold)}
.menu-turun{background:#fff;border-radius:1.1rem;box-shadow:0 30px 60px -20px rgba(2,44,37,.4),0 0 0 1px rgba(2,44,37,.05);overflow:hidden}
.menu-turun a.butir{display:flex;align-items:center;gap:.75rem;padding:.55rem .7rem;border-radius:.8rem;font-size:.86rem;color:#1f2937;transition:background .2s,transform .2s}
.menu-turun a.butir:hover{background:linear-gradient(90deg,#ecfdf5,#f0fdfa);transform:translateX(3px)}
.menu-turun a.butir small{display:block;color:#94a3b8;font-size:.72rem;font-weight:500}

/* ---------- Footer ---------- */
.kaki{background:radial-gradient(800px 400px at 85% 0%,rgba(233,196,106,.12),transparent 60%),linear-gradient(180deg,#04392f,#011f1a)}
.kaki a.tautan{color:#a7d7c5;transition:color .2s,padding .2s}
.kaki a.tautan:hover{color:#fff;padding-left:4px}

/* ---------- Navigasi bawah (mobile) ---------- */
.nav-bawah{background:rgba(255,255,255,.86);backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);border-top:1px solid rgba(2,44,37,.06);box-shadow:0 -10px 30px -12px rgba(2,44,37,.18)}

/* ---------- Halaman masuk (login) ---------- */
.masuk-latar{position:relative;min-height:100vh;overflow:hidden;background:#022c25;isolation:isolate}
.masuk-latar .foto{position:absolute;inset:0;background-size:cover;background-position:center;z-index:-2}
.masuk-latar .lapis{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(115deg,rgba(2,44,37,.94) 0%,rgba(4,57,47,.82) 42%,rgba(6,95,70,.55) 70%,rgba(13,148,136,.45) 100%)}
.masuk-kartu{background:rgba(255,255,255,.96);border-radius:1.75rem;box-shadow:0 40px 80px -30px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.6);backdrop-filter:blur(20px)}
.masuk-kartu input:not([type=checkbox]){border-radius:.9rem!important;padding-top:.8rem!important;padding-bottom:.8rem!important;border-color:#dbe4e1!important}
.masuk-kartu input:focus{border-color:#10b981!important;box-shadow:0 0 0 4px rgba(16,185,129,.15)!important}

/* ---------- Panel (admin / warga / pegawai) ---------- */
body.tema.panel{background:radial-gradient(900px 500px at 100% 0%,rgba(16,185,129,.06),transparent 60%),#f3f6f5}
aside.panel-samping{background:
  radial-gradient(500px 300px at 0% 0%,rgba(233,196,106,.10),transparent 60%),
  linear-gradient(180deg,#04392f 0%,#022c25 55%,#011f1a 100%)!important;
  box-shadow:6px 0 30px -12px rgba(2,44,37,.45);scrollbar-width:thin;scrollbar-color:rgba(233,196,106,.35) transparent}
aside.panel-samping::-webkit-scrollbar{width:6px}
aside.panel-samping::-webkit-scrollbar-thumb{background:rgba(233,196,106,.3);border:0}
aside.panel-samping .panel-logo{background:rgba(0,0,0,.18)!important;border-bottom:1px solid rgba(233,196,106,.25)}
aside.panel-samping nav a{border-radius:.85rem!important;transition:background .2s,color .2s,transform .2s}
aside.panel-samping nav a:hover{transform:translateX(3px)}
aside.panel-samping nav a i{transition:color .2s}
aside.panel-samping nav a:hover i{color:var(--gold)}
aside.panel-samping .text-emerald-200{color:#b7dccf!important}
.menu-aktif{background:linear-gradient(90deg,rgba(233,196,106,.22),rgba(233,196,106,.06))!important;box-shadow:inset 3px 0 0 var(--gold);color:#fff!important;font-weight:700}
.menu-aktif i{color:var(--gold)!important}
.panel-atas{border-bottom:1px solid rgba(2,44,37,.06);box-shadow:0 6px 24px -14px rgba(2,44,37,.25)}
.panel-atas h2{font-family:'Playfair Display',Georgia,serif;font-weight:800;font-size:1.3rem;color:#022c25}
body.tema.panel main > .space-y-6 > .bg-white,body.tema.panel main > .bg-white{border-radius:var(--r-lg)}

/* ---------- Responsif mobile ---------- */
html,body.tema{overflow-x:clip;max-width:100%}
.grid > *{min-width:0}
@media (max-width:640px){
  .btn{white-space:normal;text-align:center}
  .judul-seksi{word-break:break-word}
  .page-header{padding-top:2.5rem!important;padding-bottom:4rem!important}
  .page-header h1{font-size:1.85rem!important;line-height:1.2}
  .menu-turun{max-width:94vw}
  .kartu-hidup:hover{transform:none}
}
/* Menu turun selalu di atas garis songket & konten; jembatan hover agar tidak tertutup saat kursor turun */
.menu-turun{z-index:80}
.kepala .songket-garis{position:relative;z-index:1}
.menu-turun a.butir small{white-space:normal}

/* ---------- Bagan organisasi ---------- */
.bagan{display:flex;flex-direction:column;gap:2.75rem}
.bagan-tingkat{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:1.25rem}
.bagan-tingkat + .bagan-tingkat::before{content:"";position:absolute;left:50%;top:-2.75rem;height:2.75rem;width:2px;background:linear-gradient(var(--gold),rgba(16,185,129,.6))}
.bagan-tingkat + .bagan-tingkat::after{content:"";position:absolute;left:12%;right:12%;top:-1px;height:2px;background:linear-gradient(90deg,transparent,rgba(16,185,129,.45),transparent)}
.bagan-kartu{position:relative;width:13.5rem;text-align:center;background:#fff;border:1px solid var(--line);border-radius:1.4rem;padding:1.5rem 1rem 1.25rem;box-shadow:var(--sh-1);transition:transform .35s var(--ease),box-shadow .35s}
.bagan-kartu:hover{transform:translateY(-6px);box-shadow:var(--sh-2)}
.bagan-kartu.utama{width:16rem;background:linear-gradient(180deg,#fffaf0,#fff);border-color:rgba(201,150,47,.35);box-shadow:0 20px 40px -18px rgba(201,150,47,.55)}
.bagan-kartu::before{content:"";position:absolute;left:50%;top:-1.25rem;height:1.25rem;width:2px;background:rgba(16,185,129,.45)}
.bagan-tingkat:first-child .bagan-kartu::before{display:none}
@media (max-width:640px){
  .bagan{gap:2rem}
  .bagan-kartu{width:calc(50% - .5rem);padding:1.1rem .6rem}
  .bagan-kartu.utama{width:80%}
  .bagan-tingkat{gap:1rem}
  .bagan-tingkat + .bagan-tingkat::before{top:-2rem;height:2rem}
}
/* .btn/.ikon memakai display sendiri; hormati utilitas tampil/sembunyi Tailwind */
.btn.hidden,.ikon.hidden{display:none}
@media (min-width:640px){.btn.sm\:inline-flex{display:inline-flex}.btn.sm\:hidden{display:none}}
@media (min-width:768px){.btn.md\:inline-flex{display:inline-flex}.btn.md\:hidden{display:none}}
@media (min-width:1024px){.btn.lg\:inline-flex{display:inline-flex}.btn.lg\:hidden{display:none}}

/* ---------- Sidebar admin (gaya portal SAGUSATAL) ---------- */
.sb-aside{isolation:isolate}
.sb-nav{scrollbar-width:thin;scrollbar-color:rgba(233,196,106,.3) transparent}
.sb-nav::-webkit-scrollbar{width:5px}.sb-nav::-webkit-scrollbar-thumb{background:rgba(233,196,106,.3);border:0}
.nav-group{margin:1.1rem .75rem .4rem;font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:rgba(233,196,106,.75)}
.nav-group:first-child{margin-top:.25rem}
.nav-link{display:flex;align-items:center;gap:.75rem;padding:.6rem .75rem;border-radius:.85rem;font-size:.875rem;font-weight:500;color:#cfe7de;transition:background .2s,color .2s,transform .2s}
.nav-link:hover{background:rgba(255,255,255,.07);color:#fff;transform:translateX(2px)}
.nav-link .nav-ikon{width:1.25rem;text-align:center;flex:none;color:#8fc9b4;transition:color .2s}
.nav-link:hover .nav-ikon{color:var(--gold)}
.nav-link.active{background:linear-gradient(90deg,rgba(233,196,106,.22),rgba(233,196,106,.05));color:#fff;font-weight:700;box-shadow:inset 3px 0 0 var(--gold)}
.nav-link.active .nav-ikon{color:var(--gold)}
.sb-lencana{border-radius:999px;background:var(--grad-gold);color:#022c25;font-size:10px;font-weight:800;line-height:1;padding:.25rem .45rem}
.sb-sub{margin:.15rem 0 .35rem 1.6rem;padding-left:.75rem;border-left:1px solid rgba(233,196,106,.25);display:flex;flex-direction:column;gap:.1rem}
.sub-link{display:block;padding:.45rem .7rem;border-radius:.7rem;font-size:.8rem;color:#b7dccf;transition:background .2s,color .2s}
.sub-link:hover{background:rgba(255,255,255,.06);color:#fff}
.sub-link.active{color:var(--gold);font-weight:700;background:rgba(233,196,106,.1)}
@media (min-width:1024px){
  .sb-ciut .sb-aside{width:5rem}
  .sb-ciut .sb-teks,.sb-ciut .nav-group,.sb-ciut .sb-lencana,.sb-ciut .sb-sub,.sb-ciut .sb-keluar{display:none!important}
  .sb-ciut .sb-kepala{justify-content:center;padding-left:.5rem;padding-right:.5rem}
  .sb-ciut .nav-link{justify-content:center;padding:.7rem}
  .sb-ciut .nav-link .nav-ikon{font-size:1.05rem}
  .sb-ciut .sb-situs,.sb-ciut .sb-profil a{justify-content:center}
  .sb-ciut .sb-nav .nav-link + .nav-link,.sb-ciut .sb-nav div + .nav-link{margin-top:.15rem}
}

/* ---------- Editor teks (Quill) ---------- */
.rich-editor{border:1px solid #dbe4e1;border-radius:.9rem;overflow:hidden;background:#fff;transition:border-color .2s,box-shadow .2s}
.rich-editor:focus-within{border-color:#10b981;box-shadow:0 0 0 4px rgba(16,185,129,.15)}
.rich-editor .ql-toolbar.ql-snow{position:sticky;top:4rem;z-index:5;border:0;border-bottom:1px solid #e5ece9;background:#f6faf8;padding:.5rem .6rem;font-family:inherit}
.rich-editor .ql-container.ql-snow{border:0;font-family:'Plus Jakarta Sans',ui-sans-serif,system-ui,sans-serif;font-size:15px}
.rich-editor .ql-editor{line-height:1.75;color:#1f2937;padding:1rem 1.15rem}
.rich-editor .ql-editor h2{font-size:1.45rem;font-weight:800;margin:.6em 0 .3em}
.rich-editor .ql-editor h3{font-size:1.2rem;font-weight:700;margin:.6em 0 .3em}
.rich-editor .ql-editor img{border-radius:.75rem;margin:.75rem 0;max-width:100%}
.rich-editor .ql-editor blockquote{border-left:4px solid #e9c46a;background:#fffbeb;padding:.5rem 1rem;border-radius:0 .5rem .5rem 0}
.rich-editor .ql-editor.ql-blank::before{color:#9ca3af;font-style:normal}
.rich-editor .ql-snow .ql-stroke{stroke:#334155}.rich-editor .ql-snow .ql-fill{fill:#334155}
.rich-editor .ql-snow button:hover .ql-stroke,.rich-editor .ql-snow .ql-active .ql-stroke{stroke:#047857}
.rich-editor .ql-snow button:hover .ql-fill,.rich-editor .ql-snow .ql-active .ql-fill{fill:#047857}
.rich-editor .ql-snow .ql-picker{color:#334155}
.editor-status{font-size:.75rem;color:#047857;font-weight:600;margin-top:.35rem;min-height:1rem}
.editor-status.galat{color:#e11d48}

/* ---------- Konten HTML hasil editor di halaman publik ---------- */
.konten-kaya{line-height:1.8;color:#374151}
.konten-kaya p{margin:0 0 .9em}
.konten-kaya h2{font-family:'Playfair Display',Georgia,serif;font-size:1.5rem;font-weight:800;color:#0f172a;margin:1.2em 0 .5em}
.konten-kaya h3{font-size:1.2rem;font-weight:700;color:#0f172a;margin:1em 0 .4em}
.konten-kaya ul,.konten-kaya ol{margin:0 0 1em 1.4em}.konten-kaya ul{list-style:disc}.konten-kaya ol{list-style:decimal}
.konten-kaya li{margin:.25em 0}
.konten-kaya a{color:#047857;text-decoration:underline;font-weight:600}
.konten-kaya blockquote{border-left:4px solid #e9c46a;background:#fffbeb;padding:.6rem 1rem;border-radius:0 .6rem .6rem 0;margin:1em 0;font-style:italic}
.konten-kaya img{border-radius:1rem;margin:1rem 0;max-width:100%;height:auto}
.konten-kaya .ql-align-center{text-align:center}.konten-kaya .ql-align-right{text-align:right}.konten-kaya .ql-align-justify{text-align:justify}
.konten-kaya > :last-child{margin-bottom:0}