.glass-nav{background:rgba(18,48,74,.92);backdrop-filter:blur(12px);box-shadow:0 6px 24px -6px rgba(0,0,0,.45)}
.hero-gradient{background:linear-gradient(135deg,#12304A 0%,#1a3c5a 50%,#263746 100%)}
.cream-gradient-text{background:linear-gradient(135deg,#FFF0C2 0%,#ffe699 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#F8F7F2}
::-webkit-scrollbar-thumb{background:#12304A;border-radius:4px}
.leaf-background{background-image:url('https://images.unsplash.com/photo-1518531933037-91b2f5f229cc?auto=format&fit=crop&w=1920&q=80');background-size:cover;background-position:center;background-attachment:fixed}
.leaf-overlay{background:rgba(18,48,74,.85);backdrop-filter:blur(8px)}

/* Footer dibuat lebih gelap + garis aksen agar tidak menyatu dengan navbar */
.site-footer{position:relative;background:linear-gradient(180deg,#0B1E30 0%,#07131F 100%)}
.site-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#FFF0C2 0%,#D92738 50%,#6B91A0 100%)}
/* Pola titik halus untuk hero Profil (memudar ke tepi) */
.hero-dots{background-image:radial-gradient(rgba(255,240,194,.16) 1px,transparent 1px);background-size:22px 22px;-webkit-mask-image:radial-gradient(ellipse at center,#000 25%,transparent 72%);mask-image:radial-gradient(ellipse at center,#000 25%,transparent 72%)}
/* Isi artikel dari WordPress di dalam modal */
.wp-content h2{font-size:1.35rem;font-weight:800;color:#12304A;margin-top:1.5rem}
.wp-content h3{font-size:1.15rem;font-weight:700;color:#12304A;margin-top:1.25rem}
.wp-content ul{list-style:disc;padding-left:1.25rem}.wp-content ol{list-style:decimal;padding-left:1.25rem}
.wp-content li{margin:.35rem 0}.wp-content a{color:#D92738;text-decoration:underline}
.wp-content img{max-width:100%;height:auto;border-radius:1rem}.wp-content figure{margin:1rem 0}
.wp-content figcaption{font-size:.75rem;color:#6B91A0;text-align:center;margin-top:.4rem}
.wp-content blockquote{border-left:4px solid #FFF0C2;padding-left:1rem;font-style:italic}
.wp-content iframe{max-width:100%}

/* =====================================================================
   RESPONSIF: cegah teks/elemen melebihi lebar layar di HP
   ===================================================================== */
body{overflow-wrap:break-word;overflow-x:clip}
img,video,svg,canvas{max-width:100%}
/* isi artikel dari editor WordPress (link/email panjang, tabel, embed YouTube) */
.wp-content{overflow-wrap:anywhere}
.wp-content table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse}
.wp-content td,.wp-content th{border:1px solid rgba(107,145,160,.3);padding:.4rem .6rem}
.wp-content pre{max-width:100%;overflow-x:auto;white-space:pre-wrap}
.wp-content video,.wp-content embed,.wp-content object{max-width:100%;height:auto}
.wp-content iframe{width:100%}
.wp-content .wp-block-embed iframe,.wp-content iframe[src*="youtube"]{aspect-ratio:16/9;height:auto}
.wp-content .wp-block-columns{display:flex;flex-wrap:wrap;gap:1rem}
.wp-content .wp-block-column{flex:1 1 240px;min-width:0}
.wp-content .wp-block-image img{display:block;margin:0 auto}

/* =====================================================================
   TEMA GELAP (aktif saat <html class="dark">, diatur tombol di navbar)
   ===================================================================== */
html.dark{color-scheme:dark}
html.dark body{background-color:#0B1826;color:#C3D0D8}
/* permukaan */
html.dark .bg-\[\#F8F7F2\]{background-color:#0B1826}
html.dark .bg-white{background-color:#10263A}
html.dark .bg-white\/90{background-color:rgba(16,38,58,.92)}
html.dark .hover\:bg-\[\#F8F7F2\]:hover,html.dark .hover\:bg-white:hover{background-color:#173450}
html.dark .bg-\[\#FFF0C2\]\/60,html.dark .bg-\[\#FFF0C2\]\/50{background-color:rgba(255,240,194,.08)}
html.dark .border-\[\#FFF0C2\]{border-color:rgba(255,240,194,.22)}
html.dark .border-\[\#F8F7F2\]{border-color:rgba(107,145,160,.2)}
html.dark .border-\[\#6B91A0\]\/20,html.dark .border-\[\#6B91A0\]\/30{border-color:rgba(107,145,160,.28)}
html.dark .bg-\[\#12304A\]:not(header *):not(footer *){box-shadow:inset 0 0 0 1px rgba(107,145,160,.25)}
/* teks (kecuali di atas latar krem, tetap navy agar terbaca) */
html.dark .text-\[\#12304A\]:not(.bg-\[\#FFF0C2\]):not(.bg-\[\#FFF0C2\] *){color:#EEF3F6}
html.dark .text-\[\#263746\]{color:#C3D0D8}
html.dark .text-\[\#6B91A0\]{color:#8FB0BD}
html.dark .text-\[\#D92738\]{color:#F0596A}
html.dark .group:hover .group-hover\:text-\[\#D92738\],html.dark .hover\:text-\[\#D92738\]:hover{color:#F0596A}
html.dark .text-\[\#F8F7F2\]{color:#0B1826} /* lengkung hero Profil mengikuti warna halaman */
/* form */
html.dark input,html.dark textarea,html.dark select{background-color:#0E2134;color:#EEF3F6}
html.dark ::placeholder{color:#6F8895}
/* isi artikel WordPress */
html.dark .wp-content h2,html.dark .wp-content h3{color:#EEF3F6}
html.dark .wp-content a{color:#F0596A}
/* scrollbar */
html.dark ::-webkit-scrollbar-track{background:#0B1826}
html.dark ::-webkit-scrollbar-thumb{background:#2A4A66}

/* Tombol tema */
.theme-toggle{width:2.5rem;height:2.5rem;border-radius:9999px;display:inline-flex;align-items:center;justify-content:center;flex:none;
  color:#FFF0C2;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);transition:background .2s,transform .2s}
.theme-toggle:hover{background:rgba(255,255,255,.18)}
.theme-toggle:active{transform:scale(.92)}
.theme-toggle:focus-visible{outline:2px solid #FFF0C2;outline-offset:2px}
.theme-toggle .icon-sun{display:none}
html.dark .theme-toggle .icon-sun{display:inline}
html.dark .theme-toggle .icon-moon{display:none}

/* ===== Navbar mobile yang rapi ===== */
/* Tombol tema di bar atas hanya tampil di layar >= 640px; di HP pindah ke dalam menu */
@media (max-width:639.98px){.theme-toggle-header{display:none}}
.menu-btn{width:2.5rem;height:2.5rem;border-radius:.75rem;display:inline-flex;align-items:center;justify-content:center;flex:none;
  font-size:1.2rem;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);transition:background .2s,transform .2s}
.menu-btn:hover{background:rgba(255,255,255,.18)}
.menu-btn:active{transform:scale(.92)}
.menu-btn:focus-visible{outline:2px solid #FFF0C2;outline-offset:2px}
.mobile-panel{max-height:calc(100vh - 5rem);overflow-y:auto;overscroll-behavior:contain}
.mobile-panel:not(.hidden){animation:menuIn .22s ease-out}
@keyframes menuIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.mobile-panel a{display:block;padding:.85rem .5rem;border-bottom:1px solid rgba(255,255,255,.08);transition:color .2s,padding-left .2s}
.mobile-panel a:hover{color:#FFF0C2;padding-left:.9rem}
.mobile-panel a[aria-current="page"],.mobile-panel a.text-\[\#FFF0C2\]{border-left:3px solid #FFF0C2;padding-left:.9rem}
.mobile-theme-row{display:flex;align-items:center;justify-content:space-between;padding:.9rem .5rem .6rem;color:#cbd5e1;font-weight:500}
.mobile-theme-label i{color:#FFF0C2;margin-right:.5rem}
.theme-switch{position:relative;width:3.25rem;height:1.85rem;border-radius:9999px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.25);transition:background .25s;flex:none}
.theme-switch-knob{position:absolute;top:2px;left:2px;width:1.45rem;height:1.45rem;border-radius:9999px;background:#FFF0C2;color:#12304A;font-size:.75rem;display:flex;align-items:center;justify-content:center;transition:transform .25s}
.theme-switch .icon-sun{display:none}
html.dark .theme-switch .icon-sun{display:inline}
html.dark .theme-switch .icon-moon{display:none}
html.dark .theme-switch{background:#D92738}
html.dark .theme-switch-knob{transform:translateX(1.4rem)}
.theme-switch:focus-visible{outline:2px solid #FFF0C2;outline-offset:2px}