/* =====================================================================
   Aplikasi Muslim Harian — Stylesheet Utama
   Mobile-first (tampilan seperti app Android), tetap rapi di desktop.
   ===================================================================== */
:root{
  --emerald-deep:#0b3d2e;
  --emerald-mid:#154f3c;
  --emerald-glow:#1f6b50;
  --gold:#c9a227;
  --gold-light:#e8cd73;
  --parchment:#f8f1de;
  --parchment-deep:#efe4c4;
  --maroon:#7a1f3d;
  --ink:#20281f;
  --ink-soft:#4d5a4a;
  --tj-mad:#1c7a4d;
  --tj-idgham:#8a4dab;
  --tj-ghunnah:#1d63b0;
  --tj-qalqalah:#c0392b;
  --tj-ikhfa:#c07a12;
  --tj-bighunnah:#0f8f83;
  --tj-bilaghunnah:#5b4fc4;
  --tj-iqlab:#c23b7a;
}

*{ box-sizing:border-box; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}
html,body{ margin:0; padding:0; }
body{
  min-height:100vh;
  background:radial-gradient(ellipse at top, #123c2c 0%, #0a2a1f 55%, #071e17 100%);
  background-attachment:fixed;
  padding:16px 12px 90px;
  font-family:'Inter', sans-serif;
  color:var(--ink);
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

/* App shell: mobile-first (max-width phone-like), lebar & rapi di desktop */
.app-shell{ width:100%; max-width:480px; margin:0 auto; position:relative; }
@media (min-width:900px){
  body{ padding-top:40px; }
  .app-shell{ max-width:760px; }
}

.manuscript{
  position:relative;
  background:linear-gradient(180deg, var(--parchment) 0%, var(--parchment-deep) 100%);
  border-radius:22px;
  padding:24px 18px 90px;
  box-shadow:
    0 0 0 1px rgba(201,162,39,0.35),
    0 30px 70px -20px rgba(0,0,0,0.65),
    inset 0 0 0 8px #fffdf6,
    inset 0 0 0 10px var(--gold);
  overflow:hidden;
  min-height:70vh;
}
@media (min-width:900px){
  .manuscript{ border-radius:26px; padding:40px 44px 60px; }
}

.corner-tl,.corner-tr,.corner-bl,.corner-br{
  position:absolute; width:44px; height:44px; border:2px solid var(--gold); opacity:0.5; pointer-events:none;
}
.corner-tl{ top:14px; left:14px; border-right:none; border-bottom:none; }
.corner-tr{ top:14px; right:14px; border-left:none; border-bottom:none; }
.corner-bl{ bottom:14px; left:14px; border-right:none; border-top:none; }
.corner-br{ bottom:14px; right:14px; border-left:none; border-top:none; }

.credit{ text-align:center; color:rgba(248,241,222,0.45); font-size:0.72rem; margin-top:20px; }

/* ---------- Top bar ---------- */
.topbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px; }
.btn-back{
  display:inline-flex; align-items:center; gap:6px;
  background:none; border:1px solid rgba(122,31,61,0.35); color:var(--maroon);
  font-size:0.82rem; font-weight:600; padding:8px 14px; border-radius:999px; cursor:pointer;
  transition:background 0.2s ease, transform 0.15s ease;
}
.btn-back:active{ transform:scale(0.96); }
.btn-back:hover{ background:rgba(122,31,61,0.08); }

/* ---------- Typography helpers ---------- */
.eyebrow{ font-size:0.72rem; letter-spacing:0.3em; text-transform:uppercase; color:var(--maroon); font-weight:600; }
.page-title{ font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:600; font-size:1.7rem; color:var(--emerald-deep); margin:6px 0 2px; }
.divider{ display:flex; align-items:center; gap:12px; margin:22px 0; color:var(--gold); }
.divider .line{ flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--gold), transparent); }
.divider .mark{ font-family:'Amiri', serif; font-size:1.1rem; opacity:0.9; }
.hint{ text-align:center; font-size:0.8rem; color:var(--ink-soft); margin:14px 0 16px; font-style:italic; }

/* ---------- HOME ---------- */
.hero-widget{
  position:relative; border-radius:18px; overflow:hidden; padding:22px 20px 20px;
  background:
    linear-gradient(160deg, rgba(11,25,20,0.55), rgba(11,25,20,0.75)),
    radial-gradient(circle at 15% 20%, rgba(232,205,115,0.25), transparent 45%),
    linear-gradient(135deg, #163a2f, #0a2118 70%);
  color:#fdf8ea; margin-bottom:18px;
  box-shadow:0 14px 34px -14px rgba(0,0,0,0.55);
}
.hero-widget .moon{ font-size:1.4rem; }
.hero-widget .prayer-name{ font-size:0.82rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold-light); margin-top:6px; }
.hero-widget .countdown{ font-family:'Cormorant Garamond', serif; font-weight:600; font-size:clamp(2.4rem,10vw,3.2rem); line-height:1.1; margin-top:2px; }
.hero-widget .sub-row{ display:flex; justify-content:space-between; align-items:flex-end; margin-top:16px; gap:10px; font-size:0.76rem; color:rgba(253,248,234,0.8); }
.hero-widget .sub-row .loc{ max-width:60%; line-height:1.4; }
.hero-widget .sub-row .right{ text-align:right; }
.hero-widget .hero-msg{ font-size:0.85rem; color:rgba(253,248,234,0.85); line-height:1.6; text-align:center; }
.hero-widget .hero-msg button{
  margin-top:10px; background:var(--gold); color:#1a1206; border:none; padding:8px 16px;
  border-radius:999px; font-size:0.78rem; font-weight:600; cursor:pointer;
}

.home-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:6px; }
@media (min-width:600px){ .home-grid{ grid-template-columns:repeat(4,1fr); } }
.menu-card{
  background:rgba(255,255,255,0.45); border:1px solid rgba(201,162,39,0.3);
  border-radius:16px; padding:18px 10px; text-align:center; cursor:pointer;
  transition:background 0.2s ease, transform 0.15s ease;
}
.menu-card:hover{ background:rgba(201,162,39,0.18); transform:translateY(-2px); }
.menu-card:active{ transform:scale(0.97); }
.menu-card .icon{ font-size:1.7rem; margin-bottom:8px; }
.menu-card .label{ font-size:0.82rem; font-weight:600; color:var(--emerald-deep); line-height:1.3; }

/* ---------- Search / list ---------- */
.search-box{
  width:100%; padding:12px 16px; border-radius:12px; border:1px solid rgba(122,31,61,0.3);
  background:rgba(255,255,255,0.55); font-size:0.92rem; margin-bottom:18px; outline:none; color:var(--ink);
}
.search-box:focus{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,162,39,0.2); }

.surah-grid{ display:flex; flex-direction:column; gap:8px; }
.surah-item{
  display:flex; align-items:center; gap:14px; padding:12px 14px; border-radius:12px;
  background:rgba(255,255,255,0.4); border:1px solid rgba(201,162,39,0.25);
  cursor:pointer; transition:background 0.2s ease, transform 0.15s ease;
}
.surah-item:hover{ background:rgba(201,162,39,0.15); transform:translateX(2px); }
.surah-item:active{ transform:scale(0.98); }
.surah-num{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%; border:1.5px solid var(--gold);
  background:radial-gradient(circle at 35% 30%, #fff8e6, var(--parchment) 70%);
  color:var(--maroon); font-weight:600; font-size:0.82rem;
  display:flex; align-items:center; justify-content:center;
}
.surah-info{ flex:1; min-width:0; }
.surah-info .latin{ font-weight:600; font-size:0.98rem; color:var(--emerald-deep); }
.surah-info .meta{ font-size:0.76rem; color:var(--ink-soft); margin-top:2px; }
.surah-arabic-name{ font-family:'Amiri', serif; font-size:1.35rem; color:var(--emerald-deep); flex:0 0 auto; }

/* ---------- Surah header ---------- */
.surah-header{ text-align:center; margin-bottom:6px; }
.surah-header .arabic-name{ font-family:'Amiri', serif; font-size:clamp(1.8rem,6vw,2.4rem); color:var(--emerald-deep); }
.surah-header h2{ font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:600; font-size:1.7rem; margin:4px 0 2px; color:var(--emerald-deep); }
.surah-header .meta{ font-size:0.82rem; color:var(--ink-soft); }

.legend-box{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px 14px;
  background:rgba(255,255,255,0.4); border:1px solid rgba(201,162,39,0.35);
  border-radius:12px; padding:12px 14px; margin-bottom:24px; font-size:0.73rem; color:var(--ink-soft);
}
.legend-item{ display:flex; align-items:center; gap:5px; }
.legend-dot{ width:10px; height:10px; border-radius:50%; flex:0 0 auto; }
.legend-dot.normal{ background:transparent; border:1.5px solid var(--ink-soft); }

/* ---------- Ayat card ---------- */
.ayat-list{ display:flex; flex-direction:column; }
.ayat{ position:relative; padding:20px 4px 22px 0; border-bottom:1px dashed rgba(122,31,61,0.28); transition:background 0.25s ease; }
.ayat:last-child{ border-bottom:none; }
.ayat.playing{ background:rgba(201,162,39,0.06); }
.ayat-top{ display:flex; align-items:flex-start; justify-content:flex-end; gap:12px; direction:rtl; }
.medallion{
  flex:0 0 auto; width:32px; height:32px; border-radius:50%; border:1.5px solid var(--gold);
  background:radial-gradient(circle at 35% 30%, #fff8e6, var(--parchment) 70%);
  color:var(--maroon); font-weight:600; font-size:0.8rem;
  display:flex; align-items:center; justify-content:center; direction:ltr; cursor:pointer;
  transition:transform 0.3s ease, box-shadow 0.3s ease;
}
.ayat.playing .medallion{ box-shadow:0 0 0 4px rgba(201,162,39,0.35), 0 0 18px rgba(201,162,39,0.55); transform:scale(1.08); }
.arabic-line{ font-family:'Amiri', serif; font-size:clamp(1.45rem, 4.4vw, 1.95rem); line-height:2.5; text-align:right; flex:1; direction:rtl; }
.word{ cursor:pointer; border-radius:6px; padding:2px 3px; transition:background 0.2s ease; }
.word:hover{ background:rgba(201,162,39,0.16); }
.word.active{ background:rgba(201,162,39,0.35); box-shadow:0 0 0 1px rgba(201,162,39,0.5); }
.tj-mad{ color:var(--tj-mad); font-weight:700; }
.tj-idgham{ color:var(--tj-idgham); opacity:0.62; }
.tj-ghunnah{ color:var(--tj-ghunnah); font-weight:700; }
.tj-qalqalah{ color:var(--tj-qalqalah); font-weight:700; }
.tj-ikhfa{ color:var(--tj-ikhfa); font-weight:700; }
.tj-bighunnah{ color:var(--tj-bighunnah); font-weight:700; }
.tj-bilaghunnah{ color:var(--tj-bilaghunnah); font-weight:700; }
.tj-iqlab{ color:var(--tj-iqlab); font-weight:700; }

.translit-line{ font-family:'Lora', serif; font-style:italic; font-size:clamp(0.86rem, 2.3vw, 0.98rem); color:var(--emerald-mid); margin-top:10px; line-height:1.9; }
.translit-word{ cursor:pointer; border-radius:4px; padding:1px 2px; transition:background 0.2s ease; }
.translit-word:hover{ background:rgba(201,162,39,0.14); }
.translit-word.active{ background:rgba(201,162,39,0.3); color:var(--maroon); font-weight:600; }
.terjemah{ font-size:0.9rem; color:var(--ink-soft); margin-top:8px; line-height:1.55; }

.surah-footer-nav{ display:flex; justify-content:space-between; gap:10px; margin-top:26px; }
.nav-pill{
  flex:1; text-align:center; font-size:0.8rem; padding:10px 12px; border-radius:12px;
  background:rgba(255,255,255,0.4); border:1px solid rgba(201,162,39,0.3); cursor:pointer;
  color:var(--emerald-deep); font-weight:600; transition:background 0.2s ease;
}
.nav-pill:hover{ background:rgba(201,162,39,0.15); }

/* ---------- Prayer table ---------- */
.prayer-table{ display:flex; flex-direction:column; gap:8px; margin-top:18px; }
.prayer-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px; border-radius:12px; background:rgba(255,255,255,0.4);
  border:1px solid rgba(201,162,39,0.25);
}
.prayer-row.next{ background:rgba(201,162,39,0.22); border-color:var(--gold); }
.prayer-row .pname{ font-weight:600; color:var(--emerald-deep); }
.prayer-row .ptime{ font-family:'Cormorant Garamond',serif; font-size:1.3rem; font-weight:600; color:var(--maroon); }

/* ---------- Compass (Kiblat) ---------- */
.compass-wrap{ display:flex; flex-direction:column; align-items:center; margin-top:20px; }
.compass{
  width:min(70vw,260px); height:min(70vw,260px); border-radius:50%;
  border:3px solid var(--gold); position:relative; background:radial-gradient(circle at 40% 35%, #fffdf6, var(--parchment));
  box-shadow:inset 0 0 20px rgba(122,31,61,0.12);
}
.compass .n-label{ position:absolute; top:8px; left:50%; transform:translateX(-50%); font-size:0.75rem; font-weight:700; color:var(--maroon); }
.compass .needle{
  position:absolute; left:50%; top:50%; width:4px; height:42%; background:linear-gradient(180deg, var(--maroon), var(--gold));
  transform-origin:bottom center; transform:translate(-50%,-100%) rotate(0deg); border-radius:3px; transition:transform 0.2s ease-out;
}
.compass .needle::before{
  content:''; position:absolute; top:-6px; left:50%; transform:translateX(-50%);
  border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:14px solid var(--maroon);
}
.compass .center-dot{ position:absolute; left:50%; top:50%; width:10px; height:10px; border-radius:50%; background:var(--gold); transform:translate(-50%,-50%); }
.kiblat-info{ text-align:center; margin-top:16px; font-size:0.88rem; color:var(--ink-soft); line-height:1.7; }
.kiblat-deg{ font-family:'Cormorant Garamond',serif; font-size:1.6rem; font-weight:600; color:var(--emerald-deep); }
.btn-enable{
  margin-top:14px; background:var(--emerald-deep); color:#fffdf6; border:none; padding:10px 22px;
  border-radius:999px; cursor:pointer; font-size:0.85rem; font-weight:600;
}

/* ---------- Tata Cara Sholat & Sholat Sunnah ---------- */
.rakaat-strip{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:16px 0 6px; }
.rakaat-chip{ background:rgba(255,255,255,0.5); border:1px solid rgba(201,162,39,0.35); border-radius:999px; padding:7px 14px; font-size:0.76rem; color:var(--emerald-deep); font-weight:600; }
.step-list{ display:flex; flex-direction:column; margin-top:10px; }
.step-item{ position:relative; padding:0 0 26px 40px; border-left:2px dashed rgba(122,31,61,0.3); margin-left:15px; }
.step-item:last-child{ border-left-color:transparent; padding-bottom:4px; }
.step-num{
  position:absolute; left:-17px; top:0; width:32px; height:32px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff8e6, var(--parchment) 70%); border:1.5px solid var(--gold);
  color:var(--maroon); font-weight:700; font-size:0.85rem; display:flex; align-items:center; justify-content:center;
}
.step-title{ font-weight:700; color:var(--emerald-deep); font-size:0.98rem; margin-bottom:6px; }
.step-arabic{ font-family:'Amiri', serif; font-size:clamp(1.2rem,4vw,1.5rem); line-height:2; text-align:right; direction:rtl; color:var(--ink); }
.step-latin{ font-family:'Lora', serif; font-style:italic; color:var(--emerald-mid); font-size:0.86rem; margin-top:4px; }
.step-arti{ font-size:0.84rem; color:var(--ink-soft); margin-top:3px; }
.step-desc{ font-size:0.84rem; color:var(--ink-soft); margin-top:4px; line-height:1.55; }
.step-note{ font-size:0.78rem; color:var(--maroon); margin-top:4px; font-style:italic; }

.sunnah-card{ background:rgba(255,255,255,0.42); border:1px solid rgba(201,162,39,0.3); border-radius:14px; padding:16px 18px; margin-bottom:14px; }
.sunnah-card h3{ font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:600; color:var(--emerald-deep); font-size:1.25rem; margin:0 0 6px; }
.sunnah-meta{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.sunnah-meta span{ background:rgba(201,162,39,0.16); border-radius:999px; padding:4px 10px; font-size:0.74rem; color:var(--emerald-deep); font-weight:600; }
.sunnah-niat-label{ font-size:0.72rem; text-transform:uppercase; letter-spacing:0.12em; color:var(--maroon); font-weight:700; margin-top:8px; }
.sunnah-desc{ font-size:0.85rem; color:var(--ink-soft); margin-top:10px; line-height:1.6; }

/* ---------- Coming soon ---------- */
.coming-soon{ text-align:center; padding:30px 10px; }
.coming-soon .icon{ font-size:2.6rem; margin-bottom:10px; }
.coming-soon h2{ font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:600; color:var(--emerald-deep); font-size:1.6rem; margin:4px 0 8px; }
.coming-soon p{ color:var(--ink-soft); font-size:0.88rem; max-width:380px; margin:0 auto; line-height:1.6; }

/* ---------- State / loading ---------- */
.state-msg{ text-align:center; padding:40px 10px; color:var(--ink-soft); font-size:0.9rem; }
.state-msg.error{ color:var(--maroon); }
.retry-btn{ margin-top:14px; display:inline-block; background:var(--emerald-deep); color:#fffdf6; border:none; padding:9px 20px; border-radius:999px; cursor:pointer; font-size:0.82rem; }