/*
 *  style.css — Namaz Vakti | Prayer Times
 *  Sakarya / Akyazı 2026  •  TR & EN
 */

:root{
  --bg:#080b12;--card:#0f1420;
  --acc:#c9a84c;--acc2:#e8c97a;--acc3:#f5e0a0;
  --text:#ede8d8;--muted:#5a6878;--green:#34d399;
  --border:rgba(201,168,76,.16);--glow:rgba(201,168,76,.09);
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{min-height:100%;background:var(--bg);color:var(--text);font-family:'Outfit',sans-serif;overflow-x:hidden;}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at 20% 10%,rgba(201,168,76,.07) 0%,transparent 55%),
             radial-gradient(ellipse at 80% 85%,rgba(45,212,191,.04) 0%,transparent 50%);}
.stars{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;}
.stars span{position:absolute;border-radius:50%;background:rgba(255,255,255,.8);animation:twinkle var(--d) ease-in-out infinite var(--dl);}
@keyframes twinkle{0%,100%{opacity:.1;}50%{opacity:1;}}
.wrap{position:relative;z-index:1;max-width:430px;margin:0 auto;padding-bottom:72px;}
/* Lang */
.lang-bar{display:flex;justify-content:flex-end;padding:14px 18px 0;}
.lang-btn{display:flex;background:var(--card);border:1px solid var(--border);border-radius:999px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.3);}
.lang-a{padding:6px 16px;font-size:11px;font-weight:700;letter-spacing:1.5px;color:var(--muted);text-decoration:none;font-family:'Outfit',sans-serif;transition:all .2s;}
.lang-a.active{background:var(--acc);color:#0a0a0f;}
/* Header */
.header{padding:10px 20px 14px;text-align:center;}
.hdr-icon{font-size:36px;display:block;margin-bottom:8px;filter:drop-shadow(0 0 14px var(--acc));animation:float 4s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}
.hdr-city{font-size:10px;letter-spacing:3.5px;text-transform:uppercase;color:var(--muted);margin-bottom:3px;}
.hdr-date{font-size:19px;font-weight:700;color:var(--acc2);font-family:'Amiri',serif;}
.hdr-hijri{font-size:13px;color:var(--muted);margin-top:3px;font-family:'Amiri',serif;}
.ornament{text-align:center;margin:6px 0;color:var(--acc);opacity:.3;font-size:14px;letter-spacing:6px;}
/* Spiritual */
.spiritual{margin:0 14px 10px;background:var(--card);border:1px solid var(--border);border-radius:20px;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.45),inset 0 1px 0 var(--glow);}
.sp-tabs{display:flex;border-bottom:1px solid var(--border);}
.stab{flex:1;padding:10px 4px;text-align:center;font-size:10px;letter-spacing:1.5px;color:var(--muted);text-decoration:none;font-family:'Outfit',sans-serif;font-weight:700;transition:all .2s;text-transform:uppercase;display:block;}
.stab.active{color:var(--acc2);background:var(--glow);border-bottom:2px solid var(--acc);}
.sp-body{padding:18px 20px 16px;min-height:112px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;}
.sp-arabic{font-family:'Amiri',serif;font-size:21px;line-height:1.85;text-align:center;color:var(--acc3);direction:rtl;}
.sp-text{font-size:12.5px;line-height:1.6;text-align:center;color:var(--muted);font-style:italic;}
.sp-source{font-size:10px;color:var(--acc);opacity:.55;letter-spacing:.5px;}
/* Countdown */
.countdown{margin:0 14px 10px;background:linear-gradient(135deg,var(--glow),rgba(52,211,153,.04));border:1px solid var(--border);border-radius:20px;padding:15px 20px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 6px 22px rgba(0,0,0,.35);}
.cnt-label{font-size:9.5px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:3px;}
.cnt-prayer{font-size:17px;font-weight:600;color:var(--acc2);font-family:'Amiri',serif;}
.cnt-time{font-size:30px;font-weight:700;color:var(--green);font-variant-numeric:tabular-nums;letter-spacing:1px;text-shadow:0 0 16px rgba(52,211,153,.35);animation:blink 1s ease-in-out infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.75;}}
/* Prayer grid */
.prayers{margin:0 14px;display:grid;grid-template-columns:1fr 1fr;gap:9px;}
.pc{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:13px 15px;display:flex;flex-direction:column;gap:5px;position:relative;overflow:hidden;box-shadow:0 3px 12px rgba(0,0,0,.25);}
.pc::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--acc),transparent);opacity:0;}
.pc.active{border-color:rgba(201,168,76,.45);background:linear-gradient(135deg,var(--glow),transparent);box-shadow:0 6px 20px var(--glow);}
.pc.active::before,.pc.next::before{opacity:1;}
.pc.next{border-color:rgba(52,211,153,.35);background:linear-gradient(135deg,rgba(52,211,153,.07),transparent);}
.pc.next::before{background:linear-gradient(90deg,transparent,var(--green),transparent);}
.pc.passed{opacity:.3;}
.pc-icon{font-size:19px;line-height:1;}
.pc-name{font-size:11px;color:var(--muted);letter-spacing:.5px;font-weight:500;text-transform:uppercase;}
.pc.active .pc-name{color:var(--acc);}
.pc.next .pc-name{color:var(--green);}
.pc-time{font-size:22px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;font-family:'Amiri',serif;}
.pc.active .pc-time{color:var(--acc2);}
.pc.next .pc-time{color:var(--green);}
.pc-badge{position:absolute;top:9px;right:9px;font-size:8px;letter-spacing:.5px;padding:2px 6px;border-radius:999px;font-weight:700;text-transform:uppercase;}
.badge-a{background:var(--glow);color:var(--acc2);border:1px solid rgba(201,168,76,.3);}
.badge-n{background:rgba(52,211,153,.12);color:var(--green);border:1px solid rgba(52,211,153,.3);}
/* Nav */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;background:rgba(5,7,14,.97);border-top:1px solid var(--border);display:flex;backdrop-filter:blur(16px);z-index:100;padding-bottom:env(safe-area-inset-bottom);overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;}
.bottom-nav::-webkit-scrollbar{display:none;}
.bnav{flex:0 0 auto;min-width:60px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 8px;color:var(--muted);text-decoration:none;font-family:'Outfit',sans-serif;font-size:9px;letter-spacing:.4px;transition:color .2s;}
.bnav.active{color:var(--acc2);}
.bnav .ni{font-size:18px;}
/* Pages */
.page{display:none;}
.page.show{display:block;}
.page{padding:16px 14px;padding-bottom:80px;}
.page-title{font-size:17px;font-weight:700;color:var(--acc2);font-family:'Amiri',serif;margin-bottom:12px;text-align:center;}
.cal-filter form{display:flex;gap:8px;margin-bottom:10px;}
.cal-filter select{flex:1;background:var(--card);border:1px solid var(--border);color:var(--text);padding:9px 12px;border-radius:12px;font-family:'Outfit',sans-serif;font-size:13px;outline:none;}
.cal-filter button{background:var(--acc);color:#0a0a0f;border:none;padding:9px 16px;border-radius:12px;font-weight:700;font-size:13px;cursor:pointer;}
.cal-wrap{border-radius:14px;overflow:auto;border:1px solid var(--border);background:var(--card);}
.cal-table{width:100%;border-collapse:collapse;font-size:12px;min-width:490px;}
.cal-table thead th{padding:9px 7px;text-align:left;color:var(--muted);font-weight:600;border-bottom:1px solid var(--border);background:var(--card);position:sticky;top:0;font-size:10px;letter-spacing:.3px;text-transform:uppercase;}
.cal-table tbody td{padding:8px 7px;border-bottom:1px solid rgba(201,168,76,.05);}
.cal-table tbody tr.today td{background:var(--glow);color:var(--acc2);font-weight:600;}

/* EN teması — index.php body etiketine data-lang="en" eklenir */
[data-lang="en"] {
  --acc:#2dd4bf; --acc2:#5eead4; --acc3:#99f6e4;
  --border:rgba(45,212,191,.15); --glow:rgba(45,212,191,.08);
}

/* Konum butonu */
.loc-bar{display:flex;align-items:center;gap:10px;margin:0 14px 10px;padding:12px 16px;background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:0 3px 12px rgba(0,0,0,.25);}
#btnLocation{background:var(--acc);color:#0a0a0f;border:none;padding:8px 16px;border-radius:12px;font-weight:700;font-size:12px;cursor:pointer;font-family:'Outfit',sans-serif;white-space:nowrap;flex-shrink:0;transition:opacity .2s;}
#btnLocation:disabled{opacity:.5;cursor:not-allowed;}
.loc-info{flex:1;min-width:0;}
#locCity{font-size:13px;color:var(--acc2);font-weight:600;font-family:'Amiri',serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#locStatus{font-size:11px;color:var(--muted);}

/* ── Hava Durumu ──────────────────────────────── */
.weather-loading {
  text-align:center; color:var(--muted); padding:40px 20px; font-size:14px;
}
.weather-error {
  text-align:center; color:#f87171; padding:30px 20px; font-size:13px;
}
.weather-current {
  margin:0 0 14px;
  background:linear-gradient(135deg,var(--glow),rgba(52,211,153,.05));
  border:1px solid var(--border); border-radius:20px; padding:20px 22px;
  display:flex; align-items:center; justify-content:space-between;
  box-shadow:0 6px 22px rgba(0,0,0,.35);
}
.wc-left { display:flex; flex-direction:column; gap:4px; }
.wc-temp {
  font-size:52px; font-weight:700; color:var(--acc2);
  font-family:'Amiri',serif; line-height:1; letter-spacing:-1px;
}
.wc-desc { font-size:14px; color:var(--muted); }
.wc-right { font-size:64px; line-height:1; filter:drop-shadow(0 0 12px rgba(255,255,255,.15)); }
.wc-meta {
  display:flex; gap:10px; margin-top:8px; flex-wrap:wrap;
}
.wc-chip {
  font-size:11px; color:var(--muted); background:var(--card);
  border:1px solid var(--border); border-radius:999px; padding:3px 10px;
}

.weather-days { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.wd-card {
  background:var(--card); border:1px solid var(--border); border-radius:16px;
  padding:14px 16px; display:flex; flex-direction:column; gap:6px;
  box-shadow:0 3px 12px rgba(0,0,0,.25); position:relative; overflow:hidden;
}
.wd-card.today { border-color:color-mix(in srgb,var(--acc) 45%,transparent); background:linear-gradient(135deg,var(--glow),transparent); }
.wd-card.today::before { content:''; position:absolute; top:0;left:0;right:0;height:2px; background:linear-gradient(90deg,transparent,var(--acc),transparent); }
.wd-day { font-size:11px; color:var(--muted); font-weight:600; letter-spacing:.5px; text-transform:uppercase; }
.wd-card.today .wd-day { color:var(--acc); }
.wd-date { font-size:10px; color:var(--muted); opacity:.7; }
.wd-icon { font-size:30px; line-height:1; margin:4px 0; }
.wd-desc { font-size:11px; color:var(--muted); line-height:1.3; }
.wd-temps { display:flex; gap:8px; align-items:baseline; margin-top:2px; }
.wd-max { font-size:22px; font-weight:700; color:var(--text); font-family:'Amiri',serif; }
.wd-card.today .wd-max { color:var(--acc2); }
.wd-min { font-size:15px; color:var(--muted); font-family:'Amiri',serif; }
.wd-footer { display:flex; gap:8px; flex-wrap:wrap; margin-top:2px; }
.wd-badge { font-size:10px; color:var(--muted); display:flex; align-items:center; gap:3px; }
.wd-badge span:first-child { font-size:12px; }

/* ── Takvim Özel Günler ────────────────────────────────────── */
.cal-table tbody tr.day-bayram td { background:rgba(201,168,76,.13); }
.cal-table tbody tr.day-kandil td { background:rgba(45,212,191,.09); }
.cal-table tbody tr.day-dini   td { background:rgba(139,92,246,.09); }
.cal-table tbody tr.day-resmi  td { background:rgba(248,113,113,.08); }
.cal-table tbody tr.day-arefe  td { background:rgba(139,92,246,.05); }

/* Özel gün etiketi — tarih hücresinde alt satır */
.day-badge {
  display:block;
  font-size:9px;
  font-weight:700;
  letter-spacing:.3px;
  margin-top:3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:90px;
}
.day-bayram .day-badge { color:var(--acc2); }
.day-kandil .day-badge { color:#5eead4; }
.day-dini   .day-badge { color:#c084fc; }
.day-resmi  .day-badge { color:#f87171; }
.day-arefe  .day-badge { color:#a78bfa; }

/* Bugün + özel gün aynı satırda: today stili öncelikli */
.cal-table tbody tr.today.day-bayram td,
.cal-table tbody tr.today.day-kandil td,
.cal-table tbody tr.today.day-dini   td,
.cal-table tbody tr.today.day-resmi  td,
.cal-table tbody tr.today.day-arefe  td { background:var(--glow); }

/* Takvim filtresi — ay seçimi üstünde gösterge */
.cal-legend {
  display:flex; flex-wrap:wrap; gap:6px;
  margin-bottom:10px; font-size:10px;
}
.cal-legend-item {
  display:flex; align-items:center; gap:4px;
  background:var(--card); border:1px solid var(--border);
  border-radius:20px; padding:3px 8px; color:var(--muted);
}
.cal-legend-item span { width:8px; height:8px; border-radius:50%; display:inline-block; }
.leg-bayram { background:var(--acc2); }
.leg-kandil { background:#5eead4; }
.leg-dini   { background:#c084fc; }
.leg-resmi  { background:#f87171; }
.leg-arefe  { background:#a78bfa; }

/* ── Kıble Pusulası ─────────────────────────────────────────── */
.qibla-compass-wrap { padding: 6px 0 4px; }

/* Dış çerçeve */
.compass-outer {
  position: relative;
  margin: 0 auto 16px;
  border-radius: 50%;
  box-shadow: 0 0 40px rgba(201,168,76,.15), 0 8px 32px rgba(0,0,0,.5);
}

/* Dönen kadran */
.compass-disc {
  position: absolute; inset: 0;
  border-radius: 50%;
  transition: transform 0.12s ease-out;
  will-change: transform;
}

/* Dönen iğne */
.qibla-needle {
  position: absolute; inset: 0;
  border-radius: 50%;
  transition: transform 0.12s ease-out;
  will-change: transform;
}

/* Merkez cap */
.compass-cap {
  position: absolute;
  left: 50%; top: 50%;
  width: 16px; height: 16px;
  background: radial-gradient(circle at 35% 35%, #f5e0a0, #c9a84c);
  border-radius: 50%;
  transform: translate(-50%,-50%);
  box-shadow: 0 0 10px rgba(201,168,76,.7);
  z-index: 10;
  pointer-events: none;
}

/* Sensör izin overlay */
.sensor-perm-ov {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: rgba(8,11,18,.85);
  display: flex; align-items: center; justify-content: center;
  z-index: 20;
  backdrop-filter: blur(4px);
}

/* Bilgi paneli */
.qibla-info {
  margin: 0 14px 10px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 18px; padding: 14px 20px;
  display: flex; gap: 0;
}
.qi-row { flex: 1; text-align: center; }
.qi-row + .qi-row { border-left: 1px solid var(--border); }
.qi-label {
  display: block; font-size: 9px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--muted); margin-bottom: 5px;
}
.qi-val {
  font-size: 30px; font-weight: 700; color: var(--acc2);
  font-variant-numeric: tabular-nums; font-family: 'Amiri', serif;
  letter-spacing: 1px;
}

/* İpuçları */
.qibla-tip {
  text-align: center; font-size: 11.5px; color: var(--text);
  margin: 0 14px 6px; line-height: 1.5; opacity: .8;
}
.qibla-calib {
  text-align: center; font-size: 10px; color: var(--muted);
  margin: 0 14px 10px; line-height: 1.5;
}

/* Konum yok ekranı */
.qibla-noloc {
  text-align: center; padding: 50px 24px 30px;
}
.qnl-icon {
  font-size: 72px; margin-bottom: 18px;
  filter: drop-shadow(0 0 20px rgba(201,168,76,.35));
}
.qibla-noloc p {
  font-size: 14px; color: var(--muted);
  margin-bottom: 24px; line-height: 1.7;
}
.qibla-action-btn {
  background: var(--acc); color: #080b12;
  border: none; padding: 12px 26px;
  border-radius: 14px; font-weight: 700;
  font-size: 13px; cursor: pointer;
  font-family: 'Outfit', sans-serif;
  box-shadow: 0 4px 16px rgba(201,168,76,.3);
  transition: opacity .2s;
}
.qibla-action-btn:active { opacity: .8; }

/* ── Sensör durum çubuğu ────────────────────────────────────── */
.sensor-bar {
  display: flex; align-items: center; gap: 8px;
  margin: 0 14px 12px;
  padding: 8px 14px; border-radius: 12px;
  font-size: 11px; font-weight: 600; letter-spacing: .3px;
  border: 1px solid var(--border);
  transition: background .4s, border-color .4s;
}
.sensor-wait { background: rgba(90,104,120,.1); color: var(--muted); }
.sensor-ok   { background: rgba(52,211,153,.08); color: #34d399; border-color: rgba(52,211,153,.25); }
.sensor-warn { background: rgba(251,191,36,.08);  color: #fbbf24; border-color: rgba(251,191,36,.25); }
.sensor-err  { background: rgba(248,113,113,.08); color: #f87171; border-color: rgba(248,113,113,.25); }

/* Durum noktası */
.sdot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--muted);
}
.sdot-ok   { background: #34d399; box-shadow: 0 0 6px #34d399; animation: pulse-dot 2s infinite; }
.sdot-warn { background: #fbbf24; box-shadow: 0 0 6px #fbbf24; }
.sdot-err  { background: #f87171; }
@keyframes pulse-dot {
  0%,100% { opacity:1; } 50% { opacity:.4; }
}

/* ── Pusula başlat wrapper ───────────────────────────────────── */
.sensor-start-wrap {
  text-align: center;
  margin: 0 14px 14px;
}
.sensor-start-wrap .qibla-action-btn {
  width: 100%; max-width: 260px;
  padding: 14px 20px; font-size: 15px;
  box-shadow: 0 6px 20px rgba(201,168,76,.35);
}

/* ── Debug paneli ────────────────────────────────────────────── */
.dbg-panel {
  margin: 0 14px 12px;
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(201,168,76,.2);
  border-radius: 12px;
  padding: 10px 14px;
  font-family: 'Outfit', monospace;
}
.dbg-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,.04);
}
.dbg-row:last-child { border-bottom: none; }
.dbg-k { font-size: 10px; color: var(--muted); letter-spacing: .5px; }
.dbg-v { font-size: 11px; color: #a0c4ff; font-weight: 600; letter-spacing: .3px; }

/* ── Kalibrasyon ekranı ──────────────────────────────────────── */
.qibla-calib-screen {
  text-align: center;
  padding: 24px 20px 30px;
}
.calib-anim {
  font-size: 48px;
  margin-bottom: 10px;
  animation: spin-inf 3s ease-in-out infinite;
  display: inline-block;
}
@keyframes spin-inf {
  0%,100% { transform: rotate(-15deg) scale(1);   }
  50%      { transform: rotate(15deg)  scale(1.1); }
}
.calib-title {
  font-size: 16px; font-weight: 700;
  color: var(--acc2); margin-bottom: 12px;
  font-family: 'Amiri', serif;
}
.calib-desc {
  font-size: 13px; color: var(--muted);
  line-height: 1.7; margin-bottom: 18px;
}
.calib-desc strong { color: var(--text); }
.calib-fig8 {
  font-size: 72px; line-height: 1;
  color: var(--acc); opacity: .25;
  margin-bottom: 14px;
  animation: fig8-pulse 2s ease-in-out infinite;
}
@keyframes fig8-pulse {
  0%,100% { opacity:.2; transform:scale(1);    }
  50%      { opacity:.5; transform:scale(1.08); }
}
.calib-hint {
  font-size: 11px; color: var(--muted);
  margin-bottom: 16px; line-height: 1.5;
}
/* İlerleme noktaları */
.calib-dots {
  display: flex; justify-content: center; gap: 8px; margin-top: 4px;
}
.calib-dots span {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(201,168,76,.15);
  transition: background .2s, box-shadow .2s;
}
.calib-dots span.active {
  background: var(--acc);
  box-shadow: 0 0 8px var(--acc);
}

/* ── Manuel mod ─────────────────────────────────────────────── */
.manual-info-box {
  margin: 0 14px 12px;
  background: rgba(201,168,76,.07);
  border: 1px solid rgba(201,168,76,.2);
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
}
.manual-info-box p { margin-bottom: 4px; }
.manual-info-box p:first-child { color: var(--acc2); font-size: 13px; }
.manual-info-box strong { color: var(--text); }

/* ── İki buton yan yana ─────────────────────────────────────── */
.qibla-noloc .qibla-action-btn {
  display: block;
  width: 100%; max-width: 260px;
  margin: 0 auto 10px;
  padding: 13px 20px;
  font-size: 14px;
}

@keyframes spin-inf {
  0%,100% { transform: rotate(-15deg) scale(1); }
  50%      { transform: rotate(15deg) scale(1.1); }
}

/* ══════════════════════════════════════════════════════════════
   Tesbih & Namaz Takibi
   ══════════════════════════════════════════════════════════════ */

/* ── Tab'lar ─────────────────────────────────────────────────── */
.tsb-tabs {
  display: flex; margin: 0 14px 14px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden;
}
.tsb-tab {
  flex: 1; padding: 10px 8px; font-size: 12px; font-weight: 700;
  letter-spacing: .8px; text-transform: uppercase;
  color: var(--muted); background: none; border: none;
  font-family: 'Outfit', sans-serif; cursor: pointer; transition: all .2s;
}
.tsb-tab.active { background: var(--acc); color: #080b12; }

/* ── Panel ───────────────────────────────────────────────────── */
.tsb-panel { padding: 0 14px; }

/* ── Streak ──────────────────────────────────────────────────── */
.tsb-streak {
  text-align: center; font-size: 13px; font-weight: 700;
  color: #fb923c; margin-bottom: 10px;
  animation: streak-pop .4s ease;
}
@keyframes streak-pop { 0%{transform:scale(.8);opacity:0} 60%{transform:scale(1.1)} 100%{transform:scale(1);opacity:1} }

/* ── Hedef seçici ────────────────────────────────────────────── */
.tsb-target-row {
  display: flex; justify-content: center; gap: 8px; margin-bottom: 16px;
}
.tsb-target-btn {
  width: 54px; height: 36px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--card);
  color: var(--muted); font-size: 13px; font-weight: 700;
  font-family: 'Outfit', sans-serif; cursor: pointer; transition: all .2s;
}
.tsb-target-btn.active { background: var(--acc); color: #080b12; border-color: var(--acc); }

/* ── Halka ───────────────────────────────────────────────────── */
.tesbih-ring {
  position: relative; width: 220px; height: 220px;
  margin: 0 auto 20px; display: flex;
  align-items: center; justify-content: center;
  transition: transform .15s;
}
.tesbih-ring-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tesbih-count-wrap { position: relative; text-align: center; }
.tesbih-count {
  font-size: 64px; font-weight: 800; color: var(--acc2);
  font-variant-numeric: tabular-nums; font-family: 'Amiri', serif;
  line-height: 1; transition: transform .1s;
}
.tesbih-target-lbl { font-size: 14px; color: var(--muted); margin-top: 2px; }

.ring-complete .tesbih-count { color: var(--green); }
.ring-complete { animation: ring-done .5s ease; }
@keyframes ring-done { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }

/* ── Tap & Reset butonları ───────────────────────────────────── */
.tsb-tap-btn {
  display: block; width: 100%; padding: 18px;
  background: var(--acc); color: #080b12;
  border: none; border-radius: 16px;
  font-size: 18px; font-weight: 800; letter-spacing: 1px;
  font-family: 'Outfit', sans-serif; cursor: pointer;
  box-shadow: 0 6px 24px rgba(201,168,76,.3);
  transition: transform .08s, box-shadow .08s;
  margin-bottom: 10px;
}
.tsb-tap-btn:active { transform: scale(.97); box-shadow: 0 2px 8px rgba(201,168,76,.2); }
.tsb-reset-btn {
  display: block; width: 100%; padding: 10px;
  background: none; border: 1px solid var(--border);
  color: var(--muted); border-radius: 12px;
  font-size: 13px; font-family: 'Outfit', sans-serif; cursor: pointer;
  transition: all .2s;
}
.tsb-reset-btn:active { background: var(--card); }

/* ── Namaz takibi ────────────────────────────────────────────── */
.nz-header { text-align: center; margin-bottom: 12px; }
.nz-date { font-size: 11px; color: var(--muted); letter-spacing: 1px; margin-bottom: 4px; }

.nz-prayers { margin-bottom: 14px; }
.nz-row {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; margin-bottom: 7px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; cursor: pointer;
  transition: all .2s; user-select: none;
}
.nz-row.checked { border-color: rgba(52,211,153,.4); background: rgba(52,211,153,.07); }
.nz-icon { font-size: 20px; }
.nz-name { flex: 1; font-size: 14px; font-weight: 600; color: var(--text); }
.nz-row.checked .nz-name { color: var(--green); }
.nz-check {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--border); display: flex;
  align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; color: var(--green);
  transition: all .2s;
}
.nz-row.checked .nz-check { background: var(--green); border-color: var(--green); color: #080b12; }

/* İlerleme */
.nz-progress-wrap {
  display: flex; align-items: center; gap: 10px; margin-bottom: 18px;
}
.nz-progress-bar {
  flex: 1; height: 6px; background: var(--card);
  border-radius: 99px; overflow: hidden;
  border: 1px solid var(--border);
}
.nz-progress-fill {
  height: 100%; background: var(--green);
  border-radius: 99px; transition: width .3s ease;
}
.nz-progress-lbl { font-size: 12px; color: var(--muted); font-weight: 700; min-width: 24px; }

/* Isı haritası */
.nz-heatmap-title {
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px; text-align: center;
}
.nz-heatmap {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 4px; margin-bottom: 20px;
}
.nz-cell {
  aspect-ratio: 1; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; color: rgba(255,255,255,.3);
  border: 1px solid rgba(255,255,255,.04);
}
.nz-cell span { pointer-events: none; }
.nz-cell.today { border-color: var(--acc); }
.nz-cell.lvl0 { background: rgba(255,255,255,.03); }
.nz-cell.lvl1 { background: rgba(52,211,153,.12); }
.nz-cell.lvl2 { background: rgba(52,211,153,.22); }
.nz-cell.lvl3 { background: rgba(52,211,153,.38); }
.nz-cell.lvl4 { background: rgba(52,211,153,.58); }
.nz-cell.lvl5 { background: rgba(52,211,153,.82); color: #080b12; font-weight: 700; }

/* nav override kaldırıldı — üstte tanımlı */

/* ══════════════════════════════════════════════════════════════
   Mübarek Gün Widget & Ezan Bildirimi
   ══════════════════════════════════════════════════════════════ */

/* ── Mübarek Gün Widget ─────────────────────────────────────── */
.special-day-widget {
  margin: 0 14px 10px;
  padding: 14px 18px;
  border-radius: 18px;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--card);
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  position: relative; overflow: hidden;
}
.special-day-widget::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--glow), transparent 60%);
  pointer-events: none;
}
.sdw-left { flex: 1; min-width: 0; }
.sdw-label {
  font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 4px;
}
.sdw-name {
  font-size: 14px; font-weight: 700; color: var(--text);
  font-family: 'Amiri', serif;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sdw-date { font-size: 11px; color: var(--muted); margin-top: 2px; }
.sdw-right { text-align: center; padding-left: 16px; flex-shrink: 0; }
.sdw-days {
  font-size: 34px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.sdw-unit { font-size: 10px; color: var(--muted); letter-spacing: 1px; }

/* Renk varyantları */
.day-bayram .sdw-days, .day-bayram .sdw-name { color: var(--acc2); }
.day-kandil .sdw-days, .day-kandil .sdw-name { color: #5eead4; }
.day-dini   .sdw-days, .day-dini   .sdw-name { color: #c084fc; }
.day-resmi  .sdw-days, .day-resmi  .sdw-name { color: #f87171; }
.day-arefe  .sdw-days, .day-arefe  .sdw-name { color: #a78bfa; }

.day-bayram { border-color: rgba(201,168,76,.3); }
.day-kandil { border-color: rgba(94,234,212,.25); }
.day-dini   { border-color: rgba(192,132,252,.25); }
.day-resmi  { border-color: rgba(248,113,113,.25); }
.day-arefe  { border-color: rgba(167,139,250,.25); }

/* ── Ezan Bildirimi Barı ────────────────────────────────────── */
.notif-bar {
  margin: 0 14px 10px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--card);
  display: flex; align-items: center; gap: 10px;
}
.notif-bar.notif-on {
  border-color: rgba(52,211,153,.3);
  background: rgba(52,211,153,.05);
}
.notif-bar.notif-denied {
  border-color: rgba(248,113,113,.25);
  background: rgba(248,113,113,.04);
}
.notif-icon { font-size: 18px; flex-shrink: 0; }
.notif-text { flex: 1; font-size: 12px; color: var(--muted); }
.notif-bar.notif-on .notif-text { color: var(--green); }
.notif-toggle-btn {
  background: var(--acc); color: #080b12;
  border: none; padding: 6px 14px; border-radius: 10px;
  font-size: 11px; font-weight: 700; cursor: pointer;
  font-family: 'Outfit', sans-serif; flex-shrink: 0;
  transition: opacity .2s;
}
.notif-bar.notif-on .notif-toggle-btn {
  background: rgba(52,211,153,.15);
  color: var(--green);
}
.notif-bar.notif-denied .notif-toggle-btn {
  background: rgba(248,113,113,.15);
  color: #f87171; cursor: not-allowed;
}

/* ── Bildirim Ayarları Popup ────────────────────────────────── */
.notif-settings-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.7); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.notif-settings-box {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 22px; padding: 24px 20px; width: 100%; max-width: 320px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.ns-title {
  font-size: 17px; font-weight: 700; color: var(--acc2);
  font-family: 'Amiri', serif; margin-bottom: 8px; text-align: center;
}
.ns-desc {
  font-size: 12px; color: var(--muted); text-align: center;
  margin-bottom: 16px; line-height: 1.5;
}
.ns-rows { margin-bottom: 18px; }
.ns-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; margin-bottom: 6px;
  background: rgba(255,255,255,.04); border-radius: 12px;
  cursor: pointer; border: 1px solid transparent;
  transition: all .2s;
}
.ns-row:has(input:checked) {
  border-color: rgba(201,168,76,.3);
  background: rgba(201,168,76,.07);
}
.ns-row input[type=checkbox] {
  width: 18px; height: 18px; accent-color: var(--acc);
  cursor: pointer; flex-shrink: 0;
}
.ns-name { font-size: 14px; font-weight: 600; color: var(--text); }
.ns-actions { display: flex; gap: 8px; }
.ns-btn {
  flex: 1; padding: 11px; border-radius: 12px;
  font-size: 13px; font-weight: 700; cursor: pointer;
  font-family: 'Outfit', sans-serif; border: none;
  transition: opacity .2s;
}
.ns-save   { background: var(--acc); color: #080b12; }
.ns-cancel { background: rgba(255,255,255,.06); color: var(--muted); }

/* ══════════════════════════════════════════════════════════════
   Ayarlar Sayfası
   ══════════════════════════════════════════════════════════════ */

.st-section {
  margin: 0 0 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px 18px;
}
.st-section-title {
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--acc2);
  margin-bottom: 12px; font-family: 'Outfit', sans-serif;
}
.st-desc {
  font-size: 11px; color: var(--muted);
  margin-bottom: 10px; line-height: 1.5;
}

/* ── Dil ─────────────────────────────────────────────────────── */
.st-row { display: flex; gap: 8px; }
.st-lang-btn {
  flex: 1; padding: 10px; text-align: center;
  border-radius: 12px; border: 1px solid var(--border);
  background: none; color: var(--muted);
  font-size: 13px; font-weight: 600;
  font-family: 'Outfit', sans-serif;
  transition: all .2s;
}
.st-lang-btn.active {
  background: var(--acc); color: #080b12;
  border-color: var(--acc);
}

/* ── Tema ────────────────────────────────────────────────────── */
.st-theme-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.st-theme-btn {
  padding: 10px 8px; border-radius: 12px;
  border: 1px solid var(--border); background: none;
  color: var(--muted); font-size: 13px; font-weight: 600;
  font-family: 'Outfit', sans-serif; cursor: pointer;
  transition: all .2s; text-align: center;
}
.st-theme-btn.active {
  background: var(--glow); color: var(--acc2);
  border-color: var(--acc);
}

/* ── Hesap Metodu ────────────────────────────────────────────── */
.st-method-list {
  display: flex; flex-direction: column; gap: 6px;
}
.st-method-btn {
  width: 100%; padding: 11px 14px; border-radius: 12px;
  border: 1px solid var(--border); background: none;
  color: var(--muted); font-size: 13px; font-weight: 500;
  font-family: 'Outfit', sans-serif; cursor: pointer;
  text-align: left; transition: all .2s;
}
.st-method-btn.active {
  background: var(--glow); color: var(--acc2);
  border-color: var(--acc); font-weight: 700;
}
.st-method-btn.active::after { content: ' ✓'; }

/* ── Bildirim toggle ─────────────────────────────────────────── */
.st-notif-toggle {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.st-notif-toggle span { font-size: 13px; color: var(--text); }
.st-toggle {
  padding: 6px 18px; border-radius: 999px;
  border: 1px solid var(--border); background: none;
  color: var(--muted); font-size: 12px; font-weight: 700;
  font-family: 'Outfit', sans-serif; cursor: pointer;
  transition: all .25s;
}
.st-toggle.on {
  background: rgba(52,211,153,.15); color: var(--green);
  border-color: rgba(52,211,153,.4);
}

/* Namaz vakitleri checkbox listesi */
.st-notif-prayers {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  transition: opacity .25s;
}
.st-np-row {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-radius: 10px;
  background: rgba(255,255,255,.03); cursor: pointer;
  border: 1px solid transparent; transition: all .2s;
}
.st-np-row:has(input:checked) {
  border-color: rgba(201,168,76,.25);
  background: rgba(201,168,76,.06);
}
.st-np-row input { accent-color: var(--acc); width: 16px; height: 16px; }
.st-np-row span { font-size: 12px; font-weight: 600; color: var(--text); }

/* ── Hakkında ────────────────────────────────────────────────── */
.st-about {
  text-align: center; font-size: 13px; color: var(--text);
  font-family: 'Amiri', serif; line-height: 1.8;
}

/* ── Paylaş butonu (spiritual tab'ında) ───────────────────────── */
.sp-share-btn {
  padding: 10px 10px; font-size: 10px; font-weight: 700;
  letter-spacing: .8px; color: var(--acc); background: none;
  border: none; border-bottom: 2px solid transparent;
  font-family: 'Outfit', sans-serif; cursor: pointer;
  transition: all .2s; flex-shrink: 0;
  margin-left: auto;
}
.sp-share-btn:active { opacity: .6; }

/* ── Ayarlar sayfası padding ─────────────────────────────────── */
#pageSettings { padding: 16px 14px 90px; }
#settingsContent { max-width: 430px; }

/* ══════════════════════════════════════════════════════════════
   Paylaş Bottom Sheet
   ══════════════════════════════════════════════════════════════ */

.share-sheet-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0);
  display: flex; align-items: flex-end;
  transition: background .3s;
}
.share-sheet-overlay.open { background: rgba(0,0,0,.65); backdrop-filter: blur(6px); }

.share-sheet {
  width: 100%; max-width: 480px; margin: 0 auto;
  background: #0f1420;
  border: 1px solid rgba(201,168,76,.2);
  border-bottom: none;
  border-radius: 28px 28px 0 0;
  padding: 14px 20px 36px;
  transform: translateY(100%);
  transition: transform .32s cubic-bezier(.32,1,.23,1);
  box-shadow: 0 -20px 60px rgba(0,0,0,.6);
}
.share-sheet-overlay.open .share-sheet { transform: translateY(0); }

.share-sheet-handle {
  width: 44px; height: 5px; border-radius: 99px;
  background: rgba(201,168,76,.25); margin: 0 auto 16px;
}

.share-sheet-title {
  text-align: center; font-size: 15px; font-weight: 700;
  color: var(--acc2); font-family: 'Outfit', sans-serif;
  letter-spacing: .5px; margin-bottom: 16px;
}

/* Önizleme */
.share-preview {
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(201,168,76,.15);
  border-radius: 14px; overflow: hidden;
  margin-bottom: 18px; min-height: 80px;
  display: flex; align-items: center; justify-content: center;
}
.sp-loading { font-size: 13px; color: var(--muted); padding: 20px; }

/* Aksiyon butonları */
.share-actions {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; margin-bottom: 14px;
}
.share-action-btn {
  display: flex; flex-direction: column;
  align-items: center; gap: 6px;
  padding: 14px 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(201,168,76,.14);
  border-radius: 16px; cursor: pointer;
  font-family: 'Outfit', sans-serif;
  transition: all .18s;
}
.share-action-btn:active { background: rgba(201,168,76,.12); transform: scale(.97); }
.sa-icon { font-size: 26px; line-height: 1; }
.share-action-btn span:last-child {
  font-size: 11px; font-weight: 600; color: var(--text);
  letter-spacing: .3px; text-align: center;
}

/* Kapat butonu */
.share-close-btn {
  width: 100%; padding: 13px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--muted);
  font-family: 'Outfit', sans-serif;
  transition: all .2s;
}
.share-close-btn:active { background: rgba(255,255,255,.1); }


/* ══════════════════════════════════════
   Kendi Radyon — Player
   ══════════════════════════════════════ */

/* Visualizer canvas */
#myRadioCanvas {
  display: block;
  width: 100%;
  border-radius: 14px;
  margin-bottom: 14px;
  background: rgba(201,168,76,.03);
  border: 1px solid var(--border);
}

/* Player kartı */
.myradio-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 24px 18px 18px;
  margin-bottom: 14px;
  box-shadow: 0 0 40px rgba(201,168,76,.05);
  text-align: center;
}

/* Dönen disk */
.myradio-disc {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(201,168,76,.22), rgba(201,168,76,.04));
  border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  box-shadow: 0 0 24px rgba(201,168,76,.1);
  animation: discSpin 16s linear infinite paused;
}
.myradio-disc.spinning { animation-play-state: running; }
@keyframes discSpin { to { transform: rotate(360deg); } }
.myradio-disc-inner { font-size: 36px; }

/* Parça bilgisi */
.myradio-track {
  font-size: 18px; font-weight: 700;
  color: var(--acc2); font-family: 'Amiri', serif;
  margin-bottom: 4px; min-height: 26px;
}
.myradio-sub {
  font-size: 11px; color: var(--muted);
  letter-spacing: .6px; text-transform: uppercase;
  margin-bottom: 18px;
}

/* Progress */
.myradio-prog-wrap { margin-bottom: 18px; }
.myradio-prog {
  width: 100%; height: 4px;
  background: rgba(255,255,255,.07);
  border-radius: 4px; cursor: pointer;
  margin-bottom: 6px; position: relative;
}
.myradio-prog-fill {
  height: 100%; width: 0%;
  background: linear-gradient(to right, var(--acc), var(--acc2));
  border-radius: 4px;
  transition: width .15s linear;
}
.myradio-times {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--muted);
}

/* Kontroller */
.myradio-controls {
  display: flex; align-items: center;
  justify-content: center; gap: 16px;
  margin-bottom: 18px;
}
.myradio-btn {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(201,168,76,.08);
  border: 1px solid var(--border);
  color: var(--acc2); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .18s;
}
.myradio-btn:hover  { background: rgba(201,168,76,.18); transform: scale(1.06); }
.myradio-btn:active { transform: scale(.92); }
.myradio-btn svg { width: 20px; height: 20px; }
.myradio-playbtn {
  width: 62px; height: 62px;
  background: linear-gradient(135deg, var(--acc), var(--acc2));
  border: none; color: #0a0a0f;
  box-shadow: 0 0 26px rgba(201,168,76,.35);
}
.myradio-playbtn svg { width: 26px; height: 26px; }

/* Ses */
.myradio-vol {
  display: flex; align-items: center; gap: 10px;
}
.myradio-vol-slider {
  flex: 1; -webkit-appearance: none; appearance: none;
  height: 4px; border-radius: 4px; outline: none; cursor: pointer;
  background: linear-gradient(to right, #c9a84c 85%, rgba(255,255,255,.08) 85%);
}
.myradio-vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--acc2); cursor: pointer;
  box-shadow: 0 0 6px rgba(201,168,76,.5);
}

/* Playlist */
.myradio-playlist {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px; overflow: hidden;
}
.myradio-pl-header {
  padding: 12px 16px;
  font-size: 11px; font-weight: 700;
  color: var(--muted); letter-spacing: 1px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
.myradio-pl-item {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; cursor: pointer;
  border-bottom: 1px solid rgba(201,168,76,.05);
  transition: background .15s;
}
.myradio-pl-item:last-child { border-bottom: none; }
.myradio-pl-item:hover  { background: var(--glow); }
.myradio-pl-item.active { background: rgba(201,168,76,.09); }
.myradio-pl-num {
  width: 20px; font-size: 12px;
  color: var(--muted); text-align: center; flex-shrink: 0;
}
.myradio-pl-item.active .myradio-pl-num { color: var(--acc2); }
.myradio-pl-name {
  flex: 1; font-size: 13px; font-weight: 500; color: var(--text);
}
.myradio-pl-item.active .myradio-pl-name { color: var(--acc2); font-weight: 700; }
.myradio-pl-bars {
  display: none; gap: 2px; align-items: flex-end; height: 14px;
}
.myradio-pl-item.active .myradio-pl-bars { display: flex; }
.myradio-pl-bar {
  width: 3px; border-radius: 2px; background: var(--acc2);
  animation: plBarAnim .7s ease-in-out infinite alternate;
}
.myradio-pl-bar:nth-child(1) { height: 5px;  animation-delay: 0s; }
.myradio-pl-bar:nth-child(2) { height: 10px; animation-delay: .18s; }
.myradio-pl-bar:nth-child(3) { height: 7px;  animation-delay: .36s; }
@keyframes plBarAnim { to { transform: scaleY(2); } }