/* ============================================
   Berkahku — Glassmorphism Design 2026
   by Weverx.com
   ============================================ */

/* Font dimuat lewat <link> di index.html (satu-satunya halaman yang memakai
   file ini). Dulu juga di-@import di sini — dobel, dan @import di dalam CSS
   membuat request berantai yang menahan render. Jangan ditambahkan lagi. */

/* ---- CSS Variables: LIGHT MODE ---- */
:root {
  --bg-app:       #f2f7f4;
  --bg-glass:     rgba(255, 255, 255, 0.6);
  --bg-glass-strong: rgba(255, 255, 255, 0.8);
  --bg-card:      rgba(255, 255, 255, 0.7);
  --bg-verse:     rgba(255, 255, 255, 0.65);
  --bg-surface:   rgba(255, 255, 255, 0.45);

  --text-primary:      #0b1f1a;
  --text-secondary:    #1f3a32;
  --text-muted:        #557068;
  --text-arabic:       #0b1f1a;
  --text-latin:        #04694c;
  --text-translation:  #1c2f29;

  --accent-primary:    #047857;
  --accent-secondary:  #059669;
  --accent-tertiary:   #34d399;
  --accent-gold:       #c98a1b;
  --accent-gold-light: #f2b544;
  --accent-soft:       rgba(4, 120, 87, 0.08);
  --accent-red:        #dc2626;

  --glass-border:      rgba(255, 255, 255, 0.5);
  --glass-border-2:    rgba(4, 120, 87, 0.15);
  --glass-shadow:      0 8px 32px rgba(11, 31, 26, 0.07);
  --glass-blur:        blur(20px);
  --glass-blur-sm:     blur(12px);

  --border-color:  rgba(4, 120, 87, 0.12);
  --shadow-sm:     0 2px 12px rgba(11, 31, 26, 0.05);
  --shadow-md:     0 8px 30px rgba(11, 31, 26, 0.09);
  --shadow-lg:     0 16px 48px rgba(11, 31, 26, 0.12);
  --shadow-glow:   0 0 40px rgba(4, 120, 87, 0.14);

  --nav-bg:          rgba(6, 48, 42, 0.94);
  --nav-text:        #d1fae5;
  --tab-bg:          rgba(255, 255, 255, 0.75);
  --tab-active-bg:   rgba(4, 120, 87, 0.12);
  --tab-active-text: #065f46;
  --tab-inactive-text: #5f7c74;

  /* ---- Gaya "kartu bersih" (Nov 2026, inspirasi app Quran modern) ----
     --hero-*    : panel hero gelap di Beranda. Hero SELALU gelap di semua
                   tema, jadi token teks/kaca hero (putih transparan) cukup
                   didefinisikan sekali di sini; tiap tema hanya mengganti
                   --hero-bg.
     --bg-solid  : permukaan kartu solid (bukan kaca) untuk Beranda & menu bawah.
     --feature-* : kartu sorotan & isian aktif (Yasin, Tahlil, chip aktif,
                   nomor ayat) — WARNA SOLID, teks putih, jadi harus cukup
                   gelap di tiap tema (kontras >= 4.5:1).
     --wa-bg     : tombol bagikan WhatsApp — hijau WA versi gelap supaya
                   teks putih lolos kontras (#25d366 asli hanya 2:1).
     Sejak 8 Nov 2026 tidak ada gradien warna di token (permintaan Hari:
     gaya solid modern ala iOS/One UI). Gradien hanya untuk mask fade. */
  --hero-bg:           #06302a;
  --hero-text:         #ffffff;
  --hero-text-muted:   rgba(255, 255, 255, 0.85);
  --hero-accent:       #f6c56b;
  --hero-glass:        rgba(255, 255, 255, 0.1);
  --hero-glass-strong: rgba(255, 255, 255, 0.18);
  --hero-glass-border: rgba(255, 255, 255, 0.16);
  --bg-solid:          #ffffff;
  --feature-bg:        #047857;
  --feature-gold-bg:   #94560a;
  --wa-bg:             #0e7a6e;
  --feature-text:      #ffffff;
  --shadow-up:         0 -6px 24px rgba(11, 31, 26, 0.08);
  /* Teks KECIL berwarna emas: emas murni di tema terang cuma ~3.3:1.
     Dicampur 35% --text-primary -> >= 5.5:1 di kelima tema. Didefinisikan
     sekali di :root; var() di dalamnya ikut nilai tema aktif karena
     data-theme ada di elemen root yang sama. */
  --gold-text:         color-mix(in srgb, var(--accent-gold) 65%, var(--text-primary));
  --radius-pill:       999px;
  /* Ornamen islami (Nov 2026, gaya "AQARI"): bukan pola penuh di latar,
     tapi STRIP BERTANGGA di tepi panel gelap. Dipakai sebagai mask
     (repeat-x), jadi warnanya ikut token. Pola penuh di latar sempat
     dicoba dan dianggap ramai — jangan dikembalikan. */
  --ornament-steps:    url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2710%27 viewBox=%270 0 16 10%27%3E%3Cpath d=%27M0 10V8H3V5H6V2H10V5H13V8H16V10Z%27/%3E%3C/svg%3E");

  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  --font-body:   'Outfit', system-ui, -apple-system, sans-serif;
  --font-arabic: 'Scheherazade New', 'Amiri', serif;
  /* Huruf Arab dekoratif besar (hero & kartu sorotan), gaya modern
     geometris. Hanya untuk ORNAMEN — teks bacaan tetap --font-arabic. */
  --font-arab-hias: 'Alexandria', 'Scheherazade New', sans-serif;

  --arabic-size:      2.0rem;
  --latin-size:       1.0rem;
  --translation-size: 0.92rem;

  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: all 0.15s ease;
}

/* ---- DARK MODE: HIJAU MALAM (palet Emerald & Madu, Nov 2026) ---- */
[data-theme="dark"] {
  --bg-app:       #07110e;
  --bg-glass:     rgba(15, 32, 27, 0.6);
  --bg-glass-strong: rgba(15, 32, 27, 0.8);
  --bg-card:      rgba(18, 38, 32, 0.65);
  --bg-verse:     rgba(18, 38, 32, 0.55);
  --bg-surface:   rgba(18, 38, 32, 0.4);

  --text-primary:      #e7f3ee;
  --text-secondary:    #b3d1c6;
  --text-muted:        #7c9b90;
  --text-arabic:       #f1f9f5;
  --text-latin:        #6ee7b7;
  --text-translation:  #a7c7bb;

  --accent-primary:    #34d399;
  --accent-secondary:  #6ee7b7;
  --accent-tertiary:   #a7f3d0;
  --accent-gold:       #f2b544;
  --accent-gold-light: #f6c56b;
  --accent-soft:       rgba(52, 211, 153, 0.1);
  --accent-red:        #f87171;

  --glass-border:      rgba(52, 211, 153, 0.15);
  --glass-border-2:    rgba(52, 211, 153, 0.08);
  --glass-shadow:      0 8px 32px rgba(0, 0, 0, 0.3);

  --border-color:  rgba(52, 211, 153, 0.1);
  --shadow-sm:     0 2px 12px rgba(0, 0, 0, 0.25);
  --shadow-md:     0 8px 30px rgba(0, 0, 0, 0.35);
  --shadow-lg:     0 16px 48px rgba(0, 0, 0, 0.45);
  --shadow-glow:   0 0 60px rgba(52, 211, 153, 0.08);

  --nav-bg:          rgba(4, 10, 8, 0.95);
  --tab-bg:          rgba(15, 32, 27, 0.7);
  --tab-active-bg:   rgba(52, 211, 153, 0.14);
  --tab-active-text: #34d399;
  --tab-inactive-text: #5f8075;
  --hero-bg:         #0a2a24;
  --bg-solid:        #0f1c18;
  --feature-bg:      #047857;
  --feature-gold-bg: #8a500c;
  --shadow-up:       0 -6px 24px rgba(0, 0, 0, 0.35);
}

/* ---- TEMA: KREM KLASIK (dari eksplorasi _preview-v2 — krem hangat + hijau hutan + emas) ---- */
[data-theme="cream"] {
  --bg-app:       #f6f1e4;
  --bg-glass:     rgba(255, 255, 255, 0.6);
  --bg-glass-strong: rgba(255, 255, 255, 0.82);
  --bg-card:      rgba(255, 255, 255, 0.75);
  --bg-verse:     rgba(255, 255, 255, 0.68);
  --bg-surface:   rgba(255, 255, 255, 0.45);

  --text-primary:      #1c2b1e;
  --text-secondary:    #33432f;
  --text-muted:        #8c8570;
  --text-arabic:       #1c2b1e;
  --text-latin:        #2e5535;
  --text-translation:  #4a5544;

  --accent-primary:    #1f3d26;
  --accent-secondary:  #2e5535;
  --accent-tertiary:   #4e7a52;
  --accent-gold:       #a8791f;
  --accent-gold-light: #c99a32;
  --accent-soft:       rgba(31, 61, 38, 0.08);

  --glass-border:      rgba(255, 255, 255, 0.7);
  --glass-border-2:    rgba(31, 61, 38, 0.15);
  --glass-shadow:      0 10px 24px -8px rgba(28, 43, 30, 0.16);

  --border-color:  #eae1cc;
  --shadow-sm:     0 2px 6px rgba(28, 43, 30, 0.06);
  --shadow-md:     0 10px 24px -8px rgba(28, 43, 30, 0.18);
  --shadow-lg:     0 20px 40px -12px rgba(15, 30, 18, 0.28);
  --shadow-glow:   0 0 40px rgba(31, 61, 38, 0.12);

  --nav-bg:          rgba(31, 61, 38, 0.96);
  --nav-text:        #f3ebd8;
  --tab-bg:          rgba(255, 255, 255, 0.85);
  --tab-active-bg:   rgba(31, 61, 38, 0.1);
  --tab-active-text: #1f3d26;
  --tab-inactive-text: #8c8570;
  --hero-bg:         #1f3d26;
  --bg-solid:        #fffdf7;
  --feature-bg:      #2e5535;
  --feature-gold-bg: #7a5513;
  --shadow-up:       0 -6px 22px rgba(28, 43, 30, 0.08);
}
[data-theme="cream"] body {
  background-image: none;
}

/* ---- TEMA: SEPIA BACA (kertas hangat, nyaman untuk membaca lama) ---- */
[data-theme="sepia"] {
  --bg-app:       #f4ead8;
  --bg-glass:     rgba(251, 244, 230, 0.65);
  --bg-glass-strong: rgba(251, 244, 230, 0.85);
  --bg-card:      rgba(251, 244, 230, 0.8);
  --bg-verse:     rgba(251, 244, 230, 0.72);
  --bg-surface:   rgba(251, 244, 230, 0.5);

  --text-primary:      #3b2f20;
  --text-secondary:    #574531;
  --text-muted:        #97815f;
  --text-arabic:       #33291b;
  --text-latin:        #7d5820;
  --text-translation:  #5d4b33;

  --accent-primary:    #8a5a1e;
  --accent-secondary:  #a8791f;
  --accent-tertiary:   #c99a32;
  --accent-gold:       #a8791f;
  --accent-gold-light: #c99a32;
  --accent-soft:       rgba(138, 90, 30, 0.08);

  --glass-border:      rgba(251, 244, 230, 0.8);
  --glass-border-2:    rgba(138, 90, 30, 0.16);
  --glass-shadow:      0 8px 28px rgba(90, 66, 34, 0.12);

  --border-color:  #e2d3b4;
  --shadow-sm:     0 2px 8px rgba(90, 66, 34, 0.08);
  --shadow-md:     0 8px 26px rgba(90, 66, 34, 0.13);
  --shadow-lg:     0 16px 44px rgba(90, 66, 34, 0.18);
  --shadow-glow:   0 0 40px rgba(168, 121, 31, 0.14);

  --nav-bg:          rgba(59, 47, 32, 0.96);
  --nav-text:        #f4ead8;
  --tab-bg:          rgba(251, 244, 230, 0.88);
  --tab-active-bg:   rgba(138, 90, 30, 0.12);
  --tab-active-text: #8a5a1e;
  --tab-inactive-text: #a08a64;
  --hero-bg:         #4a3820;
  --bg-solid:        #fdf8ee;
  --feature-bg:      #74491a;
  --feature-gold-bg: #5d4b33;
  --shadow-up:       0 -6px 22px rgba(90, 66, 34, 0.1);
}
[data-theme="sepia"] body {
  background-image: none;
}

/* ---- TEMA: LANGIT MALAM (indigo malam + zamrud + emas, Nov 2026).
   id tetap "midnight" supaya pengguna lama "Biru Malam" otomatis pindah. ---- */
[data-theme="midnight"] {
  --bg-app:       #0a0b18;
  --bg-glass:     rgba(20, 21, 44, 0.6);
  --bg-glass-strong: rgba(20, 21, 44, 0.8);
  --bg-card:      rgba(24, 25, 52, 0.65);
  --bg-verse:     rgba(24, 25, 52, 0.55);
  --bg-surface:   rgba(24, 25, 52, 0.4);

  --text-primary:      #ecedf7;
  --text-secondary:    #bfc2e0;
  --text-muted:        #8a8db0;
  --text-arabic:       #f4f5fc;
  --text-latin:        #a5b4fc;
  --text-translation:  #b4b7d6;

  --accent-primary:    #34d399;
  --accent-secondary:  #6ee7b7;
  --accent-tertiary:   #a7f3d0;
  --accent-gold:       #fcd34d;
  --accent-gold-light: #fde68a;
  --accent-soft:       rgba(52, 211, 153, 0.1);
  --accent-red:        #f87171;

  --glass-border:      rgba(165, 180, 252, 0.14);
  --glass-border-2:    rgba(165, 180, 252, 0.08);
  --glass-shadow:      0 8px 32px rgba(0, 0, 0, 0.35);

  --border-color:  rgba(165, 180, 252, 0.11);
  --shadow-sm:     0 2px 12px rgba(0, 0, 0, 0.28);
  --shadow-md:     0 8px 30px rgba(0, 0, 0, 0.38);
  --shadow-lg:     0 16px 48px rgba(0, 0, 0, 0.48);
  --shadow-glow:   0 0 60px rgba(165, 180, 252, 0.08);

  --nav-bg:          rgba(8, 8, 22, 0.95);
  --nav-text:        #e0e7ff;
  --tab-bg:          rgba(20, 21, 44, 0.7);
  --tab-active-bg:   rgba(52, 211, 153, 0.14);
  --tab-active-text: #34d399;
  --tab-inactive-text: #7275a0;
  --hero-bg:         #1a1840;
  --hero-accent:     #fcd34d;
  --bg-solid:        #13142a;
  --feature-bg:      #047857;
  --feature-gold-bg: #92400e;
  --shadow-up:       0 -6px 24px rgba(0, 0, 0, 0.4);
}
[data-theme="midnight"] body {
  background-image: none;
}

/* ---- TEMA: TEAL SEGAR (teal laguna + peach, Nov 2026) ---- */
[data-theme="teal"] {
  --bg-app:       #f1f7f7;
  --bg-glass:     rgba(255, 255, 255, 0.6);
  --bg-glass-strong: rgba(255, 255, 255, 0.8);
  --bg-card:      rgba(255, 255, 255, 0.7);
  --bg-verse:     rgba(255, 255, 255, 0.65);
  --bg-surface:   rgba(255, 255, 255, 0.45);

  --text-primary:      #0c2122;
  --text-secondary:    #1d3a3b;
  --text-muted:        #536e6d;
  --text-arabic:       #0c2122;
  --text-latin:        #0b6b64;
  --text-translation:  #1b3031;

  --accent-primary:    #0f766e;
  --accent-secondary:  #0d9488;
  --accent-tertiary:   #2dd4bf;
  --accent-gold:       #d9734e;
  --accent-gold-light: #ffb59a;
  --accent-soft:       rgba(15, 118, 110, 0.08);
  --accent-red:        #dc2626;

  --glass-border:      rgba(255, 255, 255, 0.5);
  --glass-border-2:    rgba(15, 118, 110, 0.15);
  --glass-shadow:      0 8px 32px rgba(12, 33, 34, 0.07);

  --border-color:  rgba(15, 118, 110, 0.12);
  --shadow-sm:     0 2px 12px rgba(12, 33, 34, 0.05);
  --shadow-md:     0 8px 30px rgba(12, 33, 34, 0.09);
  --shadow-lg:     0 16px 48px rgba(12, 33, 34, 0.12);
  --shadow-glow:   0 0 40px rgba(15, 118, 110, 0.14);

  --nav-bg:          rgba(11, 53, 54, 0.94);
  --nav-text:        #ccfbf1;
  --tab-bg:          rgba(255, 255, 255, 0.75);
  --tab-active-bg:   rgba(15, 118, 110, 0.12);
  --tab-active-text: #115e59;
  --tab-inactive-text: #5c7978;
  --hero-bg:         #0b3536;
  --hero-accent:     #ffb59a;
  --bg-solid:        #ffffff;
  --feature-bg:      #0f766e;
  --feature-gold-bg: #a8461f;
  --shadow-up:       0 -6px 24px rgba(12, 33, 34, 0.08);
}

/* ---- TEMA: TEAL MALAM (versi gelap Teal Segar) ---- */
[data-theme="teal-dark"] {
  --bg-app:       #061112;
  --bg-glass:     rgba(14, 30, 31, 0.6);
  --bg-glass-strong: rgba(14, 30, 31, 0.8);
  --bg-card:      rgba(17, 36, 37, 0.65);
  --bg-verse:     rgba(17, 36, 37, 0.55);
  --bg-surface:   rgba(17, 36, 37, 0.4);

  --text-primary:      #e6f2f1;
  --text-secondary:    #b0cfcc;
  --text-muted:        #7a9a97;
  --text-arabic:       #f0f9f8;
  --text-latin:        #5eead4;
  --text-translation:  #a3c4c1;

  --accent-primary:    #2dd4bf;
  --accent-secondary:  #5eead4;
  --accent-tertiary:   #99f6e4;
  --accent-gold:       #ffa883;
  --accent-gold-light: #ffc4ad;
  --accent-soft:       rgba(45, 212, 191, 0.1);
  --accent-red:        #f87171;

  --glass-border:      rgba(45, 212, 191, 0.15);
  --glass-border-2:    rgba(45, 212, 191, 0.08);
  --glass-shadow:      0 8px 32px rgba(0, 0, 0, 0.3);

  --border-color:  rgba(45, 212, 191, 0.1);
  --shadow-sm:     0 2px 12px rgba(0, 0, 0, 0.25);
  --shadow-md:     0 8px 30px rgba(0, 0, 0, 0.35);
  --shadow-lg:     0 16px 48px rgba(0, 0, 0, 0.45);
  --shadow-glow:   0 0 60px rgba(45, 212, 191, 0.08);

  --nav-bg:          rgba(4, 10, 11, 0.95);
  --nav-text:        #ccfbf1;
  --tab-bg:          rgba(14, 30, 31, 0.7);
  --tab-active-bg:   rgba(45, 212, 191, 0.14);
  --tab-active-text: #2dd4bf;
  --tab-inactive-text: #5d807d;
  --hero-bg:         #0a2829;
  --hero-accent:     #ffb59a;
  --bg-solid:        #0e1b1c;
  --feature-bg:      #0f766e;
  --feature-gold-bg: #a2431f;
  --shadow-up:       0 -6px 24px rgba(0, 0, 0, 0.35);
}

/* ---- TEMA: LANGIT SUBUH (versi terang Langit Malam: indigo + zamrud + emas) ---- */
[data-theme="langit"] {
  --bg-app:       #f4f5fa;
  --bg-glass:     rgba(255, 255, 255, 0.6);
  --bg-glass-strong: rgba(255, 255, 255, 0.8);
  --bg-card:      rgba(255, 255, 255, 0.7);
  --bg-verse:     rgba(255, 255, 255, 0.65);
  --bg-surface:   rgba(255, 255, 255, 0.45);

  --text-primary:      #14152b;
  --text-secondary:    #2a2c4a;
  --text-muted:        #5f637d;
  --text-arabic:       #14152b;
  --text-latin:        #3730a3;
  --text-translation:  #24263f;

  --accent-primary:    #047857;
  --accent-secondary:  #059669;
  --accent-tertiary:   #34d399;
  --accent-gold:       #c98a0e;
  --accent-gold-light: #fcd34d;
  --accent-soft:       rgba(4, 120, 87, 0.08);
  --accent-red:        #dc2626;

  --glass-border:      rgba(255, 255, 255, 0.5);
  --glass-border-2:    rgba(30, 27, 75, 0.12);
  --glass-shadow:      0 8px 32px rgba(20, 21, 43, 0.07);

  --border-color:  rgba(30, 27, 75, 0.1);
  --shadow-sm:     0 2px 12px rgba(20, 21, 43, 0.05);
  --shadow-md:     0 8px 30px rgba(20, 21, 43, 0.09);
  --shadow-lg:     0 16px 48px rgba(20, 21, 43, 0.12);
  --shadow-glow:   0 0 40px rgba(67, 56, 202, 0.12);

  --nav-bg:          rgba(30, 27, 75, 0.95);
  --nav-text:        #e0e7ff;
  --tab-bg:          rgba(255, 255, 255, 0.75);
  --tab-active-bg:   rgba(4, 120, 87, 0.12);
  --tab-active-text: #065f46;
  --tab-inactive-text: #62668a;
  --hero-bg:         #1e1b4b;
  --hero-accent:     #fcd34d;
  --bg-solid:        #ffffff;
  --feature-bg:      #047857;
  --feature-gold-bg: #92400e;
  --shadow-up:       0 -6px 24px rgba(20, 21, 43, 0.08);
}

/* ---- Font Size Variants ---- */
.font-small  { --arabic-size: 1.6rem;  --latin-size: 0.88rem; --translation-size: 0.82rem; }
.font-medium { --arabic-size: 2.0rem;  --latin-size: 1.0rem;  --translation-size: 0.92rem; }
.font-large  { --arabic-size: 2.5rem;  --latin-size: 1.15rem; --translation-size: 1.02rem; }
.font-xlarge { --arabic-size: 3.0rem;  --latin-size: 1.3rem;  --translation-size: 1.12rem; }

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg-app);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.4s ease, color 0.4s ease;
  /* Latar polos (pola radial lama dihapus 8 Nov 2026 — gaya solid) */
  background-image: none;
  background-attachment: fixed;
}
[data-theme="dark"] body {
  background-image: none;
}
a { color: var(--accent-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
.hidden { display: none !important; }

/* ============================================
   SPLASH SCREEN
   ============================================ */
.splash-screen {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--hero-bg);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.splash-screen.fade-out { opacity: 0; transform: scale(1.05); pointer-events: none; }
.splash-content { text-align: center; animation: splashIn 1s cubic-bezier(0.4, 0, 0.2, 1) forwards; position: relative; z-index: 1; }
@keyframes splashIn {
  from { opacity: 0; transform: translateY(30px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.splash-logo { display: flex; align-items: center; justify-content: center; gap: 0.7rem; margin-bottom: 0.4rem; }
.splash-icon-wrap {
  width: 90px; height: 90px;
  display: flex; align-items: center; justify-content: center;
}
.splash-logo-img {
  width: 90px; height: 90px;
  object-fit: contain;
  border-radius: 22px;
  /* Logo flat (Nov 2026): tanpa glow, cukup garis tipis di atas latar gelap */
  box-shadow: 0 0 0 1px var(--hero-glass-border);
}
@keyframes glowPulse {
  0%, 100% { filter: drop-shadow(0 0 15px color-mix(in srgb, var(--accent-gold) 40%, transparent)); }
  50% { filter: drop-shadow(0 0 35px color-mix(in srgb, var(--accent-gold) 80%, transparent)); }
}
.splash-title {
  font-family: 'Outfit', sans-serif;
  font-size: 3rem; font-weight: 900; color: var(--hero-text);
  letter-spacing: -1px;
}
.splash-subtitle { color: #74c69d; font-size: 0.95rem; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; }
.splash-by { color: rgba(255, 255, 255, 0.35); font-size: 0.8rem; margin-top: 0.3rem; margin-bottom: 2.5rem; }
.splash-by strong { color: var(--hero-accent); font-weight: 600; }
.splash-loader { display: flex; justify-content: center; gap: 10px; }
.splash-loader span {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--hero-accent);
  animation: dotBounce 1.4s ease infinite;
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent-gold) 40%, transparent);
}
.splash-loader span:nth-child(2) { animation-delay: 0.2s; }
.splash-loader span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dotBounce {
  0%, 80%, 100% { transform: scale(0.4); opacity: 0.3; }
  40% { transform: scale(1.1); opacity: 1; }
}

/* ============================================
   APP LAYOUT
   ============================================ */
.app {
  max-width: 520px; margin: 0 auto; min-height: 100dvh;
  display: flex; flex-direction: column;
  position: relative;
}

/* ===== iOS Safe Area / Notch Support ===== */
@supports (padding: max(0px)) {
  .navbar {
    padding-top: max(0px, env(safe-area-inset-top));
    height: calc(58px + max(0px, env(safe-area-inset-top)));
  }
  /* Catatan: .tab-bar kini menempel di BAWAH layar (fixed bottom) —
     safe-area bawahnya sudah ditangani lewat padding di aturan utamanya.
     Jangan beri `top` di sini: dulu bikin bar membentang setinggi layar
     dan menutupi seluruh konten di mobile. */
  .app-footer {
    padding-bottom: calc(76px + 2.5rem + env(safe-area-inset-bottom));
  }
}

/* ===== PWA Standalone Mode ===== */
@media (display-mode: standalone) {
  body { background-color: var(--bg-app); }
  .app { min-height: 100vh; }
}


/* ============================================
   NAVBAR — Frosted Glass
   ============================================ */
.navbar {
  position: sticky; top: 0; z-index: 100;
  background: var(--nav-bg);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  padding: 0 1.2rem; height: 58px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.navbar-left { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.navbar-brand { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
#btn-sidebar-toggle { display: none; } /* selector ID sengaja dipakai supaya menang atas display:flex dari .icon-btn; muncul lagi di @media (min-width:900px) */
.brand-icon {
  font-size: 1.5rem; color: var(--hero-accent);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent-gold) 40%, transparent));
}
.brand-logo-img {
  width: 36px; height: 36px;
  object-fit: contain;
  border-radius: 9px;
  box-shadow: 0 0 0 1px var(--hero-glass-border);
}
.brand-texts { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text {
  font-family: 'Outfit', sans-serif;
  font-size: 1.2rem; font-weight: 800; color: #ffffff; letter-spacing: -0.3px;
}
.brand-tagline {
  font-size: 0.58rem; color: color-mix(in srgb, var(--accent-gold) 60%, transparent);
  font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase;
}
/* Di Beranda navbar menyatu dengan hero gelap di bawahnya — garis
   pemisahnya dihilangkan. :has() = peningkatan progresif; browser lama
   tetap menampilkan garis tipis, tidak rusak. */
body:has(#page-beranda.active) .navbar { border-bottom-color: transparent; }
.navbar-actions { display: flex; align-items: center; gap: 0.45rem; }
/* Tombol ikon navbar: lingkaran 40px (sebelumnya kotak membulat) */
.icon-btn {
  background: var(--hero-glass);
  border: 1px solid var(--hero-glass-border);
  color: var(--nav-text); cursor: pointer; padding: 0;
  min-width: 40px; height: 40px; justify-content: center;
  border-radius: var(--radius-pill); font-size: 0.85rem;
  font-family: var(--font-body); font-weight: 600;
  transition: var(--transition); display: flex; align-items: center;
  backdrop-filter: blur(8px);
}
.icon-btn:hover { background: rgba(255, 255, 255, 0.15); transform: translateY(-1px); }
.icon-btn:active { transform: scale(0.95); }
.icon-btn-relative { position: relative; }
.icon-btn-badge {
  position: absolute; top: -5px; right: -5px;
  min-width: 16px; height: 16px; padding: 0 3px;
  background: #e67e22; color: #fff; border-radius: 999px;
  font-size: 0.6rem; font-weight: 800; line-height: 16px; text-align: center;
  box-shadow: 0 0 0 2px rgba(13, 31, 18, 0.85);
}

/* ===== Global Search (Navbar icon + modal) ===== */
.search-wrapper { display: flex; align-items: center; }
.search-icon-prefix {
  background: var(--hero-glass);
  border: 1px solid var(--hero-glass-border);
  color: var(--nav-text); cursor: pointer;
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: var(--radius-pill); font-size: 0.9rem;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition-fast);
}
.search-icon-prefix:hover { background: rgba(255, 255, 255, 0.15); }

/* Popup penuh layar — sebelumnya input expand inline di navbar dan nabrak
   logo karena navbar-left tidak dilindungi flex-shrink/min-width. */
.search-modal-overlay {
  position: fixed; inset: 0; z-index: 9990;
  background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px);
  display: flex; justify-content: center;
  animation: overlayIn 0.2s ease;
}
.search-modal-content {
  background: var(--bg-app);
  width: 100%; max-width: 520px;
  height: 100%; max-height: 100dvh;
  display: flex; flex-direction: column;
  animation: modalUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.search-modal-header {
  display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0;
  padding: max(1rem, env(safe-area-inset-top)) 1rem 0.8rem;
  border-bottom: 1px solid var(--border-color);
}
.search-modal-input-wrap {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.5rem;
  background: var(--bg-solid); border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md); padding: 0.65rem 0.9rem;
}
.search-modal-icon { font-size: 0.95rem; opacity: 0.6; flex-shrink: 0; }
.search-modal-input {
  flex: 1; min-width: 0; border: none; background: transparent; outline: none;
  font-family: var(--font-body); font-size: 0.95rem; color: var(--text-primary);
}
.search-modal-input::placeholder { color: var(--text-muted); }
.search-modal-close {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--radius-md);
  border: none; background: var(--bg-solid); color: var(--text-secondary);
  font-size: 1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition-fast);
}
.search-modal-close:hover { background: var(--accent-soft); color: var(--text-primary); }
.search-modal-results {
  flex: 1; overflow-y: auto; padding: 0.8rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
}
.search-modal-idle { text-align: center; padding: 3rem 1.5rem; color: var(--text-muted); }
.search-modal-idle span { font-size: 2rem; display: block; margin-bottom: 0.6rem; opacity: 0.6; }

.search-group { margin-bottom: 0.4rem; }
.search-group-label {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--text-muted);
  padding: 0.4rem 0.6rem 0.2rem;
}
.search-result-item {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.6rem; border-radius: var(--radius-sm);
  cursor: pointer; transition: var(--transition-fast);
}
.search-result-item:hover, .search-result-item:focus { background: var(--accent-soft); outline: none; }
.search-result-icon { font-size: 1.1rem; flex-shrink: 0; }
.search-result-text { flex: 1; min-width: 0; }
.search-result-title {
  font-size: 0.85rem; font-weight: 600; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search-result-title mark { background: color-mix(in srgb, var(--accent-gold) 35%, transparent); color: inherit; border-radius: 3px; padding: 0 2px; }
.search-result-meta { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.1rem; }
.search-result-arrow { color: var(--text-muted); font-size: 0.8rem; flex-shrink: 0; }
.search-empty { text-align: center; padding: 1.5rem 1rem; color: var(--text-muted); }
.search-empty span { font-size: 1.6rem; display: block; margin-bottom: 0.4rem; }

/* ============================================
   TAB BAR — permukaan solid, sudut atas membulat,
   tab aktif ditandai pil di belakang ikon (gaya Nov 2026)
   ============================================ */
.tab-bar {
  display: flex;
  background: var(--bg-solid);
  /* Mobile: menu di BAWAH layar (jangkauan jempol, ramah lansia).
     Di ≥900px berubah jadi sidebar kiri (lihat media query). */
  border-top: 1px solid var(--border-color);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-up);
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 99;
  /* Ikut lebar .app (520px) & tetap center — tanpa ini bar melebar penuh
     layar tablet sementara konten di atasnya tetap sempit, jadi ada
     ruang kosong di kanan. Direset di breakpoint ≥900px (mode sidebar). */
  max-width: 520px; margin: 0 auto;
  overflow-x: auto; scrollbar-width: none;
  padding: 0.45rem 0.5rem calc(0.45rem + env(safe-area-inset-bottom, 0px));
  gap: 0.15rem;
  /* Fade di tepi kanan — penanda bisa digeser saat item tidak muat */
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
}
.tab-bar::-webkit-scrollbar { display: none; }
.tab-btn {
  flex: 1; min-width: 58px; max-width: 88px; min-height: 58px;
  padding: 0.3rem 0.2rem 0.35rem;
  background: transparent; border: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem;
  color: var(--tab-inactive-text);
  font-family: var(--font-body); font-size: 0.68rem; font-weight: 600;
  transition: var(--transition); position: relative; white-space: nowrap;
  border-radius: var(--radius-md);
}
.tab-btn:hover { color: var(--tab-active-text); }
.tab-btn:hover .tab-icon { background: var(--accent-soft); }
.tab-btn.active { color: var(--tab-active-text); font-weight: 800; }
/* Pil di belakang ikon — padding sama untuk aktif & tidak aktif supaya
   tidak ada geser tata letak saat pindah tab, hanya warnanya yang muncul. */
.tab-icon {
  font-size: 1.3rem; line-height: 1;
  padding: 0.28rem 0.95rem; border-radius: var(--radius-pill);
  transition: var(--transition-fast);
}
.tab-btn.active .tab-icon { background: var(--tab-active-bg); }
.tab-label { letter-spacing: 0.1px; }

/* ============================================
   BERANDA — Halaman muka, peta seluruh fitur
   Kartu besar & label jelas: ramah segala umur
   ============================================ */
/* Hero gelap — sapaan + jadwal sholat berikutnya. Tepi bawahnya
   bertangga (ornamen dari .beranda-sheet::before). */
.beranda-hero {
  position: relative; overflow: hidden;
  padding: 1.3rem 1.2rem 2.2rem; text-align: left;
  background: var(--hero-bg); color: var(--hero-text);
}
/* Ornamen: kata Arab "بركة" (berkah) berukuran raksasa di sisi kanan,
   putih transparan — dekorasi murni (aria-hidden lewat CSS content). */
.beranda-hero::before {
  content: 'بَرَكَة'; position: absolute; pointer-events: none;
  right: -0.3rem; bottom: 0.9rem; z-index: 0;
  font-family: var(--font-arab-hias); font-weight: 800;
  font-size: 7.6rem; line-height: 1; direction: rtl;
  color: var(--hero-glass); white-space: nowrap;
}
.beranda-hero > * { position: relative; z-index: 1; }
/* Strip bertangga di tepi bawah hero — hanya tampil di desktop (di HP
   tepi bertangga dibuat oleh .beranda-sheet::before). */
.beranda-hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 10px;
  z-index: 0; pointer-events: none; display: none;
  background-color: var(--hero-glass-strong);
  -webkit-mask: var(--ornament-steps) 0 100% / 16px 10px repeat-x;
          mask: var(--ornament-steps) 0 100% / 16px 10px repeat-x;
}
.beranda-salam {
  font-family: var(--font-arabic); font-size: 1.45rem;
  color: var(--hero-accent); margin-bottom: 0.1rem; line-height: 1.6;
}
.beranda-title { font-size: 1.35rem; font-weight: 800; color: var(--hero-text); line-height: 1.3; }
.beranda-sub { font-size: 0.9rem; color: var(--hero-text-muted); margin-top: 0.2rem; }

/* Lembar konten di bawah hero. Di HP/tablet: flex kolom supaya urutan
   bagian dari dua pembungkus kolom (lihat index.html) tetap seperti dulu. */
.beranda-sheet {
  position: relative; z-index: 1;
  padding-top: 0.35rem;
  background: var(--bg-app);
  display: flex; flex-direction: column;
}
/* Tepi atas bertangga yang "menggigit" bagian bawah hero */
.beranda-sheet::before {
  content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px;
  pointer-events: none;
  background-color: var(--bg-app);
  -webkit-mask: var(--ornament-steps) 0 100% / 16px 10px repeat-x;
          mask: var(--ornament-steps) 0 100% / 16px 10px repeat-x;
}
.beranda-kolom-utama, .beranda-kolom-samping { display: contents; }
.beranda-kolom-utama > * { order: 7; }
#beranda-checklist-wrap       { order: 1; }
#beranda-progress-card        { order: 2; }
#beranda-announcement-banner  { order: 3; }
#beranda-tuntunan-intro-wrap  { order: 4; }
#beranda-haul-wrap            { order: 5; }
#beranda-artikel-wrap         { order: 6; }
#beranda-testimoni-wrap       { order: 9; }

.beranda-dashboard-mini {
  display: flex; justify-content: flex-start; gap: 0.5rem;
  margin-top: 0.7rem; flex-wrap: wrap;
}
.beranda-dashboard-mini.hidden { display: none; }
.bdm-chip {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: 999px; padding: 0.35rem 0.9rem;
  font-size: 0.78rem; color: var(--text-secondary);
}
.bdm-chip strong { color: var(--accent-primary); }
.bdm-chip-btn { font-family: var(--font-body); cursor: pointer; transition: var(--transition-fast); }
.bdm-chip-btn:hover { background: var(--accent-soft); border-color: var(--accent-primary); }
/* Chip di atas hero gelap — kaca putih transparan */
.beranda-hero .bdm-chip {
  background: var(--hero-glass); border-color: var(--hero-glass-border);
  color: var(--hero-text-muted);
}
.beranda-hero .bdm-chip strong { color: var(--hero-accent); }
.beranda-hero .bdm-chip-btn:hover { background: var(--hero-glass-strong); border-color: var(--hero-glass-border); }

.beranda-announcement {
  display: flex; align-items: center; gap: 0.6rem;
  margin: 0.9rem 1.2rem 0; padding: 0.75rem 0.9rem;
  background: color-mix(in srgb, var(--accent-gold) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-gold) 30%, transparent);
  border-radius: var(--radius-md, 12px);
  font-size: 0.82rem; color: var(--text-primary);
}
.beranda-announcement.hidden { display: none; }
.beranda-announcement .ban-icon { flex-shrink: 0; }
.beranda-announcement .ban-text { flex: 1; line-height: 1.5; }
.beranda-announcement .ban-close {
  flex-shrink: 0; background: none; border: none; color: var(--text-muted);
  font-size: 1rem; line-height: 1; cursor: pointer; padding: 0.2rem;
}

/* Kartu pengingat sholat — state kosong/loading di Beranda sebelum data
   siap. Reuse data yg sudah dimuat jadwal-sholat.js, tidak fetch ulang. */
.prayer-widget {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  width: calc(100% - 2.4rem); margin: 0.9rem 1.2rem 0; padding: 0.95rem 1.1rem;
  background: var(--accent-soft);
  border: 1.5px solid var(--accent-primary); border-radius: var(--radius-lg);
  cursor: pointer; text-align: left; font-family: var(--font-body);
  box-shadow: var(--shadow-sm); transition: var(--transition);
}
.prayer-widget:hover, .prayer-widget:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.prayer-widget:active { transform: scale(0.98); }
.prayer-widget-icon { font-size: 1.7rem; flex-shrink: 0; }
.prayer-widget-empty { justify-content: flex-start; border-style: dashed; background: var(--bg-card); }
.prayer-widget-empty-text { flex: 1; font-size: 0.84rem; color: var(--text-secondary); }
.prayer-widget-arrow { color: var(--text-muted); font-size: 1.1rem; flex-shrink: 0; }
.prayer-widget-loading {
  cursor: default; justify-content: flex-start; gap: 0.7rem;
  font-size: 0.84rem; color: var(--text-muted); background: var(--bg-card);
}
/* Versi di dalam hero gelap (Beranda) */
.beranda-hero .prayer-widget {
  width: 100%; margin: 1rem 0 0; min-height: 58px;
  background: var(--hero-glass); border: 1px dashed var(--hero-glass-border);
  color: var(--hero-text); box-shadow: none;
}
.beranda-hero .prayer-widget-loading { border-style: solid; color: var(--hero-text-muted); }
.beranda-hero .prayer-widget-empty-text { color: var(--hero-text); }
.beranda-hero .prayer-widget-arrow { color: var(--hero-text-muted); }
.beranda-hero .prayer-widget:hover { background: var(--hero-glass-strong); }

/* Jadwal sholat di hero Beranda — header = waktu berikutnya (jam besar
   + hitung mundur), di bawahnya strip semua waktu hari ini (yang
   berikutnya disorot). Tap header = buka Jadwal Sholat penuh. Markup
   dari renderBerandaPrayerWidget() di app.js. */
.jadwal-strip-wrap { margin-top: 1rem; }
.jadwal-strip-header {
  width: 100%; display: flex; flex-direction: column; align-items: flex-start;
  gap: 0.05rem; padding: 0; background: none; border: none;
  font-family: var(--font-body); color: var(--hero-text);
  cursor: pointer; text-align: left;
}
.jsh-lokasi { font-size: 0.78rem; font-weight: 600; color: var(--hero-text-muted); }
.jsh-next { margin-top: 0.5rem; font-size: 0.9rem; font-weight: 700; color: var(--hero-text); }
.jsh-jam {
  font-size: 2.9rem; font-weight: 800; line-height: 1.05;
  letter-spacing: -1px; color: var(--hero-text); font-variant-numeric: tabular-nums;
}
.jadwal-strip-sisa {
  margin-top: 0.35rem; padding: 0.25rem 0.75rem;
  font-size: 0.78rem; font-weight: 700; color: var(--hero-accent);
  background: var(--hero-glass); border-radius: var(--radius-pill);
}
.jadwal-strip {
  display: flex; gap: 0.45rem; overflow-x: auto; scroll-snap-type: x proximity;
  margin-top: 1rem; padding-bottom: 0.2rem;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  /* Fade tepi kanan — penanda masih ada waktu sholat di sebelahnya */
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
}
.jadwal-strip::-webkit-scrollbar { display: none; }
.jadwal-strip-item {
  flex: 1 0 64px; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
  padding: 0.55rem 0.4rem; border-radius: var(--radius-md);
  border: 1px solid var(--hero-glass-border); background: var(--hero-glass);
}
.jadwal-strip-item.active {
  background: var(--bg-solid); border-color: var(--bg-solid);
}
.jadwal-strip-item.active .jadwal-strip-label,
.jadwal-strip-item.active .jadwal-strip-time { color: var(--accent-primary); }
.jadwal-strip-label { font-size: 0.68rem; font-weight: 700; color: var(--hero-text-muted); }
.jadwal-strip-icon { font-size: 1.15rem; }
.jadwal-strip-time { font-size: 0.8rem; font-weight: 800; color: var(--hero-text); font-variant-numeric: tabular-nums; }

/* Kartu progress belajar — streak + Quran + Hijaiyah, self-tracking
   dari progress.js/quran.js/belajar.js. */
.progress-card {
  margin: 0.9rem 1.2rem 0; padding: 1rem 1.1rem;
  background: var(--bg-solid); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.progress-card-stats { display: flex; align-items: center; justify-content: space-around; }
.progress-card-stat { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; }
.progress-card-num { font-size: 1rem; font-weight: 800; color: var(--text-primary); }
.progress-card-label { font-size: 0.66rem; color: var(--text-muted); font-weight: 600; text-align: center; }
.progress-card-div { width: 1px; height: 30px; background: var(--border-color); }
.progress-card-btn {
  width: 100%; margin-top: 0.9rem; padding: 0.65rem;
  background: var(--accent-soft); border: none; border-radius: var(--radius-md);
  color: var(--accent-primary); font-family: var(--font-body);
  font-size: 0.82rem; font-weight: 700; cursor: pointer; transition: var(--transition-fast);
}
.progress-card-btn:hover { background: var(--feature-bg); color: var(--feature-text); }

/* Heatmap streak — gaya GitHub contribution graph, 12 minggu terakhir */
.progress-card-heatmap-wrap { margin-top: 0.9rem; }
.progress-card-heatmap-label {
  font-size: 0.66rem; color: var(--text-muted); font-weight: 600;
  margin-bottom: 0.4rem;
}
.progress-heatmap {
  display: grid;
  grid-template-rows: repeat(7, 1fr);
  grid-auto-flow: column;
  grid-auto-columns: minmax(9px, 1fr);
  gap: 3px;
  overflow: hidden;
}
.heatmap-cell {
  aspect-ratio: 1;
  border-radius: 2px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
}
.heatmap-cell.active {
  background: var(--accent-primary);
  border-color: transparent;
}

/* Checklist Amal Harian — sholat, tilawah, dzikir, sedekah */
.checklist-amal-card {
  margin: 0.9rem 1.2rem 0; padding: 1rem 1.1rem;
  background: var(--bg-solid); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.checklist-amal-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.85rem; font-weight: 700; color: var(--text-primary);
  margin-bottom: 0.7rem;
}
.checklist-amal-count { color: var(--accent-primary); font-weight: 800; }
.checklist-amal-items {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem;
}
.checklist-amal-item {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 0.7rem; border-radius: var(--radius-md);
  border: 1.5px solid var(--border-color); background: transparent;
  cursor: pointer; transition: var(--transition-fast); text-align: left;
  font-family: var(--font-body);
}
.checklist-amal-item:hover { border-color: var(--accent-secondary); }
.checklist-amal-item.checked {
  background: var(--accent-soft); border-color: var(--accent-primary);
}
.checklist-amal-check {
  width: 18px; height: 18px; flex-shrink: 0; border-radius: 5px;
  border: 1.5px solid var(--border-color); background: var(--bg-glass);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.68rem; font-weight: 800; color: #fff;
}
.checklist-amal-item.checked .checklist-amal-check {
  background: var(--feature-bg);
  border-color: transparent;
}
.checklist-amal-icon { font-size: 0.95rem; flex-shrink: 0; }
.checklist-amal-label {
  font-size: 0.76rem; font-weight: 600; color: var(--text-primary);
  line-height: 1.25;
}
.checklist-amal-item.checked .checklist-amal-label { color: var(--accent-primary); }

/* Kotak tip nyambung ke artikel terkait dari halaman fitur */
.fitur-artikel-tip {
  display: flex; gap: 0.7rem; align-items: flex-start;
  margin: 0 1rem 1rem; padding: 0.9rem 1rem;
  background: var(--accent-soft); border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}
.fitur-artikel-tip-icon { font-size: 1.3rem; flex-shrink: 0; }
.fitur-artikel-tip strong { display: block; font-size: 0.85rem; color: var(--text-primary); margin-bottom: 0.2rem; }
.fitur-artikel-tip p { font-size: 0.78rem; color: var(--text-muted); line-height: 1.5; margin: 0; }
.fitur-artikel-tip a { color: var(--accent-primary); font-weight: 700; text-decoration: none; }
.fitur-artikel-tip a:hover { text-decoration: underline; }

/* Kartu artikel terbaru — strip horizontal, tanpa foto (artikel belum
   punya foto, kartu tampil tanpa gambar (fallback rapi, bukan kotak kosong). */
.beranda-artikel-scroll {
  display: flex; gap: 0.7rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0 1.2rem 0.3rem; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.beranda-artikel-scroll::-webkit-scrollbar { display: none; }
.beranda-artikel-card {
  flex: 0 0 68%; scroll-snap-align: start; text-align: left;
  background: var(--bg-solid); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); padding: 0.9rem 1rem;
  cursor: pointer; font-family: var(--font-body); transition: var(--transition-fast);
}
.beranda-artikel-card:hover { border-color: var(--accent-primary); }
@media (min-width: 600px) { .beranda-artikel-card { flex-basis: 42%; } }
@media (min-width: 900px) { .beranda-artikel-card { flex-basis: 28%; } }
.bac-gambar {
  display: block; width: calc(100% + 2rem); aspect-ratio: 16 / 9; object-fit: cover;
  margin: -0.9rem -1rem 0.6rem; border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.bac-kategori { font-size: 0.66rem; font-weight: 700; color: var(--accent-primary); text-transform: uppercase; letter-spacing: 0.4px; }
/* Judul dibatasi 2 baris — tanpa ini, kartu ber-judul pendek ikut "distretch"
   flexbox setinggi kartu ber-judul terpanjang (karena flex default
   align-items:stretch), sisa ruangnya jadi celah kosong yang timpang. */
.bac-judul {
  font-size: 0.88rem; font-weight: 700; color: var(--text-primary); margin: 0.3rem 0; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bac-tanggal { font-size: 0.7rem; color: var(--text-muted); }

.beranda-artikel-dots { display: flex; justify-content: center; align-items: center; gap: 0.35rem; margin-top: 0.6rem; }
.ba-dot {
  width: 6px; height: 6px; padding: 0; border: none; border-radius: 999px;
  background: var(--border-color); cursor: pointer; transition: var(--transition-fast);
}
.ba-dot.active { width: 18px; background: var(--accent-primary); }

.beranda-artikel-selengkapnya {
  display: block; margin: 0.8rem 1.2rem 0; padding: 0.65rem;
  width: calc(100% - 2.4rem);
  background: none; border: 1.5px solid var(--border-color); border-radius: var(--radius-md);
  color: var(--accent-primary); font-family: var(--font-body);
  font-size: 0.82rem; font-weight: 700; cursor: pointer; transition: var(--transition-fast);
}
.beranda-artikel-selengkapnya:hover { background: var(--accent-soft); border-color: var(--accent-primary); }

/* Slider testimoni — strip auto-swipe sama seperti Artikel Terbaru
   (lihat initTestimoniCarousel di testimoni.js). */
.testimoni-scroll {
  display: flex; gap: 0.7rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0 1.2rem 0.3rem; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.testimoni-scroll::-webkit-scrollbar { display: none; }
.testimoni-card {
  flex: 0 0 82%; scroll-snap-align: start;
  background: var(--bg-solid); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); padding: 1.1rem 1.2rem;
  box-shadow: var(--shadow-sm);
}
@media (min-width: 600px) { .testimoni-card { flex-basis: 45%; } }
@media (min-width: 900px) { .testimoni-card { flex-basis: 30%; } }
.testimoni-stars { font-size: 0.85rem; margin-bottom: 0.4rem; }
.testimoni-text { font-size: 0.86rem; color: var(--text-secondary); line-height: 1.6; font-style: italic; }
.testimoni-nama { font-size: 0.76rem; color: var(--text-muted); margin-top: 0.5rem; font-weight: 700; }
.testimoni-kosong {
  margin: 0 1.2rem; padding: 1.4rem 1rem; text-align: center;
  font-size: 0.85rem; color: var(--text-muted);
  background: var(--bg-solid); border: 1px dashed var(--border-color); border-radius: var(--radius-lg);
}
.testimoni-tulis-btn {
  display: block; margin: 0.9rem 1.2rem 0; padding: 0.75rem;
  width: calc(100% - 2.4rem);
  background: var(--accent-soft); border: none; border-radius: var(--radius-md);
  color: var(--accent-primary); font-family: var(--font-body);
  font-size: 0.85rem; font-weight: 700; cursor: pointer; transition: var(--transition-fast);
}
.testimoni-tulis-btn:hover { background: var(--feature-bg); color: var(--feature-text); }

.testimoni-star-picker { display: flex; gap: 0.3rem; }
.testimoni-star-btn {
  background: none; border: none; padding: 0; font-size: 1.6rem;
  line-height: 1; cursor: pointer; transition: transform 0.1s ease;
}
.testimoni-star-btn:active { transform: scale(0.85); }

.maintenance-gate {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--hero-bg);
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 2rem;
}
.maintenance-gate.hidden { display: none; }
.maintenance-gate-content { max-width: 360px; }
.maintenance-gate-icon { font-size: 3rem; margin-bottom: 1rem; }
.maintenance-gate-content h1 { font-size: 1.3rem; font-weight: 800; color: #fff; margin-bottom: 0.6rem; }
.maintenance-gate-content p { font-size: 0.9rem; color: rgba(255,255,255,0.75); line-height: 1.6; }

.beranda-utama {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem;
  padding: 1.1rem 1.2rem 0.2rem;
}
.beranda-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.35rem; padding: 1rem 0.6rem; min-height: 88px;
  background: var(--bg-solid);
  border: 1.5px solid var(--border-color); border-radius: var(--radius-lg);
cursor: pointer; transition: var(--transition); text-align: center;
  font-family: var(--font-body); color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}
.beranda-card:hover, .beranda-card:focus-visible {
  border-color: var(--accent-primary);
  transform: translateY(-2px); box-shadow: var(--shadow-md);
}
.beranda-card:active { transform: scale(0.97); }
/* Kartu sorotan Yasin & Tahlil — gradien, teks putih, rata kiri,
   tombol pil "Baca sekarang". .bc-gold = varian emas (Tahlil). */
.beranda-card-lg {
  position: relative; overflow: hidden;
  align-items: flex-start; justify-content: flex-start; text-align: left;
  min-height: 150px; padding: 1rem 1rem 0.95rem; gap: 0.15rem;
  background: var(--feature-bg); color: var(--feature-text);
  border: none; box-shadow: var(--shadow-md);
}
.beranda-card-lg > * { position: relative; z-index: 1; }
.beranda-card-lg::after {
  content: attr(data-arab); position: absolute; pointer-events: none;
  right: 0.7rem; top: 0.3rem; z-index: 0;
  font-family: var(--font-arab-hias); font-weight: 800;
  font-size: 3.6rem; line-height: 1.2; direction: rtl; white-space: nowrap;
  color: var(--hero-glass-strong);
}
.beranda-card-lg:hover, .beranda-card-lg:focus-visible { box-shadow: var(--shadow-lg); }
/* Tahlil: kartu terang krem-emas (bukan isian oranye) supaya Beranda cuma
   punya satu warna isian kuat (hijau Yasin). Teks pakai token teks biasa. */
.beranda-card-lg.bc-gold {
  background: color-mix(in srgb, var(--accent-gold) 13%, var(--bg-solid));
  color: var(--text-primary);
  border: 1px solid color-mix(in srgb, var(--accent-gold) 32%, transparent);
  box-shadow: var(--shadow-sm);
}
.beranda-card-lg.bc-gold::after { color: color-mix(in srgb, var(--accent-gold) 22%, transparent); }
.beranda-card-lg.bc-gold .bc-badge { background: color-mix(in srgb, var(--accent-gold) 22%, transparent); }
.beranda-card-lg .bc-badge {
  width: 52px; height: 52px; border-radius: var(--radius-md);
  background: var(--hero-glass-strong); margin-bottom: 0.45rem;
}
.beranda-card-lg .bc-icon { font-size: 1.75rem; }
.beranda-card-lg .bc-name { font-size: 1.12rem; font-weight: 800; }
.beranda-card-lg .bc-desc { color: var(--feature-text); font-size: 0.76rem; font-weight: 500; }
.beranda-card-lg.bc-gold .bc-desc { color: var(--text-secondary); }
.beranda-card-lg.bc-gold .bc-cta { background: var(--feature-gold-bg); color: var(--feature-text); }
.bc-cta {
  margin-top: 0.7rem; padding: 0.3rem 0.8rem; position: relative; z-index: 1;
  font-size: 0.74rem; font-weight: 700; color: var(--feature-text);
  background: var(--hero-glass-strong); border-radius: var(--radius-pill);
}
.bc-icon { font-size: 1.5rem; line-height: 1; }
.bc-name { font-size: 0.88rem; font-weight: 700; line-height: 1.25; }
.bc-desc { font-size: 0.72rem; color: var(--text-muted); }

/* Badge ikon berwarna — icon emoji dilingkupi kotak lembut bertinta,
   4 varian yang gantian dipakai supaya menu tidak terasa monoton/seragam. */
.bc-badge {
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.tint-primary   { background: color-mix(in srgb, var(--accent-primary) 20%, transparent); }
.tint-secondary { background: color-mix(in srgb, var(--accent-secondary) 24%, transparent); }
.tint-tertiary  { background: color-mix(in srgb, var(--accent-tertiary) 26%, transparent); }
.tint-gold      { background: color-mix(in srgb, var(--accent-gold) 24%, transparent); }

/* Judul bagian — kalimat biasa (bukan huruf kapital semua), tebal */
.beranda-label {
  padding: 1.7rem 1.2rem 0.7rem; font-size: 1.08rem; font-weight: 800;
  letter-spacing: -0.2px; color: var(--text-primary); line-height: 1.3;
}
/* Grid menu ikon: satu panel solid, ikon dalam kotak bertint + label di
   bawahnya (bukan kartu per item). 4 kolom sejak mobile. */
.beranda-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.3rem;
  margin: 0 1.2rem; padding: 0.75rem 0.45rem;
  background: var(--bg-solid); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.beranda-grid .beranda-card {
  min-height: 58px; padding: 0.4rem 0.15rem; gap: 0.4rem;
  background: none; border: none; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-radius: var(--radius-md);
}
.beranda-grid .beranda-card:hover, .beranda-grid .beranda-card:focus-visible {
  background: var(--accent-soft); box-shadow: none;
}
.beranda-grid .bc-badge { width: 54px; height: 54px; border-radius: var(--radius-md); }
/* Satu warna lembut untuk semua badge menu (dulu 4 tint bergantian →
   terlihat ramai). Kelas tint-* tetap di HTML, ditimpa di sini. */
.beranda-grid .bc-badge, .beranda-tile .bc-badge {
  background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-solid));
  border: 1px solid color-mix(in srgb, var(--accent-primary) 12%, transparent);
}
.beranda-grid .bc-name { font-size: 0.74rem; line-height: 1.25; }

/* Strip menu horizontal — dipakai untuk daftar menu yang banyak (mis.
   Panduan Ibadah) supaya tidak menyisakan baris grid yang timpang sebelah. */
/* Panel solid yang bisa digeser; ikon + label seperti grid di atas.
   flex-grow 1 → di layar lebar (semua muat) item merata selebar panel. */
.beranda-scroll-x {
  display: flex; gap: 0.3rem; overflow-x: auto; scroll-snap-type: x proximity;
  margin: 0 1.2rem; padding: 0.75rem 0.45rem;
  background: var(--bg-solid); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  /* Fade tepi kanan — penanda masih ada menu di sebelahnya */
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
}
.beranda-scroll-x::-webkit-scrollbar { display: none; }
.beranda-tile {
  flex: 1 0 76px; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
  min-height: 58px; padding: 0.4rem 0.15rem;
  background: none; border: none; border-radius: var(--radius-md);
  cursor: pointer; transition: var(--transition); text-align: center;
  font-family: var(--font-body); color: var(--text-primary);
}
.beranda-tile .bc-badge { width: 54px; height: 54px; border-radius: var(--radius-md); }
.beranda-tile .bc-name { font-size: 0.74rem; font-weight: 700; line-height: 1.25; }
.beranda-tile:hover, .beranda-tile:focus-visible { background: var(--accent-soft); }
.beranda-tile:active { transform: scale(0.96); }

/* Kartu-kartu lain di Beranda ikut gaya "kartu bersih": permukaan solid,
   garis tipis, bayangan halus (bukan kaca transparan). */
#page-beranda .checklist-amal-card,
#page-beranda .progress-card,
#page-beranda .beranda-artikel-card,
#page-beranda .testimoni-card,
#page-beranda .testimoni-kosong {
  background: var(--bg-solid);
}

#page-beranda { padding-bottom: 1.6rem; }

@media (min-width: 600px) {
  .beranda-utama { max-width: 640px; margin: 0 auto; }
}
@media (min-width: 900px) {
  /* Lebar Beranda di laptop: memenuhi area konten, dibatasi supaya kartu
     tidak terlalu melar di monitor sangat lebar. */
  :root { --lebar-beranda: 1280px; }
  /* Desktop: hero jadi kartu membulat selebar konten, lembar di bawahnya
     tidak lagi menimpa hero (tidak ada navbar yang perlu "disambung"). */
  .beranda-hero::before { font-size: 12.5rem; bottom: -1.2rem; right: 2rem; }
  .beranda-hero {
    max-width: var(--lebar-beranda); margin: 1.4rem auto 0; padding: 1.8rem 2rem;
    border-radius: var(--radius-xl); box-shadow: var(--shadow-md);
  }
  .beranda-sheet { padding-top: 0; background: none; }
  .beranda-sheet::before { display: none; }
  .beranda-hero::after { display: block; }
  .jadwal-strip { -webkit-mask-image: none; mask-image: none; }
  .beranda-grid, .beranda-utama, .beranda-label, .beranda-scroll-x,
  #beranda-progress-card, #beranda-artikel-wrap, #beranda-checklist-wrap,
  #beranda-tuntunan-intro-wrap, #beranda-haul-wrap, #beranda-testimoni-wrap,
  .beranda-announcement {
    max-width: var(--lebar-beranda); margin-left: auto; margin-right: auto;
    width: 100%;
  }
  /* Kartu di dalam wrapper di atas sudah punya margin samping 1.2rem;
     hero & panel menu juga harus selebar itu supaya tepinya sejajar. */
  .beranda-grid, .beranda-scroll-x { padding: 0.9rem 0.6rem; }
  .beranda-grid, .beranda-scroll-x, .beranda-hero, .beranda-announcement {
    width: calc(100% - 2.4rem); max-width: calc(var(--lebar-beranda) - 2.4rem);
  }

  /* Jadwal Sholat, Kiblat, Masjid Terdekat — kartu tetap proporsional,
     bukan melebar penuh mengikuti content-area sidebar layout. */
  #subpage-jadwal-sholat .form-group,
  #js-date-nav, #js-jadwal-card,
  #subpage-kiblat .calc-card,
  #subpage-masjid-terdekat .calc-card,
  #masjid-list, .kiblat-disclaimer {
    max-width: 900px; margin-left: auto; margin-right: auto;
  }
}

/* Laptop lebar (>= 1100px): Beranda dua kolom seperti dashboard.
   Kiri = menu utama, kanan = amal harian, progres, testimoni (sticky). */
@media (min-width: 1100px) {
  .beranda-sheet {
    display: grid; grid-template-columns: minmax(0, 1fr) 380px;
    align-items: start; column-gap: 0;
    max-width: var(--lebar-beranda); margin: 0 auto; width: 100%;
  }
  .beranda-kolom-utama, .beranda-kolom-samping {
    display: flex; flex-direction: column; min-width: 0;
  }
  .beranda-kolom-samping {
    grid-column: 2; grid-row: 1;
    position: sticky; top: 0; padding-top: 0.4rem;
  }
  .beranda-kolom-utama { grid-column: 1; grid-row: 1; }
  /* Di kolom kiri artikel pindah ke bawah menu */
  .beranda-kolom-utama > #beranda-artikel-wrap { order: 8; }
  .beranda-kolom-utama > *, .beranda-kolom-samping > * {
    max-width: none; width: auto; margin-left: 0; margin-right: 0;
  }
  .beranda-kolom-utama .beranda-grid, .beranda-kolom-utama .beranda-scroll-x,
  .beranda-kolom-utama .beranda-announcement {
    width: auto; max-width: none; margin-left: 1.2rem; margin-right: 1.2rem;
  }
  .beranda-kolom-samping .beranda-artikel-card { flex-basis: 80%; }
  .beranda-hero { max-width: calc(var(--lebar-beranda) - 2.4rem); }
}

/* ============================================
   SUB-TAB SELECTOR (inside pages)
   ============================================ */
/* Sub-tab = baris chip pil solid (gaya kartu bersih, Nov 2026). Latar baris
   ikut --bg-app (polos), chip-nya yang membawa permukaan. */
.sub-tab-bar {
  display: flex; gap: 0.45rem; padding: 0.75rem 1rem;
  background: var(--bg-app);
  border-bottom: 1px solid var(--border-color);
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* Fade di tepi kanan — penanda visual bahwa baris ini bisa digeser
     saat lebih lebar dari layar (di bawah breakpoint desktop 900px) */
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 32px), transparent 100%);
  mask-image: linear-gradient(to right, black calc(100% - 32px), transparent 100%);
}
.sub-tab-bar::-webkit-scrollbar { display: none; }
/* min-height 44px = target sentuh minimum. Warna teks --text-secondary
   (bukan --text-muted) supaya kontras >= 4.5:1 juga di tema Krem. */
.sub-tab-btn {
  flex-shrink: 0; min-height: 44px; padding: 0.5rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  background: var(--bg-solid);
  color: var(--text-secondary);
  font-family: var(--font-body); font-size: 0.82rem; font-weight: 600;
  cursor: pointer; transition: var(--transition-fast); text-align: center;
  white-space: nowrap; letter-spacing: 0.1px;
}
.sub-tab-btn:hover { border-color: var(--accent-primary); color: var(--text-primary); }
.sub-tab-btn.active {
  border-color: transparent;
  background: var(--feature-bg);
  color: var(--feature-text); font-weight: 700;
  box-shadow: var(--shadow-sm);
}

/* Sub-tab-bar "grouped" — dipakai di Lainnya, tombol dikelompokkan per
   tema alih-alih satu baris panjang yang digeser terus */
.sub-tab-bar.grouped {
  display: flex; flex-direction: column; overflow: visible;
  -webkit-mask-image: none; mask-image: none;
  gap: 0.55rem; padding: 0.65rem 0.75rem;
}
.subtab-group { display: flex; flex-direction: column; gap: 0.25rem; }
.subtab-group-label {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--text-muted); padding-left: 0.15rem;
}
.subtab-group-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }

/* Kartu menu Lainnya — icon-badge + label sejajar horizontal (bukan pil),
   reuse .bc-badge/.bc-icon/tint-* yang sama dengan grid Beranda supaya
   bahasa visualnya konsisten satu app. */
.lainnya-menu-card {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  min-height: 58px; padding: 0.65rem 0.85rem;
  background: var(--bg-solid); border: 1.5px solid var(--border-color); border-radius: var(--radius-lg);
cursor: pointer; transition: var(--transition); text-align: left; white-space: normal;
  font-family: var(--font-body); color: var(--text-primary); box-shadow: var(--shadow-sm);
}
.lainnya-menu-card .lmc-label { font-size: 0.85rem; font-weight: 700; line-height: 1.25; flex: 1; }
.lainnya-menu-card:hover, .lainnya-menu-card:focus-visible {
  border-color: var(--accent-primary); transform: translateY(-2px); box-shadow: var(--shadow-md);
}
.lainnya-menu-card:active { transform: scale(0.97); }

@media (min-width: 600px) {
  .subtab-group-grid { grid-template-columns: repeat(3, 1fr); }
}

.sub-page { display: none; }
.sub-page.active { display: block; animation: pageIn 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards; }

/* ============================================
   PROGRESS BAR BACA — Tahlil / Yasin / Asmaul Husna /
   Al-Quran / Surat Pendek / Doa Harian. Sticky nempel tepat
   di bawah navbar (mobile, window yang scroll) atau di puncak
   .content-area (desktop ≥900px, .content-area sendiri yang
   scroll — override top:0 ada di media query desktop di bawah).
   Munculnya diatur dari JS (updateReadingProgress() di app.js),
   bukan CSS — lihat class .hidden.
   ============================================ */
.reading-progress-wrap {
  position: sticky; top: 58px; z-index: 90;
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.35rem 1rem;
  background: var(--bg-glass);
  backdrop-filter: var(--glass-blur-sm); -webkit-backdrop-filter: var(--glass-blur-sm);
  border-bottom: 1px solid var(--border-color);
}
.reading-progress-wrap.hidden { display: none; }
.reading-progress-track {
  /* --bg-glass (bg wrapper ini) & --border-color sama-sama putih/hijau
     tipis transparan di SEMUA 5 tema (lihat variabel :root) — kalau track
     ini juga transparan, tidak kelihatan sama sekali di tema terang.
     Border + bg-surface memberi kontur nyata sesuai tema, meniru
     .sub-tab-btn yang sudah terbukti kelihatan dengan warna-warna ini. */
  flex: 1; height: 5px; border-radius: 999px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  overflow: hidden;
}
.reading-progress-fill {
  height: 100%; width: 0%; border-radius: 999px;
  background: var(--accent-primary);
  transition: width 0.15s ease-out;
}
.reading-progress-label {
  flex-shrink: 0; font-size: 0.72rem; font-weight: 700;
  color: var(--text-secondary); min-width: 2.4em; text-align: right;
  font-variant-numeric: tabular-nums;
}
@supports (padding: max(0px)) {
  /* Samakan dengan calc tinggi .navbar di atas — kalau tidak, di iOS
     standalone PWA (notch) bar ini nempel ketinggian salah, tumpang
     tindih navbar. */
  .reading-progress-wrap { top: calc(58px + max(0px, env(safe-area-inset-top))); }
}

/* ============================================
   CONTENT AREA & PAGES
   ============================================ */
.content-area { flex: 1; }
.page { display: none; padding-bottom: 80px; animation: pageIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.page.active { display: block; }
@keyframes pageIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================
   PAGE HEADER — Glass Hero
   ============================================ */
.page-header {
  text-align: center; padding: 1.8rem 1.2rem 1.3rem;
  background: transparent;
  position: relative; overflow: hidden;
}
.page-header::before {
  content: ''; position: absolute; inset: 0;
  background: none;
  pointer-events: none;
}
.page-header-ornament {
  width: 36px; height: 4px; margin: 0 auto 1rem;
  background: var(--accent-gold);
  border-radius: var(--radius-pill); opacity: 0.8;
}
.page-title {
  font-family: var(--font-arabic); font-size: 3rem;
  color: var(--accent-primary); line-height: 1.3; margin-bottom: 0.3rem;
}
/* Judul Arab besar berwarna emas (mis. Yasin). Dicampur 20% --text-primary
   supaya kontras >= 3:1 (teks besar) di tema terang — emas murni hanya 2.95. */
.arabic-big {
  font-size: 3.5rem;
  color: color-mix(in srgb, var(--accent-gold) 80%, var(--text-primary));
}
/* Judul halaman berteks Latin (mis. "Latihan Baca") — .page-title memakai
   font Arab, yang membuat huruf Latin tampil serif dan tidak serasi. */
.page-title-latin {
  font-family: var(--font-body); font-size: 2rem; font-weight: 800;
  letter-spacing: -0.5px; line-height: 1.25;
}
.page-subtitle-ar { font-family: var(--font-arabic); font-size: 1.2rem; color: var(--text-secondary); font-weight: 400; margin-bottom: 0.5rem; }
.page-subtitle { font-size: 1.15rem; font-weight: 700; color: var(--text-primary); letter-spacing: -0.3px; }
.page-desc { font-size: 0.82rem; color: var(--text-muted); margin-top: 0.3rem; font-weight: 400; }

/* ============================================
   DISPLAY CONTROLS (Toggle)
   ============================================ */
/* Panel toggle Arab/Latin/Terjemah — kartu solid seperti panel menu
   Beranda. Tiap label setinggi 44px (target sentuh). */
.display-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem 1rem;
  flex-wrap: wrap;
  margin: 0 0.8rem 0.4rem; padding: 0.2rem 0.9rem;
  background: var(--bg-solid);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.toggle-label {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 0.45rem;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  user-select: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.toggle-label input,
.toggle-label input[type="checkbox"] { display: none; }
.toggle-switch {
  width: 36px;
  height: 20px;
  background: var(--border-color);
  border-radius: 20px;
  position: relative;
  flex-shrink: 0;
  transition: background 0.2s ease;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.toggle-switch::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  background: white;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.toggle-label input:checked + .toggle-switch {
  background: var(--accent-primary);
}
.toggle-label input:checked + .toggle-switch::after {
  transform: translateX(16px);
}

/* ============================================
   READING CONTENT — Glass Verse Cards
   ============================================ */
.reading-content { background: transparent; }

/* Kartu ayat — permukaan solid (gaya kartu bersih). Hover hanya mengubah
   warna garis: teks bacaan panjang tidak boleh ikut bergeser. */
.verse-block {
  padding: 1.3rem 1.2rem;
  margin: 0.5rem 0.8rem;
  background: var(--bg-solid);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s ease;
}
.verse-block:first-child { margin-top: 0.8rem; }
.verse-block:hover { border-color: var(--glass-border-2); }

.verse-arabic {
  font-family: var(--font-arabic);
  font-size: var(--arabic-size);
  color: var(--text-arabic);
  text-align: right; direction: rtl;
  line-height: 2.1; margin-bottom: 0.9rem;
  transition: font-size 0.2s;
}
.verse-latin {
  font-size: var(--latin-size);
  color: var(--text-latin);
  line-height: 1.75; font-style: italic;
  margin-bottom: 0.5rem; font-weight: 500;
  transition: font-size 0.2s;
}
.verse-translation {
  font-size: var(--translation-size);
  color: var(--text-translation);
  line-height: 1.8; padding-top: 0.6rem;
  border-top: 1px solid var(--border-color);
  transition: font-size 0.2s;
}
.verse-arabic.hidden,
.verse-latin.hidden,
.verse-translation.hidden { display: none !important; }

.verse-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.8rem;
}
.verse-number {
  background: var(--feature-bg);
  color: var(--feature-text); width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700; flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.section-badge {
  font-size: 0.68rem; font-weight: 700; color: var(--accent-gold);
  background: color-mix(in srgb, var(--accent-gold) 10%, transparent); padding: 0.2rem 0.7rem;
  border-radius: 20px; border: 1px solid color-mix(in srgb, var(--accent-gold) 20%, transparent);
  letter-spacing: 0.5px; text-transform: uppercase;
  backdrop-filter: blur(4px);
}
.section-divider {
  padding: 1.2rem 1.2rem 0.5rem;
  display: flex; align-items: center; gap: 0.8rem;
}
.section-divider-line {
  flex: 1; height: 1px;
  background: var(--accent-gold); opacity: 0.3;
}
.section-divider-text {
  font-size: 0.72rem; font-weight: 700; color: var(--accent-gold);
  letter-spacing: 1px; text-transform: uppercase; white-space: nowrap;
}

/* ============================================
   KARTU UNIVERSAL — solid (gaya kartu bersih, Nov 2026).
   Nama kelas .glass-card dipertahankan karena dipakai di banyak halaman.
   ============================================ */
.glass-card, .calc-card {
  background: var(--bg-solid);
  margin: 1rem 0.8rem;
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s ease;
}

/* ============================================
   FORM ELEMENTS
   ============================================ */
.form-group { margin-bottom: 1.2rem; }
.form-label {
  display: block; font-size: 0.82rem; font-weight: 700;
  color: var(--text-secondary); margin-bottom: 0.5rem;
  letter-spacing: 0.2px;
}
.label-hint {
  display: inline-block; font-size: 0.7rem; font-weight: 500;
  color: var(--accent-primary); margin-left: 0.5rem; opacity: 0.7;
}
.form-input {
  width: 100%; min-height: 48px; padding: 0.8rem 1rem;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-solid);
  color: var(--text-primary);
  font-size: 0.95rem; font-family: var(--font-body); font-weight: 500;
  transition: var(--transition); outline: none;
}
.form-input:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-primary) 8%, transparent), var(--shadow-sm);
}
.form-input::placeholder { color: var(--text-muted); font-weight: 400; }

.date-input-wrap { position: relative; }
.date-input-icon {
  position: absolute; left: 0.85rem; top: 50%;
  transform: translateY(-50%); font-size: 1rem;
  pointer-events: none; z-index: 1;
}
.date-styled { padding-left: 2.6rem !important; cursor: pointer; }

/* Flatpickr overrides */
.flatpickr-calendar {
  font-family: var(--font-body) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid var(--border-color) !important;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: var(--feature-bg) !important;
  border-color: var(--accent-primary) !important;
  color: var(--feature-text) !important;
}
.flatpickr-day:hover { background: var(--accent-soft) !important; }
.flatpickr-months .flatpickr-month {
  background: var(--accent-primary) !important;
  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
}
.flatpickr-current-month, .flatpickr-monthDropdown-months, .flatpickr-current-month input { color: white !important; }
.flatpickr-weekday { color: var(--accent-primary) !important; font-weight: 700 !important; }
.flatpickr-prev-month svg, .flatpickr-next-month svg { fill: white !important; }

/* ============================================
   MAGHRIB RULE BOX — kotak info emas lembut (solid, tanpa kaca)
   ============================================ */
.maghrib-rule-box {
  background: color-mix(in srgb, var(--accent-gold) 8%, var(--bg-solid));
  border: 1px solid color-mix(in srgb, var(--accent-gold) 30%, transparent);
  border-radius: var(--radius-lg); padding: 1rem 1.1rem; margin-bottom: 1.2rem;
}
.maghrib-rule-header { display: flex; gap: 0.8rem; margin-bottom: 0.8rem; }
.maghrib-icon { font-size: 1.6rem; flex-shrink: 0; }
.maghrib-rule-header > div strong { font-size: 0.85rem; color: var(--gold-text); display: block; margin-bottom: 0.2rem; }
.maghrib-desc { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.55; }
.maghrib-toggle { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); gap: 0.6rem; }

/* ============================================
   TOMBOL UTAMA — pil solid (tanpa gradien/kilap, Nov 2026)
   ============================================ */
.btn-primary {
  width: 100%; min-height: 52px; padding: 0.9rem;
  background: var(--feature-bg);
  color: var(--feature-text); border: none; border-radius: var(--radius-pill);
  font-size: 0.95rem; font-weight: 700; font-family: var(--font-body);
  cursor: pointer; transition: var(--transition-fast);
  box-shadow: var(--shadow-sm);
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  letter-spacing: 0.2px; position: relative; overflow: hidden;
}
.btn-primary:hover { box-shadow: var(--shadow-md); filter: brightness(1.08); }
.btn-primary:active { transform: scale(0.98); }

/* ============================================
   HASIL KALKULATOR — header solid + kartu jadwal solid
   ============================================ */
.hasil-header {
  background: var(--feature-bg);
  margin: 0 0.8rem 1rem; border-radius: var(--radius-lg); padding: 1.3rem;
  text-align: center; color: var(--feature-text);
  box-shadow: var(--shadow-md);
  position: relative; overflow: hidden;
}
.hasil-nama { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.2rem; position: relative; }
.hasil-wafat { font-size: 0.88rem; opacity: 0.92; position: relative; }
.hasil-maghrib-note {
  font-size: 0.8rem; margin-top: 0.5rem; font-style: italic;
  background: var(--hero-glass-strong); border-radius: var(--radius-sm); padding: 0.35rem 0.7rem;
  position: relative;
}
.jadwal-grid { padding: 0 0.8rem; display: grid; gap: 0.6rem; }
.jadwal-card {
  background: var(--bg-solid);
  border-radius: var(--radius-lg);
  padding: 1rem 1.1rem; display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 0.8rem;
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--accent-primary);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s ease; animation: cardIn 0.4s ease backwards;
}
.jadwal-icon { font-size: 1.4rem; width: 36px; text-align: center; }
.jadwal-label { font-size: 0.72rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.1rem; }
.jadwal-hari { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); }
.jadwal-weton {
  font-size: 0.72rem; color: var(--gold-text);
  background: color-mix(in srgb, var(--accent-gold) 10%, transparent);
  padding: 0.25rem 0.6rem; border-radius: var(--radius-pill);
  text-align: right; font-weight: 700; white-space: nowrap;
}
@keyframes cardIn {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}
.jadwal-card:nth-child(1) { border-left-color: #52b788; animation-delay:.05s; }
.jadwal-card:nth-child(2) { border-left-color: #40916c; animation-delay:.10s; }
.jadwal-card:nth-child(3) { border-left-color: var(--accent-primary); animation-delay:.15s; }
.jadwal-card:nth-child(4) { border-left-color: #1b4332; animation-delay:.20s; }
.jadwal-card:nth-child(5) { border-left-color: #9a7c20; animation-delay:.25s; }
.jadwal-card:nth-child(6) { border-left-color: #8a5525; animation-delay:.30s; }
.jadwal-card:nth-child(7) { border-left-color: #6b3a2a; animation-delay:.35s; }
.jadwal-card:nth-child(8) { border-left-color: #4a2035; animation-delay:.40s; }
.jadwal-card:nth-child(9) { border-left-color: #2a1060; animation-delay:.45s; }

.btn-share {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  width: calc(100% - 1.6rem); margin: 1rem 0.8rem 0;
  min-height: 52px; padding: 0.88rem;
  background: var(--wa-bg);
  color: var(--feature-text); border: none; border-radius: var(--radius-pill);
  font-size: 0.95rem; font-weight: 700; font-family: var(--font-body);
  cursor: pointer; transition: var(--transition-fast);
  box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden;
}
.btn-share:hover { box-shadow: var(--shadow-md); filter: brightness(1.08); }

/* ============================================
   PENGINGAT HAUL & SELAMATAN (haul.js)
   ============================================ */
/* .btn-share aslinya mengatur lebar & margin sendiri; di dalam .hasil-aksi
   itu ditiadakan supaya kedua tombol sejajar rapi. */
.hasil-aksi { display: flex; flex-direction: column; gap: 0.6rem; padding: 1rem 0.8rem 0; }
.hasil-aksi .btn-share { width: 100%; margin: 0; }

.btn-simpan-haul {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  width: 100%; min-height: 52px; padding: 0.88rem;
  background: var(--feature-bg);
  color: var(--feature-text); border: none; border-radius: var(--radius-pill);
  font-size: 0.95rem; font-weight: 700; font-family: var(--font-body);
  cursor: pointer; transition: var(--transition-fast);
  box-shadow: var(--shadow-sm);
}
.btn-simpan-haul:hover { box-shadow: var(--shadow-md); filter: brightness(1.08); }
.btn-simpan-haul:active { transform: scale(0.98); }

.haul-pengingat-wrap { padding: 1.2rem 0.8rem 0; }
.haul-daftar-wrap { padding: 0.4rem 0.8rem 1rem; }
.haul-daftar-label {
  font-size: 0.8rem; font-weight: 800; color: var(--text-secondary);
  letter-spacing: 0.3px; margin: 0.8rem 0 0.6rem;
}
.haul-kosong {
  background: var(--accent-soft); border: 1px dashed var(--border-color);
  border-radius: var(--radius-md); padding: 1rem 1.1rem;
  font-size: 0.82rem; color: var(--text-secondary); line-height: 1.65;
}
.haul-item {
  background: var(--bg-solid); border: 1px solid var(--border-color); box-shadow: var(--shadow-sm);
  border-radius: var(--radius-lg); padding: 0.9rem 1rem; margin-bottom: 0.7rem;
}
.haul-item-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; }
.haul-nama { font-size: 0.95rem; font-weight: 800; color: var(--text-primary); }
.haul-wafat { font-size: 0.74rem; color: var(--text-muted); margin-top: 0.15rem; }
.haul-hapus {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border-color); background: var(--bg-solid);
  color: var(--text-muted); font-size: 0.8rem; cursor: pointer;
  transition: var(--transition-fast);
}
.haul-hapus:hover { border-color: var(--accent-red); color: var(--accent-red); }
.haul-next {
  margin-top: 0.7rem; padding: 0.6rem 0.75rem;
  background: var(--accent-soft); border-radius: var(--radius-md);
  font-size: 0.82rem; color: var(--text-secondary); line-height: 1.5;
}
.haul-next.dekat {
  background: var(--accent-soft); border-left: 3px solid var(--accent-primary);
}
.haul-next-selesai { color: var(--text-muted); font-style: italic; }
.haul-sisa { display: block; font-size: 0.74rem; font-weight: 800; color: var(--accent-primary); margin-top: 0.2rem; }
.haul-lihat {
  margin-top: 0.6rem; padding: 0; border: none; background: none;
  color: var(--accent-primary); font-family: var(--font-body);
  font-size: 0.78rem; font-weight: 700; cursor: pointer;
}
.haul-lihat:hover { text-decoration: underline; }
.haul-privasi { font-size: 0.72rem; color: var(--text-muted); line-height: 1.5; margin-top: 0.6rem; }

/* Rincian semua tonggak (modal) */
.haul-tonggak-list { max-height: 60vh; overflow-y: auto; margin-bottom: 0.8rem; }
.haul-tonggak-row {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.65rem 0.3rem; border-bottom: 1px solid var(--border-color);
}
.haul-tonggak-row:last-child { border-bottom: none; }
.haul-tonggak-row.lewat { opacity: 0.45; }
.haul-tonggak-icon { font-size: 1.15rem; flex-shrink: 0; }
.haul-tonggak-teks { flex: 1; display: flex; flex-direction: column; }
.haul-tonggak-teks strong { font-size: 0.85rem; color: var(--text-primary); }
.haul-tonggak-teks span { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.1rem; }
.haul-tonggak-sisa { font-size: 0.7rem; font-weight: 700; color: var(--accent-primary); flex-shrink: 0; text-align: right; }
.haul-tonggak-row.lewat .haul-tonggak-sisa { color: var(--text-muted); font-weight: 500; }

/* Kartu di Beranda */
.haul-beranda-kartu {
  display: flex; align-items: center; gap: 0.75rem; text-align: left;
  width: calc(100% - 2.4rem); margin: 0 1.2rem 0.7rem; padding: 0.85rem 1rem;
  background: var(--accent-soft); border: 1px solid var(--glass-border);
  border-left: 3px solid var(--accent-primary);
  border-radius: var(--radius-md); cursor: pointer;
  font-family: var(--font-body); transition: var(--transition-fast);
}
.haul-beranda-kartu:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.haul-beranda-icon { font-size: 1.4rem; flex-shrink: 0; }
.haul-beranda-teks { flex: 1; display: flex; flex-direction: column; }
.haul-beranda-teks strong { font-size: 0.85rem; color: var(--text-primary); }
.haul-beranda-teks span { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.1rem; }
.haul-beranda-arrow { color: var(--text-muted); font-size: 1.1rem; flex-shrink: 0; }

/* ============================================
   WETON — kartu hasil solid
   ============================================ */
.weton-result-card {
  background: var(--bg-solid);
  margin: 0 0.8rem 1rem;
  border-radius: var(--radius-xl); padding: 1.8rem 1.5rem; text-align: center;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-md); animation: cardIn 0.4s ease;
}
.weton-badge { display: flex; align-items: center; justify-content: center; gap: 0.8rem; margin-bottom: 1rem; }
.weton-hari, .weton-pasaran {
  background: var(--feature-bg);
  color: var(--feature-text); padding: 0.7rem 1.4rem; border-radius: var(--radius-pill);
  font-size: 1.2rem; font-weight: 700;
  box-shadow: var(--shadow-sm);
}
.weton-divider { font-size: 1.5rem; color: var(--accent-gold); font-weight: 700; }
.weton-neptu { font-size: 0.92rem; color: var(--text-secondary); margin-bottom: 1rem; font-weight: 500; }
.weton-neptu strong { color: var(--gold-text); font-size: 1.15rem; }
.weton-info {
  font-size: 0.88rem; color: var(--text-secondary); line-height: 1.65;
  padding: 0.9rem; background: var(--accent-soft);
  border-radius: var(--radius-md); font-weight: 500;
}
.section-title {
  font-size: 0.78rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 1px; padding: 1rem 0.8rem 0.5rem;
}
.weton-tahlil-card {
  background: var(--bg-solid);
  margin: 0 0.8rem 1rem;
  border-radius: var(--radius-lg); padding: 1.2rem;
  font-size: 0.88rem; color: var(--text-secondary); line-height: 1.75; font-weight: 500;
  border: 1px solid var(--border-color); box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--accent-gold);
}

/* ============================================
   DISCLAIMER — Important notice
   ============================================ */
.disclaimer-card {
  background: color-mix(in srgb, var(--accent-gold) 8%, var(--bg-solid));
  border: 1px solid color-mix(in srgb, var(--accent-gold) 30%, transparent);
  border-radius: var(--radius-lg);
  margin: 0 0.8rem 1rem; padding: 1rem 1.2rem;
  font-size: 0.82rem; color: var(--text-secondary); line-height: 1.65; font-weight: 500;
}
.disclaimer-card strong { color: var(--gold-text); }

/* Varian netral — dipakai untuk catatan khilafiyah (perbedaan pendapat
   antar ulama/ormas). Sengaja TIDAK memakai warna emas + ikon peringatan
   seperti .disclaimer-card biasa, karena perbedaan pendapat bukan bahaya
   yang perlu diwaspadai — ini informasi supaya pengguna di luar NU tahu
   posisinya dan tidak merasa dijejali. Lihat docs/PRD.md → "Sikap
   terhadap khilafiyah". */
.disclaimer-card.netral {
  background: var(--accent-soft);
  border-color: var(--border-color);
}
.disclaimer-card.netral strong { color: var(--accent-primary); }

/* ============================================
   TUNTUNAN IBADAH — penonjolan Beranda per preferensi
   ============================================
   Kartu ber-data-khas="jawa" hanya DISEMBUNYIKAN DARI BERANDA, bukan
   dihapus dari DOM dan bukan dinonaktifkan. Halaman Tahlil, Selamatan,
   Weton, dan Kecocokan Jodoh tetap utuh dan tetap bisa dibuka lewat tab
   Bacaan/Hitung, pencarian global, maupun URL hash-nya.
   Lihat docs/PRD.md → "Sikap terhadap khilafiyah". */
:root[data-tuntunan="muhammadiyah"] #page-beranda [data-khas="jawa"],
:root[data-tuntunan="umum"]         #page-beranda [data-khas="jawa"] {
  display: none;
}

/* Tanpa kartu Tahlil, .beranda-utama tinggal berisi Yasin — jadikan satu
   kolom supaya tidak menyisakan kolom kosong yang terlihat rusak. Lebarnya
   dibatasi + ditengahkan, karena kalau dibiarkan meregang penuh di layar
   lebar kartunya jadi memanjang seperti spanduk (rasio ~5,8:1). */
:root[data-tuntunan="muhammadiyah"] .beranda-utama,
:root[data-tuntunan="umum"]         .beranda-utama {
  grid-template-columns: 1fr;
}
:root[data-tuntunan="muhammadiyah"] .beranda-utama > .beranda-card-lg,
:root[data-tuntunan="umum"]         .beranda-utama > .beranda-card-lg {
  width: 100%; max-width: 520px; margin-inline: auto;
}

.tuntunan-intro {
  font-size: 0.82rem; color: var(--text-secondary); line-height: 1.6;
  margin: 0 0 0.9rem; text-align: center;
}
.tuntunan-opt-emoji { font-size: 1.5rem; flex-shrink: 0; width: 34px; text-align: center; }

.tuntunan-intro-aksi { display: flex; gap: 0.5rem; margin-top: 0.8rem; }
.tuntunan-intro-btn {
  flex: 1; padding: 0.55rem 0.8rem;
  border-radius: var(--radius-sm); border: 1.5px solid var(--border-color);
  background: var(--bg-solid); color: var(--text-primary);
  font-family: var(--font-body); font-size: 0.8rem; font-weight: 700;
  cursor: pointer; transition: var(--transition-fast);
}
.tuntunan-intro-btn:hover { border-color: var(--accent-primary); }
/* --feature-bg, bukan --accent-primary: teks putih di atas hijau muda tema
   gelap cuma ~2:1. */
.tuntunan-intro-btn.utama {
  background: var(--feature-bg); color: var(--feature-text); border-color: transparent;
}

/* ============================================
   JODOH / KECOCOKAN — kartu solid
   ============================================ */
.jodoh-intro-card {
  background: var(--bg-solid);
  border: 1px solid var(--border-color); box-shadow: var(--shadow-sm);
  margin: 1rem 0.8rem 0; border-radius: var(--radius-lg); padding: 1rem 1.2rem;
  font-size: 0.85rem; color: var(--text-secondary); line-height: 1.65; font-weight: 500;
}
.jodoh-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.8rem; align-items: start; }
.jodoh-person { text-align: center; }
.jodoh-person-icon { font-size: 2rem; margin-bottom: 0.3rem; }
.jodoh-person-label { font-size: 0.78rem; font-weight: 700; color: var(--text-secondary); margin-bottom: 0.8rem; }
.jodoh-vs { font-size: 1.5rem; padding-top: 2.5rem; display: flex; align-items: flex-start; justify-content: center; }
.weton-mini-display { margin-top: 0.5rem; text-align: center; }
.weton-mini-badge {
  display: inline-block;
  background: var(--feature-bg);
  color: var(--feature-text); padding: 0.3rem 0.8rem; border-radius: var(--radius-pill);
  font-size: 0.78rem; font-weight: 700; margin-bottom: 0.2rem;
}
.neptu-mini { display: block; font-size: 0.72rem; color: var(--gold-text); font-weight: 700; }
.jodoh-result-card {
  background: var(--bg-solid);
  margin: 1rem 0.8rem;
  border-radius: var(--radius-xl); padding: 1.8rem 1.5rem; text-align: center;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-md); animation: cardIn 0.4s ease;
}
.jodoh-result-top { margin-bottom: 1.2rem; }
.jodoh-couple-display {
  display: flex; align-items: center; justify-content: center;
  gap: 0.6rem; margin-bottom: 0.6rem; flex-wrap: wrap;
}
.couple-weton {
  background: var(--feature-bg);
  color: var(--feature-text); padding: 0.5rem 1rem; border-radius: var(--radius-pill);
  font-size: 0.88rem; font-weight: 700;
}
.couple-heart { font-size: 1.3rem; color: var(--accent-gold); }
.jodoh-neptu-total { font-size: 0.82rem; color: var(--text-muted); font-weight: 600; }
.jodoh-neptu-total strong { color: var(--gold-text); font-size: 1.05rem; }
.jodoh-badge { font-size: 3.5rem; margin: 0.5rem 0; animation: floatPulse 3s ease infinite; }
@keyframes floatPulse {
  0%, 100% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.06) translateY(-4px); }
}
.jodoh-result-name { font-size: 1.35rem; font-weight: 800; margin-bottom: 0.5rem; letter-spacing: -0.3px; }
.jodoh-result-desc {
  font-size: 0.88rem; color: var(--text-secondary); line-height: 1.65;
  padding: 0.85rem; background: var(--accent-soft);
  border-radius: var(--radius-md); font-weight: 500;
}
.jodoh-disclaimer {
  background: color-mix(in srgb, var(--accent-gold) 8%, var(--bg-solid));
  border: 1px solid color-mix(in srgb, var(--accent-gold) 30%, transparent);
  margin: 0 0.8rem; border-radius: var(--radius-lg); padding: 1rem;
  font-size: 0.8rem; color: var(--text-secondary); line-height: 1.6; font-weight: 500;
}

/* ============================================
   TASBIH DIGITAL — Glass
   ============================================ */
.tasbih-container { padding: 0.8rem; }
.tasbih-dzikir-selector { margin-bottom: 1rem; }
.dzikir-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.5rem; }
.dzikir-btn {
  background: var(--bg-solid);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-lg); padding: 0.65rem 0.5rem;
  cursor: pointer; transition: var(--transition); text-align: center;
  font-family: var(--font-body);
}
.dzikir-btn:hover { border-color: var(--accent-primary); transform: translateY(-1px); }
.dzikir-btn.active {
  border-color: var(--accent-primary);
  background: var(--tab-active-bg);
  box-shadow: var(--shadow-sm);
}
.dzikir-btn-arabic { font-family: var(--font-arabic); font-size: 1.25rem; color: var(--text-arabic); display: block; margin-bottom: 0.15rem; }
.dzikir-btn-label { font-size: 0.7rem; color: var(--text-secondary); font-weight: 600; }
/* Kartu bacaan dzikir aktif — permukaan gelap solid yang sama dengan hero
   Beranda (--hero-bg), jadi teksnya memakai token --hero-*. */
.tasbih-current-card {
  background: var(--hero-bg);
  border-radius: var(--radius-xl); padding: 1.5rem; text-align: center;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-md);
  position: relative; overflow: hidden;
}
.tasbih-arabic { font-family: var(--font-arabic); font-size: 2.2rem; color: var(--hero-text); line-height: 1.7; margin-bottom: 0.3rem; direction: rtl; position: relative; }
.tasbih-latin { font-size: 0.92rem; color: var(--hero-accent); font-style: italic; margin-bottom: 0.2rem; position: relative; }
.tasbih-meaning { font-size: 0.8rem; color: var(--hero-text-muted); position: relative; }
.tasbih-counter-area { display: flex; justify-content: center; margin-bottom: 1rem; position: relative; }
.progress-ring-svg { width: 150px; height: 150px; transform: rotate(-90deg); }
.progress-ring-bg { fill: none; stroke: var(--border-color); stroke-width: 7; }
.progress-ring-fill {
  fill: none; stroke: var(--accent-gold); stroke-width: 7;
  stroke-linecap: round; transition: stroke-dashoffset 0.3s ease;
}
.tasbih-count-display {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;
}
/* Emas dicampur 20% --text-primary: kontras >= 3:1 (teks besar) di tema terang */
.tasbih-count { font-size: 2.8rem; font-weight: 800; color: color-mix(in srgb, var(--accent-gold) 80%, var(--text-primary)); line-height: 1; font-variant-numeric: tabular-nums; }
.tasbih-target-label { font-size: 0.82rem; color: var(--text-muted); font-weight: 600; }
/* Tombol hitung tasbih — besar (min. 64px) karena ditekan berulang-ulang */
.btn-tasbih {
  width: 100%; min-height: 64px; padding: 1.1rem;
  background: var(--feature-bg);
  color: var(--feature-text); border: none; border-radius: var(--radius-pill);
  font-size: 1.05rem; font-weight: 700; font-family: var(--font-body);
  cursor: pointer; transition: var(--transition-fast);
  box-shadow: var(--shadow-md);
  margin-bottom: 1rem; letter-spacing: 0.2px;
  position: relative; overflow: hidden;
}
.btn-tasbih:active { transform: scale(0.96); box-shadow: var(--shadow-sm); }
.btn-tasbih.tapped { animation: tapPulse 0.2s ease; }
@keyframes tapPulse { 0% { transform: scale(1); } 50% { transform: scale(0.95); } 100% { transform: scale(1); } }
.tasbih-controls { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1rem; }
.tasbih-ctrl-group { flex: 1; }
.tasbih-target-btns { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.4rem; }
.target-btn {
  min-height: 44px; padding: 0.4rem 0.9rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  background: var(--bg-solid);
  color: var(--text-secondary);
  font-size: 0.78rem; font-weight: 700; font-family: var(--font-body);
  cursor: pointer; transition: var(--transition);
}
.target-btn.active {
  border-color: transparent;
  background: var(--feature-bg);
  color: var(--feature-text);
  box-shadow: var(--shadow-sm);
}
.btn-reset {
  min-height: 44px; padding: 0.55rem 1.1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  background: var(--bg-solid);
  color: var(--text-secondary);
  font-size: 0.82rem; font-weight: 700; font-family: var(--font-body);
  cursor: pointer; transition: var(--transition);
}
.btn-reset:hover { border-color: var(--accent-red); color: var(--accent-red); }
.tasbih-session {
  background: var(--bg-solid);
  border-radius: var(--radius-lg); padding: 1rem;
  display: flex; gap: 1rem;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
}
.tasbih-session-item { flex: 1; text-align: center; }
.tasbih-session-item span { font-size: 0.75rem; color: var(--text-muted); display: block; margin-bottom: 0.3rem; font-weight: 600; }
.tasbih-session-item strong { font-size: 1.35rem; color: var(--accent-primary); font-weight: 800; }

/* ============================================
   CARA WUDU & SHOLAT — Glass Step Cards
   ============================================ */
.ibadah-container { padding: 0 0 1rem; }

.step-card {
  margin: 0.6rem 0.8rem;
  background: var(--bg-solid);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  overflow: hidden; transition: border-color 0.2s ease;
}
.step-card:hover { border-color: var(--glass-border-2); }

.step-header {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 1rem 1.2rem; cursor: pointer; user-select: none;
}
.step-number {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: var(--feature-bg);
  color: var(--feature-text); display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.step-icon { font-size: 1.5rem; flex-shrink: 0; }
.step-title-wrap { flex: 1; }
.step-title {
  font-size: 0.92rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.1rem;
}
.step-subtitle { font-size: 0.74rem; color: var(--text-muted); font-weight: 500; }
.step-hukum-badge {
  display: inline-block; margin-top: 0.35rem;
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.3px; text-transform: uppercase;
  padding: 0.15rem 0.55rem; border-radius: 999px;
}
.step-hukum-badge.rukun {
  background: color-mix(in srgb, var(--accent-gold) 18%, transparent);
  color: var(--accent-gold); border: 1px solid color-mix(in srgb, var(--accent-gold) 35%, transparent);
}
.step-hukum-badge.sunnah {
  background: var(--accent-soft); color: var(--accent-primary); border: 1px solid var(--glass-border);
}
.step-card.hafal { border-color: var(--accent-primary); }
.step-chevron {
  font-size: 0.75rem; color: var(--text-muted);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); flex-shrink: 0;
}
.step-card.open .step-chevron { transform: rotate(180deg); }

.step-body {
  display: none; padding: 0 1.2rem 1.2rem;
  border-top: 1px solid var(--border-color);
}
.step-card.open .step-body { display: block; }

.step-arabic-row {
  display: flex; align-items: center; gap: 0.6rem; margin: 1rem 0 0.5rem;
}
.step-arabic-row .step-arabic { margin: 0; flex: 1; }
.step-arabic-row .step-audio-btn { flex-shrink: 0; }
.step-arabic {
  font-family: var(--font-arabic);
  font-size: 1.85rem; color: var(--text-arabic);
  text-align: right; direction: rtl;
  line-height: 2.0; margin: 1rem 0 0.5rem;
}
.step-latin {
  font-size: 0.92rem; font-style: italic;
  color: var(--text-latin);
  line-height: 1.7; margin-bottom: 0.4rem; font-weight: 500;
}
.step-translation {
  font-size: 0.85rem; color: var(--text-translation);
  line-height: 1.75; padding-top: 0.5rem;
  border-top: 1px solid var(--border-color); font-weight: 500;
}
.step-note {
  margin-top: 0.8rem; padding: 0.7rem 0.9rem;
  background: var(--accent-soft);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-sm);
  font-size: 0.8rem; color: var(--text-secondary); line-height: 1.6; font-weight: 500;
  border-left: 3px solid var(--accent-primary);
}
.step-hafal-btn { margin-top: 0.8rem; margin-bottom: 0; }

/* Ringkasan progres "Belajar Sholat" — self-tracking lokal per device */
.belajar-progres-summary {
  margin: 0.6rem 0.8rem 1rem; padding: 0.9rem 1rem;
  background: var(--bg-solid);
  border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
}
.belajar-progres-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.82rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.5rem;
}
.belajar-progres-bar {
  height: 8px; border-radius: 999px; background: var(--accent-soft); overflow: hidden;
}
.belajar-progres-fill {
  height: 100%; border-radius: 999px; min-width: 2%;
  background: var(--accent-primary);
  transition: width 0.4s ease;
}

/* Sholat selector */
.sholat-selector {
  padding: 0.8rem; display: flex; gap: 0.45rem; flex-wrap: wrap;
  background: var(--bg-app);
  border-bottom: 1px solid var(--border-color);
}
.sholat-sel-btn {
  min-height: 44px; padding: 0.5rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  background: var(--bg-solid);
  color: var(--text-secondary);
  font-size: 0.78rem; font-weight: 700; font-family: var(--font-body);
  cursor: pointer; transition: var(--transition);
}
.sholat-sel-btn.active {
  border-color: transparent;
  background: var(--feature-bg);
  color: var(--feature-text);
  box-shadow: var(--shadow-sm);
}

.sholat-info-banner {
  margin: 0.8rem 0.8rem 0;
  background: var(--feature-bg);
  border-radius: var(--radius-lg); padding: 1rem; color: var(--feature-text);
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem; text-align: center;
  position: relative; overflow: hidden;
}
.sholat-info-item { position: relative; }
.sholat-info-item span { font-size: 0.72rem; opacity: 0.9; display: block; margin-bottom: 0.1rem; font-weight: 600; }
.sholat-info-item strong { font-size: 1.05rem; font-weight: 800; }

/* ============================================
   QR CODE — Glass
   ============================================ */
.qr-container { padding: 0.8rem; }
.qr-info-card {
  background: var(--bg-solid);
border-radius: var(--radius-md); padding: 1rem 1.2rem; margin-bottom: 1rem;
  border: 1px solid var(--border-color);
}
.qr-info-text { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.7; font-weight: 500; }
.qr-url-group { margin-bottom: 1rem; }
.qr-url-row { display: flex; gap: 0.5rem; }
.qr-url-row .form-input { flex: 1; }
.btn-qr {
  min-height: 48px; padding: 0.75rem 1.1rem;
  background: var(--feature-bg);
  color: var(--feature-text); border: none; border-radius: var(--radius-pill);
  font-size: 0.88rem; font-weight: 700;
  font-family: var(--font-body); cursor: pointer;
  transition: var(--transition-fast); white-space: nowrap;
  box-shadow: var(--shadow-sm);
}
.btn-qr:hover { box-shadow: var(--shadow-md); filter: brightness(1.08); }
.qr-display {
  background: var(--bg-solid);
border-radius: var(--radius-xl);
  padding: 2rem; text-align: center; margin-bottom: 1rem;
  border: 1px solid var(--border-color);
  box-shadow: var(--glass-shadow);
}
#qr-code-box {
  display: inline-block; padding: 1rem; background: white;
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm); margin-bottom: 0.8rem;
}
.qr-label { font-size: 0.82rem; color: var(--text-muted); font-weight: 600; }
.qr-actions { margin-bottom: 1.2rem; }
.qr-tips {
  background: var(--bg-solid);
border-radius: var(--radius-md); padding: 1.2rem;
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--accent-gold);
}
.qr-tips h4 { font-size: 0.88rem; font-weight: 700; color: var(--accent-gold); margin-bottom: 0.8rem; }
.qr-tips ul { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.qr-tips li {
  font-size: 0.82rem; color: var(--text-secondary); padding-left: 1.2rem;
  position: relative; line-height: 1.5; font-weight: 500;
}
.qr-tips li::before { content: '✓'; position: absolute; left: 0; color: var(--accent-primary); font-weight: 800; }

/* ============================================
   PENCAPAIAN — Lencana/Achievement
   ============================================ */
.pencapaian-summary {
  text-align: center; font-size: 0.85rem; font-weight: 700;
  color: var(--accent-primary); margin: 0 1rem 1rem;
}
.achievement-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0.7rem; margin: 0 1rem 1.5rem;
}
@media (min-width: 600px) { .achievement-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .achievement-grid { grid-template-columns: repeat(4, 1fr); } }
.achievement-card {
  background: var(--bg-solid);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1rem 0.8rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
transition: var(--transition-fast);
}
.achievement-card.unlocked {
  border-color: var(--accent-gold);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent-gold) 15%, transparent);
}
.achievement-card.locked { opacity: 0.5; }
.achievement-icon { font-size: 2.2rem; margin-bottom: 0.4rem; }
.achievement-label { font-size: 0.82rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.25rem; }
.achievement-desc { font-size: 0.72rem; color: var(--text-muted); line-height: 1.4; }

.achievement-toast {
  position: fixed; top: 1rem; left: 50%; transform: translateX(-50%) translateY(-20px);
  width: calc(100% - 2rem); max-width: 420px;
  background: var(--hero-bg);
  border: 1px solid var(--hero-glass-border);
  border-radius: var(--radius-lg);
  padding: 0.9rem 1.1rem; z-index: 9999;
  display: flex; align-items: center; gap: 0.8rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
  animation: achievementToastIn 0.4s cubic-bezier(0.4,0,0.2,1) forwards;
}
.achievement-toast-out { animation: achievementToastOut 0.4s ease forwards; }
.achievement-toast-icon { font-size: 2rem; flex-shrink: 0; }
.achievement-toast-label { font-size: 0.72rem; font-weight: 700; color: var(--hero-accent); text-transform: uppercase; letter-spacing: 0.5px; }
.achievement-toast-title { font-size: 0.95rem; font-weight: 800; color: #fff; }
@keyframes achievementToastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-20px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes achievementToastOut {
  from { opacity: 1; transform: translateX(-50%) translateY(0); }
  to   { opacity: 0; transform: translateX(-50%) translateY(-20px); }
}

/* ============================================
   SCROLL TOP & FOOTER
   ============================================ */
.scroll-top-btn-wrap { text-align: center; padding: 1.5rem 0.8rem; }
.scroll-top-btn {
  background: var(--bg-solid);
  border: 1px solid var(--border-color);
  min-height: 44px;
  color: var(--accent-primary); padding: 0.6rem 1.5rem; border-radius: var(--radius-pill);
  font-size: 0.82rem; font-weight: 700; font-family: var(--font-body);
  cursor: pointer; transition: var(--transition);
}
.scroll-top-btn:hover {
  background: var(--feature-bg);
  color: var(--feature-text); border-color: transparent;
  box-shadow: var(--shadow-sm);
}

/* Footer adalah elemen paling bawah di mobile (menu bawah = position:fixed,
   tidak ikut alur dokumen) — padding-bottom di sini yang menjaga footer
   (termasuk link credit) tidak ketutup .tab-bar setinggi ~76px. Reset
   ke 0 otomatis lewat .app-footer{display:none} di layout desktop. */
.app-footer {
  text-align: center; padding: 1.8rem 1rem calc(76px + 2.5rem);
  background: var(--nav-bg);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.footer-doa { font-family: var(--font-arabic); font-size: 1.3rem; color: var(--hero-accent); margin-bottom: 0.3rem; }
.footer-doa-latin { font-size: 0.78rem; color: rgba(255, 255, 255, 0.35); margin-bottom: 0.3rem; }
.footer-divider { height: 1px; background: rgba(255, 255, 255, 0.06); margin: 0.8rem 2rem; }
.footer-credit { font-size: 0.8rem; color: rgba(255, 255, 255, 0.35); }
.footer-credit a { color: var(--hero-accent); text-decoration: none; font-weight: 700; }
.footer-credit a:hover { color: #e8d080; }

/* =========================================
   SOCIAL FOLLOW — "Ikuti Kami"
   Warna brand sengaja hardcoded (bukan var tema) — sama seperti
   .btn-wa-channel: identitas platform pihak ketiga, bukan warna app.
   ========================================= */
.social-follow {
  display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
}
.social-follow-label {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.3px;
  color: var(--text-muted);
}
.social-follow-links {
  display: flex; align-items: center; justify-content: center; gap: 0.75rem;
}
.social-follow-link {
  display: flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; border-radius: 50%; flex-shrink: 0;
  color: #fff; text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.social-follow-link svg { width: 24px; height: 24px; fill: currentColor; }
.social-follow-link:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.social-follow-link.sf-instagram {
  background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}
.social-follow-link.sf-facebook { background: #1877f2; }
.social-follow-link.sf-threads { background: #000; }
/* Instagram sengaja tetap bergradien: itu warna logo merek, bukan dekorasi. */
.social-follow-link.sf-whatsapp { background: var(--wa-bg); }

@media (max-width: 380px) {
  .social-follow-link { width: 52px; height: 52px; }
  .social-follow-link svg { width: 21px; height: 21px; }
  .social-follow-links { gap: 0.55rem; }
}

/* ============================================
   FONT SIZE MODAL — Glass
   ============================================ */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 500;
  display: flex; align-items: flex-end; justify-content: center;
  animation: overlayIn 0.25s ease;
  backdrop-filter: blur(4px);
}
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
.modal-content {
  background: var(--bg-solid);
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  border: 1px solid var(--border-color); border-bottom: none;
  padding: 1.5rem; width: 100%; max-width: 520px;
  animation: modalUp 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes modalUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.modal-handle { width: 40px; height: 4px; background: var(--border-color); border-radius: 2px; margin: 0 auto 1.2rem; }
.modal-title { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin-bottom: 1rem; text-align: center; }
.font-size-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; }
.font-opt-btn {
  padding: 0.8rem 0.4rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-solid);
  color: var(--text-primary);
  font-family: var(--font-body); font-weight: 600; cursor: pointer;
  transition: var(--transition); text-align: center;
}
.font-opt-btn:hover { border-color: var(--accent-primary); }
.font-opt-btn.active {
  border-color: var(--accent-primary);
  background: var(--feature-bg);
  color: white;
}
.font-opt-btn .preview-arabic { font-family: var(--font-arabic); display: block; margin-bottom: 0.3rem; }
.font-opt-btn span:last-child { font-size: 0.72rem; }

/* ============================================
   THEME PICKER MODAL — pilih tema warna
   ============================================ */
.theme-options { display: flex; flex-direction: column; gap: 0.6rem; }
.theme-opt-btn {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-solid);
  color: var(--text-primary);
  font-family: var(--font-body); font-weight: 600; font-size: 0.92rem;
  cursor: pointer; transition: var(--transition); text-align: left;
  width: 100%;
}
.theme-opt-btn:hover { border-color: var(--accent-primary); }
.theme-opt-btn.active {
  border-color: var(--accent-primary);
  background: var(--accent-soft);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.theme-opt-swatch {
  display: flex; gap: 4px; flex-shrink: 0;
  padding: 5px; border-radius: 10px;
  border: 1px solid var(--border-color);
}
.theme-opt-swatch span {
  width: 16px; height: 16px; border-radius: 50%;
  display: inline-block; border: 1px solid rgba(0,0,0,0.12);
}
.theme-opt-name { flex: 1; }
.theme-opt-desc { display: block; font-size: 0.72rem; font-weight: 400; color: var(--text-muted); margin-top: 0.1rem; }
.theme-opt-check { color: var(--accent-primary); font-size: 1.05rem; flex-shrink: 0; }

/* ============================================
   COMING SOON — Glass
   ============================================ */
.coming-soon-container {
  text-align: center; padding: 3rem 1rem;
  background: var(--bg-solid);
border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  margin-top: 1.2rem;
}

/* ============================================
   ABOUT PAGE — Glass
   ============================================ */
.about-container {
  padding: 2rem 1.5rem;
  background: var(--bg-solid);
border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  margin-top: 1.2rem; text-align: center;
}

/* =========================================
   FORM INPUTS (used in membership modal)
   ========================================= */
.form-group { margin-bottom: 1rem; }
.form-label {
  display: block; font-size: 0.78rem; font-weight: 700;
  color: var(--text-muted); text-transform: uppercase;
  letter-spacing: 0.5px; margin-bottom: 0.5rem;
}
/* Rule .form-input kedua ini datang belakangan di file dan menimpa rule di
   bagian FORM ELEMENTS — jadi ikut dibuat solid + min. 48px. */
.form-input {
  width: 100%; min-height: 48px; padding: 0.75rem 1rem;
  background: var(--bg-solid);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: 0.92rem;
  color: var(--text-primary); outline: none;
  transition: var(--transition); box-sizing: border-box;
}
.form-input:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 12%, transparent);
}
.form-input::placeholder { color: var(--text-muted); }
.form-input[readonly] { opacity: 0.7; cursor: not-allowed; }

/* =========================================
   WA CHANNEL BANNER
   ========================================= */
.wa-channel-banner {
  display: flex; align-items: center; gap: 0.8rem;
  background: color-mix(in srgb, var(--wa-bg) 8%, var(--bg-solid));
  border: 1px solid color-mix(in srgb, var(--wa-bg) 30%, transparent);
  border-radius: var(--radius-lg); padding: 0.9rem 1rem;
}
.wa-channel-icon { font-size: 1.5rem; flex-shrink: 0; }
.wa-channel-text { flex: 1; }
.wa-channel-text strong {
  display: block; font-size: 0.88rem; font-weight: 700;
  color: var(--text-primary); margin-bottom: 0.15rem;
}
.wa-channel-text span { font-size: 0.75rem; color: var(--text-muted); }
.btn-wa-channel {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0.5rem 1rem; border-radius: var(--radius-pill);
  background: var(--wa-bg);
  color: var(--feature-text); font-weight: 700; font-size: 0.8rem;
  text-decoration: none; flex-shrink: 0; white-space: nowrap;
  transition: var(--transition-fast);
  box-shadow: var(--shadow-sm);
}
.btn-wa-channel:hover { box-shadow: var(--shadow-md); filter: brightness(1.08); }

/* ============================================
   RESPONSIVE — Mobile (kecil)
   ============================================ */
@media (max-width: 380px) {
  .jodoh-row { grid-template-columns: 1fr; }
  .jodoh-vs { padding-top: 0; }
}

/* Tablet center */
@media (min-width: 600px) and (max-width: 899px) {
  .app {
    box-shadow: 0 0 100px color-mix(in srgb, var(--accent-primary) 8%, transparent);
    border-left: 1px solid color-mix(in srgb, var(--accent-primary) 5%, transparent);
    border-right: 1px solid color-mix(in srgb, var(--accent-primary) 5%, transparent);
  }
}

/* ============================================
   DESKTOP LAYOUT ≥ 900px — Sidebar Navigation
   ============================================ */
@media (min-width: 900px) {
  html, body { height: 100%; overflow: hidden; }

  /* body tetap memakai --bg-app; .content-area kini transparan */

  /* App becomes full-screen grid */
  /* Full lebar layar di laptop/monitor (dulu dibatasi 1400px dan
     menyisakan ruang kosong di kiri-kanan). */
  .app {
    max-width: none;
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 240px 1fr;
    grid-template-rows: 58px 1fr;
    overflow: hidden;
    transition: grid-template-columns 0.25s ease;
  }
  .app.sidebar-collapsed { grid-template-columns: 76px 1fr; }

  /* Tombol kecilkan/lebarkan sidebar — style ikut .icon-btn (sama seperti
     tombol lain di navbar), cuma relevan di layout sidebar desktop */
  #btn-sidebar-toggle {
    display: flex; width: 34px; height: 34px;
    align-items: center; justify-content: center;
    font-size: 0.95rem; padding: 0; flex-shrink: 0;
  }
  .sidebar-toggle-btn:active { transform: scale(0.92); }
  .app.sidebar-collapsed .sidebar-toggle-btn { transform: rotate(180deg); }
  .app.sidebar-collapsed .sidebar-toggle-btn:active { transform: rotate(180deg) scale(0.92); }

  /* Navbar spans full width */
  .navbar {
    grid-column: 1 / -1;
    grid-row: 1;
    position: relative;
    top: 0;
    z-index: 100;
    height: 58px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }

  /* Tab bar becomes sidebar */
  .tab-bar {
    grid-column: 1;
    grid-row: 2;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    max-width: none; margin: 0;
    border-top: none;
    z-index: 50;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem 0.7rem;
    gap: 0.25rem;
    border-right: 1px solid var(--border-color);
    border-bottom: none;
    border-radius: 0; box-shadow: none;
    background: var(--nav-bg);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    /* Sidebar vertikal, tidak scroll horizontal — hilangkan fade edge kanan */
    -webkit-mask-image: none;
    mask-image: none;
    /* Extra items at bottom */
    display: flex;
    flex-direction: column;
  }

  /* Tab buttons: horizontal row style → vertical sidebar style */
  .tab-btn {
    flex: none;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 0.55rem 0.8rem;
    gap: 0.6rem;
    font-size: 0.88rem;
    min-width: auto; max-width: none;
    border-radius: var(--radius-pill);
    text-align: left;
    color: rgba(255,255,255,0.55);
    position: relative;
  }
  .tab-btn::after { display: none; } /* remove mobile active indicator */
  .tab-btn:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.85); }
  .tab-btn:hover .tab-icon { background: none; }
  /* Item aktif = pil solid bergradien (sama dengan kartu sorotan Beranda) */
  .tab-btn.active {
    background: var(--feature-bg) !important;
    color: var(--feature-text) !important;
    box-shadow: var(--shadow-sm);
  }
  .tab-btn.active .tab-icon { background: none; }
  .tab-icon { font-size: 1.25rem; flex-shrink: 0; padding: 0.2rem; }
  .tab-label { font-size: 0.88rem; font-weight: 600; }

  /* Sidebar extras */
  .sidebar-divider {
    height: 1px;
    background: rgba(255,255,255,0.06);
    margin: 0.5rem 0;
  }
  .sidebar-bottom {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255,255,255,0.06);
  }
  .sidebar-link {
    display: flex; align-items: center; gap: 0.8rem;
    padding: 0.7rem 1rem; border-radius: var(--radius-md);
    color: rgba(255,255,255,0.4); font-size: 0.82rem; font-weight: 600;
    text-decoration: none; transition: var(--transition);
    font-family: var(--font-body); background: none; border: none; cursor: pointer;
    width: 100%;
  }
  .sidebar-link:hover { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.7); }
  .sidebar-link .sl-icon { font-size: 1rem; flex-shrink: 0; }
  .sidebar-member-badge {
    background: color-mix(in srgb, var(--accent-gold) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent-gold) 20%, transparent);
    color: var(--hero-accent); font-size: 0.72rem; font-weight: 700;
    padding: 0.15rem 0.5rem; border-radius: 20px; margin-left: auto;
  }

  /* Sidebar dikecilkan — sembunyikan label teks, sisakan ikon di tengah.
     Tooltip native (atribut title) tetap kasih tahu nama menunya. */
  .sidebar-collapsed .tab-label,
  .sidebar-collapsed .sidebar-link span:not(.sl-icon),
  .sidebar-collapsed .sidebar-member-badge,
  .sidebar-collapsed .brand-texts {
    display: none;
  }
  .sidebar-collapsed .tab-btn,
  .sidebar-collapsed .sidebar-link {
    justify-content: center; padding: 0.8rem 0.5rem;
  }
  .sidebar-collapsed .tab-btn { border-radius: var(--radius-md); }

  /* Content area (tanpa menu bawah — reset ruang bawah mobile) */
  .content-area {
    grid-column: 2;
    grid-row: 2;
    overflow-y: auto;
    height: 100%;
    /* Transparan supaya ornamen latar (body::before) terlihat di semua tab */
    background: none;
    padding-bottom: 0;
  }

  /* Di layout ini .content-area sendiri yang scroll (bukan window), dan
     navbar sudah jadi baris grid terpisah di atasnya — jadi progress bar
     baca cukup nempel di puncak .content-area, tidak perlu offset tinggi
     navbar seperti di mobile. */
  .reading-progress-wrap { top: 0; }

  /* Page padding (no more bottom nav to avoid) */
  .page { padding-bottom: 2rem; }

  /* Wider content cards */
  .verse-block { margin: 0.4rem 1.2rem; }
  .glass-card, .calc-card { margin: 1rem 1.2rem; }
  .jadwal-grid { padding: 0 1.2rem; }
  .weton-result-card, .jodoh-result-card { margin: 0 1.2rem 1rem; }
  .asmaul-grid { grid-template-columns: repeat(4, 1fr); }

  /* Sub-tab bar wider - restore flex stretch on desktop */
  .sub-tab-bar {
    padding: 0.8rem 1.5rem;
    gap: 0.5rem;
    overflow-x: visible;
    /* Semua tab muat tanpa scroll di lebar ini — hilangkan fade edge */
    -webkit-mask-image: none;
    mask-image: none;
  }
  .sub-tab-btn {
    flex: 1;
    font-size: 0.82rem;
  }

  /* Wider page header */
  .page-header { padding: 2.5rem 2rem 2rem; }

  /* Lebar kolom bacaan dibatasi 680px (~75 karakter Latin per baris —
     pedoman keterbacaan teks panjang). Panel toggle ikut lebar yang sama. */
  .reading-content .verse-block { max-width: 680px; margin: 0.5rem auto; }
  .display-controls,
  #page-bacaan .sub-page > .disclaimer-card { max-width: 680px; margin-left: auto; margin-right: auto; }

  /* Quran cards */
  .quran-chapters-grid { grid-template-columns: repeat(2, 1fr); }

  /* Membership modal wider */
  .membership-modal-sheet { max-width: 640px; }

  /* Footer — sembunyikan di layout sidebar desktop. .app-footer adalah
     sibling dari .content-area di dalam grid .app, tanpa grid-row/column
     eksplisit ia dibuat jadi baris implisit baru yang mencuri tinggi dari
     baris konten (1fr) dan membocorkan celah putih di bawah layar. Branding
     sudah ada di navbar atas, jadi footer ini aman disembunyikan. */
  .app-footer { display: none; }

  /* Sub-tab bar scroll nicely */
  .sub-tab-bar::-webkit-scrollbar { display: none; }

  /* Roadmap grid */
  .roadmap-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }

  /* User features grid */
  .user-features-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.4rem; }
}

@media (min-width: 1200px) {
  .app { grid-template-columns: 260px 1fr; }
  .asmaul-grid { grid-template-columns: repeat(5, 1fr); }
  .quran-chapters-grid { grid-template-columns: repeat(3, 1fr); }
  .user-features-grid { grid-template-columns: repeat(3, 1fr); }
}


/* Scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }
::selection { background: color-mix(in srgb, var(--accent-primary) 20%, transparent); }

/* Utility animation */
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* ==============================================
   ASMAUL HUSNA — Premium Card Design
   ============================================== */

/* Search Bar */
.asmaul-search-wrap {
  padding: 0 1rem 0.5rem;
}
.asmaul-search-box {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--bg-solid);
  border: 1.5px solid var(--glass-border-2);
  border-radius: 50px;
  padding: 0 1rem;
  gap: 0.5rem;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}
.asmaul-search-box:focus-within {
  border-color: var(--accent-tertiary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 15%, transparent);
}
.asmaul-search-icon {
  font-size: 1rem;
  flex-shrink: 0;
  opacity: 0.6;
}
.asmaul-search-input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 0.75rem 0;
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--text-primary);
  outline: none;
}
.asmaul-search-input::placeholder { color: var(--text-muted); }
.asmaul-search-clear {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0.2rem 0.3rem;
  border-radius: 50%;
  line-height: 1;
  transition: var(--transition-fast);
}
.asmaul-search-clear:hover { background: var(--accent-soft); color: var(--accent-primary); }

/* Mode Toggle */
.asmaul-mode-bar {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  justify-content: flex-end;
}
.asmaul-mode-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.9rem;
  border-radius: 20px;
  border: 1.5px solid var(--border-color);
  background: var(--bg-solid);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}
.asmaul-mode-btn.active {
  background: var(--feature-bg);
  border-color: var(--accent-primary);
  color: var(--feature-text);
  box-shadow: 0 3px 12px color-mix(in srgb, var(--accent-primary) 30%, transparent);
}

/* Stats Banner */
.asmaul-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0.5rem 1rem 1rem;
  background: var(--bg-solid);
  border: 1px solid var(--glass-border-2);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  box-shadow: var(--shadow-sm);
}
.asmaul-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  gap: 0.2rem;
}
.asmaul-stat-num {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--accent-primary);
  line-height: 1;
}
.asmaul-stat-label {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.asmaul-stat-divider {
  width: 1px;
  height: 36px;
  background: var(--border-color);
}

/* GRID MODE */
.asmaul-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  padding: 0 0.75rem 1rem;
}
.asmaul-card {
  background: var(--bg-solid);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: var(--transition);
  animation: asmaulFadeIn 0.4s ease both;
  cursor: default;
}
.asmaul-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--glass-border-2);
}
.asmaul-card.hafal {
  border-color: color-mix(in srgb, var(--accent-primary) 50%, transparent);
  background: var(--accent-soft);
}
.asmaul-card-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 0.75rem 0.85rem;
  gap: 0.5rem;
  text-align: center;
}
.asmaul-badge {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}
.asmaul-no {
  color: #fff;
  font-weight: 800;
  font-size: 0.8rem;
}
.asmaul-arab {
  font-family: var(--font-arabic);
  font-size: 1.55rem;
  color: var(--text-arabic);
  line-height: 1.4;
  font-weight: 700;
}
.asmaul-latin {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent-secondary);
  letter-spacing: 0.02em;
}
.asmaul-arti {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.5;
  text-align: center;
}
.asmaul-hafal-btn {
  margin-top: 0.3rem;
  padding: 0.35rem 0.9rem;
  border-radius: 20px;
  border: 1.5px solid var(--border-color);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
.asmaul-hafal-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent-tertiary);
  color: var(--accent-primary);
}
.asmaul-hafal-btn.active {
  background: var(--feature-bg);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--accent-primary) 35%, transparent);
}
.asmaul-actions { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.3rem; }
.asmaul-actions .asmaul-hafal-btn { margin-top: 0; }
.asmaul-bookmark-btn {
  width: 30px; height: 30px; padding: 0; flex-shrink: 0;
  border-radius: 50%; border: 1.5px solid var(--border-color);
  background: transparent; color: var(--text-muted); font-size: 0.9rem;
  cursor: pointer; transition: var(--transition);
  display: flex; align-items: center; justify-content: center;
}
.asmaul-bookmark-btn:hover { border-color: var(--accent-gold); color: var(--accent-gold); }
.asmaul-bookmark-btn.active {
  background: var(--accent-gold);
  border-color: transparent; color: #fff;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--accent-gold) 35%, transparent);
}

/* LIST MODE */
.asmaul-grid:has(.asmaul-card.list-mode) {
  grid-template-columns: 1fr;
}
.asmaul-card.list-mode {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
}
.asmaul-list-no {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 0.75rem;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}
.asmaul-list-info {
  flex: 1;
  min-width: 0;
}
.asmaul-list-arab {
  font-family: var(--font-arabic);
  font-size: 1.3rem;
  color: var(--text-arabic);
  font-weight: 700;
  line-height: 1.3;
}
.asmaul-list-latin {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent-secondary);
}
.asmaul-list-arti {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 0.1rem;
}
.asmaul-hafal-btn.list-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  padding: 0;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.asmaul-bookmark-btn.list-btn { width: 32px; height: 32px; font-size: 0.95rem; }

/* No result empty state */
.asmaul-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* Fade in animation */
@keyframes asmaulFadeIn {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* =========================================
   AL-QURAN — Theme-aware styles
   ========================================= */

/* Search box */
.quran-search-box {
  display: flex; align-items: center; gap: 0.6rem;
  background: var(--bg-solid);
  border: 1.5px solid var(--glass-border-2);
  border-radius: 50px; padding: 0.4rem 1rem;
  transition: var(--transition);
}
.quran-search-box:focus-within {
  border-color: var(--accent-tertiary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 15%, transparent);
}
.quran-search-box input {
  flex: 1; border: none; background: transparent;
  font-family: var(--font-body); font-size: 0.92rem;
  color: var(--text-primary); outline: none;
  padding: 0.4rem 0;
}
.quran-search-box input::placeholder { color: var(--text-muted); }

/* Chapters Grid */
.quran-chapters-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
}
.quran-chapter-card {
  background: var(--bg-solid);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 0.9rem 1.1rem;
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  transition: var(--transition);
}
.quran-chapter-card:hover {
  transform: translateY(-1px); box-shadow: var(--shadow-md);
  border-color: var(--glass-border-2);
}
.qcc-left { display: flex; align-items: center; gap: 0.8rem; }
.qcc-number {
  width: 38px; height: 38px;
  background: color-mix(in srgb, var(--accent-primary) 10%, transparent); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.85rem;
  color: var(--accent-primary); flex-shrink: 0;
}
.qcc-name { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.1rem; }
.qcc-sub { font-size: 0.75rem; color: var(--text-muted); }
.qcc-arabic { font-family: var(--font-arabic); font-size: 1.5rem; color: var(--accent-primary); }

/* Surah yang pernah dibuka — progress baca self-tracking */
.quran-chapter-card { position: relative; }
.quran-chapter-card.dibaca { border-color: var(--accent-primary); }
.quran-chapter-card.dibaca::after {
  content: '✓ Dibaca';
  position: absolute; top: 0.5rem; right: 0.5rem;
  font-size: 0.6rem; font-weight: 700; color: var(--accent-primary);
  background: var(--accent-soft); padding: 0.1rem 0.45rem; border-radius: 999px;
}
/* Pilihan daftar Per Surah / Per Juz */
.quran-mode-toggle {
  display: flex; gap: 0.3rem; padding: 0.25rem; margin-bottom: 0.7rem;
  background: var(--bg-solid); border: 1px solid var(--glass-border);
  border-radius: 999px;
}
.quran-mode-btn {
  flex: 1; padding: 0.5rem 0.8rem; border: none; cursor: pointer;
  border-radius: 999px; background: transparent;
  font-family: var(--font-body); font-size: 0.85rem; font-weight: 700;
  color: var(--text-secondary); transition: var(--transition-fast);
}
.quran-mode-btn.active { background: var(--feature-bg); color: var(--feature-text); box-shadow: var(--shadow-sm); }

/* Pembatas surah di dalam tampilan satu juz */
.quran-juz-surah-divider {
  margin: 1.2rem 0 0.7rem; padding: 0.7rem 1rem; text-align: center;
  background: var(--accent-soft); border: 1px solid var(--glass-border-2);
  border-radius: var(--radius-md);
}
.qjsd-nama {
  display: flex; justify-content: space-between; align-items: center; gap: 0.6rem;
  font-weight: 700; font-size: 0.95rem; color: var(--accent-primary);
}
.qjsd-arab { font-family: var(--font-arabic); font-size: 1.4rem; font-weight: 400; }
.quran-juz-surah-divider .quran-bismillah { color: var(--text-arabic); font-size: 1.5rem; margin-top: 0.6rem; }
.quran-juz-surah-divider .quran-bismillah-latin { margin-bottom: 0.2rem; }

.quran-progress-line {
  margin: 0 0 0.8rem; padding: 0.6rem 1rem;
  background: var(--accent-soft); border-radius: var(--radius-md);
  font-size: 0.8rem; font-weight: 700; color: var(--accent-primary);
  text-align: center;
}

/* Kartu Progress Khatam Al-Quran */
.khatam-progress-card {
  margin: 0 0 0.8rem; padding: 0.9rem 1.1rem;
  background: var(--bg-solid); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}
.khatam-progress-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.85rem; font-weight: 700; color: var(--text-primary);
  margin-bottom: 0.5rem;
}
.khatam-progress-persen { color: var(--accent-primary); font-weight: 800; }
.khatam-progress-bar {
  height: 8px; border-radius: 999px; background: var(--accent-soft);
  overflow: hidden; margin-bottom: 0.45rem;
}
.khatam-progress-fill {
  height: 100%; border-radius: 999px; min-width: 2%;
  background: var(--accent-primary);
  transition: width 0.4s ease;
}
.khatam-progress-sub {
  font-size: 0.72rem; color: var(--text-secondary); text-align: center;
  margin-bottom: 0.7rem;
}
.khatam-target-set, .khatam-target-info {
  display: flex; align-items: center; gap: 0.5rem;
  padding-top: 0.6rem; border-top: 1px dashed var(--border-color);
}
.khatam-target-set { flex-wrap: wrap; }
.khatam-target-input {
  flex: 1; min-width: 130px; padding: 0.5rem 0.7rem;
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
  background: var(--bg-card); color: var(--text-primary); font-size: 0.78rem;
  font-family: inherit;
}
.khatam-target-btn {
  padding: 0.5rem 0.9rem; border: none; border-radius: var(--radius-md);
  background: var(--feature-bg); color: var(--feature-text); font-size: 0.78rem;
  font-weight: 700; cursor: pointer; white-space: nowrap;
}
.khatam-target-info {
  justify-content: space-between;
}
.khatam-target-info span {
  font-size: 0.75rem; color: var(--text-secondary); line-height: 1.5;
}
.khatam-target-info span strong { color: var(--accent-primary); }
.khatam-target-ubah {
  padding: 0.35rem 0.7rem; border: 1px solid var(--border-color); border-radius: var(--radius-md);
  background: transparent; color: var(--text-secondary); font-size: 0.7rem;
  font-weight: 600; cursor: pointer; white-space: nowrap;
}

/* Surah Header */
.quran-surah-header {
  background: var(--feature-bg);
  border-radius: var(--radius-lg); padding: 1.8rem 1.2rem;
  text-align: center; color: white; margin-bottom: 1rem;
  position: relative; overflow: hidden;
}
.quran-surah-header::before {
  content: ''; position: absolute; inset: 0;
  background: none;
}
.quran-surah-arabic { font-family: var(--font-arabic); font-size: 2.2rem; margin: 0 0 0.3rem; position: relative; }
.quran-surah-name { font-size: 1.15rem; font-weight: 700; margin: 0 0 0.3rem; position: relative; }
.quran-surah-meta { font-size: 0.82rem; opacity: 0.85; margin: 0; position: relative; }
.quran-bismillah {
  font-family: var(--font-arabic); font-size: 1.8rem;
  margin-top: 1rem; position: relative; opacity: 0.9;
}

/* Verse Cards */
.quran-verse-card {
  background: var(--bg-solid);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.2rem; margin-bottom: 0.7rem;
  transition: var(--transition);
}
.quran-verse-card:hover { box-shadow: var(--shadow-md); border-color: var(--glass-border-2); }

.quran-verse-controls {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1rem;
}
.quran-verse-number {
  width: 34px; height: 34px;
  background: var(--feature-bg);
  color: white; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700; flex-shrink: 0;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--accent-primary) 25%, transparent);
}
.quran-audio-btn {
  padding: 0.5rem 1rem; border-radius: 20px;
  border: none; cursor: pointer; font-family: var(--font-body);
  font-size: 0.8rem; font-weight: 700;
  background: var(--feature-bg);
  color: white; transition: var(--transition);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--accent-primary) 20%, transparent);
}
.quran-audio-btn.playing {
  background: #d35400;
  box-shadow: 0 3px 10px rgba(230,126,34,0.3);
}
.quran-audio-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px color-mix(in srgb, var(--accent-primary) 30%, transparent); }

.quran-verse-right-controls { display: flex; align-items: center; gap: 0.5rem; }
.quran-bookmark-btn {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 50%; border: 1.5px solid var(--border-color);
  background: var(--bg-glass); color: var(--text-muted);
  font-size: 1rem; cursor: pointer; transition: var(--transition);
  display: flex; align-items: center; justify-content: center;
}
.quran-bookmark-btn:hover { border-color: var(--accent-gold); color: var(--accent-gold); }
.quran-bookmark-btn.active {
  background: var(--accent-gold);
  border-color: transparent; color: #fff;
}

.quran-verse-arabic {
  font-family: var(--font-arabic);
  font-size: var(--arabic-size);
  color: var(--text-arabic);
  text-align: right; direction: rtl;
  line-height: 2.2; margin-bottom: 0.8rem;
  transition: var(--transition);
}
/* Latin transliteration */
.quran-verse-latin {
  font-size: var(--latin-size);
  color: var(--text-latin);
  line-height: 1.8;
  font-style: italic;
  margin-bottom: 0.6rem;
  padding: 0.4rem 0.6rem;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  transition: var(--transition);
}
.quran-verse-translation {
  font-size: var(--translation-size);
  color: var(--text-translation);
  line-height: 1.75; padding-top: 0.7rem;
  border-top: 1px solid var(--border-color);
  transition: var(--transition);
}

/* Bismillah Latin */
.quran-bismillah-latin {
  font-size: 0.88rem; font-style: italic;
  color: var(--text-latin);
  margin-top: 0.3rem; margin-bottom: 1.2rem;
  letter-spacing: 0.3px;
}

/* Loading/Error */
.quran-loading, .quran-error {
  text-align: center; padding: 2.5rem 1rem;
  color: var(--text-muted); font-size: 0.92rem; font-weight: 500;
}
.quran-error { color: var(--accent-red); }

/* Back button */
.btn-back-surah {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.65rem 1.2rem; margin-bottom: 1rem;
  background: var(--feature-bg);
  color: white; border: none; border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: 0.88rem; font-weight: 700;
  cursor: pointer; transition: var(--transition);
  box-shadow: 0 3px 12px color-mix(in srgb, var(--accent-primary) 25%, transparent);
}
.btn-back-surah:hover { transform: translateY(-1px); box-shadow: 0 6px 20px color-mix(in srgb, var(--accent-primary) 35%, transparent); }

/* Member badge bar */
.member-badge-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.6rem 1rem; margin: 0;
  background: var(--accent-soft);
  border-bottom: 1px solid var(--border-color);
  font-size: 0.82rem; font-weight: 600; color: var(--accent-primary);
}
.link-btn-small {
  background: none; border: none; cursor: pointer; font-family: var(--font-body);
  transition: var(--transition); padding: 0;
}
.link-btn-small:hover { color: var(--accent-red) !important; }

/* =========================================
   PREMIUM GATE
   ========================================= */
.premium-gate {
  min-height: 70vh; display: flex; align-items: center; justify-content: center;
  padding: 2rem 1rem;
}
.premium-gate-inner {
  text-align: center; max-width: 340px;
  background: var(--bg-solid);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl); padding: 2rem 1.5rem;
box-shadow: var(--shadow-lg);
}
.premium-sparkle { font-size: 3.5rem; margin-bottom: 0.8rem; animation: floatPulse 3s ease infinite; }
.premium-title { font-size: 1.4rem; font-weight: 800; color: var(--text-primary); margin-bottom: 0.3rem; }
.premium-subtitle { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 0.8rem; }
.premium-badge {
  display: inline-block;
  background: color-mix(in srgb, var(--accent-gold) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-gold) 30%, transparent);
  color: var(--gold-text); padding: 0.3rem 1rem;
  border-radius: var(--radius-pill); font-size: 0.78rem; font-weight: 700;
  margin-bottom: 1rem; letter-spacing: 0.5px;
}
.premium-desc {
  font-size: 0.88rem; color: var(--text-secondary); line-height: 1.7;
  margin-bottom: 1.2rem;
}
.premium-desc strong { color: var(--accent-primary); }
.premium-features-list {
  text-align: left; margin-bottom: 1.5rem;
  background: var(--bg-solid); border-radius: var(--radius-sm);
  padding: 0.9rem 1rem; border: 1px solid var(--border-color);
}
.pfl-item { font-size: 0.82rem; color: var(--text-secondary); padding: 0.3rem 0; font-weight: 500; }
/* Tombol emas solid, teks gelap (kontras tinggi di emas terang) */
.btn-premium-unlock {
  width: 100%; min-height: 52px; padding: 1rem;
  background: var(--accent-gold-light);
  color: #1a1200; border: none; border-radius: var(--radius-pill);
  font-family: var(--font-body); font-size: 0.98rem; font-weight: 800;
  cursor: pointer; transition: var(--transition-fast); margin-bottom: 0.8rem;
  box-shadow: var(--shadow-sm);
  letter-spacing: 0.2px;
}
.btn-premium-unlock:hover { box-shadow: var(--shadow-md); filter: brightness(1.05); }
.btn-premium-unlock:active { transform: scale(0.98); }
.premium-note { font-size: 0.75rem; color: var(--text-muted); }
.link-btn {
  background: none; border: none; color: var(--accent-primary);
  font-family: var(--font-body); font-size: inherit;
  cursor: pointer; text-decoration: underline; padding: 0;
}

/* =========================================
   MEMBERSHIP MODAL
   ========================================= */
.membership-modal {
  position: fixed; inset: 0; z-index: 600;
  display: flex; align-items: flex-end; justify-content: center;
}
.membership-modal-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
}
.membership-modal-sheet {
  position: relative; z-index: 1;
  background: var(--bg-solid);
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  border: 1px solid var(--border-color); border-bottom: none;
  padding: 1.2rem 1.4rem 2.5rem;
  width: 100%; max-width: 520px;
  animation: modalUp 0.35s cubic-bezier(0.4,0,0.2,1);
  max-height: 92vh; overflow-y: auto;
}
.ms-header { text-align: center; margin-bottom: 1.2rem; }
.ms-icon { font-size: 2.5rem; margin-bottom: 0.5rem; }
.ms-title { font-size: 1.2rem; font-weight: 800; color: var(--text-primary); margin-bottom: 0.3rem; }
.ms-desc { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.6; }
.ms-desc strong { color: var(--accent-primary); }
.ms-label { font-size: 0.78rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.6rem; }

/* Feature selector */
.ms-feature-selector { margin-bottom: 1.2rem; }
.ms-features-checkboxes { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.6rem; }
.ms-feature-check {
  display: flex; align-items: center; gap: 0.5rem;
  background: var(--bg-surface); border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm); padding: 0.6rem 0.7rem;
  cursor: pointer; transition: var(--transition);
  font-family: var(--font-body);
}
.ms-feature-check:hover { border-color: var(--accent-primary); }
.ms-feature-check input { width: 16px; height: 16px; accent-color: var(--accent-primary); flex-shrink: 0; }
.ms-feature-check input:checked + .ms-fc-icon { filter: none; }
.ms-fc-icon { font-size: 1.1rem; flex-shrink: 0; }
.ms-fc-name { font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); }
.ms-feature-check.ms-fc-owned { opacity: 0.6; }

/* Nominals */
.ms-nominal-section { margin-bottom: 1.2rem; }
.ms-nominal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; margin-bottom: 0.6rem; }
.ms-nominal-btn {
  padding: 0.65rem 0.3rem;
  border: 1.5px solid var(--border-color); border-radius: var(--radius-sm);
  background: var(--bg-solid); color: var(--text-secondary);
  font-family: var(--font-body); font-size: 0.78rem; font-weight: 700;
  cursor: pointer; transition: var(--transition); text-align: center;
}
.ms-nominal-btn.active {
  border-color: var(--accent-gold); color: var(--accent-gold);
  background: color-mix(in srgb, var(--accent-gold) 10%, transparent);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--accent-gold) 15%, transparent);
}
.ms-nominal-btn:hover { border-color: var(--accent-primary); color: var(--accent-primary); }
.ms-custom-nominal {
  display: flex; align-items: center; gap: 0.5rem;
  background: var(--bg-solid); border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm); padding: 0.5rem 0.8rem;
}
.ms-custom-nominal span { font-size: 0.85rem; font-weight: 700; color: var(--text-muted); }
.ms-custom-nominal input {
  flex: 1; border: none; background: transparent;
  font-family: var(--font-body); font-size: 0.88rem; font-weight: 600;
  color: var(--text-primary); outline: none;
}
.ms-custom-nominal input::placeholder { color: var(--text-muted); font-weight: 400; }

/* Payment info */
.ms-payment-info {
  background: var(--bg-solid); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); padding: 1rem; margin-bottom: 1rem;
}
.ms-pay-title { font-size: 0.78rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.8rem; }
.ms-pay-methods { display: flex; gap: 0; }
.ms-pay-method { flex: 1; text-align: center; }
.ms-pay-divider { width: 1px; background: var(--border-color); margin: 0 0.8rem; }
.ms-pay-label { font-size: 0.7rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.3rem; }
.ms-pay-number { font-size: 1.05rem; font-weight: 800; color: var(--accent-primary); letter-spacing: 1px; }
.ms-pay-owner { font-size: 0.7rem; color: var(--text-muted); margin-top: 0.2rem; }
.ms-note {
  background: color-mix(in srgb, var(--accent-gold) 6%, transparent); border: 1px solid color-mix(in srgb, var(--accent-gold) 20%, transparent);
  border-radius: var(--radius-sm); padding: 0.7rem 0.9rem;
  font-size: 0.8rem; color: var(--text-secondary); line-height: 1.55;
  margin-bottom: 1rem;
}
.ms-note strong { color: var(--accent-gold); }

/* Checkbox opt-in ranking donatur (tasks/019) */
.ms-checkbox-group { margin-bottom: 1rem; }
.ms-checkbox-label {
  display: flex; align-items: flex-start; gap: 0.6rem;
  font-size: 0.82rem; color: var(--text-secondary); line-height: 1.5;
  cursor: pointer;
}
.ms-checkbox-label input[type="checkbox"] {
  width: 20px; height: 20px; min-width: 20px; margin-top: 0.1rem;
  accent-color: var(--accent-primary); cursor: pointer;
}

/* Summary */
.ms-summary {
  background: var(--bg-solid); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); padding: 1rem; margin-bottom: 1rem;
}
.ms-summary-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.88rem; padding: 0.3rem 0;
  border-bottom: 1px solid var(--border-color);
}
.ms-summary-row:last-child { border-bottom: none; }
.ms-summary-row span { color: var(--text-muted); font-weight: 500; }
.ms-summary-row strong { color: var(--text-primary); font-weight: 700; }

.btn-ms-next {
  width: 100%; min-height: 52px; padding: 0.95rem;
  background: var(--feature-bg);
  color: var(--feature-text); border: none; border-radius: var(--radius-pill);
  font-family: var(--font-body); font-size: 0.95rem; font-weight: 700;
  cursor: pointer; transition: var(--transition-fast); margin-bottom: 0.6rem;
  box-shadow: var(--shadow-sm);
}
.btn-ms-next:hover { box-shadow: var(--shadow-md); filter: brightness(1.08); }
.btn-ms-back {
  width: 100%; padding: 0.7rem;
  background: transparent; border: 1.5px solid var(--border-color);
  color: var(--text-muted); border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: 0.88rem; font-weight: 600;
  cursor: pointer; transition: var(--transition);
}
.btn-ms-back:hover { border-color: var(--accent-primary); color: var(--accent-primary); }

/* Success */
.ms-success { text-align: center; padding: 1rem 0; }
.ms-success-icon { font-size: 4rem; margin-bottom: 1rem; animation: floatPulse 2s ease infinite; }
.ms-activated-feature {
  display: inline-block; background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-primary) 20%, transparent); border-radius: 20px;
  padding: 0.3rem 0.8rem; font-size: 0.82rem; font-weight: 600;
  color: var(--accent-primary); margin: 0.2rem;
}
.ms-success-features { margin: 1rem 0; }

/* =========================================
   MEMBERSHIP PAGE (subpage-subscribe)
   ========================================= */
.membership-about-card {
  background: var(--bg-solid);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md); padding: 1rem 1.2rem;
  margin: 0 0.8rem 1rem;
}
.mab-header { display: flex; gap: 0.8rem; align-items: flex-start; }
.mab-icon { font-size: 1.8rem; flex-shrink: 0; }
.mab-header > div strong { font-size: 0.9rem; font-weight: 700; color: var(--text-primary); display: block; margin-bottom: 0.3rem; }
.mab-header > div p { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.6; }

/* ============================================
   UNTUK MASJID & MAJELIS TA'LIM (tasks/009)
   ============================================ */
.untuk-masjid-fitur { margin-bottom: 1.2rem; }
.untuk-masjid-fitur-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem;
  padding: 0 0.8rem;
}
@media (min-width: 600px) { .untuk-masjid-fitur-grid { grid-template-columns: repeat(3, 1fr); } }

.untuk-masjid-khas {
  display: flex; gap: 0.8rem; align-items: flex-start;
  margin: 0 0.8rem 1.2rem; padding: 1rem 1.2rem;
  background: var(--feature-bg);
  border-radius: var(--radius-lg); color: var(--feature-text);
  box-shadow: var(--shadow-sm);
}
.umk-icon { font-size: 1.8rem; flex-shrink: 0; }
.untuk-masjid-khas strong { display: block; font-size: 0.92rem; margin-bottom: 0.3rem; }
.untuk-masjid-khas p { font-size: 0.82rem; line-height: 1.6; opacity: 0.95; }

.untuk-masjid-tips { margin-bottom: 1.2rem; }
.untuk-masjid-tips-list {
  margin: 0.6rem 0.8rem 0; padding: 0 0 0 1.4rem;
  background: var(--bg-solid); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); padding: 1rem 1.2rem 1rem 2rem;
}
.untuk-masjid-tips-list li { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.7; margin-bottom: 0.4rem; }
.untuk-masjid-tips-list li:last-child { margin-bottom: 0; }

.untuk-masjid-poster {
  margin: 0 0.8rem 1.2rem; padding: 1.1rem 1.2rem;
  background: var(--bg-solid); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
}
.untuk-masjid-poster-desc { font-size: 0.8rem; color: var(--text-muted); margin: 0.3rem 0 1rem; line-height: 1.5; }
.untuk-masjid-poster-preview {
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px dashed var(--border-color); border-radius: var(--radius-md);
  padding: 1rem; margin-bottom: 1rem; min-height: 180px;
}
.untuk-masjid-poster-preview canvas { max-width: 100%; height: auto; border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,0.12); }
.untuk-masjid-poster-preview .um-preview-loading { font-size: 0.8rem; color: var(--text-muted); }
.untuk-masjid-poster-btns { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.untuk-masjid-poster-btns button { flex: 1; min-width: 140px; }

.untuk-masjid-kontak {
  display: flex; gap: 0.8rem; align-items: flex-start;
  margin: 0 0.8rem 1rem; padding: 1rem 1.2rem;
  background: var(--accent-soft); border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}
.umk-kontak-icon { font-size: 1.5rem; flex-shrink: 0; }
.untuk-masjid-kontak strong { display: block; font-size: 0.88rem; color: var(--text-primary); margin-bottom: 0.25rem; }
.untuk-masjid-kontak p { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.6; }
.untuk-masjid-kontak a { color: var(--accent-primary); font-weight: 700; text-decoration: none; }

.membership-status-card {
  display: flex; align-items: center; gap: 0.8rem;
  border-radius: var(--radius-md); padding: 0.9rem 1.1rem;
  margin-bottom: 0.8rem; border: 1px solid;
}
.membership-status-card.active {
  background: color-mix(in srgb, var(--accent-primary) 8%, transparent); border-color: color-mix(in srgb, var(--accent-primary) 25%, transparent);
}
.membership-status-card.partial {
  background: color-mix(in srgb, var(--accent-gold) 6%, transparent); border-color: color-mix(in srgb, var(--accent-gold) 20%, transparent);
}
.msc-icon { font-size: 1.5rem; flex-shrink: 0; }
.msc-title { font-size: 0.9rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.1rem; }
.msc-desc { font-size: 0.78rem; color: var(--text-muted); }

.user-features-grid { display: flex; flex-direction: column; gap: 0.4rem; }
.ufl-item {
  display: flex; align-items: center; gap: 0.7rem;
  background: var(--bg-solid); border: 1px solid var(--border-color);
  border-radius: var(--radius-sm); padding: 0.7rem 1rem;
  transition: var(--transition);
}
.ufl-item.ufl-locked:hover { border-color: var(--accent-gold); box-shadow: var(--shadow-sm); }
.ufl-icon { font-size: 1.2rem; flex-shrink: 0; }
.ufl-name { flex: 1; font-size: 0.88rem; font-weight: 600; color: var(--text-primary); }
.ufl-badge { font-size: 0.7rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 20px; white-space: nowrap; }
.ufl-badge.free { background: color-mix(in srgb, var(--accent-primary) 10%, transparent); color: var(--accent-primary); border: 1px solid color-mix(in srgb, var(--accent-primary) 20%, transparent); }
.ufl-badge.owned { background: color-mix(in srgb, var(--accent-primary) 10%, transparent); color: var(--accent-primary); border: 1px solid color-mix(in srgb, var(--accent-primary) 20%, transparent); }
.ufl-badge.locked { background: color-mix(in srgb, var(--accent-gold) 10%, transparent); color: var(--accent-gold); border: 1px solid color-mix(in srgb, var(--accent-gold) 20%, transparent); }

/* =========================================
   REQUEST FITUR — Roadmap
   ========================================= */
.roadmap-list { display: flex; flex-direction: column; gap: 0.5rem; }
.roadmap-item {
  display: flex; align-items: center; gap: 0.8rem;
  background: var(--bg-solid); border: 1px solid var(--border-color);
  border-radius: var(--radius-sm); padding: 0.75rem 1rem;
  transition: var(--transition);
}
.roadmap-item.done { border-left: 3px solid var(--accent-primary); }
.roadmap-item.wip { border-left: 3px solid var(--accent-gold); }
.roadmap-item.plan { border-left: 3px solid var(--text-muted); opacity: 0.75; }
.rm-status { font-size: 1.1rem; flex-shrink: 0; width: 28px; text-align: center; }
.roadmap-item > div { flex: 1; }
.roadmap-item > div strong { font-size: 0.88rem; font-weight: 700; color: var(--text-primary); display: block; }
.roadmap-item > div span { font-size: 0.72rem; color: var(--text-muted); }

/* =========================================
   UTILITY — Link Button & Premium Note
   ========================================= */
.link-btn {
  background: none; border: none; cursor: pointer;
  color: var(--accent-primary); font-family: var(--font-body);
  font-size: inherit; font-weight: 600; text-decoration: underline;
  padding: 0; transition: var(--transition);
}
.link-btn:hover { color: var(--accent-secondary); }

.premium-note {
  font-size: 0.78rem; color: var(--text-muted);
  text-align: center; margin-top: 0.6rem; line-height: 1.5;
}

/* Modal drag handle */
.modal-handle {
  width: 40px; height: 4px; border-radius: 4px;
  background: var(--border-color); margin: 0 auto 1.2rem;
}

/* =========================================
   MOBILE: Hide desktop-only sidebar extras
   ========================================= */
@media (max-width: 899px) {
  .sidebar-divider { display: none; }
  .sidebar-bottom   { display: none; }
}

@keyframes modalUp {
  from { opacity: 0; transform: translateY(60px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes floatPulse {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-6px) scale(1.04); }
}

/* =========================================
   BELAJAR — HIJAIYAH
   ========================================= */
.hijaiyah-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: var(--bg-solid);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 1rem;
  margin: 0 1rem 1.2rem;
  box-shadow: var(--glass-shadow);
}
.hijaiyah-stat-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}
.hijaiyah-stat-num {
  font-family: var(--font-body);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--accent-primary);
  line-height: 1;
}
.hijaiyah-stat-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 500;
  text-align: center;
}
.hijaiyah-stat-div {
  width: 1px;
  height: 36px;
  background: var(--border-color);
}

/* Search */
.hijaiyah-search-wrap {
  padding: 0 1rem;
  margin-bottom: 0.8rem;
}
.hijaiyah-search-box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg-solid);
  border: 1.5px solid var(--glass-border);
  border-radius: 100px;
  padding: 0.6rem 1rem;
  box-shadow: var(--shadow-sm);
}
.hijaiyah-search-icon { font-size: 1rem; color: var(--text-muted); }
.hijaiyah-search-input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text-primary);
}
.hijaiyah-search-input::placeholder { color: var(--text-muted); }
.hijaiyah-search-clear {
  background: var(--accent-soft);
  border: none;
  border-radius: 50%;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition-fast);
}

/* Mode bar */
.hijaiyah-mode-bar {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin: 0 1rem 0.8rem;
}
.hijaiyah-mode-btn {
  flex: 1;
  padding: 0.45rem 1rem;
  border-radius: 100px;
  border: 1.5px solid var(--border-color);
  background: var(--bg-solid);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
}
.hijaiyah-mode-btn.active {
  background: var(--feature-bg);
  color: var(--feature-text);
  border-color: var(--accent-primary);
}

/* Legend */
.hijaiyah-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  padding: 0 1rem;
  margin-bottom: 1rem;
}
.hijaiyah-legend-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  background: var(--bg-solid);
  border: 1px solid var(--border-color);
  border-radius: 100px;
  padding: 0.25rem 0.7rem;
}
.hijaiyah-legend-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Kredit pemilik rekaman audio — wajib tetap tampil selama rekamannya dipakai */
.audio-kredit {
  margin: 1.2rem auto 0;
  max-width: 32rem;
  padding: 0 1rem;
  text-align: center;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.audio-kredit a {
  color: var(--accent-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Grid Container */
.hijaiyah-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7rem;
  padding: 0 1rem 1rem;
}

/* Hijaiyah Card — GRID */
.hijaiyah-card {
  background: var(--bg-solid);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 0.8rem 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
  animation: cardFadeIn 0.35s ease both;
  position: relative;
  overflow: hidden;
}
.hijaiyah-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--card-color1, #27ae60);
}
.hijaiyah-card:hover, .hijaiyah-card:focus {
  transform: translateY(-3px) scale(1.02);
  box-shadow: var(--shadow-md);
  border-color: var(--accent-secondary);
  outline: none;
}
.hijaiyah-card:active { transform: scale(0.97); }

/* Huruf yang ditandai "sudah bisa" oleh user — self-tracking lokal */
.hijaiyah-card.mastered::after {
  content: '✓';
  position: absolute; top: 6px; right: 6px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--feature-bg); color: var(--feature-text);
  font-size: 0.7rem; font-weight: 800; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

.hijaiyah-badge {
  width: 22px; height: 22px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  align-self: flex-end;
  margin-bottom: 0.1rem;
}
.hijaiyah-no {
  font-size: 0.6rem;
  font-weight: 800;
  color: #fff;
  font-family: var(--font-body);
}
.hijaiyah-arab {
  font-family: var(--font-arabic);
  font-size: 2.4rem;
  color: var(--text-arabic);
  line-height: 1.2;
  text-align: center;
}
.hijaiyah-nama {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-primary);
}
.hijaiyah-latin {
  font-family: var(--font-body);
  font-size: 0.7rem;
  color: var(--text-muted);
}
.hijaiyah-kelompok-badge {
  font-size: 0.6rem;
  font-weight: 600;
  padding: 0.15rem 0.45rem;
  border-radius: 100px;
  margin-top: 0.1rem;
  text-align: center;
}

/* Hijaiyah Card — LIST mode */
.hijaiyah-card.list-mode {
  flex-direction: row;
  align-items: center;
  padding: 0.7rem 1rem;
  gap: 0.8rem;
  grid-column: 1 / -1; /* full width */
}
.hijaiyah-grid:has(.hijaiyah-card.list-mode) {
  grid-template-columns: 1fr;
}
.hijaiyah-list-no {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem;
  font-weight: 800;
  color: #fff;
  font-family: var(--font-body);
  flex-shrink: 0;
}
.hijaiyah-list-arab {
  font-family: var(--font-arabic);
  font-size: 2rem;
  color: var(--text-arabic);
  flex-shrink: 0;
  width: 40px;
  text-align: center;
}
.hijaiyah-list-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.hijaiyah-list-nama {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-primary);
}
.hijaiyah-list-latin {
  font-size: 0.75rem;
  color: var(--text-muted);
}
.hijaiyah-list-bentuk {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  align-items: flex-end;
}
.hijaiyah-list-bentuk span {
  font-family: var(--font-arabic);
  font-size: 1.1rem;
  color: var(--text-secondary);
}

@keyframes cardFadeIn {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* =========================================
   BELAJAR — HIJAIYAH MODAL
   ========================================= */
.belajar-modal-overlay .modal-content {
  padding: 0;
  overflow: hidden;
  max-height: 92vh;
  overflow-y: auto;
}
.belajar-huruf-modal {
  border-radius: var(--radius-xl) var(--radius-xl) var(--radius-md) var(--radius-md) !important;
}
.bm-header {
  padding: 2rem 1.5rem 1.5rem;
  text-align: center;
  position: relative;
}
.bm-header .modal-handle {
  position: absolute;
  top: 0.6rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,0.3);
}
.bm-no {
  position: absolute;
  top: 0.8rem;
  right: 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(255,255,255,0.6);
  font-family: var(--font-body);
}
.bm-arab {
  font-family: var(--font-arabic);
  font-size: 5rem;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 0.5rem;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.2));
}
.bm-nama {
  font-size: 1.3rem;
  font-weight: 800;
  color: #fff;
  font-family: var(--font-body);
}
.bm-latin {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.75);
  font-family: var(--font-body);
}
.bm-body {
  padding: 1.2rem 1.2rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.bm-bentuk-row {
  display: flex;
  gap: 0.5rem;
}
.bm-bentuk-item {
  flex: 1;
  background: var(--bg-solid);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.6rem;
  text-align: center;
}
.bm-bentuk-label {
  font-size: 0.65rem;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 0.3rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.bm-bentuk-arab {
  font-family: var(--font-arabic);
  font-size: 1.6rem;
  color: var(--text-arabic);
}
.bm-harokat-row {
  display: flex;
  gap: 0.5rem;
}
.bm-harokat-item {
  flex: 1;
  background: var(--accent-soft);
  border: 1px solid var(--glass-border-2);
  border-radius: var(--radius-sm);
  padding: 0.6rem;
  text-align: center;
}
.bm-harokat-arab {
  font-family: var(--font-arabic);
  font-size: 1.8rem;
  color: var(--accent-primary);
  line-height: 1.4;
}
.bm-harokat-label {
  font-size: 0.65rem;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 0.2rem;
}
.bm-makhraj {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--bg-solid);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.7rem 1rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.bm-makhraj-icon { font-size: 1.3rem; }
.bm-contoh {
  background: var(--bg-verse);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.8rem 1rem;
  text-align: center;
}
.bm-contoh-label {
  font-size: 0.65rem;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.4rem;
}
.bm-contoh-arab {
  font-family: var(--font-arabic);
  font-size: 2rem;
  color: var(--text-arabic);
  line-height: 1.4;
}
.bm-contoh-latin {
  font-size: 0.85rem;
  color: var(--text-latin);
  margin-top: 0.2rem;
}
.bm-contoh-arti { color: var(--text-muted); }
.bm-deskripsi {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.6;
  background: var(--bg-solid);
  border-left: 3px solid var(--accent-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 0.7rem 1rem;
}
.bm-mastered-btn {
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 0.6rem;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border-color);
  background: var(--bg-glass);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-fast);
}
.bm-mastered-btn:hover { border-color: var(--accent-primary); }
.bm-mastered-btn.active {
  background: var(--feature-bg); color: var(--feature-text); border-color: var(--accent-primary);
}

.bm-close-btn {
  width: 100%;
  padding: 0.75rem;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border-color);
  background: var(--bg-glass);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
}
.bm-close-btn:hover { background: var(--accent-soft); }

/* =========================================
   BELAJAR — AUDIO PELAFALAN
   ========================================= */
.belajar-audio-btn {
  border: none;
  cursor: pointer;
  background: var(--accent-soft);
  color: var(--accent-primary);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  font-size: 0.75rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}
.belajar-audio-btn:hover { background: var(--feature-bg); color: var(--feature-text); transform: scale(1.1); }
.belajar-audio-btn:active { transform: scale(0.92); }
.belajar-audio-btn.playing {
  background: #d35400;
  color: #fff;
  animation: belajarAudioPulse 0.9s ease-in-out infinite;
}

@keyframes belajarAudioPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(230,126,34,0.5); }
  50%      { box-shadow: 0 0 0 7px rgba(230,126,34,0); }
}

/* Tombol suara di kartu grid — pojok kiri atas */
.hijaiyah-audio-btn {
  position: absolute;
  top: 0.55rem;
  left: 0.45rem;
  z-index: 2;
}
.hijaiyah-list-audio-btn {
  width: 32px;
  height: 32px;
  font-size: 0.85rem;
}

/* Tombol "Dengarkan" besar di header modal */
.bm-dengar-btn {
  margin-top: 0.7rem;
  padding: 0.45rem 1.1rem;
  border-radius: 100px;
  border: 1.5px solid rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}
.bm-dengar-btn:hover { background: rgba(255,255,255,0.3); }
.bm-dengar-btn:active { transform: scale(0.96); }
.bm-dengar-btn.playing { background: rgba(255,255,255,0.35); border-color: #fff; }
.bm-dengar-btn.playing .bm-dengar-ikon { animation: belajarAudioBounce 0.7s ease-in-out infinite; }

@keyframes belajarAudioBounce {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.25); }
}

/* Kartu harokat kini dapat diketuk */
.bm-harokat-item {
  position: relative;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.bm-harokat-item:hover { border-color: var(--accent-primary); }
.bm-harokat-item:active { transform: scale(0.96); }
.bm-harokat-spk {
  position: absolute;
  top: 0.3rem;
  right: 0.35rem;
  font-size: 0.6rem;
  opacity: 0.45;
}
.bm-harokat-item.playing {
  border-color: #e67e22;
  background: rgba(230,126,34,0.12);
}
.bm-harokat-item.playing .bm-harokat-spk { opacity: 1; animation: belajarAudioBounce 0.7s ease-in-out infinite; }

.bm-audio-hint {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: -0.5rem;
}

.bm-contoh-audio-btn {
  width: 22px;
  height: 22px;
  font-size: 0.65rem;
  margin-left: 0.35rem;
  vertical-align: middle;
}

/* Notifikasi bila suara gagal dimuat */
.belajar-audio-toast {
  position: fixed;
  left: 50%;
  bottom: 5.5rem;
  transform: translateX(-50%) translateY(0.8rem);
  background: rgba(20,20,20,0.92);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.8rem;
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius-md);
  line-height: 1.5;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 9999;
  max-width: min(90vw, 340px);
  text-align: center;
}
.belajar-audio-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.belajar-audio-toast-retry {
  display: block;
  margin: 0.5rem auto 0;
  pointer-events: auto;
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm, 8px);
  padding: 0.35rem 0.9rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}
.belajar-audio-toast-retry:hover { background: rgba(255,255,255,0.25); }

@media (prefers-reduced-motion: reduce) {
  .belajar-audio-btn.playing,
  .bm-dengar-btn.playing .bm-dengar-ikon,
  .bm-harokat-item.playing .bm-harokat-spk,
  .doa-audio-btn.playing { animation: none; }
}

/* =========================================
   BELAJAR — TAJWID
   ========================================= */
.tajwid-intro {
  margin: 0 1rem 1.2rem;
  background: var(--bg-solid);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.9rem 1.1rem;
  border-left: 4px solid var(--accent-primary);
}
.tajwid-intro p {
  font-size: 0.87rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

#tajwid-content {
  padding: 0 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.tajwid-section { display: flex; flex-direction: column; }

.tajwid-kategori-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-solid);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 0.9rem 1rem;
  cursor: pointer;
  transition: var(--transition-fast);
  box-shadow: var(--shadow-sm);
  gap: 0.8rem;
}
.tajwid-kategori-header:hover { transform: translateX(2px); box-shadow: var(--shadow-md); }

.tajwid-header-left {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex: 1;
}
.tajwid-kategori-icon { font-size: 1.5rem; flex-shrink: 0; }
.tajwid-kategori-nama {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.15rem;
}
.tajwid-kategori-desc {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.4;
}
.tajwid-chevron {
  font-size: 0.8rem;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: var(--transition-fast);
}

.tajwid-rules-container {
  padding: 0.5rem 0 0 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.3rem;
  border-left: 2px solid var(--border-color);
  margin-left: 0.5rem;
}

.tajwid-rule-item {
  background: var(--bg-solid);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: var(--transition-fast);
}

.tajwid-rule-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0.9rem;
  cursor: pointer;
  gap: 0.7rem;
  transition: var(--transition-fast);
}
.tajwid-rule-header:hover { background: var(--accent-soft); }

.tajwid-rule-left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 1;
}
.tajwid-rule-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tajwid-rule-nama {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--text-primary);
  margin-bottom: 0.1rem;
}
.tajwid-rule-arab {
  font-family: var(--font-arabic);
  font-size: 0.95rem;
  color: var(--text-latin);
}
.tajwid-rule-simbol {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.25rem 0.55rem;
  border-radius: 6px;
  white-space: nowrap;
  font-family: var(--font-arabic);
  flex-shrink: 0;
  text-align: center;
}

.tajwid-rule-body {
  padding: 0.8rem 1rem 1rem;
  border-top: 1px solid var(--border-color);
}
.tajwid-penjelasan {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0 0 0.7rem;
}

.tajwid-huruf-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.7rem;
}
.tajwid-huruf-badge {
  font-family: var(--font-arabic);
  font-size: 1.3rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0.2rem 0.5rem;
  font-weight: 700;
}

.tajwid-contoh-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.tajwid-contoh-item {
  background: var(--bg-verse);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.8rem;
}
.tajwid-contoh-arab {
  font-family: var(--font-arabic);
  font-size: 1.4rem;
  color: var(--text-arabic);
  direction: rtl;
  text-align: right;
  line-height: 1.6;
}
.tajwid-contoh-latin {
  font-size: 0.8rem;
  color: var(--text-latin);
  margin-top: 0.2rem;
}

/* =========================================
   BELAJAR — LATIHAN
   ========================================= */
.latihan-mode-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin: 0 1rem 1.2rem;
}
.latihan-mode-btn {
  padding: 0.6rem 0.6rem;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border-color);
  background: var(--bg-solid);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-fast);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 600px) {
  .latihan-mode-bar { grid-template-columns: repeat(4, 1fr); }
  .latihan-mode-btn { font-size: 0.88rem; }
}
.latihan-mode-btn.active {
  background: var(--feature-bg);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent-primary) 30%, transparent);
}

.latihan-soal-box {
  margin: 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.latihan-progress-info {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 500;
}
.latihan-skor-live {
  color: var(--accent-primary);
  font-weight: 700;
}

.latihan-progress-bar-wrap {
  height: 6px;
  background: var(--bg-surface);
  border-radius: 100px;
  overflow: hidden;
  border: 1px solid var(--border-color);
}
.latihan-progress-bar {
  height: 100%;
  background: var(--accent-primary);
  border-radius: 100px;
  transition: width 0.5s ease;
}

.latihan-soal-arab {
  font-family: var(--font-arabic);
  font-size: 6rem;
  text-align: center;
  color: var(--text-arabic);
  line-height: 1.2;
  background: var(--bg-solid);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-md);
}
/* Soal berupa nama/frasa Arab (Asmaul Husna, nama Surat) — lebih panjang
   dari satu huruf hijaiyah, jadi ukuran font diperkecil supaya tidak
   meluber dari kartu */
.latihan-soal-arab-md { font-size: 2.6rem; padding: 2rem 1rem; }

.latihan-pertanyaan {
  font-size: 0.88rem;
  color: var(--text-muted);
  text-align: center;
  font-style: italic;
}

.latihan-opsi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.latihan-opsi-btn {
  padding: 0.9rem 0.5rem;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border-color);
  background: var(--bg-solid);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.latihan-opsi-btn:hover:not(:disabled) {
  background: var(--accent-soft);
  border-color: var(--accent-primary);
  transform: translateY(-2px);
}
.latihan-opsi-btn.benar {
  background: #1e8449 !important;
  color: #fff !important;
  border-color: transparent !important;
  transform: scale(1.03);
}
.latihan-opsi-btn.salah {
  background: var(--accent-red) !important;
  color: #fff !important;
  border-color: transparent !important;
}
.latihan-opsi-btn:disabled { cursor: default; }

.latihan-skip-btn {
  align-self: center;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 100px;
  padding: 0.35rem 1rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition-fast);
  font-family: var(--font-body);
}
.latihan-skip-btn:hover { color: var(--text-primary); border-color: var(--accent-primary); }

/* Hasil */
.latihan-hasil {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  text-align: center;
  background: var(--bg-solid);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: 2rem 1.5rem;
  box-shadow: var(--shadow-md);
}
.latihan-hasil-emoji { font-size: 3.5rem; }
.latihan-hasil-judul {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-primary);
}
.latihan-hasil-skor {
  display: flex;
  align-items: baseline;
  gap: 0.2rem;
  margin-top: 0.3rem;
}
.latihan-hasil-angka {
  font-size: 4rem;
  font-weight: 900;
  color: var(--accent-primary);
  line-height: 1;
}
.latihan-hasil-total {
  font-size: 1.5rem;
  color: var(--text-muted);
  font-weight: 600;
}
.latihan-hasil-pct {
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent-secondary);
}
.latihan-hasil-pesan {
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin: 0;
}
.latihan-highscore {
  background: color-mix(in srgb, var(--accent-gold) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-gold) 25%, transparent);
  border-radius: var(--radius-md);
  padding: 0.5rem 1rem;
  font-size: 0.82rem;
  color: var(--accent-gold);
  font-weight: 600;
  width: 100%;
}
.latihan-hasil-btns {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  margin-top: 0.5rem;
}
.latihan-ulang-btn {
  width: 100%;
  padding: 0.8rem;
  border-radius: var(--radius-md);
  border: none;
  background: var(--feature-bg);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-fast);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent-primary) 30%, transparent);
}
.latihan-ulang-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 24px color-mix(in srgb, var(--accent-primary) 40%, transparent); }
.latihan-ganti-btn {
  width: 100%;
  padding: 0.7rem;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border-color);
  background: var(--bg-solid);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
}
.latihan-ganti-btn:hover { border-color: var(--accent-primary); color: var(--accent-primary); }

/* Desktop: hijaiyah grid expands to 4 col */
@media (min-width: 600px) {
  .hijaiyah-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 900px) {
  .hijaiyah-grid {
    grid-template-columns: repeat(5, 1fr);
  }
  .latihan-soal-box {
    max-width: 480px;
    margin: 0 auto;
  }
}


/* =========================================
   SURAT PENDEK
   ========================================= */
.surat-section-label {
  font-size: 0.78rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 1px; padding: 0 1rem; margin-bottom: 0.6rem;
}
.surat-selector-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0.55rem; padding: 0 1rem 1rem;
}
.surat-sel-card {
  background: var(--bg-solid); border: 1px solid var(--glass-border);
  border-radius: var(--radius-md); padding: 0.65rem 0.4rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
  cursor: pointer; transition: var(--transition-fast); box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden;
}
.surat-sel-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--sc1, var(--accent-primary));
}
.surat-sel-card:hover, .surat-sel-card.active {
  transform: translateY(-2px); border-color: var(--accent-secondary); box-shadow: var(--shadow-md);
}
.surat-sel-card.active { background: var(--accent-soft); border-color: var(--accent-primary); }
.surat-sel-icon { font-size: 1.2rem; line-height: 1; }
.surat-sel-no { font-size: 0.58rem; color: var(--text-muted); font-weight: 700; }
.surat-sel-nama { font-size: 0.72rem; font-weight: 700; color: var(--text-primary); text-align: center; line-height: 1.2; }
.surat-sel-ayat { font-size: 0.6rem; color: var(--text-muted); }
.surat-content-area { margin: 0 0 1rem; }
.surat-empty { text-align: center; color: var(--text-muted); font-size: 0.88rem; padding: 2rem 1rem; font-style: italic; }
.surat-header {
  margin: 0 1rem 1rem; border-radius: var(--radius-lg); padding: 1.5rem 1.2rem;
  text-align: center; box-shadow: var(--shadow-md); animation: cardFadeIn 0.4s ease;
}
.surat-header-no { font-size: 0.75rem; font-weight: 700; color: rgba(255,255,255,0.65); letter-spacing: 1px; margin-bottom: 0.3rem; }
.surat-header-arab { font-family: var(--font-arabic); font-size: 2.2rem; color: #fff; line-height: 1.3; }
.surat-header-nama { font-size: 1.3rem; font-weight: 800; color: #fff; margin-top: 0.2rem; }
.surat-header-info { font-size: 0.78rem; color: rgba(255,255,255,0.75); margin-top: 0.3rem; }
/* display-controls & toggle-switch: see canonical definitions above (~line 392) */
.surat-content-area .reading-content { padding: 0 1rem; }
@media (min-width: 600px) { .surat-selector-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px) { .surat-selector-grid { grid-template-columns: repeat(6, 1fr); } }

/* =========================================
   DOA HARIAN
   ========================================= */
.doa-section-label { font-size: 0.78rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; padding: 0 1rem; margin-bottom: 0.6rem; }
.doa-kategori-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; padding: 0 1rem 1rem; }
.doa-kat-card {
  background: var(--bg-solid); border: 1px solid var(--glass-border); border-radius: var(--radius-md);
  padding: 1rem 0.8rem; display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
  cursor: pointer; transition: var(--transition-fast); box-shadow: var(--shadow-sm);
  border-left: 3px solid var(--dkc, var(--accent-primary)); animation: cardFadeIn 0.3s ease;
}
.doa-kat-card:hover { transform: translateY(-2px) scale(1.01); box-shadow: var(--shadow-md); background: var(--accent-soft); }
.doa-kat-icon { font-size: 1.8rem; }
.doa-kat-nama { font-size: 0.82rem; font-weight: 700; color: var(--text-primary); text-align: center; line-height: 1.2; }
.doa-kat-count { font-size: 0.68rem; color: var(--text-muted); }
.doa-list-header {
  display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; font-weight: 700; color: var(--text-primary);
  padding: 0.7rem 1rem; background: var(--bg-solid); border: 1px solid var(--border-color);
  border-radius: var(--radius-md) var(--radius-md) 0 0;}
.doa-list-items { display: flex; flex-direction: column; gap: 0.4rem; padding-top: 0.4rem; }
.doa-item-card {
  display: flex; align-items: center; gap: 0.8rem; background: var(--bg-solid);
  border: 1px solid var(--glass-border); border-radius: var(--radius-md);
  padding: 0.75rem 0.9rem; cursor: pointer; transition: var(--transition-fast); box-shadow: var(--shadow-sm);
}
.doa-item-card:hover { transform: translateX(3px); border-color: var(--accent-secondary); background: var(--accent-soft); }
.doa-item-icon { width: 38px; height: 38px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.doa-item-info { flex: 1; min-width: 0; }
.doa-item-nama { font-size: 0.88rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.15rem; }
.doa-item-arabic { font-family: var(--font-arabic); font-size: 0.9rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doa-item-arrow { font-size: 1.5rem; font-weight: 700; line-height: 1; flex-shrink: 0; opacity: 0.7; }
.doa-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 9000; display: flex; align-items: flex-end; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: fadeInBg 0.2s ease; }
.doa-modal-content { background: var(--bg-solid); border: 1px solid var(--glass-border); border-radius: var(--radius-xl) var(--radius-xl) 0 0; width: 100%; max-width: 600px; margin: 0 auto; max-height: 90vh; overflow-y: auto; animation: modalUp 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 0 -16px 60px rgba(0,0,0,0.3); }
.doa-modal-header { display: flex; align-items: center; gap: 0.8rem; padding: 1.2rem 1.2rem 0.9rem; border-bottom: 2px solid var(--border-color); }
.doa-modal-icon { width: 44px; height: 44px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; }
.doa-modal-kategori { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 0.15rem; }
.doa-modal-nama { font-size: 1.05rem; font-weight: 800; color: var(--text-primary); }
.doa-bookmark-btn {
  margin-left: auto; flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid var(--border-color); background: var(--bg-glass);
  color: var(--text-muted); font-size: 1.05rem; cursor: pointer;
  transition: var(--transition); display: flex; align-items: center; justify-content: center;
}
.doa-bookmark-btn:hover { border-color: var(--accent-gold); color: var(--accent-gold); }
.doa-bookmark-btn.active {
  background: var(--accent-gold);
  border-color: transparent; color: #fff;
}
.doa-audio-btn {
  margin-left: auto; flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid var(--border-color); background: var(--bg-glass);
  color: var(--text-muted); font-size: 0.95rem; cursor: pointer;
  transition: var(--transition); display: flex; align-items: center; justify-content: center;
}
.doa-audio-btn:hover { border-color: var(--accent-secondary); color: var(--accent-secondary); }
.doa-audio-btn.playing {
  background: var(--feature-bg);
  border-color: transparent; color: #fff;
  animation: belajarAudioPulse 0.9s ease-in-out infinite;
}
/* Saat tombol audio ada, bookmark tidak lagi butuh margin-left:auto sendiri */
.doa-audio-btn + .doa-bookmark-btn { margin-left: 0; }
.doa-audio-kredit { font-size: 0.7rem; color: var(--text-muted); text-align: center; }
.doa-modal-body { padding: 1.2rem 1.2rem 1.5rem; display: flex; flex-direction: column; gap: 0.9rem; }
.doa-modal-arabic { font-family: var(--font-arabic); font-size: 1.75rem; color: var(--text-arabic); line-height: 2; text-align: right; direction: rtl; background: var(--bg-verse); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1rem 1.2rem; }
.doa-modal-latin { font-size: 0.88rem; color: var(--text-latin); font-style: italic; line-height: 1.65; background: var(--accent-soft); border-radius: var(--radius-sm); padding: 0.7rem 1rem; border-left: 3px solid var(--accent-secondary); }
.doa-modal-divider { height: 1px; background: var(--border-color); }
.doa-modal-terjemah { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.65; font-style: italic; }
.doa-modal-ket { display: flex; gap: 0.5rem; align-items: flex-start; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 0.65rem 0.9rem; font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; }
.doa-modal-ket-icon { flex-shrink: 0; font-size: 1rem; }
@media (min-width: 600px) { .doa-kategori-grid { grid-template-columns: repeat(3, 1fr); } }
@keyframes fadeInBg { from { opacity: 0; } to { opacity: 1; } }

/* =========================================
   POLISH FIXES - Final Pass
   ========================================= */

/* Surat selector: prevent long names from overflowing card */
.surat-sel-nama {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* Doa item: prevent long names from overflowing */
.doa-item-nama {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Latihan (quiz) buttons - better touch targets */
.latihan-opsi-btn {
  min-height: 52px;
}

/* Display-controls toggle bar - already handled in canonical definition */

/* Doa modal: center on desktop, not just bottom sheet */
@media (min-width: 640px) {
  .doa-modal-overlay {
    align-items: center;
    padding: 1rem;
  }
  .doa-modal-content {
    border-radius: var(--radius-xl);
    margin: 0 auto;
    max-height: 88vh;
  }
}

/* Surat selector: better desktop grid */
@media (min-width: 768px) {
  .surat-selector-grid {
    grid-template-columns: repeat(5, 1fr);
  }
  .doa-kategori-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 1024px) {
  .surat-selector-grid {
    grid-template-columns: repeat(6, 1fr);
    padding: 0 1.5rem 1rem;
  }
  .doa-kategori-grid {
    grid-template-columns: repeat(5, 1fr);
    padding: 0 1.5rem 1rem;
  }
  .surat-section-label,
  .doa-section-label {
    padding: 0 1.5rem;
  }
  .surat-header {
    margin: 0 1.5rem 1rem;
  }
}

/* Page bottom padding: ensure content above tab bar on mobile */
@media (max-width: 767px) {
  .page {
    padding-bottom: 90px;
  }
}

/* Tab bar: 6 tab tetap muat di HP kecil. Label TIDAK dikecilkan di bawah
   0.68rem (batas aksesibilitas, lihat docs/design-system.md) — yang
   dirapatkan cukup padding & pil ikonnya. */
@media (max-width: 360px) {
  .tab-btn {
    min-width: 0;
    padding: 0.3rem 0.05rem 0.35rem;
  }
  .tab-icon {
    font-size: 1.15rem;
    padding: 0.26rem 0.6rem;
  }
}

/* Reading font size: slightly smaller on very small screens */
@media (max-width: 360px) {
  .verse-arabic {
    font-size: 1.45rem !important;
  }
}

/* Belajar page: make hijaiyah grid responsive */
@media (min-width: 480px) {
  .hijaiyah-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}
@media (min-width: 768px) {
  .hijaiyah-grid {
    grid-template-columns: repeat(8, 1fr);
    padding: 0 1.5rem 1rem;
  }
}

/* Smooth scroll for all tab bar areas */
.tab-bar,
.sub-tab-bar {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* Focus outline for accessibility */
.tab-btn:focus-visible,
.sub-tab-btn:focus-visible,
.surat-sel-card:focus-visible,
.doa-kat-card:focus-visible,
.doa-item-card:focus-visible {
  outline: 2px solid var(--accent-secondary);
  outline-offset: 2px;
}

/* Prevent horizontal scroll on the whole page */
body {
  overflow-x: hidden;
}

/* ============================================
   VIRAL / SHARE FEATURES — Berkahku
   ============================================ */

/* ---- Share WA Button (Contextual, inline) ---- */
.share-wa-section {
  padding: 1rem 0.8rem 0.5rem;
}
.btn-share-wa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.75rem 1.2rem;
  background: var(--wa-bg);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.3px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  text-decoration: none;
}
.btn-share-wa:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  filter: brightness(1.05);
}
.btn-share-wa:active {
  transform: translateY(0);
}
.btn-share-wa svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ---- Floating Share FAB ---- */
.share-fab {
  position: fixed;
  bottom: calc(72px + env(safe-area-inset-bottom, 0px) + 12px);
  right: 16px;
  z-index: 990;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.share-fab-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--wa-bg);
  border: none;
  color: var(--feature-text);
  font-size: 1.4rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45);
  transition: var(--transition);
  animation: fabPulse 2.5s ease-in-out infinite;
  position: relative;
}
.share-fab-btn::after {
  content: 'Bagikan';
  position: absolute;
  right: 60px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(13,31,18,0.9);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  border-radius: 20px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.share-fab-btn:hover::after {
  opacity: 1;
}
.share-fab-btn:hover {
  transform: scale(1.1);
  animation: none;
  box-shadow: 0 8px 28px rgba(37, 211, 102, 0.55);
}
.share-fab-btn:active {
  transform: scale(0.95);
}
@keyframes fabPulse {
  0%, 100% { box-shadow: 0 6px 20px rgba(37,211,102,0.45); }
  50% { box-shadow: 0 6px 28px rgba(37,211,102,0.65), 0 0 0 8px rgba(37,211,102,0.08); }
}

/* Desktop: FAB di posisi lebih tinggi */
@media (min-width: 768px) {
  .share-fab {
    bottom: 24px;
    right: 24px;
  }
}

/* ---- Share Teman Modal ---- */
.share-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9990;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: fadeInOverlay 0.25s ease;
}
.share-modal-overlay.closing {
  animation: fadeOutOverlay 0.25s ease forwards;
}
@keyframes fadeInOverlay {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeOutOverlay {
  from { opacity: 1; }
  to { opacity: 0; }
}
.share-modal-sheet {
  background: var(--bg-solid);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: 1rem 1.2rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
  width: 100%;
  max-width: 520px;
  animation: slideUpModal 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.share-modal-sheet.closing {
  animation: slideDownModal 0.3s ease forwards;
}
@keyframes slideUpModal {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
@keyframes slideDownModal {
  from { transform: translateY(0); }
  to { transform: translateY(100%); }
}
.share-modal-handle {
  width: 40px; height: 4px;
  background: var(--border-color);
  border-radius: 2px;
  margin: 0 auto 1.2rem;
}
.share-modal-emoji {
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 0.6rem;
}
.share-modal-title {
  text-align: center;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 0.4rem;
}
.share-modal-subtitle {
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 1.2rem;
  line-height: 1.5;
}
.share-modal-options {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
}
.share-opt-btn {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border-color);
  background: var(--bg-solid);
  cursor: pointer;
  transition: var(--transition);
  font-family: var(--font-body);
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 600;
  text-align: left;
}
.share-opt-btn:hover {
  border-color: var(--accent-primary);
  background: var(--accent-soft);
  transform: translateY(-1px);
}
.share-opt-btn.wa {
  background: var(--wa-bg);
  color: var(--feature-text);
  border-color: transparent;
  box-shadow: var(--shadow-sm);
}
.share-opt-btn.wa:hover {
  filter: brightness(1.07);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37,211,102,0.45);
}
.share-opt-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}
.share-modal-dismiss {
  width: 100%;
  padding: 0.6rem;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.82rem;
  cursor: pointer;
  transition: var(--transition);
}
.share-modal-dismiss:hover { color: var(--text-secondary); }

/* ---- Share copy feedback ---- */
.copy-toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: rgba(13,31,18,0.92);
  color: #fff;
  padding: 0.5rem 1.1rem;
  border-radius: 20px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  z-index: 9999;
  opacity: 0;
  transition: all 0.3s ease;
  pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 25%, transparent);
}
.copy-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* =========================================
   DONASI — Rekap Periodik
   ========================================= */
.dn-rekap-state {
  text-align: center; color: var(--text-muted); font-size: 0.85rem;
  padding: 1.5rem 1rem; background: var(--bg-card); border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
}
.dn-rekap-card {
  background: var(--bg-solid); border: 1px solid var(--border-color);
  border-left: 3px solid var(--accent-primary);
  border-radius: var(--radius-sm); padding: 0.9rem 1.1rem; margin-bottom: 0.6rem;
}
.dn-rekap-date { font-size: 0.78rem; color: var(--text-muted); font-weight: 600; margin-bottom: 0.3rem; }
.dn-rekap-stats { display: flex; gap: 1.2rem; margin-bottom: 0.4rem; }
.dn-rekap-stat strong { display: block; font-size: 1.05rem; color: var(--accent-primary); font-weight: 800; }
.dn-rekap-stat span { font-size: 0.7rem; color: var(--text-muted); }
.dn-rekap-summary { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.6; }

/* Ranking Donatur (tasks/019) */
.dn-rank-row {
  display: flex; align-items: center; gap: 0.7rem;
  background: var(--bg-solid); border: 1px solid var(--border-color);
  border-radius: var(--radius-sm); padding: 0.7rem 0.9rem; margin-bottom: 0.5rem;
}
.dn-rank-badge {
  display: flex; align-items: center; justify-content: center;
  min-width: 28px; height: 28px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent-gold) 15%, transparent); color: var(--accent-gold);
  font-size: 0.78rem; font-weight: 800;
}
.dn-rank-name { flex: 1; font-size: 0.85rem; color: var(--text-primary); font-weight: 600; }
.dn-rank-amount { font-size: 0.85rem; color: var(--accent-primary); font-weight: 800; }

/* =========================================
   ARTIKEL
   ========================================= */
.artikel-filter-bar {
  display: flex; gap: 0.5rem; overflow-x: auto; scrollbar-width: none;
  padding: 0 0.8rem 0.9rem; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
}
.artikel-filter-bar::-webkit-scrollbar { display: none; }
/* Chip kategori — sama dengan chip sub-tab: pil solid 44px */
.artikel-filter-chip {
  flex-shrink: 0; min-height: 44px; padding: 0.5rem 1rem;
  border: 1px solid var(--border-color); border-radius: var(--radius-pill);
  background: var(--bg-solid); color: var(--text-secondary);
  font-family: var(--font-body); font-size: 0.82rem; font-weight: 600;
  cursor: pointer; transition: var(--transition-fast); white-space: nowrap;
}
.artikel-filter-chip:hover { border-color: var(--accent-primary); color: var(--text-primary); }
.artikel-filter-chip.active {
  border-color: transparent;
  background: var(--feature-bg);
  color: var(--feature-text); font-weight: 700;
}

/* Daftar artikel = grid. Mobile 1 kolom; desktop 2–3 kolom (lihat media
   query di bawah) supaya satu gambar 16:9 tidak memenuhi layar lebar.
   Paginasi & pesan "belum ada artikel" dibuat membentang penuh. Markup
   dari renderArtikelList() di artikel-meta.js (file GENERATED — jangan
   diedit; layout cukup lewat CSS ini). */
#artikel-list-view { display: grid; grid-template-columns: 1fr; gap: 0.8rem; }
#artikel-list-view > .artikel-pagination,
#artikel-list-view > p { grid-column: 1 / -1; }
/* Media query sengaja diletakkan SETELAH rule dasar di atas — kalau ditaruh
   di blok @media desktop umum (yang ada lebih awal di file), rule dasar
   1 kolom ini menimpanya karena spesifisitasnya sama. */
@media (min-width: 900px) {
  #artikel-list-view { grid-template-columns: repeat(2, 1fr); gap: 1rem; max-width: 1100px; margin: 0 auto; }
  /* Halaman detail dibatasi 680px seperti kolom baca Bacaan */
  #artikel-detail-view { max-width: 680px; margin: 0 auto; }
  .artikel-filter-bar { max-width: 1100px; margin: 0 auto; }
}
@media (min-width: 1200px) {
  #artikel-list-view { grid-template-columns: repeat(3, 1fr); }
}
.artikel-card {
  display: flex; flex-direction: column; width: 100%; text-align: left; cursor: pointer;
  background: var(--bg-solid); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); padding: 1rem 1.1rem;
  box-shadow: var(--shadow-sm); overflow: hidden;
  transition: border-color 0.2s ease; font-family: var(--font-body);
}
.artikel-card:hover { border-color: var(--accent-primary); }
.artikel-card-gambar {
  display: block; width: calc(100% + 2.2rem); aspect-ratio: 16 / 9; object-fit: cover;
  margin: -1rem -1.1rem 0.8rem; border-radius: 0;
}
.artikel-card-kategori { font-size: 0.7rem; font-weight: 700; color: var(--accent-primary); text-transform: uppercase; letter-spacing: 0.5px; }
.artikel-card-judul { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); margin: 0.3rem 0; }
.artikel-card-ringkasan { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.5; }
.artikel-card-tanggal { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.4rem; }
.artikel-detail-judul { font-size: 1.3rem; font-weight: 800; color: var(--text-primary); margin-bottom: 0.4rem; }
.artikel-detail-meta { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.8rem; }
.artikel-detail-aksi { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.artikel-share-btn {
  display: inline-flex; align-items: center; gap: 0.35rem; margin-bottom: 0;
  min-height: 44px; padding: 0.5rem 1rem; background: var(--accent-soft); border: none; border-radius: var(--radius-pill);
  color: var(--accent-primary); font-family: var(--font-body);
  font-size: 0.82rem; font-weight: 700; cursor: pointer; transition: var(--transition-fast);
}
/* Hover pakai --feature-bg: teks putih di atas --accent-primary tema gelap ~2:1 */
.artikel-share-btn:hover { background: var(--feature-bg); color: var(--feature-text); }

/* ============================================
   LAPOR KESALAHAN KONTEN (tasks/007)
   ============================================ */
.lapor-kesalahan-trigger {
  display: inline-flex; align-items: center; gap: 0.35rem;
  min-height: 44px; padding: 0.5rem 1rem; margin-top: 0.6rem;
  background: transparent; border: 1px dashed var(--border-color); border-radius: var(--radius-pill);
  color: var(--text-secondary); font-family: var(--font-body);
  font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: var(--transition-fast);
}
.lapor-kesalahan-trigger:hover { border-color: var(--accent-gold); color: var(--gold-text); }
/* Di dalam .artikel-detail-aksi (flex baris bareng tombol Bagikan) —
   tidak perlu margin-top sendiri, sudah ikut align lewat gap induknya. */
.artikel-detail-aksi .lapor-kesalahan-trigger { margin-top: 0; }

.lapor-modal-desc { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 0.8rem; text-align: center; }
.lapor-modal-halaman {
  font-size: 0.78rem; font-weight: 700; color: var(--accent-primary);
  background: var(--accent-soft); border-radius: var(--radius-sm);
  padding: 0.5rem 0.8rem; margin-bottom: 1rem; text-align: center;
}
.lapor-status-msg {
  font-size: 0.8rem; padding: 0.6rem 0.8rem; border-radius: var(--radius-sm);
  margin-bottom: 0.8rem; line-height: 1.5;
}
.lapor-status-msg.sukses { background: color-mix(in srgb, var(--accent-primary) 12%, transparent); color: var(--accent-primary); }
.lapor-status-msg.gagal  { background: rgba(201,168,50,0.12); color: var(--gold-text); }
.artikel-detail-gambar {
  display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--radius-lg);
}
.artikel-detail-kredit { font-size: 0.68rem; color: var(--text-muted); margin: 0.35rem 0 1.2rem; text-align: right; }
.artikel-detail-body { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.8; }
.artikel-detail-body p { margin-bottom: 0.9rem; }
.artikel-detail-body ul { margin: 0 0 0.9rem 1.3rem; }
.artikel-detail-body li { margin-bottom: 0.35rem; }
.artikel-detail-body h2 { font-size: 1.1rem; font-weight: 800; color: var(--text-primary); margin: 1.5rem 0 0.6rem; }
.artikel-detail-body h3 { font-size: 0.95rem; font-weight: 700; color: var(--accent-primary); margin: 1.1rem 0 0.35rem; }
.artikel-detail-sumber {
  margin-top: 1.5rem; padding: 0.9rem 1.1rem;
  background: color-mix(in srgb, var(--accent-gold) 8%, var(--bg-solid));
  border: 1px solid color-mix(in srgb, var(--accent-gold) 30%, transparent);
  border-radius: var(--radius-lg); font-size: 0.82rem; color: var(--text-secondary);
}
.artikel-detail-sumber a { color: var(--gold-text); font-weight: 700; }

/* Paginasi daftar artikel — 6 per halaman, bukan list memanjang tanpa akhir */
.artikel-pagination {
  display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
  margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--border-color);
}
.artikel-page-nav {
  min-height: 44px; padding: 0.55rem 1.1rem; background: var(--accent-soft); border: none; border-radius: var(--radius-pill);
  color: var(--accent-primary); font-family: var(--font-body); font-size: 0.82rem; font-weight: 700;
  cursor: pointer; transition: var(--transition-fast);
}
.artikel-page-nav:hover:not(:disabled) { background: var(--feature-bg); color: var(--feature-text); }
.artikel-page-nav:disabled { opacity: 0.35; cursor: default; }
.artikel-page-numbers { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; justify-content: center; }
/* Nomor halaman — lingkaran 44px (sebelumnya 32px, di bawah target sentuh) */
.artikel-page-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-color);
  background: var(--bg-solid); color: var(--text-secondary); font-family: var(--font-body);
  font-size: 0.85rem; font-weight: 700; cursor: pointer; transition: var(--transition-fast);
  font-variant-numeric: tabular-nums;
}
.artikel-page-btn:hover { border-color: var(--accent-primary); }
.artikel-page-btn.active { background: var(--feature-bg); border-color: transparent; color: var(--feature-text); }
.artikel-page-dots { color: var(--text-muted); font-size: 0.8rem; padding: 0 0.2rem; }

/* Baca Juga — related posts di bawah tiap artikel */
.artikel-related { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--border-color); }
.artikel-related-label {
  font-size: 1rem; font-weight: 800; letter-spacing: -0.1px;
  color: var(--text-primary); margin-bottom: 0.8rem;
}
.artikel-related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.artikel-related-card {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--bg-solid); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); padding: 0.7rem; font-family: var(--font-body);
  box-shadow: var(--shadow-sm); overflow: hidden;
  transition: border-color 0.2s ease;
}
.artikel-related-card:hover { border-color: var(--accent-primary); }
.artikel-related-gambar {
  display: block; width: calc(100% + 1.4rem); aspect-ratio: 16 / 9; object-fit: cover;
  margin: -0.7rem -0.7rem 0.5rem; border-radius: 0;
}
.artikel-related-kategori { font-size: 0.68rem; font-weight: 700; color: var(--accent-primary); text-transform: uppercase; letter-spacing: 0.4px; }
.artikel-related-judul {
  font-size: 0.8rem; font-weight: 700; color: var(--text-primary); margin-top: 0.25rem; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ============================================
   KREDIT & LOG VERSI
   ============================================ */
.kredit-intro {
  font-size: 0.85rem; color: var(--text-secondary); line-height: 1.7;
  padding-bottom: 1rem; margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--border-color);
}
.kredit-section-judul {
  font-size: 0.95rem; font-weight: 800; color: var(--text-primary);
  margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem;
}
.kredit-versi-kini {
  font-size: 0.72rem; font-weight: 700; color: var(--accent-primary);
  background: var(--accent-soft); padding: 0.15rem 0.5rem; border-radius: 999px;
}
.kredit-grup { margin-top: 1.2rem; }
.kredit-grup-judul {
  font-size: 0.78rem; font-weight: 700; color: var(--accent-gold);
  text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.7rem;
}
.kredit-item {
  padding: 0.7rem 0.9rem; margin-bottom: 0.5rem;
  background: var(--accent-soft); border-radius: var(--radius-md);
}
.kredit-item-nama { font-size: 0.88rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.2rem; }
.kredit-item-nama a { color: var(--accent-primary); text-decoration: none; }
.kredit-item-nama a:hover { text-decoration: underline; }
.kredit-item-detail { font-size: 0.8rem; color: var(--text-muted); line-height: 1.65; }
.kredit-item-detail a { color: var(--accent-primary); text-decoration: none; }
.kredit-item-detail a:hover { text-decoration: underline; }

.changelog-item {
  padding-left: 0.9rem; margin-bottom: 1.3rem;
  border-left: 2px solid var(--border-color);
}
.changelog-item:last-child { margin-bottom: 0; }
.changelog-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.changelog-versi { font-size: 0.9rem; font-weight: 800; color: var(--text-primary); }
.changelog-badge {
  font-size: 0.62rem; font-weight: 700; color: var(--feature-text);
  background: var(--feature-bg); padding: 0.12rem 0.45rem;
  border-radius: 999px; text-transform: uppercase; letter-spacing: 0.3px;
}
.changelog-tanggal { font-size: 0.74rem; color: var(--text-muted); margin-left: auto; }
.changelog-ul { margin: 0; padding-left: 1.1rem; }
.changelog-ul li {
  font-size: 0.81rem; color: var(--text-secondary);
  line-height: 1.65; margin-bottom: 0.35rem;
}

/* ============================================
   KOMPONEN BERSAMA — list row, kartu aktif, badge sumber, navigasi
   tanggal. Dipakai lintas halaman (Jadwal Sholat, Masjid Terdekat, dst)
   supaya satu bahasa visual, bukan gaya khusus per-fitur.
   ============================================ */
.list-row-card {
  display: flex; align-items: center; gap: 0.8rem;
  background: var(--bg-solid); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); padding: 0.8rem 1rem;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.list-row-icon { font-size: 1.3rem; flex-shrink: 0; width: 1.6rem; text-align: center; }
.list-row-main { flex: 1; min-width: 0; }
.list-row-label { font-size: 0.9rem; font-weight: 700; color: var(--text-primary); }
.list-row-sublabel { font-size: 0.76rem; color: var(--text-muted); margin-top: 0.1rem; }
.list-row-value { font-size: 0.95rem; font-weight: 800; color: var(--text-primary); flex-shrink: 0; text-align: right; }

.list-row-card.active { border-color: var(--accent-primary); border-width: 1.5px; background: var(--accent-soft); }
.list-row-badge {
  font-size: 0.62rem; font-weight: 700; color: var(--feature-text);
  background: var(--feature-bg); padding: 0.15rem 0.5rem;
  border-radius: 999px; text-transform: uppercase; letter-spacing: 0.3px;
  margin-left: 0.5rem; flex-shrink: 0;
}

.source-badge {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: 0.68rem; font-weight: 700; color: var(--accent-primary);
  background: var(--accent-soft); padding: 0.2rem 0.55rem;
  border-radius: 999px; white-space: nowrap;
}

.date-nav-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.6rem; margin: 0.9rem 1.2rem 0.6rem;
}
.date-nav-btn {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--border-color); background: var(--bg-solid);
  color: var(--text-primary); font-size: 1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.date-nav-btn:hover { background: var(--accent-soft); }
.date-nav-btn:disabled { opacity: 0.35; cursor: default; }
.date-nav-center { text-align: center; flex: 1; }
.date-nav-masehi { font-size: 0.92rem; font-weight: 700; color: var(--text-primary); }
.date-nav-hijriah { font-size: 0.74rem; color: var(--text-muted); margin-top: 0.1rem; }

/* ============================================
   KALENDER HIJRIAH (kalender.js)
   ============================================ */
.kalender-hari-ini {
  margin: 0 0.8rem 1rem; padding: 1.1rem 1.2rem; text-align: center;
  background: var(--feature-bg);
  border-radius: var(--radius-lg); color: var(--feature-text);
  box-shadow: var(--shadow-sm);
}
.kalender-hariini-label { font-size: 0.72rem; opacity: 0.85; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; }
.kalender-hariini-hijri { font-size: 1.2rem; font-weight: 800; margin-top: 0.3rem; }
.kalender-hariini-masehi { font-size: 0.8rem; opacity: 0.9; margin-top: 0.15rem; }

.kalender-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.6rem; margin: 0 0.8rem 0.7rem;
}
.kalender-nav-btn {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--border-color); background: var(--bg-solid);
  color: var(--text-primary); font-size: 1.1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition-fast);
}
.kalender-nav-btn:hover { background: var(--accent-soft); }
.kalender-nav-label {
  flex: 1; text-align: center; padding: 0.5rem; border: none; background: none;
  font-family: var(--font-body); font-size: 1rem; font-weight: 800;
  color: var(--text-primary); cursor: pointer; border-radius: var(--radius-sm);
}
.kalender-nav-label:hover { background: var(--accent-soft); }

.kalender-hari-header {
  display: grid; grid-template-columns: repeat(7, 1fr);
  margin: 0 0.8rem; padding-bottom: 0.4rem;
}
.kalender-hari-header span {
  text-align: center; font-size: 0.7rem; font-weight: 800;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px;
}

.kalender-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px;
  margin: 0 0.8rem;
}
.kalender-sel {
  aspect-ratio: 1; border-radius: var(--radius-sm);
  background: var(--bg-solid); border: 1px solid var(--border-color);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.1rem; padding: 0.2rem;
}
.kalender-sel.luar-bulan { opacity: 0.35; }
/* --feature-bg (bukan --accent-primary): teks di dalamnya putih, dan
   --accent-primary di tema gelap hijau muda — kontrasnya cuma ~2:1. */
.kalender-sel.hari-ini {
  background: var(--feature-bg); border-color: transparent;
}
.kalender-sel.hari-ini .kalender-sel-masehi,
.kalender-sel.hari-ini .kalender-sel-hijri { color: var(--feature-text); }
.kalender-sel.tanggal-penting:not(.hari-ini) {
  background: var(--accent-soft); border-color: var(--accent-gold);
}
.kalender-sel-masehi { font-size: 0.85rem; font-weight: 800; color: var(--text-primary); line-height: 1; }
.kalender-sel-hijri { font-size: 0.62rem; color: var(--text-muted); line-height: 1; }
.kalender-sel.hari-ini .kalender-sel-hijri { opacity: 0.9; }

.kalender-penting-wrap { margin: 1rem 0.8rem 0; }
.kalender-penting-loading, .kalender-penting-kosong {
  font-size: 0.82rem; color: var(--text-muted); text-align: center; padding: 0.8rem 0;
}
.kalender-penting-label {
  font-size: 0.8rem; font-weight: 800; color: var(--text-secondary);
  letter-spacing: 0.3px; margin-bottom: 0.6rem;
}
.kalender-penting-item {
  display: flex; align-items: center; gap: 0.7rem;
  background: var(--bg-solid); border: 1px solid var(--border-color);
  border-left: 3px solid var(--accent-gold);
  border-radius: var(--radius-md); padding: 0.7rem 0.9rem; margin-bottom: 0.55rem;
}
.kalender-penting-icon { font-size: 1.3rem; flex-shrink: 0; }
.kalender-penting-teks { display: flex; flex-direction: column; }
.kalender-penting-teks strong { font-size: 0.85rem; color: var(--text-primary); }
.kalender-penting-teks span { font-size: 0.74rem; color: var(--text-muted); margin-top: 0.1rem; }
.kalender-offline-note { font-size: 0.72rem; color: var(--text-muted); line-height: 1.5; margin-top: 0.6rem; }
.kalender-sumber { font-size: 0.72rem; color: var(--text-muted); text-align: center; margin: 1rem 0.8rem; line-height: 1.5; }
.kalender-sumber a { color: var(--accent-primary); font-weight: 700; text-decoration: none; }

/* ============================================
   JADWAL SHOLAT
   ============================================ */
.js-kota-dropdown {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--bg-solid); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  max-height: 220px; overflow-y: auto; z-index: 20;
}
.js-kota-dropdown.hidden { display: none; }
.js-kota-item {
  padding: 0.65rem 0.9rem; font-size: 0.85rem; color: var(--text-primary);
  cursor: pointer; border-bottom: 1px solid var(--border-color);
}
.js-kota-item:last-child { border-bottom: none; }
.js-kota-item:hover, .js-kota-item.active { background: var(--accent-soft); }
.js-kota-empty { padding: 0.9rem; text-align: center; color: var(--text-muted); font-size: 0.82rem; }

.js-jadwal-list {
  display: flex; flex-direction: column; gap: 0.5rem;
  margin-top: 1rem;
}
.js-jadwal-note {
  margin-top: 0.9rem; text-align: center; font-size: 0.76rem; color: var(--text-muted);
}
.js-jadwal-empty {
  text-align: center; color: var(--text-muted); font-size: 0.85rem;
  padding: 2rem 1.2rem;
}

/* Pengingat Waktu Sholat — lihat pengingat.js */
.pengingat-wrap { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--border-color); }
.pengingat-toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  min-height: 52px; padding: 0.7rem 0.9rem; background: var(--bg-solid); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); cursor: pointer; transition: var(--transition-fast);
  font-family: var(--font-body); font-size: 0.85rem; font-weight: 700; color: var(--text-primary);
}
.pengingat-toggle.active { border-color: var(--accent-primary); background: var(--accent-soft); color: var(--accent-primary); }
.pengingat-toggle-switch {
  width: 36px; height: 20px; border-radius: 20px; background: var(--border-color);
  position: relative; flex-shrink: 0; transition: background 0.2s ease;
}
.pengingat-toggle-switch::after {
  content: ''; position: absolute; width: 14px; height: 14px; background: #fff; border-radius: 50%;
  top: 2px; left: 2px; transition: transform 0.2s ease; box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.pengingat-toggle.active .pengingat-toggle-switch { background: var(--accent-primary); }
.pengingat-toggle.active .pengingat-toggle-switch::after { transform: translateX(16px); }
.pengingat-hint { margin-top: 0.5rem; font-size: 0.74rem; color: var(--text-muted); line-height: 1.5; text-align: center; }
.pengingat-status {
  font-size: 0.78rem; color: var(--text-muted); text-align: center; line-height: 1.6;
  padding: 0.7rem 0.9rem; background: var(--bg-solid); border-radius: var(--radius-md);
}
.pengingat-status.pengingat-denied { color: var(--accent-red); }
.js-jadwal-lokasi-row {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}

/* ============================================
   ARAH KIBLAT
   ============================================ */
.kiblat-status { font-size: 0.88rem; color: var(--text-secondary); margin-bottom: 1.2rem; min-height: 1.3em; }
.kiblat-compass-wrap { margin: 0 auto 1.2rem; }
.kiblat-compass-wrap.hidden { display: none; }
.kiblat-compass {
  position: relative; width: 220px; height: 220px; margin: 0 auto;
  border-radius: 50%; border: 3px solid var(--border-color);
  background: var(--accent-soft);
  display: flex; align-items: center; justify-content: center;
}
.kiblat-compass::before {
  content: 'U'; position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  font-size: 0.78rem; font-weight: 700; color: var(--text-muted);
}
.kiblat-needle {
  font-size: 2.6rem; transition: transform 0.2s ease-out;
  transform: rotate(0deg);
}
.kiblat-derajat { font-size: 0.92rem; font-weight: 700; color: var(--accent-primary); margin-top: 0.6rem; }
.kiblat-disclaimer {
  margin-top: 1.2rem; font-size: 0.76rem; color: var(--text-muted);
  line-height: 1.6; text-align: center;
  background: var(--accent-soft); border-radius: var(--radius-md);
  padding: 0.8rem 1rem;
}

/* ============================================
   MASJID TERDEKAT
   ============================================ */
.btn-masjid-expand {
  display: block; margin: 0.8rem auto 0; background: none; border: none;
  color: var(--accent-primary); font-size: 0.85rem; font-weight: 600;
  cursor: pointer; text-decoration: underline;
}
.btn-masjid-expand.hidden { display: none; }

.masjid-map-card { padding: 0; overflow: hidden; }
.masjid-map { width: 100%; height: 280px; z-index: 1; }

.masjid-list { display: flex; flex-direction: column; gap: 0.6rem; margin: 0.9rem 1.2rem; }
.masjid-item {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  background: var(--bg-solid); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); padding: 0.8rem 1rem; cursor: pointer;
  transition: background 0.15s ease;
}
.masjid-item:hover { background: var(--accent-soft); }
.masjid-item.active { border-color: var(--accent-primary); border-width: 1.5px; background: var(--accent-soft); }
.masjid-item-nama { font-size: 0.9rem; font-weight: 700; color: var(--text-primary); }
.masjid-item-jarak { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.15rem; }
.btn-masjid-rute {
  flex-shrink: 0; font-size: 0.78rem; font-weight: 700; color: var(--feature-text);
  background: var(--feature-bg); padding: 0.6rem 0.95rem; border-radius: var(--radius-pill);
  text-decoration: none; white-space: nowrap;
}
.masjid-item-rating {
  margin-left: 0.5rem; color: var(--accent-gold); font-weight: 700;
}

/* Testimoni masjid — strip card yang bisa di-swipe (scroll-snap native,
   tanpa pustaka JS tambahan), muncul di bawah item yang punya ulasan. */
.masjid-review-swipe {
  display: flex; gap: 0.6rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0 0.2rem 0.3rem; margin: -0.2rem 1.2rem 0.6rem;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.masjid-review-swipe::-webkit-scrollbar { display: none; }
.masjid-review-card {
  flex: 0 0 82%; scroll-snap-align: start;
  background: var(--accent-soft); border: 1px solid var(--glass-border);
  border-radius: var(--radius-md); padding: 0.8rem 1rem;
}
.masjid-review-stars { font-size: 0.8rem; margin-bottom: 0.3rem; }
.masjid-review-text { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.55; font-style: italic; }
.masjid-review-nama { font-size: 0.74rem; color: var(--text-muted); margin-top: 0.4rem; font-weight: 600; }

/* ============================================
   TWIBBON UCAPAN DUKACITA
   ============================================ */
.twibbon-privasi {
  font-size: 0.78rem; color: var(--text-muted); line-height: 1.6; margin-top: 0.3rem;
}
.twibbon-preview-card { display: flex; flex-direction: column; align-items: center; }
.twibbon-canvas {
  width: 100%; max-width: 360px; aspect-ratio: 1 / 1; border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.twibbon-actions {
  display: flex; gap: 0.6rem; width: 100%; max-width: 360px; margin-top: 1.2rem;
}
.twibbon-actions .btn-primary { flex: 1; }
.twibbon-actions .btn-primary.hidden { display: none; }

.tt-pilih-wrap {
  display: flex; gap: 0.6rem; overflow-x: auto; padding: 0.2rem 0.1rem;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.tt-pilih-wrap::-webkit-scrollbar { display: none; }
.tt-pilih-wrap.hidden { display: none; }
.tt-pilih-btn {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
  background: none; border: none; cursor: pointer; font-family: var(--font-body);
  font-size: 0.68rem; font-weight: 600; color: var(--text-muted); padding: 0.2rem;
}
.tt-pilih-swatch {
  width: 52px; height: 52px; border-radius: var(--radius-sm);
  background-size: cover; background-position: center;
  border: 2px solid transparent; transition: var(--transition-fast);
}
.tt-pilih-default { background: #0d1f12; } /* contoh warna tema (swatch) */
.tt-pilih-btn.active .tt-pilih-swatch { border-color: var(--accent-primary); }
.tt-pilih-btn.active { color: var(--accent-primary); }

/* ============================================
   FAVORIT SAYA — bookmark ayat, doa & Asmaul Husna
   ============================================ */
.favorit-modal-content { max-height: 85vh; display: flex; flex-direction: column; }
.favorit-list {
  overflow-y: auto; display: flex; flex-direction: column; gap: 0.6rem;
  margin-bottom: 1rem; padding-right: 0.2rem;
}
.favorit-empty {
  text-align: center; color: var(--text-muted); font-size: 0.85rem;
  line-height: 1.7; padding: 2rem 1rem;
}
.favorit-empty-icon { display: block; font-size: 2.2rem; margin-bottom: 0.5rem; }
.favorit-card {
  display: flex; align-items: stretch; gap: 0.4rem;
  background: var(--bg-solid); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm);
}
.favorit-card-body {
  flex: 1; min-width: 0; text-align: left; background: none; border: none;
  cursor: pointer; padding: 0.8rem 0.9rem; font-family: var(--font-body);
  display: flex; flex-direction: column; gap: 0.25rem; transition: var(--transition-fast);
}
.favorit-card-body:hover { background: var(--accent-soft); }
.favorit-tag {
  font-size: 0.68rem; font-weight: 700; color: var(--accent-gold);
  text-transform: uppercase; letter-spacing: 0.4px;
}
.favorit-arab {
  font-size: 0.9rem; font-weight: 700; color: var(--text-primary); line-height: 1.4;
}
.favorit-sub {
  font-size: 0.76rem; color: var(--text-muted); line-height: 1.5;
}
.favorit-remove-btn {
  flex-shrink: 0; width: 38px; border: none; cursor: pointer;
  background: transparent; color: var(--text-muted); font-size: 0.9rem;
  transition: var(--transition-fast);
}
.favorit-remove-btn:hover { background: rgba(220, 80, 80, 0.12); color: #dc5050; }

@keyframes favoritHighlightPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-gold) 0%, transparent); }
  30% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent-gold) 35%, transparent); }
}
.favorit-highlight { animation: favoritHighlightPulse 1.5s ease; border-color: var(--accent-gold) !important; }

/* ============================================
   MINI-PLAYER MUROTTAL — mengambang lintas halaman
   ============================================ */
.murottal-mini-player {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 5.5rem; z-index: 90;
  display: flex; align-items: center; gap: 0.5rem;
  background: var(--bg-solid);
border: 1px solid var(--border-color); border-radius: 999px;
  padding: 0.45rem 0.55rem 0.45rem 0.9rem; box-shadow: var(--shadow-md);
  max-width: min(92vw, 380px); width: max-content;
  animation: mmpSlideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.murottal-mini-player.hidden { display: none; }
@keyframes mmpSlideUp {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.mmp-info {
  display: flex; align-items: center; gap: 0.55rem; min-width: 0; flex: 1;
  background: none; border: none; cursor: pointer; text-align: left; padding: 0;
  font-family: var(--font-body);
}
.mmp-icon { font-size: 1.15rem; flex-shrink: 0; }
.mmp-text { display: flex; flex-direction: column; min-width: 0; gap: 0.05rem; }
.mmp-surah { font-size: 0.8rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mmp-ayat { font-size: 0.68rem; color: var(--text-muted); }
.mmp-toggle-btn, .mmp-close-btn, .mmp-speed-btn {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 0.95rem; transition: var(--transition-fast);
}
.mmp-toggle-btn {
  background: var(--feature-bg); color: var(--feature-text);
}
.mmp-toggle-btn:hover { transform: scale(1.06); }
.mmp-close-btn { background: var(--accent-soft); color: var(--text-muted); font-size: 0.8rem; }
.mmp-close-btn:hover { background: rgba(220, 80, 80, 0.15); color: #dc5050; }
.mmp-speed-btn {
  width: auto; min-width: 34px; padding: 0 0.5rem;
  background: var(--accent-soft); color: var(--accent-primary);
  font-size: 0.72rem; font-weight: 700; font-family: var(--font-body);
}
.mmp-speed-btn:hover { background: var(--feature-bg); color: var(--feature-text); }

@media (min-width: 900px) {
  .murottal-mini-player { bottom: 1.5rem; }
}