@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ==========================================================================
   GKI Alfa Omega Bhayangkara — Tema Modern Vibrant Sacred Elegance
   Palet: Tangerine Wave (Dinamis, Ramah & Hidup), Lime Spark, Aqua Mint,
          Pink Fuchsia, Royal Violet, Pure White Glass & Deep Slate Ink
   Layout: Presisi Proporsional, Ultra-Tajam, 60fps Smooth, Universal
   ========================================================================== */

:root {
  /* Palet Modern Ciri Khas BNI (Bank Negara Indonesia) & Rohani Gerejawi */
  --bni-teal-deep: #002B2A;
  --bni-teal-dark: #003837;
  --bni-teal: #005E5D;
  --bni-teal-mid: #007E7D;
  --bni-teal-light: #008B8B;
  --bni-teal-soft: #E6F4F4;
  --bni-teal-gradasi: linear-gradient(135deg, #002B2A 0%, #003837 35%, #005E5D 70%, #007E7D 100%);
  --bni-teal-glow: 0 8px 24px -4px rgba(0, 94, 93, 0.40);

  --bni-cyan: #00A39D;
  --bni-cyan-light: #38BDF8;
  --bni-cyan-soft: #ECFDF5;
  --bni-cyan-gradasi: linear-gradient(135deg, #005E5D 0%, #00A39D 50%, #06D6A0 100%);

  --bni-orange: #F37021;
  --bni-orange-dark: #D9531E;
  --bni-orange-light: #FF8533;
  --bni-orange-soft: #FFF7ED;
  --bni-orange-gradasi: linear-gradient(135deg, #F37021 0%, #FF8533 100%);
  --bni-orange-glow: 0 8px 24px -4px rgba(243, 112, 33, 0.42);

  --gold-start: #D4AF37;
  --gold-mid: #F3E5AB;
  --gold-end: #AA771C;
  --gold-gradasi: linear-gradient(135deg, #D4AF37 0%, #F3E5AB 50%, #AA771C 100%);
  --gold-text: #AA771C;
  --gold-border: #D4AF37;

  --navy-start: #002B2A;
  --navy-mid: #003837;
  --navy-end: #005E5D;
  --navy-gradasi: linear-gradient(135deg, #002B2A 0%, #003837 40%, #005E5D 100%);
  --navy-dark: #002B2A;
  --navy: #003837;
  --navy-lembut: #004D4C;
  --navy-terang: #005E5D;
  --navy-permukaan: #002B2A;

  --oranye: #F37021;
  --oranye-terang: #FF8533;
  --oranye-tua: #D9531E;
  --oranye-lembut: #FFF7ED;
  --oranye-gradasi: linear-gradient(135deg, #F37021 0%, #FF8533 100%);
  --oranye-glow: 0 8px 24px -4px rgba(243, 112, 33, 0.40);

  --aksen-lime: #00A39D;
  --aksen-lime-terang: #06D6A0;
  --aksen-lime-lembut: #E6FBF5;
  --aksen-aqua: #0EA5E9;
  --aksen-aqua-terang: #38BDF8;
  --aksen-aqua-lembut: #F0F9FF;
  --aksen-pink: #F43F5E;
  --aksen-pink-terang: #FB7185;
  --aksen-pink-lembut: #FFF1F2;
  --aksen-violet: #6366F1;
  --aksen-violet-terang: #818CF8;
  --aksen-violet-lembut: #EEF2FF;

  --hijau: #005E5D;
  --hijau-tua: #003837;
  --hijau-sedang: #007E7D;
  --hijau-lembut: #E6F4F4;
  --hijau-gradasi: linear-gradient(135deg, #005E5D 0%, #008B8B 100%);
  --hijau-gelap: #002B2A;

  --emas: #D4AF37;
  --emas-terang: #F5D77F;
  --emas-tua: #AA771C;
  --emas-lembut: #FFFDF0;
  --emas-gradasi: linear-gradient(135deg, #D4AF37 0%, #F3E5AB 50%, #AA771C 100%);
  --emas-glow: 0 8px 24px -4px rgba(212, 175, 55, 0.35);

  --tinta: #0F172A;
  --teks: #1E293B;
  --muted: #64748B;
  --muted-terang: #94A3B8;

  /* Mode Terang: Warna-Warni Estetik Tanpa Putih Monoton */
  --latar-dasar: #F1F5FB;
  --krem: #F5F3FF;
  --putih: #FAF9FE;
  --garis: #E2E8F0;
  --garis-halus: #EDF2F7;

  --merah: #EF4444;
  --merah-lembut: #FEF2F2;
  --biru: #005E5D;
  --biru-lembut: #E6F4F4;

  --radius: 20px;
  --radius-kecil: 14px;
  --radius-besar: 28px;
  --radius-bulat: 9999px;

  --bayang-kecil: 0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 2px 0 rgba(0, 0, 0, 0.04);
  --bayang: 0 4px 16px -2px rgba(0, 56, 55, 0.08), 0 2px 6px -1px rgba(0, 56, 55, 0.04);
  --bayang-besar: 0 12px 32px -4px rgba(0, 56, 55, 0.14), 0 4px 12px -2px rgba(0, 56, 55, 0.08);
  --bayang-hover: 0 16px 36px -6px rgba(0, 56, 55, 0.18), 0 6px 16px -2px rgba(0, 56, 55, 0.10);
}

/* ==========================================================================
   TEMA GELAP (DARK MODE) — Midnight Slate & Obsidian Elegan (Tanpa Warna Hijau)
   ========================================================================== */
[data-tema="gelap"] {
  --latar-dasar: #0B0F19;
  --krem: #111827;
  --putih: #1A2234;
  --garis: rgba(255, 255, 255, 0.10);
  --garis-halus: rgba(255, 255, 255, 0.06);

  --tinta: #F8FAFC;
  --teks: #E2E8F0;
  --muted: #94A3B8;
  --muted-terang: #64748B;

  --bni-teal-deep: #0B0F19;
  --bni-teal-dark: #0F172A;
  --bni-teal: #3B82F6;
  --bni-teal-mid: #2563EB;
  --bni-teal-light: #60A5FA;
  --bni-teal-soft: rgba(59, 130, 246, 0.18);
  --bni-teal-gradasi: linear-gradient(135deg, #1E40AF 0%, #3B82F6 100%);
  --bni-teal-glow: 0 8px 24px -4px rgba(59, 130, 246, 0.40);

  --bni-cyan: #38BDF8;
  --bni-cyan-light: #7DD3FC;
  --bni-cyan-soft: rgba(56, 189, 248, 0.15);
  --bni-cyan-gradasi: linear-gradient(135deg, #0284C7 0%, #38BDF8 100%);

  --bni-orange: #F37021;
  --bni-orange-dark: #D9531E;
  --bni-orange-light: #FF8533;
  --bni-orange-soft: rgba(243, 112, 33, 0.18);
  --bni-orange-gradasi: linear-gradient(135deg, #F37021 0%, #FF8533 100%);
  --bni-orange-glow: 0 8px 24px -4px rgba(243, 112, 33, 0.42);

  --hijau: #3B82F6;
  --hijau-tua: #2563EB;
  --hijau-sedang: #60A5FA;
  --hijau-lembut: rgba(59, 130, 246, 0.18);
  --hijau-gradasi: linear-gradient(135deg, #2563EB 0%, #3B82F6 50%, #60A5FA 100%);
  --hijau-gelap: #070B14;

  --emas: #D4AF37;
  --emas-terang: #F5D77F;
  --emas-tua: #F5D77F;
  --emas-lembut: rgba(212, 175, 55, 0.15);
  --emas-gradasi: linear-gradient(135deg, #D4AF37 0%, #F5D77F 50%, #AA771C 100%);
  --emas-text: #F5D77F;
  --gold-text: #F5D77F;
  --gold-border: rgba(212, 175, 55, 0.5);

  --oranye: #F37021;
  --oranye-tua: #FF8533;
  --oranye-lembut: rgba(243, 112, 33, 0.18);
  --oranye-gradasi: linear-gradient(135deg, #F37021 0%, #FF8533 100%);
  --oranye-vibrant: #FF8533;

  --aksen-lime: #38BDF8;
  --aksen-lime-terang: #7DD3FC;
  --aksen-lime-lembut: rgba(56, 189, 248, 0.15);
  --aksen-aqua: #0EA5E9;
  --aksen-aqua-terang: #38BDF8;
  --aksen-aqua-lembut: rgba(14, 165, 233, 0.15);
  --aksen-pink: #F43F5E;
  --aksen-pink-terang: #FB7185;
  --aksen-pink-lembut: rgba(244, 63, 94, 0.15);
  --aksen-violet: #6366F1;
  --aksen-violet-terang: #818CF8;
  --aksen-violet-lembut: rgba(99, 102, 241, 0.15);

  --merah: #EF4444;
  --merah-lembut: rgba(239, 68, 68, 0.18);
  --biru: #38BDF8;
  --biru-lembut: rgba(14, 165, 233, 0.18);

  --bayang-kecil: 0 1px 3px 0 rgba(0, 0, 0, 0.5);
  --bayang: 0 4px 18px -2px rgba(0, 0, 0, 0.65);
  --bayang-besar: 0 14px 34px -4px rgba(0, 0, 0, 0.85);
  --bayang-hover: 0 16px 36px -6px rgba(59, 130, 246, 0.35);
}

/* Transisi Halus 140FPS Saat Pergantian Mode */
body, .topbar, .kartu, .panel, .stat, .kotak, .admin-top, .admin-isi, .nav, .nav-bawah, .menu-ikon-card, .tabel th, .tabel td {
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

/* Tombol Pengganti Mode Gelap / Terang (Dark / Light Switcher) ----------- */
.tombol-tema {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid #CBD5E1;
  background: #FFFFFF;
  color: #005E5D;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(0, 56, 55, 0.08);
  flex-shrink: 0;
  padding: 0;
}

.tombol-tema:hover {
  border-color: var(--bni-orange);
  color: var(--bni-orange);
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 6px 16px rgba(243, 112, 33, 0.25);
}

.tombol-tema:active {
  transform: scale(0.94);
}

.admin-tombol-tema {
  width: 36px;
  height: 36px;
}

.ikon-tema-matahari, .ikon-tema-bulan {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}

.ikon-tema-matahari svg, .ikon-tema-bulan svg {
  width: 19px;
  height: 19px;
}

/* Mode Terang (Default): Tampilkan Bulan, Sembunyikan Matahari */
html:not([data-tema="gelap"]) .ikon-tema-matahari {
  display: none !important;
}

html:not([data-tema="gelap"]) .ikon-tema-bulan {
  display: inline-flex !important;
}

/* Mode Gelap: Tampilkan Matahari, Sembunyikan Bulan */
html[data-tema="gelap"] .ikon-tema-bulan {
  display: none !important;
}

html[data-tema="gelap"] .ikon-tema-matahari {
  display: inline-flex !important;
  color: #F5D77F;
}

html[data-tema="gelap"] .tombol-tema {
  background: #0F172A;
  border-color: rgba(59, 130, 246, 0.4);
  color: #F5D77F;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

html[data-tema="gelap"] .tombol-tema:hover {
  border-color: #F5D77F;
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.35);
  color: #FFF;
}

/* Tombol Tema di Menu Drawer Mobile */
.nav-tema-btn {
  display: none;
}

@media (max-width: 900px) {
  .nav-tema-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 14px;
    border-radius: var(--radius-kecil);
    border: 1px solid #E2E8F0;
    background: #F8FAFC;
    color: var(--tinta);
    font-size: 0.90rem;
    font-weight: 700;
    cursor: pointer;
    margin-top: 6px;
    transition: all 0.2s ease;
  }
  .nav-tema-btn:hover {
    background: #E6F4F4;
    color: var(--bni-teal);
    border-color: var(--bni-teal-mid);
  }
  [data-tema="gelap"] .nav-tema-btn {
    background: #0F172A;
    border-color: rgba(59, 130, 246, 0.35);
    color: #F8FAFC;
  }
  [data-tema="gelap"] .nav-tema-btn:hover {
    background: #1E293B;
    border-color: #3B82F6;
    color: #60A5FA;
  }
}

/* ==========================================================================
   KOMPONEN KHUSUS MODE GELAP (DARK MODE 140FPS+ ENGINE INTEGRATED)
   ========================================================================== */
[data-tema="gelap"] body {
  background-color: var(--latar-dasar);
  color: var(--teks);
}

/* Tipografi Global Mode Gelap — Bersih, Tajam & Kontras Tinggi */
[data-tema="gelap"] h1,
[data-tema="gelap"] h2,
[data-tema="gelap"] h3,
[data-tema="gelap"] h4,
[data-tema="gelap"] h5,
[data-tema="gelap"] h6,
[data-tema="gelap"] strong,
[data-tema="gelap"] b {
  color: #F8FAFC;
}

[data-tema="gelap"] p,
[data-tema="gelap"] li,
[data-tema="gelap"] td,
[data-tema="gelap"] label,
[data-tema="gelap"] summary {
  color: #E2E8F0;
}

[data-tema="gelap"] small,
[data-tema="gelap"] .kecil,
[data-tema="gelap"] .bantuan,
[data-tema="gelap"] .muted,
[data-tema="gelap"] .teks-muted,
[data-tema="gelap"] .tanggal,
[data-tema="gelap"] .stat-label {
  color: #94A3B8 !important;
}

[data-tema="gelap"] a:not(.tombol):not(.chip):not(.badge):not(.nav a):not(.nav-bawah a):not(.kartu):not(.menu-ikon-card):not(.warta-item-kartu):not(.hero-stat-card):not(.ultah-item-row):not(.pusat-kontak-card):not(.agenda-pekan-item):not(.merek):not(.sisi-nav a):not(.tab-item):not(.jadwal-baris):not(.item) {
  color: #38BDF8;
}

[data-tema="gelap"] a:not(.tombol):not(.chip):not(.badge):not(.nav a):not(.nav-bawah a):not(.kartu):not(.menu-ikon-card):not(.warta-item-kartu):not(.hero-stat-card):not(.ultah-item-row):not(.pusat-kontak-card):not(.agenda-pekan-item):not(.merek):not(.sisi-nav a):not(.tab-item):not(.jadwal-baris):not(.item):hover {
  color: #7DD3FC;
  text-decoration: underline;
}

/* Card Wrappers sebagai tautan di mode gelap konsisten mempertahankan warna kartu & normal tanpa underline */
[data-tema="gelap"] a.kartu,
[data-tema="gelap"] a.menu-ikon-card,
[data-tema="gelap"] a.warta-item-kartu,
[data-tema="gelap"] a.hero-stat-card,
[data-tema="gelap"] a.ultah-item-row,
[data-tema="gelap"] a.pusat-kontak-card,
[data-tema="gelap"] a.agenda-pekan-item,
[data-tema="gelap"] a.merek,
[data-tema="gelap"] a.sisi-nav a,
[data-tema="gelap"] a.tab-item,
[data-tema="gelap"] a.jadwal-baris,
[data-tema="gelap"] a.item {
  color: inherit !important;
  text-decoration: none !important;
}

/* Penyelarasan Cerdas Tulisan Berwarna Statik / Inline Style di Mode Gelap */
[data-tema="gelap"] [style*="color:#1E293B"],
[data-tema="gelap"] [style*="color: #1E293B"],
[data-tema="gelap"] [style*="color:#2563EB"],
[data-tema="gelap"] [style*="color: #2563EB"],
[data-tema="gelap"] [style*="color:#38BDF8"],
[data-tema="gelap"] [style*="color: #38BDF8"],
[data-tema="gelap"] [style*="color:#38BDF8"],
[data-tema="gelap"] [style*="color: #38BDF8"],
[data-tema="gelap"] [style*="color:#38BDF8"],
[data-tema="gelap"] [style*="color: #38BDF8"] {
  color: #38BDF8 !important;
}

[data-tema="gelap"] [style*="color:#38BDF8"],
[data-tema="gelap"] [style*="color: #38BDF8"],
[data-tema="gelap"] [style*="color:#38BDF8"],
[data-tema="gelap"] [style*="color: #38BDF8"],
[data-tema="gelap"] [style*="color:#38BDF8"],
[data-tema="gelap"] [style*="color: #38BDF8"] {
  color: #7DD3FC !important;
}

[data-tema="gelap"] [style*="color:#0F172A"],
[data-tema="gelap"] [style*="color: #0F172A"],
[data-tema="gelap"] [style*="color:#0F2027"],
[data-tema="gelap"] [style*="color: #0F2027"],
[data-tema="gelap"] [style*="color:#111827"],
[data-tema="gelap"] [style*="color: #111827"],
[data-tema="gelap"] [style*="color:#1E293B"],
[data-tema="gelap"] [style*="color: #1E293B"] {
  color: #F8FAFC !important;
}

[data-tema="gelap"] [style*="color:#334155"],
[data-tema="gelap"] [style*="color: #334155"],
[data-tema="gelap"] [style*="color:#374151"],
[data-tema="gelap"] [style*="color: #374151"],
[data-tema="gelap"] [style*="color:#475569"],
[data-tema="gelap"] [style*="color: #475569"] {
  color: #CBD5E1 !important;
}

[data-tema="gelap"] [style*="color:#64748B"],
[data-tema="gelap"] [style*="color: #64748B"] {
  color: #94A3B8 !important;
}

[data-tema="gelap"] [style*="color:#1E40AF"],
[data-tema="gelap"] [style*="color: #1E40AF"],
[data-tema="gelap"] [style*="color:#1D4ED8"],
[data-tema="gelap"] [style*="color: #1D4ED8"],
[data-tema="gelap"] [style*="color:#2563EB"],
[data-tema="gelap"] [style*="color: #2563EB"] {
  color: #60A5FA !important;
}

[data-tema="gelap"] [style*="color:#991B1B"],
[data-tema="gelap"] [style*="color: #991B1B"],
[data-tema="gelap"] [style*="color:#7F1D1D"],
[data-tema="gelap"] [style*="color: #7F1D1D"],
[data-tema="gelap"] [style*="color:#B91C1C"],
[data-tema="gelap"] [style*="color: #B91C1C"] {
  color: #FCA5A5 !important;
}

[data-tema="gelap"] [style*="color:#92400E"],
[data-tema="gelap"] [style*="color: #92400E"],
[data-tema="gelap"] [style*="color:#B45309"],
[data-tema="gelap"] [style*="color: #B45309"],
[data-tema="gelap"] [style*="color:#854D0E"],
[data-tema="gelap"] [style*="color: #854D0E"] {
  color: #FDE68A !important;
}

/* Penyelarasan Cerdas Latar Berwarna Terang / Inline Style di Mode Gelap */
[data-tema="gelap"] [style*="background:#fff"],
[data-tema="gelap"] [style*="background: #fff"],
[data-tema="gelap"] [style*="background:#ffffff"],
[data-tema="gelap"] [style*="background: #ffffff"],
[data-tema="gelap"] [style*="background: white"],
[data-tema="gelap"] [style*="background:white"] {
  background: #111827 !important;
  color: #E2E8F0 !important;
}

[data-tema="gelap"] [style*="#F0FDF4"],
[data-tema="gelap"] [style*="#DCFCE7"] {
  background: rgba(59, 130, 246, 0.16) !important;
  border-color: rgba(59, 130, 246, 0.35) !important;
}

[data-tema="gelap"] [style*="#EFF6FF"],
[data-tema="gelap"] [style*="#EEF2FF"],
[data-tema="gelap"] [style*="#DBEAFE"] {
  background: rgba(14, 165, 233, 0.16) !important;
  border-color: rgba(14, 165, 233, 0.35) !important;
}

[data-tema="gelap"] [style*="#FFF7ED"],
[data-tema="gelap"] [style*="#FEF3C7"],
[data-tema="gelap"] [style*="#FFF8E6"] {
  background: rgba(243, 112, 33, 0.16) !important;
  border-color: rgba(243, 112, 33, 0.35) !important;
}

[data-tema="gelap"] [style*="#FAF5FF"],
[data-tema="gelap"] [style*="#F3E8FF"] {
  background: rgba(168, 85, 247, 0.16) !important;
  border-color: rgba(168, 85, 247, 0.35) !important;
}

/* Latar & Ambient Glow Gelap */
[data-tema="gelap"] .latar-overlay {
  background: radial-gradient(circle at 50% 0%, rgba(30, 41, 59, 0.6) 0%, rgba(11, 15, 25, 0.96) 100%);
}
[data-tema="gelap"] .latar-ambient-1 {
  background: radial-gradient(circle, rgba(243, 112, 33, 0.12) 0%, transparent 70%);
}
[data-tema="gelap"] .latar-ambient-2 {
  background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, transparent 70%);
}

/* Topbar & Drawer Publik Gelap */
[data-tema="gelap"] .topbar {
  background: rgba(15, 23, 42, 0.96);
  border-bottom-color: rgba(59, 130, 246, 0.25);
  box-shadow: 0 4px 24px -2px rgba(0, 0, 0, 0.5);
}
[data-tema="gelap"] .merek {
  color: #F8FAFC;
}
[data-tema="gelap"] .merek-teks strong {
  color: #F8FAFC;
}
[data-tema="gelap"] .merek-teks small {
  color: #94A3B8 !important;
}
[data-tema="gelap"] .cari-topbar-input {
  background: #111827;
  border-color: rgba(59, 130, 246, 0.35);
  color: #F8FAFC;
}
[data-tema="gelap"] .cari-topbar-input:focus {
  border-color: var(--bni-orange);
  box-shadow: 0 0 0 3px rgba(243, 112, 33, 0.3);
}
[data-tema="gelap"] .cari-topbar-btn {
  color: #94A3B8;
}
[data-tema="gelap"] .tombol-notif-ultah {
  background: #0F172A;
  border-color: rgba(59, 130, 246, 0.35);
  color: #F8FAFC;
}
[data-tema="gelap"] .tombol-notif-ultah:hover {
  border-color: var(--emas-terang);
  color: var(--emas-terang);
}
[data-tema="gelap"] .tombol-menu-mobile {
  background: #0F172A;
  border-color: rgba(59, 130, 246, 0.35);
  color: #F8FAFC;
}

[data-tema="gelap"] .nav.terbuka {
  background: rgba(15, 23, 42, 0.98);
  border-color: rgba(59, 130, 246, 0.25);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}
@media (min-width: 1141px) {
  .nav, [data-tema="gelap"] .nav {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
}
[data-tema="gelap"] .nav a {
  color: #E2E8F0;
}
[data-tema="gelap"] .nav a:hover {
  background: rgba(243, 112, 33, 0.16);
  color: #FF8533;
}
[data-tema="gelap"] .nav a.aktif {
  background: rgba(243, 112, 33, 0.22);
  color: #FFA466;
  border-left-color: #FF8533;
}
[data-tema="gelap"] .nav-head-judul {
  color: #F8FAFC;
}
[data-tema="gelap"] .nav-tutup-btn {
  background: #1E293B;
  color: #E2E8F0;
}
[data-tema="gelap"] .nav-tutup-btn:hover {
  background: #2563EB;
  color: #FFF;
}
[data-tema="gelap"] .nav-admin {
  background: linear-gradient(135deg, #2563EB 0%, #1E293B 100%) !important;
  color: #FFFFFF !important;
  border-color: rgba(59, 130, 246, 0.45) !important;
}
[data-tema="gelap"] .nav-admin span {
  color: #FFFFFF !important;
}
[data-tema="gelap"] .nav-admin .ikon,
[data-tema="gelap"] .nav-admin svg {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
}

[data-tema="gelap"] .notif-popover {
  background: rgba(15, 23, 42, 0.98);
  border-color: rgba(212, 175, 55, 0.45);
  box-shadow: 0 20px 48px -8px rgba(0, 0, 0, 0.7);
}
[data-tema="gelap"] .notif-popover-head {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  border-bottom-color: rgba(212, 175, 55, 0.25);
  color: #F8FAFC;
}
[data-tema="gelap"] .notif-popover-judul strong {
  color: #F8FAFC;
}
[data-tema="gelap"] .notif-popover-judul small {
  color: #94A3B8;
}
[data-tema="gelap"] .notif-popover-tutup {
  background: rgba(255, 255, 255, 0.08);
  color: #E2E8F0;
}
[data-tema="gelap"] .notif-popover-isi {
  color: #E2E8F0;
}
[data-tema="gelap"] .notif-item {
  background: rgba(30, 41, 59, 0.45);
  border-color: rgba(59, 130, 246, 0.2);
}
[data-tema="gelap"] .notif-info strong {
  color: #F8FAFC;
}
[data-tema="gelap"] .notif-info small {
  color: #94A3B8;
}
[data-tema="gelap"] .notif-popover-kaki {
  background: #0F172A;
  border-top-color: rgba(59, 130, 246, 0.2);
}
[data-tema="gelap"] .notif-tautan-semua {
  color: #F5D77F;
}

[data-tema="gelap"] .nav-bawah {
  background: rgba(11, 15, 25, 0.96);
  border-top-color: rgba(59, 130, 246, 0.25);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.6);
}
[data-tema="gelap"] .nav-bawah a, [data-tema="gelap"] .nav-bawah button {
  color: #94A3B8;
}
[data-tema="gelap"] .nav-bawah a:hover, [data-tema="gelap"] .nav-bawah button:hover {
  color: #F8FAFC;
}
[data-tema="gelap"] .nav-bawah a.aktif, [data-tema="gelap"] .nav-bawah button.aktif,
[data-tema="gelap"] .nav-bawah a.aktif span, [data-tema="gelap"] .nav-bawah button.aktif span,
[data-tema="gelap"] .nav-bawah a.aktif .ikon, [data-tema="gelap"] .nav-bawah button.aktif .ikon {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
}

/* Kartu, Panel, Stat, Kotak, Item Daftar Gelap */
[data-tema="gelap"] .kartu,
[data-tema="gelap"] .panel,
[data-tema="gelap"] .kotak,
[data-tema="gelap"] .stat,
[data-tema="gelap"] .item {
  background: #111827;
  border-color: rgba(59, 130, 246, 0.22);
  color: #E2E8F0;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}
[data-tema="gelap"] .kartu:hover,
[data-tema="gelap"] .panel:hover,
[data-tema="gelap"] .stat:hover,
[data-tema="gelap"] .item:hover {
  border-color: rgba(59, 130, 246, 0.45);
  box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.55);
}
[data-tema="gelap"] .kartu-judul {
  border-bottom-color: rgba(59, 130, 246, 0.18);
}
[data-tema="gelap"] .kartu-judul h2,
[data-tema="gelap"] .kartu-judul h3,
[data-tema="gelap"] .panel-judul h2,
[data-tema="gelap"] .panel-judul h3,
[data-tema="gelap"] .item h3 {
  color: #F8FAFC;
}
[data-tema="gelap"] .item p {
  color: #CBD5E1;
}
[data-tema="gelap"] .stat-nilai {
  color: #F8FAFC !important;
}
[data-tema="gelap"] .stat-label {
  color: #94A3B8 !important;
}

/* Kartu Keluarga & Akordion Gelap */
[data-tema="gelap"] .kartu-keluarga {
  background: #111827;
  border-color: rgba(59, 130, 246, 0.25);
  color: #E2E8F0;
}
[data-tema="gelap"] .kartu-keluarga > summary {
  color: #F8FAFC;
}
[data-tema="gelap"] .kartu-keluarga > summary:hover {
  background: rgba(59, 130, 246, 0.15);
}
[data-tema="gelap"] .kartu-keluarga[open] > summary {
  background: #0F172A;
  border-bottom-color: rgba(59, 130, 246, 0.25);
}
[data-tema="gelap"] .keluarga-teks strong {
  color: #F8FAFC;
}
[data-tema="gelap"] .keluarga-teks small {
  color: #94A3B8;
}
[data-tema="gelap"] .keluarga-ikon {
  background: rgba(243, 112, 33, 0.22);
  color: #FF8533;
}

/* Chip Filter Gelap */
[data-tema="gelap"] .chip {
  background: rgba(17, 24, 39, 0.85);
  border-color: rgba(59, 130, 246, 0.3);
  color: #E2E8F0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
[data-tema="gelap"] .chip:hover {
  border-color: var(--bni-orange);
  color: var(--bni-orange);
}
[data-tema="gelap"] .chip.aktif {
  background: linear-gradient(135deg, #F37021 0%, #FF8533 100%);
  border-color: transparent;
  color: #FFFFFF !important;
}

/* Badge & Pill Gelap */
[data-tema="gelap"] .badge {
  background: rgba(212, 175, 55, 0.18);
  color: #F5D77F;
  border-color: rgba(212, 175, 55, 0.4);
}
[data-tema="gelap"] .badge.netral {
  background: rgba(59, 130, 246, 0.22);
  color: #38BDF8;
  border-color: rgba(59, 130, 246, 0.4);
}
[data-tema="gelap"] .badge.abu {
  background: rgba(255, 255, 255, 0.10);
  color: #CBD5E1;
  border-color: rgba(255, 255, 255, 0.18);
}
[data-tema="gelap"] .badge.merah {
  background: rgba(239, 68, 68, 0.22);
  color: #FCA5A5;
  border-color: rgba(239, 68, 68, 0.45);
}
[data-tema="gelap"] .badge.hijau {
  background: rgba(59, 130, 246, 0.22);
  color: #7DD3FC;
  border-color: rgba(59, 130, 246, 0.45);
}
[data-tema="gelap"] .badge.biru {
  background: rgba(14, 165, 233, 0.22);
  color: #38BDF8;
  border-color: rgba(14, 165, 233, 0.45);
}
[data-tema="gelap"] .badge-jenis.masuk,
[data-tema="gelap"] .badge-status.aktif {
  background: rgba(14, 165, 233, 0.22);
  color: #38BDF8;
}
[data-tema="gelap"] .badge-jenis.keluar {
  background: rgba(245, 158, 11, 0.22);
  color: #FBBF24;
}
[data-tema="gelap"] .badge-jenis.nonaktif,
[data-tema="gelap"] .badge-status.nonaktif {
  background: rgba(148, 163, 184, 0.15);
  color: #94A3B8;
}
[data-tema="gelap"] .badge-kategori.umum,
[data-tema="gelap"] .badge-kategori.sekolahminggu,
[data-tema="gelap"] .badge-kategori.par {
  background: rgba(245, 158, 11, 0.22);
  color: #FDE68A;
  border-color: rgba(245, 158, 11, 0.4);
}
[data-tema="gelap"] .badge-kategori.rayon,
[data-tema="gelap"] .badge-kategori.pkb,
[data-tema="gelap"] .badge-kategori.tunas {
  background: rgba(14, 165, 233, 0.22);
  color: #93C5FD;
  border-color: rgba(14, 165, 233, 0.4);
}
[data-tema="gelap"] .badge-kategori.ksp {
  background: rgba(168, 85, 247, 0.22);
  color: #E9D5FF;
  border-color: rgba(168, 85, 247, 0.4);
}
[data-tema="gelap"] .badge-kategori.pw {
  background: rgba(236, 72, 153, 0.22);
  color: #FBCFE8;
  border-color: rgba(236, 72, 153, 0.4);
}
[data-tema="gelap"] .badge-kategori.pam {
  background: rgba(249, 115, 22, 0.22);
  color: #FED7AA;
  border-color: rgba(249, 115, 22, 0.4);
}
[data-tema="gelap"] .waktu-pill {
  background: rgba(212, 175, 55, 0.22);
  color: #F5D77F;
  border-color: rgba(212, 175, 55, 0.4);
}

/* Info List di Kontak & Profil */
[data-tema="gelap"] .info-list .baris {
  border-bottom-color: rgba(59, 130, 246, 0.2);
}
[data-tema="gelap"] .info-list .baris span:first-child {
  color: #94A3B8;
}
[data-tema="gelap"] .info-list .baris span:last-child {
  color: #F8FAFC;
}

/* Ulang Tahun Jemaat Gelap */
[data-tema="gelap"] .ulang-tahun {
  background: linear-gradient(135deg, #0F172A 0%, #111827 100%);
  border-color: rgba(212, 175, 55, 0.4);
}
[data-tema="gelap"] .ulang-tahun h3 {
  color: #F5D77F;
}
[data-tema="gelap"] .daftar-ultah div {
  background: #0F172A;
  border-color: rgba(212, 175, 55, 0.25);
  color: #E2E8F0;
}
[data-tema="gelap"] .daftar-ultah div span:first-child {
  color: #F8FAFC;
}
[data-tema="gelap"] .daftar-ultah div span:last-child {
  color: #94A3B8;
}

/* Menu Beranda Ikon Card Gelap */
[data-tema="gelap"] .menu-ikon-card {
  background: #111827;
  border-color: rgba(59, 130, 246, 0.22);
  color: #F1F5F9;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
[data-tema="gelap"] .menu-ikon-card:hover {
  background: #1A2234;
  border-color: #38BDF8;
  color: #38BDF8;
  box-shadow: 0 12px 26px -4px rgba(59, 130, 246, 0.3);
}
[data-tema="gelap"] .menu-ikon-teks {
  color: #F8FAFC !important;
}

/* Renungan Card di Beranda Gelap */
[data-tema="gelap"] .kartu-renungan-mockup {
  background: #111827;
  border-color: rgba(59, 130, 246, 0.22);
  border-top: 4px solid #38BDF8;
  color: #E2E8F0;
}
[data-tema="gelap"] .renungan-watermark-art {
  opacity: 0.10;
  color: #38BDF8;
}
[data-tema="gelap"] .renungan-judul-mockup {
  color: #38BDF8 !important;
}
[data-tema="gelap"] .renungan-ayat-mockup {
  color: #F5D77F !important;
}
[data-tema="gelap"] .renungan-isi-mockup {
  color: #CBD5E1 !important;
}
[data-tema="gelap"] .renungan-ikon-kotak {
  background: rgba(59, 130, 246, 0.22) !important;
  color: #38BDF8 !important;
}
[data-tema="gelap"] .renungan-badge-tgl {
  background: rgba(243, 112, 33, 0.22) !important;
  color: #FF8533 !important;
  border: 1px solid rgba(243, 112, 33, 0.4) !important;
}
[data-tema="gelap"] .renungan-kaki-mockup {
  border-top: 1px solid rgba(59, 130, 246, 0.2) !important;
}
[data-tema="gelap"] .tombol-bagikan-renungan {
  background: #1A2234;
  color: #E2E8F0;
  border-color: rgba(59, 130, 246, 0.35);
}
[data-tema="gelap"] .tombol-bagikan-renungan:hover {
  background: #1E293B;
  color: #38BDF8;
  border-color: #38BDF8;
}

/* Jadwal Baris Gelap */
[data-tema="gelap"] .jadwal-baris {
  background: rgba(17, 24, 39, 0.85);
  border-color: rgba(59, 130, 246, 0.28);
  color: #E2E8F0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
[data-tema="gelap"] .jadwal-baris:hover {
  border-color: var(--emas);
  box-shadow: 0 10px 24px -2px rgba(212, 175, 55, 0.25);
}
[data-tema="gelap"] .jadwal-baris .hari {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.2) 0%, rgba(170, 119, 28, 0.25) 100%);
  color: #F5D77F;
  border-color: rgba(212, 175, 55, 0.4);
}
[data-tema="gelap"] .jadwal-baris h3 {
  color: #F8FAFC;
}

/* Agenda Item Gelap */
[data-tema="gelap"] .agenda-item {
  border-bottom-color: rgba(59, 130, 246, 0.2);
}
[data-tema="gelap"] .agenda-item h3, [data-tema="gelap"] .agenda-item h4 {
  color: #F8FAFC;
}

/* Form Controls & Inputs Gelap Universal */
[data-tema="gelap"] input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
[data-tema="gelap"] select,
[data-tema="gelap"] textarea,
[data-tema="gelap"] .field input,
[data-tema="gelap"] .field select,
[data-tema="gelap"] .filter-baris input,
[data-tema="gelap"] .filter-baris select,
[data-tema="gelap"] .cari-mini input,
[data-tema="gelap"] .form-baris input,
[data-tema="gelap"] .form-baris select {
  background: #0F172A !important;
  border-color: rgba(216, 168, 82, 0.5) !important;
  color: #F8FAFC !important;
  box-shadow: 0 0 0 3px rgba(216, 168, 82, 0.12), inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

[data-tema="gelap"] .field textarea {
  background: #0F172A !important;
  border-color: rgba(216, 168, 82, 0.5) !important;
  color: #F8FAFC !important;
  box-shadow: 0 0 0 3px rgba(216, 168, 82, 0.12), inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

[data-tema="gelap"] input:focus,
[data-tema="gelap"] select:focus,
[data-tema="gelap"] textarea:focus,
[data-tema="gelap"] .field input:focus,
[data-tema="gelap"] .field select:focus,
[data-tema="gelap"] .field textarea:focus,
[data-tema="gelap"] .filter-baris input:focus,
[data-tema="gelap"] .filter-baris select:focus,
[data-tema="gelap"] .cari-mini input:focus,
[data-tema="gelap"] .form-baris input:focus {
  background: #111827 !important;
  border-color: #D4AF37 !important;
  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.3), 0 2px 8px rgba(0, 0, 0, 0.4);
  color: #FFFFFF !important;
}

[data-tema="gelap"] input::placeholder,
[data-tema="gelap"] textarea::placeholder {
  color: #64748B !important;
}

[data-tema="gelap"] label,
[data-tema="gelap"] .field label,
[data-tema="gelap"] .form-baris label {
  color: #E2E8F0;
}

/* Area Unggah Berkas Dropzone Gelap */
[data-tema="gelap"] .dropzone {
  background: #0F172A;
  border-color: rgba(59, 130, 246, 0.35);
  color: #94A3B8;
}
[data-tema="gelap"] .dropzone:hover {
  background: #111827;
  border-color: #38BDF8;
}
[data-tema="gelap"] .dropzone strong {
  color: #F8FAFC;
}

/* Tabel Admin & Publik Gelap Universal */
[data-tema="gelap"] .tabel-bungkus {
  background: #111827;
  border-color: rgba(59, 130, 246, 0.25);
}
[data-tema="gelap"] table th,
[data-tema="gelap"] .tabel th,
[data-tema="gelap"] .tabel-presisi th {
  background: #0F172A !important;
  color: #F8FAFC !important;
  border-bottom-color: rgba(59, 130, 246, 0.25) !important;
}
[data-tema="gelap"] table td,
[data-tema="gelap"] .tabel td,
[data-tema="gelap"] .tabel-presisi td {
  background: #111827 !important;
  color: #E2E8F0 !important;
  border-bottom-color: rgba(255, 255, 255, 0.07) !important;
}
[data-tema="gelap"] table tbody tr:hover td,
[data-tema="gelap"] .tabel tbody tr:hover td,
[data-tema="gelap"] .tabel-presisi tbody tr:hover td {
  background: rgba(59, 130, 246, 0.16) !important;
}
[data-tema="gelap"] .tabel tbody tr:hover,
[data-tema="gelap"] .tabel-presisi tbody tr:hover td {
  background: rgba(59, 130, 246, 0.12) !important;
}

[data-tema="gelap"] .jadwal-nama-teks {
  color: #F8FAFC !important;
}
[data-tema="gelap"] .jadwal-hari {
  color: #F8FAFC !important;
}
[data-tema="gelap"] .jadwal-tgl-sub {
  color: #94A3B8 !important;
}
[data-tema="gelap"] .jadwal-ket-teks {
  color: #CBD5E1 !important;
}

/* Aksi Ikon di Tabel Admin */
[data-tema="gelap"] .aksi-ikon {
  background: #0F172A;
  border-color: rgba(59, 130, 246, 0.3);
  color: #CBD5E1;
}
[data-tema="gelap"] .aksi-ikon:hover {
  border-color: #F5D77F;
  color: #F5D77F;
}

/* Admin Topbar, Tabs & Shell Gelap */
[data-tema="gelap"] .admin-top {
  background: rgba(15, 23, 42, 0.96);
  border-bottom-color: rgba(59, 130, 246, 0.25);
  color: #F8FAFC;
}
[data-tema="gelap"] .admin-top h1 {
  color: #F8FAFC;
}
[data-tema="gelap"] .admin-top-subjudul {
  color: #94A3B8 !important;
  border-left-color: rgba(59, 130, 246, 0.35) !important;
}
[data-tema="gelap"] .admin-nama {
  background: rgba(30, 41, 59, 0.85);
  border-color: rgba(59, 130, 246, 0.3);
  color: #F8FAFC;
}
[data-tema="gelap"] .admin-top-tabs .tabs,
[data-tema="gelap"] .tabs {
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(59, 130, 246, 0.25);
}
[data-tema="gelap"] .admin-top-tabs .tabs a,
[data-tema="gelap"] .admin-top-tabs .tabs button,
[data-tema="gelap"] .tabs a,
[data-tema="gelap"] .tabs button {
  color: #94A3B8;
}
[data-tema="gelap"] .admin-top-tabs .tabs a:hover,
[data-tema="gelap"] .admin-top-tabs .tabs button:hover,
[data-tema="gelap"] .tabs a:hover,
[data-tema="gelap"] .tabs button:hover {
  color: #F8FAFC;
  background: rgba(59, 130, 246, 0.35);
}
[data-tema="gelap"] .admin-top-tabs .tabs a.aktif,
[data-tema="gelap"] .admin-top-tabs .tabs button.aktif,
[data-tema="gelap"] .tabs a.aktif,
[data-tema="gelap"] .tabs button.aktif {
  background: #1E293B;
  color: #FFF;
  border-color: #F37021;
  box-shadow: 0 0 0 2.5px rgba(243, 112, 33, 0.35);
}
[data-tema="gelap"] .admin-isi {
  background: #0B0F19;
  color: #E2E8F0;
}

/* Modals & Popups Global Gelap */
[data-tema="gelap"] .modal-konten,
[data-tema="gelap"] .modal-dialog-kotak {
  background: #111827 !important;
  border: 1px solid rgba(59, 130, 246, 0.35) !important;
  color: #E2E8F0 !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7) !important;
}
[data-tema="gelap"] .modal-head,
[data-tema="gelap"] .modal-dialog-kepala {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%) !important;
  border-bottom-color: rgba(59, 130, 246, 0.2) !important;
}
[data-tema="gelap"] .modal-head h2,
[data-tema="gelap"] .modal-head h3,
[data-tema="gelap"] .modal-dialog-kepala h3 {
  color: #F8FAFC !important;
}
[data-tema="gelap"] .modal-dialog-tutup {
  color: #CBD5E1 !important;
}
[data-tema="gelap"] .modal-dialog-tutup:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #FFF !important;
}
[data-tema="gelap"] .modal-dialog-isi {
  color: #E2E8F0 !important;
}
[data-tema="gelap"] .modal-isi-konten p,
[data-tema="gelap"] .modal-isi-konten li {
  color: #E2E8F0 !important;
}
[data-tema="gelap"] .modal-judul-teks {
  color: #F8FAFC !important;
}
[data-tema="gelap"] .modal-sorot-teks {
  color: #F8FAFC !important;
}
[data-tema="gelap"] .modal-catatan-teks {
  color: #94A3B8 !important;
  border-top: 1px solid rgba(59, 130, 246, 0.2) !important;
}
[data-tema="gelap"] .modal-dialog-kaki {
  background: #0F172A !important;
  border-top-color: rgba(59, 130, 246, 0.25) !important;
}

[data-tema="gelap"] .kotak-peringatan-tgl {
  background: rgba(245, 158, 11, 0.18) !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
  color: #FDE68A !important;
}
[data-tema="gelap"] .kotak-bahaya-info {
  background: rgba(239, 68, 68, 0.18) !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
  color: #FCA5A5 !important;
}
[data-tema="gelap"] .kotak-bahaya-info strong {
  color: #F87171 !important;
}
[data-tema="gelap"] .kotak-bahaya-info li {
  color: #FECACA !important;
}
[data-tema="gelap"] .kotak-doa-info {
  background: rgba(14, 165, 233, 0.18) !important;
  border: 1px solid rgba(14, 165, 233, 0.35) !important;
  border-left-color: #38BDF8 !important;
  color: #BAE6FD !important;
}
[data-tema="gelap"] .kotak-doa-info strong {
  color: #7DD3FC !important;
}

/* Kotak Kosong / Empty State Gelap */
[data-tema="gelap"] .panel .kosong,
[data-tema="gelap"] .kotak-kosong,
[data-tema="gelap"] .kosong {
  background: #0F172A;
  border-color: rgba(59, 130, 246, 0.2);
  color: #94A3B8;
}

/* Notifikasi Pesan Sistem Gelap */
[data-tema="gelap"] .notif {
  background: rgba(212, 175, 55, 0.18);
  color: #F5D77F;
  border-color: rgba(212, 175, 55, 0.35);
}
[data-tema="gelap"] .notif.sukses,
[data-tema="gelap"] .notif.ok {
  background: rgba(59, 130, 246, 0.2);
  color: #7DD3FC;
  border-color: rgba(59, 130, 246, 0.4);
}
[data-tema="gelap"] .notif.galat {
  background: rgba(239, 68, 68, 0.2);
  color: #FCA5A5;
  border-color: rgba(239, 68, 68, 0.4);
}

/* Penyelarasan Cerdas Latar Belakang Kotak & Baris Statik di Mode Gelap */
[data-tema="gelap"] [style*="background:#F0FDF4"],
[data-tema="gelap"] [style*="background: #F0FDF4"],
[data-tema="gelap"] [style*="background:#EDF7ED"],
[data-tema="gelap"] [style*="background: #EDF7ED"],
[data-tema="gelap"] [style*="background:#ECFDF5"],
[data-tema="gelap"] [style*="background: #ECFDF5"] {
  background: rgba(59, 130, 246, 0.12) !important;
  border-color: rgba(59, 130, 246, 0.35) !important;
}

[data-tema="gelap"] [style*="background:#FEF2F2"],
[data-tema="gelap"] [style*="background: #FEF2F2"] {
  background: rgba(239, 68, 68, 0.14) !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
}

[data-tema="gelap"] [style*="background:#FFFBEB"],
[data-tema="gelap"] [style*="background: #FFFBEB"],
[data-tema="gelap"] [style*="background:#FFF8E1"],
[data-tema="gelap"] [style*="background: #FFF8E1"],
[data-tema="gelap"] [style*="background:#FFF8E6"],
[data-tema="gelap"] [style*="background: #FFF8E6"],
[data-tema="gelap"] [style*="background:#FFFDF0"],
[data-tema="gelap"] [style*="background: #FFFDF0"],
[data-tema="gelap"] [style*="background:#FFF3D1"],
[data-tema="gelap"] [style*="background: #FFF3D1"] {
  background: rgba(245, 158, 11, 0.14) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
}

[data-tema="gelap"] [style*="background:#EFF6FF"],
[data-tema="gelap"] [style*="background: #EFF6FF"],
[data-tema="gelap"] [style*="background:#EEF2FF"],
[data-tema="gelap"] [style*="background: #EEF2FF"],
[data-tema="gelap"] [style*="background:#F0F9FF"],
[data-tema="gelap"] [style*="background: #F0F9FF"],
[data-tema="gelap"] [style*="background:#E6F4F4"],
[data-tema="gelap"] [style*="background: #E6F4F4"] {
  background: rgba(14, 165, 233, 0.14) !important;
  border-color: rgba(14, 165, 233, 0.35) !important;
}

[data-tema="gelap"] [style*="background:#FFF7ED"],
[data-tema="gelap"] [style*="background: #FFF7ED"] {
  background: rgba(243, 112, 33, 0.15) !important;
  border-color: rgba(243, 112, 33, 0.35) !important;
}

[data-tema="gelap"] [style*="background:#DCFCE7"],
[data-tema="gelap"] [style*="background: #DCFCE7"] {
  background: rgba(59, 130, 246, 0.22) !important;
  border-color: rgba(59, 130, 246, 0.45) !important;
  color: #7DD3FC !important;
}

[data-tema="gelap"] [style*="background:#FAF8F2"],
[data-tema="gelap"] [style*="background: #FAF8F2"],
[data-tema="gelap"] [style*="background:#FBF7EC"],
[data-tema="gelap"] [style*="background: #FBF7EC"],
[data-tema="gelap"] [style*="background:#FFFDF6"],
[data-tema="gelap"] [style*="background: #FFFDF6"],
[data-tema="gelap"] [style*="background:#FDFBF6"],
[data-tema="gelap"] [style*="background: #FDFBF6"] {
  background: #111827 !important;
  border-color: rgba(59, 130, 246, 0.25) !important;
}

[data-tema="gelap"] tr[style*="background:#FBF7EC"],
[data-tema="gelap"] tr[style*="background: #FBF7EC"],
[data-tema="gelap"] tr[style*="background:#FFFDF6"],
[data-tema="gelap"] tr[style*="background: #FFFDF6"] {
  background: rgba(212, 175, 55, 0.12) !important;
}
[data-tema="gelap"] tr[style*="background:#FBF7EC"] th,
[data-tema="gelap"] tr[style*="background:#FBF7EC"] td,
[data-tema="gelap"] tr[style*="background:#FFFDF6"] th,
[data-tema="gelap"] tr[style*="background:#FFFDF6"] td {
  background: transparent !important;
  color: #F8FAFC !important;
}

[data-tema="gelap"] [style*="background:#fff;"],
[data-tema="gelap"] [style*="background: #fff;"],
[data-tema="gelap"] [style*="background:#ffffff"],
[data-tema="gelap"] [style*="background: #ffffff"],
[data-tema="gelap"] [style*="background: #fff "],
[data-tema="gelap"] [style*="background:#F8FAFC"],
[data-tema="gelap"] [style*="background: #F8FAFC"],
[data-tema="gelap"] [style*="background:#FAFAFA"],
[data-tema="gelap"] [style*="background: #FAFAFA"] {
  background: #111827 !important;
  border-color: rgba(59, 130, 246, 0.25) !important;
}

/* Tombol Halus & Bahaya di Mode Gelap */
[data-tema="gelap"] .tombol-halus {
  background: rgba(30, 41, 59, 0.7);
  color: #F8FAFC;
  border-color: rgba(59, 130, 246, 0.35);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(12px);
}
[data-tema="gelap"] .tombol-halus:hover {
  background: #1E293B;
  border-color: #F5D77F;
  color: #F5D77F;
  box-shadow: 0 6px 18px -2px rgba(212, 175, 55, 0.3);
}
[data-tema="gelap"] .tombol-bahaya {
  background: rgba(239, 68, 68, 0.18);
  color: #FCA5A5;
  border-color: rgba(239, 68, 68, 0.45);
}
[data-tema="gelap"] .tombol-bahaya:hover {
  background: #EF4444;
  color: #FFFFFF;
  border-color: #EF4444;
}

/* Unduhan & Media Items di Mode Gelap */
[data-tema="gelap"] .unduhan-item {
  background: #111827;
  border-color: rgba(59, 130, 246, 0.25);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
[data-tema="gelap"] .unduhan-item:hover {
  border-color: rgba(59, 130, 246, 0.45);
  box-shadow: 0 8px 24px -2px rgba(59, 130, 246, 0.4);
}
[data-tema="gelap"] .unduhan-info strong {
  color: #F8FAFC;
}
[data-tema="gelap"] .unduhan-info small {
  color: #94A3B8;
}
[data-tema="gelap"] .unduhan-ikon {
  background: rgba(239, 68, 68, 0.18);
  color: #FCA5A5;
  border-color: rgba(239, 68, 68, 0.35);
}
[data-tema="gelap"] .unduhan-ikon.biru {
  background: rgba(14, 165, 233, 0.18);
  color: #38BDF8;
  border-color: rgba(14, 165, 233, 0.35);
}

/* Album Dokumentasi & Kolase di Mode Gelap */
[data-tema="gelap"] .album-bingkai-kartu {
  background: #111827;
  border-color: rgba(59, 130, 246, 0.25);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
[data-tema="gelap"] .album-kartu-head {
  background: transparent;
}
[data-tema="gelap"] .album-kartu-judul {
  color: #F8FAFC;
}
[data-tema="gelap"] .album-kartu-ket {
  color: #CBD5E1;
}
[data-tema="gelap"] .album-kartu-tanggal {
  color: #94A3B8;
}
[data-tema="gelap"] .album-kartu-footer {
  background: #0F172A;
  border-top-color: rgba(59, 130, 246, 0.2);
}
[data-tema="gelap"] .album-link-semua {
  color: #F5D77F;
}
[data-tema="gelap"] .album-link-semua:hover {
  color: #FDE047;
}

/* Galeri Dokumentasi di Mode Gelap */
[data-tema="gelap"] .galeri-item {
  background: #111827;
  border-color: rgba(59, 130, 246, 0.25);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
[data-tema="gelap"] .galeri-item h3 {
  color: #F8FAFC;
}
[data-tema="gelap"] .galeri-item p {
  color: #94A3B8;
}

[data-tema="gelap"] .galeri-kartu {
  background: #111827;
  border-color: rgba(59, 130, 246, 0.25);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
[data-tema="gelap"] .galeri-detail strong {
  color: #F8FAFC;
}
[data-tema="gelap"] .galeri-detail .kecil {
  color: #94A3B8;
}

/* Panel Album di Admin di Mode Gelap */
[data-tema="gelap"] .admin-album-kartu {
  background: #111827;
  border-color: rgba(59, 130, 246, 0.25);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
[data-tema="gelap"] .admin-album-head {
  background: #0F172A;
  border-bottom-color: rgba(59, 130, 246, 0.25);
}
[data-tema="gelap"] .admin-album-info h3 {
  color: #F8FAFC;
}
[data-tema="gelap"] .admin-foto-grid {
  background: #0F172A;
}
[data-tema="gelap"] .admin-foto-item {
  background: #111827;
  border-color: rgba(59, 130, 246, 0.25);
}
[data-tema="gelap"] .admin-foto-item-info {
  background: #111827;
  color: #E2E8F0;
}
[data-tema="gelap"] .admin-foto-item-info span {
  color: #F8FAFC;
}

/* Banner Header Statik & Preview Panels di Admin */
[data-tema="gelap"] .admin-banner-statik {
  background: rgba(15, 23, 42, 0.98) !important;
  border-color: rgba(59, 130, 246, 0.35) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
}
[data-tema="gelap"] .admin-preview-statik,
[data-tema="gelap"] .admin-preview-statik-tab {
  background: #111827 !important;
  border-color: rgba(59, 130, 246, 0.35) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}
[data-tema="gelap"] .preview-hero-box {
  background: #111827 !important;
  border-color: #D8A852 !important;
}
[data-tema="gelap"] .panel-hero-preview,
[data-tema="gelap"] .panel[style*="linear-gradient"] {
  background: #0F172A !important;
  border-color: rgba(243, 112, 33, 0.35) !important;
}
[data-tema="gelap"] .ultah-hari-ini-box,
[data-tema="gelap"] [style*="rgba(255,255,255,0.95)"],
[data-tema="gelap"] [style*="rgba(255, 255, 255, 0.95)"] {
  background: rgba(17, 24, 39, 0.95) !important;
  border-color: rgba(212, 175, 55, 0.45) !important;
}

/* Notifikasi Popover Hari Ini */
[data-tema="gelap"] .notif-grup.hari-ini .notif-item {
  background: rgba(243, 112, 33, 0.15) !important;
  border-color: rgba(243, 112, 33, 0.45) !important;
}

/* Ikon Statistik & Legenda Grafik Admin */
[data-tema="gelap"] .stat-ikon.biru {
  background: rgba(14, 165, 233, 0.22);
  color: #38BDF8;
}
[data-tema="gelap"] .stat-ikon.hijau {
  background: rgba(59, 130, 246, 0.22);
  color: #7DD3FC;
}
[data-tema="gelap"] .stat-ikon.emas {
  background: rgba(212, 175, 55, 0.22);
  color: #F5D77F;
}
[data-tema="gelap"] .stat-ikon.ungu {
  background: rgba(168, 85, 247, 0.22);
  color: #C084FC;
}
[data-tema="gelap"] .grafik-label,
[data-tema="gelap"] .legenda {
  color: #94A3B8;
}

/* 8 Ikon Menu Utama Beranda di Mode Gelap */
[data-tema="gelap"] .menu-ikon-card:nth-child(1) .menu-ikon-circle {
  background: rgba(59, 130, 246, 0.22) !important;
  color: #38BDF8 !important;
}
[data-tema="gelap"] .menu-ikon-card:nth-child(2) .menu-ikon-circle {
  background: rgba(59, 130, 246, 0.25) !important;
  color: #38BDF8 !important;
}
[data-tema="gelap"] .menu-ikon-card:nth-child(3) .menu-ikon-circle {
  background: rgba(243, 112, 33, 0.25) !important;
  color: #FF8533 !important;
}
[data-tema="gelap"] .menu-ikon-card:nth-child(4) .menu-ikon-circle {
  background: rgba(129, 140, 248, 0.25) !important;
  color: #A5B4FC !important;
}
[data-tema="gelap"] .menu-ikon-card:nth-child(5) .menu-ikon-circle {
  background: rgba(59, 130, 246, 0.25) !important;
  color: #7DD3FC !important;
}
[data-tema="gelap"] .menu-ikon-card:nth-child(6) .menu-ikon-circle {
  background: rgba(14, 165, 233, 0.25) !important;
  color: #7DD3FC !important;
}
[data-tema="gelap"] .menu-ikon-card:nth-child(7) .menu-ikon-circle {
  background: rgba(249, 115, 22, 0.25) !important;
  color: #FDBA74 !important;
}
[data-tema="gelap"] .menu-ikon-card:nth-child(8) .menu-ikon-circle {
  background: rgba(212, 175, 55, 0.25) !important;
  color: #FDE047 !important;
}

/* Scrollbar Admin di Mode Gelap */
[data-tema="gelap"] .admin-isi::-webkit-scrollbar-track {
  background: #0B0F19;
}
[data-tema="gelap"] .admin-isi::-webkit-scrollbar-thumb {
  background: #1E293B;
  border-radius: 4px;
}
[data-tema="gelap"] .admin-isi::-webkit-scrollbar-thumb:hover {
  background: #2563EB;
}

/* Reset & Tata Huruf Dasar --------------------------------------------- */
* {
  box-sizing: border-box;
  min-width: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  -webkit-text-size-adjust: 100%;
  color-scheme: light;
}

html[data-tema="gelap"],
[data-tema="gelap"] {
  color-scheme: dark;
}

*, *::before, *::after {
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Plus Jakarta Sans', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--teks);
  background: var(--latar-dasar);
  line-height: 1.6;
  font-size: 15px;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* FastTouch untuk Tombol & Kontrol Navigasi (Respons Cepat Tanpa Menghambat Scrolling) */
a, button, input, select, textarea, [role="button"], label, .tombol, .tab-kitab-btn, .nav-bawah a, .nav-bawah button {
  touch-action: manipulation;
}

/* Full HD Crisp Image & Icon Rendering */
img, svg {
  image-rendering: -webkit-optimize-contrast;
}

/* Konsistensi Font, Input & Tipografi Universal di Seluruh Halaman */
button, input, select, textarea, optgroup {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
select,
textarea {
  background-color: var(--putih);
  color: var(--tinta);
  border: 1.5px solid var(--garis);
}

h1, h2, h3, h4, h5, h6 {
  font-family: inherit;
  color: var(--tinta);
  font-weight: 750;
  line-height: 1.3;
}

p {
  color: var(--teks);
  line-height: 1.6;
}

strong, b {
  color: var(--tinta);
  font-weight: 700;
}

small, .kecil, .bantuan, .teks-muted {
  color: var(--muted);
}

/* ==========================================================================
   ENGINE 140FPS+ ULTRA-SMOOTH PRO & DISPLAY TAJAM CRYSTAL CLEAR (RETINA/AMOLED)
   Dioptimalkan untuk Layar 120Hz/144Hz/165Hz, GPU Hardware Compositing & Zero Latency
   ========================================================================== */

/* 1. Respon Sentuh 0ms (Zero-Latency Tap di Seluruh Layar HP/PWA/Desktop) */
a, button, input, select, textarea, label, [role="button"],
.tombol, .kartu, .menu-ikon-card, .nav-bawah a, .nav-bawah button,
.sisi-nav a, .tab-item, .chip, [data-menu-toggle], [data-slider-titik] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* 2. Komposisi GPU Layer 3D Mendalam (Solid 140FPS+ tanpa Drop Frame saat Scroll) */
.panel, .kotak, .kartu, .tombol, .fitur, .nav-bawah a, .nav-bawah button,
.sisi-nav a, .chip, .badge, .jadwal-baris, .menu-ikon-card,
.agenda-item, .hero-tokoh, .slider, .bingkai-item, .modal-konten,
.hero-mockup-card, .kartu-pembangunan-dark, .kartu-renungan-mockup {
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* 3. Transisi Fisika Halus 140Hz (Apple Spring Cubic-Bezier 6.9ms Frame Budget) */
.kartu, .tombol, .menu-ikon-card, .nav-bawah a, .nav-bawah button,
.sisi-nav a, .hero-mockup-avatar, .hero-mockup-card, .tab-item {
  transition: transform 0.18s cubic-bezier(0.14, 1, 0.28, 1),
              box-shadow 0.18s cubic-bezier(0.14, 1, 0.28, 1),
              opacity 0.18s cubic-bezier(0.14, 1, 0.28, 1),
              filter 0.18s cubic-bezier(0.14, 1, 0.28, 1);
  will-change: transform;
}

.tombol:hover, .menu-ikon-card:hover {
  transform: translate3d(0, -3px, 0);
}

.tombol:active, .menu-ikon-card:active {
  transform: translate3d(0, 1px, 0) scale(0.975);
  transition-duration: 0.06s;
}

/* 4. Rendering Tajam & Presisi untuk Layar AMOLED / 4K Retina Display */
img, picture, video {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  max-width: 100%;
  height: auto;
}

svg, .ikon, .ikon svg {
  shape-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
  image-rendering: -webkit-optimize-contrast;
  transform: translateZ(0);
}

/* 5. Virtual Scroll Content Visibility untuk List Panjang (Warga, Warta, Berita) */
.grid-berita > article,
.daftar-warta > .warta-item,
.galeri-grid > .galeri-item,
.tabel tr, .log-tabel tr {
  content-visibility: auto;
  contain-intrinsic-size: 0 100px;
}

/* 6. Efek Kaca Glassmorphism Halus Bebas Patah-Patah */
.topbar {
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
}

.tabir, .modal-konten, .hero-badge-firman-mockup {
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  transform: translate3d(0, 0, 0);
}

/* 7. Indikator 140 FPS Ultra-Smooth Pro (Modern Floating Badge) */
.fps-monitor-badge {
  position: fixed;
  bottom: 84px;
  right: 16px;
  z-index: 9998;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px;
  background: rgba(0, 43, 42, 0.90);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(0, 163, 157, 0.50);
  border-radius: 999px;
  color: #E6FDFB;
  font-size: 0.73rem;
  font-weight: 750;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  box-shadow: 0 6px 20px rgba(0, 43, 42, 0.40), 0 0 14px rgba(0, 163, 157, 0.30);
  cursor: pointer;
  user-select: none;
  transition: all 0.22s cubic-bezier(0.14, 1, 0.28, 1);
  transform: translate3d(0, 0, 0);
}

@media (min-width: 900px) {
  .fps-monitor-badge {
    bottom: 22px;
    right: 22px;
  }
}

.fps-monitor-badge:hover {
  transform: translate3d(0, -2px, 0);
  border-color: rgba(243, 112, 33, 0.85);
  box-shadow: 0 8px 24px rgba(0, 43, 42, 0.50), 0 0 18px rgba(243, 112, 33, 0.40);
}

.fps-monitor-badge .fps-titik {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #00A39D;
  box-shadow: 0 0 8px #00A39D, 0 0 14px #06D6A0;
  animation: denyutFps 1.4s infinite ease-in-out;
}

@keyframes denyutFps {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.65; }
}

.fps-monitor-badge.ringkas {
  padding: 6px;
}

.fps-monitor-badge.ringkas .fps-teks {
  display: none;
}


h1, h2, h3, h4 {
  margin: 0 0 0.4em;
  color: var(--tinta);
  line-height: 1.25;
  font-weight: 750;
  overflow-wrap: break-word;
  letter-spacing: -0.025em;
}

h1 {
  font-size: clamp(1.45rem, 1.2rem + 1.1vw, 2.15rem);
}

h2 {
  font-size: clamp(1.20rem, 1.05rem + 0.5vw, 1.48rem);
}

h3 {
  font-size: clamp(1.02rem, 0.98rem + 0.2vw, 1.18rem);
}

img, svg, table {
  max-width: 100%;
}

td, th {
  overflow-wrap: anywhere;
}

p {
  margin: 0 0 0.85em;
}

a {
  color: var(--oranye);
  text-decoration: none;
  transition: all 0.18s ease;
}

a:hover {
  color: var(--oranye-tua);
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}

button {
  font-family: inherit;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.kecil {
  font-size: 0.83rem;
  color: var(--muted);
}

/* Kontainer Utama Presisi Proporsional (Expand Fit to Screen) --------- */
.wrap {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(18px, 3.2vw, 56px) !important;
  padding-right: clamp(18px, 3.2vw, 56px) !important;
  box-sizing: border-box;
}

/* Latar Belakang Dekoratif Bersih & Modern ------------------------------ */
.latar {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
  background: var(--latar-dasar);
  width: 100vw;
  height: 100vh;
  height: 100dvh;
}

.latar-ambient-1 {
  position: absolute;
  top: -150px;
  right: -100px;
  width: 550px;
  height: 550px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, rgba(212, 175, 55, 0) 70%);
  filter: blur(40px);
  pointer-events: none;
}

.latar-ambient-2 {
  position: absolute;
  bottom: -150px;
  left: -100px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(32, 58, 67, 0.05) 0%, rgba(32, 58, 67, 0) 70%);
  filter: blur(50px);
  pointer-events: none;
}

.latar-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.6) 0%, rgba(248, 250, 252, 0.95) 100%);
  pointer-events: none;
}

/* Ikon Inline ----------------------------------------------------------- */
.ikon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  stroke-width: 1.8;
}

.ikon-kecil,
.ikon-sm {
  width: 17px;
  height: 17px;
  stroke-width: 2;
  flex: 0 0 auto;
  display: inline-block;
  vertical-align: middle;
}

.ikon-besar {
  width: 30px;
  height: 30px;
  stroke-width: 1.8;
}

/* Tombol Aksi Mewah & Dinamis ------------------------------------------- */
.tombol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 22px;
  border: 0;
  border-radius: var(--radius-bulat);
  cursor: pointer;
  font-size: 0.93rem;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
  background: var(--oranye-gradasi);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), var(--oranye-glow);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, filter 0.2s ease;
  position: relative;
  overflow: hidden;
}

.tombol::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transform: skewX(-20deg);
  transition: left 0.65s ease;
}

.tombol:hover::after {
  left: 150%;
}

.tombol:hover {
  text-decoration: none;
  transform: translateY(-2px);
  filter: brightness(1.05);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 14px 30px -4px rgba(212, 175, 55, 0.45);
}

.tombol:active {
  transform: translateY(0) scale(0.97);
}

.tombol-gelap {
  background: linear-gradient(135deg, #1D3554, var(--navy));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 8px 20px -3px rgba(11, 23, 40, 0.3);
}

.tombol-gelap:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 12px 26px -4px rgba(11, 23, 40, 0.4);
}

.tombol-hijau {
  background: linear-gradient(135deg, #1D3554, var(--navy));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20), 0 8px 20px -3px rgba(11, 23, 40, 0.35);
}

.tombol-hijau:hover {
  background: linear-gradient(135deg, #243D61, #162740);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), 0 12px 26px -4px rgba(11, 23, 40, 0.45);
}

.tombol-wa {
  background: linear-gradient(135deg, #25D366, #128C7E) !important;
  color: #FFFFFF !important;
  border: 0 !important;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35) !important;
}

.tombol-wa:hover {
  background: linear-gradient(135deg, #2EE06E, #075E54) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.45) !important;
}

.tombol-emas {
  background: var(--emas-gradasi);
  color: #2D2005;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), var(--emas-glow);
}

.tombol-halus {
  background: rgba(255, 255, 255, 0.92);
  color: var(--tinta);
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), var(--bayang-kecil);
  backdrop-filter: blur(12px);
}

.tombol-halus:hover {
  background: #FFFFFF;
  border-color: var(--gold-border);
  color: var(--gold-end);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 6px 18px -2px rgba(212, 175, 55, 0.22);
}

.tombol-bahaya {
  background: #FFF;
  color: var(--merah);
  border: 1.5px solid #FED7D7;
  box-shadow: var(--bayang-kecil);
}

.tombol-bahaya:hover {
  background: var(--merah-lembut);
  border-color: var(--merah);
}

.tombol-kecil {
  padding: 8px 16px;
  font-size: 0.85rem;
}

.tombol-blok {
  width: 100%;
}

/* Kartu Permukaan Modern & Tajam ---------------------------------------- */
.kartu {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(0, 0, 0, 0.03);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.kartu:hover {
  border-color: #CBD5E1;
  box-shadow: 0 12px 28px -6px rgba(15, 23, 42, 0.10), 0 4px 10px rgba(0, 0, 0, 0.04);
}

.kartu-judul {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid #F1F5F9;
}

.kartu-judul h2, .kartu-judul h3 {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--tinta);
}

.kartu-judul a {
  font-size: 0.88rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--gold-text);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.kartu-judul a:hover {
  color: #8C6412;
}

/* Header Kartu Presisi (Beranda & Komponen Dasbor) */
.kartu-judul-presisi {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 4px !important;
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid #F1F5F9 !important;
}

.kartu-judul-atas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.kartu-judul-atas h2,
.kartu-judul-atas h3 {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 750;
  color: var(--tinta);
  line-height: 1.25;
}

.kartu-link-presisi {
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--gold-text);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  text-decoration: none;
  transition: all 0.18s ease;
}

.kartu-link-presisi:hover {
  color: #8C6412;
  transform: translateX(2px);
  text-decoration: none;
}

.kartu-judul-sub {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.4;
}

/* Penyelarasan Mode Gelap Kartu Judul Presisi */
[data-tema="gelap"] .kartu-judul-presisi {
  border-bottom-color: rgba(255, 255, 255, 0.10) !important;
}

[data-tema="gelap"] .kartu-judul-atas h2,
[data-tema="gelap"] .kartu-judul-atas h3 {
  color: #F8FAFC !important;
}

[data-tema="gelap"] .kartu-link-presisi {
  color: #F5D77F !important;
}

[data-tema="gelap"] .kartu-link-presisi:hover {
  color: #FFE599 !important;
}

[data-tema="gelap"] .kartu-judul-sub {
  color: #94A3B8 !important;
}

/* Topbar Publik Modern Sesuai Mockup (Statik & Terkunci di Puncak Layar) ---- */
.header-puncak-terkunci {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(255, 255, 255, 0.98);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  transition: background-color 0.25s ease;
}

[data-tema="gelap"] .header-puncak-terkunci {
  background: #0F172A;
}

.topbar {
  position: relative;
  width: 100%;
  z-index: 10;
  background: rgba(255, 255, 255, 0.98);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.06), 0 2px 6px -1px rgba(0, 0, 0, 0.04);
}

body.publik {
  padding-top: 0;
  overflow-x: clip;
  width: 100%;
}

html {
  scroll-padding-top: 120px;
  overflow-x: clip;
}

@media (max-width: 900px) {
  html {
    scroll-padding-top: 100px;
  }
}

.topbar-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.merek {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}

.merek:hover {
  text-decoration: none;
}

.merek-logo-bulat {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: #000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--gold-start);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

.logo-img-lingkaran {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.logo-mark {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: #002B2A;
  object-fit: cover;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.55), 0 4px 12px rgba(11, 23, 40, 0.15);
}

.logo-mark.kecil {
  width: 38px;
  height: 38px;
}

.merek-teks {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.merek-teks strong {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--tinta);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.merek-teks small {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Navigasi Desktop Modern Sesuai Mockup */
.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex-wrap: nowrap;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.nav a {
  padding: 7px 10px;
  font-size: 0.88rem;
  font-weight: 550;
  color: #475569;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.18s ease;
  border-bottom: 2px solid transparent;
  border-radius: 6px;
}

.nav a:hover {
  color: var(--gold-text);
  background: rgba(0, 43, 42, 0.05);
  text-decoration: none;
}

.nav a.aktif {
  color: var(--gold-text);
  font-weight: 700;
  border-bottom: 2px solid var(--gold-text);
  background: rgba(0, 163, 157, 0.12);
}

.nav-pemisah, .nav-admin {
  display: none;
}

.topbar-aksi {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 10px;
  flex-shrink: 0;
}

.cari-topbar-form {
  display: flex;
  align-items: center;
  position: relative;
}

.cari-topbar-input {
  padding: 7px 34px 7px 14px;
  border-radius: 9999px;
  font-size: 0.85rem;
  border: 1px solid #E2E8F0;
  background: #FFFFFF;
  outline: none;
  width: 140px;
  transition: all 0.22s ease;
  color: var(--tinta);
  font-family: inherit;
}

.cari-topbar-input:focus {
  border-color: var(--gold-start);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
  width: 180px;
}

.cari-topbar-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  padding: 5px;
  cursor: pointer;
  color: #64748B;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.cari-topbar-btn:hover {
  color: var(--gold-text);
}

.tombol-notif-ultah {
  position: relative;
  padding: 8px;
  color: #4B5563;
  background: transparent;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: color 0.2s;
}

.tombol-notif-ultah:hover {
  color: #111827;
}

.notif-badge-merah {
  position: absolute;
  top: 2px;
  right: 2px;
  background: #EF4444;
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 700;
  width: 17px;
  height: 17px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 2px solid #FFFFFF;
}

.tombol-menu-mobile {
  display: none;
  background: transparent;
  border: none;
  padding: 8px;
  color: #374151;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.menu-tabir {
  position: fixed;
  inset: 0;
  background: rgba(0, 15, 15, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease;
}

.menu-tabir.tampil {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 1140px) {
  .nav {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(320px, 86vw);
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: #FFFFFF;
    z-index: 10001;
    flex-direction: column;
    align-items: stretch;
    padding: 20px 18px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.28);
    transform: translate3d(100%, 0, 0);
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
  }
  .nav.terbuka {
    display: flex !important;
    transform: translate3d(0, 0, 0) !important;
  }
  .nav-head-mobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(0, 94, 93, 0.12);
    margin-bottom: 12px;
  }
  .nav-head-judul {
    font-size: 1rem;
    font-weight: 800;
    color: #005E5D;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .nav-tutup-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid #CBD5E1;
    background: #F8FAFC;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .nav-tutup-btn:hover {
    background: #EF4444;
    color: #FFFFFF;
    border-color: #EF4444;
  }
  .nav-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: stretch;
  }
  .nav a {
    padding: 10px 14px;
    font-size: 0.94rem;
    font-weight: 650;
    border-radius: 10px;
    border-bottom: none;
    color: #1E293B;
  }
  .nav a:hover, .nav a.aktif {
    background: rgba(0, 163, 157, 0.12);
    color: #005E5D;
  }
  .nav-tema-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid #E2E8F0;
    background: #F8FAFC;
    font-weight: 650;
    cursor: pointer;
    color: #1E293B;
  }
  .nav-pemisah {
    display: block;
    height: 1px;
    background: rgba(0, 94, 93, 0.12);
    margin: 12px 0;
  }
  .nav-admin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    background: linear-gradient(135deg, #005E5D 0%, #003837 100%);
    color: #FFFFFF !important;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
  }
  .tombol-menu-mobile {
    display: none !important;
  }
  .cari-topbar-form {
    display: none !important;
  }
}

.cari-mini {
  display: none;
}

/* ==========================================================================
   Running Text (Teks Berjalan / Marquee Warta Modern 140FPS+ Pro)
   ========================================================================== */
.running-text-wrap {
  width: 100%;
  background: linear-gradient(90deg, #001F1E 0%, #003635 35%, #004D4B 70%, #002221 100%);
  border-bottom: 2px solid #F37021;
  box-shadow: 0 4px 14px rgba(0, 35, 34, 0.25);
  position: relative;
  z-index: 5;
  overflow: hidden;
  user-select: none;
}

.running-text-in {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 38px;
  padding: 0 16px;
  max-width: 1200px;
  margin: 0 auto;
}

.running-text-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(135deg, #F37021 0%, #E05D10 100%);
  color: #FFFFFF;
  padding: 3px 12px;
  border-radius: var(--radius-bulat, 9999px);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(243, 112, 33, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.35);
  z-index: 2;
}

.running-dot-pulse {
  width: 7px;
  height: 7px;
  background: #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8);
  animation: pulse-dot-anim 1.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-dot-anim {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

.running-text-track {
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  min-width: 0;
  contain: layout paint;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

.running-text-content {
  display: flex !important;
  align-items: center;
  white-space: nowrap;
  width: max-content;
  flex-shrink: 0;
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-animation: running-marquee-scroll 32s linear infinite !important;
  animation: running-marquee-scroll 32s linear infinite !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

@media (hover: hover) and (pointer: fine) {
  .running-text-wrap:hover .running-text-content {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
  }
}

.running-text-item {
  display: inline-flex;
  align-items: center;
  padding-right: 50px;
  font-size: 0.84rem;
  font-weight: 600;
  color: #FFFFFF;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}

@-webkit-keyframes running-marquee-scroll {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes running-marquee-scroll {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }
}

@media (max-width: 640px) {
  .running-text-in {
    height: 35px;
    gap: 8px;
    padding: 0 10px;
  }
  .running-text-badge {
    padding: 2.5px 9px;
    font-size: 0.67rem;
    gap: 5px;
  }
  .running-dot-pulse {
    width: 6px;
    height: 6px;
  }
  .running-text-track {
    mask-image: linear-gradient(90deg, transparent 0%, #000 10px, #000 calc(100% - 10px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10px, #000 calc(100% - 10px), transparent 100%);
  }
  .running-text-item {
    font-size: 0.79rem;
    padding-right: 36px;
  }
}

/* ==========================================================================
   Tombol & Popover Notifikasi Ulang Tahun (Lonceng Modern Sacred Elegance)
   ========================================================================== */
.notif-ultah-bungkus {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.tombol-notif-ultah {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #FFFFFF;
  border: 1.5px solid rgba(212, 175, 55, 0.45);
  color: var(--emas-tua);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 4px 14px -2px rgba(212, 175, 55, 0.22), var(--bayang-kecil);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.tombol-notif-ultah:hover {
  background: #FFFDF7;
  border-color: var(--emas);
  color: #8C6412;
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 8px 22px -3px rgba(212, 175, 55, 0.35);
  text-decoration: none;
}

.tombol-notif-ultah:active {
  transform: translateY(0);
}

.notif-lonceng-ikon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notif-lonceng-ikon .ikon {
  width: 22px;
  height: 22px;
  color: currentColor;
  transition: transform 0.25s ease;
}

.tombol-notif-ultah:hover .notif-lonceng-ikon .ikon {
  transform: rotate(14deg) scale(1.08);
}

/* Lencana Notifikasi (Pulsing Badge) */
.notif-badge {
  position: absolute;
  top: -9px;
  right: -10px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--radius-bulat);
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
  color: #FFFFFF;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #FFFFFF;
  box-shadow: 0 3px 8px rgba(220, 38, 38, 0.45);
}

.notif-badge.hari-ini {
  background: linear-gradient(135deg, #FF4B4B 0%, #DC2626 100%);
  animation: pulsa-lonceng 2s infinite;
}

.notif-badge.bulan-ini {
  background: var(--gold-gradasi);
  color: #0F2027;
  font-weight: 800;
  box-shadow: 0 3px 8px rgba(212, 175, 55, 0.45);
}

@keyframes pulsa-lonceng {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.6);
  }
  70% {
    transform: scale(1.08);
    box-shadow: 0 0 0 7px rgba(220, 38, 38, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);
  }
}

/* Popover Notifikasi Ulang Tahun */
.notif-popover {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: min(340px, calc(100vw - 24px));
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1.5px solid rgba(212, 175, 55, 0.45);
  border-radius: 20px;
  box-shadow: 0 20px 48px -8px rgba(15, 32, 39, 0.18), 0 6px 16px rgba(0, 0, 0, 0.06);
  z-index: 100;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: notif-slide-down 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.notif-popover[hidden] {
  display: none !important;
}

@keyframes notif-slide-down {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.notif-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: linear-gradient(135deg, #FAF8F2 0%, #F5EFE0 100%);
  border-bottom: 1px solid rgba(212, 175, 55, 0.20);
}

.notif-popover-judul {
  display: flex;
  align-items: center;
  gap: 10px;
}

.notif-head-ikon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--emas-gradasi);
  color: #2D2005;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: 0 3px 8px rgba(212, 175, 55, 0.3);
}

.notif-popover-judul strong {
  display: block;
  font-size: 0.92rem;
  color: var(--tinta);
  line-height: 1.25;
}

.notif-popover-judul small {
  font-size: 0.74rem;
  color: var(--muted);
  font-weight: 600;
}

.notif-popover-tutup {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid #E2E8F0;
  background: #FFFFFF;
  color: #64748B;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.notif-popover-tutup:hover {
  background: #F1F5F9;
  color: #0F172A;
}

.notif-popover-isi {
  padding: 12px 14px;
  max-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.notif-grup-label {
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
  color: var(--emas-tua);
}

.notif-grup.hari-ini .notif-grup-label {
  color: #DC2626;
}

.notif-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: #FFFDF8;
  border: 1px solid rgba(212, 175, 55, 0.22);
  margin-bottom: 5px;
}

.notif-grup.hari-ini .notif-item {
  background: #FFF8F8;
  border-color: #FECACA;
}

.notif-tgl-badge {
  font-size: 0.70rem;
  font-weight: 800;
  padding: 4px 7px;
  border-radius: 8px;
  background: var(--emas-gradasi);
  color: #2D2005;
  white-space: nowrap;
  flex-shrink: 0;
  text-align: center;
}

.notif-grup.hari-ini .notif-tgl-badge {
  background: linear-gradient(135deg, #EF4444, #DC2626);
  color: #FFFFFF;
}

.notif-tgl-badge.abu {
  background: #E2E8F0;
  color: #334155;
}

.notif-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.notif-info strong {
  font-size: 0.84rem;
  color: var(--tinta);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notif-info small {
  font-size: 0.73rem;
  color: var(--muted);
}

.notif-grup.kosong p {
  margin: 8px 0;
  text-align: center;
  font-size: 0.84rem;
  color: var(--muted);
}

.notif-popover-kaki {
  padding: 10px 14px;
  background: #FAF8F2;
  border-top: 1px solid rgba(212, 175, 55, 0.18);
  text-align: center;
}

.notif-tautan-semua {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--emas-tua);
  text-decoration: none;
  transition: all 0.18s ease;
}

.notif-tautan-semua:hover {
  color: #8C6412;
  text-decoration: none;
  transform: translateX(2px);
}

/* Kontainer Utama & Seksi ----------------------------------------------- */
.utama {
  padding-top: 26px;
  padding-bottom: 42px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.seksi {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.seksi-judul {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 14px;
  border-bottom: 2px solid rgba(212, 175, 55, 0.2);
  padding-bottom: 8px;
  flex-wrap: wrap;
}

.seksi-judul > div {
  min-width: 0;
  flex: 1 1 200px;
}

.seksi-judul h2 {
  margin: 0;
  color: var(--tinta);
  font-size: clamp(1.15rem, 2vw, 1.38rem);
  line-height: 1.25;
}

.seksi-judul p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.4;
}

.seksi-judul a {
  font-size: 0.84rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--emas-tua);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(212, 175, 55, 0.09);
  border: 1px solid rgba(212, 175, 55, 0.32);
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
  margin-bottom: 2px;
}

.seksi-judul a:hover {
  background: var(--emas);
  color: var(--hijau-gelap);
  border-color: var(--emas);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.25);
  text-decoration: none;
}

@media (max-width: 480px) {
  .seksi-judul {
    gap: 8px 10px;
  }
  .seksi-judul a {
    font-size: 0.80rem;
    padding: 4px 10px;
  }
}

/* Sistem Grid Seimbang (Presisi & Tidak Kelebihan / Melar) -------------- */
.grid {
  display: grid;
  gap: clamp(16px, 1.8vw, 22px);
}

.grid > *, .panel-grid > *, .promo > *, .kaki-in > *, .stat-grid > * {
  min-width: 0;
}

/* Grid 2 Kolom Seimbang: Tampil 2 Kolom di Layar >= 820px */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

@media (max-width: 820px) {
  .grid-2 {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Grid 3 Kolom */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

@media (max-width: 960px) {
  .grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .grid-3 {
    grid-template-columns: 1fr;
  }
}

/* Grid 4 Kolom */
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 1024px) {
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 540px) {
  .grid-4 {
    grid-template-columns: 1fr;
  }
}

.kartu-isi {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Hero Beranda Sinematik Proporsional ----------------------------------- */
.hero {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.hero-panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-besar);
  background: 
    radial-gradient(ellipse at 85% 20%, rgba(212, 175, 55, 0.22) 0%, transparent 58%),
    radial-gradient(circle at 10% 80%, rgba(37, 99, 235, 0.18) 0%, transparent 50%),
    linear-gradient(135deg, #07101C 0%, #0B1728 42%, #162740 80%, #0F2036 100%),
    url('img/gereja.svg') right 4% center/42% no-repeat;
  min-height: 360px;
  padding: clamp(28px, 3.2vw, 42px) clamp(26px, 3.4vw, 46px);
  display: flex;
  align-items: center;
  gap: clamp(24px, 3.2vw, 40px);
  box-shadow: 0 20px 48px -10px rgba(11, 23, 40, 0.50), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(245, 215, 127, 0.28);
}

.hero-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.06) 0%, transparent 45%);
  pointer-events: none;
}

/* Plakat / Kartu Tokoh Pendeta */
.hero-tokoh {
  position: relative;
  flex: 0 0 clamp(260px, 20vw, 280px);
  max-width: 280px;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 20px 44px -8px rgba(0, 0, 0, 0.60), 0 0 0 1px rgba(245, 215, 127, 0.25);
  background: #0B1728;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease;
  border: none;
}

.hero-tokoh:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 52px -6px rgba(0, 0, 0, 0.70), 0 0 0 1.5px rgba(245, 215, 127, 0.4);
}

.hero-foto {
  width: 100%;
  position: relative;
  background: #0B1728;
}

.hero-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 12%;
  aspect-ratio: 3/4;
  border: none;
  outline: none;
}

.hero-nama {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 14px 16px;
  background: linear-gradient(180deg, transparent 0%, rgba(11, 23, 40, 0.72) 24%, rgba(11, 23, 40, 0.94) 62%, rgba(11, 23, 40, 0.99) 100%);
  color: #fff;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 5px;
}

.hero-nama strong,
.hero-nama-teks {
  display: block;
  font-size: clamp(0.96rem, 0.92rem + 0.2vw, 1.05rem);
  font-weight: 750;
  color: #FFFFFF;
  line-height: 1.34;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
  text-wrap: balance;
  text-align: center;
  width: 100%;
}

.hero-badge-firman {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 14px;
  border-radius: var(--radius-bulat);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(11, 23, 40, 0.90);
  color: var(--emas-terang);
  border: 1px solid rgba(245, 215, 127, 0.45);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  margin-top: 2px;
}

.hero-nama small,
.hero-jabatan {
  font-size: 0.72rem;
  font-weight: 700;
  color: #F7E4A8;
  display: block;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  margin: 0;
}

/* Teks Sambutan Hero */
.hero-teks {
  position: relative;
  flex: 1;
  min-width: 0;
  color: #fff;
  margin: 0;
}

.hero-teks .salam {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.80rem;
  font-weight: 750;
  letter-spacing: 2px;
  color: var(--emas-terang);
  text-transform: uppercase;
  background: rgba(245, 215, 127, 0.12);
  border: 1px solid rgba(245, 215, 127, 0.3);
  padding: 4px 12px;
  border-radius: var(--radius-bulat);
  backdrop-filter: blur(8px);
}

.hero-teks h1 {
  color: #fff;
  font-size: clamp(1.45rem, 1.2rem + 1vw, 2.05rem);
  line-height: 1.24;
  margin: 8px 0 12px;
  font-weight: 750;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.hero-teks p {
  color: #E2ECF8;
  font-size: 0.96rem;
  line-height: 1.58;
  font-style: italic;
  font-weight: 400;
}

.hero-aksi {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

/* Kartu Info Kaca Terdekat */
.hero-info {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 18px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

@media (max-width: 900px) {
  .hero-info {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

.hero-info div {
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-kecil);
  padding: 10px 14px;
  color: #EAF2F8;
  font-size: 0.85rem;
  line-height: 1.4;
  border-left: 3px solid var(--emas-terang);
}

.hero-info strong {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--emas-terang);
  font-size: 0.86rem;
  font-weight: 700;
  margin-bottom: 2px;
}

/* 8 Pintasan Fitur (8 Kolom Simetris di Desktop) ------------------------ */
.fitur-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: clamp(8px, 1vw, 14px);
}

@media (max-width: 1100px) {
  .fitur-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }
}

@media (max-width: 640px) {
  .fitur-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

.fitur {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 8px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--radius);
  color: var(--tinta);
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 8px 24px -4px rgba(80, 20, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 1);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease, border-color 0.22s ease;
}

.fitur:hover {
  text-decoration: none;
  transform: translateY(-3px);
  border-color: rgba(212, 175, 55, 0.5);
  box-shadow: 0 16px 32px -4px rgba(212, 175, 55, 0.22), inset 0 1px 0 rgba(255, 255, 255, 1);
}

.fitur-ikon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: linear-gradient(135deg, #FFF6DD, #FCE8B3);
  color: #8C6412;
  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.2);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

.fitur:hover .fitur-ikon {
  transform: scale(1.08);
  box-shadow: 0 6px 16px -2px rgba(212, 175, 55, 0.35);
}

.fitur-ikon.hijau {
  background: linear-gradient(135deg, #EBF3FE, #C3D9FD);
  color: #1D5499;
  box-shadow: inset 0 0 0 1px rgba(29, 84, 153, 0.20);
}

.fitur:hover .fitur-ikon.hijau {
  box-shadow: 0 6px 16px -2px rgba(37, 99, 235, 0.30);
}

.fitur-ikon.biru {
  background: linear-gradient(135deg, #EBF3FE, #D2E4FD);
  color: #1D5499;
  box-shadow: inset 0 0 0 1px rgba(29, 84, 153, 0.18);
}

.fitur:hover .fitur-ikon.biru {
  box-shadow: 0 6px 16px -2px rgba(29, 84, 153, 0.3);
}

.fitur-ikon.emas {
  background: linear-gradient(135deg, #FFF4D6, #FDE29A);
  color: #8C6412;
}

.fitur-ikon.navy {
  background: linear-gradient(135deg, #E2E8F0, #CBD5E1);
  color: #0F172A;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.15);
}

.fitur:hover .fitur-ikon.navy {
  box-shadow: 0 6px 16px -2px rgba(15, 23, 42, 0.25);
}

.fitur-ikon.oranye {
  background: linear-gradient(135deg, #FFE8D6, #FFD1B3);
  color: #D95400;
  box-shadow: inset 0 0 0 1px rgba(255, 107, 0, 0.20);
}

.fitur:hover .fitur-ikon.oranye {
  box-shadow: 0 6px 16px -2px rgba(255, 107, 0, 0.35);
}

/* Slider & Kartu Promo Beranda ------------------------------------------ */
.promo {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 22px;
}

@media (max-width: 960px) {
  .promo {
    grid-template-columns: 1fr;
  }
}

.slider {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--bayang);
  background: #0B1728;
  min-height: 260px;
  border: 1px solid rgba(212, 175, 55, 0.2);
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
  display: flex;
  align-items: center;
}

.slide.aktif {
  opacity: 1;
  position: relative;
}

.slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(11, 23, 40, 0.95) 0%, rgba(11, 23, 40, 0.78) 50%, rgba(11, 23, 40, 0.25) 100%);
}

.slide-teks {
  position: relative;
  z-index: 2;
  padding: clamp(20px, 4vw, 36px) clamp(20px, 4.5vw, 40px);
  max-width: 88%;
  color: #FFFFFF !important;
}

.slide-teks strong {
  display: block;
  font-size: clamp(1.10rem, 3.2vw, 1.42rem);
  line-height: 1.32;
  font-weight: 800;
  color: #FFFFFF !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75);
  letter-spacing: -0.01em;
}

.slide-teks span:not(.slide-badge-kategori) {
  display: block;
  margin-top: 10px;
  font-size: clamp(0.82rem, 2.4vw, 0.92rem);
  color: #E2E8F0 !important;
  opacity: 0.95;
  line-height: 1.55;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

.slide-teks .tombol {
  margin-top: 16px;
}

.slider-nav {
  position: absolute;
  bottom: 14px;
  right: 16px;
  display: flex;
  gap: 6px;
  z-index: 3;
}

.slider-nav button {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.45);
  cursor: pointer;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #002B2A;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
  transition: all 0.18s ease;
  padding: 0;
}

.slider-nav button svg,
.slider-nav button .ikon {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2.4;
  display: block;
}

.slider-nav button:hover {
  background: #FFFFFF;
  transform: scale(1.08);
  border-color: var(--emas);
  color: var(--emas-tua);
}

.slider-nav button:active {
  transform: scale(0.96);
}

/* Mode Gelap: Ikon panah dan tombol tetap terlihat jelas dan berdaya kontras tinggi */
[data-tema="gelap"] .slider-nav button {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(255, 255, 255, 0.6);
  color: #0F172A !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

[data-tema="gelap"] .slider-nav button:hover {
  background: #FFFFFF;
  border-color: var(--emas);
  color: var(--emas-tua) !important;
}

.slider-titik {
  position: absolute;
  bottom: 22px;
  left: 36px;
  display: flex;
  gap: 7px;
  z-index: 3;
}

.slider-titik span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transition: all 0.25s ease;
}

.slider-titik span.aktif {
  background: var(--emas-terang);
  width: 24px;
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(245, 215, 127, 0.6);
}

/* Widget Promo Kanan (Renungan Harian & Warta) */
.promo-kartu {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.promo-kartu .kartu {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex: 1;
  padding: 22px;
}

.promo-kartu .kartu h3 {
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.promo-kartu .kartu p {
  margin: 0 0 10px;
  font-size: 0.89rem;
  color: var(--teks);
  line-height: 1.5;
}

.kartu-ikon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: linear-gradient(135deg, #FDE59C, #F4C444);
  color: #593D00;
  box-shadow: 0 6px 16px -2px rgba(212, 175, 55, 0.3);
}

.kartu-ikon.hijau {
  background: linear-gradient(135deg, #DBEAFE, #BFDBFE);
  color: #1D4ED8;
  box-shadow: 0 6px 16px -2px rgba(37, 99, 235, 0.22);
}

/* Daftar Item (Warta / Renungan) --------------------------------------- */
.daftar {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px;
  border: 1px solid rgba(226, 232, 240, 0.85);
  border-radius: var(--radius-kecil);
  background: #fff;
  color: inherit;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), var(--bayang-kecil);
  transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

.item:hover {
  text-decoration: none;
  border-color: rgba(212, 175, 55, 0.50);
  transform: translateX(4px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), var(--bayang);
}

.item h3 {
  margin: 0;
  color: var(--tinta);
  font-size: 1.02rem;
}

.item p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.5;
}

.item-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.item-meta .tanggal {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 600;
}

/* Badge Kapsul Elegan */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3.5px 12px;
  border-radius: var(--radius-bulat);
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: var(--emas-lembut);
  color: var(--emas-tua);
  border: 1px solid rgba(212, 175, 55, 0.3);
  white-space: nowrap !important;
}

.badge.netral {
  background: var(--hijau-lembut);
  color: var(--hijau);
  border-color: rgba(37, 99, 235, 0.25);
}

.badge.abu {
  background: #F1F5F9;
  color: #475569;
  border-color: #CBD5E1;
}

.badge.merah {
  background: #FEF2F2;
  color: var(--merah);
  border-color: #FECACA;
}

/* Chip Filter */
.chip-geser {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.chip {
  padding: 8px 18px;
  border-radius: var(--radius-bulat);
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font-size: 0.86rem;
  font-weight: 650;
  color: var(--teks);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 14px -2px rgba(80, 20, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 1);
}

.chip:hover {
  text-decoration: none;
  border-color: var(--oranye);
  color: var(--oranye);
  transform: translateY(-1px);
}

.chip.aktif {
  background: var(--gold-gradasi);
  border-color: rgba(212, 175, 55, 0.6);
  color: #0F2027;
  font-weight: 750;
  box-shadow: 0 6px 18px -2px rgba(212, 175, 55, 0.40);
}

[data-tema="gelap"] .chip {
  background: rgba(30, 41, 59, 0.85);
  border-color: rgba(255, 255, 255, 0.14);
  color: #E2E8F0;
  box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

[data-tema="gelap"] .chip:hover {
  border-color: var(--emas);
  color: var(--emas);
}

[data-tema="gelap"] .chip.aktif {
  background: var(--gold-gradasi);
  border-color: rgba(212, 175, 55, 0.7);
  color: #0F2027;
  box-shadow: 0 6px 18px -2px rgba(212, 175, 55, 0.50);
}

/* Tabel Bersih & Presisi ------------------------------------------------ */
.tabel-bungkus {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--garis);
  border-radius: var(--radius-kecil);
  background: #fff;
  width: 100%;
  box-shadow: var(--bayang-kecil);
}

.tabel-tinggi {
  max-height: min(70vh, 720px);
}

.tabel-tinggi thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  box-shadow: inset 0 -1px 0 var(--garis);
}

.tabel-scroll-petunjuk {
  font-size: 0.78rem;
  color: var(--muted);
  margin: 6px 0 0;
}

.tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  min-width: 520px;
}

.tabel th {
  text-align: left;
  padding: 13px 16px;
  background: #F8F9FA;
  color: var(--tinta);
  font-size: 0.78rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1.5px solid var(--garis);
  white-space: nowrap;
}

.tabel td {
  padding: 12px 16px;
  border-bottom: 1px solid #F1EFEA;
  vertical-align: top;
  color: var(--teks);
}

.tabel tbody tr {
  transition: background 0.15s ease;
}

.tabel tbody tr:hover {
  background: #FDFBF6;
}

.tabel tbody tr:last-child td {
  border-bottom: 0;
}

.tabel .kanan {
  text-align: right;
  white-space: nowrap;
}

.nilai-masuk {
  color: var(--hijau);
  font-weight: 700;
}

.nilai-keluar {
  color: var(--merah);
  font-weight: 700;
}

/* Jadwal Ibadah Presisi (Tidak Melar / Tidak Terlalu Lebar) -------------- */
.jadwal-baris {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--radius-kecil);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 14px rgba(80, 20, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 1);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s ease, box-shadow 0.22s ease;
}

.jadwal-baris:hover {
  transform: translateY(-2px);
  border-color: rgba(212, 175, 55, 0.5);
  box-shadow: 0 10px 24px -2px rgba(212, 175, 55, 0.20), inset 0 1px 0 rgba(255, 255, 255, 1);
}

.jadwal-baris .hari {
  flex: 0 0 92px;
  background: linear-gradient(135deg, #FFF8E1 0%, #FEF0C8 100%);
  color: #8C6412;
  font-weight: 750;
  font-size: 0.84rem;
  text-align: center;
  border-radius: 10px;
  padding: 8px 6px;
  border: 1px solid rgba(212, 175, 55, 0.30);
}

.jadwal-baris > div:nth-child(2) {
  flex: 1;
  min-width: 0;
}

.jadwal-baris h3 {
  margin: 0 0 3px;
  font-size: 1.02rem;
}

.jadwal-baris p {
  margin: 0;
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.4;
}

.jadwal-baris .waktu {
  flex: 0 0 auto;
  margin-left: auto;
  font-weight: 750;
  color: #8C6412;
  white-space: nowrap;
  font-size: 0.90rem;
  padding: 6px 12px;
  background: linear-gradient(135deg, #FFF9EB 0%, #FDF3D6 100%);
  border-radius: var(--radius-bulat);
  border: 1px solid rgba(212, 175, 55, 0.35);
}

@media (max-width: 540px) {
  .jadwal-baris {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .jadwal-baris .hari {
    flex: 0 0 auto;
    padding: 5px 12px;
  }
  .jadwal-baris .waktu {
    margin-left: 0;
  }
}

/* Agenda Kegiatan */
.agenda {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.agenda-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--garis);
}

.agenda-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.agenda-tanggal {
  width: 64px;
  flex: 0 0 auto;
  text-align: center;
  background: linear-gradient(135deg, #0B1728, #162740);
  border-radius: 12px;
  padding: 8px 4px;
  color: #fff;
  box-shadow: 0 4px 12px rgba(11, 23, 40, 0.25);
  border: 1px solid rgba(245, 215, 127, 0.25);
}

.agenda-tanggal strong {
  display: block;
  font-size: 1.30rem;
  font-weight: 800;
  line-height: 1;
  color: var(--emas-terang);
}

.agenda-tanggal small {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #D1E5D9;
  display: block;
  margin-top: 3px;
}

.agenda-item h3 {
  margin: 0 0 4px;
  font-size: 1.00rem;
}

.agenda-item p {
  margin: 0;
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.45;
}

/* Unduhan / E-Warta & Liturgi ------------------------------------------- */
.unduhan {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.unduhan-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--radius-kecil);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 14px rgba(80, 20, 0, 0.06);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.unduhan-item:hover {
  transform: translateY(-2px);
  border-color: rgba(212, 175, 55, 0.45);
  box-shadow: 0 8px 24px -2px rgba(212, 175, 55, 0.20);
}

.unduhan-ikon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: #FEF2F2;
  color: #DC2626;
  border: 1px solid #FECACA;
}

.unduhan-ikon.biru {
  background: #EFF6FF;
  color: #2563EB;
  border-color: #BFDBFE;
}

.unduhan-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.unduhan-info strong {
  font-size: 0.94rem;
  color: var(--tinta);
}

.unduhan-info small {
  font-size: 0.79rem;
  color: var(--muted);
  margin-top: 2px;
}

.unduhan a.tombol, .unduhan .tidak-ada {
  margin-left: auto;
}

.unduhan .tidak-ada {
  font-size: 0.80rem;
  color: var(--muted);
  font-style: italic;
}

/* Galeri Dokumentasi ---------------------------------------------------- */
.galeri-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(16px, 1.8vw, 22px);
}

.galeri-item {
  border: 1px solid var(--garis);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--bayang-kecil);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

.galeri-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--bayang-hover);
}

.galeri-item img {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.galeri-item:hover img {
  transform: scale(1.04);
}

.galeri-item div {
  padding: 16px 18px;
}

.galeri-video {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, #162740, #0B1728);
  color: #E2E8F0;
  font-size: 0.94rem;
  font-weight: 600;
}

.galeri-item h3 {
  margin: 0 0 4px;
  font-size: 1.00rem;
}

.galeri-item p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
}

/* Kartu Pendeta / Visi-Misi (Halaman Tentang Kami) ---------------------- */
.kartu-pendeta {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 30px;
  align-items: start;
}

.kartu-pendeta img {
  border-radius: var(--radius);
  aspect-ratio: 3/4;
  object-fit: cover;
  width: 100%;
  background: #0B1728;
  border: none;
  outline: none;
  box-shadow: var(--bayang);
}

.visi-misi {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.daftar-poin {
  margin: 0;
  padding-left: 1.2em;
}

.daftar-poin li {
  margin-bottom: 8px;
  line-height: 1.5;
}

.info-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.info-list .baris {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--garis);
  font-size: 0.90rem;
}

.info-list .baris:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.info-list .baris span:first-child {
  color: var(--muted);
}

.info-list .baris span:last-child {
  font-weight: 650;
  text-align: right;
  color: var(--tinta);
}

/* Ulang Tahun Jemaat (Desain Selebrasi Hangat) -------------------------- */
.ulang-tahun {
  background: 
    radial-gradient(ellipse at top right, rgba(212, 175, 55, 0.15) 0%, transparent 60%),
    linear-gradient(135deg, #FFFFFF 0%, #FFFBF2 60%, #FDF4DE 100%);
  border: 1.5px solid #F1DCB0;
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--bayang-kecil);
  position: relative;
  overflow: hidden;
}

.ulang-tahun h3 {
  margin: 0 0 8px;
  color: #8C6412;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.12rem;
}

.ulang-tahun h3 .ikon {
  color: var(--emas);
}

.daftar-ultah {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 14px 0 0;
}

.daftar-ultah div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.88rem;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #EFE4CC;
  border-radius: var(--radius-kecil);
  padding: 10px 14px;
  box-shadow: 0 2px 6px rgba(140, 100, 18, 0.05);
  transition: transform 0.18s ease;
}

.daftar-ultah div:hover {
  transform: translateX(3px);
  border-color: var(--emas);
}

.daftar-ultah div span:first-child {
  font-weight: 650;
  color: var(--tinta);
}

.daftar-ultah div span:last-child {
  color: var(--muted);
  font-size: 0.82rem;
}

/* Grid & Kartu Presisi Daftar Ulang Tahun Warga (Mobile & Desktop) */
.daftar-ultah-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

@media (max-width: 768px) {
  .daftar-ultah-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

.ultah-presisi-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #FFFFFF;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 14px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  min-width: 0;
  box-sizing: border-box;
}

.ultah-presisi-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 163, 157, 0.35);
  box-shadow: 0 6px 14px rgba(0, 94, 93, 0.08);
}

.ultah-presisi-card.hari-ini {
  border-color: rgba(212, 175, 55, 0.65) !important;
  background: linear-gradient(135deg, rgba(255, 252, 240, 0.98) 0%, #FFFFFF 100%);
  box-shadow: 0 4px 14px rgba(212, 175, 55, 0.15);
}

.ultah-presisi-tgl {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(0, 94, 93, 0.06) 0%, rgba(0, 163, 157, 0.12) 100%);
  border: 1.5px solid rgba(0, 163, 157, 0.24);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 94, 93, 0.05);
}

.ultah-presisi-card.hari-ini .ultah-presisi-tgl {
  border-color: rgba(212, 175, 55, 0.7);
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.22) 0%, rgba(245, 215, 127, 0.12) 100%);
}

.ultah-presisi-hari {
  font-size: 1.15rem;
  font-weight: 850;
  line-height: 1;
  color: #005E5D;
}

.ultah-presisi-card.hari-ini .ultah-presisi-hari {
  color: #B45309;
}

.ultah-presisi-bln {
  font-size: 0.64rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1;
}

.ultah-presisi-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ultah-presisi-nama {
  font-size: 0.90rem;
  font-weight: 750;
  color: var(--tinta);
  line-height: 1.3;
  word-break: break-word;
}

.ultah-presisi-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.badge-rayon-presisi {
  font-size: 0.68rem;
  font-weight: 750;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(0, 94, 93, 0.08);
  color: #005E5D;
  border: 1px solid rgba(0, 163, 157, 0.28);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.badge-umur-presisi {
  font-size: 0.68rem;
  font-weight: 650;
  padding: 2px 8px;
  border-radius: 6px;
  background: #F1F5F9;
  color: #475569;
  border: 1px solid #CBD5E1;
  white-space: nowrap;
}

.badge-ultah-today {
  font-size: 0.66rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 6px;
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  color: #FFFFFF;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.35);
}

/* Dark Mode Penyelarasan */
[data-tema="gelap"] .ultah-presisi-card {
  background: #111827;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

[data-tema="gelap"] .ultah-presisi-card:hover {
  background: #1E293B;
  border-color: #3B82F6;
}

[data-tema="gelap"] .ultah-presisi-card.hari-ini {
  background: linear-gradient(135deg, #0F172A 0%, #111827 100%);
  border-color: rgba(212, 175, 55, 0.5) !important;
}

[data-tema="gelap"] .ultah-presisi-tgl {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.20) 0%, rgba(56, 189, 248, 0.10) 100%);
  border-color: rgba(59, 130, 246, 0.35);
}

[data-tema="gelap"] .ultah-presisi-hari {
  color: #38BDF8;
}

[data-tema="gelap"] .ultah-presisi-card.hari-ini .ultah-presisi-hari {
  color: #F5D77F;
}

[data-tema="gelap"] .ultah-presisi-bln {
  color: #94A3B8;
}

[data-tema="gelap"] .ultah-presisi-nama {
  color: #F8FAFC;
}

[data-tema="gelap"] .badge-rayon-presisi {
  background: rgba(59, 130, 246, 0.22);
  color: #93C5FD;
  border-color: rgba(147, 197, 253, 0.35);
}

[data-tema="gelap"] .badge-umur-presisi {
  background: rgba(255, 255, 255, 0.08);
  color: #CBD5E1;
  border-color: rgba(255, 255, 255, 0.15);
}

/* Kepala Halaman Sub (Page Head Megah & Pas) ---------------------------- */
.page-head {
  background: 
    radial-gradient(ellipse at 88% 25%, rgba(243, 112, 33, 0.22) 0%, transparent 60%),
    radial-gradient(circle at 12% 85%, rgba(0, 163, 157, 0.35) 0%, transparent 50%),
    linear-gradient(135deg, #002B2A 0%, #003837 35%, #005E5D 70%, #007E7D 100%);
  color: #fff;
  border-radius: var(--radius-besar);
  padding: clamp(24px, 2.8vw, 36px) clamp(22px, 3vw, 42px);
  box-shadow: 0 18px 40px -8px rgba(0, 43, 42, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(0, 163, 157, 0.35);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.page-head h1 {
  color: #fff;
  margin-bottom: 5px;
  font-size: clamp(1.18rem, 1rem + 0.6vw, 1.55rem);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.page-head p {
  margin: 0;
  color: #E2ECF8;
  font-size: 0.84rem;
  max-width: 68ch;
  line-height: 1.55;
}

.page-head .remah {
  margin-top: 12px;
  font-size: 0.82rem;
  color: #E2E8F0;
}

.page-head .remah a {
  color: #FFA566;
  font-weight: 700;
}

.page-head .remah a:hover {
  color: #fff;
  text-decoration: underline;
}

/* Daftar Keluarga (Data Jemaat) ---------------------------------------- */
.daftar-keluarga {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kartu-keluarga {
  border: 1px solid var(--garis);
  border-radius: var(--radius-kecil);
  background: #fff;
  overflow: hidden;
  box-shadow: var(--bayang-kecil);
}

.kartu-keluarga > summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  cursor: pointer;
  list-style: none;
  transition: background 0.15s ease;
}

.kartu-keluarga > summary::-webkit-details-marker {
  display: none;
}

.kartu-keluarga > summary:hover {
  background: #FDFBF6;
}

.kartu-keluarga[open] > summary {
  border-bottom: 1px solid var(--garis);
  background: #F8F9FA;
}

.keluarga-ikon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: var(--oranye-lembut);
  color: var(--oranye);
}

.keluarga-teks {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.keluarga-teks strong {
  font-size: 0.95rem;
  color: var(--tinta);
}

.keluarga-teks small {
  font-size: 0.79rem;
  color: var(--muted);
}

/* Batang Statistik ----------------------------------------------------- */
.daftar-stat {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.baris-stat {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) minmax(60px, 2fr) auto;
  gap: 14px;
  align-items: center;
  font-size: 0.86rem;
}

.baris-stat span:first-child {
  color: var(--muted);
}

.batang-stat {
  background: #EFECE3;
  border-radius: var(--radius-bulat);
  height: 9px;
  overflow: hidden;
}

.batang-stat i {
  display: block;
  height: 100%;
  background: var(--emas-gradasi);
  border-radius: var(--radius-bulat);
}

.panel .batang-stat {
  background: #E2E8F0;
}

/* Navigasi Halaman & Paginasi ------------------------------------------ */
.hal-nav {
  margin-top: 6px;
  align-items: center;
}

.hal-nav .chip {
  min-width: 38px;
  text-align: center;
}

.form-hapus-semua {
  display: inline-flex;
}

.tombol[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

/* Notifikasi & Keadaan Kosong (Tatap Muka Proporsional) ----------------- */
.notif {
  padding: 13px 18px;
  border-radius: var(--radius-kecil);
  font-size: 0.90rem;
  font-weight: 600;
  background: var(--emas-lembut);
  color: var(--emas-tua);
  border: 1px solid rgba(216, 168, 82, 0.35);
  box-shadow: var(--bayang-kecil);
}

.notif.galat {
  background: #FEF2F2;
  color: var(--merah);
  border-color: #FECACA;
}

.kosong {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px 28px;
  border: 1.5px dashed var(--garis);
  border-radius: var(--radius-kecil);
  background: #FFFDF9;
  color: var(--muted);
  font-size: 0.88rem;
  text-align: center;
}

.kosong strong {
  color: var(--tinta);
  font-size: 0.96rem;
}

/* Formulir Bersih & Modern ---------------------------------------------- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px;
}

.form-grid.penuh {
  grid-template-columns: 1fr;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field > label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--tinta);
}

.field input[type=text], .field input[type=date], .field input[type=time], .field input[type=number],
.field input[type=email], .field input[type=password], .field input[type=search], .field input[type=url],
.field input[type=tel], .field select,
.filter-baris input, .filter-baris select,
.cari-mini input,
.form-baris input[type=text], .form-baris input[type=password], .form-baris select {
  width: 100%;
  padding: 10px 18px;
  border: 1.5px solid #D8A852;
  box-shadow: 0 0 0 3px rgba(216, 168, 82, 0.18), inset 0 1px 2px rgba(0, 0, 0, 0.02);
  border-radius: var(--radius-bulat, 9999px);
  font-family: inherit;
  font-size: 0.92rem;
  background: #ffffff;
  color: var(--tinta, #0F172A);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.field textarea {
  width: 100%;
  padding: 14px 18px;
  border: 1.5px solid #D8A852;
  box-shadow: 0 0 0 3px rgba(216, 168, 82, 0.18), inset 0 1px 2px rgba(0, 0, 0, 0.02);
  border-radius: 18px;
  font-family: inherit;
  font-size: 0.92rem;
  background: #ffffff;
  color: var(--tinta, #0F172A);
  min-height: 120px;
  resize: vertical;
  line-height: 1.6;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.field input:focus, .field select:focus, .field textarea:focus,
.filter-baris input:focus, .filter-baris select:focus,
.cari-mini input:focus, .form-baris input:focus {
  outline: none;
  border-color: #B88628;
  box-shadow: 0 0 0 4px rgba(216, 168, 82, 0.35), 0 2px 8px rgba(184, 134, 40, 0.15);
  background: #ffffff;
}

.field input:hover:not(:focus), .field select:hover:not(:focus), .field textarea:hover:not(:focus),
.filter-baris input:hover:not(:focus) {
  border-color: #C6923B;
  box-shadow: 0 0 0 3px rgba(216, 168, 82, 0.28);
}

.field .bantuan {
  font-size: 0.78rem;
  color: var(--muted);
}

.form-aksi {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.form-baris {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: flex-end;
}

/* Area Unggah Berkas (Dropzone) ----------------------------------------- */
.dropzone {
  border: 2px dashed #D6CDB7;
  border-radius: var(--radius);
  background: #FFFDF9;
  padding: 28px;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  transition: all 0.2s ease;
}

.dropzone:hover {
  border-color: var(--emas);
  background: #FFFBF0;
}

.dropzone strong {
  color: var(--tinta);
  font-size: 0.98rem;
}

.dropzone input[type=file] {
  display: none;
}

.pratinjau {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}

.pratinjau img {
  width: 96px;
  height: 72px;
  object-fit: cover;
  border-radius: 12px;
  border: 1.5px solid var(--garis);
  box-shadow: var(--bayang-kecil);
}

.field input[type=file] {
  padding: 9px 11px;
  font-size: 0.86rem;
}

/* Kaki Publik Megah (Full Bleed Background, Centered Content) ----------- */
.kaki {
  margin-top: 48px;
  width: 100%;
  background: 
    radial-gradient(ellipse at 50% 0%, rgba(243, 112, 33, 0.16) 0%, transparent 55%),
    linear-gradient(180deg, #002B2A 0%, #001A19 100%);
  color: #E2E8F0;
  border-top: 3px solid #F37021;
}

.kaki-in {
  display: grid;
  grid-template-columns: 1.15fr 1.5fr 1.15fr;
  gap: 32px;
  align-items: center;
  padding-top: 38px;
  padding-bottom: 38px;
}

.kaki-merek {
  display: flex;
  align-items: center;
  gap: 16px;
}

.kaki-merek strong {
  color: #fff;
  display: block;
  font-size: 1.04rem;
  line-height: 1.35;
}

.kaki p {
  margin: 0 0 4px;
  font-size: 0.86rem;
}

.kaki a {
  color: #DDE8DF;
  text-decoration: none;
  transition: color 0.18s ease;
}

.kaki a:hover {
  color: #FFA566;
  text-decoration: none;
}

.kaki-unduh {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

.kaki-unduh a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-kecil);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(0, 163, 157, 0.25);
  font-size: 0.82rem;
  font-weight: 550;
  line-height: 1.25;
  color: #EBF3ED;
  transition: all 0.2s ease;
  backdrop-filter: blur(8px);
}

.kaki-unduh a:hover {
  background: rgba(0, 163, 157, 0.2);
  border-color: rgba(243, 112, 33, 0.5);
  transform: translateY(-2px);
  color: #fff;
}

.kaki-unduh a .ikon {
  flex-shrink: 0;
  color: #FFA566;
}

.kaki-kanan {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 12px;
}

.kaki-quote {
  margin: 0;
  font-style: italic;
  color: #FFA566;
  font-size: 0.92rem;
  line-height: 1.5;
  font-weight: 500;
}

.kaki-links {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  font-size: 0.84rem;
}

.kaki-links a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  border-radius: var(--radius-bulat);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #E2ECE5;
  font-weight: 550;
  text-decoration: none;
  backdrop-filter: blur(8px);
  transition: all 0.2s ease;
}

.kaki-links a:hover {
  background: rgba(255, 255, 255, 0.20);
  border-color: rgba(245, 215, 127, 0.5);
  color: #fff;
  transform: translateY(-2px);
}

.kaki-links a .ikon {
  color: var(--emas-terang);
}

.kaki-links .kaki-admin-btn {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(245, 215, 127, 0.3);
  color: #fff;
}

.kaki-links .kaki-admin-btn:hover {
  background: var(--oranye-gradasi);
  color: #fff;
  border-color: transparent;
}

.kaki-links .kaki-admin-btn:hover .ikon {
  color: #fff;
}

.kaki-bawah {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 20px;
  padding-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.kaki-bawah p {
  margin: 0;
  color: #9AB5A3;
  font-size: 0.82rem;
}

.kaki-bawah a {
  color: #9AB5A3;
}

.kaki-bawah a:hover {
  color: var(--emas-terang);
}

.kaki-bawah-kiri {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.kaki-badge-pengunjung {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 9999px;
  font-size: 0.78rem;
  color: #D1E7DD;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.kaki-badge-pengunjung strong {
  color: #FFFFFF;
  font-weight: 700;
}

.dot-kunjungan-aktif {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 8px #10B981;
  animation: pulseKunjungan 2s infinite;
}

@keyframes pulseKunjungan {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 5px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.pemisah-kunjungan {
  color: rgba(255, 255, 255, 0.4);
  margin: 0 2px;
}

/* ==========================================================================
   Notifikasi Pembaruan Aplikasi PWA Real-Time (Kapsul Minimalis)
   ========================================================================== */
.notif-update-pwa {
  position: fixed;
  top: calc(16px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%) translateY(-130%);
  width: auto;
  max-width: calc(100vw - 28px);
  z-index: 100000;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  opacity: 0;
  pointer-events: none;
}

.notif-update-pwa.aktif {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.notif-update-pwa[hidden] {
  display: none !important;
}

.btn-update-pwa-kapsul {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.97) 0%, rgba(30, 41, 59, 0.97) 100%);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1.5px solid rgba(243, 112, 33, 0.75);
  border-radius: 999px;
  padding: 8px 18px 8px 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35), 0 0 20px rgba(243, 112, 33, 0.35);
  color: #FFFFFF !important;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 750;
  letter-spacing: 0.01em;
  transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
}

.btn-update-pwa-kapsul:hover {
  filter: brightness(1.1);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.40), 0 0 24px rgba(243, 112, 33, 0.50);
}

.btn-update-pwa-kapsul:active {
  transform: scale(0.95);
  filter: brightness(0.92);
}

.btn-update-pwa-ikon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F37021 0%, #D95300 100%);
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(243, 112, 33, 0.5);
  flex-shrink: 0;
  animation: putar-ikon-update 2.8s linear infinite;
}

.btn-update-pwa-teks {
  color: #FFFFFF;
  font-size: 0.84rem;
  font-weight: 750;
  line-height: 1;
}

@keyframes putar-ikon-update {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(90deg); }
  50% { transform: rotate(180deg); }
  75% { transform: rotate(270deg); }
  100% { transform: rotate(360deg); }
}

@media (max-width: 480px) {
  .btn-update-pwa-kapsul {
    padding: 7px 14px 7px 8px;
    gap: 8px;
  }
  .btn-update-pwa-ikon {
    width: 24px;
    height: 24px;
  }
  .btn-update-pwa-ikon svg {
    width: 13px;
    height: 13px;
  }
  .btn-update-pwa-teks {
    font-size: 0.78rem;
  }
}

/* Bar Aplikasi PWA (Pasang Aplikasi & Mode Offline) -------------------- */
.app-bar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 55;
  bottom: calc(78px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: min(680px, calc(100vw - 24px));
  padding: 11px 15px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid var(--garis);
  box-shadow: 0 16px 36px rgba(11, 23, 40, 0.25);
}

.app-bar[hidden] {
  display: none;
}

.app-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 650;
  color: #8C6412;
  background: var(--emas-lembut);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: var(--radius-bulat);
  padding: 6px 14px;
}

.app-status[hidden] {
  display: none;
}

@media (min-width: 761px) {
  .app-bar {
    left: auto;
    right: 24px;
    transform: none;
    bottom: 24px;
  }
}

/* Petunjuk Visual Singkat Pasang Shortcut iOS ------------------------- */
.petunjuk-ios-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  animation: petunjukFadeIn 0.25s ease-out;
}
.petunjuk-ios-overlay.fade-out {
  opacity: 0;
  transition: opacity 0.2s ease-in;
}
.petunjuk-ios-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 23, 40, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.petunjuk-ios-card {
  position: relative;
  z-index: 2;
  width: min(420px, calc(100vw - 32px));
  margin-bottom: calc(18px + env(safe-area-inset-bottom));
  background: #FFFFFF;
  border-radius: 16px;
  padding: 18px 20px 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
  border: 1.5px solid rgba(212, 175, 55, 0.45);
}
.petunjuk-ios-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.petunjuk-ios-title {
  font-size: 1rem;
  font-weight: 750;
  color: #003837;
}
.petunjuk-ios-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: #64748B;
  cursor: pointer;
  padding: 0 4px;
}
.petunjuk-ios-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.88rem;
  color: #334155;
  line-height: 1.45;
}
.petunjuk-ios-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.petunjuk-ios-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  background: #003837;
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 50%;
  margin-top: 1px;
  flex-shrink: 0;
}
.petunjuk-ios-arrow-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px dashed rgba(0, 56, 55, 0.15);
  color: #D4AF37;
}
.petunjuk-ios-arrow-text {
  font-size: 0.8rem;
  font-weight: 700;
  color: #003837;
  margin-bottom: 4px;
}
.petunjuk-ios-arrow-icon {
  animation: pantulBawah 1.2s infinite ease-in-out;
}
@keyframes pantulBawah {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}
@keyframes petunjukFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
[data-tema="gelap"] .petunjuk-ios-card {
  background: #0f172a;
  color: #f1f5f9;
  border-color: rgba(212, 175, 55, 0.4);
}
[data-tema="gelap"] .petunjuk-ios-title {
  color: #f8fafc;
}
[data-tema="gelap"] .petunjuk-ios-body {
  color: #cbd5e1;
}
[data-tema="gelap"] .petunjuk-ios-num {
  background: #D4AF37;
  color: #0f172a;
}
[data-tema="gelap"] .petunjuk-ios-arrow-text {
  color: #f8fafc;
}

/* Tabir / Backdrop Menu Mobile & Popover ----------------------------- */
.menu-tabir {
  position: fixed;
  inset: 0;
  background: rgba(11, 23, 40, 0.55);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 490;
  opacity: 0;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.menu-tabir.tampil {
  opacity: 1;
  pointer-events: auto;
}

.nav-head-mobile {
  display: none !important;
}

.nav-item-ikon {
  display: none;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Navigasi Bawah Mobile / PWA (Floating Frosted Bar) ------------------- */
.nav-bawah {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border-top: 1px solid #E2E8F0;
  padding: 6px 6px calc(8px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -4px 24px rgba(15, 32, 39, 0.08);
  width: 100%;
}

.nav-bawah a, .nav-bawah button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 0;
  background: none;
  padding: 6px 2px 5px;
  font-size: 0.65rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  text-decoration: none;
  border-radius: 14px;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-appearance: none;
  appearance: none;
  line-height: 1.15;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.nav-bawah a .ikon, .nav-bawah button .ikon {
  width: 22px;
  height: 22px;
  stroke-width: 1.8;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
}

.nav-bawah a:hover, .nav-bawah button:hover {
  text-decoration: none;
  color: var(--bni-teal);
}

.nav-bawah a:active, .nav-bawah button:active {
  transform: scale(0.92);
}

.nav-bawah a.aktif, .nav-bawah button.aktif {
  color: #ffffff;
  background: var(--bni-orange-gradasi);
  border: 1px solid rgba(243, 112, 33, 0.75);
  box-shadow: 0 4px 16px rgba(243, 112, 33, 0.40);
  font-weight: 800;
}

.nav-bawah a.aktif .ikon, .nav-bawah button.aktif .ikon {
  color: #ffffff;
  stroke: #ffffff;
  stroke-width: 2.2;
  transform: scale(1.10);
}

/* ==========================================================================
   Panel Pengurus (Admin Modern Slate-Navy Dashboard)
   ========================================================================== */
body.admin {
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  background: var(--latar-dasar);
  color: var(--teks);
  font-size: 15px;
  margin: 0;
  padding: 0;
}

[data-tema="gelap"] body.admin {
  background: #0B0F19 !important;
  color: #E2E8F0 !important;
}

.admin-shell {
  display: flex;
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  overflow: hidden;
  position: relative;
}

.admin-sisi {
  width: 255px;
  min-width: 255px;
  max-width: 255px;
  flex: 0 0 255px;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  overflow: hidden !important;
  overflow-y: hidden !important;
  background: linear-gradient(180deg, #002221 0%, #003837 55%, #004D4C 100%);
  color: #CBD5E1;
  padding: 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-right: 1px solid rgba(0, 163, 157, 0.25);
  box-shadow: 4px 0 24px rgba(0, 35, 34, 0.35);
  z-index: 50;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  left: 0;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.admin-sisi::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
.admin-sisi::-webkit-scrollbar-track {
  display: none !important;
}
.admin-sisi::-webkit-scrollbar-thumb {
  display: none !important;
}

.sisi-merek {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 6px 6px;
  border-bottom: 1px solid rgba(0, 163, 157, 0.20);
  flex-shrink: 0;
}

.sisi-merek .logo-mark {
  width: 30px !important;
  height: 30px !important;
  flex-shrink: 0;
}

.sisi-merek strong {
  display: block;
  color: #fff;
  font-size: 0.81rem;
  letter-spacing: 0.02em;
  font-weight: 750;
  line-height: 1.15;
}

.sisi-merek small {
  font-size: 0.65rem;
  color: #00A39D;
  letter-spacing: 0.05em;
  font-weight: 700;
}

.sisi-nav {
  display: flex;
  flex-direction: column;
  gap: 1.5px;
  flex: 1 1 auto;
  overflow: hidden !important;
}

.sisi-nav a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 10px;
  border-radius: var(--radius-bulat, 9999px);
  color: #CBD5E1;
  font-size: 0.77rem;
  font-weight: 550;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(0, 163, 157, 0.22);
  box-shadow: 0 0 0 1px rgba(0, 163, 157, 0.06), 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
  line-height: 1.35;
}

.sisi-nav a .ikon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: #CBD5E1;
  transition: color 0.16s;
}

.sisi-nav a span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sisi-nav a:hover {
  background: rgba(0, 163, 157, 0.22);
  color: #FFFFFF;
  border-color: #00A39D;
  box-shadow: 0 0 0 2px rgba(0, 163, 157, 0.3), 0 2px 6px rgba(0, 0, 0, 0.25);
  transform: translateX(2px);
}

.sisi-nav a:hover .ikon {
  color: #00A39D;
}

.sisi-nav a.aktif {
  background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
  color: #9A3412;
  font-weight: 800;
  border: 1.5px solid #F37021;
  box-shadow: 0 0 0 3px rgba(243, 112, 33, 0.30), 0 4px 12px rgba(243, 112, 33, 0.20);
}

.sisi-nav a.aktif .ikon {
  color: #F37021;
  stroke: #F37021;
}

.sisi-keluar {
  margin-top: 3px !important;
  padding: 3px 10px !important;
  font-size: 0.77rem !important;
  border: 1px solid rgba(248, 113, 113, 0.3) !important;
  box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.1) !important;
  background: rgba(248, 113, 113, 0.08) !important;
  color: #FCA5A5 !important;
  flex-shrink: 0;
}

.sisi-keluar .ikon {
  color: #FCA5A5 !important;
}

.sisi-keluar:hover {
  background: rgba(248, 113, 113, 0.22) !important;
  border-color: #EF4444 !important;
  box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.3) !important;
  color: #FFFFFF !important;
  transform: translateX(2px);
}

.sisi-keluar:hover .ikon {
  color: #FFFFFF !important;
}

/* ==========================================================================
   IKON 3D EMBOSS GLASS (MODERN, ELEGAN & WARNA-WARNI) PANEL ADMIN
   ========================================================================== */
.menu-ikon-3d {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 7px;
  position: relative;
  flex-shrink: 0;
  backdrop-filter: blur(8px) saturate(160%);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  border-top: 1.2px solid rgba(255, 255, 255, 0.85);
  border-left: 1.2px solid rgba(255, 255, 255, 0.55);
  border-right: 1px solid rgba(0, 0, 0, 0.25);
  border-bottom: 1.2px solid rgba(0, 0, 0, 0.45);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.22s ease;
  overflow: hidden;
  box-sizing: border-box;
}

/* Kilauan lengkung kaca atas (Specular Glass Arc Highlight) */
.menu-ikon-3d::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 1.5px;
  right: 1.5px;
  height: 44%;
  border-radius: 5px 5px 3px 3px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.15) 80%, transparent 100%);
  pointer-events: none;
  z-index: 2;
}

/* Bayangan dalam bawah untuk efek bevel 3D emboss mendalam */
.menu-ikon-3d::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 38%;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.32) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

/* SVG di dalam wadah 3D */
.menu-ikon-3d .ikon,
.menu-ikon-3d svg {
  width: 13px !important;
  height: 13px !important;
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
  fill: none !important;
  stroke-width: 2.2 !important;
  position: relative;
  z-index: 3;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.70));
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Ukuran lebih besar jika ditentukan (mis. pada kartu pengaturan) */
.menu-ikon-3d[style*="34px"] .ikon,
.menu-ikon-3d[style*="34px"] svg {
  width: 18px !important;
  height: 18px !important;
}

/* Interaksi hover & aktif pada sidebar */
.sisi-nav a:hover .menu-ikon-3d,
.admin-nav-bawah a:hover .menu-ikon-3d,
.admin-welcome-actions a:hover .menu-ikon-3d {
  transform: scale(1.15) translateY(-1px);
  filter: brightness(1.15);
}

.sisi-nav a.aktif .menu-ikon-3d,
.admin-nav-bawah a.aktif .menu-ikon-3d {
  transform: scale(1.16);
  filter: brightness(1.10);
  border-color: rgba(255, 255, 255, 0.95);
  box-shadow: 
    inset 0 1.5px 2px rgba(255, 255, 255, 0.95),
    inset 0 -1.5px 2px rgba(0, 0, 0, 0.45),
    0 4px 12px rgba(0, 0, 0, 0.40);
}

.sisi-nav a.aktif .menu-ikon-3d .ikon,
.sisi-nav a.aktif .menu-ikon-3d svg {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
}

/* Fallback untuk link sisi-nav */
.sisi-nav a .menu-ikon-3d {
  background: linear-gradient(145deg, #00A39D 0%, #005E5D 100%);
  box-shadow: inset 0 1.5px 1.5px rgba(255,255,255,0.85), inset 0 -1.5px 2px rgba(0,0,0,0.4), 0 2px 6px rgba(0,163,157,0.45);
}

/* PALET 3D EMBOSS GLASS WARNA-WARNI PER MENU */
/* 1. Dasbor — Electric Sapphire Blue */
.menu-ikon-index {
  background: linear-gradient(145deg, #3B82F6 0%, #1D4ED8 100%) !important;
  box-shadow: inset 0 1.5px 1.5px rgba(255,255,255,0.85), inset 0 -1.5px 2px rgba(0,0,0,0.4), 0 2px 6px rgba(59,130,246,0.45) !important;
}

/* 2. Warga Jemaat — Emerald Jade */
.menu-ikon-warga {
  background: linear-gradient(145deg, #10B981 0%, #047857 100%) !important;
  box-shadow: inset 0 1.5px 1.5px rgba(255,255,255,0.85), inset 0 -1.5px 2px rgba(0,0,0,0.4), 0 2px 6px rgba(16,185,129,0.45) !important;
}

/* 3. PHMJ — Imperial Gold */
.menu-ikon-phmj {
  background: linear-gradient(145deg, #F59E0B 0%, #B45309 100%) !important;
  box-shadow: inset 0 1.5px 1.5px rgba(255,255,255,0.85), inset 0 -1.5px 2px rgba(0,0,0,0.4), 0 2px 6px rgba(245,158,11,0.45) !important;
}

/* 4. Majelis Jemaat — Royal Amethyst */
.menu-ikon-majelis {
  background: linear-gradient(145deg, #8B5CF6 0%, #6D28D9 100%) !important;
  box-shadow: inset 0 1.5px 1.5px rgba(255,255,255,0.85), inset 0 -1.5px 2px rgba(0,0,0,0.4), 0 2px 6px rgba(139,92,246,0.45) !important;
}

/* 5. Renungan Harian — Radiant Amber */
.menu-ikon-renungan {
  background: linear-gradient(145deg, #F97316 0%, #C2410C 100%) !important;
  box-shadow: inset 0 1.5px 1.5px rgba(255,255,255,0.85), inset 0 -1.5px 2px rgba(0,0,0,0.4), 0 2px 6px rgba(249,115,22,0.45) !important;
}

/* 6. Warta Jemaat — Ocean Azure */
.menu-ikon-warta {
  background: linear-gradient(145deg, #0EA5E9 0%, #0369A1 100%) !important;
  box-shadow: inset 0 1.5px 1.5px rgba(255,255,255,0.85), inset 0 -1.5px 2px rgba(0,0,0,0.4), 0 2px 6px rgba(14,165,233,0.45) !important;
}

/* 7. Jadwal Ibadah & Pelayanan — Vivid Crimson Rose */
.menu-ikon-jadwal {
  background: linear-gradient(145deg, #F43F5E 0%, #BE123C 100%) !important;
  box-shadow: inset 0 1.5px 1.5px rgba(255,255,255,0.85), inset 0 -1.5px 2px rgba(0,0,0,0.4), 0 2px 6px rgba(244,63,94,0.45) !important;
}

/* 8. Multimedia — Neon Cyber Cyan */
.menu-ikon-multimedia {
  background: linear-gradient(145deg, #06B6D4 0%, #0F766E 100%) !important;
  box-shadow: inset 0 1.5px 1.5px rgba(255,255,255,0.85), inset 0 -1.5px 2px rgba(0,0,0,0.4), 0 2px 6px rgba(6,182,212,0.45) !important;
}

/* 9. Kegiatan — Vivid Lime Life */
.menu-ikon-kegiatan {
  background: linear-gradient(145deg, #84CC16 0%, #4D7C0F 100%) !important;
  box-shadow: inset 0 1.5px 1.5px rgba(255,255,255,0.85), inset 0 -1.5px 2px rgba(0,0,0,0.4), 0 2px 6px rgba(132,204,22,0.45) !important;
}

/* 10. Banner Informasi — Electric Fuchsia */
.menu-ikon-banner {
  background: linear-gradient(145deg, #EC4899 0%, #BE185D 100%) !important;
  box-shadow: inset 0 1.5px 1.5px rgba(255,255,255,0.85), inset 0 -1.5px 2px rgba(0,0,0,0.4), 0 2px 6px rgba(236,72,153,0.45) !important;
}

/* 11. Dokumentasi Kegiatan — Deep Cosmic Indigo */
.menu-ikon-dokumentasi {
  background: linear-gradient(145deg, #6366F1 0%, #4338CA 100%) !important;
  box-shadow: inset 0 1.5px 1.5px rgba(255,255,255,0.85), inset 0 -1.5px 2px rgba(0,0,0,0.4), 0 2px 6px rgba(99,102,241,0.45) !important;
}

/* 12. E-Warta / Bulletin — Mystic Marine Teal */
.menu-ikon-media {
  background: linear-gradient(145deg, #14B8A6 0%, #0F766E 100%) !important;
  box-shadow: inset 0 1.5px 1.5px rgba(255,255,255,0.85), inset 0 -1.5px 2px rgba(0,0,0,0.4), 0 2px 6px rgba(20,184,166,0.45) !important;
}

/* 13. Liturgi — Deep Orchid Purple */
.menu-ikon-liturgi {
  background: linear-gradient(145deg, #A855F7 0%, #7E22CE 100%) !important;
  box-shadow: inset 0 1.5px 1.5px rgba(255,255,255,0.85), inset 0 -1.5px 2px rgba(0,0,0,0.4), 0 2px 6px rgba(168,85,247,0.45) !important;
}

/* 14. Kitab & Pujian — Sunset Mandarin */
.menu-ikon-kitab {
  background: linear-gradient(145deg, #FB923C 0%, #EA580C 100%) !important;
  box-shadow: inset 0 1.5px 1.5px rgba(255,255,255,0.85), inset 0 -1.5px 2px rgba(0,0,0,0.4), 0 2px 6px rgba(251,146,60,0.45) !important;
}

/* 15. Media (YouTube/FB) — Ruby Scarlet */
.menu-ikon-kanal {
  background: linear-gradient(145deg, #EF4444 0%, #B91C1C 100%) !important;
  box-shadow: inset 0 1.5px 1.5px rgba(255,255,255,0.85), inset 0 -1.5px 2px rgba(0,0,0,0.4), 0 2px 6px rgba(239,68,68,0.45) !important;
}

/* 16. Kas Jemaat — Emerald Treasury */
.menu-ikon-kas {
  background: linear-gradient(145deg, #22C55E 0%, #15803D 100%) !important;
  box-shadow: inset 0 1.5px 1.5px rgba(255,255,255,0.85), inset 0 -1.5px 2px rgba(0,0,0,0.4), 0 2px 6px rgba(34,197,94,0.45) !important;
}

/* 17. WhatsApp Ultah — WA Gateway Glow */
.menu-ikon-wa-ultah {
  background: linear-gradient(145deg, #25D366 0%, #128C7E 100%) !important;
  box-shadow: inset 0 1.5px 1.5px rgba(255,255,255,0.85), inset 0 -1.5px 2px rgba(0,0,0,0.4), 0 2px 6px rgba(37,211,102,0.45) !important;
}

/* 18. Laporan — Royal Cobalt */
.menu-ikon-laporan {
  background: linear-gradient(145deg, #2563EB 0%, #1E40AF 100%) !important;
  box-shadow: inset 0 1.5px 1.5px rgba(255,255,255,0.85), inset 0 -1.5px 2px rgba(0,0,0,0.4), 0 2px 6px rgba(37,99,235,0.45) !important;
}

/* 19. Ekspor & Cadangan — Bronze Honey */
.menu-ikon-ekspor {
  background: linear-gradient(145deg, #D97706 0%, #92400E 100%) !important;
  box-shadow: inset 0 1.5px 1.5px rgba(255,255,255,0.85), inset 0 -1.5px 2px rgba(0,0,0,0.4), 0 2px 6px rgba(217,119,6,0.45) !important;
}

/* 20. Unduh ZIP Proyek — Mint Forest */
.menu-ikon-unduh-proyek {
  background: linear-gradient(145deg, #10B981 0%, #065F46 100%) !important;
  box-shadow: inset 0 1.5px 1.5px rgba(255,255,255,0.85), inset 0 -1.5px 2px rgba(0,0,0,0.4), 0 2px 6px rgba(16,185,129,0.45) !important;
}

/* 21. Video Dokumentasi — Velvet Crimson */
.menu-ikon-video_dokumentasi {
  background: linear-gradient(145deg, #E11D48 0%, #881337 100%) !important;
  box-shadow: inset 0 1.5px 1.5px rgba(255,255,255,0.85), inset 0 -1.5px 2px rgba(0,0,0,0.4), 0 2px 6px rgba(225,29,72,0.45) !important;
}

/* 22. Pusat Keamanan — Garnet Shield */
.menu-ikon-keamanan {
  background: linear-gradient(145deg, #DC2626 0%, #7F1D1D 100%) !important;
  box-shadow: inset 0 1.5px 1.5px rgba(255,255,255,0.85), inset 0 -1.5px 2px rgba(0,0,0,0.4), 0 2px 6px rgba(220,38,38,0.45) !important;
}

/* 23. Log Login & Aktivitas — Indigo Cyber */
.menu-ikon-log-login {
  background: linear-gradient(145deg, #6366F1 0%, #4338CA 100%) !important;
  box-shadow: inset 0 1.5px 1.5px rgba(255,255,255,0.85), inset 0 -1.5px 2px rgba(0,0,0,0.4), 0 2px 6px rgba(99,102,241,0.45) !important;
}

/* 24. Pengaturan — Platinum Slate */
.menu-ikon-pengaturan {
  background: linear-gradient(145deg, #64748B 0%, #334155 100%) !important;
  box-shadow: inset 0 1.5px 1.5px rgba(255,255,255,0.85), inset 0 -1.5px 2px rgba(0,0,0,0.4), 0 2px 6px rgba(100,116,139,0.45) !important;
}

/* 24. Logout — Sunset Fire */
.menu-ikon-logout {
  background: linear-gradient(145deg, #EF4444 0%, #991B1B 100%) !important;
  box-shadow: inset 0 1.5px 1.5px rgba(255,255,255,0.85), inset 0 -1.5px 2px rgba(0,0,0,0.4), 0 2px 6px rgba(239,68,68,0.45) !important;
}

/* 25. Menu Toggle Nav Bawah — Sky Glaze */
.menu-ikon-menu {
  background: linear-gradient(145deg, #0EA5E9 0%, #0369A1 100%) !important;
  box-shadow: inset 0 1.5px 1.5px rgba(255,255,255,0.85), inset 0 -1.5px 2px rgba(0,0,0,0.4), 0 2px 6px rgba(14,165,233,0.45) !important;
}

/* Ikon 3D pada tombol welcome actions di Dasbor */
.admin-welcome-actions .menu-ikon-3d {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 6px;
  margin-right: 4px;
}
.admin-welcome-actions .menu-ikon-3d .ikon,
.admin-welcome-actions .menu-ikon-3d svg {
  width: 12px !important;
  height: 12px !important;
}

/* Ikon 3D pada navigasi bawah mobile */
.admin-nav-bawah .menu-ikon-3d {
  width: 24px;
  height: 24px;
  min-width: 24px;
  border-radius: 8px;
  margin-bottom: 2px;
}
.admin-nav-bawah .menu-ikon-3d .ikon,
.admin-nav-bawah .menu-ikon-3d svg {
  width: 14px !important;
  height: 14px !important;
}

/* Layout Dua Kolom Pendeta: Form di Kiri, Preview Statik Bebas-Scroll (Fixed) di Kanan */
.admin-grid-pendeta {
  position: relative;
  min-height: 520px;
}

@media (min-width: 960px) {
  .admin-grid-pendeta {
    display: block !important;
    padding-right: 350px !important;
  }
  .admin-preview-statik,
  .admin-preview-statik-tab,
  .panel.admin-preview-statik,
  .panel.admin-preview-statik-tab {
    position: fixed !important;
    top: 110px !important;
    right: clamp(18px, 2.5vw, 36px) !important;
    width: 320px !important;
    max-width: 320px !important;
    z-index: 20 !important;
    margin: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
    will-change: auto !important;
    box-shadow: 0 10px 30px rgba(0, 43, 42, 0.12) !important;
  }
}

@media (max-width: 959px) {
  .admin-grid-pendeta {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    padding-right: 0 !important;
  }
  .admin-preview-statik,
  .admin-preview-statik-tab,
  .panel.admin-preview-statik,
  .panel.admin-preview-statik-tab {
    position: static !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}

/* Pastikan tab tersembunyi benar-benar tertutup */
[hidden], [data-tab-isi][hidden] {
  display: none !important;
}

/* Banner Header Statik & Terkunci di Bawah Topbar Admin */
.admin-banner-statik {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0px !important;
  z-index: 20 !important;
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1.5px solid rgba(0, 163, 157, 0.30) !important;
  box-shadow: 0 4px 14px rgba(0, 43, 42, 0.06) !important;
  margin-bottom: 16px !important;
}

/* Responsif Layar Laptop Pendek (Tinggi Layar <= 740px) */
@media (max-height: 740px) {
  .admin-sisi {
    padding: 4px 6px !important;
    gap: 2px !important;
  }
  .sisi-merek {
    padding: 2px 4px 4px !important;
    gap: 6px !important;
  }
  .sisi-merek .logo-mark {
    width: 24px !important;
    height: 24px !important;
  }
  .sisi-merek strong {
    font-size: 0.74rem !important;
  }
  .sisi-merek small {
    font-size: 0.60rem !important;
  }
  .sisi-nav {
    gap: 1px !important;
  }
  .sisi-nav a {
    padding: 2px 8px !important;
    font-size: 0.72rem !important;
    line-height: 1.3 !important;
    gap: 6px !important;
  }
  .sisi-nav a .ikon {
    width: 12px !important;
    height: 12px !important;
  }
  .sisi-keluar {
    padding: 2px 8px !important;
    font-size: 0.72rem !important;
    margin-top: 2px !important;
  }
  .admin-preview-statik,
  .panel.admin-preview-statik {
    top: 66px !important;
    max-height: calc(100vh - 80px) !important;
    overflow-y: auto !important;
  }
  .admin-preview-statik-tab,
  .panel.admin-preview-statik-tab {
    top: 96px !important;
    max-height: calc(100vh - 105px) !important;
    overflow-y: auto !important;
  }
}

.admin-isi {
  flex: 1 1 0%;
  min-width: 0;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  background: #F4F6FA;
  -webkit-overflow-scrolling: touch;
  margin-left: 0;
  width: auto;
}

.admin-isi::-webkit-scrollbar {
  width: 8px;
}
.admin-isi::-webkit-scrollbar-track {
  background: #F1F5F9;
}
.admin-isi::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 4px;
}
.admin-isi::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

.admin-top {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 14px clamp(18px, 2.5vw, 32px);
  border-bottom: 1px solid #E2E8F0;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.admin-top h1 {
  margin: 0;
  font-size: 1.18rem;
  font-weight: 750;
}

.admin-top-kanan {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}

.admin-nama {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  font-weight: 650;
  color: #1E293B;
  background: #F1F5F9;
  padding: 6px 14px;
  border-radius: var(--radius-bulat, 9999px);
  border: 1px solid #E2E8F0;
}

.admin-menu {
  display: none;
}

/* Bilah Atas Admin dengan Baris Utama & Tab Terintegrasi Statik */
.admin-top-baris-satu {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.admin-top.dengan-tabs {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 12px clamp(18px, 2.5vw, 32px) 10px;
}

.admin-top-tabs {
  display: flex;
  align-items: center;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 2px 0;
}

.admin-top-tabs::-webkit-scrollbar {
  display: none;
}

.admin-top-tabs .tabs {
  display: inline-flex;
  gap: 6px;
  flex-wrap: nowrap;
  border-bottom: 0;
  padding: 4px;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-bulat, 9999px);
  width: max-content;
  max-width: none;
  flex-shrink: 0;
  margin-bottom: 0 !important;
}

.admin-top-tabs .tabs a,
.admin-top-tabs .tabs button {
  flex-shrink: 0;
  padding: 6px 14px;
  border: 1.5px solid transparent;
  background: transparent;
  border-radius: var(--radius-bulat, 9999px);
  font-size: 0.82rem;
  font-weight: 650;
  color: #64748B;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.admin-top-tabs .tabs a:hover,
.admin-top-tabs .tabs button:hover {
  text-decoration: none;
  color: #0F172A;
  background: rgba(255, 255, 255, 0.75);
}

.admin-top-tabs .tabs a.aktif,
.admin-top-tabs .tabs button.aktif {
  background: #FFFFFF;
  color: #0F172A;
  border: 1.5px solid #F37021;
  box-shadow: 0 0 0 2.5px rgba(243, 112, 33, 0.22), 0 2px 6px rgba(0, 0, 0, 0.05);
  font-weight: 800;
}

/* Navigasi Bawah & Pintasan Cepat Mobile Panel Pengurus */
.admin-nav-bawah {
  display: none;
}
.sisi-tutup-mobile {
  display: none;
}
.admin-mobile-menu-grid {
  display: none;
}

.admin-welcome-banner {
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}
.admin-welcome-info h2 {
  margin: 0 0 4px;
}
.admin-welcome-info p {
  margin: 0;
}
.admin-welcome-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.tombol-wa {
  background: #25D366 !important;
  color: #fff !important;
  box-shadow: none !important;
}

.admin-panel-pengurus {
  padding: 0;
  overflow: hidden;
}
.admin-panel-pengurus-bar {
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.admin-panel-upload-form {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .admin-panel-pengurus-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .admin-panel-upload-form {
    width: 100%;
    justify-content: flex-start;
  }
}

.admin-utama {
  padding: clamp(20px, 2.2vw, 32px) clamp(18px, 2.5vw, 36px) 60px;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 26px);
  width: 100%;
  max-width: 100%;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: clamp(14px, 1.5vw, 20px);
}

.stat {
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 18px;
  padding: 20px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease, border-color 0.22s ease;
}

.stat:hover {
  transform: translateY(-2px);
  border-color: rgba(216, 168, 82, 0.45);
  box-shadow: 0 10px 25px -4px rgba(15, 23, 42, 0.08);
}

.stat:hover {
  transform: translateY(-2px);
  border-color: rgba(212, 175, 55, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 10px 24px -4px rgba(15, 23, 42, 0.08);
}

.stat-ikon {
  width: 50px;
  height: 50px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  position: relative;
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-top: 1.5px solid rgba(255, 255, 255, 0.85);
  border-left: 1.5px solid rgba(255, 255, 255, 0.55);
  border-right: 1px solid rgba(0, 0, 0, 0.15);
  border-bottom: 1.5px solid rgba(0, 0, 0, 0.35);
  overflow: hidden;
  box-sizing: border-box;
}

.stat-ikon::before {
  content: "";
  position: absolute;
  top: 1.5px;
  left: 2px;
  right: 2px;
  height: 42%;
  border-radius: 12px 12px 6px 6px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.70) 0%, rgba(255, 255, 255, 0.12) 80%, transparent 100%);
  pointer-events: none;
  z-index: 2;
}

.stat-ikon::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 38%;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.25) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

.stat-ikon .ikon,
.stat-ikon svg {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
  stroke-width: 2.2 !important;
  position: relative;
  z-index: 3;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
}

.stat-ikon.biru {
  background: linear-gradient(145deg, #3B82F6 0%, #1D4ED8 100%) !important;
  box-shadow: inset 0 2px 2px rgba(255,255,255,0.85), inset 0 -2px 3px rgba(0,0,0,0.35), 0 4px 14px rgba(59,130,246,0.35) !important;
}

.stat-ikon.hijau {
  background: linear-gradient(145deg, #F59E0B 0%, #B45309 100%) !important;
  box-shadow: inset 0 2px 2px rgba(255,255,255,0.85), inset 0 -2px 3px rgba(0,0,0,0.35), 0 4px 14px rgba(245,158,11,0.35) !important;
}

.stat-ikon.emas {
  background: linear-gradient(145deg, #10B981 0%, #047857 100%) !important;
  box-shadow: inset 0 2px 2px rgba(255,255,255,0.85), inset 0 -2px 3px rgba(0,0,0,0.35), 0 4px 14px rgba(16,185,129,0.35) !important;
}

.stat-ikon.ungu {
  background: linear-gradient(145deg, #8B5CF6 0%, #6D28D9 100%) !important;
  box-shadow: inset 0 2px 2px rgba(255,255,255,0.85), inset 0 -2px 3px rgba(0,0,0,0.35), 0 4px 14px rgba(139,92,246,0.35) !important;
}

.stat-nilai {
  font-size: 1.50rem;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.15;
}

.stat-label {
  font-size: 0.82rem;
  color: #64748B;
  margin-top: 3px;
}

.panel-grid {
  display: grid;
  gap: 20px;
}

.panel-grid.dua {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
}

.panel-grid.tiga {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.panel {
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.panel:hover {
  border-color: rgba(216, 168, 82, 0.4);
  box-shadow: 0 10px 28px -4px rgba(15, 23, 42, 0.09);
}

.panel-judul {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.panel-judul h2, .panel-judul h3 {
  margin: 0;
  font-size: 1.02rem;
  color: #0F172A;
}

.panel-judul a {
  font-size: 0.84rem;
  font-weight: 650;
  color: var(--emas-tua);
}

.panel .kosong {
  background: #F8FAFC;
  border-color: #E2E8F0;
}

/* Grafik Batang Modern */
.grafik {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  height: 210px;
  padding: 10px 4px 0;
  border-bottom: 1px solid #E2E8F0;
}

.grafik-kolom {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  height: 100%;
  justify-content: flex-end;
}

.grafik-batang {
  display: flex;
  gap: 6px;
  align-items: flex-end;
  height: 100%;
  width: 100%;
  justify-content: center;
}

.grafik-batang span {
  width: 18px;
  border-radius: 6px 6px 0 0;
  display: block;
  min-height: 4px;
  transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.grafik-batang .masuk {
  background: linear-gradient(180deg, #60A5FA, #2563EB);
}

.grafik-batang .keluar {
  background: linear-gradient(180deg, #FBBF24, var(--emas));
}

.grafik-label {
  font-size: 0.78rem;
  color: #64748B;
  font-weight: 600;
}

.legenda {
  display: flex;
  gap: 18px;
  font-size: 0.80rem;
  color: #64748B;
  font-weight: 550;
}

.legenda span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legenda i {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  display: inline-block;
}

.legenda i.masuk {
  background: #2563EB;
}

.legenda i.keluar {
  background: var(--emas);
}

.aksi-baris {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.aksi-ikon {
  width: 33px;
  height: 33px;
  border-radius: 10px;
  border: 1px solid #E2E8F0;
  background: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #475569;
  text-decoration: none;
  transition: all 0.18s ease;
}

.aksi-ikon:hover {
  border-color: var(--emas);
  color: var(--emas-tua);
  text-decoration: none;
  transform: translateY(-1px);
}

.aksi-ikon.hapus:hover {
  border-color: #FECACA;
  color: var(--merah);
}

.tabs {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
  border-bottom: 0;
  padding: 6px;
  background: #E8EDF5;
  border-radius: var(--radius-bulat, 9999px);
  max-width: 100%;
  margin-bottom: 20px;
}

.tabs a, .tabs button {
  padding: 8px 20px;
  border: 1.5px solid transparent;
  background: transparent;
  border-radius: var(--radius-bulat, 9999px);
  font-size: 0.88rem;
  font-weight: 650;
  color: #64748B;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.tabs a:hover, .tabs button:hover {
  text-decoration: none;
  color: #0F172A;
  background: rgba(255, 255, 255, 0.6);
}

.tabs a.aktif, .tabs button.aktif {
  background: #FFFFFF;
  color: #0F172A;
  border: 1.5px solid #D8A852;
  box-shadow: 0 0 0 3px rgba(216, 168, 82, 0.2), 0 2px 6px rgba(0, 0, 0, 0.04);
  font-weight: 750;
}

.filter-baris {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
}

.filter-baris .field {
  min-width: 170px;
}

.badge-jenis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-radius: var(--radius-bulat);
  font-size: 0.73rem;
  font-weight: 750;
  white-space: nowrap !important;
}

.badge-jenis.masuk {
  background: #EFF6FF;
  color: #2563EB;
}

.badge-jenis.keluar {
  background: #FFF8E6;
  color: var(--emas-tua);
}

.badge-jenis.aktif {
  background: #EFF6FF;
  color: #2563EB;
}

.badge-jenis.nonaktif {
  background: #F1F5F9;
  color: #64748B;
}

/* ==========================================================================
   Tabel Presisi & Rata Sejajar (Khusus Jadwal Ibadah & Panel Admin)
   ========================================================================== */
.tabel-presisi {
  min-width: 1320px;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.tabel-presisi th {
  padding: 14px 16px;
  background: #F8FAFC;
  color: #1E293B;
  font-size: 0.77rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 2px solid #CBD5E1;
  white-space: nowrap;
  vertical-align: middle;
}

.tabel-presisi td {
  padding: 15px 16px;
  vertical-align: middle !important;
  border-bottom: 1px solid #E2E8F0;
  color: #334155;
  font-size: 0.88rem;
  line-height: 1.45;
  background: #FFFFFF;
}

.tabel-presisi tbody tr {
  transition: background-color 0.15s ease;
}

.tabel-presisi tbody tr:hover td {
  background: #FFFDF7 !important;
}

.tabel-presisi tbody tr:last-child td {
  border-bottom: 0;
}

/* Elemen Presisi dalam Baris Tabel */
.jadwal-nama-teks {
  display: block;
  font-size: 0.92rem;
  color: #0F172A;
  font-weight: 750;
  line-height: 1.35;
}

.jadwal-hari {
  font-weight: 650;
  color: #1E293B;
  font-size: 0.88rem;
}

.jadwal-tgl-sub {
  font-size: 0.76rem;
  color: #64748B;
  margin-top: 3px;
  font-weight: 500;
}

.waktu-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 14px;
  border-radius: 999px;
  background: #FEF3C7;
  color: #92400E;
  border: 1px solid #FDE68A;
  font-weight: 750;
  font-size: 0.81rem;
  white-space: nowrap !important;
  box-shadow: 0 1px 3px rgba(146, 64, 14, 0.08);
}

.strip-kosong {
  color: #94A3B8;
  font-weight: 600;
  font-size: 1rem;
  display: inline-block;
}

.jadwal-ket-teks {
  color: #475569;
  font-size: 0.85rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Badge Kategori Terpusat & Presisi */
.badge-kategori {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.badge-kategori.umum {
  background: #FFF8E6;
  color: #92400E;
  border: 1px solid #FDE68A;
}

.badge-kategori.sekolahminggu {
  background: #FEF3C7;
  color: #92400E;
  border: 1px solid #FDE68A;
}

.badge-kategori.rayon {
  background: #EFF6FF;
  color: #1E40AF;
  border: 1px solid #BFDBFE;
}

.badge-kategori.ksp {
  background: #F3E8FF;
  color: #6B21A8;
  border: 1px solid #E9D5FF;
}

.badge-kategori.pw {
  background: #FDF2F8;
  color: #9D174D;
  border: 1px solid #FBCFE8;
}

.badge-kategori.pkb {
  background: #EFF6FF;
  color: #1E40AF;
  border: 1px solid #BFDBFE;
}

.badge-kategori.pam {
  background: #FFF7ED;
  color: #9A3412;
  border: 1px solid #FED7AA;
}

.badge-kategori.par {
  background: #FEFCE8;
  color: #854D0E;
  border: 1px solid #FEF08A;
}

.badge-kategori.tunas {
  background: #EFF6FF;
  color: #2563EB;
  border: 1px solid #BFDBFE;
}

/* Badge Status Presisi */
.badge-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap !important;
}

.badge-status.aktif {
  background: #EFF6FF;
  color: #1D4ED8;
  border: 1px solid #BFDBFE;
}

.badge-status.nonaktif {
  background: #F1F5F9;
  color: #64748B;
  border: 1px solid #CBD5E1;
}

.badge-status.disesuaikan {
  background: #FEF3C7;
  color: #B45309;
  border: 1px solid #FCD34D;
}

[data-tema="gelap"] .badge-status.disesuaikan {
  background: rgba(245, 158, 11, 0.22);
  color: #FBBF24;
  border-color: rgba(245, 158, 11, 0.4);
}

/* Grup Tombol Aksi */
.aksi-grup {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap !important;
  flex-wrap: nowrap;
}

/* ==========================================================================
   Responsif Universal Seluruh Perangkat (Desktop, Tablet, Smartphone)
   ========================================================================== */

/* Tablet Landscape & Desktop Kompak (821px - 1050px) */
@media (max-width: 1050px) {
  .fitur-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .panel-grid.dua, .panel-grid.tiga {
    grid-template-columns: 1fr;
  }
  .kaki-in {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
    gap: 28px;
  }
  .kaki-kanan {
    text-align: center;
    align-items: center;
  }
  .kaki-links {
    justify-content: center;
  }
}

/* Tablet Portret & Layar Sentuh Sedang (541px - 820px) */
@media (max-width: 820px) {
  .hero-panel {
    gap: 24px;
    padding: 24px;
  }
  .hero-tokoh {
    flex: 0 0 220px;
  }
  .promo {
    grid-template-columns: 1fr;
  }
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr;
  }
  .visi-misi {
    grid-template-columns: 1fr;
  }
  .kartu-pendeta {
    grid-template-columns: 1fr;
  }
  .kartu-pendeta img {
    max-width: 240px;
    margin: 0 auto;
  }
}

/* ==========================================================================
   Tampilan Khusus Mobile & Smartphone (PWA Presisi)
   ========================================================================== */
@media (max-width: 900px) {
  /* Admin Shell & Sisi Responsif Layar HP */
  body.admin {
    height: auto !important;
    min-height: 100vh !important;
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: clip !important;
    padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .admin-shell {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .admin-sisi {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 290px !important;
    max-width: 86vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: none !important;
    z-index: 1050 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .admin-sisi.terbuka {
    transform: translateX(0) !important;
    box-shadow: 4px 0 35px rgba(0, 0, 0, 0.6) !important;
  }
  .sisi-tutup-mobile {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    margin-left: auto;
    padding: 0;
  }
  .sisi-tutup-mobile:active {
    background: rgba(255, 255, 255, 0.3);
  }
  .sisi-nav {
    overflow: visible !important;
    padding-bottom: 90px !important;
  }
  .admin-tabir {
    z-index: 1040 !important;
  }
  .admin-menu {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: #F1F5F9;
    border: 1px solid #CBD5E1;
    border-radius: 8px;
    padding: 8px 10px;
    cursor: pointer;
    color: #1E293B;
  }
  [data-tema="gelap"] .admin-menu {
    background: #1E293B;
    border-color: rgba(255, 255, 255, 0.12);
    color: #F8FAFC;
  }
  .admin-isi {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    width: 100% !important;
    margin-left: 0 !important;
  }
  .admin-utama {
    padding: 14px 14px 40px !important;
    gap: 14px !important;
  }
  .admin-top {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 100 !important;
    flex-wrap: wrap;
    row-gap: 8px;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
  }
  [data-tema="gelap"] .admin-top {
    background: rgba(15, 23, 42, 0.96) !important;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.5) !important;
  }
  .admin-top-baris-satu {
    gap: 10px;
  }
  .admin-top-judul-wrap {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
  }
  .admin-top h1 {
    font-size: 1.05rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .admin-top-subjudul {
    display: none !important;
  }
  .admin-nama-teks {
    display: none !important;
  }
  .admin-lihat-teks {
    display: none !important;
  }
  .admin-lihat-situs {
    padding: 6px 10px !important;
  }
  .admin-top-kanan {
    gap: 8px !important;
  }

  /* Grid Pintasan Cepat Mobile Dashboard */
  .admin-mobile-menu-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px;
    margin-bottom: 4px;
  }
  .admin-quick-card {
    background: #fff;
    border: 1px solid var(--garis, #E2E8F0);
    border-radius: var(--radius-kecil, 14px);
    padding: 12px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    text-decoration: none;
    color: var(--teks);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: transform 0.16s ease;
    touch-action: manipulation;
  }
  [data-tema="gelap"] .admin-quick-card {
    background: #111827;
    border-color: rgba(255, 255, 255, 0.08);
  }
  .admin-quick-card:active {
    transform: scale(0.95);
  }
  .quick-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .quick-icon svg {
    width: 20px;
    height: 20px;
  }
  .quick-teks {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .quick-teks strong {
    font-size: 0.80rem;
    line-height: 1.2;
    color: var(--tinta);
  }
  .quick-teks small {
    font-size: 0.68rem;
    color: var(--muted);
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 72px;
  }

  /* Bar Navigasi Bawah Pengurus Mobile */
  .admin-nav-bawah {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: calc(62px + env(safe-area-inset-bottom, 0px)) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-top: 1px solid var(--garis, #E2E8F0) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08) !important;
    z-index: 990 !important;
    align-items: center !important;
    justify-content: space-around !important;
  }
  [data-tema="gelap"] .admin-nav-bawah {
    background: rgba(15, 23, 42, 0.96) !important;
    border-top-color: rgba(255, 255, 255, 0.10) !important;
  }
  .admin-nav-bawah a, .admin-nav-bawah button {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    color: var(--muted, #64748B) !important;
    text-decoration: none !important;
    font-size: 0.70rem !important;
    font-weight: 700 !important;
    padding: 6px 12px !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    transition: color 0.18s ease !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .admin-nav-bawah a.aktif, .admin-nav-bawah a:hover, .admin-nav-bawah button:hover {
    color: var(--bni-orange, #F37021) !important;
  }
  .admin-nav-bawah svg {
    width: 20px !important;
    height: 20px !important;
  }

  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .stat {
    padding: 14px 12px !important;
    gap: 10px !important;
    border-radius: 14px !important;
  }
  .stat-ikon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
  }
  .stat-nilai {
    font-size: 1.20rem !important;
  }
  .stat-label {
    font-size: 0.72rem !important;
    line-height: 1.25 !important;
  }
  .panel {
    padding: 16px 14px !important;
    border-radius: 16px !important;
  }
  .panel-grid.dua, .panel-grid.tiga {
    grid-template-columns: 1fr !important;
  }
  .panel-judul {
    flex-wrap: wrap;
    row-gap: 10px;
  }
  .form-baris {
    gap: 10px;
  }
  .tabel-bungkus {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
  }
}

@media (max-width: 480px) {
  .admin-welcome-banner {
    padding: 14px !important;
    gap: 10px !important;
  }
  .admin-welcome-actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px !important;
  }
  .admin-welcome-actions .tombol {
    width: 100%;
    justify-content: center;
  }
  .admin-mobile-menu-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
  }
  .admin-quick-card {
    padding: 10px 4px !important;
    border-radius: 12px !important;
  }
  .quick-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
  }
  .quick-icon svg {
    width: 18px !important;
    height: 18px !important;
  }
  .quick-teks strong {
    font-size: 0.75rem !important;
  }
  .quick-teks small {
    font-size: 0.62rem !important;
    display: block !important;
    max-width: 68px !important;
  }
}

/* Navigasi Bawah Aktif di Layar <= 960px (Mobile & Small Tablet) */
@media (max-width: 960px) {
  body.publik {
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .nav-bawah {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
}

/* Menu Dropdown Header Mobile & Tablet (<= 1140px) */
@media (max-width: 1140px) {
  /* Menu Dropdown Header Mobile */
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    padding: 14px 18px 20px;
    border-bottom: 1px solid var(--garis);
    box-shadow: 0 18px 40px rgba(11, 23, 40, 0.20);
    z-index: 500;
  }
  
  .nav.terbuka {
    display: flex;
    animation: menuMuncul 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  }

  @keyframes menuMuncul {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .nav-head-mobile {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 2px 4px 12px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--garis);
  }

  .nav-head-judul {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.84rem;
    font-weight: 750;
    color: var(--tinta);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .nav-tutup-btn {
    background: #F1F5F9;
    border: 0;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .nav-tutup-btn:hover {
    background: #E2E8F0;
    color: var(--tinta);
  }

  .nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch !important;
    gap: 4px;
    max-height: 58vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 2px;
    width: 100%;
    box-sizing: border-box;
  }
  
  .nav a {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
    padding: 11px 16px;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--teks);
    text-decoration: none;
    transition: all 0.18s ease;
  }

  .nav a:hover {
    background: rgba(243, 112, 33, 0.08);
    color: var(--oranye-tua);
  }

  .nav a.aktif {
    background: #FFF2EB;
    color: #D9531E;
    font-weight: 750;
    border-left: 4px solid #D9531E;
    padding-left: 14px;
  }

  .nav-item-ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: #FFF0E5;
    color: var(--oranye);
    flex-shrink: 0;
    transition: all 0.2s ease;
  }

  .nav a.aktif .nav-item-ikon {
    background: var(--oranye-gradasi);
    color: #fff;
  }
  
  .nav-pemisah {
    display: block;
    width: 100%;
    height: 1px;
    background: var(--garis);
    margin: 8px 0;
  }

  .nav-tema-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
    padding: 11px 16px;
    border-radius: 10px;
    border: 1px solid #E2E8F0;
    background: #F8FAFC;
    font-size: 0.92rem;
    font-weight: 650;
    cursor: pointer;
    color: #1E293B;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.2s ease;
  }

  .nav-tema-btn:hover {
    background: #F1F5F9;
    color: #0F172A;
  }
  
  .nav-admin {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 8px;
    padding: 12px 18px;
    border-radius: 10px;
    background: linear-gradient(135deg, #005E5D 0%, #003837 100%) !important;
    color: #FFFFFF !important;
    border: 1px solid #004D4C !important;
    font-size: 0.94rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 43, 42, 0.18);
    transition: all 0.2s ease;
    width: 100%;
    box-sizing: border-box;
  }

  .nav-admin span {
    color: #FFFFFF !important;
    font-weight: 700;
  }

  .nav-admin .ikon,
  .nav-admin svg {
    color: #FFFFFF !important;
    stroke: #FFFFFF !important;
    fill: none;
  }
  
  .nav-admin:hover {
    background: linear-gradient(135deg, #004D4C 0%, #002B2A 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 6px 16px rgba(0, 43, 42, 0.28);
    text-decoration: none;
  }
  
  .tombol-menu {
    display: none !important;
  }

  .tombol-notif-ultah {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 10px;
  }

  .notif-popover {
    position: fixed;
    top: calc(56px + env(safe-area-inset-top, 0px));
    right: 12px;
    left: 12px;
    width: auto;
    max-width: 380px;
    margin-left: auto;
  }
  
  .topbar-in {
    position: relative;
    min-height: 54px;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 12px;
    padding-right: 12px;
    gap: 8px;
    box-sizing: border-box;
  }

  .merek {
    min-width: 0;
    flex: 1 1 auto;
    gap: 8px;
  }

  .merek-logo-bulat {
    width: 36px;
    height: 36px;
    min-width: 36px;
  }

  .merek-teks {
    min-width: 0;
    overflow: hidden;
  }
  
  .merek-teks strong {
    font-size: clamp(0.78rem, 3.4vw, 0.92rem);
    letter-spacing: -0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 100%;
  }
  
  .merek-teks small {
    display: none;
  }

  .topbar-aksi {
    gap: 6px;
    margin-left: 4px;
    flex-shrink: 0;
  }

  .tombol-tema, .tombol-menu-mobile {
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 0;
  }
  
  .cari-mini {
    display: none;
  }
}

@media (max-width: 900px) {
  /* --- Hero Beranda Mobile --- */
  .hero-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 18px 24px;
    min-height: auto;
    border-radius: var(--radius-besar);
    background: 
      radial-gradient(ellipse at 50% 0%, rgba(212, 175, 55, 0.20) 0%, transparent 60%),
      linear-gradient(180deg, #07101C 0%, #0B1728 55%, #162740 100%),
      url('img/gereja.svg') center/cover no-repeat;
    box-shadow: 0 16px 36px rgba(11, 23, 40, 0.40);
  }

  /* Kartu Foto Pendeta Mobile: Estetis & Presisi */
  .hero-tokoh {
    position: relative;
    left: auto;
    bottom: auto;
    width: min(280px, 86vw);
    max-width: 280px;
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: auto !important;
    margin: 6px auto 20px;
    border-radius: 22px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #0B1728;
    border: none !important;
    box-shadow: 0 20px 42px -6px rgba(0, 0, 0, 0.62);
  }

  .hero-foto {
    position: relative;
    width: 100% !important;
    aspect-ratio: 1 / 1.08 !important;
    height: auto !important;
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: none;
    display: block;
    overflow: hidden;
  }

  .hero-foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 12%;
    border-radius: 0 !important;
    border: none !important;
  }

  .hero-foto::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 46px;
    background: linear-gradient(180deg, transparent 0%, rgba(11, 23, 40, 0.90) 100%);
    pointer-events: none;
  }

  /* Plakat Nama Pendeta Mobile */
  .hero-nama {
    position: relative !important;
    left: auto;
    right: auto;
    bottom: auto;
    z-index: 2;
    padding: 12px 14px 16px !important;
    background: linear-gradient(180deg, rgba(11, 23, 40, 0.98), #07101C) !important;
    border: none !important;
    border-top: none !important;
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }

  .hero-nama strong,
  .hero-nama-teks {
    font-size: 1.02rem;
    color: #fff;
    line-height: 1.34;
    display: block;
    font-weight: 750;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
    text-wrap: balance;
    text-align: center;
    width: 100%;
  }

  .hero-badge-firman {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 14px;
    border-radius: var(--radius-bulat);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(11, 23, 40, 0.90);
    color: var(--emas-terang);
    border: 1px solid rgba(245, 215, 127, 0.45);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    margin-top: 3px;
  }

  .hero-nama small,
  .hero-jabatan {
    font-size: 0.72rem;
    color: #F7E4A8;
    display: block;
    margin-top: 2px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    background: none !important;
    border: none !important;
    padding: 0 !important;
  }

  .hero-teks {
    margin: 0;
    max-width: 100%;
    text-align: left;
  }

  .hero-teks .salam {
    font-size: 0.80rem;
    font-weight: 800;
    letter-spacing: 1.6px;
    margin-bottom: 6px;
  }

  .hero-teks h1 {
    font-size: 1.35rem;
    line-height: 1.28;
    margin: 4px 0 10px;
    font-weight: 750;
  }

  .hero-teks p {
    font-size: 0.89rem;
    line-height: 1.55;
    color: #E6EFE8;
    margin-bottom: 14px;
  }

  .hero-aksi {
    display: flex;
    gap: 10px;
    margin-top: 12px;
  }

  .hero-aksi .tombol {
    flex: 1 1 calc(50% - 5px);
    text-align: center;
    padding: 11px 12px;
    font-size: 0.86rem;
    justify-content: center;
  }

  .hero-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
  }

  .galeri-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .kartu {
    padding: 18px;
    border-radius: var(--radius-kecil);
  }
  .page-head {
    padding: 20px 16px;
    border-radius: var(--radius);
  }
  .page-head h1 {
    font-size: 1.36rem;
  }
}

/* Penyesuaian Khusus HP Layar 760px ke Bawah (PWA Full Mobile) */
@media (max-width: 760px) {
  body.publik {
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .nav-bawah {
    display: flex;
  }
  .fitur-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .fitur {
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    padding: 12px 14px;
    font-size: 0.86rem;
    gap: 12px;
    border-radius: var(--radius-kecil);
  }
  .fitur-ikon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }
  .slide-teks {
    padding: 22px;
    max-width: 100%;
  }
  .slide-teks strong {
    font-size: 1.05rem;
  }
  .galeri-grid {
    grid-template-columns: 1fr;
  }
  .utama {
    padding-top: 14px;
    gap: 18px;
  }
  h1 {
    font-size: 1.45rem;
  }
  .kaki-in {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-top: 26px;
    padding-bottom: 28px;
  }
  .kaki-merek {
    justify-content: center;
  }
  .kaki-kanan {
    align-items: center;
    text-align: center;
    gap: 12px;
  }
  .kaki-quote {
    font-size: 0.90rem;
    max-width: 32ch;
  }
  .kaki-links {
    justify-content: center;
    gap: 10px;
    margin-top: 6px;
    margin-bottom: 14px;
  }
  .kaki-unduh {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .kaki-bawah {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    padding-top: 22px;
    padding-bottom: calc(36px + env(safe-area-inset-bottom, 0px));
  }
  .kaki-bawah-kiri {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
}

/* HP Layar Sangat Kecil (320–400 px) */
@media (max-width: 400px) {
  .wrap {
    padding: 0 12px;
  }
  .hero-tokoh {
    width: min(250px, 84vw);
    max-width: 250px;
  }
  .hero-nama strong {
    font-size: 0.88rem;
  }
  .kartu {
    padding: 14px;
  }
  .panel {
    padding: 14px;
  }
  .stat {
    padding: 14px;
    gap: 10px;
  }
  .stat-ikon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }
  .stat-nilai {
    font-size: 1.30rem;
  }
  .fitur {
    padding: 10px;
    gap: 10px;
    font-size: 0.82rem;
  }
  .fitur-ikon {
    width: 36px;
    height: 36px;
  }
  .baris-stat {
    grid-template-columns: 1fr auto;
    gap: 8px;
  }
  .batang-stat {
    display: none;
  }
  .tombol {
    padding: 10px 14px;
    font-size: 0.86rem;
  }
  .hero-aksi .tombol {
    flex: 1 1 100%;
  }
  .form-grid {
    gap: 12px;
  }
  .kaki-unduh {
    grid-template-columns: 1fr;
  }
  .kaki-links {
    gap: 8px;
  }
  .nav-bawah a, .nav-bawah button {
    font-size: 0.64rem;
  }
  .tabel {
    min-width: 500px;
  }
  .tabel th, .tabel td {
    padding: 10px 12px;
  }
}

/* ==========================================================================
   ALBUM DOKUMENTASI (1 BINGKAI KOLASE), LIGHTBOX FULL HD & PANEL ADMIN
   ========================================================================== */

/* Daftar Album Bingkai */
.album-daftar {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 18px;
}

.album-bingkai-kartu {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid rgba(226, 232, 240, 0.85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), var(--bayang-kecil);
  overflow: hidden;
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.24s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.24s ease;
  display: flex;
  flex-direction: column;
}

.album-bingkai-kartu:hover {
  transform: translateY(-2px);
  border-color: rgba(212, 175, 55, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), var(--bayang-hover);
}

.album-kartu-head {
  padding: 18px 20px 14px;
}

.album-kartu-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-bottom: 6px;
}

.album-kartu-meta .badge {
  font-weight: 700;
  font-size: 0.78rem;
  padding: 3px 10px;
  max-width: 100%;
}

.album-kartu-tanggal {
  font-size: 0.84rem;
  color: var(--muted);
  font-weight: 500;
}

.album-kartu-judul {
  margin: 4px 0 6px;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--tinta);
  line-height: 1.35;
}

.album-kartu-ket {
  margin: 0;
  color: var(--tinta-lembut);
  font-size: 0.92rem;
  line-height: 1.5;
}

/* Bingkai Kolase Foto (Collage Frame) */
.bingkai-grid {
  display: grid;
  gap: 4px;
  background: #0f172a;
  position: relative;
  width: 100%;
  height: 340px;
  overflow: hidden;
  user-select: none;
}

@media (max-width: 640px) {
  .bingkai-grid {
    height: 230px;
  }
}

.bingkai-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: #1e293b;
}

.bingkai-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease, filter 0.2s ease;
}

.bingkai-item:hover img {
  transform: scale(1.04);
}

/* 1 Foto: Penuh 1 layar */
.bingkai-layout-1 {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

/* 2 Foto: 2 Kolom Sejajar */
.bingkai-layout-2 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}

/* 3 Foto: 1 Kiri Besar, 2 Kanan Bertumpuk */
.bingkai-layout-3 {
  grid-template-columns: 1.2fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.bingkai-layout-3 .bingkai-item:nth-child(1) {
  grid-row: 1 / span 2;
}

/* 4 Foto atau Lebih: 2x2 Grid Seimbang */
.bingkai-layout-4, .bingkai-layout-5 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

/* Overlay Sisa Foto (+X Foto Lainnya) */
.bingkai-overlay-sisa {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  text-align: center;
  padding: 10px;
  transition: background 0.2s ease;
}

.bingkai-item:hover .bingkai-overlay-sisa {
  background: rgba(15, 23, 42, 0.65);
}

.bingkai-overlay-sisa .sisa-plus {
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1;
  color: #FFFDF9;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.bingkai-overlay-sisa .sisa-teks {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #E2E8F0;
  margin-top: 4px;
}

/* Footer Kartu Album */
.album-kartu-footer {
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #F8FAFC;
  border-top: 1px solid #E2E8F0;
  flex-wrap: wrap;
}

.album-kartu-footer-kiri {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.album-link-semua {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--emas-tua);
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  transition: all 0.2s ease;
}

.album-link-semua:hover {
  color: var(--emas);
  transform: translateX(2px);
  text-decoration: none;
}

@media (max-width: 540px) {
  .album-kartu-footer {
    padding: 10px 12px;
    gap: 8px;
  }
  .album-kartu-footer-kiri {
    width: 100%;
    display: flex;
    gap: 6px;
  }
  .album-kartu-footer-kiri .tombol {
    flex: 1 1 calc(50% - 3px);
    justify-content: center;
    padding: 7px 8px;
    font-size: 0.78rem;
    white-space: nowrap;
  }
  .album-link-semua {
    width: 100%;
    justify-content: center;
    padding: 4px;
    font-size: 0.80rem;
  }
}

/* Album Card Khusus Beranda: Kompak, Modern & Presisi */
.album-beranda {
  margin-bottom: 8px;
}

.album-beranda .album-kartu-head {
  padding: 14px 18px 10px;
}

.album-beranda .album-kartu-judul {
  font-size: 1.12rem;
  margin: 2px 0 0;
}

.album-beranda .bingkai-grid {
  height: 230px;
  border-radius: 12px;
  margin: 0 16px 12px;
  width: calc(100% - 32px);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.10);
  border: 1px solid rgba(226, 232, 240, 0.6);
}

@media (max-width: 640px) {
  .album-beranda .album-kartu-head {
    padding: 12px 14px 8px;
  }
  .album-beranda .album-kartu-judul {
    font-size: 1.05rem;
  }
  .album-beranda .bingkai-grid {
    height: 185px;
    margin: 0 10px 10px;
    width: calc(100% - 20px);
    border-radius: 9px;
  }
  .album-beranda .album-kartu-footer {
    padding: 10px 12px;
  }
}


/* Video Wrapper di dalam Kartu & Halaman Media */
.bingkai-video-wadah,
.video-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: #0B1728;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

.bingkai-video-wadah iframe,
.bingkai-video-wadah video,
.video-container iframe,
.video-container video,
.video-facade-box iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.tombol-play-facade:hover {
  transform: scale(1.12) !important;
  background: #E52D27 !important;
  box-shadow: 0 6px 22px rgba(229, 45, 39, 0.75) !important;
}

/* Optimasi Kecepatan Rendering & 60-90 FPS Smooth Scrolling */
#streaming-beranda,
#dokumentasi-beranda,
#warta-beranda {
  content-visibility: auto;
  contain-intrinsic-size: 1px 420px;
}

.tombol-yt {
  background: #CC181E !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(204, 24, 30, 0.35) !important;
}

.tombol-yt:hover {
  background: #E52D27 !important;
  color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(204, 24, 30, 0.45) !important;
}

.tombol-fb {
  background: #1877F2 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(24, 119, 242, 0.35) !important;
}

.tombol-fb:hover {
  background: #0C63D4 !important;
  color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(24, 119, 242, 0.45) !important;
}

.galeri-video-besar {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0f172a;
}

/* ==========================================================================
   MODAL LIGHTBOX FULLSCREEN (FULL HD INTERAKTIF)
   ========================================================================== */
.lightbox-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(10, 15, 26, 0.96);
  backdrop-filter: blur(12px);
  display: none;
  flex-direction: column;
  color: #ffffff;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.lightbox-modal.aktif {
  display: flex;
  opacity: 1;
}

.lightbox-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: rgba(15, 23, 42, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 2;
  gap: 12px;
}

.lightbox-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lightbox-judul {
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lightbox-counter {
  font-size: 0.8rem;
  color: #94A3B8;
  font-weight: 600;
}

.lightbox-aksi-atas {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.lightbox-btn-tutup {
  background: rgba(255, 255, 255, 0.15);
  border: 0;
  color: #ffffff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: background 0.2s;
}
.lightbox-btn-tutup:hover {
  background: #EF4444;
}

.lightbox-stage {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  overflow: hidden;
  user-select: none;
}

.lightbox-gambar-wadah {
  max-width: 94vw;
  max-height: calc(100vh - 180px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.lightbox-gambar-wadah img {
  max-width: 100%;
  max-height: calc(100vh - 180px);
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.8);
}

.lightbox-panah {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.2);
  border: 0;
  border-radius: 50%;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  transition: background 0.2s, transform 0.2s;
  z-index: 3;
}
.lightbox-panah:hover {
  background: rgba(255, 255, 255, 0.4);
  transform: translateY(-50%) scale(1.08);
}
.lightbox-panah-kiri {
  left: 16px;
}
.lightbox-panah-kanan {
  right: 16px;
}

.lightbox-thumbs {
  height: 72px;
  background: rgba(15, 23, 42, 0.9);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  overflow-x: auto;
  scrollbar-width: thin;
  z-index: 2;
}

.lightbox-thumb-item {
  width: 52px;
  height: 52px;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0.55;
  border: 2px solid transparent;
  transition: all 0.2s ease;
}
.lightbox-thumb-item.aktif, .lightbox-thumb-item:hover {
  opacity: 1;
  border-color: var(--emas);
  transform: scale(1.05);
}
.lightbox-thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   PANEL ADMIN DOKUMENTASI (RESPONSIF MOBILE PWA & DESKTOP)
   ========================================================================== */
.galeri-admin {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  margin-top: 14px;
}

@media (max-width: 640px) {
  .galeri-admin {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

.galeri-kartu {
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, box-shadow 0.2s;
}

.galeri-kartu:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.galeri-media {
  position: relative;
  width: 100%;
  height: 200px;
  background: #0f172a;
  overflow: hidden;
}

.galeri-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.galeri-detail {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 6px;
}

.galeri-detail strong {
  font-size: 1rem;
  color: var(--tinta);
  font-weight: 700;
  line-height: 1.35;
}

.galeri-detail .kecil {
  color: var(--muted);
  font-size: 0.82rem;
}

/* Kartu Album di Panel Admin */
.admin-album-kartu {
  background: #ffffff;
  border: 1px solid #CBD5E1;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0,0,0,0.05);
  margin-bottom: 20px;
}

.admin-album-head {
  padding: 14px 18px;
  background: #F8FAFC;
  border-bottom: 1px solid #E2E8F0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-album-info h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--tinta);
}

.admin-album-aksi {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-foto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
  padding: 16px;
}

.admin-foto-item {
  position: relative;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  overflow: hidden;
  background: #FAFAFA;
}

.admin-foto-item img {
  width: 100%;
  height: 96px;
  object-fit: cover;
  display: block;
}

.admin-foto-item-info {
  padding: 6px 8px;
  font-size: 0.75rem;
  background: #ffffff;
}

.admin-foto-item-info span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}

.admin-foto-item-aksi {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}

.admin-foto-item-aksi .tombol {
  padding: 2px 6px;
  font-size: 0.7rem;
  flex: 1;
  text-align: center;
  justify-content: center;
}

/* ---- Tombol Quick-Edit Banner Beranda & Modal Dialog ---- */
.hero-baris-salam {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 6px;
}

.tombol-edit-banner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 0.76rem;
  font-weight: 700;
  color: #0F2027 !important;
  background: var(--gold-gradasi);
  border: 1px solid rgba(212, 175, 55, 0.6);
  border-radius: var(--radius-bulat, 9999px);
  cursor: pointer;
  text-decoration: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.35);
}

.tombol-edit-banner:hover {
  background: var(--gold-gradasi);
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 6px 18px rgba(212, 175, 55, 0.55);
  color: #0F2027 !important;
}

.tombol-edit-banner svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
}

/* ---- Modal Dialog Global Presisi Centered ---- */
.modal-dialog-wrap {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(16px, 3vw, 32px) !important;
  box-sizing: border-box !important;
}

.modal-dialog-wrap[hidden] {
  display: none !important;
}

.modal-dialog-tabir {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(10, 25, 41, 0.70) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  animation: modalPudar 0.2s ease-out;
  z-index: 1 !important;
}

.modal-dialog-kotak {
  position: relative !important;
  width: 100% !important;
  max-width: 620px !important;
  max-height: min(88vh, 740px) !important;
  display: flex !important;
  flex-direction: column !important;
  background: #ffffff;
  color: #1E293B;
  border-radius: 20px !important;
  border: 1px solid #E2E8F0;
  box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
  overflow: hidden !important;
  z-index: 2 !important;
  margin: auto !important;
  animation: modalMuncul 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-dialog-kepala {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 22px !important;
  background: #F8FAFC;
  border-bottom: 1px solid #E2E8F0 !important;
  flex-shrink: 0 !important;
}

.modal-dialog-tutup {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: #64748B;
  cursor: pointer;
  transition: all 0.15s ease;
}

.modal-dialog-tutup:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
}

.modal-dialog-isi {
  padding: 22px 24px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  color: #334155;
}

.modal-judul-teks {
  color: #0F172A;
}

.modal-sorot-teks {
  color: #0F172A;
}

.modal-isi-konten p,
.modal-isi-konten li {
  color: #334155;
}

.modal-catatan-teks {
  color: #64748B;
  border-top: 1px solid #E2E8F0;
}

.kotak-peringatan-tgl {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  color: #92400E;
}

.kotak-bahaya-info {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: #991B1B;
}

.kotak-bahaya-info strong {
  color: #DC2626;
}

.kotak-bahaya-info li {
  color: #991B1B;
}

.kotak-doa-info {
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  border-left: 4px solid #2563EB !important;
  color: #1E40AF;
}

.kotak-doa-info strong {
  color: #1D4ED8;
}

.modal-dialog-kaki {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  padding: 14px 22px !important;
  background: #F8FAFC;
  border-top: 1px solid #E2E8F0 !important;
  flex-shrink: 0 !important;
}

@keyframes modalPudar {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalMuncul {
  from { opacity: 0; transform: scale(0.95) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ==========================================================================
   MODERN MOCKUP COMPONENTS (Info Alfa Omega Bhayangkara)
   ========================================================================== */

/* Utility Gradients & Badges */
.bg-gold-gradient {
  background: linear-gradient(135deg, #d4af37 0%, #f3e5ab 50%, #aa771c 100%) !important;
}

.bg-navy-gradient {
  background: linear-gradient(135deg, #002B2A 0%, #003837 35%, #005E5D 70%, #007E7D 100%) !important;
}

.bg-bni-teal-gradient {
  background: linear-gradient(135deg, #002B2A 0%, #003837 35%, #005E5D 70%, #007E7D 100%) !important;
}

.bg-bni-orange-gradient {
  background: linear-gradient(135deg, #F37021 0%, #FF8533 100%) !important;
}

.text-gold-gradient {
  background: linear-gradient(135deg, #d4af37 0%, #f3e5ab 50%, #aa771c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-bni-orange-gradient {
  background: linear-gradient(135deg, #F37021 0%, #FF8533 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 2. Hero Section Modern (BNI Signature Gradient & Pelayan Firman) */
.hero-mockup-section {
  width: 100%;
  max-width: 1240px;
  margin: 20px auto 0;
  padding: 0 16px;
  box-sizing: border-box;
}

.hero-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
  padding: 0 4px;
}

.hero-header-kiri {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.hero-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 14px;
  border-radius: 9999px;
  background: rgba(0, 163, 157, 0.12);
  border: 1px solid rgba(0, 163, 157, 0.35);
  color: #007E7D;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

[data-tema="gelap"] .hero-live-pill {
  background: rgba(59, 130, 246, 0.22);
  border-color: rgba(96, 165, 250, 0.40);
  color: #60A5FA;
}

.hero-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 8px #10B981;
  animation: pulseLive 2s infinite;
}

.hero-motto-tag {
  font-size: 0.84rem;
  font-style: italic;
  font-weight: 600;
  color: #64748B;
}

[data-tema="gelap"] .hero-motto-tag {
  color: #94A3B8;
}

.hero-date-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 9999px;
  background: rgba(243, 112, 33, 0.10);
  border: 1px solid rgba(243, 112, 33, 0.35);
  color: #F37021;
  font-size: 0.76rem;
  font-weight: 700;
  backdrop-filter: blur(8px);
}

[data-tema="gelap"] .hero-date-badge {
  background: rgba(243, 112, 33, 0.18);
  border-color: rgba(243, 112, 33, 0.45);
  color: #FFA566;
}

@keyframes pulseLive {
  0% { transform: scale(0.95); opacity: 0.7; }
  50% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.7; }
}

.hero-mockup-card {
  background: linear-gradient(135deg, #002B2A 0%, #003837 35%, #005E5D 70%, #007E7D 100%);
  border-radius: 24px;
  padding: 28px 34px;
  color: #ffffff;
  display: flex;
  flex-direction: row;
  gap: 32px;
  align-items: center;
  box-shadow: 0 16px 36px -6px rgba(0, 43, 42, 0.45), 0 4px 12px rgba(0, 94, 93, 0.2);
  border: 1px solid rgba(0, 163, 157, 0.35);
  position: relative;
  overflow: hidden;
}

.hero-mockup-card::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(243, 112, 33, 0.18) 0%, transparent 70%);
  pointer-events: none;
}

.hero-mockup-tokoh {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
  padding-right: 32px;
  min-width: 250px;
  max-width: 270px;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.hero-mockup-avatar {
  width: 100%;
  max-width: 175px;
  aspect-ratio: 1 / 1;
  margin: 0 auto 12px;
  display: block;
  border-radius: 20px;
  overflow: hidden;
  background: #002B2A;
  border: 2.5px solid #F37021;
  box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.50), 0 0 0 2px rgba(0, 163, 157, 0.35), 0 0 18px rgba(243, 112, 33, 0.20);
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hero-mockup-avatar::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 -12px 18px rgba(0, 35, 34, 0.32);
}

.hero-mockup-avatar:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -4px rgba(0, 0, 0, 0.60), 0 0 0 2px rgba(243, 112, 33, 0.95), 0 0 24px rgba(243, 112, 33, 0.30);
}

.hero-mockup-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  transform: scale(1.10);
  transform-origin: center 28%;
  filter: contrast(1.05) brightness(1.04);
  display: block;
  transition: transform 0.3s ease;
}

.hero-mockup-avatar:hover img {
  transform: scale(1.14);
}

.hero-mockup-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 4px;
}

.hero-mockup-nama {
  font-size: clamp(0.96rem, 1.12vw, 1.10rem);
  font-weight: 800;
  margin: 6px 0 2px;
  line-height: 1.25;
  color: #fff;
  letter-spacing: -0.01em;
  text-align: center;
  white-space: nowrap;
}

.hero-mockup-jabatan {
  font-size: 0.84rem;
  margin: 4px 0 0;
  color: #cbd5e1;
  font-weight: 500;
}

.hero-badge-firman-mockup {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: linear-gradient(135deg, rgba(243, 112, 33, 0.3) 0%, rgba(243, 112, 33, 0.15) 100%);
  color: #FFA566;
  border: 1px solid rgba(243, 112, 33, 0.55);
  padding: 3px 12px;
  border-radius: 9999px;
  display: inline-block;
  margin-top: 4px;
  width: fit-content;
  box-shadow: 0 2px 8px rgba(243, 112, 33, 0.2);
}

.hero-mockup-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  flex: 1;
  position: relative;
  z-index: 2;
}

/* =========================================================================
   TAMPILAN RESPONSIF UNIVERSAL: TABLET & SMARTPHONE (HP)
   Presisi, Seimbang, dan Anggun di Segala Ukuran Layar Tablet & Smartphone
   ========================================================================= */

/* Tablet & Perangkat Sedang (<= 1140px) */
@media (max-width: 1140px) {
  .hero-mockup-card {
    flex-direction: column;
    align-items: stretch;
    padding: clamp(20px, 3.2vw, 30px) clamp(16px, 2.8vw, 26px);
    gap: 20px;
  }

  .hero-mockup-tokoh {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: left;
    justify-content: flex-start;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    padding-right: 0;
    padding-bottom: 18px;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex-shrink: 1;
    gap: 22px;
  }

  .hero-mockup-avatar {
    width: 170px;
    height: 170px;
    min-width: 170px;
    max-width: 170px;
    aspect-ratio: 1 / 1;
    margin: 0;
    border-radius: 18px;
    overflow: hidden;
    background: #002B2A;
    border: 2px solid rgba(243, 112, 33, 0.85);
    box-shadow: 0 10px 24px -4px rgba(0, 0, 0, 0.50),
                0 0 0 2px rgba(0, 163, 157, 0.35),
                0 0 18px rgba(243, 112, 33, 0.20);
    flex-shrink: 0;
    position: relative;
    z-index: 3;
    transition: transform 0.22s ease;
  }

  .hero-mockup-avatar:hover {
    transform: translateY(-2px);
  }

  .hero-mockup-avatar img {
    object-position: center 25%;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    object-fit: cover;
    transform: scale(1.10);
    transform-origin: center 28%;
    filter: contrast(1.05) brightness(1.04);
  }

  .hero-mockup-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    width: 100%;
    flex: 1 1 auto;
    min-width: 0;
    gap: 4px;
  }

  .hero-mockup-nama {
    font-size: clamp(1.20rem, 2.4vw, 1.45rem);
    font-weight: 800;
    line-height: 1.25;
    color: #FFFFFF;
    margin: 0 0 2px;
    text-align: left;
    letter-spacing: -0.015em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    white-space: normal;
    word-break: normal;
  }

  .hero-badge-firman-mockup {
    font-size: 11px;
    font-weight: 800;
    padding: 3px 14px;
    margin: 3px 0;
    background: linear-gradient(135deg, rgba(243, 112, 33, 0.40) 0%, rgba(243, 112, 33, 0.18) 100%);
    border: 1.5px solid rgba(243, 112, 33, 0.65);
    box-shadow: 0 2px 10px rgba(243, 112, 33, 0.35);
    text-align: left;
    display: inline-block;
  }

  .hero-mockup-jabatan {
    font-size: 0.88rem;
    color: #cbd5e1;
    margin: 2px 0 0;
    text-align: left;
    font-weight: 500;
  }

  .hero-pastor-salam {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.90);
    margin: 6px 0 0;
    line-height: 1.5;
    text-align: left;
    font-style: italic;
    max-width: 100%;
    word-break: normal;
  }

  /* Grid Ibadah Terdekat & Alamat Gereja pada Tablet (2 Kolom Lebar & Lapang) */
  .hero-mockup-grid {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    text-align: left;
  }

  .hero-info-box {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 16px;
    padding: 16px 18px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
  }

  .hero-info-box-val,
  .hero-info-box-addr {
    font-size: 0.92rem;
    line-height: 1.45;
    word-break: normal;
  }

  .hero-info-box-link {
    white-space: nowrap;
    margin-top: 10px;
    display: inline-block;
  }
}

/* Optimasi Khusus HP / Layar Ramping (<= 640px) */
@media (max-width: 640px) {
  .hero-mockup-section {
    margin: 10px auto 0;
    padding: 0 14px;
    width: 100%;
    box-sizing: border-box;
  }

  .hero-header-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin: 0 0 14px;
    padding: 0;
    width: 100%;
    text-align: left;
  }

  .hero-header-kiri {
    width: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .hero-live-pill,
  .hero-visitor-pill {
    margin: 0 !important;
  }

  .hero-motto-tag {
    display: none;
  }

  @media (max-width: 460px) {
    .hero-visitor-today {
      display: none;
    }
  }

  .hero-header-kanan {
    width: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .hero-date-badge {
    width: auto;
    max-width: 100%;
    margin: 0;
    justify-content: flex-start;
    box-sizing: border-box;
  }

  .hero-mockup-card {
    padding: 24px 16px 20px;
    border-radius: 24px;
    gap: 18px;
    background: linear-gradient(160deg, #002B2A 0%, #003837 45%, #002322 100%);
    box-shadow: 0 16px 40px -8px rgba(0, 20, 20, 0.70), 0 0 0 1px rgba(0, 163, 157, 0.35);
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .hero-mockup-tokoh {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-bottom: 22px;
    gap: 12px;
    border-right: none;
    border-bottom: 1px solid rgba(0, 163, 157, 0.25);
    position: relative;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto;
  }

  .hero-mockup-tokoh::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 20%;
    right: 20%;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, rgba(243, 112, 33, 0.75), transparent);
  }

  .hero-mockup-avatar {
    width: 168px;
    height: 168px;
    max-width: 168px;
    aspect-ratio: 1 / 1;
    min-width: 0;
    margin: 0 auto 10px !important;
    display: block;
    border-radius: 22px;
    overflow: hidden;
    background: #002B2A;
    border: 2.5px solid #F37021;
    box-shadow: 0 14px 34px -4px rgba(0, 0, 0, 0.65),
                0 0 0 3px rgba(0, 163, 157, 0.45),
                0 0 24px rgba(243, 112, 33, 0.30);
    position: relative;
    flex-shrink: 0;
    transition: transform 0.22s ease;
  }

  .hero-mockup-avatar::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 19px;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.20), inset 0 -16px 20px rgba(0, 35, 34, 0.38);
  }

  .hero-mockup-avatar:hover {
    transform: translateY(-2px);
  }

  .hero-mockup-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    border-radius: 19px;
    transform: scale(1.18);
    transform-origin: center 24%;
    filter: contrast(1.06) brightness(1.04);
    display: block;
  }

  .hero-mockup-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 4px;
    margin: 0 auto;
    width: 100%;
  }

  .hero-mockup-nama {
    display: block;
    width: 100%;
    text-align: center !important;
    font-size: clamp(1.05rem, 4.1vw, 1.22rem) !important;
    font-weight: 800;
    color: #FFFFFF !important;
    line-height: 1.3;
    letter-spacing: -0.015em;
    white-space: nowrap !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
    margin: 0 0 4px !important;
  }

  .hero-badge-firman-mockup {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 4px auto 3px !important;
    text-align: center;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3.5px 14px;
    border-radius: 9999px;
    background: linear-gradient(135deg, rgba(243, 112, 33, 0.35) 0%, rgba(243, 112, 33, 0.15) 100%);
    border: 1px solid rgba(243, 112, 33, 0.65);
    color: #FFA566;
    box-shadow: 0 2px 8px rgba(243, 112, 33, 0.25);
  }

  .hero-mockup-jabatan {
    display: block;
    width: 100%;
    text-align: center !important;
    font-size: 0.82rem;
    color: #94A3B8 !important;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 2px 0 0 !important;
  }

  .hero-pastor-salam {
    display: block;
    width: 100%;
    max-width: 320px;
    margin: 8px auto 0 !important;
    text-align: center !important;
    font-size: 0.85rem;
    color: rgba(241, 245, 249, 0.92) !important;
    line-height: 1.55;
    font-style: italic;
    text-wrap: balance;
  }

  .hero-mockup-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    width: 100%;
    margin-top: 4px;
  }

  .hero-info-box {
    padding: 16px 16px;
    text-align: left;
    background: rgba(0, 35, 34, 0.55);
    border: 1px solid rgba(0, 163, 157, 0.30);
    border-radius: 18px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .hero-info-box-link {
    margin-top: 10px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #FFA566;
  }
}

/* 3. Menu Ikon Responsif & Rohani Gerejawi (4 Kolom HP, 8 Kolom Desktop) */
.menu-ikon-section {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 24px 16px;
  box-sizing: border-box;
}

.menu-ikon-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  text-align: center;
}

@media (min-width: 1081px) {
  .menu-ikon-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (max-width: 1080px) and (min-width: 601px) {
  .menu-ikon-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }
  .menu-ikon-card {
    padding: 16px 12px 14px;
  }
}

@media (max-width: 600px) {
  .menu-ikon-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }
  .menu-ikon-card {
    padding: 12px 4px 10px;
    border-radius: 14px;
  }
  .menu-ikon-circle {
    width: 44px;
    height: 44px;
    border-radius: 13px;
  }
  .menu-ikon-circle .ikon-3d {
    width: 28px;
    height: 28px;
  }
  .menu-ikon-teks {
    font-size: 0.72rem;
  }
  .menu-ikon-badge {
    font-size: 9px;
    padding: 1px 6px;
    top: 5px;
    right: 5px;
  }
}

.menu-ikon-card {
  background: #ffffff;
  padding: 16px 8px 14px;
  border-radius: 18px;
  box-shadow: 0 2px 8px rgba(0, 56, 55, 0.05);
  border: 1px solid #E2E8F0;
  text-decoration: none;
  color: #1E293B;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.menu-ikon-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 26px -4px rgba(0, 94, 93, 0.16);
  border-color: #00A39D;
  color: #005E5D;
  text-decoration: none;
}

.menu-ikon-circle {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.55), 0 4px 14px rgba(0, 0, 0, 0.06);
  position: relative;
}

.menu-ikon-circle.renungan { background: linear-gradient(135deg, #E6F4F4 0%, #D0ECEC 100%); }
.menu-ikon-circle.phmj     { background: linear-gradient(135deg, #FEF9C3 0%, #FEF08A 100%); }
.menu-ikon-circle.majelis  { background: linear-gradient(135deg, #FFEDD5 0%, #FED7AA 100%); }
.menu-ikon-circle.warga    { background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%); }
.menu-ikon-circle.warta    { background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%); }
.menu-ikon-circle.jadwal   { background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%); }
.menu-ikon-circle.media    { background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%); }
.menu-ikon-circle.pujian   { background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%); }

[data-tema="gelap"] .menu-ikon-circle {
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.16), 0 6px 18px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

[data-tema="gelap"] .menu-ikon-circle.renungan { background: linear-gradient(135deg, rgba(249, 115, 22, 0.35) 0%, rgba(251, 146, 60, 0.20) 100%); }
[data-tema="gelap"] .menu-ikon-circle.phmj     { background: linear-gradient(135deg, rgba(202, 138, 4, 0.35) 0%, rgba(234, 179, 8, 0.20) 100%); }
[data-tema="gelap"] .menu-ikon-circle.majelis  { background: linear-gradient(135deg, rgba(234, 88, 12, 0.35) 0%, rgba(249, 115, 22, 0.20) 100%); }
[data-tema="gelap"] .menu-ikon-circle.warga    { background: linear-gradient(135deg, rgba(79, 70, 229, 0.35) 0%, rgba(99, 102, 241, 0.20) 100%); }
[data-tema="gelap"] .menu-ikon-circle.warta    { background: linear-gradient(135deg, rgba(14, 165, 233, 0.35) 0%, rgba(56, 189, 248, 0.20) 100%); }
[data-tema="gelap"] .menu-ikon-circle.jadwal   { background: linear-gradient(135deg, rgba(2, 132, 199, 0.35) 0%, rgba(14, 165, 233, 0.20) 100%); }
[data-tema="gelap"] .menu-ikon-circle.media    { background: linear-gradient(135deg, rgba(220, 38, 38, 0.35) 0%, rgba(239, 68, 68, 0.20) 100%); }
[data-tema="gelap"] .menu-ikon-circle.pujian   { background: linear-gradient(135deg, rgba(217, 119, 6, 0.35) 0%, rgba(245, 158, 11, 0.20) 100%); }

.menu-ikon-circle .ikon-3d {
  width: 36px;
  height: 36px;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: block;
}

.menu-ikon-card:hover .menu-ikon-circle {
  transform: translateY(-2px) scale(1.08);
  box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.65), 0 8px 22px rgba(0, 0, 0, 0.16);
}

.menu-ikon-card:hover .ikon-3d {
  transform: scale(1.10);
}

.menu-ikon-teks {
  font-size: 0.80rem;
  font-weight: 700;
  line-height: 1.25;
}

/* 4. Konten Utama (Panitia & Renungan) */
.konten-mockup-section {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 16px 28px;
  box-sizing: border-box;
}

.konten-mockup-row {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 992px) {
  .konten-mockup-row {
    flex-direction: row;
    gap: 20px;
  }
}

@media (max-width: 640px) {
  .kartu-pembangunan-dark,
  .kartu-renungan-mockup {
    padding: 20px 16px !important;
    border-radius: 18px !important;
  }
}

.kartu-pembangunan-dark {
  flex: 3;
  background: linear-gradient(135deg, #002B2A 0%, #003837 50%, #004D4C 100%);
  color: #ffffff;
  border-radius: 24px;
  padding: 32px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 36px -6px rgba(0, 43, 42, 0.40);
  border: 1px solid rgba(0, 163, 157, 0.3);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card-blueprint-overlay {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(0, 163, 157, 0.25) 1px, transparent 1px),
                    linear-gradient(to right, rgba(0, 163, 157, 0.08) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(0, 163, 157, 0.08) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: 0.85;
  pointer-events: none;
}

.badge-emas-mini {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #F37021 0%, #FF8533 100%);
  color: #ffffff;
  padding: 4px 12px;
  border-radius: 6px;
  display: inline-block;
  box-shadow: 0 2px 8px rgba(243, 112, 33, 0.3);
}

.tombol-cek-detail {
  background: linear-gradient(135deg, #F37021 0%, #FF8533 100%);
  color: #ffffff;
  padding: 10px 26px;
  border-radius: 9999px;
  font-weight: 750;
  font-size: 0.90rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 6px 18px rgba(243, 112, 33, 0.45);
}

.tombol-cek-detail:hover {
  opacity: 0.94;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(243, 112, 33, 0.55);
}

.kartu-renungan-mockup {
  flex: 2;
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-top: 4px solid #005E5D;
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 6px 20px -2px rgba(0, 56, 55, 0.08);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

.renungan-watermark-art {
  position: absolute;
  right: -15px;
  bottom: -15px;
  width: 140px;
  height: 140px;
  opacity: 0.05;
  pointer-events: none;
  color: #005E5D;
}

.tombol-baca-renungan {
  flex: 1;
  background: linear-gradient(135deg, #005E5D 0%, #008B8B 100%);
  color: #ffffff;
  border-radius: 9999px;
  padding: 10px 18px;
  font-size: 0.88rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 14px rgba(0, 94, 93, 0.30);
}

.tombol-baca-renungan:hover {
  opacity: 0.94;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 94, 93, 0.40);
  color: #ffffff;
  text-decoration: none;
}

.tombol-bagikan-renungan {
  padding: 10px 22px;
  border: 1.5px solid #CBD5E1;
  background: #ffffff;
  color: #334155;
  border-radius: 9999px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.tombol-bagikan-renungan:hover {
  background: #FFF7ED;
  border-color: #F37021;
  color: #F37021;
}

/* ==========================================================================
   BANNER SIARAN LANGSUNG / LIVE IBADAH (PRESISI TINGGI & RESPONSIF)
   Mencegah tabrakan teks/badge pada seluruh rasio layar HP / tablet / desktop
   ========================================================================== */
.kartu-live-alert {
  border-left: 4px solid #CC181E !important;
  background: linear-gradient(135deg, rgba(204, 24, 30, 0.05) 0%, rgba(212, 175, 55, 0.08) 100%) !important;
  border-radius: var(--radius-sedang, 18px);
  padding: 20px 22px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
}

.live-alert-konten {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.live-alert-info {
  flex: 1 1 300px;
  min-width: 0;
}

.live-alert-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
}

.live-alert-meta .badge.merah {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 750;
  letter-spacing: 0.03em;
  padding: 4px 12px;
  border-radius: 9999px;
  flex-shrink: 0;
}

.live-alert-jadwal {
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--muted);
  line-height: 1.3;
}

.live-alert-judul {
  margin: 0 0 6px !important;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--tinta);
  line-height: 1.35;
}

.live-alert-deskripsi {
  margin: 0 !important;
  font-size: 0.88rem;
  color: var(--teks);
  line-height: 1.55;
  max-width: 660px;
}

.live-alert-aksi {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.titik-live-animasi {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #EF4444;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  animation: denyut-live 1.6s infinite cubic-bezier(0.66, 0, 0, 1);
  display: inline-block;
  flex-shrink: 0;
}

@keyframes denyut-live {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

@media (max-width: 640px) {
  .kartu-live-alert {
    padding: 16px 14px;
  }
  .live-alert-konten {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .live-alert-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .live-alert-aksi {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 8px;
  }
  .live-alert-aksi .tombol {
    width: 100%;
    justify-content: center;
    padding: 10px 14px;
    font-size: 0.85rem;
    min-height: 42px;
  }
}

/* Dark Mode Penyesuaian */
[data-tema="gelap"] .kartu-live-alert {
  background: linear-gradient(135deg, rgba(204, 24, 30, 0.12) 0%, rgba(0, 36, 35, 0.95) 100%) !important;
  border-color: rgba(204, 24, 30, 0.45) !important;
  border-left-color: #EF4444 !important;
}
[data-tema="gelap"] .live-alert-jadwal {
  color: #94A3B8;
}
[data-tema="gelap"] .live-alert-judul {
  color: #F8FAFC;
}
[data-tema="gelap"] .live-alert-deskripsi {
  color: #CBD5E1;
}

/* ==========================================================================
   UNIVERSAL MOBILE PRECISION ENGINE & 60-90 FPS HARDWARE SYNC
   Mencakup seluruh rasio layar HP (PWA/Mobile), navigasi kilat & zero jank
   ========================================================================== */

/* 1. Mencegah Horizontal Scroll tanpa mengunci vertikal scroll */
.wrap, .utama, main {
  max-width: 100%;
}

/* 2. Optimasi Navigasi Bawah Mobile (PWA Standalone & Browser HP) */
@media (max-width: 900px) {
  body.publik {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .nav-bawah {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: auto !important;
    min-height: 62px;
    padding-top: 6px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 1000;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
  }

  .nav-bawah a, .nav-bawah button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 5px 3px 4px;
    min-height: 46px;
    border-radius: 12px;
    touch-action: manipulation;
    overflow: visible;
  }

  .nav-bawah a span, .nav-bawah button span {
    font-size: 0.63rem;
    font-weight: 750;
    line-height: 1.1;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }

  .nav-bawah button[data-menu-toggle].aktif {
    background: rgba(0, 163, 157, 0.18) !important;
    border: 1px solid rgba(0, 163, 157, 0.5) !important;
    color: #00A39D !important;
    box-shadow: 0 4px 12px rgba(0, 163, 157, 0.25) !important;
  }
  .nav-bawah button[data-menu-toggle].aktif span {
    color: #00A39D !important;
  }
  .nav-bawah button[data-menu-toggle].aktif .ikon {
    color: #00A39D !important;
    stroke: #00A39D !important;
  }

  [data-tema="gelap"] .nav-bawah button[data-menu-toggle].aktif {
    background: rgba(59, 130, 246, 0.28) !important;
    border-color: rgba(96, 165, 250, 0.55) !important;
    color: #60A5FA !important;
  }
  [data-tema="gelap"] .nav-bawah button[data-menu-toggle].aktif span {
    color: #60A5FA !important;
  }
  [data-tema="gelap"] .nav-bawah button[data-menu-toggle].aktif .ikon {
    color: #60A5FA !important;
    stroke: #60A5FA !important;
  }

  .nav-bawah a:active, .nav-bawah button:active {
    transform: scale(0.92);
    transition: transform 0.08s ease;
  }
}

/* 3. Penataan Elemen Khusus Layar Sangat Kecil (iPhone SE, Galaxy A, <= 400px) */
@media (max-width: 420px) {
  .wrap {
    padding-left: 12px;
    padding-right: 12px;
  }

  .kartu {
    padding: 16px 14px;
    border-radius: 16px;
  }

  .page-head h1 {
    font-size: 1.45rem;
  }

  .badge {
    font-size: 0.68rem;
    padding: 2.5px 8px;
    white-space: normal;
    word-break: break-word;
  }

  .hero-mockup-nama {
    font-size: clamp(1.02rem, 3.8vw, 1.18rem) !important;
    white-space: nowrap !important;
    text-align: center !important;
    width: 100% !important;
  }

  .tombol {
    font-size: 0.84rem;
    padding: 8px 14px;
  }
}

/* 4. Filter Baris Universal (Responsif di Layar HP) */
@media (max-width: 600px) {
  .filter-baris {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .filter-baris .field {
    width: 100%;
  }

  .filter-baris .field input,
  .filter-baris .field select {
    width: 100%;
  }

  .filter-baris .tombol {
    width: 100%;
    justify-content: center;
  }
}

/* 5. Komposisi GPU Frame Rate Universal 60-90 FPS (Disembunyikan agar UI bersih & profesional) */
.fps-monitor-badge {
  display: none !important;
}

.fps-titik {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 6px #10B981;
  flex-shrink: 0;
}

.fps-monitor-badge.ringkas .fps-teks {
  display: none;
}

/* ==========================================================================
   DASBOR PUBLIK JEMAAT — SEMPURNA, MODERN & ELEGAN (BNI TEAL & GOLD PALETTE)
   Tampilan Khusus Beranda Publik GKI Alfa Omega Bhayangkara
   ========================================================================== */

/* 1. Baris Header / Salam & Status Portal */
.hero-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.hero-header-kiri {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.hero-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(0, 94, 93, 0.08);
  border: 1.5px solid rgba(0, 163, 157, 0.35);
  padding: 5px 14px;
  border-radius: 9999px;
  font-size: 0.74rem;
  font-weight: 800;
  color: #005E5D;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.hero-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
  animation: denyut-live 1.8s infinite cubic-bezier(0.66, 0, 0, 1);
  flex-shrink: 0;
}

.hero-motto-tag {
  font-size: 0.86rem;
  font-style: italic;
  font-weight: 550;
  color: var(--muted);
}

.hero-date-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(243, 112, 33, 0.08);
  border: 1.5px solid rgba(243, 112, 33, 0.28);
  color: #C25410;
  padding: 5px 14px;
  border-radius: 9999px;
  font-size: 0.76rem;
  font-weight: 750;
  letter-spacing: 0.02em;
}

.hero-visitor-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(2, 132, 199, 0.08);
  border: 1.5px solid rgba(2, 132, 199, 0.28);
  color: #0284C7;
  padding: 5px 13px;
  border-radius: 9999px;
  font-size: 0.74rem;
  font-weight: 750;
  letter-spacing: 0.02em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  white-space: nowrap;
  transition: all 0.18s ease;
}

.hero-visitor-pill:hover {
  background: rgba(2, 132, 199, 0.14);
  border-color: rgba(2, 132, 199, 0.45);
  transform: translateY(-1px);
}

.hero-visitor-pill svg {
  color: #0284C7;
  flex-shrink: 0;
}

.hero-visitor-pill strong {
  color: #0369A1;
  font-weight: 800;
}

.hero-visitor-today {
  opacity: 0.85;
  font-weight: 600;
  font-size: 0.70rem;
}

[data-tema="gelap"] .hero-live-pill {
  background: rgba(59, 130, 246, 0.16);
  border-color: rgba(59, 130, 246, 0.40);
  color: #60A5FA;
}

[data-tema="gelap"] .hero-visitor-pill {
  background: rgba(14, 165, 233, 0.16);
  border-color: rgba(56, 189, 248, 0.40);
  color: #BAE6FD;
}

[data-tema="gelap"] .hero-visitor-pill svg {
  color: #38BDF8;
}

[data-tema="gelap"] .hero-visitor-pill strong {
  color: #38BDF8;
}

[data-tema="gelap"] .hero-date-badge {
  background: rgba(243, 112, 33, 0.16);
  border-color: rgba(243, 112, 33, 0.40);
  color: #FFA566;
}

.hero-pastor-salam {
  font-size: 0.82rem;
  line-height: 1.48;
  color: #E2E8F0;
  margin: 6px 0 0;
  font-style: italic;
  opacity: 0.95;
}

/* 2. Hero Info Box (Ibadah Terdekat & Lokasi Gereja) */
.hero-info-box {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 18px;
  padding: 16px 18px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.22s ease;
}

.hero-info-box:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(243, 112, 33, 0.45);
  transform: translateY(-2px);
}

.hero-info-box-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.hero-info-box-icon {
  font-size: 1rem;
}

.hero-info-box-sub {
  font-size: 0.78rem;
  font-weight: 750;
  color: #94A3B8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.hero-info-box-val {
  font-size: 1.10rem;
  font-weight: 850;
  color: #FFFFFF;
  margin: 0 0 3px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.hero-info-box-loc {
  font-size: 0.82rem;
  color: #CBD5E1;
  margin: 0;
  font-weight: 550;
}

.hero-info-box-addr {
  font-size: 0.90rem;
  font-weight: 650;
  color: #F1F5F9;
  line-height: 1.45;
  margin: 0;
}

.hero-info-box-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 0.82rem;
  font-weight: 750;
  color: #FFA566;
  text-decoration: none;
  transition: all 0.18s ease;
  width: fit-content;
}

.hero-info-box-link:hover {
  color: #FFD1A4;
  transform: translateX(3px);
  text-decoration: none;
}

/* Wadah Citra Satelit Statis Murni (Tepat di Titik Gedung Gereja & Ringan) */
.hero-map-satelit-box {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 12px;
  overflow: hidden;
  background: #061413;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(0, 163, 157, 0.35);
  display: block;
}

.hero-map-static-link {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
}

.hero-map-static-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.4s ease;
}

.hero-map-static-link:hover .hero-map-static-img,
.hero-map-static-link:focus .hero-map-static-img {
  transform: scale(1.05);
}

/* Petunjuk Interaktif Buka Maps */
.hero-map-hint {
  position: absolute;
  bottom: 8px;
  left: 8px;
  z-index: 20;
  pointer-events: none;
  background: rgba(0, 25, 24, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(0, 163, 157, 0.45);
  color: #A7F3D0;
  font-size: 0.68rem;
  font-weight: 750;
  padding: 3px 8px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.40);
  transition: opacity 0.4s ease;
}

/* Radar Marker Pin Presisi Terpusat Statis */
.static-pin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  pointer-events: none;
  z-index: 10;
}

.static-pin .gmaps-pin-target {
  position: relative;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.static-pin .gmaps-pulse-ring {
  position: absolute;
  top: -17px;
  left: -17px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(26, 115, 232, 0.35);
  border: 2px solid rgba(26, 115, 232, 0.9);
  box-shadow: 0 0 16px rgba(26, 115, 232, 0.7);
  animation: gmapsRadarPulse 2s infinite ease-out;
  transform-origin: center center;
}

.static-pin .gmaps-circle-core {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #1a73e8;
  border: 3px solid #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.75);
  z-index: 2;
}

.static-pin .gmaps-circle-core::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #ffffff;
}

.static-pin .gmaps-pin-label {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 25, 24, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(0, 163, 157, 0.6);
  color: #ffffff;
  font-size: 0.70rem;
  font-weight: 750;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
  letter-spacing: 0.02em;
  z-index: 3;
}

@keyframes gmapsRadarPulse {
  0% {
    transform: scale(0.45);
    opacity: 1;
  }
  70% {
    transform: scale(1.4);
    opacity: 0.35;
  }
  100% {
    transform: scale(1.85);
    opacity: 0;
  }
}

/* Styling Popup Peta Leaflet (Kompatibel Penuh Mode Terang & Gelap) */
.leaflet-popup-content-wrapper {
  padding: 6px 4px !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  color: #0F172A !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 10px 25px -4px rgba(0, 0, 0, 0.3) !important;
}

.leaflet-popup-tip {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: none !important;
}

.leaflet-popup-close-button {
  color: #64748B !important;
  top: 8px !important;
  right: 8px !important;
  font-size: 16px !important;
}

.leaflet-popup-close-button:hover {
  color: #0F172A !important;
}

.gmaps-popup-card {
  text-align: center;
  padding: 4px 6px;
  min-width: 170px;
  font-family: inherit;
}

.gmaps-popup-title {
  font-size: 0.86rem;
  font-weight: 800;
  color: #0F172A !important;
  display: block;
  margin-bottom: 3px;
  line-height: 1.3;
}

.gmaps-popup-sub {
  font-size: 0.74rem;
  font-weight: 500;
  color: #475569 !important;
  display: block;
  margin-bottom: 8px;
  line-height: 1.35;
}

.gmaps-popup-btn {
  display: inline-block;
  padding: 5px 12px;
  background: #00A39D;
  color: #ffffff !important;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none !important;
  transition: all 0.18s ease;
  box-shadow: 0 2px 6px rgba(0, 163, 157, 0.35);
}

.gmaps-popup-btn:hover {
  background: #008782;
  transform: translateY(-1px);
}

/* Mode Gelap: Tampilan Pop-up Elegan, Konsisten, dan Jelas Terbaca */
[data-tema="gelap"] .leaflet-popup-content-wrapper {
  background: #0F172A !important;
  color: #F8FAFC !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.65) !important;
}

[data-tema="gelap"] .leaflet-popup-tip {
  background: #0F172A !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

[data-tema="gelap"] .leaflet-popup-close-button {
  color: #94A3B8 !important;
}

[data-tema="gelap"] .leaflet-popup-close-button:hover {
  color: #FFFFFF !important;
}

[data-tema="gelap"] .gmaps-popup-title {
  color: #FFFFFF !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

[data-tema="gelap"] .gmaps-popup-sub {
  color: #93C5FD !important;
}

[data-tema="gelap"] .gmaps-popup-btn {
  background: linear-gradient(135deg, #2563EB, #1D4ED8);
  border: 1px solid rgba(96, 165, 250, 0.3);
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

[data-tema="gelap"] .gmaps-popup-btn:hover {
  background: #3B82F6;
  border-color: #60A5FA;
}

/* 3. Strip Statistik Publik (Live Church Pulse) */
.hero-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
  width: 100%;
}

@media (max-width: 1080px) {
  .hero-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}

@media (max-width: 480px) {
  .hero-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

.hero-stat-card {
  background: #FFFFFF;
  border: 1px solid rgba(0, 163, 157, 0.18);
  border-radius: 18px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 4px 14px rgba(0, 43, 42, 0.05);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.hero-stat-card:hover {
  transform: translateY(-3px);
  border-color: #00A39D;
  box-shadow: 0 12px 24px -4px rgba(0, 94, 93, 0.18);
}

.hero-stat-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hero-stat-icon.teal   { background: #E6F4F4; color: #005E5D; }
.hero-stat-icon.cyan   { background: #ECFDF5; color: #00A39D; }
.hero-stat-icon.orange { background: #FFF7ED; color: #F37021; }
.hero-stat-icon.gold   { background: #FFFDF0; color: #AA771C; }

.hero-stat-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hero-stat-num {
  font-size: 1.45rem;
  font-weight: 850;
  line-height: 1.15;
  color: #0F172A;
  letter-spacing: -0.02em;
}

.hero-stat-label {
  font-size: 0.82rem;
  font-weight: 750;
  color: #475569;
  margin-top: 2px;
}

.hero-stat-sub {
  font-size: 0.72rem;
  color: #94A3B8;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

[data-tema="gelap"] .hero-stat-card {
  background: #111827;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

[data-tema="gelap"] .hero-stat-card:hover {
  background: #1E293B;
  border-color: #3B82F6;
  box-shadow: 0 12px 24px -4px rgba(59, 130, 246, 0.30);
}

[data-tema="gelap"] .hero-stat-num {
  color: #FFFFFF;
}

[data-tema="gelap"] .hero-stat-label {
  color: #CBD5E1;
}

[data-tema="gelap"] .hero-stat-sub {
  color: #94A3B8;
}

/* ==========================================================================
   3. Modul Grafik & Statistik Demografi Modern
   (Warga Jemaat: Balita, Anak, PAM, Dewasa, Lansia, Pria, Wanita)
   ========================================================================== */
.hero-stat-modern {
  margin-top: 18px;
  background: linear-gradient(135deg, #002B2A 0%, #003837 40%, #004D4C 75%, #005E5D 100%);
  border: 1px solid rgba(0, 163, 157, 0.35);
  border-radius: 20px;
  padding: 20px 22px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 16px 36px -6px rgba(0, 43, 42, 0.35), 0 4px 14px rgba(0, 94, 93, 0.18);
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

[data-tema="gelap"] .hero-stat-modern {
  background: linear-gradient(135deg, #0F172A 0%, #111827 50%, #1E293B 100%);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 16px 36px -6px rgba(0, 0, 0, 0.6);
}

.hero-stat-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

[data-tema="gelap"] .hero-stat-head-row {
  border-bottom-color: rgba(255, 255, 255, 0.10);
}

.hero-stat-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero-stat-title-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #00A39D, #005E5D);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.10rem;
  box-shadow: 0 4px 12px rgba(0, 163, 157, 0.35);
  flex-shrink: 0;
}

.hero-stat-main-title {
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #FFFFFF !important;
  margin: 0;
  text-transform: uppercase;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

.hero-stat-sub-title {
  font-size: 0.76rem;
  color: #E2E8F0 !important;
  margin: 2px 0 0;
  font-weight: 550;
}

.hero-stat-sub-title strong {
  color: #FFFFFF !important;
  font-weight: 800;
}

.hero-stat-gender-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(0, 0, 0, 0.35);
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.20);
}

.hero-gender-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.80rem;
  font-weight: 750;
  color: #FFFFFF !important;
}

.hero-gender-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.hero-gender-dot.pria { background: #38BDF8; box-shadow: 0 0 8px rgba(56, 189, 248, 0.8); }
.hero-gender-dot.wanita { background: #F472B6; box-shadow: 0 0 8px rgba(244, 114, 182, 0.8); }

/* Spectrum Visualizer Bar (Grafik Proporsi Modern) */
.hero-spectrum-bar-wrap {
  margin-bottom: 14px;
}

.hero-spectrum-bar {
  display: flex;
  height: 10px;
  width: 100%;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-spectrum-seg {
  height: 100%;
  transition: width 0.35s ease, opacity 0.2s ease;
}
.hero-spectrum-seg:hover {
  opacity: 0.85;
}
.hero-spectrum-seg.balita { background: #F59E0B; }
.hero-spectrum-seg.anak   { background: #10B981; }
.hero-spectrum-seg.pam    { background: #06B6D4; }
.hero-spectrum-seg.dewasa { background: #F37021; }
.hero-spectrum-seg.lansia { background: #A855F7; }

/* Grid Kategori Demografi */
.hero-demo-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 960px) {
  .hero-demo-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .hero-demo-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
}

.hero-demo-card {
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  padding: 11px 12px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hero-demo-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}
.hero-demo-card.balita::before { background: #F59E0B; }
.hero-demo-card.anak::before   { background: #10B981; }
.hero-demo-card.pam::before    { background: #06B6D4; }
.hero-demo-card.dewasa::before { background: #F37021; }
.hero-demo-card.lansia::before { background: #A855F7; }

.hero-demo-card:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.35);
}

[data-tema="gelap"] .hero-demo-card {
  background: rgba(30, 41, 59, 0.65);
  border-color: rgba(255, 255, 255, 0.10);
}

[data-tema="gelap"] .hero-demo-card:hover {
  background: rgba(30, 41, 59, 0.95);
  border-color: #3B82F6;
}

.hero-demo-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.hero-demo-name {
  font-size: 0.74rem;
  font-weight: 750;
  color: #E2E8F0 !important;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.hero-demo-pct {
  font-size: 0.68rem;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.20);
  color: #FFFFFF !important;
}

.hero-demo-num {
  font-size: 1.30rem;
  font-weight: 850;
  color: #FFFFFF !important;
  line-height: 1.1;
  margin: 3px 0;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.hero-demo-sub {
  font-size: 0.68rem;
  color: #CBD5E1 !important;
  font-weight: 600;
}

[data-tema="gelap"] .hero-stat-icon.teal   { background: rgba(59, 130, 246, 0.22); color: #60A5FA; }
[data-tema="gelap"] .hero-stat-icon.cyan   { background: rgba(56, 189, 248, 0.25); color: #38BDF8; }
[data-tema="gelap"] .hero-stat-icon.orange { background: rgba(243, 112, 33, 0.25); color: #FF8533; }
[data-tema="gelap"] .hero-stat-icon.gold   { background: rgba(212, 175, 55, 0.25); color: #FDE047; }

/* 4. Micro Badge Menu Ikon Pintasan - Dihilangkan Sesuai Permintaan */
.menu-ikon-badge {
  display: none !important;
}

/* 5. Fallback Background Slider Tanpa Gambar */
.slide-fallback-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #002B2A 0%, #003837 40%, #005E5D 80%, #007E7D 100%);
  overflow: hidden;
}

.slide-fallback-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(243, 112, 33, 0.16) 1.5px, transparent 1.5px),
                    radial-gradient(rgba(0, 163, 157, 0.22) 1.5px, transparent 1.5px);
  background-size: 32px 32px;
  background-position: 0 0, 16px 16px;
  opacity: 0.65;
}

.slide-badge-kategori,
.slide-teks .slide-badge-kategori {
  display: inline-flex !important;
  width: fit-content !important;
  max-width: max-content !important;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 9999px;
  background: rgba(243, 112, 33, 0.24) !important;
  border: 1.5px solid rgba(243, 112, 33, 0.85) !important;
  color: #FFA566 !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  box-shadow: 0 2px 10px rgba(243, 112, 33, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* 6. Kartu Warta Jemaat Modern dengan Thumbnail */
.warta-item-kartu {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid rgba(226, 232, 240, 0.85);
  border-radius: 16px;
  background: #FFFFFF;
  text-decoration: none;
  color: inherit;
  transition: all 0.22s ease;
  position: relative;
}

.warta-item-kartu:hover {
  transform: translateX(4px);
  border-color: #00A39D;
  box-shadow: 0 8px 20px -4px rgba(0, 94, 93, 0.14);
  text-decoration: none;
}

.warta-item-thumb {
  width: 72px;
  height: 72px;
  min-width: 72px;
  border-radius: 12px;
  object-fit: cover;
  background: #E2E8F0;
  border: 1px solid rgba(0, 163, 157, 0.20);
}

.warta-item-konten {
  flex: 1;
  min-width: 0;
}

.warta-item-konten h3 {
  margin: 4px 0 3px;
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--tinta);
  line-height: 1.35;
}

.warta-item-konten p {
  margin: 0;
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.45;
}

[data-tema="gelap"] .warta-item-kartu {
  background: #111827;
  border-color: rgba(255, 255, 255, 0.08);
}

[data-tema="gelap"] .warta-item-kartu:hover {
  background: #1E293B;
  border-color: #3B82F6;
}

[data-tema="gelap"] .warta-item-konten h3 {
  color: #F8FAFC !important;
}

[data-tema="gelap"] .warta-item-konten p {
  color: #CBD5E1 !important;
}

/* 7. Jadwal Ibadah Sepekan / Alternatif Agenda */
.agenda-pekan-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.agenda-pekan-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(0, 94, 93, 0.04);
  border: 1px solid rgba(0, 163, 157, 0.15);
  transition: all 0.2s ease;
}

.agenda-pekan-item:hover {
  background: rgba(0, 94, 93, 0.08);
  border-color: rgba(0, 163, 157, 0.35);
  transform: translateX(3px);
}

.agenda-pekan-time {
  width: 58px;
  min-width: 58px;
  text-align: center;
  background: linear-gradient(135deg, #005E5D 0%, #003837 100%);
  color: #FFFFFF;
  border-radius: 10px;
  padding: 8px 4px;
  box-shadow: 0 3px 8px rgba(0, 56, 55, 0.25);
}

.agenda-pekan-time strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 850;
  line-height: 1.1;
  color: #FFA566;
}

.agenda-pekan-time small {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #CBD5E1;
  margin-top: 2px;
}

.agenda-pekan-info {
  flex: 1;
  min-width: 0;
}

.agenda-pekan-info h4 {
  margin: 0 0 2px;
  font-size: 0.94rem;
  font-weight: 750;
  color: var(--tinta);
}

.agenda-pekan-info p {
  margin: 0;
  font-size: 0.80rem;
  color: var(--muted);
}

[data-tema="gelap"] .agenda-pekan-item {
  background: #111827;
  border-color: rgba(255, 255, 255, 0.08);
}

[data-tema="gelap"] .agenda-pekan-item:hover {
  background: #1E293B;
}

[data-tema="gelap"] .agenda-pekan-info h4 {
  color: #F8FAFC !important;
}

[data-tema="gelap"] .agenda-pekan-info p {
  color: #CBD5E1 !important;
}

/* 8. Ulang Tahun Grid & Row Beranda Rapi Elegan */
.ultah-beranda-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 1024px) {
  .ultah-beranda-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

@media (max-width: 640px) {
  .ultah-beranda-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

.ultah-item-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(226, 232, 240, 0.90);
  background: #FFFFFF;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
  transition: all 0.2s ease;
  min-width: 0;
}

.ultah-item-row:hover {
  background: rgba(0, 94, 93, 0.03);
  border-color: rgba(0, 163, 157, 0.35);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 94, 93, 0.08);
}

.ultah-avatar-inisial {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #005E5D 0%, #00A39D 100%);
  color: #FFFFFF;
  font-weight: 800;
  font-size: 0.90rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 94, 93, 0.25);
  flex-shrink: 0;
}

.ultah-avatar-foto,
.ultah-presisi-avatar {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ultah-avatar-foto img,
.ultah-presisi-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.ultah-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ultah-info-nama {
  font-weight: 750;
  font-size: 0.90rem;
  color: var(--tinta);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.ultah-info-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ultah-info-rayon {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 600;
}

.ultah-badge-umur {
  font-size: 0.65rem !important;
  padding: 2px 8px !important;
  line-height: 1.25 !important;
  letter-spacing: 0.02em;
  font-weight: 650 !important;
  border-radius: 6px !important;
}

.ultah-item-kanan {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.ultah-badge-tgl {
  font-size: 0.75rem !important;
  font-weight: 750 !important;
  padding: 4px 10px !important;
  background: #F1F5F9 !important;
  color: #0F766E !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
}

[data-tema="gelap"] .ultah-item-row {
  background: #111827;
  border-color: rgba(255, 255, 255, 0.08);
}

[data-tema="gelap"] .ultah-item-row:hover {
  background: #1E293B;
  border-color: #3B82F6;
}

[data-tema="gelap"] .ultah-info-nama {
  color: #F8FAFC !important;
}

[data-tema="gelap"] .ultah-info-rayon {
  color: #94A3B8 !important;
}

[data-tema="gelap"] .ultah-badge-tgl {
  background: #1E293B !important;
  color: #38BDF8 !important;
  border-color: rgba(56, 189, 248, 0.3) !important;
}

/* 9. Pusat Informasi & Kontak Cepat Jemaat */
.pusat-kontak-section {
  width: 100%;
  margin-top: 14px;
}

.pusat-kontak-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 860px) {
  .pusat-kontak-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

.pusat-kontak-card {
  background: #FFFFFF;
  border: 1px solid rgba(0, 163, 157, 0.20);
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 4px 16px rgba(0, 56, 55, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.22s ease;
}

.pusat-kontak-card:hover {
  transform: translateY(-3px);
  border-color: #00A39D;
  box-shadow: 0 12px 28px -4px rgba(0, 94, 93, 0.16);
}

.pusat-kontak-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.pusat-kontak-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.25rem;
}

.pusat-kontak-icon.teal   { background: #E6F4F4; color: #005E5D; }
.pusat-kontak-icon.orange { background: #FFF7ED; color: #F37021; }
.pusat-kontak-icon.blue   { background: #EEF2FF; color: #4F46E5; }

.pusat-kontak-card h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--tinta);
}

.pusat-kontak-card p {
  margin: 0 0 16px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--muted);
}

[data-tema="gelap"] .pusat-kontak-card {
  background: #111827;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.30);
}

[data-tema="gelap"] .pusat-kontak-card:hover {
  background: #1E293B;
}

[data-tema="gelap"] .pusat-kontak-card h3 {
  color: #F8FAFC !important;
}

[data-tema="gelap"] .pusat-kontak-card p {
  color: #CBD5E1 !important;
}

[data-tema="gelap"] .pusat-kontak-icon.teal   { background: rgba(59, 130, 246, 0.22); color: #60A5FA; }
[data-tema="gelap"] .pusat-kontak-icon.orange { background: rgba(243, 112, 33, 0.25); color: #FF8533; }
[data-tema="gelap"] .pusat-kontak-icon.blue   { background: rgba(129, 140, 248, 0.25); color: #A5B4FC; }

/* Hilangkan garis di bagian panel atas (garis scrollbar samping & border topbar) */
html, body {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

html::-webkit-scrollbar, body::-webkit-scrollbar,
.header-puncak-terkunci::-webkit-scrollbar, .topbar::-webkit-scrollbar,
.admin-top::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.topbar-in, .topbar-aksi, .tombol-menu-mobile, .admin-top {
  border-right: none !important;
  outline: none !important;
}

.header-puncak-terkunci {
  border-bottom: none !important;
  box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.05);
}

[data-tema="gelap"] .header-puncak-terkunci {
  border-bottom: none !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

/* Responsive Layout Siaran Langsung (Live) - Konsisten di Semua Perangkat */
.kartu-judul-live {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin-bottom: 12px !important;
  padding-bottom: 8px !important;
  width: 100% !important;
}

.badge-live {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  padding: 4px 12px !important;
  white-space: nowrap !important;
  border-radius: 9999px !important;
  flex-shrink: 0 !important;
}

.tautan-buka-yt {
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  color: #00A39D !important;
  text-decoration: none !important;
  margin-left: auto !important;
}

.tautan-buka-yt:hover {
  text-decoration: underline !important;
  color: #F37021 !important;
}

@media (max-width: 480px) {
  .kartu-judul-live {
    gap: 6px !important;
  }
  .badge-live {
    font-size: 0.72rem !important;
    padding: 3px 8px !important;
    letter-spacing: 0.01em !important;
  }
  .tautan-buka-yt {
    font-size: 0.75rem !important;
  }
}

@media (max-width: 640px) {
  .slide-teks {
    max-width: 100% !important;
    padding: 22px 18px 42px !important;
  }
}

/* ==============================================================================
   PEMUTAR MUSIK LATAR ROHANI (FLOATING BACKSOUND WIDGET)
   ============================================================================== */
.pemutar-musik-wrap {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 9990;
  display: block;
}

.tombol-musik-bgm {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 10px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #003837;
  border: 1px solid rgba(0, 94, 93, 0.22);
  border-radius: 9999px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0, 43, 42, 0.12);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.tombol-musik-bgm:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 43, 42, 0.20);
  border-color: rgba(0, 94, 93, 0.45);
}

.tombol-musik-bgm:active {
  transform: translateY(0) scale(0.97);
}

/* Piringan Musik */
.piringan-musik {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #E8F5F5;
  color: #005E5D;
  flex-shrink: 0;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.tombol-musik-bgm.memutar .piringan-musik {
  background: #00A39D;
  color: #FFFFFF;
  animation: putarPiringan 3.5s linear infinite;
}

@keyframes putarPiringan {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Animasi Gelombang Audio */
.animasi-gelombang {
  display: inline-flex;
  align-items: flex-end;
  gap: 2.5px;
  height: 14px;
  width: 14px;
  padding-bottom: 1px;
}

.batang-gelombang {
  width: 2.5px;
  height: 3px;
  background: #94A3B8;
  border-radius: 2px;
  transition: height 0.2s ease, background-color 0.2s ease;
}

.tombol-musik-bgm.memutar .batang-gelombang {
  background: #06D6A0;
  animation: lompatGelombang 0.75s ease-in-out infinite alternate;
}

.tombol-musik-bgm.memutar .batang-gelombang.b1 {
  animation-delay: 0s;
}

.tombol-musik-bgm.memutar .batang-gelombang.b2 {
  animation-delay: 0.25s;
}

.tombol-musik-bgm.memutar .batang-gelombang.b3 {
  animation-delay: 0.5s;
}

@keyframes lompatGelombang {
  0% { height: 3px; }
  100% { height: 13px; }
}

/* Status Sedang Memutar */
.tombol-musik-bgm.memutar {
  background: linear-gradient(135deg, #005E5D 0%, #003837 100%);
  color: #FFFFFF;
  border-color: #00A39D;
  box-shadow: 0 6px 22px rgba(0, 94, 93, 0.35);
}

/* Dark Mode */
[data-tema="gelap"] .tombol-musik-bgm {
  background: rgba(15, 23, 42, 0.92);
  border-color: rgba(59, 130, 246, 0.35);
  color: #F8FAFC;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
}

[data-tema="gelap"] .tombol-musik-bgm .piringan-musik {
  background: rgba(59, 130, 246, 0.35);
  color: #60A5FA;
}

[data-tema="gelap"] .tombol-musik-bgm.memutar {
  background: linear-gradient(135deg, #1E40AF 0%, #0F172A 100%);
  border-color: #38BDF8;
  color: #FFFFFF;
}

/* Responsif Mobile (posisi melayang di atas bar bawah) */
@media (max-width: 820px) {
  .pemutar-musik-wrap {
    bottom: calc(66px + env(safe-area-inset-bottom, 0px));
    left: 14px;
    z-index: 998;
  }
  .tombol-musik-bgm {
    padding: 6px 12px 6px 8px;
    font-size: 0.78rem;
  }
  .piringan-musik {
    width: 26px;
    height: 26px;
  }
}

/* Posisi Melayang di Halaman Admin (Kanan Bawah agar tidak menimpa menu) */
body.admin-body .pemutar-musik-wrap {
  bottom: 24px;
  right: 24px;
  left: auto;
  z-index: 9999;
}

@media (max-width: 820px) {
  body.admin-body .pemutar-musik-wrap {
    bottom: calc(74px + env(safe-area-inset-bottom, 0px));
    right: 14px;
    left: auto;
    z-index: 999;
  }
}

/* ==========================================================================
   MODUL KITAB & PUJIAN DIGITAL LENGKAP
   ========================================================================== */

/* Navigasi Tab Segmented */
.tab-kitab-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
  border-bottom: 2px solid var(--garis, #E2E8F0);
  padding-bottom: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tab-kitab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  font-weight: 750;
  font-size: 0.95rem;
  border-radius: 12px;
  border: 1.5px solid transparent;
  background: var(--latar-alt, #F1F5F9);
  color: var(--teks, #334155);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.14, 1, 0.28, 1);
}

.tab-kitab-btn:hover {
  background: rgba(0, 163, 157, 0.12);
  color: #00A39D;
}

.tab-kitab-btn.aktif {
  background: linear-gradient(135deg, #004342 0%, #002B2A 100%);
  color: #FFFFFF;
  border-color: rgba(212, 175, 55, 0.5);
  box-shadow: 0 4px 16px rgba(0, 43, 42, 0.3);
}

[data-tema="gelap"] .tab-kitab-btn {
  background: rgba(0, 36, 35, 0.7);
  color: #CBD5E1;
}

[data-tema="gelap"] .tab-kitab-btn.aktif {
  background: linear-gradient(135deg, #1E40AF 0%, #0F172A 100%);
  border-color: #38BDF8;
  color: #FFFFFF;
  box-shadow: 0 4px 18px rgba(59, 130, 246, 0.35);
}

/* Panel Selektor Alkitab */
.alkitab-selector-box {
  background: #FFFFFF;
  border: 1.5px solid var(--garis, #E2E8F0);
  border-radius: var(--radius, 16px);
  padding: 22px 24px;
  margin-bottom: 22px;
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.05);
}

.alkitab-selector-grid {
  display: grid;
  grid-template-columns: 2fr 1fr auto;
  gap: 14px;
  align-items: flex-end;
}

@media (max-width: 720px) {
  .alkitab-selector-grid {
    grid-template-columns: 1fr;
  }
}

.alkitab-chips-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--garis, #E2E8F0);
}

.alkitab-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(0, 163, 157, 0.08);
  color: var(--tinta, #0F172A);
  border: 1px solid rgba(0, 163, 157, 0.22);
  font-size: 0.78rem;
  font-weight: 650;
  cursor: pointer;
  transition: all 0.18s ease;
}

.alkitab-chip:hover {
  background: #00A39D;
  color: #FFFFFF;
  border-color: #00A39D;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 163, 157, 0.25);
}

[data-tema="gelap"] .alkitab-selector-box {
  background: #111827;
  border-color: rgba(255, 255, 255, 0.08);
}

[data-tema="gelap"] .alkitab-chip {
  background: #1E293B;
  color: #F8FAFC;
  border-color: rgba(255, 255, 255, 0.12);
}

[data-tema="gelap"] .alkitab-chips-bar {
  border-top-color: rgba(255, 255, 255, 0.08);
}

/* Wadah Pembaca Alkitab */
.alkitab-reader-box {
  background: #FFFFFF;
  border: 1.5px solid var(--garis, #E2E8F0);
  border-radius: var(--radius, 16px);
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

.alkitab-reader-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: 18px 24px;
  background: var(--latar-alt, #F8FAFC);
  border-bottom: 1.5px solid var(--garis, #E2E8F0);
}

.alkitab-judul-pasal {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--tinta, #0F172A);
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.alkitab-reader-tools {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-reader-tool {
  padding: 7px 13px;
  border-radius: 8px;
  border: 1px solid var(--garis, #CBD5E1);
  background: #FFFFFF;
  color: var(--tinta, #0F172A);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-reader-tool:hover:not(:disabled) {
  border-color: #00A39D;
  color: #00A39D;
  background: rgba(0, 163, 157, 0.08);
}

.btn-reader-tool:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

[data-tema="gelap"] .alkitab-reader-box {
  background: #111827;
  border-color: rgba(255, 255, 255, 0.08);
}

[data-tema="gelap"] .alkitab-reader-head {
  background: #0F172A;
  border-bottom-color: rgba(255, 255, 255, 0.10);
}

[data-tema="gelap"] .alkitab-judul-pasal {
  color: #F8FAFC;
}

[data-tema="gelap"] .btn-reader-tool {
  background: rgba(30, 41, 59, 0.7);
  border-color: rgba(255, 255, 255, 0.12);
  color: #F8FAFC;
}

/* Isi Teks Ayat Alkitab */
.alkitab-content-area {
  padding: 26px 30px;
  line-height: 1.9;
  color: var(--teks, #334155);
  font-size: 1.05rem;
  transition: font-size 0.15s ease;
}

@media (max-width: 720px) {
  .alkitab-content-area {
    padding: 18px 18px;
    line-height: 1.8;
  }
}

.alkitab-perikop-judul {
  font-size: 1.12rem;
  font-weight: 800;
  color: #00A39D;
  margin: 28px 0 14px;
  padding-bottom: 6px;
  border-bottom: 1.5px solid rgba(0, 163, 157, 0.25);
  letter-spacing: 0.01em;
}

.alkitab-perikop-judul:first-child {
  margin-top: 0;
}

.alkitab-ayat-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
  padding: 4px 6px;
  border-radius: 6px;
  transition: background 0.15s ease;
}

.alkitab-ayat-item:hover {
  background: rgba(0, 163, 157, 0.05);
}

.alkitab-ayat-no {
  font-size: 0.82em;
  font-weight: 800;
  color: #00A39D;
  min-width: 24px;
  text-align: right;
  flex-shrink: 0;
  user-select: none;
}

.alkitab-ayat-teks {
  flex: 1;
}

[data-tema="gelap"] .alkitab-content-area {
  color: #E2E8F0;
}

[data-tema="gelap"] .alkitab-perikop-judul {
  color: #38BDF8;
  border-bottom-color: rgba(56, 189, 248, 0.3);
}

[data-tema="gelap"] .alkitab-ayat-no {
  color: #38BDF8;
}

[data-tema="gelap"] .alkitab-ayat-item:hover {
  background: rgba(59, 130, 246, 0.12);
}

/* Tabel Nyanyian & Pujian Jemaat */
.baris-pujian-item {
  cursor: pointer;
  transition: background 0.15s ease;
}

.baris-pujian-item:hover {
  background: rgba(0, 163, 157, 0.06) !important;
}

[data-tema="gelap"] .baris-pujian-item:hover {
  background: rgba(59, 130, 246, 0.16) !important;
}

.pujian-badge-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(0, 163, 157, 0.12);
  color: #00A39D;
  font-weight: 800;
  font-size: 0.85rem;
}

[data-tema="gelap"] .pujian-badge-no {
  background: rgba(59, 130, 246, 0.28);
  color: #60A5FA;
}

.badge-emas-mini {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 6px;
  background: linear-gradient(135deg, #D4AF37 0%, #AA8010 100%);
  color: #1A1202;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.lirik-pre-wrap {
  white-space: pre-wrap;
  font-family: inherit;
  line-height: 1.8;
  font-size: 0.98rem;
  color: var(--tinta, #0F172A);
  word-break: break-word;
}

[data-tema="gelap"] .lirik-pre-wrap {
  color: #F1F5F9;
  background: rgba(15, 23, 42, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}

/* ==========================================================================
   NOTIFIKASI BUNYI & FLOATING TOAST ULANG TAHUN JEMAAT
   ========================================================================== */

/* Animasi Lonceng Berdering & Gelombang Emas */
.tombol-notif-ultah.ultah-aktif-dering {
  animation: dering-lonceng-ultah 1.8s infinite ease-in-out;
  border-color: #F59E0B !important;
  color: #D97706 !important;
  box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7), 0 4px 18px rgba(245, 158, 11, 0.4) !important;
}

@keyframes dering-lonceng-ultah {
  0% {
    transform: rotate(0) scale(1);
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7), 0 4px 18px rgba(245, 158, 11, 0.4);
  }
  4% { transform: rotate(14deg) scale(1.08); }
  8% { transform: rotate(-14deg) scale(1.08); }
  12% { transform: rotate(10deg); }
  16% { transform: rotate(-10deg); }
  20% { transform: rotate(6deg); }
  24% {
    transform: rotate(0) scale(1);
    box-shadow: 0 0 0 12px rgba(245, 158, 11, 0), 0 4px 18px rgba(245, 158, 11, 0.2);
  }
  100% {
    transform: rotate(0) scale(1);
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
  }
}

[data-tema="gelap"] .tombol-notif-ultah.ultah-aktif-dering {
  border-color: #FBBF24 !important;
  color: #FDE68A !important;
  box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.7), 0 4px 18px rgba(251, 191, 36, 0.45) !important;
}

/* Floating Toast Notifikasi Bunyi Ulang Tahun */
.toast-ultah-notif {
  position: fixed;
  top: 74px;
  right: 20px;
  z-index: 9999;
  max-width: 375px;
  width: calc(100vw - 32px);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1.5px solid rgba(212, 175, 55, 0.55);
  border-radius: 16px;
  box-shadow: 0 12px 32px -4px rgba(0, 43, 42, 0.22), 0 4px 14px rgba(212, 175, 55, 0.3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  gap: 10px;
  cursor: pointer;
  animation: slideToastUltah 0.35s cubic-bezier(0.14, 1, 0.28, 1);
  transition: all 0.28s ease;
}

@keyframes slideToastUltah {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 600px) {
  .toast-ultah-notif {
    top: 68px;
    right: 12px;
    left: 12px;
    width: auto;
    max-width: none;
  }
}

.toast-ultah-notif.sembunyi {
  opacity: 0;
  transform: translateY(-16px) scale(0.95);
  pointer-events: none;
}

.toast-ultah-isi {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.toast-ultah-ikon {
  font-size: 1.85rem;
  line-height: 1;
  flex-shrink: 0;
  animation: denyutKue 1.4s infinite ease-in-out;
}

@keyframes denyutKue {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15) rotate(4deg); }
}

.toast-ultah-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.toast-ultah-judul {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.toast-ultah-judul strong {
  font-size: 0.88rem;
  color: var(--tinta, #0F172A);
  font-weight: 800;
  line-height: 1.25;
}

.toast-ultah-bunyi-badge {
  font-size: 0.68rem;
  font-weight: 750;
  padding: 2px 7px;
  border-radius: 999px;
  background: #FEF3C7;
  color: #B45309;
  border: 1px solid #FCD34D;
  display: inline-flex;
  align-items: center;
  animation: denyutFps 1.5s infinite;
}

.toast-ultah-nama {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 750;
  color: var(--oranye, #00A39D);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toast-ultah-sub {
  font-size: 0.73rem;
  color: var(--muted, #64748B);
  line-height: 1.2;
}

.toast-ultah-tutup {
  background: rgba(0, 0, 0, 0.05);
  border: 0;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--muted, #64748B);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.toast-ultah-tutup:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #EF4444;
}

[data-tema="gelap"] .toast-ultah-notif {
  background: rgba(15, 23, 42, 0.96);
  border-color: rgba(212, 175, 55, 0.45);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

[data-tema="gelap"] .toast-ultah-judul strong {
  color: #F8FAFC;
}

[data-tema="gelap"] .toast-ultah-bunyi-badge {
  background: rgba(245, 158, 11, 0.2);
  color: #FDE68A;
  border-color: rgba(245, 158, 11, 0.4);
}

[data-tema="gelap"] .toast-ultah-nama {
  color: #F5D77F;
}

[data-tema="gelap"] .toast-ultah-sub {
  color: #94A3B8;
}

[data-tema="gelap"] .toast-ultah-tutup {
  background: rgba(255, 255, 255, 0.1);
  color: #E2E8F0;
}

.btn-uji-bunyi-ultah {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.45);
  color: #B45309;
  font-size: 0.76rem;
  font-weight: 750;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}

.btn-uji-bunyi-ultah:hover {
  background: #F59E0B;
  color: #FFFFFF;
}

[data-tema="gelap"] .btn-uji-bunyi-ultah {
  background: rgba(251, 191, 36, 0.2);
  border-color: rgba(251, 191, 36, 0.45);
  color: #FDE68A;
}

[data-tema="gelap"] .btn-uji-bunyi-ultah:hover {
  background: #F59E0B;
  color: #1A1202;
}

/* ==========================================================================
   HALAMAN KITAB & PUJIAN — Modern, Compact, Universal
   ========================================================================== */

/* Tab Switcher Bar */
.tab-kitab-bar {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  background: var(--latar-dasar);
  border: 1px solid var(--garis);
  border-radius: 14px;
  padding: 4px;
}

.tab-kitab-btn {
  flex: 1;
  padding: 9px 12px;
  border-radius: 11px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
}

.tab-kitab-btn.aktif {
  background: var(--bni-teal-gradasi);
  color: #fff;
  box-shadow: 0 3px 10px -2px rgba(0, 94, 93, 0.35);
}

.tab-kitab-btn:not(.aktif):hover {
  background: var(--hijau-lembut);
  color: var(--bni-teal);
}

[data-tema="gelap"] .tab-kitab-bar {
  background: rgba(255,255,255,0.04);
  border-color: var(--garis);
}

[data-tema="gelap"] .tab-kitab-btn:not(.aktif):hover {
  background: rgba(59,130,246,0.12);
  color: #38BDF8;
}

.panel-tab-konten {
  animation: tabFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

@keyframes tabFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Alkitab Selector Box */
.alkitab-selector-box {
  background: var(--putih);
  border: 1px solid var(--garis);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: var(--bayang-kecil);
}

.alkitab-selector-grid {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 12px;
  align-items: end;
}

@media (max-width: 520px) {
  .alkitab-selector-grid {
    grid-template-columns: 1fr;
  }
}

/* Chips Pintasan Ayat */
.alkitab-chips-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--garis-halus);
}

.alkitab-chip {
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid var(--garis);
  background: var(--latar-dasar);
  color: var(--teks);
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  line-height: 1.5;
}

.alkitab-chip:hover {
  background: var(--bni-teal);
  color: #fff;
  border-color: var(--bni-teal);
}

[data-tema="gelap"] .alkitab-chip {
  background: rgba(255,255,255,0.05);
  border-color: var(--garis);
  color: var(--tinta);
}

[data-tema="gelap"] .alkitab-chip:hover {
  background: var(--bni-teal);
  color: #fff;
}

/* Alkitab Reader */
.alkitab-reader-box {
  background: var(--putih);
  border: 1px solid var(--garis);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--bayang-kecil);
}

.alkitab-reader-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--garis-halus);
  background: var(--latar-dasar);
}

.alkitab-judul-pasal {
  font-size: 1.0rem;
  font-weight: 800;
  color: var(--tinta);
  margin: 0;
  line-height: 1.25;
}

.alkitab-reader-tools {
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-reader-tool {
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid var(--garis);
  background: var(--putih);
  color: var(--teks);
  font-size: 0.74rem;
  font-weight: 650;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  line-height: 1.4;
}

.btn-reader-tool:hover:not(:disabled) {
  background: var(--bni-teal);
  color: #fff;
  border-color: var(--bni-teal);
}

.btn-reader-tool:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

[data-tema="gelap"] .btn-reader-tool {
  background: rgba(255,255,255,0.06);
  border-color: var(--garis);
  color: var(--tinta);
}

[data-tema="gelap"] .btn-reader-tool:hover:not(:disabled) {
  background: var(--bni-teal);
  color: #fff;
}

/* Area Isi Alkitab */
.alkitab-content-area {
  padding: 18px 20px 24px;
  min-height: 200px;
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--teks);
}

/* Judul Perikop */
.alkitab-perikop-judul {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bni-teal);
  margin: 18px 0 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--garis-halus);
}

/* Baris Ayat */
.alkitab-ayat-item {
  display: flex;
  gap: 10px;
  margin-bottom: 6px;
  line-height: 1.72;
}

.alkitab-ayat-no {
  flex-shrink: 0;
  min-width: 22px;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--bni-orange);
  margin-top: 3px;
  line-height: 1.4;
}

.alkitab-ayat-teks {
  font-size: 0.9rem;
  color: var(--teks);
  line-height: 1.75;
}

[data-tema="gelap"] .alkitab-reader-box,
[data-tema="gelap"] .alkitab-selector-box {
  background: var(--putih);
  border-color: var(--garis);
}

[data-tema="gelap"] .alkitab-reader-head {
  background: var(--krem);
}

[data-tema="gelap"] .alkitab-content-area {
  color: var(--tinta);
}

/* Badge Emas Mini (Perjanjian Lama/Baru) */
.badge-emas-mini,
.badge.badge-emas-mini {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--emas-gradasi);
  color: #fff;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.5;
}

/* Kategori Grup Pujian */
.pujian-kategori-grup {
  margin-bottom: 20px;
}

.pujian-kategori-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--latar-dasar);
  border: 1px solid var(--garis);
  border-radius: 12px 12px 0 0;
  border-bottom: none;
}

.pujian-kategori-judul {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--tinta);
  margin: 0;
}

.pujian-kategori-jml {
  font-size: 0.68rem;
  font-weight: 700;
  color: #fff;
  background: var(--bni-teal);
  padding: 2px 10px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

/* Daftar Pujian Card List */
.pujian-list {
  border: 1px solid var(--garis);
  border-radius: 0 0 12px 12px;
  overflow: hidden;
  background: var(--putih);
}

.pujian-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--garis-halus);
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.12s;
}

.pujian-item:last-child {
  border-bottom: none;
}

.pujian-item:active {
  background: var(--hijau-lembut);
}

/* Nomor Badge */
.pujian-no {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--hijau-lembut);
  color: var(--bni-teal);
  font-size: 0.78rem;
  font-weight: 800;
}

/* Info (Judul + Preview Lirik) */
.pujian-info {
  flex: 1;
  min-width: 0;
}

.pujian-judul {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--tinta);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pujian-lirik-preview {
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.45;
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pujian-lirik-preview.kosong-italic {
  font-style: italic;
  color: #94a3b8;
}

/* Arrow Indicator */
.pujian-arrow {
  flex-shrink: 0;
  font-size: 1.2rem;
  font-weight: 300;
  color: var(--muted-terang);
  line-height: 1;
}

/* Dark Mode */
[data-tema="gelap"] .pujian-kategori-head {
  background: var(--krem);
  border-color: var(--garis);
}

[data-tema="gelap"] .pujian-list {
  background: var(--putih);
  border-color: var(--garis);
}

[data-tema="gelap"] .pujian-item:active {
  background: rgba(59,130,246,0.1);
}

[data-tema="gelap"] .pujian-no {
  background: rgba(59,130,246,0.18);
  color: #38BDF8;
}

[data-tema="gelap"] .pujian-judul {
  color: var(--tinta);
}

/* ==========================================================================
   JADWAL BERTUGAS MULTIMEDIA (OTOMATIS SETIAP HARI MINGGU)
   ========================================================================== */

.multimedia-intro-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--krem, #F8FAFC);
  border: 1px solid var(--garis, #E2E8F0);
  border-radius: 16px;
  padding: 16px 20px;
  margin-bottom: 24px;
}

[data-tema="gelap"] .multimedia-intro-banner {
  background: rgba(30, 41, 59, 0.45);
  border-color: rgba(255, 255, 255, 0.10);
}

.multimedia-intro-kiri {
  display: flex;
  align-items: center;
  gap: 12px;
}

.multimedia-intro-ikon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(0, 163, 157, 0.12);
  color: var(--bni-teal, #00A39D);
  font-size: 1.25rem;
  flex-shrink: 0;
}

[data-tema="gelap"] .multimedia-intro-ikon {
  background: rgba(59, 130, 246, 0.22);
  color: #38BDF8;
}

.multimedia-intro-teks strong {
  display: block;
  font-size: 0.95rem;
  color: var(--tinta, #0F172A);
  font-weight: 700;
}

.multimedia-intro-teks p {
  font-size: 0.82rem;
  color: var(--muted, #64748B);
  margin: 2px 0 0;
}

.multimedia-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 10px;
}

@media (max-width: 1024px) {
  .multimedia-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
}

@media (max-width: 680px) {
  .multimedia-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.kartu-tugas-multimedia {
  position: relative;
  background: var(--putih, #ffffff);
  border: 1.5px solid var(--garis, #E2E8F0);
  border-radius: 20px;
  padding: 22px 24px;
  overflow: hidden;
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  display: flex;
  flex-direction: column;
}

.kartu-tugas-multimedia:hover {
  transform: translateY(-2px);
  border: 2px solid #3B82F6 !important;
  box-shadow: 0 0 0 1px #3B82F6, 0 8px 24px -4px rgba(59, 130, 246, 0.22);
}

[data-tema="gelap"] .kartu-tugas-multimedia {
  background: var(--putih);
  border-color: rgba(94, 234, 212, 0.18);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

[data-tema="gelap"] .kartu-tugas-multimedia:hover {
  border-color: #38BDF8 !important;
  box-shadow: 0 0 0 1px #38BDF8, 0 8px 28px rgba(56, 189, 248, 0.28);
}

/* Watermark GKI Multimedia di Sudut Kanan Bawah */
.kartu-tugas-watermark {
  position: absolute;
  right: 14px;
  bottom: 12px;
  width: 110px;
  height: 110px;
  opacity: 0.075;
  color: var(--tinta, #0F172A);
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.2s ease;
}

[data-tema="gelap"] .kartu-tugas-watermark {
  opacity: 0.13;
  color: #5EEAD4;
}

.kartu-tugas-header {
  position: relative;
  z-index: 1;
  margin-bottom: 16px;
}

.kartu-tugas-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.kartu-tugas-label {
  font-size: 0.76rem;
  font-weight: 800;
  color: #2563EB;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

[data-tema="gelap"] .kartu-tugas-label {
  color: #60A5FA;
}

.kartu-tugas-badge {
  display: inline-flex;
  align-items: center;
  background: #DCFCE7;
  color: #16A34A;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 9999px;
  line-height: 1.4;
}

[data-tema="gelap"] .kartu-tugas-badge {
  background: rgba(22, 163, 74, 0.22);
  color: #4ADE80;
  border: 1px solid rgba(74, 222, 128, 0.3);
}

.kartu-tugas-tanggal {
  font-size: 1.16rem;
  font-weight: 800;
  color: var(--tinta, #0F172A);
  margin: 0;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.kartu-tugas-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kartu-tugas-baris {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tugas-peran {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 500;
  color: #64748B;
  flex-shrink: 0;
}

[data-tema="gelap"] .tugas-peran {
  color: #94A3B8;
}

.tugas-peran-ikon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.tugas-nama-utama {
  font-size: 0.96rem;
  font-weight: 800;
  color: var(--tinta, #0F172A);
  text-align: right;
  letter-spacing: -0.01em;
}

.kartu-tugas-teknis-wrap {
  margin-top: 4px;
  padding-top: 4px;
}

.teknis-daftar-teks {
  font-size: 0.83rem;
  line-height: 1.55;
  color: var(--tinta, #334155);
  font-weight: 500;
  margin-top: 5px;
  word-break: break-word;
}

[data-tema="gelap"] .teknis-daftar-teks {
  color: #CBD5E1;
}

/* Roster Info Box di Bagian Bawah */
.roster-info-card {
  background: var(--krem, #F8FAFC);
  border: 1px solid var(--garis, #E2E8F0);
  border-radius: 18px;
  padding: 24px;
  margin-top: 36px;
}

[data-tema="gelap"] .roster-info-card {
  background: rgba(30, 41, 59, 0.45);
  border-color: rgba(255, 255, 255, 0.10);
}

.roster-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 14px;
}

@media (max-width: 900px) {
  .roster-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 500px) {
  .roster-grid {
    grid-template-columns: 1fr;
  }
}

.roster-bidang-item {
  background: var(--putih);
  border: 1px solid var(--garis);
  border-radius: 14px;
  padding: 14px 16px;
}

[data-tema="gelap"] .roster-bidang-item {
  background: var(--putih);
  border-color: rgba(94, 234, 212, 0.15);
}

.roster-bidang-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--bni-teal);
  margin-bottom: 8px;
}

[data-tema="gelap"] .roster-bidang-head {
  color: #38BDF8;
}

.roster-anggota-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.roster-pill {
  display: inline-block;
  padding: 3px 9px;
  background: rgba(0, 163, 157, 0.08);
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--tinta);
}

[data-tema="gelap"] .roster-pill {
  background: rgba(255, 255, 255, 0.08);
  color: #E2E8F0;
}


/* ==========================================================================
   Pemanis Animasi Ringan & Segar (GPU Hardware-Accelerated 60fps Micro-Animations)
   Desain: Cepat, Halus, Responsif, Tanpa Membebani Kinerja Perangkat / Hosting
   ========================================================================== */

@keyframes aobMunculHalus {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes aobKilauHalus {
  0%, 100% {
    filter: brightness(1) drop-shadow(0 0 0 rgba(212, 175, 55, 0));
  }
  50% {
    filter: brightness(1.06) drop-shadow(0 2px 8px rgba(212, 175, 55, 0.28));
  }
}

@keyframes aobDenyutLive {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

/* Transisi Halus Elemen Kartu & Interaktif */
.kartu,
.kartu-ibadah,
.kartu-warta,
.kartu-renungan,
.berita-kartu,
.kartu-grid > *,
.roster-bidang-item,
.pengurus-kartu,
.warga-item,
.stat-kotak,
.admin-card {
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.24s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease;
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .kartu:hover,
  .kartu-ibadah:hover,
  .kartu-warta:hover,
  .kartu-renungan:hover,
  .berita-kartu:hover,
  .roster-bidang-item:hover,
  .pengurus-kartu:hover,
  .stat-kotak:hover,
  .admin-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px -6px rgba(0, 43, 42, 0.12), 0 4px 8px -2px rgba(0, 43, 42, 0.06);
  }
}

/* Sentuhan Taktil Tombol & Link Kartu */
.tombol,
.btn,
.tombol-primer,
.tombol-sekunder,
.nav-link,
.tombol-aksi {
  transition: transform 0.16s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease, box-shadow 0.2s ease;
}

.tombol:active,
.btn:active,
.tombol-primer:active,
.tombol-sekunder:active,
.tombol-aksi:active {
  transform: scale(0.975);
}

/* Animasi Muncul Halus Seksi & Konten */
.hero,
.seksi,
.konten-utama,
.wadah > .seksi-judul,
.grid-warta,
.ibadah-grid {
  animation: aobMunculHalus 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Indikator Siaran / Live Pulse */
.pill-live,
.badge-live,
.status-live-dot {
  animation: aobDenyutLive 2s infinite ease-in-out;
}

/* Badge Kilau Emas Lembut */
.badge-emas,
.aksen-emas,
.hero-tag {
  animation: aobKilauHalus 4s ease-in-out infinite;
}

/* Hormati Preferensi Pengguna yang Mengurangi Gerakan (Kecuali Teks Berjalan Pengumuman) */
@media (prefers-reduced-motion: reduce) {
  *:not(.running-text-content):not(.running-dot-pulse),
  *:not(.running-text-content):not(.running-dot-pulse)::before,
  *:not(.running-text-content):not(.running-dot-pulse)::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   Akselerasi Grafis 90FPS Smooth & Responsif Tinggi Seluruh Halaman
   Mengoptimalkan Compositor GPU, Menghilangkan Frame Drop & Mengunci 90FPS
   ========================================================================== */
html {
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: touch !important;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Optimasi Rendering Offscreen - Menghindari Beban CPU Saat Scroll */
.seksi:not(:first-of-type),
.kartu-grid {
  content-visibility: auto;
  contain-intrinsic-size: 0 350px;
}

/* Promosi Lapisan GPU Hardware untuk Elemen Pokok */
.kartu,
.header-puncak-terkunci,
.topbar,
.running-text-wrap,
.hero,
.nav-bawah {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* ==========================================================================
   TIPOGRAFI UNIVERSAL MODERN (PLUS JAKARTA SANS & INTER)
   ========================================================================== */
html, body, button, input, select, textarea, optgroup {
  font-family: 'Plus Jakarta Sans', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  letter-spacing: -0.012em;
}

h1, h2, h3, h4, h5, h6,
.judul, .stat-nilai, .merek-teks, .nav-head-judul, .admin-top h1, .page-head h1 {
  font-family: 'Plus Jakarta Sans', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  letter-spacing: -0.025em;
  font-weight: 750;
}

/* ==========================================================================
   MODE TERANG WARNA-WARNI ESTETIK (TANPA WARNA PUTIH MONOTON)
   ========================================================================== */
html:not([data-tema="gelap"]) body {
  background: 
    radial-gradient(circle at 5% 10%, rgba(219, 234, 254, 0.75) 0%, transparent 45%),
    radial-gradient(circle at 95% 15%, rgba(254, 240, 138, 0.55) 0%, transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(243, 232, 255, 0.70) 0%, transparent 50%),
    radial-gradient(circle at 15% 90%, rgba(254, 205, 211, 0.55) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(224, 231, 255, 0.45) 0%, transparent 55%),
    #EEF2F6 !important;
  background-attachment: fixed !important;
}

html:not([data-tema="gelap"]) .admin-isi {
  background: 
    radial-gradient(circle at 8% 12%, rgba(224, 242, 254, 0.75) 0%, transparent 40%),
    radial-gradient(circle at 92% 18%, rgba(254, 243, 199, 0.65) 0%, transparent 40%),
    radial-gradient(circle at 85% 82%, rgba(245, 243, 255, 0.75) 0%, transparent 45%),
    radial-gradient(circle at 18% 88%, rgba(254, 226, 226, 0.60) 0%, transparent 40%),
    #EBF1F6 !important;
  background-attachment: fixed !important;
}

/* Kartu & Panel di Mode Terang Bernuansa Kaca Lembut & Berwarna Translusen */
html:not([data-tema="gelap"]) .panel,
html:not([data-tema="gelap"]) .kartu,
html:not([data-tema="gelap"]) .kotak,
html:not([data-tema="gelap"]) .tabel-bungkus {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.88) 0%, rgba(246, 248, 254, 0.94) 100%) !important;
  border: 1px solid rgba(219, 234, 254, 0.85) !important;
  box-shadow: 0 4px 20px -2px rgba(99, 102, 241, 0.07), 0 2px 6px -1px rgba(0, 0, 0, 0.03) !important;
}

/* Variasi Warna-Warni Kartu Statistik Mode Terang */
html:not([data-tema="gelap"]) .stat:nth-child(4n+1) {
  background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%) !important;
  border-color: #BAE6FD !important;
  box-shadow: 0 4px 16px rgba(56, 189, 248, 0.15) !important;
}
html:not([data-tema="gelap"]) .stat:nth-child(4n+2) {
  background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%) !important;
  border-color: #FED7AA !important;
  box-shadow: 0 4px 16px rgba(249, 115, 22, 0.15) !important;
}
html:not([data-tema="gelap"]) .stat:nth-child(4n+3) {
  background: linear-gradient(135deg, #FAF5FF 0%, #F3E8FF 100%) !important;
  border-color: #DDD6FE !important;
  box-shadow: 0 4px 16px rgba(168, 85, 247, 0.15) !important;
}
html:not([data-tema="gelap"]) .stat:nth-child(4n+4) {
  background: linear-gradient(135deg, #FFF1F2 0%, #FFE4E6 100%) !important;
  border-color: #FECDD3 !important;
  box-shadow: 0 4px 16px rgba(244, 63, 94, 0.15) !important;
}

/* Input & Dropzone di Mode Terang — Lembut Tidak Silau */
html:not([data-tema="gelap"]) .dropzone {
  background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%) !important;
  border-color: #CBD5E1 !important;
}

html:not([data-tema="gelap"]) input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
html:not([data-tema="gelap"]) select,
html:not([data-tema="gelap"]) textarea {
  background-color: #F8FAFC !important;
  border-color: #CBD5E1 !important;
}

html:not([data-tema="gelap"]) input:focus,
html:not([data-tema="gelap"]) select:focus,
html:not([data-tema="gelap"]) textarea:focus {
  background-color: #FFFFFF !important;
  border-color: var(--bni-orange) !important;
  box-shadow: 0 0 0 3px rgba(243, 112, 33, 0.20) !important;
}

/* ==========================================================================
   MODE GELAP OBSIDIAN & MIDNIGHT SLATE (BEBAS TOTAL DARI WARNA HIJAU)
   ========================================================================== */
[data-tema="gelap"] .admin-sisi {
  background: linear-gradient(180deg, #0B0F19 0%, #0F172A 55%, #111827 100%) !important;
  border-right-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.6) !important;
}
[data-tema="gelap"] .sisi-merek {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
[data-tema="gelap"] .sisi-merek small {
  color: #38BDF8 !important;
}
[data-tema="gelap"] .sisi-nav a {
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
}
[data-tema="gelap"] .sisi-nav a:hover {
  background: rgba(59, 130, 246, 0.20) !important;
  border-color: #3B82F6 !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3) !important;
}
[data-tema="gelap"] .sisi-nav a.aktif {
  background: linear-gradient(135deg, rgba(243, 112, 33, 0.25) 0%, rgba(255, 133, 51, 0.15) 100%) !important;
  color: #FFA566 !important;
  border-color: #F37021 !important;
}

[data-tema="gelap"] .page-head {
  background: 
    radial-gradient(ellipse at 88% 25%, rgba(243, 112, 33, 0.18) 0%, transparent 60%),
    radial-gradient(circle at 12% 85%, rgba(59, 130, 246, 0.22) 0%, transparent 50%),
    linear-gradient(135deg, #0F172A 0%, #111827 50%, #1E293B 100%) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  box-shadow: 0 18px 40px -8px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

[data-tema="gelap"] .hero-mockup-card {
  background: 
    radial-gradient(circle at 80% 20%, rgba(243, 112, 33, 0.16) 0%, transparent 60%),
    radial-gradient(circle at 10% 80%, rgba(59, 130, 246, 0.20) 0%, transparent 50%),
    linear-gradient(135deg, #0F172A 0%, #111827 50%, #1E293B 100%) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 16px 36px -6px rgba(0, 0, 0, 0.70) !important;
}

[data-tema="gelap"] .hero-mockup-avatar {
  background: #0F172A !important;
  box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.60) !important;
}

[data-tema="gelap"] .hero-live-dot {
  background: #38BDF8 !important;
  box-shadow: 0 0 8px #38BDF8 !important;
}

[data-tema="gelap"] .slide-fallback-bg {
  background: linear-gradient(135deg, #0F172A 0%, #111827 50%, #1E293B 100%) !important;
}

/* ==========================================================================
   IKON 3D EMBOSS GLASS (WARNA-WARNI, MODEREN & ELEGAN) UNIVERSAL
   ========================================================================== */
.aksi-ikon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  text-decoration: none !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), filter 0.2s ease !important;
  backdrop-filter: blur(8px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(160%) !important;
  border-top: 1.2px solid rgba(255, 255, 255, 0.85) !important;
  border-left: 1.2px solid rgba(255, 255, 255, 0.55) !important;
  border-right: 1px solid rgba(0, 0, 0, 0.2) !important;
  border-bottom: 1.2px solid rgba(0, 0, 0, 0.35) !important;
  background: linear-gradient(145deg, #3B82F6 0%, #1D4ED8 100%) !important;
  color: #FFFFFF !important;
  box-shadow: inset 0 1.5px 1.5px rgba(255, 255, 255, 0.85), inset 0 -1.5px 2px rgba(0, 0, 0, 0.35), 0 3px 8px rgba(59, 130, 246, 0.35) !important;
}

.aksi-ikon::before {
  content: "" !important;
  position: absolute !important;
  top: 1px !important;
  left: 1.5px !important;
  right: 1.5px !important;
  height: 42% !important;
  border-radius: 7px 7px 3px 3px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.70) 0%, rgba(255, 255, 255, 0.15) 80%, transparent 100%) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.aksi-ikon::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 35% !important;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.28) 0%, transparent 100%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.aksi-ikon .ikon,
.aksi-ikon svg {
  width: 15px !important;
  height: 15px !important;
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
  stroke-width: 2.2 !important;
  fill: none !important;
  position: relative !important;
  z-index: 3 !important;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.6)) !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.aksi-ikon:hover {
  transform: translateY(-2px) scale(1.08) !important;
  filter: brightness(1.15) !important;
  box-shadow: inset 0 1.5px 1.5px rgba(255, 255, 255, 0.9), inset 0 -1.5px 2px rgba(0, 0, 0, 0.4), 0 6px 14px rgba(59, 130, 246, 0.45) !important;
  color: #FFFFFF !important;
}

.aksi-ikon:active {
  transform: scale(0.94) !important;
}

/* Tombol Aksi Hapus: Vivid Crimson Rose */
.aksi-ikon.hapus,
.aksi-ikon[title*="Hapus"],
.aksi-ikon[title*="hapus"],
.aksi-ikon[title*="Delete"],
.aksi-ikon[data-aksi="hapus"] {
  background: linear-gradient(145deg, #EF4444 0%, #B91C1C 100%) !important;
  box-shadow: inset 0 1.5px 1.5px rgba(255, 255, 255, 0.85), inset 0 -1.5px 2px rgba(0, 0, 0, 0.35), 0 3px 8px rgba(239, 68, 68, 0.35) !important;
}

/* Tombol Aksi Detail / Lihat: Royal Amethyst */
.aksi-ikon.lihat,
.aksi-ikon[title*="Lihat"],
.aksi-ikon[title*="Detail"] {
  background: linear-gradient(145deg, #8B5CF6 0%, #6D28D9 100%) !important;
  box-shadow: inset 0 1.5px 1.5px rgba(255, 255, 255, 0.85), inset 0 -1.5px 2px rgba(0, 0, 0, 0.35), 0 3px 8px rgba(139, 92, 246, 0.35) !important;
}

/* Tombol Aksi Cetak / PDF: Imperial Amber Gold */
.aksi-ikon.cetak,
.aksi-ikon[title*="Cetak"],
.aksi-ikon[title*="Print"],
.aksi-ikon[title*="PDF"] {
  background: linear-gradient(145deg, #F59E0B 0%, #B45309 100%) !important;
  box-shadow: inset 0 1.5px 1.5px rgba(255, 255, 255, 0.85), inset 0 -1.5px 2px rgba(0, 0, 0, 0.35), 0 3px 8px rgba(245, 158, 11, 0.35) !important;
}

/* Tombol Aksi Unduh: Ocean Azure */
.aksi-ikon.unduh,
.aksi-ikon[title*="Unduh"],
.aksi-ikon[title*="Download"] {
  background: linear-gradient(145deg, #0EA5E9 0%, #0284C7 100%) !important;
  box-shadow: inset 0 1.5px 1.5px rgba(255, 255, 255, 0.85), inset 0 -1.5px 2px rgba(0, 0, 0, 0.35), 0 3px 8px rgba(14, 165, 233, 0.35) !important;
}

/* Ikon 3D Emboss Glass pada Nav Bawah Publik */
.nav-bawah a .ikon,
.nav-bawah button .ikon {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  border-radius: 8px !important;
  padding: 3px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  stroke-width: 2 !important;
  box-sizing: border-box !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.85) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.55) !important;
  border-right: 0.8px solid rgba(0, 0, 0, 0.18) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3) !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.8), inset 0 -1px 1.5px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.12) !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease, filter 0.22s ease !important;
}

.nav-bawah a:nth-child(1) .ikon { background: linear-gradient(145deg, #3B82F6 0%, #1D4ED8 100%) !important; color: #FFF !important; stroke: #FFF !important; }
.nav-bawah a:nth-child(2) .ikon { background: linear-gradient(145deg, #0EA5E9 0%, #0284C7 100%) !important; color: #FFF !important; stroke: #FFF !important; }
.nav-bawah a:nth-child(3) .ikon { background: linear-gradient(145deg, #F43F5E 0%, #BE123C 100%) !important; color: #FFF !important; stroke: #FFF !important; }
.nav-bawah a:nth-child(4) .ikon { background: linear-gradient(145deg, #F97316 0%, #C2410C 100%) !important; color: #FFF !important; stroke: #FFF !important; }
.nav-bawah a:nth-child(5) .ikon,
.nav-bawah button:nth-child(5) .ikon,
.nav-bawah button[data-menu-toggle] .ikon { background: linear-gradient(145deg, #8B5CF6 0%, #6D28D9 100%) !important; color: #FFF !important; stroke: #FFF !important; }

.nav-bawah a:hover .ikon, .nav-bawah button:hover .ikon {
  transform: translateY(-2px) scale(1.12) !important;
  filter: brightness(1.15) !important;
}

.nav-bawah a.aktif .ikon, .nav-bawah button.aktif .ikon {
  transform: scale(1.15) !important;
  box-shadow: inset 0 1.5px 2px rgba(255, 255, 255, 0.95), 0 4px 12px rgba(243, 112, 33, 0.45) !important;
}

/* ==========================================================================
   MODERNISASI APLIKASI WEB 2026 (SPA TRANSITION, SPOTLIGHT, PULL-REFRESH, MINI PLAYER)
   ========================================================================== */

/* 1. Bilah Kemajuan Transisi SPA (Loading Bar) */
.transisi-loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #D4AF37 0%, #00A39D 50%, #38BDF8 100%);
  z-index: 100000;
  opacity: 0;
  pointer-events: none;
  transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
  box-shadow: 0 0 10px rgba(0, 163, 157, 0.75);
}
.transisi-loading-bar.aktif {
  opacity: 1;
}

/* View Transitions API (Modern Smooth Fade & Slide) */
@view-transition {
  navigation: auto;
}
::view-transition-old(root) {
  animation: 100ms cubic-bezier(0.4, 0, 1, 1) both vtFadeOut;
}
::view-transition-new(root) {
  animation: 200ms cubic-bezier(0, 0, 0.2, 1) both vtFadeIn;
}
@keyframes vtFadeOut {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.995); }
}
@keyframes vtFadeIn {
  from { opacity: 0; transform: scale(1.005); }
  to { opacity: 1; transform: scale(1); }
}

/* 2. Pull-to-Refresh Indicator */
.pull-refresh-box {
  position: fixed;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99990;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 8px 18px;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(0, 163, 157, 0.3);
  font-size: 0.82rem;
  font-weight: 700;
  color: #003837;
  pointer-events: none;
  transition: top 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
  opacity: 0;
}
.pull-refresh-box.menarik {
  opacity: 1;
}
.pull-refresh-spin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #00A39D;
  transition: transform 0.2s ease;
}
.pull-refresh-box.memuat .pull-refresh-spin {
  animation: spin 0.75s linear infinite;
}

/* 3. Skeleton Shimmer Loading */
.skeleton-box, .shimmer {
  background: linear-gradient(90deg, rgba(226, 232, 240, 0.6) 0%, rgba(241, 245, 249, 0.9) 50%, rgba(226, 232, 240, 0.6) 100%);
  background-size: 200% 100%;
  animation: shimmerAnim 1.6s infinite ease-in-out;
  border-radius: 8px;
}
@keyframes shimmerAnim {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* 4. Spotlight Search Global (Ctrl+K) */
.tombol-spotlight-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 56, 55, 0.06);
  border: 1px solid rgba(0, 56, 55, 0.15);
  border-radius: 999px;
  padding: 6px 12px;
  color: var(--tinta, #0F172A);
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.tombol-spotlight-btn:hover {
  background: rgba(0, 163, 157, 0.12);
  border-color: #00A39D;
  color: #00A39D;
}
.spotlight-badge-kbd {
  display: inline-flex;
  gap: 3px;
}
.spotlight-badge-kbd kbd,
.spotlight-foot kbd {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #CBD5E1;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 1px 5px;
  color: #475569;
}
@media (max-width: 640px) {
  .spotlight-badge-kbd { display: none; }
  .tombol-spotlight-btn { padding: 6px 9px; }
}

.spotlight-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: max(40px, 8vh);
  animation: spotlightFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.spotlight-modal[hidden] {
  display: none !important;
}
.spotlight-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 23, 40, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.spotlight-dialog {
  position: relative;
  z-index: 2;
  width: min(640px, calc(100vw - 28px));
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border-radius: 20px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
  border: 1.5px solid rgba(212, 175, 55, 0.35);
  overflow: hidden;
}
.spotlight-head {
  display: flex;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid #E2E8F0;
  gap: 12px;
}
.spotlight-head-icon {
  color: #00A39D;
  flex-shrink: 0;
}
.spotlight-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 1.05rem;
  font-family: inherit;
  background: transparent;
  color: #0F172A;
}
.spotlight-input::placeholder {
  color: #94A3B8;
}
.spotlight-btn-tutup {
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  color: #94A3B8;
  cursor: pointer;
  padding: 0 4px;
}
.spotlight-btn-tutup:hover {
  color: #0F172A;
}
.spotlight-isi {
  flex: 1;
  overflow-y: auto;
  padding: 10px 14px;
  max-height: 52vh;
}
.spotlight-grup-judul {
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748B;
  padding: 8px 10px 4px;
}
.spotlight-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  color: #1E293B;
  cursor: pointer;
  transition: all 0.15s ease;
}
.spotlight-item:hover, .spotlight-item.terpilih {
  background: #F1F5F9;
  color: #00A39D;
}
.spotlight-item-ikon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(0, 163, 157, 0.1);
  color: #00A39D;
  flex-shrink: 0;
}
.spotlight-item-teks strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
}
.spotlight-item-teks small {
  color: #64748B;
  font-size: 0.78rem;
}
.spotlight-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding: 10px 18px;
  background: #F8FAFC;
  border-top: 1px solid #E2E8F0;
  font-size: 0.75rem;
  color: #64748B;
}

@keyframes spotlightFadeIn {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 5. Mini Audio Player Capsule Modern */
.mini-player-capsule {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(212, 175, 55, 0.32);
  box-shadow: 0 6px 20px rgba(11, 23, 40, 0.16);
  border-radius: 999px;
  padding: 3px 9px 3px 3px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.mini-player-capsule .tombol-musik-bgm {
  padding: 2.5px 7px 2.5px 3px;
  gap: 5px;
  border: 1px solid rgba(0, 94, 93, 0.18);
  box-shadow: none;
  background: rgba(240, 248, 248, 0.92);
}
.mini-player-capsule .piringan-musik {
  width: 22px;
  height: 22px;
}
.mini-player-capsule .ikon-nada {
  width: 12px;
  height: 12px;
}
.mini-player-capsule .animasi-gelombang {
  height: 10px;
  width: 10px;
  gap: 2px;
  padding-bottom: 0;
}
.mini-player-capsule .batang-gelombang {
  width: 2px;
  height: 2.5px;
}
.mini-player-info {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 68px;
  max-width: 115px;
}
.mini-player-judul {
  font-size: 0.72rem;
  font-weight: 750;
  color: var(--tinta, #0F172A);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mini-player-sub {
  font-size: 0.62rem;
  color: #00A39D;
  font-weight: 650;
}
.mini-player-tool {
  background: none;
  border: none;
  color: #64748B;
  cursor: pointer;
  padding: 3px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mini-player-tool svg {
  width: 13px;
  height: 13px;
}
.mini-player-tool:hover {
  color: #00A39D;
}

/* 6. Mode Pembaca Fleksibel (Reader Mode Toolbar) */
.reader-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--latar-kartu, #FFFFFF);
  border: 1px solid var(--garis, #E2E8F0);
  border-radius: 999px;
  padding: 4px 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.reader-btn {
  background: none;
  border: none;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--tinta, #0F172A);
  cursor: pointer;
  transition: background 0.15s ease;
}
.reader-btn:hover {
  background: rgba(0, 163, 157, 0.12);
  color: #00A39D;
}

/* Tema Gelap untuk Komponen Modern */
[data-tema="gelap"] .pull-refresh-box {
  background: rgba(15, 23, 42, 0.94);
  color: #F8FAFC;
  border-color: rgba(56, 189, 248, 0.3);
}
[data-tema="gelap"] .skeleton-box,
[data-tema="gelap"] .shimmer {
  background: linear-gradient(90deg, rgba(30, 41, 59, 0.7) 0%, rgba(51, 65, 85, 0.9) 50%, rgba(30, 41, 59, 0.7) 100%);
  background-size: 200% 100%;
}
[data-tema="gelap"] .tombol-spotlight-btn {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: #F8FAFC;
}
[data-tema="gelap"] .spotlight-dialog {
  background: #0F172A;
  border-color: rgba(212, 175, 55, 0.35);
}
[data-tema="gelap"] .spotlight-head {
  border-bottom-color: #1E293B;
}
[data-tema="gelap"] .spotlight-input {
  color: #F8FAFC;
}
[data-tema="gelap"] .spotlight-item {
  color: #E2E8F0;
}
[data-tema="gelap"] .spotlight-item:hover,
[data-tema="gelap"] .spotlight-item.terpilih {
  background: #1E293B;
  color: #38BDF8;
}
[data-tema="gelap"] .spotlight-foot {
  background: #0B132B;
  border-top-color: #1E293B;
  color: #94A3B8;
}
[data-tema="gelap"] .mini-player-capsule {
  background: rgba(15, 23, 42, 0.94);
  border-color: rgba(212, 175, 55, 0.35);
}
[data-tema="gelap"] .mini-player-judul {
  color: #F8FAFC;
}
[data-tema="gelap"] .mini-player-capsule .tombol-musik-bgm {
  background: rgba(30, 41, 59, 0.85);
  border-color: rgba(59, 130, 246, 0.25);
}

/* 7. Interactive Bottom Sheet (Mobile View) */
@media (max-width: 640px) {
  .modal-dialog-wrap {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .modal-dialog-kotak {
    border-radius: 24px 24px 0 0 !important;
    max-width: 100% !important;
    max-height: 86vh !important;
    margin: 0 !important;
    animation: bottomSheetMuncul 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    padding-bottom: env(safe-area-inset-bottom, 16px) !important;
    touch-action: pan-y;
  }
  .modal-dialog-kotak::before {
    content: '';
    display: block;
    width: 40px;
    height: 5px;
    background: #CBD5E1;
    border-radius: 99px;
    margin: 10px auto 4px;
    flex-shrink: 0;
  }
  [data-tema="gelap"] .modal-dialog-kotak::before {
    background: #475569;
  }
}
@keyframes bottomSheetMuncul {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* Modifikasi Ukuran Teks & Font Reader Mode */
.reader-teks-sm { font-size: 0.92rem !important; line-height: 1.65 !important; }
.reader-teks-md { font-size: 1.05rem !important; line-height: 1.75 !important; }
.reader-teks-lg { font-size: 1.2rem !important; line-height: 1.85 !important; }
.reader-teks-xl { font-size: 1.35rem !important; line-height: 1.95 !important; }
.reader-font-serif { font-family: "Georgia", "Cambria", serif !important; }
.reader-bookmark-active {
  background: rgba(212, 175, 55, 0.2) !important;
  color: #B45309 !important;
  border-color: rgba(212, 175, 55, 0.6) !important;
}