@import url('https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400&family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
  --bg-main: #040d0a;
  --bg-gradient: radial-gradient(circle at 50% 20%, #0d2820 0%, #040d0a 85%);
  --bg-card: rgba(10, 32, 25, 0.85);
  --bg-card-hover: rgba(16, 45, 36, 0.95);
  --gold: #d4af37;
  --gold-light: #f7e8a1;
  --gold-gradient: linear-gradient(180deg, #ffffff 0%, #fff3be 35%, #d4af37 75%, #9e791b 100%);
  --emerald-accent: #174239;
  --emerald-light: #256154;
  --text-main: #ffffff;
  --text-sub: rgba(255, 255, 255, 0.88);
  --text-muted: rgba(255, 255, 255, 0.55);
  --border-gold: #d4af37;
  --border-light: rgba(212, 175, 55, 0.35);
  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 30px rgba(212, 175, 55, 0.5);
  --radius-lg: 20px;
  --radius-md: 12px;
  --font-ui: 'Outfit', sans-serif;
  --font-ar: 'Amiri', serif;
  --header-height: 48px;
  --nav-height: 68px;
}

body.light-theme {
  --bg-main: #f5f2e8;
  --bg-gradient: linear-gradient(180deg, #eae3d2 0%, #f5f2e8 100%);
  --bg-card: rgba(255, 255, 255, 0.88);
  --bg-card-hover: rgba(255, 255, 255, 0.98);
  --gold: #b38b1e;
  --gold-light: #d4af37;
  --gold-gradient: linear-gradient(135deg, #b38b1e 0%, #d4af37 100%);
  --emerald-accent: #195247;
  --emerald-light: #247565;
  --text-main: #182421;
  --text-sub: rgba(24, 36, 33, 0.78);
  --text-muted: rgba(24, 36, 33, 0.5);
  --border-gold: rgba(179, 139, 30, 0.4);
  --border-light: rgba(0, 0, 0, 0.08);
  --shadow-card: 0 8px 20px rgba(24, 36, 33, 0.08);
  --shadow-glow: 0 0 20px rgba(179, 139, 30, 0.3);
}

body.light-theme .hero-frame-box {
  background: radial-gradient(circle at 50% 25%, rgba(255, 255, 255, 0.85) 0%, rgba(245, 242, 232, 0.95) 85%);
  border-color: var(--gold);
}

body.light-theme .location-chip {
  background: rgba(255, 255, 255, 0.9);
  color: var(--text-main);
}
body.light-theme .location-chip:hover {
  background: rgba(240, 240, 240, 0.95);
}

body.light-theme .verse-arabic {
  color: var(--gold-light);
  text-shadow: none;
}

body.light-theme .compass-dial-ring {
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.95) 0%, rgba(240, 235, 220, 1) 90%);
  box-shadow: 0 0 30px rgba(212, 175, 55, 0.3), inset 0 0 20px rgba(0, 0, 0, 0.1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font-ui);
  background: var(--bg-main);
  background-image: var(--bg-gradient);
  background-attachment: fixed;
  color: var(--text-main);
  line-height: 1.35;
  display: flex;
  flex-direction: column;
  transition: background 0.4s ease, color 0.4s ease;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: 
    linear-gradient(180deg, rgba(4, 13, 10, 0.50) 0%, rgba(4, 13, 10, 0.75) 100%),
    url('bg-mosque.jpg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  opacity: 0.65;
}

body.light-theme::before {
  background-image: 
    linear-gradient(180deg, rgba(245, 242, 232, 0.65) 0%, rgba(245, 242, 232, 0.85) 100%),
    url('bg-mosque.jpg');
  opacity: 0.45;
}

/* Toast */
.app-toast-box {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  z-index: 10000;
  background: rgba(8, 20, 16, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 2px solid var(--gold);
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.7), var(--shadow-glow);
  padding: 10px 18px;
  border-radius: 30px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 260px;
  max-width: 90%;
}
.app-toast-box.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.toast-title { font-size: 0.95rem; font-weight: 700; color: var(--gold-light); margin-bottom: 2px; }
.toast-desc { font-size: 0.85rem; color: var(--text-main); }

/* Loading Screen */
#loading-screen {
  position: fixed; inset: 0; z-index: 99999; background: #040d0a;
  display: flex; justify-content: center; align-items: center;
  transition: opacity 0.5s ease;
}
.loading-box { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.loading-crescent { width: 48px; height: 48px; border-radius: 50%; box-shadow: 12px 12px 0 0 var(--gold); animation: loadingPulse 1.6s ease-in-out infinite alternate; }
@keyframes loadingPulse { 0% { transform: scale(0.9); opacity: 0.7; } 100% { transform: scale(1.1); opacity: 1; filter: drop-shadow(0 0 16px var(--gold)); } }
.loading-title { font-size: 1.4rem; font-weight: 700; background: var(--gold-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* Header */
#app-header {
  height: var(--header-height); z-index: 1000;
  background: rgba(4, 13, 10, 0.94);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1.5px solid var(--border-gold); flex-shrink: 0;
}
body.light-theme #app-header { background: rgba(245, 242, 232, 0.9); }
.header-container { max-width: 540px; margin: 0 auto; height: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0 14px; }
.brand-wrapper-center { display: flex; align-items: center; gap: 6px; }
.brand-logo-crescent { font-size: 1.3rem; filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.8)); }
.brand-title-gold { font-size: 1.2rem; font-weight: 700; color: var(--gold-light); letter-spacing: 0.5px; text-shadow: 0 0 10px rgba(212, 175, 55, 0.5); }
.location-chip { display: flex; align-items: center; gap: 5px; background: rgba(18, 38, 33, 0.9); border: 1.2px solid var(--border-gold); padding: 4px 12px; border-radius: 30px; font-size: 0.8rem; font-weight: 600; color: var(--gold-light); cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); transition: all 0.25s ease; }
.location-chip:hover { background: rgba(25, 52, 45, 0.95); border-color: var(--gold-light); }

/* Bottom Nav */
#bottom-nav {
  height: var(--nav-height); z-index: 1000;
  background: linear-gradient(180deg, #d4af37 0%, #a8831b 100%);
  border-top: 1.5px solid #f7e8a1;
  box-shadow: 0 -4px 25px rgba(0, 0, 0, 0.6);
  display: flex; justify-content: space-around; align-items: center;
  flex-shrink: 0; padding: 4px 0 env(safe-area-inset-bottom);
}
.nav-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: none; border: none; color: #061511; cursor: pointer; padding: 4px 0; transition: all 0.25s ease; }
.nav-tab.active { color: #000000; font-weight: 800; }
.tab-icon { font-size: 1.55rem; transition: transform 0.25s ease; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3)); }
.nav-tab.active .tab-icon { transform: translateY(-2px) scale(1.15); filter: drop-shadow(0 3px 6px rgba(0,0,0,0.5)); }
.tab-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.2px; }

/* App Main */
#app-main {
  flex: 1; max-width: 540px; width: 100%; margin: 0 auto;
  position: relative; z-index: 1;
  display: flex; flex-direction: column; overflow: hidden; padding: 6px 8px;
}
.page-section { display: none; height: 100%; width: 100%; animation: pageFadeIn 0.35s ease forwards; }
.page-section.active { display: flex; flex-direction: column; }
@keyframes pageFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* Hero Frame Box */
.hero-frame-box {
  background: radial-gradient(circle at 50% 25%, rgba(13, 40, 32, 0.92) 0%, rgba(4, 13, 10, 0.96) 85%);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1.8px solid var(--gold); border-radius: var(--radius-lg);
  padding: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), var(--shadow-glow);
  display: flex; flex-direction: column; justify-content: flex-start;
  height: 100%; width: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch;
}

/* ═══ 1. EN ÜST: SAAT & TARİH (Çemberden AYRI) ═══ */
.time-header-centered {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; margin-bottom: 2px; width: 100%;
}

#clock-display {
  font-size: clamp(2.4rem, 8.5vw, 3.1rem);
  font-weight: 700; line-height: 1; letter-spacing: -1px;
  background: var(--gold-gradient);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.5));
  margin-bottom: 2px;
}

.date-hijri-subrow {
  display: flex; align-items: center; justify-content: center;
  font-size: 0.84rem; color: var(--gold-light); font-weight: 600;
}

/* ═══ 2. ORTA: BÜYÜK DAİRESEL ÇEMBER (SADECE GERİ SAYIM İÇERİDE) ═══ */
.countdown-hero-wrap {
  display: flex; justify-content: center; align-items: center;
  margin: 4px 0 6px;
}

.circle-progress-wrapper {
  position: relative;
  width: 190px; height: 190px; border-radius: 50%;
  padding: 0; margin: 4px auto;
  display: flex; justify-content: center; align-items: center;
  background: radial-gradient(circle, rgba(14, 40, 33, 0.4) 0%, transparent 70%);
}

.circle-progress-svg {
  transform: rotate(-90deg); width: 190px; height: 190px;
  position: absolute;
  top: 0; left: 0;
}

.progress-bg { 
  stroke: rgba(212, 175, 55, 0.15); 
  stroke-dasharray: 2 4;
}

.progress-bar {
  stroke-linecap: round;
  transition: stroke-dashoffset 1s linear;
  filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.8));
}

.countdown-inner {
  position: relative; z-index: 2;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}

.countdown-target {
  font-size: 0.78rem; color: var(--gold-light); font-weight: 600;
  margin-bottom: 2px; text-transform: uppercase; letter-spacing: 0.8px;
  padding: 0 10px;
}

.countdown-timer-text {
  font-size: 1.6rem; font-weight: 800; color: #ffffff;
  letter-spacing: 1.5px; text-shadow: 0 2px 8px rgba(0,0,0,0.9);
  font-variant-numeric: tabular-nums;
}

/* ═══ 3. ALT: NAMAZ VAKİTLERİ & GÜNÜN AYETİ ═══ */
.hero-prayer-unified-box {
  position: relative;
  border: 1.8px solid var(--gold); border-radius: 16px;
  background: linear-gradient(180deg, rgba(8, 28, 22, 0.96) 0%, rgba(4, 13, 10, 0.98) 100%);
  padding: 10px;
  box-shadow: 0 0 30px rgba(212, 175, 55, 0.4), inset 0 0 20px rgba(0, 0, 0, 0.6);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.corner-ornament { position: absolute; color: var(--gold); font-size: 0.95rem; line-height: 1; pointer-events: none; }
.corner-ornament.tl { top: 3px; left: 5px; }
.corner-ornament.tr { top: 3px; right: 5px; }
.corner-ornament.bl { bottom: 3px; left: 5px; }
.corner-ornament.br { bottom: 3px; right: 5px; }

.prayer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 6px; }

.prayer-card {
  background: rgba(10, 32, 25, 0.85);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1.2px solid var(--border-gold); border-radius: var(--radius-md);
  padding: 6px 4px;
  display: flex; flex-direction: flex-start; align-items: center; justify-content: space-around; gap: 4px;
  box-shadow: var(--shadow-card); transition: all 0.25s ease; cursor: pointer; user-select: none;
}
.prayer-card:hover, .prayer-card:active { background: var(--bg-card-hover); border-color: var(--gold-light); }
.prayer-card.active { border: 2px solid #ffffff; box-shadow: 0 0 25px rgba(212, 175, 55, 0.7); background: linear-gradient(135deg, rgba(212, 175, 55, 0.35) 0%, rgba(18, 48, 38, 0.95) 100%); }
.prayer-card-header { display: flex; align-items: center; gap: 4px; }
.prayer-icon { font-size: 1.1rem; }
.prayer-name { font-size: 0.8rem; color: var(--gold-light); font-weight: 600; }
.prayer-time { font-size: 1.15rem; font-weight: 700; color: #ffffff; }

/* Daily Verse */
.daily-verse-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border-gold);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-top: 16px;
  box-shadow: var(--shadow-card);
}
.verse-card-title { font-size: 0.95rem; font-weight: 700; color: var(--gold-light); text-align: center; margin-bottom: 4px; }
.verse-arabic { font-family: var(--font-ar); font-size: clamp(1.2rem, 4vw, 1.5rem); color: var(--gold-light); line-height: 1.4; direction: rtl; text-align: right; margin-bottom: 4px; }
.verse-turkish { font-size: clamp(0.9rem, 3.2vw, 1.05rem); color: var(--text-sub); line-height: 1.4; margin-bottom: 6px; font-weight: 500; }
.verse-source { font-size: 0.75rem; color: var(--gold-light); text-align: right; font-weight: 700; opacity: 0.9; }

/* Page Headers */
.page-header-title { text-align: center; margin-bottom: 12px; }
.page-header-title h2 { font-size: 1.15rem; font-weight: 700; color: var(--gold-light); }
.page-header-title p { font-size: 0.8rem; color: var(--text-sub); }

/* Qibla Compass */
.qibla-wrapper { display: flex; flex-direction: column; align-items: center; }
.compass-container { position: relative; width: 240px; height: 240px; margin: 6px auto 14px; }
.compass-dial-ring { position: absolute; inset: 0; border-radius: 50%; border: 2.5px solid var(--gold); background: radial-gradient(circle, rgba(14, 40, 33, 0.92) 0%, rgba(4, 12, 10, 0.96) 80%); box-shadow: 0 0 30px rgba(212, 175, 55, 0.5), inset 0 0 25px rgba(0, 0, 0, 0.7); }
.compass-inner-dial { position: absolute; inset: 12px; border-radius: 50%; border: 1.5px dashed rgba(212, 175, 55, 0.45); transition: transform 0.2s ease-out; }
.compass-point { position: absolute; font-weight: 700; font-size: 0.95rem; color: var(--gold-light); }
.compass-point.n { top: 8px; left: 50%; transform: translateX(-50%); color: #ff5252; font-size: 1.1rem; }
.compass-point.s { bottom: 8px; left: 50%; transform: translateX(-50%); }
.compass-point.e { top: 50%; right: 8px; transform: translateY(-50%); }
.compass-point.w { top: 50%; left: 8px; transform: translateY(-50%); }
.qibla-pointer { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform-origin: center; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 14px; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.kaaba-head { font-size: 1.8rem; filter: drop-shadow(0 0 12px rgba(212, 175, 55, 0.95)); }
.pointer-stem { width: 5px; height: 82px; background: linear-gradient(180deg, #ffffff 0%, #f7e8a1 30%, #d4af37 70%, transparent 100%); border-radius: 6px; margin-top: 2px; box-shadow: 0 0 12px rgba(212, 175, 55, 0.85); }
.qibla-stats-row { display: flex; gap: 10px; width: 100%; max-width: 320px; }
.stat-box { flex: 1; background: var(--bg-card); border: 1.2px solid var(--border-gold); border-radius: var(--radius-md); padding: 10px 8px; text-align: center; box-shadow: var(--shadow-card); }
.stat-label { font-size: 0.75rem; color: var(--text-sub); margin-bottom: 2px; }
.stat-value { font-size: 1.15rem; font-weight: 700; color: var(--gold-light); }
.compass-note { margin-top: 10px; font-size: 0.8rem; color: var(--text-muted); text-align: center; }

/* Quran */
.quran-search-bar { position: relative; margin-bottom: 14px; }
.search-input-field { width: 100%; padding: 10px 16px 10px 38px; border-radius: 30px; border: 1.5px solid var(--border-gold); background: var(--bg-card); color: var(--text-main); font-size: 0.88rem; font-family: var(--font-ui); outline: none; box-shadow: var(--shadow-card); transition: all 0.25s ease; }
.search-input-field:focus { border-color: var(--gold-light); box-shadow: var(--shadow-glow); }
.search-icon-fixed { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 1rem; pointer-events: none; opacity: 0.7; }
.surah-list-wrap { display: flex; flex-direction: column; gap: 8px; }
.surah-card { background: var(--bg-card); border: 1.2px solid var(--border-gold); border-radius: var(--radius-md); padding: 10px 14px; display: flex; align-items: center; gap: 12px; cursor: pointer; box-shadow: var(--shadow-card); transition: all 0.25s ease; }
.surah-card:hover { background: var(--bg-card-hover); border-color: var(--gold-light); }
.surah-badge-num { width: 34px; height: 34px; border-radius: 50%; background: rgba(212, 175, 55, 0.18); border: 1.2px solid var(--border-gold); color: var(--gold-light); font-weight: 700; font-size: 0.85rem; display: flex; justify-content: center; align-items: center; flex-shrink: 0; }
.surah-info-col { flex: 1; min-width: 0; }
.surah-title-tr { font-weight: 600; font-size: 0.92rem; color: var(--text-main); }
.surah-sub-info { font-size: 0.75rem; color: var(--text-sub); }
.surah-title-ar { font-family: var(--font-ar); font-size: 1.3rem; color: var(--gold-light); direction: rtl; }

/* Surah Detail */
.detail-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.back-btn { background: var(--bg-card); border: 1.2px solid var(--border-gold); color: var(--gold-light); padding: 6px 14px; border-radius: 20px; cursor: pointer; font-size: 0.82rem; font-weight: 600; display: flex; align-items: center; gap: 4px; }
.font-size-adjuster { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text-sub); }
.font-btn { background: var(--bg-card); border: 1.2px solid var(--border-gold); color: var(--gold-light); width: 28px; height: 28px; border-radius: 6px; cursor: pointer; font-weight: 700; display: flex; justify-content: center; align-items: center; }
.surah-detail-header-card { text-align: center; background: var(--bg-card); border: 1.2px solid var(--border-gold); border-radius: var(--radius-lg); padding: 14px; margin-bottom: 14px; box-shadow: var(--shadow-card); }
.detail-ar-name { font-family: var(--font-ar); font-size: 2rem; color: var(--gold-light); margin-bottom: 2px; }
.detail-tr-name { font-size: 1.05rem; font-weight: 700; color: var(--text-main); }
.detail-meta { font-size: 0.8rem; color: var(--text-sub); }
.bismillah-header { font-family: var(--font-ar); font-size: 1.6rem; text-align: center; color: var(--gold-light); margin: 14px 0; }
.ayah-card { background: var(--bg-card); border: 1px solid var(--border-gold); border-radius: var(--radius-md); padding: 12px; margin-bottom: 8px; box-shadow: var(--shadow-card); }
.ayah-card:nth-child(even) { background: rgba(18, 38, 33, 0.88); }
.ayah-ar-text { font-family: var(--font-ar); font-size: var(--quran-font-size, 18px); line-height: 1.9; text-align: right; direction: rtl; color: var(--gold-light); margin-bottom: 6px; }
.ayah-tr-text { font-size: 0.88rem; color: var(--text-main); line-height: 1.5; }
.verse-num-badge { display: inline-flex; width: 22px; height: 22px; justify-content: center; align-items: center; border-radius: 50%; border: 1.2px solid var(--gold); color: var(--gold-light); font-size: 0.65rem; font-weight: 700; margin-right: 6px; vertical-align: middle; }

/* Prayer Guide */
.guide-tabs-scroller { padding-bottom: 6px; margin-bottom: 10px; }
.prayer-type-pill-bar { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.prayer-pill-btn { background: var(--bg-card); border: 1.2px solid var(--border-gold); color: var(--text-sub); padding: 8px 16px; border-radius: 30px; cursor: pointer; font-size: 0.82rem; font-weight: 500; font-family: var(--font-ui); white-space: nowrap; transition: all 0.25s ease; }
.prayer-pill-btn:hover { border-color: var(--gold-light); background: var(--bg-card-hover); }
.prayer-pill-btn.active { background: var(--gold-gradient); color: #050d0b; border-color: var(--gold-light); font-weight: 700; box-shadow: 0 3px 12px rgba(212, 175, 55, 0.4); }
.rakat-summary-box { background: var(--bg-card); border: 1.2px solid var(--border-gold); border-radius: var(--radius-lg); padding: 12px; margin-bottom: 14px; text-align: center; box-shadow: var(--shadow-card); }
.summary-heading { font-size: 0.95rem; font-weight: 700; color: var(--gold-light); margin-bottom: 6px; }
.rakat-tags-row { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.tag-badge { padding: 3px 10px; border-radius: 16px; font-size: 0.75rem; font-weight: 600; }
.tag-badge.sunnet { background: rgba(37, 97, 84, 0.4); color: #5ce3c7; border: 1px solid rgba(37, 97, 84, 0.6); }
.tag-badge.farz { background: rgba(212, 175, 55, 0.25); color: var(--gold-light); border: 1.2px solid var(--border-gold); }
.tag-badge.vitir { background: rgba(138, 92, 246, 0.25); color: #c4b5fd; border: 1px solid rgba(138, 92, 246, 0.5); }
.step-card { background: var(--bg-card); border: 1.2px solid var(--border-gold); border-radius: var(--radius-md); padding: 12px; margin-bottom: 8px; display: flex; gap: 10px; box-shadow: var(--shadow-card); }
.step-circle-num { width: 26px; height: 26px; border-radius: 50%; background: var(--gold-gradient); color: #050d0b; font-weight: 700; font-size: 0.85rem; display: flex; justify-content: center; align-items: center; flex-shrink: 0; }
.step-body h4 { font-size: 0.92rem; font-weight: 700; color: var(--gold-light); margin-bottom: 2px; }
.step-body p { font-size: 0.85rem; color: var(--text-main); line-height: 1.45; }
.step-dua-block { margin-top: 6px; padding: 8px; background: rgba(212, 175, 55, 0.12); border-left: 3px solid var(--gold); border-radius: 6px; }
.step-dua-ar { font-family: var(--font-ar); font-size: 1.15rem; color: var(--gold-light); direction: rtl; text-align: right; }
.step-dua-tr { font-size: 0.78rem; color: var(--text-sub); font-style: italic; }

/* Settings */
.settings-group-wrapper { display: flex; flex-direction: column; gap: 14px; }
.group-title { font-size: 0.88rem; font-weight: 600; color: var(--gold-light); margin-bottom: 4px; }
.settings-card-box { background: var(--bg-card); border: 1.2px solid var(--border-gold); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.setting-row { padding: 10px 14px; border-bottom: 1px solid var(--border-light); display: flex; justify-content: space-between; align-items: center; }
.setting-row label { font-size: 0.88rem; font-weight: 500; color: var(--text-main); }
.select-input { background: rgba(8, 18, 15, 0.75); color: var(--text-main); border: 1.2px solid var(--border-gold); padding: 6px 10px; border-radius: 8px; font-size: 0.82rem; outline: none; min-width: 140px; }
.action-row { padding: 10px; text-align: center; }
.gold-primary-btn { background: var(--gold-gradient); color: #050d0b; border: none; padding: 9px 18px; border-radius: 30px; font-size: 0.88rem; font-weight: 700; cursor: pointer; box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4); }

/* Toggle */
.toggle-switch { position: relative; display: inline-block; width: 42px; height: 22px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; cursor: pointer; inset: 0; background: rgba(255, 255, 255, 0.2); border-radius: 22px; transition: 0.3s; }
.toggle-slider::before { position: absolute; content: ''; height: 16px; width: 16px; left: 3px; bottom: 3px; background: #ffffff; border-radius: 50%; transition: 0.3s; }
input:checked + .toggle-slider { background: var(--gold); }
input:checked + .toggle-slider::before { transform: translateX(20px); }

/* ═══ PRAYER GUIDE DUALS & ═══ QIBLA PERMISSION MODAL OVERLAY ═══ */
.modal-backdrop-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 12, 10, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeInModal 0.3s ease;
}

@keyframes fadeInModal {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.modal-dialog-card {
  background: radial-gradient(circle at top, rgba(20, 50, 40, 0.98) 0%, rgba(6, 18, 14, 0.98) 100%);
  border: 1.5px solid var(--border-gold);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  max-width: 360px;
  width: 100%;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 30px rgba(212, 175, 55, 0.25);
}

.modal-icon-badge {
  font-size: 3rem;
  margin-bottom: 8px;
  filter: drop-shadow(0 0 16px rgba(212, 175, 55, 0.8));
}

.modal-dialog-card h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--gold-light);
  margin-bottom: 10px;
}

.modal-dialog-card p {
  font-size: 0.88rem;
  color: var(--text-sub);
  line-height: 1.5;
  margin-bottom: 20px;
}

.modal-btn-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.modal-approve-btn {
  background: linear-gradient(135deg, #d4af37 0%, #aa820a 100%);
  color: #040c0a;
  font-size: 0.95rem;
  font-weight: 800;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
  transition: all 0.2s ease;
}

.modal-approve-btn:active {
  transform: scale(0.98);
}

.modal-cancel-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  cursor: pointer;
}

#prayer-steps-wrap, #duas-wrap {
  overflow: visible;
  height: auto;
}

.section-sub-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--gold-light);
  text-align: center;
  margin: 10px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.3);
}

.dua-full-card {
  background: var(--bg-card);
  border: 1.2px solid var(--border-gold);
  border-radius: var(--radius-md);
  padding: 12px;
  margin-bottom: 8px;
  box-shadow: var(--shadow-card);
}

.dua-card-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--gold-light);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dua-card-title::before {
  content: '📿';
}

.dua-ar-text {
  font-family: var(--font-ar);
  font-size: clamp(1.1rem, 3.5vw, 1.35rem);
  color: var(--gold-light);
  line-height: 1.8;
  direction: rtl;
  text-align: right;
  margin-bottom: 8px;
  padding: 8px;
  background: rgba(212, 175, 55, 0.08);
  border-radius: 8px;
  border-left: 3px solid var(--gold);
}

.dua-tr-text {
  font-size: 0.82rem;
  color: var(--text-sub);
  line-height: 1.5;
  font-style: italic;
}

/* ═══ QIBLA COMPASS ENHANCEMENTS ═══ */
.compass-container {
  position: relative;
  width: 280px;
  height: 280px;
  margin: 15px auto 20px;
}

.compass-dial-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(212, 175, 55, 0.5);
  background: radial-gradient(circle, rgba(18, 38, 33, 0.95) 0%, rgba(8, 20, 16, 0.98) 100%);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.6), inset 0 0 15px rgba(212, 175, 55, 0.15);
}

.compass-dial-ring::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1px dashed rgba(212, 175, 55, 0.4);
  pointer-events: none;
}
.compass-dial-ring::after {
  content: '';
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, 0.2);
}

.compass-inner-dial {
  position: absolute;
  inset: 16px;
  border-radius: 50%;
  border: none;
  transition: transform 0.08s ease-out;
  will-change: transform;
}

.compass-point {
  position: absolute;
  font-weight: 600;
  font-size: 0.95rem;
  color: rgba(212, 175, 55, 0.85);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.compass-point.n { top: 4px; left: 50%; transform: translateX(-50%); color: #e53935; font-size: 1.1rem; font-weight: 700; }
.compass-point.s { bottom: 4px; left: 50%; transform: translateX(-50%); }
.compass-point.e { top: 50%; right: 4px; transform: translateY(-50%); }
.compass-point.w { top: 50%; left: 4px; transform: translateY(-50%); }

.fixed-top-qibla-target {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 12;
  pointer-events: none;
}

.qibla-target-kaaba {
  font-size: 2.2rem;
  filter: drop-shadow(0 0 16px rgba(212, 175, 55, 1));
  animation: kaabaGlow 2s ease-in-out infinite alternate;
}

@keyframes kaabaGlow {
  0% { filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.6)); }
  100% { filter: drop-shadow(0 0 22px rgba(212, 175, 55, 1)); }
}

.qibla-target-badge {
  font-size: 0.62rem;
  font-weight: 800;
  color: var(--gold-light);
  letter-spacing: 0.8px;
  background: rgba(4, 12, 10, 0.92);
  padding: 2px 8px;
  border-radius: 10px;
  border: 1.2px solid var(--border-gold);
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  margin-top: -4px;
}

.dynamic-compass-needle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform-origin: center center;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 26px;
  pointer-events: none;
  z-index: 10;
  transition: transform 0.08s ease-out;
  will-change: transform;
}

.needle-gold-head {
  color: #ffda6a;
  font-size: 1.6rem;
  line-height: 1;
  filter: drop-shadow(0 0 12px var(--gold));
  animation: needlePulse 1.8s ease-in-out infinite alternate;
}

@keyframes needlePulse {
  0% { transform: scale(1); filter: drop-shadow(0 0 8px var(--gold)); }
  100% { transform: scale(1.15); filter: drop-shadow(0 0 18px #ffffff); }
}

.needle-stem {
  width: 5px;
  height: 72px;
  background: linear-gradient(180deg, #ffffff 0%, #f7e8a1 30%, #d4af37 70%, transparent 100%);
  border-radius: 4px;
  margin-top: -2px;
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.9);
}

.needle-pivot {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gold-light);
  border: 2px solid #ffffff;
  box-shadow: 0 0 14px var(--gold);
}

.qibla-stats-row {
  display: flex;
  gap: 12px;
  width: 100%;
  max-width: 340px;
}

.stat-box {
  flex: 1;
  background: var(--bg-card);
  border: 1.5px solid var(--border-gold);
  border-radius: var(--radius-md);
  padding: 12px 10px;
  text-align: center;
  box-shadow: var(--shadow-card), 0 0 12px rgba(212, 175, 55, 0.15);
}

.compass-note {
  margin-top: 12px;
  font-size: 0.82rem;
  color: var(--text-muted);
  text-align: center;
  padding: 8px 16px;
  background: rgba(10, 32, 25, 0.6);
  border-radius: 20px;
  border: 1px solid rgba(212, 175, 55, 0.2);
}

/* Compass center dot */
.qibla-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  border-radius: 30px;
  font-size: 0.92rem;
  font-weight: 700;
  margin-bottom: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  transition: all 0.3s ease;
  letter-spacing: 0.3px;
}

.qibla-pill.turn-right, .qibla-pill.turn-left {
  background: rgba(212, 175, 55, 0.18);
  border: 1.5px solid var(--gold);
  color: var(--gold-light);
}

.qibla-pill.aligned {
  background: linear-gradient(135deg, #10b981 0%, #047857 100%);
  border: 2px solid #6ee7b7;
  color: #ffffff;
  box-shadow: 0 0 25px rgba(16, 185, 129, 0.8);
  animation: pulseAligned 1.5s ease-in-out infinite alternate;
}

@keyframes pulseAligned {
  0% { transform: scale(1); filter: drop-shadow(0 0 10px #10b981); }
  100% { transform: scale(1.05); filter: drop-shadow(0 0 25px #6ee7b7); }
}

.manual-dial-wrap {
  width: 100%;
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(10, 32, 25, 0.7);
  border: 1.2px solid var(--border-gold);
  border-radius: var(--radius-md);
  text-align: center;
}

.manual-dial-label {
  font-size: 0.76rem;
  color: var(--gold-light);
  margin-bottom: 4px;
  font-weight: 600;
}

#manual-compass-slider {
  width: 100%;
  accent-color: var(--gold);
  cursor: pointer;
}

/* ═══ DUA OKUNUŞU & MEALİ STYLING ═══ */
.dua-okunusu-text {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--gold-light);
  line-height: 1.6;
  background: rgba(212, 175, 55, 0.1);
  border-left: 3px solid var(--gold);
  border-radius: 6px;
  padding: 8px 12px;
  margin: 8px 0;
  letter-spacing: 0.2px;
}

.dua-tr-text {
  font-size: 0.83rem;
  color: var(--text-sub);
  line-height: 1.5;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  padding: 8px 12px;
  border: 1px dashed rgba(212, 175, 55, 0.2);
}

.ayah-okunusu-text {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--gold-light);
  line-height: 1.6;
  background: rgba(212, 175, 55, 0.08);
  border-left: 3px solid var(--gold);
  border-radius: 6px;
  padding: 8px 12px;
  margin: 8px 0;
  letter-spacing: 0.2px;
}

/* ═══ INTERACTIVE RAKAT PART BUTTONS ═══ */
.rakat-sub-hint {
  font-size: 0.8rem;
  color: var(--gold-light);
  margin-bottom: 8px;
  font-weight: 500;
  opacity: 0.9;
}

.tag-badge-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid rgba(212, 175, 55, 0.4);
  background: rgba(10, 32, 25, 0.7);
  color: var(--text-main);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.tag-badge-btn:hover, .tag-badge-btn.active-part-btn {
  transform: translateY(-2px);
  border-color: var(--gold-light);
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.35) 0%, rgba(23, 66, 57, 0.9) 100%);
  color: #ffffff;
  box-shadow: 0 0 16px rgba(212, 175, 55, 0.5);
}

.tag-badge-btn.farz.active-part-btn {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.45) 0%, rgba(180, 130, 20, 0.95) 100%);
  border-color: #ffe680;
}

.tag-badge-btn.vitir.active-part-btn {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.45) 0%, rgba(126, 34, 206, 0.95) 100%);
  border-color: #e9d5ff;
}

.active-part-header-banner {
  margin: 16px 0 12px;
  padding: 12px 14px;
  background: rgba(212, 175, 55, 0.12);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-gold);
}

.active-part-header-banner .banner-badge {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--gold-light);
  font-weight: 700;
  display: block;
  margin-bottom: 2px;
}

.active-part-header-banner h3 {
  font-size: 1.05rem;
  color: var(--gold-gradient);
  margin: 0;
  font-weight: 700;
}

.step-dua-okunusu {
  font-size: 0.85rem;
  color: var(--gold-light);
  line-height: 1.5;
  background: rgba(212, 175, 55, 0.08);
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  padding: 6px 10px;
  margin: 6px 0;
}

/* ═══ SPACING DIVIDER BETWEEN KILINIŞ & DUALAR ═══ */
.section-divider-block {
  margin-top: 36px;
  margin-bottom: 16px;
  padding-top: 24px;
  border-top: 2px dashed rgba(212, 175, 55, 0.35);
  text-align: center;
}

.section-divider-block .section-sub-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gold-light);
  background: rgba(10, 32, 25, 0.9);
  display: inline-block;
  padding: 8px 18px;
  border-radius: 20px;
  border: 1px solid var(--border-gold);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), var(--shadow-glow);
}

/* ═══ GUIDE VIEW SEGMENTED SWITCHER ═══ */
.guide-view-switcher {
  display: flex;
  gap: 6px;
  background: rgba(4, 13, 10, 0.8);
  border: 1.2px solid var(--border-gold);
  border-radius: 30px;
  padding: 4px;
  margin: 14px 0 16px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.guide-switch-btn {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-sub);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 8px 6px;
  border-radius: 22px;
  cursor: pointer;
  transition: all 0.25s ease;
  text-align: center;
}

.guide-switch-btn.active {
  background: var(--gold-gradient);
  color: #050d0b;
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(212, 175, 55, 0.5);
}

/* ══════════════════════════════════════════════════════════
   HUZUR VAKTİ v55 — YENİ ÖZELLİK STİLLERİ (content.js + features.js)
   Mevcut stiller korunmuştur; bu blok yalnızca yeni bileşenler içindir.
   ══════════════════════════════════════════════════════════ */

/* Home ek: Hicri ayraç, mini paylaş, Günün Hadisi */
.date-sep { margin: 0 6px; opacity: 0.5; }
#date-display-hijri { color: var(--gold); font-weight: 700; }

.mini-share-btn {
  margin-top: 8px; background: rgba(212,175,55,0.14); border: 1px solid var(--border-gold);
  color: var(--gold-light); font-size: 0.72rem; font-weight: 700; padding: 5px 14px;
  border-radius: 16px; cursor: pointer; display: block; margin-left: auto;
}
.mini-share-btn:active { transform: scale(0.96); }

.daily-hadis-card {
  background: var(--bg-card); border: 1.5px solid var(--border-gold); border-radius: var(--radius-md);
  padding: 12px 16px; margin-top: 10px; box-shadow: var(--shadow-card);
}
.hadis-arabic { font-family: var(--font-ar); font-size: 1.15rem; color: var(--gold-light); direction: rtl; text-align: right; margin-bottom: 6px; line-height: 1.6; }
.hadis-text { font-size: clamp(0.9rem,3.2vw,1.02rem); color: var(--text-sub); line-height: 1.5; font-weight: 500; font-style: italic; }
.hadis-source { font-size: 0.75rem; color: var(--gold-light); text-align: right; font-weight: 700; margin-top: 6px; opacity: 0.9; }

/* ── HUB IZGARASI ── */
.hub-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 4px 0; }
.hub-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: var(--bg-card); border: 1.4px solid var(--border-gold); border-radius: var(--radius-md);
  padding: 16px 10px; cursor: pointer; text-align: center; box-shadow: var(--shadow-card);
  transition: all 0.22s ease; min-height: 108px; color: var(--text-main); font-family: var(--font-ui);
}
.hub-card:hover, .hub-card:active { background: var(--bg-card-hover); border-color: var(--gold-light); transform: translateY(-2px); box-shadow: 0 0 18px rgba(212,175,55,0.4); }
.hub-icon { font-size: 2rem; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4)); margin-bottom: 2px; }
.hub-title { font-size: 0.92rem; font-weight: 700; color: var(--gold-light); line-height: 1.15; }
.hub-sub { font-size: 0.72rem; color: var(--text-muted); }

/* ── GERİ BUTONU ── */
.hub-back-btn {
  background: var(--bg-card); border: 1.2px solid var(--border-gold); color: var(--gold-light);
  padding: 6px 14px; border-radius: 20px; cursor: pointer; font-size: 0.82rem; font-weight: 600;
  margin-bottom: 10px; align-self: flex-start; font-family: var(--font-ui);
}
.hub-back-btn:active { transform: scale(0.97); }

/* ── SEGMENT BUTON ── */
.segmented-switch, .share-type-switch {
  display: flex; gap: 6px; background: rgba(4,13,10,0.8); border: 1.2px solid var(--border-gold);
  border-radius: 30px; padding: 4px; margin-bottom: 14px; box-shadow: 0 4px 15px rgba(0,0,0,0.4);
}
.seg-btn {
  flex: 1; background: transparent; border: none; color: var(--text-sub); font-size: 0.82rem;
  font-weight: 600; padding: 8px 6px; border-radius: 22px; cursor: pointer; transition: all 0.25s ease;
  font-family: var(--font-ui);
}
.seg-btn.active { background: var(--gold-gradient); color: #050d0b; font-weight: 700; box-shadow: 0 2px 10px rgba(212,175,55,0.5); }

/* ── GENEL ÖZELLİK KARTI ── */
.feature-card {
  background: var(--bg-card); border: 1.2px solid var(--border-gold); border-radius: var(--radius-md);
  padding: 12px 14px; margin-bottom: 10px; box-shadow: var(--shadow-card);
}
.fc-title { font-size: 0.95rem; font-weight: 700; color: var(--gold-light); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fc-ar { font-family: var(--font-ar); font-size: clamp(1.15rem,4vw,1.4rem); color: var(--gold-light); direction: rtl; text-align: right; line-height: 1.8; margin-bottom: 8px; padding: 8px; background: rgba(212,175,55,0.08); border-radius: 8px; border-right: 3px solid var(--gold); }
.fc-ok { font-size: 0.85rem; color: var(--gold-light); line-height: 1.5; background: rgba(212,175,55,0.08); border-left: 3px solid var(--gold); border-radius: 6px; padding: 8px 12px; margin-bottom: 8px; }
.fc-tr { font-size: 0.85rem; color: var(--text-sub); line-height: 1.5; }
.fc-note { font-size: 0.78rem; color: var(--text-muted); margin-top: 8px; padding: 6px 10px; background: rgba(0,0,0,0.2); border-radius: 6px; border: 1px dashed rgba(212,175,55,0.25); }
.count-badge { background: var(--gold-gradient); color: #050d0b; font-size: 0.72rem; font-weight: 800; padding: 2px 8px; border-radius: 12px; }
.empty-note, .info-note { text-align: center; color: var(--text-muted); font-size: 0.82rem; padding: 12px; background: rgba(42,23,12,0.55); border: 1px solid rgba(212,175,55,0.2); border-radius: var(--radius-md); margin-bottom: 10px; line-height: 1.5; }
.section-mini-title { font-size: 0.9rem; font-weight: 700; color: var(--gold-light); margin: 12px 0 8px; padding-bottom: 5px; border-bottom: 1px solid rgba(212,175,55,0.3); }

/* ── ÖNEMLİ SURELER ── */
.onemli-card { cursor: pointer; transition: all 0.2s ease; }
.onemli-card:active { transform: scale(0.99); }
.onemli-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.onemli-badge { width: 30px; height: 30px; border-radius: 50%; background: rgba(212,175,55,0.18); border: 1.2px solid var(--border-gold); color: var(--gold-light); font-weight: 700; font-size: 0.8rem; display: flex; justify-content: center; align-items: center; flex-shrink: 0; }
.onemli-head .fc-title { margin: 0; flex: 1; }
.onemli-go { font-size: 1.4rem; color: var(--gold); }

/* ── ESMAÜL HÜSNA ── */
.esma-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.esma-item { background: var(--bg-card); border: 1.2px solid var(--border-gold); border-radius: var(--radius-md); padding: 10px; box-shadow: var(--shadow-card); }
.esma-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.esma-no { width: 22px; height: 22px; border-radius: 50%; background: rgba(212,175,55,0.18); border: 1px solid var(--border-gold); color: var(--gold-light); font-size: 0.68rem; font-weight: 700; display: flex; justify-content: center; align-items: center; }
.esma-ar { font-family: var(--font-ar); font-size: 1.4rem; color: var(--gold-light); direction: rtl; }
.esma-tr { font-size: 0.9rem; font-weight: 700; color: var(--text-main); margin-bottom: 2px; }
.esma-mean { font-size: 0.75rem; color: var(--text-sub); line-height: 1.4; }

/* ── ZİKİRMATİK ── */
.zikir-presets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 14px; }
.zikir-preset { background: var(--bg-card); border: 1.2px solid var(--border-gold); color: var(--text-sub); padding: 8px; border-radius: 12px; cursor: pointer; font-size: 0.8rem; font-weight: 600; font-family: var(--font-ui); }
.zikir-preset.active { background: var(--gold-gradient); color: #050d0b; font-weight: 700; }
.zikir-display { text-align: center; background: radial-gradient(circle at 50% 30%, rgba(13,40,32,0.9), rgba(4,13,10,0.95)); border: 1.8px solid var(--gold); border-radius: var(--radius-lg); padding: 18px; margin-bottom: 14px; box-shadow: inset 0 0 25px rgba(0,0,0,0.5), var(--shadow-glow); }
.zikir-ar { font-family: var(--font-ar); font-size: 1.7rem; color: var(--gold-light); margin-bottom: 4px; }
.zikir-label { font-size: 0.85rem; color: var(--text-sub); text-transform: uppercase; letter-spacing: 1px; }
.zikir-count { font-size: 4rem; font-weight: 800; line-height: 1.1; background: var(--gold-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-variant-numeric: tabular-nums; }
.zikir-target { font-size: 0.85rem; color: var(--gold-light); font-weight: 600; }
.zikir-btn-main { width: 100%; background: var(--gold-gradient); color: #050d0b; border: none; border-radius: var(--radius-lg); padding: 22px; font-size: 1.3rem; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 6px 20px rgba(212,175,55,0.5); transition: transform 0.08s ease; user-select: none; }
.zikir-btn-main:active { transform: scale(0.97); box-shadow: 0 2px 10px rgba(212,175,55,0.6); }
.zikir-tap-icon { font-size: 1.6rem; }
.zikir-actions { display: flex; gap: 8px; margin-top: 12px; }
.zikir-mini-btn { flex: 1; background: var(--bg-card); border: 1.2px solid var(--border-gold); color: var(--gold-light); padding: 10px; border-radius: 12px; cursor: pointer; font-size: 0.82rem; font-weight: 600; font-family: var(--font-ui); }
.zikir-mini-btn:active { transform: scale(0.97); }

/* ── NAMAZ TAKİBİ ── */
.takip-summary { text-align: center; background: var(--bg-card); border: 1.5px solid var(--border-gold); border-radius: var(--radius-lg); padding: 14px; margin-bottom: 12px; box-shadow: var(--shadow-card); }
.ts-big { font-size: 2.4rem; font-weight: 800; background: var(--gold-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.ts-label { font-size: 0.8rem; color: var(--text-sub); }
.prayer-check-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.prayer-check-row { display: flex; align-items: center; justify-content: space-between; background: var(--bg-card); border: 1.2px solid var(--border-gold); border-radius: var(--radius-md); padding: 12px 16px; cursor: pointer; box-shadow: var(--shadow-card); transition: all 0.2s ease; font-family: var(--font-ui); }
.prayer-check-row.checked { background: linear-gradient(135deg, rgba(212,175,55,0.3), rgba(18,48,38,0.95)); border-color: var(--gold-light); }
.pc-label { font-size: 0.95rem; font-weight: 600; color: var(--text-main); }
.pc-box { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--gold); display: flex; align-items: center; justify-content: center; color: #050d0b; font-weight: 800; background: transparent; }
.prayer-check-row.checked .pc-box { background: var(--gold-gradient); }
.streak-box { text-align: center; background: rgba(212,175,55,0.12); border: 1px solid var(--border-gold); border-radius: var(--radius-md); padding: 10px; font-size: 0.9rem; color: var(--text-main); }
.week-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.week-day { text-align: center; background: var(--bg-card); border: 1px solid var(--border-light); border-radius: 10px; padding: 8px 2px; }
.week-day.today { border-color: var(--gold-light); box-shadow: 0 0 10px rgba(212,175,55,0.4); }
.wd-label { font-size: 0.68rem; color: var(--text-muted); margin-bottom: 4px; }
.wd-dot { width: 26px; height: 26px; margin: 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 700; background: rgba(255,255,255,0.08); color: var(--text-sub); }
.week-day.full .wd-dot { background: var(--gold-gradient); color: #050d0b; }

/* ── KAZA & SAYAÇLAR ── */
.kaza-row { display: flex; align-items: center; justify-content: space-between; background: var(--bg-card); border: 1.2px solid var(--border-gold); border-radius: var(--radius-md); padding: 10px 14px; margin-bottom: 8px; box-shadow: var(--shadow-card); }
.kaza-label { font-size: 0.92rem; font-weight: 600; color: var(--text-main); }
.counter-group { display: flex; align-items: center; gap: 12px; }
.counter-btn { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--border-gold); background: var(--bg-card); color: var(--gold-light); font-size: 1.3rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; }
.counter-btn.plus { background: var(--gold-gradient); color: #050d0b; border: none; }
.counter-btn:active { transform: scale(0.9); }
.counter-val { min-width: 34px; text-align: center; font-size: 1.2rem; font-weight: 800; color: var(--gold-light); font-variant-numeric: tabular-nums; }
.kaza-total { text-align: center; margin-top: 10px; padding: 10px; background: rgba(212,175,55,0.12); border: 1px solid var(--border-gold); border-radius: var(--radius-md); color: var(--text-main); font-size: 0.95rem; }

/* ── HATİM ── */
.hatim-stat { display: flex; gap: 8px; margin-bottom: 12px; }
.hs-item { flex: 1; text-align: center; background: var(--bg-card); border: 1.2px solid var(--border-gold); border-radius: var(--radius-md); padding: 12px 6px; box-shadow: var(--shadow-card); }
.hs-num { font-size: 1.5rem; font-weight: 800; color: var(--gold-light); }
.hs-lbl { font-size: 0.72rem; color: var(--text-sub); }
.hatim-bar-wrap { height: 16px; background: rgba(255,255,255,0.1); border-radius: 10px; overflow: hidden; border: 1px solid var(--border-gold); margin-bottom: 14px; }
.hatim-bar { height: 100%; background: var(--gold-gradient); border-radius: 10px; transition: width 0.4s ease; box-shadow: 0 0 10px rgba(212,175,55,0.6); }
.hatim-controls { display: flex; gap: 8px; align-items: stretch; }
.hatim-add-btn { flex: 1; background: var(--gold-gradient); color: #050d0b; border: none; border-radius: var(--radius-md); padding: 12px; font-size: 0.9rem; font-weight: 800; cursor: pointer; }
.hatim-add-btn:active { transform: scale(0.97); }
.hatim-controls .counter-btn { width: auto; padding: 0 14px; border-radius: var(--radius-md); font-size: 0.85rem; font-weight: 700; }
.hatim-done { text-align: center; margin-top: 12px; padding: 12px; background: linear-gradient(135deg,#10b981,#047857); color: #fff; border-radius: var(--radius-md); font-weight: 700; }

/* ── HESAPLAYICILAR ── */
.calc-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.calc-row { display: flex; flex-direction: column; gap: 4px; }
.calc-row label { font-size: 0.82rem; color: var(--gold-light); font-weight: 600; }
.calc-input { width: 100%; padding: 10px 14px; border-radius: 10px; border: 1.5px solid var(--border-gold); background: rgba(8,18,15,0.75); color: var(--text-main); font-size: 0.95rem; outline: none; font-family: var(--font-ui); }
.calc-input:focus { border-color: var(--gold-light); box-shadow: var(--shadow-glow); }
.calc-result { text-align: center; padding: 14px; background: var(--bg-card); border: 1.2px solid var(--border-gold); border-radius: var(--radius-md); color: var(--text-sub); font-size: 0.9rem; line-height: 1.6; }
.calc-result.active { border-color: var(--gold-light); box-shadow: var(--shadow-glow); }
.calc-result hr { border: none; border-top: 1px dashed rgba(212,175,55,0.3); margin: 8px 0; }
.calc-big { margin-top: 4px; font-size: 0.9rem; color: var(--text-main); }
.calc-amount { font-size: 1.8rem; font-weight: 800; background: var(--gold-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; margin-top: 4px; }
.calc-neg { color: #ff9b9b; font-weight: 600; }

/* ── QUIZ ── */
.quiz-intro, .quiz-result { text-align: center; padding: 20px 14px; background: var(--bg-card); border: 1.4px solid var(--border-gold); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.quiz-intro-icon, .quiz-result-icon { font-size: 3.4rem; margin-bottom: 8px; }
.quiz-intro p { font-size: 0.92rem; color: var(--text-sub); line-height: 1.5; margin-bottom: 8px; }
.quiz-progress { display: flex; justify-content: space-between; font-size: 0.82rem; font-weight: 700; color: var(--gold-light); margin-bottom: 6px; }
.quiz-bar-wrap { height: 8px; background: rgba(255,255,255,0.1); border-radius: 6px; overflow: hidden; margin-bottom: 14px; }
.quiz-bar { height: 100%; background: var(--gold-gradient); transition: width 0.3s ease; }
.quiz-q { font-size: 1.05rem; font-weight: 700; color: var(--text-main); background: var(--bg-card); border: 1.2px solid var(--border-gold); border-radius: var(--radius-md); padding: 16px; margin-bottom: 12px; line-height: 1.45; box-shadow: var(--shadow-card); }
.quiz-opts { display: flex; flex-direction: column; gap: 8px; }
.quiz-opt { text-align: left; background: var(--bg-card); border: 1.4px solid var(--border-gold); color: var(--text-main); padding: 13px 16px; border-radius: var(--radius-md); cursor: pointer; font-size: 0.9rem; font-weight: 500; font-family: var(--font-ui); transition: all 0.2s ease; }
.quiz-opt:active { transform: scale(0.99); }
.quiz-opt.correct { background: linear-gradient(135deg,#10b981,#047857); color: #fff; border-color: #6ee7b7; font-weight: 700; }
.quiz-opt.wrong { background: linear-gradient(135deg,#ef4444,#991b1b); color: #fff; border-color: #fca5a5; }
.quiz-result-score { font-size: 2.6rem; font-weight: 800; background: var(--gold-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.quiz-result-msg { font-size: 1rem; color: var(--text-main); font-weight: 600; margin-bottom: 8px; }

/* ── RÜYA ── */
.ruya-item { background: var(--bg-card); border: 1.2px solid var(--border-gold); border-left: 4px solid var(--gold); border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: 8px; box-shadow: var(--shadow-card); }
.ruya-kw { font-size: 0.95rem; font-weight: 700; color: var(--gold-light); margin-bottom: 4px; }
.ruya-mean { font-size: 0.85rem; color: var(--text-sub); line-height: 1.5; }

/* ── BEBEK İSİMLERİ ── */
.bebek-count-note { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 8px; text-align: right; }
.bebek-item { background: var(--bg-card); border: 1.2px solid var(--border-gold); border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: 8px; box-shadow: var(--shadow-card); }
.bebek-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.bebek-name { font-size: 1.05rem; font-weight: 700; color: var(--gold-light); }
.bebek-gender-badge { font-size: 0.7rem; font-weight: 700; padding: 3px 10px; border-radius: 12px; }
.bebek-gender-badge.erkek { background: rgba(59,130,246,0.25); color: #93c5fd; border: 1px solid rgba(59,130,246,0.5); }
.bebek-gender-badge.kiz { background: rgba(236,72,153,0.25); color: #f9a8d4; border: 1px solid rgba(236,72,153,0.5); }
.bebek-mean { font-size: 0.83rem; color: var(--text-sub); line-height: 1.45; }

/* ── HİCRİ TAKVİM & KANDİL ── */
.hijri-today-card { text-align: center; background: radial-gradient(circle at 50% 20%, rgba(13,40,32,0.92), rgba(4,13,10,0.96)); border: 1.8px solid var(--gold); border-radius: var(--radius-lg); padding: 16px; margin-bottom: 14px; box-shadow: var(--shadow-glow); }
.ht-hijri { font-size: 1.5rem; font-weight: 800; color: var(--gold-light); }
.ht-greg { font-size: 0.85rem; color: var(--text-sub); margin-top: 2px; }
.kandil-item { display: flex; align-items: center; gap: 10px; background: var(--bg-card); border: 1.2px solid var(--border-gold); border-radius: var(--radius-md); padding: 12px; margin-bottom: 8px; box-shadow: var(--shadow-card); }
.kandil-item.is-today { border-color: var(--gold-light); box-shadow: 0 0 18px rgba(212,175,55,0.5); background: linear-gradient(135deg, rgba(212,175,55,0.2), var(--bg-card)); }
.kandil-item.is-past { opacity: 0.55; }
.kandil-icon { font-size: 1.8rem; flex-shrink: 0; }
.kandil-body { flex: 1; min-width: 0; }
.kandil-name { font-size: 0.95rem; font-weight: 700; color: var(--gold-light); }
.kandil-date { font-size: 0.75rem; color: var(--text-sub); }
.kandil-desc { font-size: 0.76rem; color: var(--text-muted); line-height: 1.4; margin-top: 3px; }
.kandil-count { font-size: 0.72rem; font-weight: 700; color: var(--text-sub); text-align: center; flex-shrink: 0; padding: 4px 8px; border-radius: 12px; background: rgba(212,175,55,0.12); border: 1px solid rgba(212,175,55,0.3); }
.kandil-count.today { background: var(--gold-gradient); color: #050d0b; }

/* ── PAYLAŞIM KARTLARI ── */
.share-card-preview { margin: 14px 0; }
.scp-inner { background: radial-gradient(circle at 50% 30%, #5C3B25 0%, #2A170C 55%, #160B04 100%); border: 2px solid var(--gold); border-radius: var(--radius-lg); padding: 22px 18px; text-align: center; box-shadow: var(--shadow-glow); position: relative; }
.scp-badge { display: inline-block; font-size: 0.72rem; font-weight: 700; color: #050d0b; background: var(--gold-gradient); padding: 4px 14px; border-radius: 14px; margin-bottom: 14px; }
.scp-ar { font-family: var(--font-ar); font-size: 1.5rem; color: var(--gold-light); direction: rtl; line-height: 1.8; margin-bottom: 12px; }
.scp-tr { font-size: 1rem; color: var(--text-main); line-height: 1.6; font-weight: 500; font-style: italic; margin-bottom: 10px; }
.scp-src { font-size: 0.8rem; color: var(--gold-light); font-weight: 700; }
.scp-brand { margin-top: 14px; font-size: 0.85rem; font-weight: 700; color: var(--gold); letter-spacing: 0.5px; }
.share-actions { display: flex; gap: 8px; }
.share-actions .gold-primary-btn { flex: 1; }
.share-actions .zikir-mini-btn { flex: 0 0 auto; }

/* ── CUMA MESAJLARI ── */
.cuma-msg-card { background: var(--bg-card); border: 1.2px solid var(--border-gold); border-radius: var(--radius-md); padding: 14px; margin-bottom: 10px; box-shadow: var(--shadow-card); }
.cuma-msg-text { font-size: 0.92rem; color: var(--text-main); line-height: 1.55; margin-bottom: 10px; }
.cuma-actions { display: flex; gap: 8px; }
.cuma-act-btn { flex: 1; background: rgba(212,175,55,0.14); border: 1px solid var(--border-gold); color: var(--gold-light); padding: 8px; border-radius: 12px; cursor: pointer; font-size: 0.8rem; font-weight: 600; font-family: var(--font-ui); }
.cuma-act-btn.share { background: var(--gold-gradient); color: #050d0b; border: none; font-weight: 700; }
.cuma-act-btn:active { transform: scale(0.97); }

/* Küçük ekran uyarlaması */
@media (max-width: 360px) {
  .hub-grid, .esma-grid { grid-template-columns: repeat(2, 1fr); }
  .zikir-count { font-size: 3.2rem; }
}

/* İnce altın kaydırma çubuğu (tasarım rötuşu) */
.hero-frame-box::-webkit-scrollbar { width: 5px; }
.hero-frame-box::-webkit-scrollbar-track { background: transparent; }
.hero-frame-box::-webkit-scrollbar-thumb { background: rgba(212,175,55,0.45); border-radius: 10px; }
.hero-frame-box::-webkit-scrollbar-thumb:hover { background: rgba(212,175,55,0.7); }
.hero-frame-box { scrollbar-width: thin; scrollbar-color: rgba(212,175,55,0.45) transparent; }

/* Namazda okunan sure kartlarında Arapça metni daha ferah göster */
#dua-ogrenme-content .fc-ar, #ezkar-content .fc-ar { font-size: clamp(1.2rem, 4.2vw, 1.55rem); line-height: 2; }
/* Bölüm başlıklarına üstten hava */
#dua-ogrenme-content .section-mini-title, #ezkar-content .section-mini-title { margin-top: 18px; }

/* ══════ v55.2 — Yeni modüller (Taharet, Özel Namaz, İman, Ayet Arama, 40 Hadis, Siyer, Peygamberler, Sözlük) ══════ */
.ozel-ozet { font-size: 0.82rem; color: var(--gold-light); background: rgba(212,175,55,0.1); border-left: 3px solid var(--gold); border-radius: 6px; padding: 8px 12px; margin-bottom: 8px; font-weight: 600; }

/* Ayet arama sonuçları */
.ayet-result { background: var(--bg-card); border: 1.2px solid var(--border-gold); border-left: 4px solid var(--gold); border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: 8px; cursor: pointer; box-shadow: var(--shadow-card); transition: all 0.2s ease; }
.ayet-result:active { transform: scale(0.99); }
.ayet-ref { font-size: 0.78rem; font-weight: 700; color: var(--gold-light); margin-bottom: 4px; }
.ayet-meal { font-size: 0.9rem; color: var(--text-sub); line-height: 1.5; }

/* 40 Hadis */
.hadis40-card { display: flex; gap: 10px; background: var(--bg-card); border: 1.2px solid var(--border-gold); border-radius: var(--radius-md); padding: 12px; margin-bottom: 8px; box-shadow: var(--shadow-card); }
.hadis40-no { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; background: var(--gold-gradient); color: #050d0b; font-weight: 800; font-size: 0.85rem; display: flex; align-items: center; justify-content: center; }
.hadis40-body { flex: 1; min-width: 0; }
.hadis40-text { font-size: 0.9rem; color: var(--text-main); line-height: 1.55; }
.hadis40-src { font-size: 0.76rem; color: var(--gold-light); font-weight: 700; margin-top: 6px; text-align: right; }

/* Siyer zaman çizelgesi */
.timeline { position: relative; padding-left: 8px; }
.tl-item { display: flex; gap: 12px; margin-bottom: 8px; align-items: stretch; }
.tl-year { flex-shrink: 0; width: 54px; text-align: center; background: var(--gold-gradient); color: #050d0b; font-weight: 800; font-size: 0.82rem; border-radius: 10px; display: flex; align-items: center; justify-content: center; padding: 8px 4px; }
.tl-body { flex: 1; background: var(--bg-card); border: 1.2px solid var(--border-gold); border-radius: var(--radius-md); padding: 10px 12px; box-shadow: var(--shadow-card); }
.tl-title { font-size: 0.92rem; font-weight: 700; color: var(--gold-light); margin-bottom: 2px; }
.tl-desc { font-size: 0.82rem; color: var(--text-sub); line-height: 1.45; }

/* Peygamberler */
.peygamber-card { display: flex; gap: 10px; background: var(--bg-card); border: 1.2px solid var(--border-gold); border-radius: var(--radius-md); padding: 11px 12px; margin-bottom: 8px; box-shadow: var(--shadow-card); }
.peygamber-no { width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; background: rgba(212,175,55,0.18); border: 1.2px solid var(--border-gold); color: var(--gold-light); font-weight: 700; font-size: 0.78rem; display: flex; align-items: center; justify-content: center; }
.peygamber-body { flex: 1; min-width: 0; }
.peygamber-name { font-size: 0.95rem; font-weight: 700; color: var(--gold-light); }
.peygamber-info { font-size: 0.82rem; color: var(--text-sub); line-height: 1.45; }

/* Dini Sözlük */
.sozluk-item { background: var(--bg-card); border: 1.2px solid var(--border-gold); border-left: 4px solid var(--gold); border-radius: var(--radius-md); padding: 11px 14px; margin-bottom: 8px; box-shadow: var(--shadow-card); }
.sozluk-term { font-size: 0.95rem; font-weight: 700; color: var(--gold-light); margin-bottom: 3px; }
.sozluk-mean { font-size: 0.83rem; color: var(--text-sub); line-height: 1.45; }

/* ══════════════════════════════════════════════════════════
   v55.3 — PREMIUM RÖTUŞ: zengin yeşil ton, geri sayım,
   ana sayfa sığdırma, yeni bileşen stilleri
   ══════════════════════════════════════════════════════════ */

/* Daha derin, canlı zümrüt yeşili arka plan (dark tema) */
body.dark-theme {
  --bg-gradient: radial-gradient(circle at 50% -8%, #1756455e 0%, transparent 55%),
                 radial-gradient(circle at 50% 12%, #0f3a2e 0%, #08241c 48%, #030f0b 100%);
  --emerald-accent: #1c5a49;
  --emerald-light: #2f8770;
}
body.dark-theme .hero-frame-box {
  background: radial-gradient(circle at 50% 0%, rgba(24, 78, 63, 0.95) 0%, rgba(9, 33, 26, 0.97) 62%, rgba(4, 15, 11, 0.98) 100%);
  border-color: var(--gold);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.72), 0 0 40px rgba(212, 175, 55, 0.28), inset 0 1px 0 rgba(255,255,255,0.04);
}
body.dark-theme .hero-prayer-unified-box {
  background: linear-gradient(180deg, rgba(15, 52, 42, 0.96) 0%, rgba(5, 18, 14, 0.98) 100%);
}
body.dark-theme #app-header { background: rgba(5, 20, 15, 0.94); }

/* ─── ANA SAYFAYI TEK EKRANA SIĞDIRMA ─── */
#clock-display { font-size: clamp(1.95rem, 7.4vw, 2.5rem); margin-bottom: 0; }
.date-hijri-subrow { font-size: 0.78rem; flex-wrap: wrap; }
.countdown-hero-wrap { margin: 2px 0 4px; }
.circle-progress-wrapper {
  width: 158px; height: 158px; margin: 2px auto;
  background: radial-gradient(circle, rgba(47, 135, 112, 0.28) 0%, transparent 66%);
}
.circle-progress-svg { width: 158px; height: 158px; }
.progress-bg { stroke: rgba(212, 175, 55, 0.16); stroke-dasharray: none; }
.progress-bar { filter: drop-shadow(0 0 9px rgba(212, 175, 55, 0.95)); }
.countdown-target { font-size: 0.7rem; letter-spacing: 0.6px; margin-bottom: 3px; }
.countdown-timer-text {
  font-size: 1.55rem; letter-spacing: 1px;
  background: linear-gradient(180deg, #ffffff 0%, #fff3be 45%, #e9c85a 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.5));
}
.hero-prayer-unified-box { padding: 8px; box-shadow: 0 0 26px rgba(212,175,55,0.32), inset 0 0 18px rgba(0,0,0,0.5); }
.prayer-grid { gap: 5px; margin-bottom: 5px; }
.prayer-card { padding: 5px 4px; }
.prayer-name { font-size: 0.74rem; }
.prayer-time { font-size: 1.02rem; }
.svg-prayer-icon { width: 20px; height: 20px; }

.daily-verse-card, .daily-hadis-card { padding: 9px 13px; margin-top: 8px; }
.daily-verse-card .verse-card-title, .daily-hadis-card .verse-card-title { font-size: 0.86rem; margin-bottom: 3px; }
.verse-arabic { font-size: clamp(1.02rem, 3.5vw, 1.28rem); margin-bottom: 3px; line-height: 1.35; }
.verse-turkish { font-size: clamp(0.8rem, 2.9vw, 0.94rem); margin-bottom: 4px; line-height: 1.35; }
.verse-source { font-size: 0.72rem; }
.hadis-arabic { font-size: 1.0rem; margin-bottom: 4px; line-height: 1.5; }
.hadis-text { font-size: clamp(0.8rem, 2.9vw, 0.94rem); line-height: 1.4; }
.hadis-source { font-size: 0.72rem; margin-top: 4px; }
.mini-share-btn { margin-top: 6px; padding: 4px 12px; font-size: 0.68rem; }

/* ─── PEYGAMBER lakap rozeti ─── */
.peygamber-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; }
.peygamber-lakab { font-size: 0.68rem; font-weight: 700; color: #050d0b; background: var(--gold-gradient); padding: 2px 9px; border-radius: 11px; }
.peygamber-card { align-items: flex-start; }
.peygamber-name { margin: 0; }

/* ─── Ayet arama: chevron + vurgu ─── */
.ayet-go { float: right; color: var(--gold); font-size: 1.1rem; line-height: 1; }
mark.hl { background: rgba(212, 175, 55, 0.42); color: #fff; border-radius: 3px; padding: 0 2px; font-weight: 700; }

/* ─── Hub kartlarına ince premium parlaklık ─── */
.hub-card { position: relative; overflow: hidden; background: linear-gradient(160deg, rgba(20, 62, 50, 0.9) 0%, rgba(8, 28, 22, 0.92) 100%); }
.hub-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 40%; background: linear-gradient(180deg, rgba(255,255,255,0.05), transparent); pointer-events: none; }
.hub-card:active { transform: scale(0.98); }

/* ══════ v55.4 — Sure Hakkında (tefsir) + Ramazan İmsakiyesi ══════ */
.sure-hakkinda { margin-top: 10px; text-align: left; font-size: 0.82rem; color: var(--text-sub); line-height: 1.5; background: rgba(212,175,55,0.1); border: 1px solid var(--border-light); border-left: 3px solid var(--gold); border-radius: 8px; padding: 9px 12px; }
.sh-label { display: block; font-size: 0.75rem; font-weight: 700; color: var(--gold-light); margin-bottom: 3px; }

/* İmsakiye */
.imsakiye-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--bg-card); border: 1.2px solid var(--border-gold); border-radius: var(--radius-md); padding: 8px 12px; margin-bottom: 12px; box-shadow: var(--shadow-card); }
.imsakiye-month { text-align: center; font-size: 1rem; font-weight: 700; color: var(--gold-light); flex: 1; }
.imsakiye-loc { font-size: 0.72rem; font-weight: 500; color: var(--text-sub); margin-top: 2px; }
.imsakiye-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-md); border: 1.2px solid var(--border-gold); }
.imsakiye-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; background: var(--bg-card); }
.imsakiye-table th { background: linear-gradient(180deg, #d4af37, #a8831b); color: #071511; font-weight: 700; padding: 8px 4px; font-size: 0.74rem; position: sticky; top: 0; }
.imsakiye-table td { padding: 7px 4px; text-align: center; color: var(--text-main); border-bottom: 1px solid var(--border-light); font-variant-numeric: tabular-nums; }
.imsakiye-table tbody tr:nth-child(even), .imsakiye-table tbody tr:nth-child(even) { background: rgba(212,175,55,0.04); }
.im-day { font-weight: 700; color: var(--gold-light); }
.im-wd { display: block; font-size: 0.62rem; font-weight: 500; color: var(--text-muted); }
.im-iftar { color: #ffd36a; font-weight: 700; }
.imsak-today { background: linear-gradient(90deg, rgba(212,175,55,0.28), rgba(212,175,55,0.12)) !important; }
.imsak-today td { border-color: var(--gold); }
.imsak-today .im-day { color: #fff; }

/* ══════════════════════════════════════════════════════════
   v55.5 — ANA SAYFA YENİDEN: uyumlu renkler + yeni geri sayım
   (Günün Ayeti kaldırıldı, sadece Günün Hadisi kaldı)
   ══════════════════════════════════════════════════════════ */

/* Daha sakin, uyumlu koyu zümrüt zemin (parlak yeşil yumuşatıldı) */
body.dark-theme {
  --bg-main: #05100c;
  --bg-gradient: radial-gradient(1100px 560px at 50% -12%, rgba(23, 72, 58, 0.30) 0%, transparent 58%),
                 linear-gradient(180deg, #0a201a 0%, #061711 56%, #030c09 100%);
}
body.dark-theme .hero-frame-box {
  background: linear-gradient(180deg, rgba(14, 45, 36, 0.90) 0%, rgba(7, 23, 17, 0.96) 55%, rgba(4, 14, 10, 0.98) 100%);
  border-color: rgba(212, 175, 55, 0.72);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.045);
}
body.dark-theme .hero-prayer-unified-box {
  background: linear-gradient(180deg, rgba(12, 40, 32, 0.82) 0%, rgba(5, 17, 13, 0.95) 100%);
  border-color: rgba(212, 175, 55, 0.5);
  box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.45), 0 0 22px rgba(212, 175, 55, 0.14);
}
body.dark-theme #app-header { background: rgba(6, 22, 16, 0.95); border-bottom-color: rgba(212, 175, 55, 0.55); }

/* Saat & tarih */
#clock-display { font-size: clamp(2.1rem, 8vw, 2.75rem); letter-spacing: 0.5px; margin-bottom: 1px; }
.date-hijri-subrow { color: var(--gold-light); opacity: 0.92; font-size: 0.82rem; }

/* ─── YENİ GERİ SAYIM TASARIMI ─── */
.countdown-hero-wrap { margin: 10px 0 12px; }
.circle-progress-wrapper {
  width: 188px; height: 188px; margin: 0 auto;
  background: radial-gradient(circle at 50% 44%, rgba(9, 34, 27, 0.95) 0%, rgba(5, 16, 12, 0.55) 58%, transparent 74%);
}
.circle-progress-svg { width: 188px; height: 188px; }
.progress-bg { stroke: rgba(255, 255, 255, 0.065); stroke-width: 7; stroke-dasharray: none; }
.progress-bar { stroke-width: 8; stroke-linecap: round; filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.9)); }
.countdown-inner { gap: 0; }
.countdown-target { font-size: 0.64rem; letter-spacing: 1.5px; color: var(--gold-light); opacity: 0.82; text-transform: uppercase; margin-bottom: 5px; font-weight: 600; }
.countdown-timer-text {
  font-size: 2.1rem; font-weight: 800; letter-spacing: 1px; line-height: 1;
  background: linear-gradient(180deg, #ffffff 0%, #fbeeb4 50%, #d9b64a 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.55));
}
.countdown-next {
  margin-top: 7px; font-size: 0.78rem; font-weight: 700; color: var(--gold-light);
  background: rgba(212, 175, 55, 0.15); border: 1px solid rgba(212, 175, 55, 0.32);
  padding: 2px 13px; border-radius: 14px;
}

/* Vakit kartları biraz daha ferah (ayet kalktığı için yer açıldı) */
.hero-prayer-unified-box { padding: 11px; }
.prayer-grid { gap: 6px; margin-bottom: 10px; }
.prayer-card { padding: 8px 4px; }
.prayer-name { font-size: 0.76rem; }
.prayer-time { font-size: 1.08rem; }

/* Günün Hadisi kartı öne çıksın */
.daily-hadis-card {
  margin-top: 2px; padding: 13px 16px;
  background: linear-gradient(180deg, rgba(17, 50, 40, 0.72) 0%, rgba(6, 20, 15, 0.8) 100%);
  border: 1.4px solid rgba(212, 175, 55, 0.55);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255,255,255,0.04);
}
.daily-hadis-card .verse-card-title { font-size: 0.96rem; margin-bottom: 6px; }
.hadis-arabic { font-size: 1.08rem; }
.hadis-text { font-size: clamp(0.88rem, 3vw, 1.02rem); color: var(--text-main); line-height: 1.5; }

/* ══════════════════════════════════════════════════════════
   v56 — SICAK BAKIR TEMA (Claude Design entegrasyonu)
   Çentikli halka + ufuk ışığı + cami silüeti + şeftali vurgu
   ══════════════════════════════════════════════════════════ */

body.dark-theme{
  --bg-main:#160b04;
  --bg-gradient: radial-gradient(130% 82% at 50% 30%, #5c3b25 0%, #3d2414 34%, #241206 66%, #160b04 100%);
  --bg-card: rgba(50,30,19,0.74);
  --bg-card-hover: rgba(66,41,26,0.92);
  --gold:#e3ad82;
  --gold-light:#f7ddc4;
  --gold-gradient: linear-gradient(180deg,#fff3e6 0%,#f2caa4 45%,#d99a6c 100%);
  --border-gold:#cf9d73;
  --border-light: rgba(231,183,144,0.16);
  --text-main:#f8efe4;
  --text-sub: rgba(248,238,228,0.82);
  --text-muted: rgba(248,238,228,0.55);
  --shadow-glow: 0 0 30px rgba(227,173,130,0.42);
}
/* Yeşil hero/bileşen zeminlerini sıcak tona çevir */
body.dark-theme .hero-frame-box{
  background: radial-gradient(120% 82% at 50% 22%, rgba(78,46,27,0.92) 0%, rgba(42,24,13,0.96) 55%, rgba(22,11,4,0.98) 100%);
  border-color: rgba(207,157,115,0.6);
  box-shadow:0 14px 40px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,240,220,.05);
}
body.dark-theme #app-header{ background:rgba(28,15,7,.95); border-bottom-color:rgba(207,157,115,.5); }
body.dark-theme .hub-card{ background:linear-gradient(160deg, rgba(64,40,23,0.92), rgba(28,15,8,0.94)); }
body.dark-theme .zikir-display{ background:radial-gradient(circle at 50% 30%, rgba(70,42,24,0.92), rgba(24,12,5,0.96)); }
body.dark-theme .hijri-today-card, body.dark-theme .quiz-intro, body.dark-theme .quiz-result{ background:radial-gradient(circle at 50% 20%, rgba(70,42,24,.9), rgba(22,11,4,.96)); }

/* Header: marka altında hicri tarih */
#app-header{ height:56px; }
.brand-col{ display:flex; flex-direction:column; line-height:1.06; }
.brand-title-gold{ font-size:1.12rem; }
.brand-hijri{ font-size:0.66rem; color:var(--gold-light); opacity:.72; font-weight:500; letter-spacing:.2px; }

/* Bottom nav: koyu sıcak bar, şeftali aktif */
#bottom-nav{ background:linear-gradient(180deg, rgba(42,25,14,0.97), rgba(20,10,4,0.98)); border-top:1px solid rgba(207,157,115,0.4); box-shadow:0 -4px 22px rgba(0,0,0,.6); }
.nav-tab{ color:rgba(248,238,228,0.58); }
.nav-tab.active{ color:var(--gold-light); font-weight:800; }
.nav-tab.active .tab-icon{ filter:drop-shadow(0 0 8px rgba(227,173,130,.6)); }

/* ─── GERİ SAYIM: çentikli halka ─── */
.warm-home{ padding:12px 12px 10px; }
.cd-stage{ position:relative; padding-top:4px; }
.cd-ring{ position:relative; width:212px; height:212px; margin:0 auto; }
.cd-arc{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.cd-track{ stroke:rgba(247,221,196,0.10); }
.cd-prog{ stroke-linecap:round; transition:stroke-dashoffset 1s linear; filter:drop-shadow(0 0 9px rgba(239,185,141,.9)); }
.cd-ticks{ position:absolute; inset:0; border-radius:50%;
  background:repeating-conic-gradient(from -90deg, rgba(247,221,196,0.55) 0 0.7deg, transparent 0.7deg 6deg);
  -webkit-mask:radial-gradient(circle, transparent 0 66px, #000 68px 82px, transparent 84px);
  mask:radial-gradient(circle, transparent 0 66px, #000 68px 82px, transparent 84px); }
.cd-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.cd-lbl{ font-size:.72rem; letter-spacing:2px; text-transform:uppercase; color:var(--gold-light); opacity:.85; font-weight:600; margin-bottom:3px; }
.cd-time{ font-size:2.25rem; font-weight:800; letter-spacing:1px; line-height:1; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.5); font-variant-numeric:tabular-nums; }
.cd-ezan{ margin-top:9px; font-size:.74rem; font-weight:800; color:#2a1206; background:linear-gradient(180deg,#f7dcbf,#e3ad82); padding:3px 15px; border-radius:14px; box-shadow:0 3px 10px rgba(0,0,0,.35); }

/* ─── UFUK IŞIĞI + CAMİ SİLÜETİ ─── */
.horizon{ position:relative; height:70px; margin-top:-34px; overflow:hidden; }
.horizon-glow{ position:absolute; left:50%; bottom:2px; transform:translateX(-50%); width:250px; height:120px; background:radial-gradient(ellipse at 50% 100%, rgba(248,206,158,0.55) 0%, rgba(226,150,90,0.22) 42%, transparent 70%); }
.mosque{ position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:96%; max-width:340px; height:70px; display:block; }

/* ─── DOĞUŞ / BATIŞ / KALAN ─── */
.info-pills{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:8px 0 12px; }
.ip{ font-size:.74rem; color:var(--text-sub); background:var(--bg-card); border:1px solid var(--border-light); border-radius:16px; padding:5px 13px; }
.ip b{ color:var(--gold-light); font-weight:700; margin-left:4px; }
.ip.remain{ background:linear-gradient(135deg, rgba(227,173,130,0.3), rgba(58,35,20,0.55)); border-color:rgba(227,173,130,0.42); color:var(--gold-light); font-weight:800; }

/* ─── VAKİT KARTLARI (sıcak, ikonsuz, aktif dolgu) ─── */
.warm-home .prayer-grid{ gap:8px; margin-bottom:12px; }
.warm-home .prayer-card{ flex-direction:column; justify-content:center; gap:1px; padding:10px 4px; background:var(--bg-card); border-color:var(--border-light); }
.warm-home .prayer-card .prayer-card-icon-wrap{ display:none; }
.warm-home .prayer-name{ font-size:.7rem; color:var(--gold-light); opacity:.9; letter-spacing:.6px; text-transform:uppercase; }
.warm-home .prayer-time{ font-size:1.16rem; color:#fff; font-weight:700; }
.warm-home .prayer-card.active{ background:linear-gradient(135deg,#f4cba4 0%,#e2a877 100%); border-color:#f7ddc4; box-shadow:0 4px 16px rgba(227,173,130,.4); }
.warm-home .prayer-card.active .prayer-name{ color:#5a2f14; opacity:1; }
.warm-home .prayer-card.active .prayer-time{ color:#2a1206; }

/* Hadis kartı sıcak */
.warm-home .daily-hadis-card{ background:linear-gradient(180deg, rgba(62,40,22,0.6), rgba(24,13,6,0.78)); border-color:rgba(207,157,115,0.45); }

/* ══════════════════════════════════════════════════════════
   v57 — Faz 1: hicri bakır, büyük geri sayım, hadis alta yaslı,
   vakit detay paneli, saate göre kehribar→karanlık, oruç, YEŞİL TEMA
   ══════════════════════════════════════════════════════════ */

/* Hicri tarih: bakır ton, simge yok */
.brand-hijri{ color:#dba57a; opacity:1; font-weight:600; letter-spacing:.3px; }

/* ── Saate göre zemin tonu: 4 katmanlı ton değişkenleri ── */
body.dark-theme{
  --t1:#5c3b25; --t2:#3d2414; --t3:#241206; --t4:#160b04;
  --bg-gradient: radial-gradient(130% 82% at 50% 30%, var(--t2) 0%, var(--t3) 45%, var(--t4) 100%);
}
body.dark-theme .hero-frame-box{
  background: radial-gradient(120% 82% at 50% 22%, var(--t1) 0%, var(--t2) 42%, var(--t3) 76%, var(--t4) 100%);
}
/* Sabah: aydınlık kehribar */
body.dark-theme[data-tod="Fajr"], body.dark-theme[data-tod="Sunrise"]{ --t1:#8e5f36; --t2:#5e3c21; --t3:#3a2110; --t4:#241206; }
/* Öğle: parlak */
body.dark-theme[data-tod="Dhuhr"]{ --t1:#7b4e2d; --t2:#4f301a; --t3:#31190c; --t4:#1c0e05; }
/* İkindi: orta (varsayılan) */
body.dark-theme[data-tod="Asr"]{ --t1:#5c3b25; --t2:#3d2414; --t3:#241206; --t4:#160b04; }
/* Akşam: kararan */
body.dark-theme[data-tod="Maghrib"]{ --t1:#4a2c1b; --t2:#2e190e; --t3:#1b0e05; --t4:#0f0703; }
/* Yatsı: en koyu */
body.dark-theme[data-tod="Isha"]{ --t1:#36210f; --t2:#211208; --t3:#130903; --t4:#0a0502; }
/* Sabah ufuk ışığı daha güçlü */
body.dark-theme[data-tod="Fajr"] .horizon-glow, body.dark-theme[data-tod="Sunrise"] .horizon-glow{ background:radial-gradient(ellipse at 50% 100%, rgba(255,214,160,.7) 0%, rgba(235,160,95,.3) 42%, transparent 70%); }

/* ── Büyük geri sayım ── */
.cd-ring{ width:240px; height:240px; }
.cd-ticks{ -webkit-mask:radial-gradient(circle, transparent 0 75px, #000 77px 93px, transparent 95px); mask:radial-gradient(circle, transparent 0 75px, #000 77px 93px, transparent 95px); }
.cd-lbl{ font-size:.84rem; letter-spacing:2.4px; margin-bottom:4px; }
.cd-time{ font-size:2.75rem; }
.cd-ezan{ font-size:.84rem; padding:4px 18px; margin-top:10px; }
.horizon{ margin-top:-40px; height:78px; }
.mosque{ height:78px; }
.info-pills{ margin:6px 0 10px; }
.warm-home .prayer-grid{ margin-bottom:10px; }

/* ── Günün hadisi alta yaslı, boşluk yok ── */
.warm-home{ display:flex; flex-direction:column; }
.warm-home .daily-hadis-card{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; margin-bottom:0; min-height:110px; }

/* ── Vakit detay paneli (alttan) ── */
.sheet-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:10001; display:flex; align-items:flex-end; justify-content:center; opacity:0; transition:opacity .22s ease; }
.sheet-backdrop.open{ opacity:1; }
.sheet{ width:100%; max-width:540px; background:#f4eadb; color:#2a1a10; border-radius:24px 24px 0 0; padding:12px 20px 24px; transform:translateY(100%); transition:transform .24s cubic-bezier(.2,.8,.2,1); box-shadow:0 -10px 40px rgba(0,0,0,.5); padding-bottom:calc(24px + env(safe-area-inset-bottom)); }
.sheet-backdrop.open .sheet{ transform:translateY(0); }
.sheet-grip{ width:44px; height:5px; border-radius:5px; background:rgba(42,26,16,.25); margin:0 auto 14px; }
.sheet-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:4px; }
.sheet-name{ font-size:1.55rem; font-weight:800; }
.sheet-time{ font-size:1.7rem; font-weight:800; color:#c96b2a; font-variant-numeric:tabular-nums; }
.sheet-status{ font-size:.82rem; color:rgba(42,26,16,.7); margin-bottom:12px; }
.sheet-row{ display:flex; justify-content:space-between; align-items:center; background:#e9dccb; border-radius:14px; padding:12px 14px; margin-bottom:14px; }
.sheet-row-label{ font-size:.95rem; font-weight:600; }
.sheet .toggle-slider{ background:rgba(42,26,16,.22); }
.sheet input:checked + .toggle-slider{ background:#c96b2a; }
.sheet-actions{ display:flex; gap:10px; }
.sheet-btn{ flex:1; padding:12px; border-radius:26px; font-weight:800; font-size:.95rem; cursor:pointer; font-family:var(--font-ui); border:2px solid #2a1a10; background:transparent; color:#2a1a10; }
.sheet-btn.primary{ background:#c96b2a; border-color:#c96b2a; color:#fff; box-shadow:0 4px 14px rgba(201,107,42,.35); }
.sheet-btn:active{ transform:scale(.98); }
.prayer-card{ cursor:pointer; }

/* ── Oruç takibi ── */
.oruc-grid{ display:grid; grid-template-columns:repeat(10,1fr); gap:5px; margin-bottom:6px; }
.oruc-day{ aspect-ratio:1; display:flex; align-items:center; justify-content:center; border-radius:8px; font-size:.7rem; font-weight:700; background:rgba(255,255,255,.06); color:var(--text-muted); border:1px solid var(--border-light); }
.oruc-day.on{ background:var(--gold-gradient); color:#2a1206; border-color:transparent; }
.oruc-day.today{ box-shadow:0 0 0 2px var(--gold); }

/* ══════════ YEŞİL TEMA (Lüks Gece) ══════════ */
/* Çam teması — Denge tasarımının renkleri
   Çam: #0F2E25 · Hero: #153A2F→#0F2E25→#0C261F
   Pirinç: #C8A25A (açık #D3AF66) · Gece zemin: #0A1B16 · Panel: #11261F */
body.dark-theme.green-theme{
  --bg-main:#0A1B16;
  --bg-gradient: radial-gradient(130% 82% at 50% 30%, #265B4B 0%, #153C31 34%, #08221A 66%, #051510 100%);
  --t1:#265B4B; --t2:#153C31; --t3:#08221A; --t4:#051510;
  --bg-card: rgba(17,38,31,0.74); --bg-card-hover: rgba(23,52,42,0.92);
  --gold:#C8A25A; --gold-light:#D3AF66;
  --gold-gradient: linear-gradient(180deg,#F5EAD2 0%,#E0C489 45%,#C8A25A 100%);
  --border-gold:#C8A25A; --border-light: rgba(200,162,90,0.16);
  --text-main:#F7F3E8; --text-sub: rgba(247,243,232,0.82); --text-muted: rgba(247,243,232,0.55);
  --shadow-glow: 0 0 30px rgba(200,162,90,0.42);
}
body.dark-theme.green-theme[data-tod="Fajr"], body.dark-theme.green-theme[data-tod="Sunrise"]{ --t1:#27594A; --t2:#16392F; --t3:#0B211B; --t4:#05140F; }
body.dark-theme.green-theme[data-tod="Sunrise"]{ --t1:#388C74; --t2:#235C4C; --t3:#11392D; --t4:#08221A; }
body.dark-theme.green-theme[data-tod="Dhuhr"]{ --t1:#2F7964; --t2:#1B4E3F; --t3:#0D3026; --t4:#061B15; }
body.dark-theme.green-theme[data-tod="Asr"]{ --t1:#265B4B; --t2:#153C31; --t3:#08221A; --t4:#051510; }
body.dark-theme.green-theme[data-tod="Maghrib"]{ --t1:#1C493C; --t2:#0F2D24; --t3:#061A14; --t4:#030F0B; }
body.dark-theme.green-theme[data-tod="Isha"]{ --t1:#10352A; --t2:#092019; --t3:#04120E; --t4:#020A08; }
body.green-theme #app-header{ background:rgba(10,27,22,.95); border-bottom-color:rgba(200,162,90,.6); }
body.green-theme .brand-hijri{ color:var(--gold-light); }
body.green-theme .hub-card{ background:linear-gradient(160deg, rgba(21,58,47,.92), rgba(12,38,31,.94)); }
body.green-theme .zikir-display{ background:radial-gradient(circle at 50% 30%, rgba(15,46,37,.92), rgba(10,27,22,.96)); }
body.green-theme .hijri-today-card, body.green-theme .quiz-intro, body.green-theme .quiz-result{ background:radial-gradient(circle at 50% 20%, rgba(15,46,37,.92), rgba(10,27,22,.96)); }
body.green-theme #bottom-nav{ background:linear-gradient(180deg, rgba(15,46,37,.97), rgba(10,27,22,.98)); border-top-color:rgba(200,162,90,.45); }
body.green-theme .cd-prog{ stroke:#C8A25A; filter:drop-shadow(0 0 10px rgba(200,162,90,.85)); }
body.green-theme .cd-track{ stroke:rgba(211,175,102,.10); }
body.green-theme .cd-ticks{ background:repeating-conic-gradient(from -90deg, rgba(211,175,102,.55) 0 .7deg, transparent .7deg 6deg); }
body.green-theme .cd-ezan{ color:#0A1B16; background:linear-gradient(180deg,#E0C489,#C8A25A); }
body.green-theme .mosque{ fill:#061210; }
body.green-theme .horizon-glow{ background:radial-gradient(ellipse at 50% 100%, rgba(200,162,90,.5) 0%, rgba(200,162,90,.18) 42%, transparent 70%); }
body.green-theme .warm-home .prayer-card.active{ background:linear-gradient(135deg,#D3AF66 0%,#C8A25A 100%); border-color:#E0C489; box-shadow:0 4px 16px rgba(200,162,90,.45); }
body.green-theme .warm-home .prayer-card.active .prayer-name{ color:#0F2E25; }
body.green-theme .warm-home .prayer-card.active .prayer-time{ color:#0A1B16; }
body.green-theme .warm-home .daily-hadis-card{ background:linear-gradient(180deg, rgba(15,46,37,.6), rgba(10,27,22,.78)); border-color:rgba(200,162,90,.5); }
body.green-theme .ip.remain{ background:linear-gradient(135deg, rgba(200,162,90,.3), rgba(15,46,37,.6)); border-color:rgba(200,162,90,.45); }
body.green-theme .oruc-day.on{ color:#0A1B16; }
body.green-theme .sheet-time, body.green-theme .sheet-btn.primary{ background-color:#0F2E25; border-color:#0F2E25; }
body.green-theme .sheet-time{ background:none; color:#0F2E25; }
body.green-theme .sheet input:checked + .toggle-slider{ background:#0F2E25; }

/* ═══════════════════════════════════════════════════════════
   v58 — Çevrimdışı vakitler, Ramazan/Çevrimdışı rozetleri,
   Vakit ince ayarı, Çevrimdışı Kur'an + yer imleri, Yedekleme,
   Kaynaklar & Gizlilik
   ═══════════════════════════════════════════════════════════ */
.brand-badges{ display:flex; gap:6px; margin-top:3px; flex-wrap:wrap; }
.hv-badge{ display:inline-flex; align-items:center; gap:4px; font-size:.62rem; font-weight:700; letter-spacing:.3px; padding:2px 8px; border-radius:20px; line-height:1.4; }
.hv-badge-ramazan{ background:linear-gradient(135deg, rgba(239,185,141,.35), rgba(207,143,95,.25)); color:#fce3ca; border:1px solid rgba(239,185,141,.5); }
.hv-badge-offline{ background:rgba(0,0,0,.35); color:#e8c9ad; border:1px solid rgba(232,201,173,.35); }

.offset-hint{ font-size:.78rem; color:var(--text-sub); line-height:1.5; margin-bottom:10px; }
.offset-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.offset-cell{ display:flex; flex-direction:column; gap:4px; background:rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:8px; }
.offset-cell span{ font-size:.72rem; color:var(--text-sub); font-weight:600; }
.offset-cell input{ width:100%; background:rgba(0,0,0,.28); color:var(--text-main); border:1px solid var(--border-gold); border-radius:8px; padding:6px; font-size:.95rem; font-weight:700; text-align:center; outline:none; }
.offset-cell input:focus{ border-color:var(--gold-light); box-shadow:0 0 0 2px rgba(212,175,55,.2); }
.gold-outline-btn{ background:transparent; color:var(--gold-light); border:1px solid var(--border-gold); padding:9px 16px; border-radius:30px; font-size:.85rem; font-weight:700; cursor:pointer; }
.gold-outline-btn:active{ background:rgba(212,175,55,.12); }
.backup-row{ display:flex; gap:8px; flex-wrap:wrap; }
.backup-row .gold-primary-btn, .backup-row .gold-outline-btn{ flex:1; min-width:140px; }
.backup-status{ font-size:.78rem; color:var(--gold-light); margin-top:8px; min-height:1em; line-height:1.4; word-break:break-word; }

/* Kur'an araç kartı */
.quran-tools{ margin-bottom:12px; }
.qt-card{ background:var(--bg-card); border:1px solid var(--border-gold); border-radius:14px; padding:12px; display:flex; flex-direction:column; gap:10px; }
.qt-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.qt-row.qt-col{ flex-direction:column; align-items:stretch; gap:6px; }
.qt-title{ font-size:.85rem; font-weight:700; color:var(--gold-light); display:flex; align-items:center; gap:6px; }
.qt-count{ font-size:.68rem; background:rgba(212,175,55,.18); border:1px solid rgba(212,175,55,.4); color:var(--gold-light); border-radius:20px; padding:1px 7px; font-weight:700; }
.qt-go{ background:var(--gold-gradient); color:#050d0b; border:none; border-radius:20px; padding:6px 12px; font-size:.8rem; font-weight:700; cursor:pointer; }
.qt-empty{ font-size:.76rem; color:var(--text-sub); }
.qt-marks{ display:flex; flex-wrap:wrap; gap:6px; }
.qt-chip{ background:rgba(0,0,0,.25); color:var(--text-main); border:1px solid rgba(212,175,55,.35); border-radius:20px; padding:4px 10px; font-size:.74rem; cursor:pointer; }
.qt-more{ font-size:.74rem; color:var(--text-sub); align-self:center; }
.qdl-track{ height:8px; background:rgba(0,0,0,.3); border-radius:8px; overflow:hidden; border:1px solid rgba(255,255,255,.08); }
.qdl-bar{ height:100%; background:var(--gold-gradient); border-radius:8px; transition:width .3s ease; }
.qdl-text{ font-size:.76rem; color:var(--text-sub); line-height:1.4; }
#qdl-btn:disabled{ opacity:.6; cursor:default; }

/* Ayet kartı eylemleri */
.ayah-actions{ display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; padding-top:8px; border-top:1px dashed rgba(212,175,55,.25); }
.ayah-act-btn{ background:rgba(0,0,0,.22); color:var(--text-sub); border:1px solid rgba(255,255,255,.12); border-radius:20px; padding:4px 10px; font-size:.72rem; font-weight:600; cursor:pointer; }
.ayah-act-btn.on{ background:rgba(212,175,55,.2); color:var(--gold-light); border-color:rgba(212,175,55,.5); }
.ayah-card.ayah-marked{ border-color:rgba(212,175,55,.55); box-shadow:inset 3px 0 0 var(--gold); }
@keyframes ayahFlash{ 0%{ box-shadow:0 0 0 0 rgba(212,175,55,.8);} 100%{ box-shadow:0 0 0 14px rgba(212,175,55,0);} }
.ayah-card.ayah-flash{ animation:ayahFlash 1.1s ease-out 2; }

/* Kaynaklar & Gizlilik */
.kaynak-wrap{ display:flex; flex-direction:column; gap:10px; padding-bottom:20px; }
.kaynak-card{ background:var(--bg-card); border:1px solid var(--border-gold); border-radius:14px; padding:12px 14px; }
.kaynak-card h3{ font-size:.92rem; color:var(--gold-light); margin:0 0 6px; }
.kaynak-card p{ font-size:.8rem; color:var(--text-sub); line-height:1.55; margin:0 0 6px; }
.kaynak-card p:last-child{ margin-bottom:0; }
.kaynak-card b{ color:var(--text-main); }
.kaynak-note{ background:rgba(0,0,0,.2); border-left:3px solid var(--gold); padding:8px 10px; border-radius:8px; }
.ruya-note{ text-align:left; }

/* Yeşil tema uyarlamaları */
body.green-theme .hv-badge-ramazan{ background:rgba(200,162,90,.2); color:#D3AF66; border-color:rgba(200,162,90,.5); }
body.green-theme .hv-badge-offline{ color:#F7F3E8; border-color:rgba(247,243,232,.3); }
/* v58.1 — ayar kartı içi boşluk düzeltmeleri */
.settings-card-box > .offset-hint, .settings-card-box > .backup-row, .settings-card-box > .backup-status{ padding-left:14px; padding-right:14px; }
.settings-card-box > .offset-hint{ padding-top:12px; }
.settings-card-box > .backup-row{ padding-bottom:12px; }
.settings-card-box > .backup-status{ padding-bottom:10px; margin-top:0; }
.settings-card-box > .backup-status:empty{ padding-bottom:4px; }
.settings-card-box > .offset-grid{ padding:0 12px 4px; }
.settings-card-box > div[style*="font-size: 0.75rem"]{ padding:0 14px 12px; }

/* v59.1 — ayet kartı sıcak ton (eski yeşil "nth-child(even)" düzeltmesi) */
body.dark-theme .ayah-card{ background:rgba(40,22,12,0.62); border-color:rgba(212,175,55,.24); }
body.dark-theme .ayah-card:nth-child(even){ background:rgba(58,33,18,0.55); }
body.dark-theme.green-theme .ayah-card{ background:rgba(17,38,31,0.62); border-color:var(--border-gold); }
body.dark-theme.green-theme .ayah-card:nth-child(even){ background:rgba(23,52,42,0.72); }

/* v59.2 — konum çipi sıcak bakır ton (eski yeşil düzeltmesi) */
body.dark-theme .location-chip{
  background:linear-gradient(135deg, rgba(78,44,24,.92), rgba(42,22,11,.9));
  border:1px solid rgba(212,175,55,.42);
  color:#f3ddc4;
  box-shadow:0 4px 14px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,233,211,.12);
}
body.dark-theme .location-chip:hover{
  background:linear-gradient(135deg, rgba(96,54,30,.95), rgba(54,29,15,.92));
  border-color:var(--gold-light);
}
body.dark-theme .location-chip .loc-icon{ filter:saturate(1.1); }
body.dark-theme.green-theme .location-chip{
  background:rgba(18,38,33,.9); border-color:var(--border-gold); color:var(--gold-light);
}

/* v60 — arka plan bildirimi durum satırı */
.notify-status{ font-size:.78rem; line-height:1.5; color:var(--text-sub); padding:10px 14px 6px; }
.notify-status.ok{ color:#8fe0b0; }
body.dark-theme .notify-status.ok{ color:#a8e6c0; }
.notify-status.warn{ color:#f0c08a; }

/* ═══════════════════════════════════════════════════════════
   v60.1 — Yükleme ekranı kehribar tema (eski yeşil #040d0a düzeltmesi)
   ═══════════════════════════════════════════════════════════ */
#loading-screen{
  background:radial-gradient(120% 90% at 50% 100%, #4a2917 0%, #2a160b 45%, #150a05 100%);
}
.loading-crescent{ box-shadow:12px 12px 0 0 #f2bd8e; }
@keyframes loadingPulse{
  0%{ transform:scale(.9); opacity:.7; }
  100%{ transform:scale(1.1); opacity:1; filter:drop-shadow(0 0 16px rgba(242,189,142,.9)); }
}
.loading-title{ background:linear-gradient(180deg,#ffe9d3 0%,#f2bd8e 60%,#cf8f5f 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
body.green-theme #loading-screen{ background:#0A1B16; }
body.green-theme .loading-crescent{ box-shadow:12px 12px 0 0 var(--gold); }

/* ═══════════════════════════════════════════════════════════
   v60.1 — Rüzgârlı gökyüzü (ana ekran canlı arka plan)
   Süzülen sis bantları + uçuşan ışık zerreleri + nefes alan ufuk.
   Yalnızca transform/opacity → pil dostu; reduced-motion'da kapanır.
   ═══════════════════════════════════════════════════════════ */
.cd-ring, .horizon{ position:relative; z-index:1; }
.wind-layer{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }

/* sis / bulut bantları: soldan sağa rüzgârla süzülür */
.cloud{
  position:absolute; left:0; border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(255,222,186,.34) 0%, rgba(255,210,168,.14) 45%, rgba(255,210,168,0) 72%);
  filter:blur(14px); opacity:0; will-change:transform, opacity;
  animation:windDrift linear infinite;
}
.cloud.c1{ width:280px; height:72px; top:12%;  animation-duration:28s; animation-delay:-6s;  }
.cloud.c2{ width:220px; height:58px; top:34%;  animation-duration:36s; animation-delay:-20s; }
.cloud.c3{ width:340px; height:86px; top:58%;  animation-duration:44s; animation-delay:-31s; }
.cloud.c4{ width:180px; height:50px; top:76%;  animation-duration:32s; animation-delay:-12s; }
@keyframes windDrift{
  0%   { transform:translateX(-420px); opacity:0; }
  8%   { opacity:.85; }
  92%  { opacity:.85; }
  100% { transform:translateX(560px); opacity:0; }
}

/* ışık zerreleri: yukarı süzülür, rüzgârla salınır */
.mote{
  position:absolute; bottom:24%; width:4px; height:4px; border-radius:50%;
  background:rgba(255,230,196,.95);
  box-shadow:0 0 8px 2px rgba(255,204,150,.55);
  opacity:0; will-change:transform, opacity;
  animation:moteFloat ease-in-out infinite;
}
.mote:nth-child(5) { left:8%;  animation-duration:9s;  animation-delay:0s;   }
.mote:nth-child(6) { left:18%; animation-duration:11s; animation-delay:-3s;  width:3px; height:3px; }
.mote:nth-child(7) { left:27%; animation-duration:8s;  animation-delay:-5s;  }
.mote:nth-child(8) { left:38%; animation-duration:12s; animation-delay:-1s;  width:3px; height:3px; }
.mote:nth-child(9) { left:50%; animation-duration:10s; animation-delay:-7s;  }
.mote:nth-child(10){ left:61%; animation-duration:9s;  animation-delay:-2s;  width:5px; height:5px; }
.mote:nth-child(11){ left:70%; animation-duration:13s; animation-delay:-9s;  width:3px; height:3px; }
.mote:nth-child(12){ left:79%; animation-duration:8s;  animation-delay:-4s;  }
.mote:nth-child(13){ left:88%; animation-duration:11s; animation-delay:-6s;  width:3px; height:3px; }
.mote:nth-child(14){ left:94%; animation-duration:10s; animation-delay:-8s;  }
@keyframes moteFloat{
  0%   { transform:translate(0,0) scale(.5);        opacity:0;  }
  12%  { opacity:.9; }
  45%  { transform:translate(16px,-70px) scale(1);  }
  80%  { opacity:.65; }
  100% { transform:translate(-12px,-150px) scale(.4); opacity:0; }
}

/* ufuk ışığı nefes alır */
.horizon-glow{ animation:glowBreathe 5.5s ease-in-out infinite alternate; will-change:opacity, transform; }
@keyframes glowBreathe{
  from{ opacity:.78; transform:translateX(-50%) scale(1); }
  to  { opacity:1;   transform:translateX(-50%) scale(1.07); }
}

/* yeşil temada zerreler altın tonda */
body.green-theme .mote{ background:rgba(211,175,102,.95); box-shadow:0 0 8px 2px rgba(200,162,90,.55); }
body.green-theme .cloud{ background:radial-gradient(ellipse at center, rgba(200,162,90,.22) 0%, rgba(200,162,90,.08) 45%, rgba(200,162,90,0) 72%); }

/* hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce){
  .cloud, .mote, .horizon-glow{ animation:none !important; }
  .cloud{ opacity:.35; transform:none; }
}

/* ═══════════════════════════════════════════════════════════
   v60.2 — Gökyüzü: yol alan güneş/ay + belirgin rüzgâr
   ═══════════════════════════════════════════════════════════ */

/* ── Güneş / Ay: gerçek doğuş-batış saatine göre yay çizer ── */
.sky-body{
  position:absolute;
  left:var(--sky-x, 50%); top:var(--sky-y, 20%);
  width:46px; height:46px; margin:-23px 0 0 -23px;
  border-radius:50%;
  transition:left 1.5s linear, top 1.5s linear, box-shadow 1.2s ease, width .8s ease, height .8s ease;
  pointer-events:none;
}
.sky-orb{ display:block; width:100%; height:100%; border-radius:50%; }

/* gündüz: parlak güneş */
[data-sky="day"] .sky-body{
  box-shadow:0 0 30px 12px rgba(255,196,110,.42), 0 0 76px 30px rgba(255,168,74,.20);
}
[data-sky="day"] .sky-orb{
  background:radial-gradient(circle at 36% 32%, #fffdf4 0%, #ffe6a8 42%, #ffb757 100%);
  animation:sunPulse 6s ease-in-out infinite alternate;
}
@keyframes sunPulse{ from{ filter:brightness(1); } to{ filter:brightness(1.14); } }

/* gece: soluk ay (hilal) */
[data-sky="night"] .sky-body{
  width:34px; height:34px; margin:-17px 0 0 -17px;
  box-shadow:0 0 20px 7px rgba(240,226,202,.22), 0 0 50px 20px rgba(215,200,175,.10);
}
[data-sky="night"] .sky-orb{
  background:radial-gradient(circle at 36% 30%, #fffaf0 0%, #efdec2 55%, #cbb694 100%);
  -webkit-mask:radial-gradient(circle at 74% 26%, transparent 0 48%, #000 50%);
  mask:radial-gradient(circle at 74% 26%, transparent 0 48%, #000 50%);
}

/* ── Rüzgâr: daha belirgin, daha hızlı ── */
.cloud{
  background:radial-gradient(ellipse at center, rgba(255,226,192,.52) 0%, rgba(255,206,158,.22) 46%, rgba(255,206,158,0) 74%);
  filter:blur(11px);
}
.cloud.c1{ animation-duration:16s; animation-delay:-3s;  }
.cloud.c2{ animation-duration:21s; animation-delay:-11s; }
.cloud.c3{ animation-duration:26s; animation-delay:-18s; }
.cloud.c4{ animation-duration:18s; animation-delay:-7s;  }
@keyframes windDrift{
  0%   { transform:translateX(-440px) translateY(0);    opacity:0; }
  10%  { opacity:1; }
  50%  { transform:translateX(60px) translateY(-6px); }
  90%  { opacity:1; }
  100% { transform:translateX(580px) translateY(4px);   opacity:0; }
}

/* rüzgâr çizgileri: hızla süzülüp geçen esinti */
.gust{
  position:absolute; left:0; height:2px; border-radius:2px;
  background:linear-gradient(90deg, transparent 0%, rgba(255,231,199,.62) 45%, rgba(255,231,199,.30) 70%, transparent 100%);
  opacity:0; will-change:transform, opacity;
  animation:gustFly linear infinite;
}
.gust.g1{ width:140px; top:20%; animation-duration:5.2s; animation-delay:-0.6s; }
.gust.g2{ width:96px;  top:44%; animation-duration:6.8s; animation-delay:-3.2s; }
.gust.g3{ width:170px; top:64%; animation-duration:5.9s; animation-delay:-4.6s; }
@keyframes gustFly{
  0%   { transform:translateX(-200px) scaleX(.55); opacity:0; }
  14%  { opacity:.95; }
  72%  { opacity:.6; }
  100% { transform:translateX(540px) scaleX(1.35); opacity:0; }
}

/* zerreler biraz daha canlı */
.mote{ box-shadow:0 0 10px 3px rgba(255,204,150,.62); }

/* ── Günün saatine göre gökyüzü aydınlığı (öğlen en parlak) ── */
body.dark-theme[data-tod="Fajr"]{    --t1:#5a3d26; --t2:#3a2415; --t3:#22120a; --t4:#140a05; }
body.dark-theme[data-tod="Sunrise"]{ --t1:#8e5f36; --t2:#5e3c21; --t3:#3a2110; --t4:#241206; }
body.dark-theme[data-tod="Dhuhr"]{   --t1:#a97144; --t2:#734827; --t3:#452712; --t4:#281406; }
body.dark-theme[data-tod="Asr"]{     --t1:#8a5732; --t2:#5b3720; --t3:#351d0e; --t4:#1e0f05; }
body.dark-theme[data-tod="Maghrib"]{ --t1:#5a3220; --t2:#361c10; --t3:#1d0f06; --t4:#100703; }
body.dark-theme[data-tod="Isha"]{    --t1:#36210f; --t2:#211208; --t3:#130903; --t4:#0a0502; }

/* akşam ufku daha turuncu, gece daha sönük */
body.dark-theme[data-tod="Maghrib"] .horizon-glow{
  background:radial-gradient(ellipse at 50% 100%, rgba(255,166,96,.72) 0%, rgba(226,110,52,.30) 44%, transparent 72%);
}
body.dark-theme[data-tod="Isha"] .horizon-glow{
  background:radial-gradient(ellipse at 50% 100%, rgba(224,176,128,.34) 0%, rgba(180,120,74,.14) 44%, transparent 72%);
}

@media (prefers-reduced-motion: reduce){
  .gust{ animation:none !important; opacity:0; }
  .sky-orb{ animation:none !important; }
  .sky-body{ transition:none; }
}

/* v60.3 — güneş boyutu/parlaklığı ince ayarı (yazıyı bastırmasın) */
.sky-body{ width:38px; height:38px; margin:-19px 0 0 -19px; }
[data-sky="day"] .sky-body{ box-shadow:0 0 24px 9px rgba(255,196,110,.34), 0 0 62px 24px rgba(255,168,74,.15); }
[data-sky="night"] .sky-body{ width:30px; height:30px; margin:-15px 0 0 -15px; }

/* ═══════════════════════════════════════════════════════════
   v60.4 — "Bu neymiş be" seviyesi: canlı, dalgalı gökyüzü
   Dönen ışık huzmeleri + dalgalanan aurora + büyük hızlı bulutlar
   + kayan yıldız + daha fazla zerre. Hepsi transform/opacity.
   ═══════════════════════════════════════════════════════════ */

/* ── Dönen ışık huzmeleri (halkanın arkasında güneş patlaması) ── */
.rays{
  position:absolute; left:50%; top:40%;
  width:640px; height:640px; margin:-320px 0 0 -320px; border-radius:50%;
  background:repeating-conic-gradient(from 0deg,
    rgba(255,224,184,0) 0deg 8deg,
    rgba(255,224,184,.13) 10deg 13deg,
    rgba(255,224,184,0) 15deg 22deg);
  -webkit-mask:radial-gradient(circle, rgba(0,0,0,.95) 0%, rgba(0,0,0,.55) 30%, rgba(0,0,0,.18) 48%, transparent 60%);
  mask:radial-gradient(circle, rgba(0,0,0,.95) 0%, rgba(0,0,0,.55) 30%, rgba(0,0,0,.18) 48%, transparent 60%);
  animation:raysSpin 60s linear infinite; will-change:transform;
}
@keyframes raysSpin{ to{ transform:rotate(360deg); } }
[data-sky="night"] .rays{ opacity:.45; }

/* ── Aurora: dalgalanan ışık bantları ── */
.aurora{
  position:absolute; left:-25%; width:150%; height:40%; top:4%;
  border-radius:50%;
  background:linear-gradient(90deg,
    rgba(255,208,152,0) 0%, rgba(255,208,152,.26) 28%,
    rgba(255,182,112,.36) 50%, rgba(255,208,152,.26) 72%, rgba(255,208,152,0) 100%);
  filter:blur(20px); opacity:.9; will-change:transform;
  animation:auroraWave 12s ease-in-out infinite alternate;
}
.aurora.a2{ top:32%; height:32%; opacity:.62; animation-duration:17s; animation-delay:-8s; }
@keyframes auroraWave{
  0%   { transform:translateX(-9%) skewY(-6deg)  scaleY(1);    }
  35%  { transform:translateX(2%)  skewY(4deg)   scaleY(1.30); }
  70%  { transform:translateX(7%)  skewY(-3deg)  scaleY(.92);  }
  100% { transform:translateX(11%) skewY(5deg)   scaleY(1.18); }
}
[data-sky="night"] .aurora{ opacity:.45; }

/* ── Bulutlar: daha büyük, daha parlak, daha hızlı, hafif dalgalı ── */
.cloud{
  background:radial-gradient(ellipse at center, rgba(255,230,198,.62) 0%, rgba(255,210,164,.28) 48%, rgba(255,210,164,0) 74%);
  filter:blur(10px);
}
.cloud.c1{ width:320px; height:84px; top:10%; animation-duration:13s; animation-delay:-2s;  }
.cloud.c2{ width:250px; height:66px; top:30%; animation-duration:17s; animation-delay:-9s;  }
.cloud.c3{ width:380px; height:98px; top:52%; animation-duration:21s; animation-delay:-15s; }
.cloud.c4{ width:210px; height:58px; top:70%; animation-duration:15s; animation-delay:-6s;  }
.cloud.c5{ width:290px; height:74px; top:42%; animation-duration:19s; animation-delay:-12s; }
@keyframes windDrift{
  0%   { transform:translateX(-460px) translateY(0)    scaleX(1);   opacity:0; }
  10%  { opacity:1; }
  30%  { transform:translateX(-160px) translateY(-9px) scaleX(1.06); }
  55%  { transform:translateX(120px)  translateY(6px)  scaleX(.96); }
  80%  { transform:translateX(380px)  translateY(-7px) scaleX(1.05); }
  90%  { opacity:1; }
  100% { transform:translateX(600px)  translateY(3px)  scaleX(1);   opacity:0; }
}

/* ── Esinti çizgileri: 4 tane, daha hızlı ── */
.gust.g1{ width:160px; top:16%; animation-duration:4.2s; animation-delay:-0.4s; }
.gust.g2{ width:110px; top:36%; animation-duration:5.4s; animation-delay:-2.6s; }
.gust.g3{ width:190px; top:58%; animation-duration:4.8s; animation-delay:-3.9s; }
.gust.g4{ width:130px; top:76%; animation-duration:6.1s; animation-delay:-1.7s; }

/* ── Kayan yıldız: her ~11 sn'de bir çapraz geçer ── */
.shooting{
  position:absolute; top:10%; left:-12%; width:130px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, rgba(255,242,218,0) 0%, rgba(255,242,218,.98) 60%, rgba(255,242,218,0) 100%);
  box-shadow:0 0 10px 2px rgba(255,232,196,.5);
  transform:rotate(20deg); opacity:0; will-change:transform, opacity;
  animation:shoot 11s linear infinite; animation-delay:2.5s;
}
@keyframes shoot{
  0%, 86% { transform:translate(0,0) rotate(20deg);       opacity:0; }
  87%     { opacity:1; }
  100%    { transform:translate(560px,200px) rotate(20deg); opacity:0; }
}

/* ── Zerreler: 16 tane, daha canlı ── */
.wind-layer .mote{ width:4px; height:4px; box-shadow:0 0 11px 3px rgba(255,208,156,.7); animation-name:moteFloat; }
.wind-layer .mote.m1 { left:4%;  animation-duration:8s;  animation-delay:0s;    }
.wind-layer .mote.m2 { left:11%; animation-duration:10s; animation-delay:-2s;   width:3px; height:3px; }
.wind-layer .mote.m3 { left:17%; animation-duration:7s;  animation-delay:-4s;   }
.wind-layer .mote.m4 { left:24%; animation-duration:11s; animation-delay:-1s;   width:3px; height:3px; }
.wind-layer .mote.m5 { left:31%; animation-duration:9s;  animation-delay:-6s;   width:5px; height:5px; }
.wind-layer .mote.m6 { left:38%; animation-duration:8s;  animation-delay:-3s;   }
.wind-layer .mote.m7 { left:45%; animation-duration:12s; animation-delay:-8s;   width:3px; height:3px; }
.wind-layer .mote.m8 { left:52%; animation-duration:7s;  animation-delay:-5s;   }
.wind-layer .mote.m9 { left:59%; animation-duration:10s; animation-delay:-2.5s; width:5px; height:5px; }
.wind-layer .mote.m10{ left:66%; animation-duration:8s;  animation-delay:-7s;   }
.wind-layer .mote.m11{ left:73%; animation-duration:11s; animation-delay:-4.5s; width:3px; height:3px; }
.wind-layer .mote.m12{ left:80%; animation-duration:9s;  animation-delay:-1.5s; }
.wind-layer .mote.m13{ left:86%; animation-duration:7s;  animation-delay:-6.5s; width:3px; height:3px; }
.wind-layer .mote.m14{ left:92%; animation-duration:10s; animation-delay:-3.5s; }
.wind-layer .mote.m15{ left:96%; animation-duration:8s;  animation-delay:-9s;   width:5px; height:5px; }
.wind-layer .mote.m16{ left:28%; animation-duration:13s; animation-delay:-10s;  width:3px; height:3px; }
@keyframes moteFloat{
  0%   { transform:translate(0,0) scale(.5);          opacity:0;  }
  10%  { opacity:1; }
  40%  { transform:translate(22px,-80px) scale(1.05); }
  75%  { opacity:.75; }
  100% { transform:translate(-16px,-175px) scale(.4); opacity:0; }
}

/* ── Ufuk ışığı daha güçlü nefes ── */
@keyframes glowBreathe{
  from{ opacity:.7;  transform:translateX(-50%) scale(1);    }
  to  { opacity:1;   transform:translateX(-50%) scale(1.12); }
}
.horizon-glow{ animation-duration:4.5s; }

/* yeşil temada altın tonlar */
body.green-theme .rays{ background:repeating-conic-gradient(from 0deg, rgba(200,162,90,0) 0deg 8deg, rgba(200,162,90,.12) 10deg 13deg, rgba(200,162,90,0) 15deg 22deg); }
body.green-theme .aurora{ background:linear-gradient(90deg, rgba(200,162,90,0) 0%, rgba(200,162,90,.2) 28%, rgba(224,196,137,.3) 50%, rgba(200,162,90,.2) 72%, rgba(200,162,90,0) 100%); }
body.green-theme .shooting{ background:linear-gradient(90deg, rgba(211,175,102,0), rgba(211,175,102,.98) 60%, rgba(211,175,102,0)); }

@media (prefers-reduced-motion: reduce){
  .rays, .aurora, .shooting{ animation:none !important; }
  .rays{ opacity:.25; } .aurora{ opacity:.3; } .shooting{ opacity:0; }
}

/* ═══════════════════════════════════════════════════════════
   v60.5 — Okunabilirlik + hadis kartı + diğer sayfalara hafif gökyüzü
   ═══════════════════════════════════════════════════════════ */

/* ── "İKİNDİ VAKTİNE" etiketi: yaşlılar için belirgin ── */
.cd-lbl{
  font-size:.96rem; letter-spacing:2.6px; font-weight:800;
  color:#fff1e0; opacity:1;
  text-shadow:0 1px 2px rgba(0,0,0,.55), 0 0 12px rgba(0,0,0,.35);
  margin-bottom:5px;
}
.cd-time{ text-shadow:0 2px 4px rgba(0,0,0,.45), 0 0 18px rgba(0,0,0,.25); }
body.green-theme .cd-lbl{ color:#F3E6C6; }

/* ── Günün Hadisi: daha büyük punto, kartı doldursun ── */
.warm-home .daily-hadis-card{
  justify-content:center; gap:4px; padding:14px 18px 12px;
}
.warm-home .daily-hadis-card .verse-card-title{
  font-size:1.08rem; margin-bottom:8px; color:#f7dcc0;
  text-shadow:0 1px 2px rgba(0,0,0,.4);
}
.warm-home .hadis-arabic{
  font-size:1.42rem; line-height:1.75; margin-bottom:8px; color:#ffe6c8;
}
.warm-home .hadis-text{
  font-size:clamp(1.02rem, 3.8vw, 1.18rem); line-height:1.62;
  color:#fbeee0; font-weight:500;
}
.warm-home .hadis-source{ font-size:.88rem; margin-top:8px; color:#f2c9a2; opacity:1; }
.warm-home .mini-share-btn{ margin-top:10px; padding:6px 16px; font-size:.78rem; }

/* ── Diğer sayfalar: belli belirsiz canlı gökyüzü ── */
.hero-frame-box{ isolation:isolate; }
.page-sky{
  position:sticky; top:0; height:0; z-index:-1;
  pointer-events:none; margin:0; padding:0; flex:0 0 0;
}
.page-sky-inner{
  position:absolute; left:-10px; right:-10px; top:-10px; height:105vh;
  overflow:hidden; pointer-events:none;
}
.page-sky .rays{ opacity:.20; top:34%; animation-duration:80s; }
.page-sky .aurora{ opacity:.26; }
.page-sky .aurora.a2{ opacity:.18; }
.page-sky .mote{ opacity:0; }
.page-sky .mote.m1{ left:8%;  animation-duration:11s; animation-delay:-1s; }
.page-sky .mote.m2{ left:26%; animation-duration:13s; animation-delay:-5s; width:3px; height:3px; }
.page-sky .mote.m3{ left:44%; animation-duration:10s; animation-delay:-3s; }
.page-sky .mote.m4{ left:62%; animation-duration:14s; animation-delay:-8s; width:3px; height:3px; }
.page-sky .mote.m5{ left:79%; animation-duration:12s; animation-delay:-6s; }
.page-sky .mote.m6{ left:92%; animation-duration:11s; animation-delay:-2s; width:3px; height:3px; }
.page-sky .mote{ bottom:30%; box-shadow:0 0 8px 2px rgba(255,208,156,.45); }
@keyframes pageMote{
  0%   { transform:translate(0,0) scale(.5);         opacity:0;  }
  12%  { opacity:.55; }
  50%  { transform:translate(14px,-90px) scale(1);   }
  85%  { opacity:.35; }
  100% { transform:translate(-10px,-200px) scale(.4); opacity:0; }
}
.page-sky .mote{ animation-name:pageMote; }
body.green-theme .page-sky .rays{ opacity:.14; }
@media (prefers-reduced-motion: reduce){ .page-sky .rays, .page-sky .aurora, .page-sky .mote{ animation:none !important; } .page-sky .mote{ opacity:0; } }

/* ═══════════════════════════════════════════════════════════
   v60.6 — Hub sayfalarında BELİRGİN gökyüzü + güvenli katmanlama
   (negatif z-index yerine: gökyüzü z:0, içerik z:1)
   ═══════════════════════════════════════════════════════════ */
.hero-frame-box{ position:relative; isolation:isolate; }
.hero-frame-box > *:not(.page-sky){ position:relative; z-index:1; }
.page-sky{ z-index:0; }
.page-sky-inner{ height:120vh; }
.page-sky .rays{ opacity:.55; top:38%; animation-duration:70s; }
.page-sky .aurora{ opacity:.62; }
.page-sky .aurora.a2{ opacity:.42; }
.page-sky .cloud{ opacity:0; }
.page-sky .cloud.c1{ width:300px; height:80px; top:8%;  animation-duration:15s; animation-delay:-3s;  }
.page-sky .cloud.c2{ width:240px; height:64px; top:34%; animation-duration:20s; animation-delay:-11s; }
.page-sky .cloud.c3{ width:340px; height:90px; top:60%; animation-duration:24s; animation-delay:-17s; }
.page-sky .gust.g1{ width:150px; top:18%; animation-duration:4.6s; animation-delay:-0.8s; }
.page-sky .gust.g2{ width:110px; top:42%; animation-duration:5.8s; animation-delay:-2.9s; }
.page-sky .gust.g3{ width:180px; top:66%; animation-duration:5.1s; animation-delay:-4.2s; }
.page-sky .mote{ bottom:20%; box-shadow:0 0 10px 3px rgba(255,208,156,.6); animation-name:moteFloat; }
.page-sky .mote.m7 { left:15%; animation-duration:9s;  animation-delay:-4s;   width:5px; height:5px; }
.page-sky .mote.m8 { left:35%; animation-duration:12s; animation-delay:-7s;   }
.page-sky .mote.m9 { left:55%; animation-duration:8s;  animation-delay:-2.5s; width:5px; height:5px; }
.page-sky .mote.m10{ left:72%; animation-duration:11s; animation-delay:-9s;   width:3px; height:3px; }
/* ana sayfa sahnesindeki katman bu kuraldan etkilenmesin */
.cd-stage .wind-layer{ z-index:0; }
.warm-home .cd-stage{ z-index:1; }

/* Günün hadisi: dokununca yumuşak geçiş + dokunulabilir his */
#daily-hadis-card{ cursor:pointer; transition:opacity .18s ease, transform .18s ease; }
#daily-hadis-card:active{ transform:scale(.99); }
#daily-hadis-card.hadis-swap{ opacity:.35; }

/* 1000 Hadis: Arapça satır + sayfalama */
.hadis40-ar{ font-family:var(--font-ar); font-size:1.15rem; color:var(--gold-light); direction:rtl; text-align:right; line-height:1.7; margin-bottom:6px; }
.hadis-pager{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:8px 0 12px; }
.hadis-pager .gold-outline-btn{ flex:1; }
.hadis-pager .gold-outline-btn:disabled{ opacity:.4; cursor:default; }
.hadis-pager-info{ font-size:.82rem; color:var(--gold-light); font-weight:700; white-space:nowrap; }

/* ══════════════════════════════════════════════════════════
   v60.8 — PUAN / YORUM İSTEME KARTI
   ══════════════════════════════════════════════════════════ */
.hv-rate-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(12, 6, 3, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .25s ease;
}
.hv-rate-backdrop.open { opacity: 1; }

.hv-rate-card {
  width: 100%;
  max-width: 340px;
  border-radius: 24px;
  padding: 26px 22px 18px;
  text-align: center;
  background: linear-gradient(180deg, #33190d 0%, #1f1007 100%);
  border: 1px solid rgba(240, 180, 131, .28);
  box-shadow: 0 26px 70px rgba(0, 0, 0, .6);
  transform: translateY(16px) scale(.97);
  transition: transform .28s cubic-bezier(.2, .9, .3, 1.1);
}
.hv-rate-backdrop.open .hv-rate-card { transform: translateY(0) scale(1); }

.hv-rate-stars { font-size: 1.5rem; letter-spacing: 2px; margin-bottom: 12px; }

.hv-rate-title {
  font-size: 1.22rem;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 10px;
  background: linear-gradient(180deg, #ffe9d3, #f0b483);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hv-rate-text {
  font-size: .97rem;
  line-height: 1.55;
  color: #e2c8b2;
  margin-bottom: 20px;
}
.hv-rate-btn {
  display: block;
  width: 100%;
  padding: 14px 16px;
  margin-bottom: 10px;
  border: none;
  border-radius: 14px;
  font-size: 1.02rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
.hv-rate-primary {
  background: linear-gradient(180deg, #f5c99a, #dc9a5f);
  color: #241205;
  box-shadow: 0 8px 22px rgba(220, 154, 95, .32);
}
.hv-rate-primary:active { transform: translateY(1px); }
.hv-rate-ghost {
  background: rgba(255, 233, 211, .09);
  color: #f0d9c4;
  border: 1px solid rgba(240, 180, 131, .25);
}
.hv-rate-link {
  display: block;
  width: 100%;
  padding: 8px 0 4px;
  background: none;
  border: none;
  color: #a9836a;
  font-size: .86rem;
  font-family: inherit;
  cursor: pointer;
  text-decoration: underline;
}

/* ═══════════ v60.9 — 30 GÜNDE NAMAZA BAŞLANGIÇ ═══════════ */
.hv30-top{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.hv30-ring{width:72px;height:72px;min-width:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:conic-gradient(var(--gold) calc(var(--p,0)*1%), rgba(212,175,55,.16) 0);position:relative}
.hv30-ring::after{content:'';position:absolute;inset:6px;border-radius:50%;background:var(--bg-card)}
.hv30-pct{position:relative;z-index:1;font-weight:800;font-size:.95rem;color:var(--gold)}
.hv30-topbig{font-size:1.15rem;font-weight:800;color:var(--text-main)}
.hv30-topsub{font-size:.82rem;color:var(--text-sub);margin-top:3px;line-height:1.4}
.hv30-bar{height:8px;border-radius:99px;background:rgba(212,175,55,.15);overflow:hidden;margin-bottom:12px}
.hv30-bar-fill{height:100%;border-radius:99px;background:var(--gold-gradient);transition:width .35s ease}
.hv30-intro{font-size:.84rem;color:var(--text-sub);line-height:1.55;margin:0 0 14px}
.hv30-list{display:flex;flex-direction:column;gap:8px}
.hv30-item{border:1px solid var(--border-light);border-radius:14px;overflow:hidden;background:var(--bg-card)}
.hv30-item.done{border-color:rgba(46,160,90,.5);background:rgba(46,160,90,.1)}
.hv30-item.open{border-color:var(--gold)}
.hv30-head{display:flex;align-items:center;gap:9px;padding:11px 12px;cursor:pointer;user-select:none}
.hv30-num{width:26px;height:26px;min-width:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:.78rem;font-weight:800;background:rgba(212,175,55,.18);color:var(--gold)}
.hv30-item.done .hv30-num{background:rgba(46,200,110,.28);color:#5fe39a}
.hv30-icon{font-size:1.05rem}
.hv30-title{flex:1;font-weight:700;font-size:.92rem;line-height:1.3;color:var(--text-main)}
.hv30-chev{font-size:.8rem;opacity:.7}
.hv30-body{padding:0 13px 13px}
.hv30-text{font-size:.87rem;line-height:1.65;margin:0 0 10px;color:var(--text-main)}
.hv30-task{display:block;padding:10px 12px;border-radius:11px;background:rgba(212,175,55,.1);border-left:3px solid var(--gold);margin-bottom:11px}
.hv30-task strong{display:block;font-size:.78rem;margin-bottom:4px;color:var(--gold)}
.hv30-task span{font-size:.85rem;line-height:1.55;color:var(--text-main);display:block}
.hv30-btn{width:100%;padding:11px;border:none;border-radius:11px;font-size:.9rem;font-weight:700;cursor:pointer;
  background:var(--gold-gradient);color:#1a1208}
.hv30-btn.undo{background:rgba(255,255,255,.08);color:var(--text-sub);border:1px solid var(--border-light)}
.hv30-reset{width:100%;margin-top:14px;padding:10px;border-radius:11px;border:1px solid var(--border-light);
  background:transparent;color:var(--text-sub);font-size:.84rem;cursor:pointer}
.loc-note{font-size:.76rem;line-height:1.55;color:var(--text-muted);margin:9px 0 0;padding:9px 11px;
  border-radius:10px;background:rgba(212,175,55,.08);border-left:3px solid var(--border-light)}
.loc-note strong{color:var(--text-sub)}

/* ═══════════ v61.0 — GÖRSEL PAYLAŞIM PENCERESİ ═══════════ */
.hv-sc-backdrop{position:fixed;inset:0;z-index:9999;background:rgba(8,4,2,.88);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:16px;animation:hvScIn .22s ease}
@keyframes hvScIn{from{opacity:0}to{opacity:1}}
.hv-sc-box{width:100%;max-width:340px;display:flex;flex-direction:column;align-items:center;gap:12px}
.hv-sc-img{width:100%;max-height:58vh;object-fit:contain;border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.7);border:1px solid var(--border-light)}
.hv-sc-actions{display:flex;flex-direction:column;gap:8px;width:100%}
.hv-sc-btn{width:100%;padding:13px;border-radius:12px;font-size:.95rem;font-weight:700;cursor:pointer;
  border:1px solid var(--border-light);background:rgba(255,255,255,.07);color:var(--text-main)}
.hv-sc-primary{background:var(--gold-gradient);color:#231206;border:none}
.hv-sc-ghost{background:transparent;font-weight:500;font-size:.86rem;color:var(--text-muted)}
.hv-sc-close{background:none;border:none;color:var(--text-muted);font-size:.88rem;padding:6px 14px;cursor:pointer}

/* ═══════════════════════════════════════════════════════════════
   v61.4 — MUSHAF + EZBERLEME
   ═══════════════════════════════════════════════════════════════ */

/* ── Mushaf araç çubukları ── */
.mv-bar { display:flex; align-items:center; gap:8px; justify-content:center; flex-wrap:wrap;
  background:var(--bg-card); border:1px solid var(--border-light); border-radius:12px;
  padding:8px 10px; margin-bottom:8px; }
.mv-bar2 { justify-content:space-between; }
.mv-bar3 { justify-content:space-between; }

.mv-nav { background:var(--bg-dark,rgba(0,0,0,.25)); color:var(--gold-light); border:1px solid var(--border-light);
  border-radius:10px; width:42px; height:38px; font-size:1.4rem; line-height:1; cursor:pointer; }
.mv-nav:disabled { opacity:.35; cursor:default; }

.mv-page-box { display:flex; align-items:center; gap:6px; color:var(--text-sub); font-size:.9rem; }
.mv-page-box input { width:64px; text-align:center; background:rgba(0,0,0,.25); color:var(--gold-light);
  border:1px solid var(--border-light); border-radius:8px; padding:6px 4px; font-size:1rem; outline:none; }

.mv-mark { background:transparent; border:1px solid var(--border-light); border-radius:10px;
  width:42px; height:38px; font-size:1.2rem; cursor:pointer; color:var(--gold-light); }
.mv-mark.on { background:rgba(212,175,55,.18); }

.mv-mode { display:flex; gap:4px; flex-wrap:wrap; }
.mv-mode button { background:transparent; color:var(--text-sub); border:1px solid var(--border-light);
  border-radius:8px; padding:6px 10px; font-size:.78rem; cursor:pointer; }
.mv-mode button.on { background:var(--gold); color:#1a0e05; border-color:var(--gold); font-weight:600; }

.mv-font { display:flex; align-items:center; gap:6px; color:var(--text-sub); font-size:.8rem; }
.mv-font button { background:transparent; color:var(--gold-light); border:1px solid var(--border-light);
  border-radius:8px; padding:5px 9px; font-size:.85rem; cursor:pointer; }

.mv-play { background:var(--gold); color:#1a0e05; border:none; border-radius:10px;
  padding:9px 16px; font-size:.9rem; font-weight:600; cursor:pointer; }
.mv-qari { background:rgba(0,0,0,.25); color:var(--text-main); border:1px solid var(--border-light);
  border-radius:8px; padding:7px 8px; font-size:.8rem; outline:none; max-width:60%; }

/* ── Mushaf gövdesi ── */
.mv-body { margin-top:6px; }
.mv-loading, .mv-error { text-align:center; color:var(--text-muted); padding:28px 10px; font-size:.9rem; }
.mv-error { display:flex; flex-direction:column; gap:12px; align-items:center; }

.mv-arabic {
  font-family:'Amiri Quran','Amiri',serif;
  direction:rtl; text-align:justify; text-align-last:center;
  color:var(--gold-light); line-height:2.15; letter-spacing:0;
  background:var(--bg-card); border:1px solid var(--border-gold); border-radius:14px;
  padding:20px 16px; word-spacing:.05em;
}
.mv-ayah { cursor:pointer; border-radius:6px; transition:background .18s; }
.mv-ayah.okunuyor { background:none; box-shadow:none; }
.mv-num { font-family:'Amiri Quran','Amiri',serif; font-size:.72em; color:var(--gold);
  margin:0 .18em; padding:0 .28em; border:1px solid var(--gold); border-radius:50%;
  display:inline-block; line-height:1.5; }

.mv-sure-basi { display:block; font-family:'Amiri Quran','Amiri',serif; text-align:center;
  color:var(--gold); font-size:.85em; margin:14px 0 6px; padding:6px 0;
  border-top:1px solid var(--border-light); border-bottom:1px solid var(--border-light); }
.mv-besmele { display:block; text-align:center; color:var(--gold-light); font-size:.9em; margin:6px 0 10px; }

.mv-meal-wrap { margin-top:12px; }
.mv-meal-sure { color:var(--gold); font-size:.85rem; font-weight:600; margin:14px 0 6px; text-align:center;
  border-bottom:1px solid var(--border-light); padding-bottom:5px; }
.mv-meal { background:var(--bg-card); border:1px solid var(--border-light); border-radius:10px;
  padding:10px 12px; margin-bottom:7px; color:var(--text-sub); font-size:.92rem; line-height:1.65; cursor:pointer; }
.mv-meal.okunuyor { border-color:var(--gold); background:rgba(212,175,55,.12); }
.mv-meal-no { display:inline-block; min-width:22px; height:22px; line-height:22px; text-align:center;
  background:var(--gold); color:#1a0e05; border-radius:50%; font-size:.72rem; font-weight:700; margin-left:8px; }

.mv-foot { text-align:center; color:var(--text-muted); font-size:.8rem; margin:14px 0 4px; letter-spacing:2px; }

/* ── Ezberleme ── */
.ez-info { background:var(--bg-card); border:1px solid var(--border-light); border-radius:12px;
  padding:12px 14px; color:var(--text-sub); font-size:.86rem; line-height:1.6; margin-bottom:14px; }
.ez-group-title { color:var(--gold); font-size:.92rem; font-weight:700; margin:16px 0 8px; }
.ez-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; }
.ez-card { display:flex; flex-direction:column; align-items:flex-start; gap:3px; text-align:right;
  background:var(--bg-card); border:1px solid var(--border-light); border-radius:12px;
  padding:11px 12px; cursor:pointer; color:var(--text-main); }
.ez-card:active { background:var(--bg-card-hover); }
.ez-card-t { font-size:.9rem; font-weight:600; color:var(--gold-light); text-align:left; }
.ez-card-s { font-size:.74rem; color:var(--text-muted); }
.ez-badge { font-size:.68rem; color:var(--gold); border:1px solid var(--border-light);
  border-radius:20px; padding:1px 7px; margin-top:3px; }
.ez-badge.muted { color:var(--text-muted); }

.ez-step { background:var(--bg-card); border:1px solid var(--border-gold); border-radius:14px;
  padding:18px 16px; margin-top:14px; }
.ez-count { text-align:center; color:var(--text-muted); font-size:.8rem; margin-bottom:8px; }
.ez-dots { display:flex; justify-content:center; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.ez-dot { width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.18); cursor:pointer; }
.ez-dot.done { background:rgba(212,175,55,.5); }
.ez-dot.on { background:var(--gold); transform:scale(1.35); }

.ez-ar { font-family:'Amiri Quran','Amiri',serif; direction:rtl; text-align:center;
  color:var(--gold-light); font-size:1.75rem; line-height:2.1; margin-bottom:14px; }
.ez-ar-full { font-size:1.4rem; }
.ez-ok { color:var(--gold); font-size:1rem; line-height:1.75; text-align:center; margin-bottom:10px; font-style:italic; }
.ez-tr { color:var(--text-sub); font-size:.9rem; line-height:1.7; text-align:center; margin-bottom:14px; }

.ez-controls { display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:16px; }
.ez-play { background:var(--gold); color:#1a0e05; border:none; border-radius:10px;
  padding:11px 26px; font-size:1rem; font-weight:600; cursor:pointer; }
.ez-rep { display:flex; align-items:center; gap:6px; color:var(--text-muted); font-size:.8rem; }
.ez-rep button { background:transparent; color:var(--text-sub); border:1px solid var(--border-light);
  border-radius:8px; padding:4px 10px; font-size:.8rem; cursor:pointer; }
.ez-rep button.on { background:var(--gold); color:#1a0e05; border-color:var(--gold); font-weight:600; }
.ez-nosound { color:var(--text-muted); font-size:.82rem; text-align:center; line-height:1.6; }

.ez-nav { display:flex; gap:8px; }
.ez-nav button { flex:1; }
.ez-done-title { text-align:center; color:var(--gold-light); font-size:1.05rem; font-weight:600; margin-bottom:14px; }

.mv-where { background:var(--bg-card); border:1px solid var(--border-light); border-radius:12px;
  padding:9px 12px; margin-bottom:10px; }
.mv-where-now { color:var(--gold-light); font-size:.86rem; font-weight:600; margin-bottom:6px; }
.mv-marks { display:flex; flex-wrap:wrap; gap:5px; }
.mv-chip { background:rgba(212,175,55,.10); color:var(--gold-light); border:1px solid var(--border-light);
  border-radius:20px; padding:3px 10px; font-size:.75rem; cursor:pointer; }
.mv-chip.on { background:var(--gold); color:#1a0e05; border-color:var(--gold); font-weight:600; }
.mv-chip-more { color:var(--text-muted); font-size:.75rem; align-self:center; }
.mv-marks-empty { color:var(--text-muted); font-size:.75rem; }

/* Kuran okuma modu geçişi */
.qmode { display:flex; gap:6px; background:var(--bg-card); border:1px solid var(--border-light);
  border-radius:12px; padding:5px; margin-bottom:10px; }
.qmode button { flex:1; background:transparent; color:var(--text-sub); border:none;
  border-radius:9px; padding:10px 6px; font-size:.86rem; font-weight:600; cursor:pointer; font-family:inherit; }
.qmode button.on { background:var(--gold); color:#1a0e05; }

.mv-swipe-hint { text-align:center; color:var(--text-muted); font-size:.74rem; margin:8px 0 2px; }

.sure-fazilet { margin-top:8px; background:rgba(212,175,55,.08); border:1px solid var(--border-light);
  border-left:3px solid var(--gold); border-radius:8px; padding:9px 11px;
  color:var(--text-sub); font-size:.86rem; line-height:1.6; text-align:left; }
.sure-fazilet .sh-label { display:block; color:var(--gold); font-weight:700; font-size:.78rem; margin-bottom:3px; }

.ez-full-link { display:block; width:100%; margin-top:10px; background:transparent; border:none;
  color:var(--text-muted); font-size:.8rem; text-decoration:underline; cursor:pointer; font-family:inherit; }

/* Kuran Dinle */
.dn-player { background:var(--bg-card); border:1px solid var(--border-gold); border-radius:14px;
  padding:16px 14px; margin-bottom:10px; text-align:center; }
.dn-simdi { color:var(--gold-light); font-size:1.1rem; font-weight:700; }
.dn-qari-ad { color:var(--text-muted); font-size:.8rem; margin-bottom:12px; }
.dn-cizgi { width:100%; accent-color:var(--gold); height:4px; }
.dn-zaman { display:flex; justify-content:space-between; color:var(--text-muted); font-size:.75rem; margin-top:2px; }
.dn-btns { display:flex; align-items:center; justify-content:center; gap:18px; margin-top:12px; }
.dn-play { width:60px; height:60px; border-radius:50%; border:none; background:var(--gold);
  color:#1a0e05; font-size:1.5rem; cursor:pointer; }
.dn-yan { background:transparent; border:1px solid var(--border-light); color:var(--gold-light);
  width:44px; height:44px; border-radius:50%; font-size:1.1rem; cursor:pointer; }
.dn-devam { display:block; width:100%; margin-top:14px; background:rgba(212,175,55,.10);
  border:1px solid var(--border-light); border-radius:10px; padding:9px; color:var(--gold-light);
  font-size:.82rem; cursor:pointer; font-family:inherit; }

.dn-ayar { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  background:var(--bg-card); border:1px solid var(--border-light); border-radius:12px;
  padding:9px 12px; margin-bottom:10px; }
.dn-switch { display:flex; align-items:center; gap:7px; color:var(--text-sub); font-size:.8rem; cursor:pointer; }
.dn-switch input { accent-color:var(--gold); width:17px; height:17px; }

.dn-liste { display:flex; flex-direction:column; gap:6px; }
.dn-sure { display:flex; align-items:center; gap:10px; text-align:left; width:100%;
  background:var(--bg-card); border:1px solid var(--border-light); border-radius:10px;
  padding:10px 12px; color:var(--text-main); cursor:pointer; font-family:inherit; }
.dn-sure.caliyor { border-color:var(--gold); background:rgba(212,175,55,.12); }
.dn-no { min-width:26px; height:26px; line-height:26px; text-align:center; border-radius:50%;
  background:rgba(212,175,55,.15); color:var(--gold); font-size:.75rem; font-weight:700; }
.dn-ad { flex:1; font-size:.92rem; font-weight:600; }
.dn-ayet { color:var(--text-muted); font-size:.74rem; }

/* Elifbâ */
.el-sekme button { font-size:.8rem; }
.el-info { background:var(--bg-card); border:1px solid var(--border-light); border-radius:12px;
  padding:11px 13px; color:var(--text-sub); font-size:.84rem; line-height:1.6; margin-bottom:12px; }
.el-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(74px,1fr)); gap:7px; }
.el-harf { display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 4px;
  background:var(--bg-card); border:1px solid var(--border-light); border-radius:12px; cursor:pointer; }
.el-harf.secili { border-color:var(--gold); background:rgba(212,175,55,.14); }
.el-h { font-family:'Amiri Quran','Amiri',serif; font-size:2rem; color:var(--gold-light); line-height:1.2; }
.el-n { font-size:.72rem; color:var(--text-muted); }

.el-detay-kart { background:var(--bg-card); border:1px solid var(--border-gold); border-radius:14px;
  padding:18px 15px; margin-top:14px; text-align:center; }
.el-buyuk { font-family:'Amiri Quran','Amiri',serif; font-size:4.5rem; color:var(--gold-light); line-height:1.1; }
.el-ad { color:var(--gold); font-size:1.15rem; font-weight:700; margin-top:2px; }
.el-ok { color:var(--text-sub); font-size:.88rem; margin-top:6px; line-height:1.6; }
.el-etiket { display:inline-block; margin-top:8px; font-size:.72rem; color:var(--text-muted);
  border:1px solid var(--border-light); border-radius:20px; padding:2px 10px; }
.el-bolum { color:var(--gold); font-size:.78rem; font-weight:700; margin:16px 0 8px;
  border-top:1px solid var(--border-light); padding-top:12px; }
.el-bicimler, .el-harekeli { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.el-harekeli { grid-template-columns:repeat(3,1fr); }
.el-bicimler div, .el-harekeli div { background:rgba(212,175,55,.07); border:1px solid var(--border-light);
  border-radius:10px; padding:8px 2px; }
.el-bicimler span, .el-harekeli span { display:block; font-family:'Amiri Quran','Amiri',serif;
  font-size:1.9rem; color:var(--gold-light); line-height:1.4; }
.el-bicimler em, .el-harekeli em { font-style:normal; font-size:.68rem; color:var(--text-muted); }
.el-nav { display:flex; gap:8px; margin-top:16px; }
.el-nav button { flex:1; }

.el-hareke-kart { background:var(--bg-card); border:1px solid var(--border-light); border-radius:12px;
  padding:13px 14px; margin-bottom:8px; }
.el-hareke-ust { display:flex; align-items:center; gap:14px; }
.el-hareke-im { font-family:'Amiri Quran','Amiri',serif; font-size:2.6rem; color:var(--gold-light); line-height:1.2; }
.el-hareke-ad { color:var(--gold); font-weight:700; font-size:.95rem; }
.el-hareke-ornek { color:var(--text-muted); font-size:.78rem; }
.el-hareke-anlat { color:var(--text-sub); font-size:.84rem; line-height:1.6; margin-top:8px; }

.el-test { background:var(--bg-card); border:1px solid var(--border-gold); border-radius:14px;
  padding:20px 15px; text-align:center; }
.el-test-skor { color:var(--text-muted); font-size:.78rem; }
.el-test-harf { font-family:'Amiri Quran','Amiri',serif; font-size:5rem; color:var(--gold-light); line-height:1.2; margin:6px 0; }
.el-test-soru { color:var(--text-sub); font-size:.9rem; margin-bottom:14px; }
.el-test-secenekler { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.el-secenek { background:rgba(212,175,55,.08); border:1px solid var(--border-light); border-radius:10px;
  padding:12px 6px; color:var(--text-main); font-size:.92rem; font-weight:600; cursor:pointer; font-family:inherit; }
.el-secenek.dogru { background:rgba(60,180,110,.25); border-color:#3cb46e; }
.el-secenek.yanlis { background:rgba(200,60,60,.22); border-color:#c83c3c; }
.el-sonraki { margin-top:14px; width:100%; }

.el-hareke-not { color:var(--text-muted); font-size:.74rem; margin-top:8px; }

/* "Kur'an niçin indirildi?" ayet kartı */
.anlam-kart { background:linear-gradient(180deg, rgba(212,175,55,.10), rgba(212,175,55,.03));
  border:1px solid var(--border-light); border-left:3px solid var(--gold);
  border-radius:12px; padding:13px 14px; margin-bottom:10px; cursor:pointer; }
.anlam-ust { color:var(--gold); font-size:.76rem; font-weight:700; margin-bottom:8px; }
.anlam-ar { font-family:'Amiri Quran','Amiri',serif; direction:rtl; text-align:right;
  color:var(--gold-light); font-size:1.25rem; line-height:2; margin-bottom:8px; }
.anlam-tr { color:var(--text-sub); font-size:.87rem; line-height:1.65; }
.anlam-kaynak { color:var(--text-muted); font-size:.74rem; margin-top:7px; }
.anlam-ipucu { opacity:.7; }

.el-uyari { background:rgba(212,175,55,.07); border:1px solid var(--border-light);
  border-left:3px solid var(--gold); border-radius:10px; padding:10px 12px;
  color:var(--text-muted); font-size:.78rem; line-height:1.6; margin-bottom:12px; }

/* ═══ TAM EKRAN OKUMA MODU ═══ */
body.te-modda { overflow:hidden; }
body.te-modda #bottom-nav, body.te-modda #app-header, body.te-modda header { display:none !important; }

.te-kok { position:fixed; inset:0; z-index:9999; display:none;
  flex-direction:column; background:var(--bg-main); }
.te-kok.kagit { background:#e9e2d0; }

.te-ust, .te-alt { display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:10px 14px; transition:opacity .2s, transform .2s; }
.te-ust { padding-top:calc(10px + env(safe-area-inset-top, 0px)); }
.te-alt { justify-content:center; gap:10px; padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px)); }
.te-kok.cubuksuz .te-ust { opacity:0; transform:translateY(-100%); pointer-events:none; }
.te-kok.cubuksuz .te-alt { opacity:0; transform:translateY(100%); pointer-events:none; }

.te-yuvarlak { width:44px; height:44px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(212,175,55,.18); color:var(--gold-light); font-size:1.1rem; }
.te-kok.kagit .te-yuvarlak { background:#b39a5c; color:#fff; }
.te-sayfa-no { min-width:96px; text-align:center; border-radius:22px; padding:9px 20px;
  background:rgba(212,175,55,.18); color:var(--gold-light); font-size:1rem; font-weight:700; }
.te-kok.kagit .te-sayfa-no { background:#b39a5c; color:#fff; }

.te-orta { flex:1 1 0; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  padding:6px 10px 10px; -webkit-overflow-scrolling:touch; }
.te-cerceve { border:2px solid rgba(212,175,55,.55); border-radius:6px;
  padding:14px 10px; position:relative; }
.te-cerceve::before { content:''; position:absolute; inset:5px; border:1px solid rgba(212,175,55,.35);
  border-radius:4px; pointer-events:none; }
.te-kok.kagit .te-cerceve { border-color:#8c7231; background:#f5efdd; }
.te-kok.kagit .te-cerceve::before { border-color:#b39a5c; }

.te-baslik { text-align:center; color:var(--gold); font-size:.8rem; padding-bottom:9px;
  margin-bottom:10px; border-bottom:1px solid rgba(212,175,55,.3); }
.te-kok.kagit .te-baslik { color:#7a6220; border-bottom-color:#c9b47a; }

.te-metin { font-family:'Amiri Quran','Amiri',serif; direction:rtl;
  text-align:justify; text-align-last:center; color:var(--gold-light);
  line-height:2.25; padding:4px 6px 12px; }
.te-kok.kagit .te-metin { color:#1d1a12; }
.te-kok.kagit .te-metin .mv-num { color:#8c7231; border-color:#8c7231; }
.te-kok.kagit .te-metin .mv-ayah.okunuyor { background:none; box-shadow:none; }
.te-kok.kagit .te-metin .mv-sure-basi { color:#7a6220; border-color:#c9b47a; }
.te-kok.kagit .te-metin .mv-besmele { color:#3a3223; }

.te-alt-no { text-align:center; color:var(--text-muted); font-size:.9rem;
  font-family:'Amiri Quran','Amiri',serif; padding-bottom:4px; }
.te-kok.kagit .te-alt-no { color:#7a6220; }

.te-play { width:54px; height:54px; border-radius:50%; border:none; background:var(--gold);
  color:#1a0e05; font-size:1.3rem; cursor:pointer; }
.te-yan { width:44px; height:44px; border-radius:50%; border:1px solid rgba(212,175,55,.4);
  background:transparent; color:var(--gold-light); font-size:1.3rem; cursor:pointer; }
.te-yan:disabled { opacity:.3; }
.te-kucuk { min-width:44px; height:44px; border-radius:22px; border:1px solid rgba(212,175,55,.4);
  background:transparent; color:var(--gold-light); font-size:.85rem; cursor:pointer; padding:0 10px; }
.te-kok.kagit .te-yan, .te-kok.kagit .te-kucuk { color:#5f4c18; border-color:#b39a5c; }


/* Elifbâ harf kutusu — Arapça harf ile adı birbirine girmesin */
.el-harf { padding:14px 4px 9px; gap:6px; }
.el-h { font-size:2.1rem; line-height:1.75; }
.el-n { line-height:1.2; }
.el-bicimler span, .el-harekeli span { line-height:1.9; padding-top:2px; }
.el-buyuk { line-height:1.5; padding-top:6px; }

/* Elifbâ alıştırma — harf alttaki yazıyı kapatmasın */
.el-test-harf { line-height:1.55; padding:10px 0 4px; margin:0 0 4px; }
.el-test-soru { margin-top:6px; }

/* Ezber — öğrendim işareti */
.ez-ust-satir { display:flex; gap:8px; align-items:center; }
.ez-ust-satir .gold-outline-btn { flex:1; }
.ez-ogrendim { background:transparent; border:1px solid var(--border-light); border-radius:10px;
  padding:9px 14px; color:var(--text-muted); font-size:.84rem; font-weight:600;
  cursor:pointer; font-family:inherit; white-space:nowrap; }
.ez-ogrendim.on { background:rgba(60,180,110,.22); border-color:#3cb46e; color:#8ee0b0; }
.ez-card.ogrenildi { background:rgba(212,175,55,.16); border-color:rgba(212,175,55,.55); }
.ez-card.ogrenildi .ez-card-t { color:#ffeccf; }
.ez-card.ogrenildi .ez-card-s { color:rgba(255,255,255,.72); }
.ez-sayac { color:#8ee0b0; font-size:.8rem; margin-bottom:8px; }

/* ── v61.5 — Tam ekran okuma modunda MEAL (Türkçe sayfa sayfa) ───────── */
.te-mod { display:flex; gap:6px; justify-content:center; padding:0 14px 8px;
  transition:opacity .2s, transform .2s; }
.te-mod button { padding:7px 12px; border-radius:16px; cursor:pointer;
  border:1px solid rgba(212,175,55,.4); background:transparent;
  color:var(--gold-light); font-size:.76rem; white-space:nowrap; }
.te-mod button.on { background:var(--gold); color:#1a0e05;
  border-color:var(--gold); font-weight:700; }
.te-kok.cubuksuz .te-mod { opacity:0; transform:translateY(-100%); pointer-events:none; }
.te-kok.kagit .te-mod button { color:#5f4c18; border-color:#b39a5c; }
.te-kok.kagit .te-mod button.on { background:#8c7231; color:#fff; border-color:#8c7231; }

.te-meal { direction:ltr; text-align:left; color:var(--text-primary);
  line-height:1.85; padding:4px 6px 12px; }
.te-meal.ayrac { margin-top:12px; padding-top:14px;
  border-top:1px solid rgba(212,175,55,.35); }
.te-m-sure { text-align:center; color:var(--gold); font-weight:600;
  font-size:.86em; margin:14px 0 10px; }
.te-m-sure:first-child { margin-top:0; }
.te-m-ayet { margin:0 0 13px; }
.te-m-no { display:inline-block; min-width:24px; height:24px; line-height:24px;
  text-align:center; margin-right:8px; border-radius:50%; vertical-align:2px;
  background:rgba(212,175,55,.18); color:var(--gold-light);
  font-size:.7em; font-weight:700; font-family:inherit; }
.te-m-ayet.okunuyor { background:rgba(212,175,55,.12); border-radius:8px;
  padding:6px 8px; margin:-6px -8px 7px; }
.te-kok.kagit .te-meal { color:#1d1a12; }
.te-kok.kagit .te-meal.ayrac { border-top-color:#c9b47a; }
.te-kok.kagit .te-m-sure { color:#7a6220; }
.te-kok.kagit .te-m-no { background:#b39a5c; color:#fff; }

/* ── v61.5 — Sayfa çevirme hareketi (yatay kaydırma tarayıcıya kaptırılmasın) ── */
.mv-body, .te-kok, .te-orta {
  touch-action: pan-y;            /* yatay hareketi tarayıcı "geri git" sanmasın */
  overscroll-behavior-x: none;
}
.mv-body, .mv-arabic, .mv-meal-wrap, .te-orta, .te-metin, .te-meal {
  overflow-x: hidden;             /* metin yatayda kayıp parmağı yutmasın */
}

/* ── v61.6 — Mushafta sûre arama ─────────────────────────────────────── */
.mv-ara { display:flex; align-items:center; gap:8px; margin:10px 0 0;
  padding:0 12px; height:46px; border-radius:23px;
  background:var(--bg-card); border:1px solid var(--border-light); }
.mv-ara:focus-within { border-color:var(--gold); }
.mv-ara-ikon { font-size:1rem; opacity:.75; flex:0 0 auto; }
.mv-ara input { flex:1 1 auto; min-width:0; height:44px; border:none; outline:none;
  background:transparent; color:var(--text-primary); font-size:.95rem;
  font-family:inherit; -webkit-appearance:none; }
.mv-ara input::-webkit-search-cancel-button { display:none; }
.mv-ara input::placeholder { color:var(--text-muted); }
.mv-ara-x { flex:0 0 auto; width:30px; height:30px; border-radius:50%; cursor:pointer;
  border:none; background:rgba(212,175,55,.18); color:var(--gold-light); font-size:.8rem; }

.mv-ara-sonuc { display:none; margin-top:8px; max-height:300px; overflow-y:auto;
  -webkit-overflow-scrolling:touch; border-radius:14px;
  background:var(--bg-card); border:1px solid var(--border-light); }
.mv-ara-sonuc.acik { display:block; }
.mv-ara-sat { display:flex; align-items:center; gap:10px; width:100%; cursor:pointer;
  padding:11px 13px; background:transparent; border:none;
  border-bottom:1px solid var(--border-light); text-align:left; font-family:inherit; }
.mv-ara-sat:last-child { border-bottom:none; }
.mv-ara-sat:active { background:rgba(212,175,55,.14); }
.mv-ara-no { flex:0 0 auto; min-width:28px; height:28px; line-height:28px; text-align:center;
  border-radius:50%; background:rgba(212,175,55,.16); color:var(--gold-light);
  font-size:.75rem; font-weight:700; }
.mv-ara-ad { flex:1 1 auto; color:var(--text-primary); font-size:.92rem; }
.mv-ara-sy { flex:0 0 auto; color:var(--gold); font-size:.78rem; font-weight:600; }
.mv-ara-sat.sayfa .mv-ara-ad { color:var(--gold-light); font-weight:600; }
.mv-ara-yok { padding:14px 13px; color:var(--text-muted); font-size:.86rem; text-align:center; }

/* ── v61.7 — İlk açılış konum sihirbazı ──────────────────────────────── */
.kn-kok { position:fixed; inset:0; z-index:12000; display:flex;
  align-items:center; justify-content:center; padding:16px;
  background:rgba(6,8,14,.78); backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px); }
.kn-kart { width:100%; max-width:420px; max-height:92vh; overflow-y:auto;
  -webkit-overflow-scrolling:touch; border-radius:20px; padding:22px 18px 16px;
  background:var(--bg-card); border:1px solid rgba(212,175,55,.35);
  box-shadow:0 18px 50px rgba(0,0,0,.55); text-align:center; }
.kn-rozet { width:56px; height:56px; line-height:56px; margin:0 auto 10px;
  border-radius:50%; background:rgba(212,175,55,.16); font-size:1.6rem; }
.kn-kart h3 { margin:0 0 6px; color:var(--gold-light); font-size:1.15rem; }
.kn-alt { margin:0 0 16px; color:var(--text-muted); font-size:.86rem; line-height:1.5; }

.kn-gps { width:100%; height:50px; border-radius:25px; border:none; cursor:pointer;
  background:var(--gold); color:#1a0e05; font-size:.95rem; font-weight:700;
  font-family:inherit; }
.kn-gps:disabled { opacity:.5; }
.kn-durum { min-height:18px; margin:8px 0 0; font-size:.8rem; color:var(--text-muted); }
.kn-durum.bekle { color:var(--gold-light); }
.kn-durum.uyari { color:#e0a355; }

.kn-ayrac { display:flex; align-items:center; gap:10px; margin:16px 0 12px;
  color:var(--text-muted); font-size:.76rem; }
.kn-ayrac::before, .kn-ayrac::after { content:''; flex:1 1 auto; height:1px;
  background:var(--border-light); }

.kn-ara { display:flex; align-items:center; gap:8px; padding:0 12px; height:46px;
  border-radius:23px; background:var(--bg-deep, rgba(0,0,0,.25));
  border:1px solid var(--border-light); }
.kn-ara:focus-within { border-color:var(--gold); }
.kn-ara span { opacity:.75; flex:0 0 auto; }
.kn-ara input { flex:1 1 auto; min-width:0; height:44px; border:none; outline:none;
  background:transparent; color:var(--text-primary); font-size:.92rem;
  font-family:inherit; -webkit-appearance:none; }
.kn-ara input::-webkit-search-cancel-button { display:none; }

.kn-liste { margin-top:10px; max-height:230px; overflow-y:auto;
  -webkit-overflow-scrolling:touch; border-radius:14px;
  border:1px solid var(--border-light); text-align:left; }
.kn-baslik { padding:9px 13px; color:var(--gold); font-size:.72rem; font-weight:700;
  letter-spacing:.4px; border-bottom:1px solid var(--border-light); }
.kn-sat { display:flex; align-items:baseline; gap:8px; width:100%; cursor:pointer;
  padding:11px 13px; background:transparent; border:none; text-align:left;
  border-bottom:1px solid var(--border-light); font-family:inherit; }
.kn-sat:last-child { border-bottom:none; }
.kn-sat:active { background:rgba(212,175,55,.14); }
.kn-ilce { flex:1 1 auto; color:var(--text-primary); font-size:.92rem; }
.kn-il { flex:0 0 auto; color:var(--text-muted); font-size:.76rem; }
.kn-yok { padding:16px 13px; color:var(--text-muted); font-size:.84rem; text-align:center; }

.kn-sonra { margin-top:12px; padding:10px 16px; border:none; background:transparent;
  color:var(--text-muted); font-size:.82rem; cursor:pointer;
  text-decoration:underline; font-family:inherit; }

/* ── v63.9 — Günün Âyeti kartı ────────────────────────────────────────
   Başlık üstte sabit, metin aşağı doğru akar ve kart âyetin boyuna göre
   kendini ayarlar. (v61.9'daki sabit yükseklik, Arapça satırı kalkınca
   kısa âyetlerde büyük boşluk bırakıyordu.) */
.daily-hadis-card, .warm-home .daily-hadis-card {
  display: flex; flex-direction: column; justify-content: flex-start;
  min-height: 0;
  padding-bottom: 14px;
  flex: 0 0 auto;          /* kap içinde uzayıp boşluk bırakmasın */
}
.daily-hadis-card > * { flex: 0 0 auto; }   /* metin sıkışıp kırpılmasın */

/* ── v62.1 — Kuran Dinle: mod seçici, âyet kutusu, meal okuma hızı ──── */
.dn-mod { display:flex; gap:6px; justify-content:center; margin:8px 0 10px; }
.dn-mod button { flex:1 1 0; min-width:0; padding:9px 6px; border-radius:18px; cursor:pointer;
  border:1px solid rgba(212,175,55,.4); background:transparent;
  color:var(--gold-light); font-size:.78rem; font-family:inherit; white-space:nowrap; }
.dn-mod button.on { background:var(--gold); color:#1a0e05; border-color:var(--gold); font-weight:700; }

.dn-ayet-kutu { margin:10px 0 12px; padding:12px 14px; border-radius:14px;
  background:rgba(0,0,0,.18); border:1px solid var(--border-light);
  min-height:118px; display:flex; flex-direction:column; justify-content:center; }
.dn-ayet-ust { display:flex; align-items:center; justify-content:space-between; gap:8px;
  color:var(--gold); font-size:.78rem; font-weight:700; margin-bottom:7px; }
.dn-ayet-sayac { color:var(--text-muted); font-weight:600; font-size:.72rem; }
.dn-ayet-meal { color:var(--text-primary); font-size:.95rem; line-height:1.55; }
.dn-ayet-bos { color:var(--text-muted); font-size:.86rem; text-align:center; }

.dn-hiz-satir { display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin:10px 0 6px; color:var(--text-muted); font-size:.8rem; }
.dn-hiz { display:flex; gap:6px; }
.dn-hiz button { padding:7px 12px; border-radius:16px; cursor:pointer; font-family:inherit;
  border:1px solid rgba(212,175,55,.4); background:transparent;
  color:var(--gold-light); font-size:.76rem; }
.dn-hiz button.on { background:var(--gold); color:#1a0e05; border-color:var(--gold); font-weight:700; }
.dn-not { margin:4px 0 12px; padding:10px 12px; border-radius:12px;
  background:rgba(212,175,55,.08); border:1px solid rgba(212,175,55,.22);
  color:var(--text-muted); font-size:.76rem; line-height:1.5; }

/* ── v62.2 — Kuran Oku: hafız sesi + ilerleme şeridi ─────────────────── */
.mv-ses { display:flex; align-items:center; gap:8px; margin:8px 0 10px; }
.mv-play { flex:1 1 auto; height:44px; border-radius:22px; border:none; cursor:pointer;
  background:var(--gold-gradient); color:#1a0e05; font-size:.9rem; font-weight:700;
  font-family:inherit; }
.mv-ses .mv-qari { flex:0 1 46%; min-width:0; height:44px; border-radius:22px; padding:0 12px;
  background:var(--bg-card); color:var(--text-primary); font-family:inherit; font-size:.8rem;
  border:1px solid var(--border-light); }

.mv-ilerleme { margin:0 0 10px; padding:11px 13px; border-radius:14px;
  background:var(--bg-card); border:1px solid var(--border-light); }
.mv-il-ust { display:flex; align-items:center; justify-content:space-between; gap:8px;
  color:var(--text-muted); font-size:.78rem; margin-bottom:8px; }
.mv-il-ust b { color:var(--gold-light); font-size:.86rem; }
.mv-il-cubuk { height:7px; border-radius:4px; overflow:hidden;
  background:rgba(255,255,255,.09); }
.mv-il-dolu { height:100%; border-radius:4px; background:var(--gold-gradient);
  transition:width .35s ease; }
.mv-il-btn { width:100%; margin-top:9px; padding:9px 10px; border-radius:12px; cursor:pointer;
  border:1px solid rgba(212,175,55,.4); background:transparent;
  color:var(--gold-light); font-size:.78rem; font-family:inherit; }
.mv-il-btn:active { background:rgba(212,175,55,.14); }

/* Okunan âyet vurgusu — tam ekranda da */
.te-metin .mv-ayah.okunuyor { background:none; }
.te-m-ayet.okunuyor { background:rgba(212,175,55,.14); border-radius:8px;
  padding:6px 8px; margin:-6px -8px 7px; }

/* ── v62.5 — Okurken vurgu: kelime kelime ilerler, satıra TAŞMAZ ──────
   Arka plan kelimelerin üstünde ve yüksekliği 1.3em'e sabit; satır
   yüksekliği 2.25em olduğu için üst/alt satıra fiziksel olarak taşamaz. */
.mv-ayah.okunuyor, .te-metin .mv-ayah.okunuyor {
  background: none !important;
  box-shadow: none !important;
}
.mv-ayah.okunuyor .mv-w {
  background-image: linear-gradient(rgba(212,175,55,.13), rgba(212,175,55,.13));
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 1.3em;
  border-radius: 3px;
}
.mv-ayah.okunuyor .mv-w.gecti {
  background-image: linear-gradient(rgba(212,175,55,.40), rgba(212,175,55,.40));
}
body.green-theme .mv-ayah.okunuyor .mv-w {
  background-image: linear-gradient(rgba(200,162,90,.13), rgba(200,162,90,.13));
}
body.green-theme .mv-ayah.okunuyor .mv-w.gecti {
  background-image: linear-gradient(rgba(200,162,90,.42), rgba(200,162,90,.42));
}
.te-kok.kagit .te-metin .mv-ayah.okunuyor .mv-w {
  background-image: linear-gradient(rgba(160,130,45,.14), rgba(160,130,45,.14));
}
.te-kok.kagit .te-metin .mv-ayah.okunuyor .mv-w.gecti {
  background-image: linear-gradient(rgba(160,130,45,.40), rgba(160,130,45,.40));
}

/* Meal tarafında normal kutu vurgusu kalsın */
.mv-meal.okunuyor, .te-m-ayet.okunuyor { background-size:auto !important; }

/* Okunan sûrenin adı — okuma alanının üstünde sabit durur */
.mv-sure-serit {
  position: sticky; top: 0; z-index: 5;
  margin: 0 0 8px; padding: 9px 12px;
  border-radius: 0 0 12px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-light); border-top: none;
  color: var(--gold-light); font-size: .86rem; font-weight: 700;
  text-align: center;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.te-baslik { position: sticky; top: -14px; z-index: 5; background: inherit; }

/* Ses çubuğu */
.mv-ses { display:flex; align-items:center; gap:8px; margin:8px 0 6px; }
.mv-ses-yan { flex:0 0 auto; width:44px; height:44px; border-radius:22px; cursor:pointer;
  border:1px solid var(--border-light); background:var(--bg-card);
  color:var(--gold-light); font-size:1rem; }
.mv-ses2 { display:flex; align-items:center; gap:8px; margin:0 0 10px; }
.mv-ses2 > span { flex:0 0 auto; min-width:34px; color:var(--text-muted);
  font-size:.72rem; font-variant-numeric:tabular-nums; }
.mv-cizgi { flex:1 1 auto; min-width:0; height:26px; -webkit-appearance:none;
  appearance:none; background:transparent; }
.mv-cizgi::-webkit-slider-runnable-track { height:5px; border-radius:3px;
  background:rgba(255,255,255,.14); }
.mv-cizgi::-webkit-slider-thumb { -webkit-appearance:none; width:15px; height:15px;
  margin-top:-5px; border-radius:50%; background:var(--gold); border:none; }
.mv-cizgi::-moz-range-track { height:5px; border-radius:3px; background:rgba(255,255,255,.14); }
.mv-cizgi::-moz-range-thumb { width:15px; height:15px; border:none; border-radius:50%; background:var(--gold); }
.mv-ses2 .mv-qari { flex:0 1 38%; min-width:0; height:36px; border-radius:18px; padding:0 10px;
  background:var(--bg-card); color:var(--text-primary); font-family:inherit; font-size:.74rem;
  border:1px solid var(--border-light); }

/* Tam ekran süre satırı */
.te-sure { display:flex; align-items:center; justify-content:center; gap:8px;
  padding:0 14px 6px; color:var(--text-muted); font-size:.78rem;
  font-variant-numeric:tabular-nums; transition:opacity .2s, transform .2s; }
.te-sure-ayrac { opacity:.5; }
.te-mini { width:38px; height:34px; border-radius:17px; cursor:pointer;
  border:1px solid rgba(212,175,55,.35); background:transparent;
  color:var(--gold-light); font-size:.85rem; }
.te-kok.cubuksuz .te-sure { opacity:0; transform:translateY(100%); pointer-events:none; }
.te-kok.kagit .te-mini { color:#5f4c18; border-color:#b39a5c; }
.te-kok.kagit .te-sure { color:#6b5a2a; }
.dn-ses-sec { max-width:62%; height:36px; border-radius:18px; padding:0 10px; font-size:.76rem; }
.mv-tts-not { margin:-4px 0 10px; padding:8px 11px; border-radius:11px;
  background:rgba(212,175,55,.07); border:1px solid var(--border-light);
  color:var(--text-muted); font-size:.73rem; line-height:1.45; }

/* ══════════ TARİH ÇEVİRİCİ ══════════ */
.cev-blok{
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 18px;
  padding: 18px 16px;
  margin-bottom: 16px;
}
.cev-baslik{
  font-size: 1.05rem; font-weight: 700;
  color: var(--gold-light);
  margin-bottom: 14px; text-align: center;
}
.cev-satir{
  display: flex; gap: 8px; align-items: center;
  margin-bottom: 12px; flex-wrap: wrap;
}
.cev-in{
  flex: 1 1 70px; min-width: 0;
  background: rgba(0,0,0,.28);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 12px 10px;
  color: var(--text-main);
  font-size: 1.05rem; font-weight: 600;
  text-align: center;
  font-family: inherit;
  -webkit-appearance: none; appearance: none;
}
.cev-in:focus{ outline: none; border-color: var(--border-gold); }
.cev-ay{
  flex: 2 1 130px;
  text-align: center;
  background-image: none;
  padding-right: 10px;
}
.cev-ay option{ background: var(--bg-main); color: var(--text-main); }
.cev-btn{
  width: 100%;
  background: var(--gold-gradient);
  color: #2a1a08;
  border: none; border-radius: 14px;
  padding: 13px 16px;
  font-size: 1rem; font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  margin-bottom: 8px;
}
.cev-btn:active{ transform: scale(.985); }
.cev-btn-ikincil{
  background: transparent;
  color: var(--gold-light);
  border: 1px solid var(--border-gold);
}
.cev-sonuc{
  margin-top: 12px; padding: 16px 12px;
  background: rgba(0,0,0,.24);
  border: 1px solid var(--border-gold);
  border-radius: 14px;
  text-align: center;
}
.cev-sonuc-ust{
  font-size: .82rem; letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.cev-sonuc-buyuk{
  font-size: 1.45rem; font-weight: 800;
  color: var(--gold-light);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.cev-sonuc-alt{
  margin-top: 5px;
  font-size: .95rem;
  color: var(--text-sub);
}
.cev-uyari{
  margin-top: 12px; padding: 12px;
  background: rgba(0,0,0,.2);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  color: var(--text-sub);
  font-size: .92rem; text-align: center;
}
@media (max-width: 340px){
  .cev-satir{ gap: 6px; }
  .cev-in{ padding: 11px 6px; font-size: .98rem; }
  .cev-sonuc-buyuk{ font-size: 1.25rem; }
}

/* ══════════ KIBLE İNCE AYARI ══════════ */
.kible-ofset{
  margin-top: 14px; padding: 14px 14px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 16px;
}
.kible-ofset-ust{
  display: flex; justify-content: space-between; align-items: center;
  font-size: .95rem; font-weight: 700;
  color: var(--gold-light);
  margin-bottom: 10px; gap: 10px;
}
.kible-ofset-deger{
  min-width: 56px; text-align: center;
  background: rgba(0,0,0,.28);
  border: 1px solid var(--border-gold);
  border-radius: 10px;
  padding: 4px 8px;
  font-variant-numeric: tabular-nums;
  color: var(--text-main);
}
#kible-ofset-slider{ width: 100%; margin: 2px 0 8px; }
.kible-ofset-alt{
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; font-size: .8rem; color: var(--text-muted);
}
.kible-ofset-sifirla{
  background: transparent;
  border: 1px solid var(--border-gold);
  color: var(--gold-light);
  border-radius: 10px;
  padding: 6px 12px;
  font-size: .82rem; font-weight: 600;
  font-family: inherit; cursor: pointer;
}
.kible-ofset-sifirla:active{ transform: scale(.97); }
.kible-ofset-not{
  margin-top: 9px;
  font-size: .82rem; line-height: 1.45;
  color: var(--text-muted);
}

/* Pusula başlat düğmesi — izin bekleyen durumda dikkat çeksin */
#enable-compass-btn.vurgu{
  animation: hvPusulaNabiz 1.9s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(212,175,55,.55);
}
@keyframes hvPusulaNabiz{
  0%   { box-shadow: 0 0 0 0 rgba(212,175,55,.55); }
  70%  { box-shadow: 0 0 0 14px rgba(212,175,55,0); }
  100% { box-shadow: 0 0 0 0 rgba(212,175,55,0); }
}
@media (prefers-reduced-motion: reduce){
  #enable-compass-btn.vurgu{ animation: none; }
}

/* Kıbleye çok az kaldı durumu — tam hizalanma ile normal yön arası */
.qibla-pill.yaklasti{
  background: linear-gradient(180deg, rgba(212,175,55,.30), rgba(212,175,55,.16));
  border-color: var(--border-gold);
  color: var(--text-main);
}

/* ══════════ PUSULA KADRAN ÇİZGİLERİ ══════════ */
.cp-ticks{ position:absolute; inset:0; border-radius:50%; pointer-events:none; }
.cp-ticks .cp-tick{
  position:absolute; left:50%; top:0;
  width:1px; height:6px;
  margin-left:-.5px;
  transform-origin: 50% 124px;      /* kadran yarıçapı (248px iç çap) */
  background: rgba(212,175,55,.34);
}
.cp-ticks .cp-tick.orta{ height:9px; width:1.5px; margin-left:-.75px; background: rgba(212,175,55,.5); }
.cp-ticks .cp-tick.buyuk{ height:13px; width:2px; margin-left:-1px; background: rgba(212,175,55,.8); }
.cp-ticks .cp-num{
  position:absolute; left:50%; top:16px;
  width:0; height:0;
  transform-origin: 50% 108px;
  display:block;
}
.cp-ticks .cp-num b{
  position:absolute; left:50%; top:50%;
  transform-origin:center;
  translate:-50% -50%;
  font-size:.58rem; font-weight:700;
  color: rgba(212,175,55,.62);
  letter-spacing:.02em;
  white-space:nowrap;
}
/* 240px'lik küçük kadran varyantı için ölçek */
@media (max-width: 360px){
  .cp-ticks .cp-tick{ transform-origin: 50% 104px; }
  .cp-ticks .cp-num{ transform-origin: 50% calc(var(--cp-r) - 26px); }
}

/* ══════════ PUSULA — BÜYÜTÜLMÜŞ VE ÖLÇEKLENEBİLİR KADRAN ══════════
   Kadran artık ekran genişliğine göre büyür. Çizgilerin dönme merkezi
   de aynı değişkenden hesaplanır, böylece her boyutta hizalı kalır. */
.compass-container{
  --cp-size: min(86vw, 330px);
  --cp-ic: 16px;                                   /* iç kadran kenar boşluğu */
  --cp-r: calc((var(--cp-size) - var(--cp-ic) * 2) / 2);
  width: var(--cp-size);
  height: var(--cp-size);
  margin: 88px auto 22px;                          /* üstte Kâbe hedefi için yer */
}
.compass-inner-dial{ inset: var(--cp-ic); }

.cp-ticks .cp-tick{ transform-origin: 50% var(--cp-r); }
.cp-ticks .cp-num{ transform-origin: 50% calc(var(--cp-r) - 30px); }
.cp-ticks .cp-tick        { height: 7px; }
.cp-ticks .cp-tick.orta   { height: 11px; }
.cp-ticks .cp-tick.buyuk  { height: 16px; }
.cp-ticks .cp-num b{ font-size: .66rem; }

/* Yön harfleri biraz büyüsün, çizgilerle çakışmasın */
.compass-point{ font-size: 1.05rem; }
.compass-point.n{ font-size: 1.25rem; }
.compass-point.n { top: 18px; }
.compass-point.s { bottom: 18px; }
.compass-point.e { right: 18px; }
.compass-point.w { left: 18px; }

/* Hedef Kâbe — daha büyük ve kadranın TAMAMEN dışına taşınmış
   (eskiden rozet kadranın üstüne biniyor, K harfini kapatıyordu) */
.fixed-top-qibla-target{ top: -84px; }
.qibla-target-kaaba{ font-size: 3.1rem; line-height: 1; }
.qibla-target-badge{ font-size: .68rem; margin-top: 2px; }

/* İbre kadranla birlikte büyüsün */
.dynamic-compass-needle .needle-stem{ height: calc(var(--cp-r) * 0.74); }

@media (max-width: 340px){
  .compass-container{ --cp-size: min(90vw, 280px); margin-top: 76px; }
  .qibla-target-kaaba{ font-size: 2.6rem; }
  .fixed-top-qibla-target{ top: -72px; }
  .cp-ticks .cp-num b{ font-size: .6rem; }
}

/* ══════════ TAM KIBLE — İBRE IŞILTISI ══════════
   İbre Kâbe hedefine oturduğunda çubuk beyaz-altın parlar ve
   üzerinden bir ışık dalgası geçer. */
.dynamic-compass-needle.kible-tam .needle-stem{
  background: linear-gradient(180deg, #ffffff 0%, #fff6d0 25%, #ffd76a 60%, rgba(255,215,106,0) 100%);
  box-shadow: 0 0 22px rgba(255,235,170,.95), 0 0 44px rgba(212,175,55,.7);
  animation: hvIbreIsilti 1.25s ease-in-out infinite;
}
.dynamic-compass-needle.kible-tam .needle-stem::after{
  content: '';
  position: absolute; left: 50%; top: 0;
  width: 13px; height: 100%;
  margin-left: -6.5px;
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.95) 50%, rgba(255,255,255,0) 100%);
  filter: blur(2.5px);
  animation: hvIbreDalga 1.25s linear infinite;
  pointer-events: none;
}
.dynamic-compass-needle .needle-stem{ position: relative; }

.dynamic-compass-needle.kible-tam .needle-gold-head{
  color: #ffffff;
  filter: drop-shadow(0 0 16px #fff3c4) drop-shadow(0 0 30px var(--gold));
}
.dynamic-compass-needle.kible-tam .needle-pivot{
  box-shadow: 0 0 16px rgba(255,240,190,.95);
}

@keyframes hvIbreIsilti{
  0%, 100% { box-shadow: 0 0 18px rgba(255,235,170,.75), 0 0 34px rgba(212,175,55,.5); }
  50%      { box-shadow: 0 0 30px rgba(255,245,205,1),  0 0 60px rgba(212,175,55,.85); }
}
@keyframes hvIbreDalga{
  0%   { transform: translateY(-100%); opacity: 0; }
  25%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .dynamic-compass-needle.kible-tam .needle-stem{ animation: none; }
  .dynamic-compass-needle.kible-tam .needle-stem::after{ animation: none; opacity: .45; }
}

/* ══════════ KIBLE SAYFASI — TEMAYA UYUMLU KADRAN ══════════
   Kadran rengi sabit yeşildi; artık aktif temanın tonlarını kullanıyor
   (kehribar temada bakır, yeşil temada çam). */
.compass-dial-ring{
  background: radial-gradient(circle at 50% 42%, var(--t2) 0%, var(--t3) 55%, var(--t4) 100%) !important;
  border-color: var(--border-gold) !important;
  box-shadow: 0 0 26px rgba(0,0,0,.55), inset 0 0 22px rgba(0,0,0,.55),
              inset 0 0 44px rgba(212,175,55,.10) !important;
}
.compass-dial-ring::before{ border-color: var(--border-light) !important; }
.compass-dial-ring::after { border-color: rgba(212,175,55,.18) !important; }


/* Hedef rozeti ve "tam kıble" rozeti de temaya bağlansın
   (ikisi de sabit yeşildi; kehribar temada yamalı duruyordu) */
.qibla-target-badge{
  background: var(--t4) !important;
  color: var(--gold-light) !important;
  border-color: var(--border-gold) !important;
}
.qibla-pill.aligned{
  background: var(--gold-gradient) !important;
  border: 2px solid #fff3c4 !important;
  color: #2a1a08 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
  box-shadow: 0 0 28px rgba(212,175,55,.85), 0 4px 16px rgba(0,0,0,.45) !important;
}
@keyframes pulseAligned{
  0%   { transform: scale(1);    filter: drop-shadow(0 0 10px rgba(212,175,55,.75)); }
  100% { transform: scale(1.05); filter: drop-shadow(0 0 26px rgba(255,240,190,.95)); }
}

/* ══════════ KIBLE SAYFASI — CAMİ ARKA PLANI ══════════
   Uygulama açılışındaki cami görseli kıble sayfasında da görünsün.
   Tema tonuyla harmanlanır, kadranın okunmasını engellemez. */
#page-qibla .hero-frame-box{
  position: relative;
  background:
    radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--t2) 78%, transparent) 0%,
                                        color-mix(in srgb, var(--t4) 92%, transparent) 88%);
}
#page-qibla .hero-frame-box::before{
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background-image: url('bg-mosque.jpg');
  background-size: cover;
  background-position: center 18%;
  opacity: .40;
  z-index: 0;
  pointer-events: none;
}
/* Cami görselinin üstüne tema perdesi — kontrast korunsun */
#page-qibla .hero-frame-box::after{
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--t3) 42%, transparent) 0%,
    color-mix(in srgb, var(--t4) 72%, transparent) 100%);
  z-index: 0;
  pointer-events: none;
}
/* Tüm içerik bu iki katmanın üstünde kalsın */
#page-qibla .hero-frame-box > *{ position: relative; z-index: 2; }

/* Yön harfleri (K/D/G/B) derece çizgilerinin üstünde dursun —
   çizgiler harflerin üzerinden geçip okunmasını zorlaştırıyordu */
.cp-ticks{ z-index: 1; }
.compass-point{ z-index: 3; }
.compass-point.n{
  text-shadow: 0 0 8px rgba(0,0,0,.85), 0 1px 3px rgba(0,0,0,.9);
}
/* İbre en üstte kalsın ama rakamları tamamen yutmasın */
.dynamic-compass-needle{ z-index: 6; }

/* Kadran artık dönmüyor → tepedeki K, "HEDEF KÂBE" hedefiyle hizalı
   sabit bir nişangâh gibi çalışır. Belirginleştirelim. */
.compass-point.n{
  color: #ff4d4d !important;
  font-size: 1.45rem !important;
  font-weight: 900 !important;
  text-shadow: 0 0 10px rgba(255,77,77,.65), 0 2px 4px rgba(0,0,0,.9);
}
.compass-inner-dial{ transition: none !important; }

/* ══════════ GÜNÜN ÂYETİ — BAŞLIK ÜSTTE SABİT ══════════
   Kart içeriği dikeyde ortalanıyordu; kısa/uzun âyetlerde başlık aşağı
   yukarı oynuyordu. Artık başlık üstte sabit, metin aşağı doğru akıyor. */
.daily-hadis-card,
.warm-home .daily-hadis-card{
  justify-content: flex-start !important;
}
.daily-hadis-card .verse-card-title{ margin-bottom: 12px; }
/* Kaynak satırı metnin hemen altında, paylaş düğmesi kartın en altında */
.daily-hadis-card #daily-verse-source{ margin-top: 10px; }
.daily-hadis-card .mini-share-btn{ margin-top: auto; align-self: flex-end; }

/* ══════════ TAM KIBLE — HALKA IŞILTISI ══════════ */
.compass-dial-ring.kible-tam{
  border-color: #fff3c4 !important;
  box-shadow:
    0 0 0 2px rgba(255,243,196,.55),
    0 0 26px rgba(255,238,180,.95),
    0 0 60px rgba(212,175,55,.75),
    inset 0 0 30px rgba(212,175,55,.30) !important;
  animation: hvHalkaNabiz 1.35s ease-in-out infinite;
}
@keyframes hvHalkaNabiz{
  0%,100%{ box-shadow: 0 0 0 2px rgba(255,243,196,.45),
                       0 0 20px rgba(255,238,180,.75),
                       0 0 44px rgba(212,175,55,.55),
                       inset 0 0 24px rgba(212,175,55,.22); }
  50%    { box-shadow: 0 0 0 3px rgba(255,243,196,.75),
                       0 0 34px rgba(255,245,210,1),
                       0 0 78px rgba(212,175,55,.9),
                       inset 0 0 38px rgba(212,175,55,.38); }
}
@media (prefers-reduced-motion: reduce){
  .compass-dial-ring.kible-tam{ animation: none; }
}


/* Tam kıblede ibrenin ucu K harfinin üzerine geliyordu.
   K'yi halkanın hemen içine, ibre ucunun üstüne al. */
.compass-point.n{ top: -6px !important; }
.cp-ticks .cp-tick.buyuk{ height: 14px; }

/* İbrenin ucu, tepedeki K harfinin altında kalsın (üstünü kapatmasın) */
.dynamic-compass-needle{ padding-top: 46px !important; }
.dynamic-compass-needle .needle-stem{ height: calc(var(--cp-r) * 0.66); }

/* ══════════ KIBLE İZNİ — BİLDİRİM KUTUSU ══════════ */
#loading-screen{ display: none !important; }

/* Tam ekran karartma + ortada pencere */
.kible-izin-katman{
  position: fixed; inset: 0; z-index: 9998;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(0,0,0,.72);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .25s ease;
}
.kible-izin-katman.acik{ opacity: 1; }

.kible-izin-bildirim{
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  width: 100%; max-width: 340px; padding: 22px 18px;
  border-radius: 20px;
  border: 1.8px solid var(--border-gold);
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--t2) 96%, transparent),
              color-mix(in srgb, var(--t4) 98%, transparent));
  box-shadow: 0 18px 44px rgba(0,0,0,.7), 0 0 30px rgba(212,175,55,.3);
  text-align: center;
  transform: scale(.94); transition: transform .25s ease;
}
.kible-izin-katman.acik .kible-izin-bildirim{ transform: scale(1); }
.kible-izin-bildirim .kib-ikon{ font-size: 3rem; line-height: 1; flex: 1 1 100%; }
.kible-izin-bildirim .kib-metin{ flex: 1 1 100%; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.kible-izin-bildirim .kib-metin b{ color: var(--gold-light); font-size: 1.08rem; }
.kible-izin-bildirim .kib-metin span{ color: var(--text-sub); font-size: .88rem; line-height: 1.5; }
.kible-izin-bildirim .kib-dugmeler{ display: flex; flex-direction: column; gap: 9px; flex: 1 1 100%; margin-top: 4px; }
.kible-izin-bildirim button{
  width: 100%;
  padding: 15px 12px; border-radius: 14px;
  font-family: inherit; font-size: 1rem; font-weight: 800;
  cursor: pointer; border: none;
}
.kible-izin-bildirim .kib-evet{
  background: var(--gold-gradient); color: #2a1a08;
  box-shadow: 0 0 16px rgba(212,175,55,.45);
}
.kible-izin-bildirim .kib-hayir{
  background: transparent; color: var(--text-muted);
  border: 1px solid var(--border-light);
}
.kible-izin-bildirim button:active{ transform: scale(.97); }
@media (max-width: 340px){
  .kible-izin-bildirim{ padding: 12px; }
  .kible-izin-bildirim .kib-metin span{ font-size: .76rem; }
}

/* ══════════ 0'DAN DUA ÖĞREN ══════════ */
#sifirdan-root { --sd-olcek: 1; }
.sd-ust { display:flex; align-items:center; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.sd-ust .hub-back-btn { margin:0; }
.sd-liste-btn { background:transparent; color:var(--gold-light); border:1px solid var(--border-gold); border-radius:30px;
  padding:8px 14px; font-size:.84rem; font-weight:700; cursor:pointer; font-family:inherit; white-space:nowrap; }
.sd-liste-btn.on { background:rgba(212,175,55,.14); }
.sd-sayac { margin-left:auto; font-size:.92rem; font-weight:800; color:var(--gold-light); letter-spacing:.3px; white-space:nowrap; }
.sd-chips { display:flex; gap:6px; overflow-x:auto; padding-bottom:6px; margin-bottom:8px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.sd-chips::-webkit-scrollbar { display:none; }
.sd-chip { flex:0 0 auto; background:var(--bg-card); border:1px solid var(--border-light); color:var(--text-sub); border-radius:30px;
  padding:7px 12px; font-size:.8rem; font-weight:700; cursor:pointer; font-family:inherit; white-space:nowrap; }
.sd-chip span { opacity:.7; font-weight:600; margin-left:2px; }
.sd-chip.on { border-color:var(--gold-light); color:var(--gold-light); background:rgba(212,175,55,.12); }
.sd-kart { background:var(--bg-card); border:1.2px solid var(--border-gold); border-radius:var(--radius-lg);
  padding:16px 14px 10px; box-shadow:var(--shadow-card); touch-action:pan-y; user-select:none; -webkit-user-select:none; }
.sd-baslik { text-align:center; margin-bottom:12px; padding-bottom:10px; border-bottom:1px dashed var(--border-light); }
.sd-ad { font-size:1.25rem; font-weight:800; color:var(--gold-light); }
.sd-alt-yazi { font-size:.82rem; color:var(--text-muted); margin-top:3px; }
.sd-satirlar { display:flex; flex-direction:column; gap:10px; }
.sd-satir { border:1px solid var(--border-light); border-radius:var(--radius-md); padding:12px 12px 10px;
  background:rgba(255,255,255,.03); transition:background .25s, border-color .25s; }
.sd-satir.sd-besmele { background:rgba(212,175,55,.07); border-color:var(--border-gold); }
.sd-satir.sd-caliyor { border-color:#f2d27a; box-shadow:0 0 0 2px rgba(242,210,122,.22); position:relative; }
.sd-satir.sd-caliyor::before { content:'🔊'; position:absolute; top:6px; left:8px; font-size:.85rem; animation:hvSdNabiz 1s ease-in-out infinite; }
/* Kuran Oku ile aynı: okunan satırda kelimeler hafif altın, hoca okudukça koyu altınla dolar */
.sd-w { border-radius:4px; padding:0 2px; }
.sd-satir.sd-caliyor .sd-w { background-image:linear-gradient(rgba(212,175,55,.13), rgba(212,175,55,.13));
  background-repeat:no-repeat; background-position:center; background-size:100% 1.25em; }
.sd-satir.sd-caliyor .sd-w.gecti { background-image:linear-gradient(rgba(212,175,55,.45), rgba(212,175,55,.45)); }
.sd-w.gecti { background-image:linear-gradient(rgba(212,175,55,.30), rgba(212,175,55,.30)); background-repeat:no-repeat; background-position:center; background-size:100% 1.25em; }
@keyframes hvSdNabiz { 0%,100%{ opacity:.55; transform:scale(1);} 50%{ opacity:1; transform:scale(1.25);} }
.sd-hece-btn { height:40px; border-radius:20px; border:1px solid var(--border-light); background:transparent; color:var(--text-main);
  padding:0 12px; font-size:.82rem; font-weight:700; cursor:pointer; font-family:inherit; white-space:nowrap; }
.sd-hece-btn.on { border-color:var(--gold-light); color:var(--gold-light); background:rgba(212,175,55,.14); }
.sd-hece { display:inline-block; padding:0 2px; }
.sd-hece:nth-child(odd) { color:var(--gold-light); }
.sd-hece-ayrac { opacity:.45; font-weight:400; margin:0 1px; }
.sd-ar { font-family:var(--font-ar); font-size:calc(2.1rem * var(--sd-olcek)); line-height:1.9; color:var(--gold-light);
  direction:rtl; text-align:right; word-spacing:.12em; }
.sd-ok-satir { display:flex; align-items:flex-start; gap:8px; margin-top:6px; }
.sd-no { flex:0 0 auto; min-width:22px; height:22px; border-radius:11px; background:rgba(212,175,55,.18); color:var(--gold-light);
  font-size:.72rem; font-weight:800; display:inline-flex; align-items:center; justify-content:center; margin-top:4px; padding:0 5px; }
.sd-ok { font-size:calc(1.28rem * var(--sd-olcek)); line-height:1.5; color:var(--text-main); font-weight:600; }
.sd-not { margin-top:5px; font-size:.78rem; color:var(--text-muted); font-style:italic; }
.sd-ipucu { text-align:center; font-size:.72rem; color:var(--text-muted); margin-top:12px; opacity:.75; }
.sd-arac { display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap; margin-top:12px; }
.sd-gecis { display:flex; gap:10px; margin-top:8px; padding-bottom:8px; }
.sd-gecis-btn { flex:1; height:48px; border-radius:24px; border:1px solid var(--border-gold); background:var(--bg-card);
  color:var(--gold-light); font-size:1rem; font-weight:800; cursor:pointer; font-family:inherit; box-shadow:var(--shadow-card); }
.sd-gecis-btn:active { transform:scale(.97); }
.sd-gecis-btn:disabled { opacity:.3; cursor:default; transform:none; }
.sd-punto-btn { height:40px; min-width:44px; border-radius:20px; border:1px solid var(--border-light); background:transparent;
  color:var(--text-main); font-size:.95rem; font-weight:800; cursor:pointer; font-family:inherit; }
.sd-punto-deger { font-size:.72rem; color:var(--text-muted); min-width:34px; text-align:center; font-weight:700; }
.sd-ses-btn { height:40px; border-radius:20px; border:1px solid var(--border-gold); background:transparent; color:var(--gold-light);
  padding:0 14px; font-size:.86rem; font-weight:700; cursor:pointer; font-family:inherit; white-space:nowrap; }
.sd-ses-btn.on { background:rgba(212,175,55,.16); }
.sd-hata { text-align:center; color:var(--text-sub); font-size:.9rem; line-height:1.6; padding:16px 6px; }
.sd-hata .gold-outline-btn { margin-top:10px; }
.sd-liste-baslik { font-size:.95rem; font-weight:800; color:var(--gold-light); margin:14px 0 8px; display:flex; align-items:center; gap:6px; }
.sd-liste-baslik span { font-size:.75rem; color:var(--text-muted); font-weight:700; }
.sd-liste { display:flex; flex-direction:column; gap:6px; }
.sd-liste-oge { display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:var(--bg-card);
  border:1px solid var(--border-light); border-radius:var(--radius-md); padding:10px 12px; cursor:pointer; font-family:inherit; color:var(--text-main); }
.sd-liste-oge.simdiki { border-color:var(--gold-light); }
.sd-liste-oge.ogrenildi { border-color:rgba(60,180,110,.55); }
.sd-liste-no { flex:0 0 auto; min-width:26px; height:26px; border-radius:13px; background:rgba(212,175,55,.14); color:var(--gold-light);
  font-size:.74rem; font-weight:800; display:inline-flex; align-items:center; justify-content:center; padding:0 5px; }
.sd-liste-metin { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.sd-liste-metin b { font-size:.92rem; font-weight:700; }
.sd-liste-metin small { font-size:.74rem; color:var(--text-muted); }
.sd-liste-tik { flex:0 0 auto; color:#3cb46e; font-weight:900; font-size:1.05rem; min-width:18px; text-align:center; }
@media (max-width: 380px) {
  .sd-ar { font-size:calc(1.85rem * var(--sd-olcek)); }
  .sd-ok { font-size:calc(1.15rem * var(--sd-olcek)); }
  .sd-ses-btn { padding:0 10px; font-size:.8rem; }
}


/* ══════════ v64.8 — Ek vakitler şeridi, yakın cami ══════════ */
.ek-vakit-kart { background:var(--bg-card); border:1.2px solid var(--border-gold); border-radius:var(--radius-md); padding:10px 12px; margin:10px 0 12px; box-shadow:var(--shadow-card); }
.ek-vakit-ust { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; flex-wrap:wrap; }
.ek-vakit-baslik { font-size:.86rem; font-weight:800; color:var(--gold-light); }
.ek-vakit-baslik small { font-weight:600; color:var(--text-muted); font-size:.72rem; }
.ek-vakit-paylas { background:transparent; border:1px solid var(--border-gold); color:var(--gold-light); border-radius:30px; padding:6px 12px; font-size:.78rem; font-weight:700; cursor:pointer; font-family:inherit; white-space:nowrap; }
.ek-vakit-paylas:active { transform:scale(.97); }
.ek-vakit-satir { display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:6px 0; border-top:1px dashed var(--border-light); font-size:.84rem; }
.ek-vakit-satir:first-child { border-top:none; }
.ek-vakit-satir b { color:var(--text-main); font-weight:700; text-align:right; font-variant-numeric:tabular-nums; }
.ek-vakit-ad { color:var(--text-sub); font-weight:600; }
.ek-vakit-satir.kerahet b { color:#e8a08a; font-size:.78rem; }
.ek-vakit-satir.bayram { background:rgba(212,175,55,.12); border-radius:8px; padding:8px 8px; border-top:none; }
.ek-vakit-satir.bayram b, .ek-vakit-satir.bayram .ek-vakit-ad { color:var(--gold-light); }
.ek-vakit-satir.kandil { background:rgba(212,175,55,.08); border-radius:8px; padding:8px 8px; border-top:none; }
.ek-vakit-not { font-size:.72rem; color:var(--text-muted); margin-top:6px; line-height:1.45; }
.yakin-cami-btn { display:block; width:100%; margin:12px 0 10px; text-align:center; }
@media (max-width: 380px) { .ek-vakit-satir { flex-direction:column; gap:2px; } .ek-vakit-satir b { text-align:left; } }


/* ══════════ v65.0 — Hac & Umre, Kandil Rehberi ══════════ */
.hac-seg { margin: 10px 0 12px; }
.gece-kart { background:var(--bg-card); border:1.2px solid var(--border-gold); border-radius:var(--radius-md); padding:0 14px; margin-bottom:10px; box-shadow:var(--shadow-card); }
.gece-kart summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:13px 0; font-weight:800; color:var(--gold-light); font-size:.98rem; }
.gece-kart summary::-webkit-details-marker { display:none; }
.gece-kart summary::after { content:'▾'; color:var(--text-muted); margin-left:6px; transition:transform .2s; }
.gece-kart[open] summary::after { transform:rotate(180deg); }
.gece-ad { flex:1; }
.gece-etiket { font-size:.72rem; font-weight:700; color:var(--text-sub); background:rgba(212,175,55,.12); border:1px solid var(--border-light); border-radius:20px; padding:3px 9px; white-space:nowrap; }
.gece-etiket.yakin { background:var(--gold-gradient); color:#1a0e05; border-color:transparent; }
.gece-tarih { font-size:.82rem; color:var(--gold-light); font-weight:700; margin:-4px 0 8px; }
.gece-ne { font-size:.9rem; color:var(--text-main); line-height:1.55; margin-bottom:10px; }
.gece-alt-baslik { font-size:.8rem; font-weight:800; color:var(--gold-light); text-transform:uppercase; letter-spacing:.4px; margin:10px 0 5px; }
.gece-liste { margin:0 0 6px 0; padding-left:20px; font-size:.88rem; line-height:1.55; color:var(--text-main); }
.gece-liste li { margin-bottom:4px; }
.gece-dua { font-size:.88rem; color:var(--text-main); line-height:1.55; font-style:italic; background:rgba(212,175,55,.08); border-radius:10px; padding:9px 11px; }
.gece-hadis { font-size:.86rem; color:var(--text-sub); line-height:1.55; padding-bottom:14px; }

/* ══════════ v65.0 — Büyük Yazı modu ══════════ */
html.hv-buyuk { font-size: 113%; }
html.hv-buyuk .prayer-time { font-size: 1.3rem; }
html.hv-buyuk .prayer-name { font-size: .9rem; }
html.hv-buyuk .hub-title { font-size: .98rem; }
html.hv-buyuk .hub-sub { font-size: .76rem; }
html.hv-buyuk .fc-tr, html.hv-buyuk .fc-ok, html.hv-buyuk .hadis-text, html.hv-buyuk .kandil-desc, html.hv-buyuk .gece-liste, html.hv-buyuk .gece-ne { font-size: 1rem; line-height: 1.6; }
html.hv-buyuk .tab-label { font-size: .7rem; white-space: nowrap; }
html.hv-buyuk .tab-icon { font-size: 1.45rem; }

/* ══════════ v65.0 — GÜNDÜZ TEMASI (açık renk) cilası ══════════
   Değişkenler dosyanın başındaki body.light-theme bloğunda; burada
   sabit renkli parçalar (beyaz yazı, koyu kartlar) gündüze uyarlanır. */
body.light-theme {
  --gold-light: #8a6410;            /* başlık/ikon altını: krem zeminde okunur koyu altın */
  --gold: #a8801c;
  --border-gold: rgba(168,128,28,.55);
  --t1:#f6ead8; --t2:#efe0c8; --t3:#e7d4b6; --t4:#dcc4a0;
  --bg-main:#f4efe4;
  --bg-gradient: linear-gradient(180deg, #efe4d0 0%, #f6f1e6 100%);
}
body.light-theme::before { opacity: .35; }
body.light-theme .hero-frame-box { background: radial-gradient(circle at 50% 22%, rgba(255,252,246,.96) 0%, rgba(247,241,230,.98) 80%); border-color: var(--border-gold); box-shadow: 0 8px 22px rgba(90,60,20,.10); }
body.light-theme .hero-prayer-unified-box { background: linear-gradient(180deg, rgba(255,251,243,.9), rgba(246,238,224,.95)); box-shadow: 0 0 0 1px var(--border-gold) inset; }
body.light-theme .countdown-timer-text { background: none; -webkit-text-fill-color: #3a2410; color:#3a2410; filter:none; text-shadow:none; }
body.light-theme .countdown-target, body.light-theme .countdown-next { color: #6b4a12; }
body.light-theme .countdown-next { background: rgba(168,128,28,.12); border-color: rgba(168,128,28,.35); }
body.light-theme .prayer-card { background: rgba(255,255,255,.85); border: 1px solid rgba(168,128,28,.28); }
body.light-theme .prayer-time { color: #2b1a0a; }
body.light-theme .prayer-name { color: #6b4a12; }
body.light-theme .prayer-card.active { border: 2px solid #a8801c; background: linear-gradient(135deg, rgba(212,175,55,.35), rgba(255,255,255,.9)); box-shadow: 0 0 16px rgba(168,128,28,.35); }
body.light-theme .ip { background: rgba(255,255,255,.85); border-color: rgba(168,128,28,.28); color:#4a3520; }
body.light-theme .ip.remain { background: linear-gradient(135deg, rgba(212,175,55,.32), rgba(255,255,255,.7)); color:#3a2410; }
body.light-theme .hub-card { background: linear-gradient(160deg, rgba(255,255,255,.92), rgba(246,238,224,.96)); border: 1px solid rgba(168,128,28,.32); box-shadow: 0 6px 16px rgba(90,60,20,.08); }
body.light-theme .hub-title { color: #5b3f0c; }
body.light-theme .hub-sub { color: rgba(24,36,33,.6); }
body.light-theme #bottom-nav { background: linear-gradient(180deg, rgba(255,252,246,.98), rgba(243,236,223,.98)); border-top: 1px solid rgba(168,128,28,.35); box-shadow: 0 -4px 18px rgba(90,60,20,.10); }
body.light-theme #bottom-nav .nav-item, body.light-theme #bottom-nav button, body.light-theme #bottom-nav span { color: #4a3520; }
body.light-theme #bottom-nav .active, body.light-theme #bottom-nav .nav-item.active span { color: #8a6410; }
body.light-theme .info-note, body.light-theme .empty-note { background: rgba(168,128,28,.08); color: #4a3520; border-color: rgba(168,128,28,.25); }
body.light-theme .feature-card, body.light-theme .cuma-msg-card, body.light-theme .kandil-item, body.light-theme .gece-kart, body.light-theme .ek-vakit-kart, body.light-theme .sd-kart, body.light-theme .onemli-card, body.light-theme .surah-card { background: rgba(255,255,255,.88); }
body.light-theme .sd-satir { background: rgba(168,128,28,.05); border-color: rgba(168,128,28,.22); }
body.light-theme .sd-ar, body.light-theme .fc-ar, body.light-theme .verse-arabic { color: #3a2410; }
body.light-theme .sd-ok { color: #1f1408; }
body.light-theme .sd-satir.sd-caliyor { border-color: #a8801c; box-shadow: 0 0 0 2px rgba(168,128,28,.25); }
body.light-theme .sd-satir.sd-caliyor .sd-w { background-image: linear-gradient(rgba(212,175,55,.22), rgba(212,175,55,.22)); }
body.light-theme .sd-satir.sd-caliyor .sd-w.gecti, body.light-theme .sd-w.gecti { background-image: linear-gradient(rgba(212,175,55,.55), rgba(212,175,55,.55)); }
body.light-theme .gold-primary-btn, body.light-theme .seg-btn.active, body.light-theme .cuma-act-btn.share, body.light-theme .scp-badge { color: #2b1a0a; }
body.light-theme .hadis-text, body.light-theme .fc-tr, body.light-theme .fc-ok { color: #1f1408; }
body.light-theme .ek-vakit-satir.kerahet b { color: #a8412e; }
body.light-theme .scp-inner { background: radial-gradient(circle at 50% 30%, #5C3B25 0%, #2A170C 55%, #160B04 100%); }  /* paylaşım kartı önizlemesi kart rengini korur */
body.light-theme .scp-inner .scp-tr { color: #FDF6EE; }
body.light-theme .scp-inner .scp-ar, body.light-theme .scp-inner .scp-src, body.light-theme .scp-inner .scp-brand { color: #E3AD82; }
body.light-theme .select-input, body.light-theme .search-input-field, body.light-theme input[type="number"], body.light-theme input[type="text"] { background: #fff; color: #1f1408; border-color: rgba(168,128,28,.4); }
body.light-theme .toggle-slider { background: rgba(0,0,0,.18); }
body.light-theme .notify-status.ok { color: #1f6b3a; }
body.light-theme .hijri-today-card, body.light-theme .zikir-display, body.light-theme .daily-hadis-card, body.light-theme .compass-note, body.light-theme .qt-card, body.light-theme .quiz-intro, body.light-theme .quiz-result, body.light-theme .mv-where { background: rgba(255,255,255,.88) !important; border-color: rgba(168,128,28,.35); color: #1f1408; }
body.light-theme .ht-hijri, body.light-theme .zikir-display .zikir-count, body.light-theme .verse-card-title { color: #6b4a12; }
body.light-theme .ht-greg, body.light-theme .hadis-source { color: rgba(24,36,33,.7); }
body.light-theme .nav-tab { background: rgba(255,255,255,.7); color: #4a3520; }
body.light-theme .prayer-check-row.checked { background: rgba(212,175,55,.22); }
body.light-theme .kandil-item.is-today { background: linear-gradient(135deg, rgba(212,175,55,.3), rgba(255,255,255,.9)); }
body.light-theme .compass-dial-ring { background: radial-gradient(circle at 50% 42%, #f6ead8, #e7d4b6 55%, #dcc4a0) !important; }


/* ══════════ v65.1 — Tecvid, Öğren mod anahtarı, TTS yardım ══════════ */
.tecvid-no { display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; border-radius:11px; background:rgba(212,175,55,.18); font-size:.72rem; margin-right:4px; }
.tecvid-kart.biten summary { opacity:.85; }
.tecvid-ornek { border:1px solid var(--border-light); border-radius:10px; padding:8px 10px; margin-bottom:6px; background:rgba(255,255,255,.03); }
.tecvid-ar { font-family:var(--font-ar); font-size:1.6rem; direction:rtl; text-align:right; color:var(--gold-light); line-height:1.8; }
.tecvid-ok { font-size:.88rem; color:var(--text-main); font-weight:600; margin-top:2px; }
.tecvid-not { font-weight:400; color:var(--text-muted); font-size:.8rem; }
.ogren-mod { margin:0; padding:3px; flex:0 0 auto; }
.ogren-mod .seg-btn { padding:6px 10px; font-size:.78rem; }
.tts-yardim-btn { display:inline-block; margin-top:6px; background:var(--gold-gradient); color:#1a0e05; border:0; border-radius:20px; padding:6px 12px; font-size:.8rem; font-weight:800; cursor:pointer; font-family:inherit; }
.tts-box { text-align:left; }
.tts-baslik { font-size:1.05rem; font-weight:800; color:var(--gold-light); margin-bottom:8px; }
.tts-aciklama { font-size:.88rem; color:var(--text-sub); line-height:1.5; margin-bottom:10px; }
.tts-adim { padding-left:20px; font-size:.9rem; line-height:1.55; color:var(--text-main); margin:0 0 12px; }
.tts-adim li { margin-bottom:6px; }
.tts-play { display:block; text-align:center; text-decoration:none; margin-bottom:6px; }
body.light-theme .tecvid-ornek { background:rgba(168,128,28,.06); }
body.light-theme .tecvid-ar { color:#3a2410; }

/* ══════════ v65.1 — Kaza hesaplayıcı, namaz istatistiği ══════════ */
.kaza-tahmin { text-align:center; font-size:.82rem; color:var(--text-sub); margin:6px 0 12px; }
.kaza-hesap { margin-top:6px; }
.kaza-form { display:flex; flex-direction:column; gap:10px; margin:6px 0 8px; }
.kaza-form label { display:flex; flex-direction:column; gap:4px; font-size:.84rem; font-weight:600; color:var(--text-sub); }
.kaza-form input, .kaza-form select { width:100%; padding:10px 12px; border-radius:10px; border:1.5px solid var(--border-gold); background:var(--bg-card); color:var(--text-main); font-size:1rem; font-family:var(--font-ui); }
.nt-grafik-baslik { font-size:.78rem; color:var(--text-muted); font-weight:600; margin:10px 0 4px; }
.nt-grafik { display:grid; grid-template-columns:repeat(8, 1fr); gap:6px; align-items:end; height:120px; padding:6px 2px 0; background:rgba(212,175,55,.06); border:1px solid var(--border-light); border-radius:12px; }
.nt-cubuk-kap { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:3px; }
.nt-cubuk { width:70%; max-width:26px; background:var(--gold-gradient); border-radius:6px 6px 2px 2px; min-height:4px; }
.nt-cubuk-etiket { font-size:.56rem; color:var(--text-muted); white-space:nowrap; }
.nt-cubuk-deger { font-size:.62rem; color:var(--gold-light); font-weight:700; }

/* ══════════ v65.1 — Hatim planı ══════════ */
.hatim-plan-btnler { display:flex; flex-direction:column; gap:8px; margin:10px 0 8px; }
.hatim-plan-btnler .gold-outline-btn, .hatim-plan-btnler .gold-primary-btn { width:100%; }

/* ══════════ v65.1 — Hızlı Erişim (ana sayfa) ══════════ */
.he-kart { background:var(--bg-card); border:1.2px solid var(--border-gold); border-radius:var(--radius-md); padding:10px 10px 12px; margin:10px 0 0; box-shadow:var(--shadow-card); }
.he-ust { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; padding:0 2px; }
.he-baslik { font-size:.86rem; font-weight:800; color:var(--gold-light); }
.he-duzenle { background:transparent; border:1px solid var(--border-light); color:var(--text-sub); border-radius:20px; padding:4px 10px; font-size:.72rem; font-weight:700; cursor:pointer; font-family:inherit; }
.he-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; }
.he-btn { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; background:rgba(212,175,55,.08); border:1px solid var(--border-light); border-radius:14px; padding:10px 2px 8px; cursor:pointer; font-family:inherit; color:var(--text-main); min-height:74px; transition:transform .12s, background .2s; }
.he-btn:active { transform:scale(.96); background:rgba(212,175,55,.18); }
.he-ikon { font-size:1.6rem; line-height:1; filter:drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.he-ad { font-size:.74rem; font-weight:700; color:var(--gold-light); text-align:center; line-height:1.15; }
.he-box { text-align:left; max-height:88vh; overflow:auto; }
.he-secim { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; margin:8px 0 12px; }
.he-secenek { position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; background:var(--bg-card); border:1px solid var(--border-light); border-radius:12px; padding:8px 4px; cursor:pointer; font-family:inherit; color:var(--text-main); opacity:.75; }
.he-secenek .he-ad { color:var(--text-sub); font-size:.68rem; }
.he-secenek.on { opacity:1; border-color:var(--gold-light); background:rgba(212,175,55,.16); }
.he-secenek.on .he-ad { color:var(--gold-light); }
.he-sira { position:absolute; top:4px; right:4px; min-width:18px; height:18px; border-radius:9px; background:var(--gold-gradient); color:#1a0e05; font-size:.66rem; font-weight:800; display:inline-flex; align-items:center; justify-content:center; }
html.hv-buyuk .he-ad { font-size:.82rem; }
body.light-theme .he-btn { background:rgba(168,128,28,.08); }
body.light-theme .he-ad { color:#5b3f0c; }

/* ══════════ v65.1 — ANA SAYFA TEK EKRAN (Hızlı Erişim eklenince yeniden sığdırma; puntolar aynı) ══════════ */
.cd-ring { width: 220px; height: 220px; }
.cd-ticks { -webkit-mask: radial-gradient(circle, transparent 0 69px, #000 71px 85px, transparent 87px); mask: radial-gradient(circle, transparent 0 69px, #000 71px 85px, transparent 87px); }
.horizon { margin-top: -44px; height: 64px; }
.mosque { height: 64px; }
.info-pills { margin: 4px 0 8px; }
.warm-home .prayer-card { padding: 8px 4px; }
.warm-home .prayer-grid { margin-bottom: 8px; }
/* Hızlı Erişim: ince kart */
.he-kart { padding: 8px 8px 8px; margin: 0; }
.he-ust { margin-bottom: 6px; }
.he-btn { min-height: 0; padding: 7px 2px 6px; gap: 3px; }
.he-ikon { font-size: 1.3rem; }
/* Günün Âyeti: paylaş düğmesi başlık satırında, kart ekranın kalanını doldurur */
.ayet-ust { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.ayet-ust .verse-card-title { margin-bottom: 0 !important; text-align: left; }
.daily-hadis-card .ayet-ust .mini-share-btn { margin-top: 0; align-self: auto; }
.warm-home .daily-hadis-card { padding: 10px 14px 12px; margin-top: 8px; min-height: 96px; }
.daily-hadis-card #daily-verse-source { margin-top: 6px; }
/* Diğer Vakitler: âyetin altında, kapalı tek satır; dokununca açılır */
.ek-vakit-kart { margin: 8px 0 0; padding: 0; }
.ek-vakit-ust { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; padding: 9px 12px; background: transparent; border: 0; color: inherit; font-family: inherit; cursor: pointer; text-align: left; }
.ek-vakit-baslik small { margin-left: 4px; }
.ek-vakit-ok { color: var(--gold-light); font-size: .9rem; transition: transform .2s; }
.ek-vakit-kart.acik .ek-vakit-ok { transform: rotate(180deg); }
.ek-vakit-govde { display: none; padding: 0 12px 10px; }
.ek-vakit-kart.acik .ek-vakit-govde { display: block; }
.ek-vakit-govde .ek-vakit-paylas { margin-top: 8px; width: 100%; }
/* Özel gün şeridi (bayram namazı / kandil / Ramazan) — vakit kartlarının altında, yalnızca o günlerde */
.ozel-serit { margin: 0 0 8px; display: flex; flex-direction: column; gap: 4px; }
.ozel-satir { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; background: rgba(212,175,55,.12); border: 1px solid rgba(212,175,55,.3); font-size: .82rem; }
.ozel-satir span, .ozel-satir b { color: var(--gold-light); font-weight: 700; }
body.light-theme .ozel-satir { background: rgba(168,128,28,.10); }
/* Hızlı Erişim: başlıksız tek sıra — 4 kısayol + sağda ince kalem */
.he-kart { padding: 6px; }
.he-grid { grid-template-columns: repeat(4, 1fr) 30px; gap: 5px; align-items: stretch; }
.he-grid .he-duzenle { border-radius: 12px; padding: 0; font-size: .95rem; display: flex; align-items: center; justify-content: center; }
.warm-home { padding: 10px 12px 8px; }
.horizon { margin-top: -46px; height: 58px; }
.mosque { height: 58px; }
.warm-home .prayer-card { padding: 7px 4px; }
.warm-home .daily-hadis-card { padding: 9px 14px 10px; }
.daily-hadis-card #daily-verse-source { margin-top: 4px; }
.info-pills { margin: 3px 0 6px; }
.warm-home .daily-hadis-card { margin-top: 6px; }
.ek-vakit-kart { margin-top: 6px; }
.ek-vakit-ust { padding: 7px 12px; }
.warm-home { padding-bottom: 6px; }
.he-grid { gap: 4px; }
.warm-home { padding-bottom: 4px; }
body.light-theme .warm-home .daily-hadis-card .verse-card-title { color: #6b4a12; text-shadow: none; }
/* Doğuş/Batış balonları kaldırıldı (v65.1): silüet ile vakit kartları arası boşluk */
.warm-home .prayer-grid { margin-top: 8px; }