/* ============================================================
   MODE GELAP — SMPIT Tahfizh Al-Fatih
   Menimpa warna, bayangan, dan pendar dekoratif saat
   <html class="dark">. Tata letak, ukuran, dan jarak tidak
   disentuh. Dimuat setelah tailwind-site.css agar menang cascade.
   ============================================================ */

/* ---------- Dasar halaman ---------- */
html.dark{color-scheme:dark;scrollbar-color:#1c4a39 #06140f;scrollbar-width:thin}
html.dark body{
  background-color:#020d09;
  background-image:
    radial-gradient(1200px 620px at 88% -12%, rgba(201,162,39,.17) 0%, rgba(201,162,39,0) 62%),
    radial-gradient(980px 680px at 2% 16%, rgba(16,185,129,.14) 0%, rgba(16,185,129,0) 60%),
    radial-gradient(1200px 760px at 50% 118%, rgba(201,162,39,.08) 0%, rgba(201,162,39,0) 66%),
    repeating-linear-gradient(0deg, rgba(110,231,183,.030) 0 1px, rgba(110,231,183,0) 1px 64px),
    repeating-linear-gradient(90deg, rgba(110,231,183,.030) 0 1px, rgba(110,231,183,0) 1px 64px),
    linear-gradient(168deg,#020d09 0%,#062017 46%,#03110c 100%);
  color:#e8f4ee;
}
/* Pola geometris latar sedikit lebih hadir agar tidak monoton */
html.dark body > .pattern-islamic{opacity:.075}
html.dark ::selection{background:rgba(201,162,39,.38);color:#fff}
html.dark ::-webkit-scrollbar{width:10px;height:10px}
html.dark ::-webkit-scrollbar-track{background:#06140f}
html.dark ::-webkit-scrollbar-thumb{background:#1c4a39;border-radius:99px;border:2px solid #06140f}
html.dark ::-webkit-scrollbar-thumb:hover{background:#2a6a51}

/* ---------- Preloader ---------- */
html.dark #preloader{background:#04120d}
html.dark #preloader h1{color:#f0f8f3}
html.dark #preloader p{color:#b9a86a}

/* ---------- Navbar & menu ---------- */
html.dark #navbar{
  background-color:rgba(5,18,13,.86)!important;
  background-image:
    linear-gradient(90deg,rgba(201,162,39,0) 0%,rgba(231,200,115,.55) 50%,rgba(201,162,39,0) 100%),
    linear-gradient(180deg,rgba(14,44,32,.50) 0%,rgba(4,16,11,0) 100%);
  background-size:100% 1px,100% 100%;
  background-position:bottom left,top left;
  background-repeat:no-repeat;
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  backdrop-filter:blur(22px) saturate(150%);
  border-bottom-color:rgba(231,200,115,.20)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 14px 40px -24px rgba(0,0,0,.95);
}
html.dark #navbar.scrolled{
  background-color:rgba(3,12,9,.68)!important;
  background-image:
    linear-gradient(90deg,rgba(201,162,39,0) 0%,rgba(231,200,115,.75) 50%,rgba(201,162,39,0) 100%),
    linear-gradient(180deg,rgba(16,52,38,.50) 0%,rgba(3,12,9,0) 100%);
  border-color:rgba(231,200,115,.26)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 50px -22px rgba(0,0,0,.95),0 0 40px -28px rgba(231,200,115,.8);
}
html.dark #navbar a > img{filter:drop-shadow(0 0 1px rgba(255,255,255,.45)) drop-shadow(0 0 10px rgba(201,162,39,.30))}
html.dark .nav-link{color:#dbeadf}
html.dark .nav-link:hover{color:#E7C873;text-shadow:0 0 16px rgba(231,200,115,.40)}
html.dark .nav-underline{box-shadow:0 0 14px rgba(231,200,115,.55)}
/* Panel dropdown: kaca gelap dengan garis emas tipis */
html.dark #navbar .group > div.absolute{
  background-image:linear-gradient(180deg,rgba(231,200,115,.07) 0%,rgba(231,200,115,0) 60%);
  border-color:rgba(231,200,115,.16);
  box-shadow:0 60px 100px -50px rgba(0,0,0,.95),0 0 0 1px rgba(231,200,115,.10),0 0 46px -26px rgba(201,162,39,.65);
}
html.dark .nav-ghost-btn{color:#d7e7dc;border-color:rgba(231,200,115,.42)}
html.dark .nav-ghost-btn:hover{
  background:linear-gradient(90deg,#C9A227,#E7C873);
  color:#022c22;
  border-color:transparent;
  box-shadow:0 15px 40px -20px rgba(201,162,39,.85);
}
html.dark .nav-dropdown-item{color:#cfe2d7}
html.dark .nav-dropdown-item:hover{
  color:#F5E3A3;
  background:linear-gradient(90deg,rgba(201,162,39,.16) 0%,transparent 70%);
}
html.dark .text-emerald-600\/70{color:rgba(231,200,115,.75)}

/* ---------- Permukaan / kartu ---------- */
html.dark .bg-white{
  background-color:#0a2118;
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.055) 0%,rgba(255,255,255,0) 30%),
    linear-gradient(158deg,#0d2a20 0%,#091c14 58%,#081a11 100%);
}
html.dark .bg-white\/90{background-color:rgba(5,18,13,.86)}
html.dark .bg-white\/95{background-color:rgba(8,26,19,.96)}
html.dark .bg-slate-50{
  background-color:#0b1d16;
  background-image:linear-gradient(160deg,#0d241b 0%,#081912 100%);
}
html.dark .bg-slate-100{background-color:#0f261d}
html.dark .bg-slate-200{background-color:rgba(255,255,255,.12)}
html.dark .bg-emerald-50{
  background-color:#0c231a;
  background-image:linear-gradient(160deg,#0e2a1f 0%,#091d15 100%);
}
html.dark .bg-emerald-50\/60{background-color:rgba(12,44,32,.60)}
html.dark .bg-emerald-50\/90{background-color:rgba(10,34,25,.90)}
html.dark .bg-emerald-100{background-color:#113026}
html.dark .bg-emerald-100\/40{background-color:rgba(17,48,38,.40)}
html.dark .bg-emerald-200\/20{background-color:rgba(16,185,129,.10)}
html.dark .bg-emerald-400\/10{background-color:rgba(52,211,153,.10)}
html.dark .bg-emerald2-900{
  background-color:#0a2c22;
  background-image:linear-gradient(150deg,#0e3429 0%,#082019 100%);
}
html.dark .bg-emerald2-950{
  background-color:#03120d;
  background-image:
    radial-gradient(1100px 520px at 50% -25%, rgba(201,162,39,.14) 0%, rgba(201,162,39,0) 62%),
    linear-gradient(160deg,#062018 0%,#03110c 100%);
}
/* Hero foto: kabut emas di kanan atas, emerald pekat di kiri */
html.dark .hero-overlay{
  background:
    radial-gradient(1000px 520px at 84% 6%, rgba(201,162,39,.20) 0%, rgba(201,162,39,0) 62%),
    radial-gradient(900px 620px at 8% 104%, rgba(16,185,129,.16) 0%, rgba(16,185,129,0) 60%),
    linear-gradient(135deg,rgba(2,18,12,.96) 0%,rgba(4,52,38,.78) 48%,rgba(2,14,10,.62) 100%);
}
html.dark .bg-amber-50{background-color:#1b1607}
html.dark .bg-yellow-100{background-color:#2a2210}
html.dark .bg-red-50{background-color:#2a1214}
html.dark .bg-red-100{background-color:#38161a}

/* hover state (dulu terang, kini tetap gelap) */
html.dark .hover\:bg-emerald-50:hover{background-color:#103027}
html.dark .hover\:bg-emerald-50\/60:hover{background-color:rgba(16,48,39,.60)}
html.dark .hover\:bg-emerald-100:hover{background-color:#14382c}
html.dark .hover\:bg-emerald2-900:hover{background-color:#0d3328}

/* Kartu terasa lebih hidup saat disentuh (warna saja, ukuran tetap) */
html.dark .card-hover:hover{
  border-color:rgba(231,200,115,.38);
  box-shadow:0 32px 64px -24px rgba(0,0,0,.85),
             0 0 46px -18px rgba(231,200,115,.48);
}
/* Foto ikut "tunduk" ke tema gelap, tanpa mengubah tata letak */
html.dark .img-zoom img{filter:brightness(.93) saturate(1.06) contrast(1.03)}
/* Garis aksen emas diberi pendar */
html.dark .gold-underline::after{box-shadow:0 0 16px rgba(201,162,39,.55)}

/* ---------- Border ---------- */
html.dark .border-emerald-100{border-color:rgba(110,231,183,.16)}
html.dark .border-emerald-100\/70{border-color:rgba(110,231,183,.12)}
html.dark .border-emerald-100\/80{border-color:rgba(110,231,183,.14)}
html.dark .border-emerald-200{border-color:rgba(110,231,183,.26)}
html.dark .border-emerald2-900{border-color:rgba(201,162,39,.32)}
html.dark .border-slate-100{border-color:rgba(255,255,255,.08)}
html.dark .border-slate-200{border-color:rgba(255,255,255,.12)}
html.dark .border-red-200{border-color:rgba(248,113,113,.28)}
html.dark .border-amber-200{border-color:rgba(251,191,36,.30)}

/* ---------- Teks ---------- */
html.dark .text-slate-900{color:#f2fbf6}
html.dark .text-slate-800{color:#e8f4ee}
html.dark .text-slate-700{color:#d2e6db}
html.dark .text-slate-600{color:#b9d1c6}
html.dark .text-slate-500{color:#93aea2}
html.dark .text-slate-400{color:#7d998c}
html.dark .text-emerald2-950{color:#eefaf3}
html.dark .text-emerald2-900{color:#e4f5ec}
html.dark .text-emerald-800{color:#9fe9c6}
html.dark .text-emerald-700{color:#8fe3be}
html.dark .text-emerald-900{color:#8fe3be}
html.dark .text-gold-dark{color:#E7C873}
html.dark .text-amber-800{color:#F3D9A4}
html.dark .text-yellow-800{color:#F7E3A1}
html.dark .text-red-500{color:#FCA5A5}
html.dark .text-red-600{color:#FCA5A5}
html.dark .text-red-700{color:#FCA5A5}
html.dark .text-red-800{color:#FECACA}
html.dark .text-green-600{color:#6EE7A8}
html.dark .shine-text{
  background:linear-gradient(90deg,#F3D98F 0%,#E7C873 45%,#B9F1D4 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}

/* Judul section: gradasi statis dengan warna hijau dominan */
html.dark main h1:not(header h1):not(.text-white):not(.bg-clip-text),
html.dark main h2:not(header h2):not(.text-white):not(.bg-clip-text){
  background-image:linear-gradient(100deg,#B9F1D4 0%,#6EE7B7 58%,#E7C873 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  animation:none;
  filter:none;
}
@keyframes darkHeadingShine{
  from{background-position:0% center}
  to{background-position:100% center}
}

/* Kata beraksen emas di judul (mis. "Al-Fatih") dibuat lebih bercahaya */
html.dark .shine-gold{
  background-image:linear-gradient(90deg,#F2D582 0%,#FFF3C4 45%,#E7C873 100%);
  background-size:200% auto;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
  animation:darkHeadingShine 14s ease-in-out infinite alternate;
}

/* ---------- Permukaan emas tetap memakai teks gelap ---------- */
html.dark .btn-gold,
html.dark .nav-ppdb-btn{color:#FFFFFF}
html.dark .btn-gold:focus-visible,
html.dark .nav-ppdb-btn:focus-visible{outline-color:#FFB27A}
html.dark [class~="bg-gold"],
html.dark [class~="from-gold"]{color:#022c22}
html.dark [class~="bg-gold"] [class~="text-emerald2-950"],
html.dark [class~="from-gold"] [class~="text-emerald2-950"],
html.dark [class~="from-gold"] [class~="text-emerald2-900"],
html.dark [class~="from-gold"] [class~="text-slate-500"],
html.dark [class~="from-gold"] [class~="text-slate-600"],
html.dark [class~="from-gold"] [class~="text-slate-700"],
html.dark [class~="from-gold"] [class~="text-slate-800"]{color:#022c22}

/* ---------- Gradien section & pendar dekoratif ---------- */
html.dark .from-emerald-50\/80.via-white{
  background-image:
    radial-gradient(900px 420px at 100% 0%, rgba(201,162,39,.10) 0%, rgba(201,162,39,0) 60%),
    linear-gradient(135deg,#071c15 0%,#0a2419 45%,#0f2418 100%);
}
/* bulatan glow pale-emerald → pendar emas lembut */
html.dark [class~="from-emerald-100/30"]{
  --tw-gradient-from:rgba(201,162,39,.14) var(--tw-gradient-from-position);
  --tw-gradient-to:rgba(201,162,39,0) var(--tw-gradient-to-position);
}
html.dark [class~="from-emerald-100/40"]{
  --tw-gradient-from:rgba(201,162,39,.18) var(--tw-gradient-from-position);
  --tw-gradient-to:rgba(201,162,39,0) var(--tw-gradient-to-position);
}
html.dark [class~="from-emerald-400/30"]{
  --tw-gradient-from:rgba(52,211,153,.22) var(--tw-gradient-from-position);
  --tw-gradient-to:rgba(52,211,153,0) var(--tw-gradient-to-position);
}

/* ---------- Form ---------- */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
html.dark select,
html.dark textarea{
  background-color:#0b241b;
  color:#e8f4ee;
  border-color:rgba(110,231,183,.22);
}
html.dark input::placeholder,
html.dark textarea::placeholder{color:#7f9a8d}
html.dark select option{background-color:#0b241b;color:#e8f4ee}
html.dark input[type="checkbox"],
html.dark input[type="radio"]{accent-color:#C9A227}

/* ---------- Tombol mode gelap ---------- */
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;flex:0 0 auto;
  border-radius:999px;
  border:1.5px solid rgba(6,78,59,.25);
  background:transparent;
  color:#064e3b;
  cursor:pointer;
  transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease;
}
.theme-toggle:hover{background:rgba(6,78,59,.08);transform:translateY(-1px)}
.theme-toggle:focus-visible{outline:2px solid #C9A227;outline-offset:2px}
.theme-toggle i{font-size:13px;line-height:1}
/* ---------- Detail tambahan mode gelap ---------- */

/* Cincin fokus emas agar navigasi keyboard tetap jelas di latar gelap */
html.dark :focus-visible{outline-color:#E7C873}
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):focus,
html.dark select:focus,
html.dark textarea:focus{
  border-color:rgba(231,200,115,.55)!important;
  box-shadow:0 0 0 3px rgba(201,162,39,.16);
}

/* Menu mobile: panel kaca gelap dengan garis emas */
html.dark #mobileMenuBackdrop{background-color:rgba(0,0,0,.62)!important}
html.dark #mobileMenu{
  background-color:#061a13!important;
  background-image:linear-gradient(180deg,#0a2419 0%,#04120d 100%);
  border-top-color:rgba(231,200,115,.22)!important;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.90),0 0 0 1px rgba(231,200,115,.08);
}

/* Footer: emerald lebih pekat + pendar emas */
html.dark .site-footer{
  background:linear-gradient(155deg,#021610 0%,#04322a 45%,#021610 100%);
  border-top-color:rgba(231,200,115,.45);
}
html.dark .site-footer__ornament::after{box-shadow:0 0 0 5px #021610,0 0 22px rgba(231,200,115,.95)}

/* CTA oranye: pendar hangat agar tetap menonjol di latar gelap */
html.dark .btn-gold,
html.dark .nav-ppdb-btn{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 12px 30px -14px rgba(201,87,10,.95);
}
html.dark .btn-gold:hover,
html.dark .nav-ppdb-btn:hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 18px 40px -16px rgba(201,87,10,1),0 0 30px -12px rgba(255,138,76,.65);
}

/* Tombol tema: pendar emas + ikon berputar saat ditekan */
html.dark .theme-toggle{
  border-color:rgba(231,200,115,.40);
  color:#F3D98F;
  background:radial-gradient(circle at 32% 26%,rgba(231,200,115,.20),rgba(231,200,115,0) 72%);
  box-shadow:0 0 0 4px rgba(231,200,115,.06),0 0 20px -8px rgba(231,200,115,.95);
}
html.dark .theme-toggle:hover{
  border-color:#E7C873;
  background:radial-gradient(circle at 32% 26%,rgba(231,200,115,.30),rgba(231,200,115,.06) 72%);
  box-shadow:0 0 0 4px rgba(231,200,115,.10),0 0 28px -6px rgba(231,200,115,1);
}
.theme-toggle i{transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .3s ease}
.theme-toggle i.is-flipping{animation:themeIconFlip .55s cubic-bezier(.4,0,.2,1)}
@keyframes themeIconFlip{
  0%{transform:rotate(0) scale(1);opacity:1}
  45%{transform:rotate(150deg) scale(.35);opacity:.15}
  100%{transform:rotate(360deg) scale(1);opacity:1}
}

/* Perpindahan warna yang halus saat tema ditukar (kelas dipasang sesaat oleh layout) */
@media (prefers-reduced-motion: no-preference){
  html.theme-switching,
  html.theme-switching body,
  html.theme-switching #navbar,
  html.theme-switching #mobileMenu,
  html.theme-switching main,
  html.theme-switching section,
  html.theme-switching footer,
  html.theme-switching .bg-white,
  html.theme-switching .bg-slate-50,
  html.theme-switching .bg-emerald-50,
  html.theme-switching .bg-emerald2-950,
  html.theme-switching .card-hover,
  html.theme-switching input,
  html.theme-switching select,
  html.theme-switching textarea{
    transition:background-color .5s ease,border-color .5s ease,color .5s ease,box-shadow .5s ease,fill .5s ease,stroke .5s ease!important;
  }
}

/* Palet gelap yang lebih tenang: hijau arang, teks hangat, dan emas redup */
html.dark body{
  background-image:
    radial-gradient(900px 520px at 90% -10%,rgba(190,166,105,.045),transparent 65%),
    linear-gradient(165deg,#111713 0%,#151d18 52%,#111713 100%);
}
html.dark body > .pattern-islamic{opacity:.012}

html.dark .bg-white{
  background-color:#1a231e;
  background-image:linear-gradient(160deg,#1d2721 0%,#18211c 100%);
}
html.dark .bg-slate-50{
  background-color:#151d18;
  background-image:linear-gradient(160deg,#19221c 0%,#141b17 100%);
}
html.dark .bg-slate-100{background-color:#202a24}
html.dark .bg-emerald-50{
  background-color:#19231d;
  background-image:linear-gradient(160deg,#1c2821 0%,#17211b 100%);
}
html.dark .bg-emerald2-950{
  background-color:#111a15;
  background-image:linear-gradient(160deg,#17211b 0%,#111914 100%);
}
html.dark .text-slate-500{color:#aab4ac}
html.dark .text-slate-400{color:#929e95}
html.dark .border-slate-100{border-color:rgba(223,231,224,.08)}
html.dark .border-slate-200{border-color:rgba(223,231,224,.12)}
html.dark .border-emerald-100,
html.dark .border-emerald-100\/70,
html.dark .border-emerald-100\/80{border-color:rgba(196,207,197,.12)}

html.dark main h1:not(header h1):not(.text-white):not(.bg-clip-text),
html.dark main h2:not(header h2):not(.text-white):not(.bg-clip-text){
  background-image:linear-gradient(100deg,#B9F1D4 0%,#6EE7B7 58%,#E7C873 100%);
  color:transparent;
  -webkit-text-fill-color:transparent;
  animation:none;
  filter:none;
}
html.dark .shine-gold{
  background:none;
  color:#cbb879!important;
  -webkit-text-fill-color:#cbb879!important;
  animation:none;
}

html.dark .card-hover:hover{
  border-color:rgba(203,184,121,.24);
  box-shadow:0 12px 28px -24px rgba(0,0,0,.75);
}
html.dark .img-zoom img{filter:brightness(.86) saturate(.88)}
html.dark .gold-underline::after{box-shadow:none;background-color:#bca968}

html.dark #navbar{
  background-color:rgba(17,23,19,.94)!important;
  background-image:linear-gradient(180deg,rgba(255,255,255,.025),transparent)!important;
  border-color:rgba(196,207,197,.12)!important;
  box-shadow:0 8px 24px -20px rgba(0,0,0,.8);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
}
html.dark #navbar .group > div.absolute{
  background-color:#1a231e;
  background-image:none;
  border-color:rgba(196,207,197,.14);
  box-shadow:0 16px 32px -20px rgba(0,0,0,.8);
}
html.dark .nav-link:hover,
html.dark .nav-dropdown-item:hover{text-shadow:none}
html.dark .nav-dropdown-item:hover{background:rgba(203,184,121,.08)}

html.dark .site-footer{
  background:linear-gradient(155deg,#111914 0%,#18211c 50%,#111914 100%);
  border-top-color:rgba(196,207,197,.14);
}
html.dark .site-footer__deco::before{opacity:.018}
html.dark .site-footer__deco::after{opacity:.18}
html.dark .site-footer__ornament{opacity:.55}
html.dark .site-footer__ornament::after{
  box-shadow:0 0 0 4px #111914;
}

html.dark .btn-gold,
html.dark .nav-ppdb-btn,
html.dark .btn-gold:hover,
html.dark .nav-ppdb-btn:hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 8px 20px -16px rgba(0,0,0,.8);
}
html.dark .theme-toggle{
  border-color:rgba(203,184,121,.28);
  color:#d5c48f;
  background:rgba(203,184,121,.06);
  box-shadow:none;
}
html.dark .theme-toggle:hover{
  border-color:rgba(203,184,121,.55);
  background:rgba(203,184,121,.12);
  box-shadow:none;
}
html.dark .absolute.pattern-islamic{opacity:.025}
html.dark .hero-overlay{
  background:
    radial-gradient(900px 520px at 85% 4%,rgba(190,166,105,.07),transparent 64%),
    linear-gradient(135deg,rgba(13,18,15,.88) 0%,rgba(17,26,21,.76) 52%,rgba(11,15,12,.78) 100%);
}
html.dark .btn-gold,
html.dark .nav-ppdb-btn{
  background-color:#806638;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 18px -16px rgba(0,0,0,.8);
}
html.dark .btn-gold:hover,
html.dark .nav-ppdb-btn:hover{
  background-color:#705a32;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 22px -18px rgba(0,0,0,.8);
}
html.dark .btn-gold:active,
html.dark .nav-ppdb-btn:active{background-color:#614d2c}
html.dark .btn-gold::before,
html.dark .nav-ppdb-btn::before{display:none}

@media (prefers-reduced-motion: reduce){
  html.dark *,
  html.dark *::before,
  html.dark *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
  }
}