/* Mihrâb — Tema v3.1: sıcak krem zemin, zümrüt-gece mavisi, altın vurgu, serif başlık */
:root{
  --bg:#F6F2E9;--surface:#FFFFFF;--surface-2:#EFE9DC;--ink:#15232B;--muted:#5E6A70;--line:#E4DCCB;
  --accent:#0B7F6A;--accent-strong:#096654;--accent-soft:rgba(11,127,106,.11);--on-accent:#FFFFFF;
  --gold:#A27628;--gold-soft:rgba(162,118,40,.14);--danger:#B4400F;
  --navy:#0D2530;--navy-2:#123240;--on-navy:#EAF3F2;--on-navy-muted:#9DB6B8;--teal:#3DDBBE;
  --radius-lg:28px;--radius:18px;--radius-sm:12px;
  --shadow-sm:0 1px 2px rgba(21,35,43,.04),0 4px 14px -6px rgba(21,35,43,.08);
  --shadow-md:0 2px 4px rgba(21,35,43,.04),0 18px 36px -16px rgba(21,35,43,.18);
  --font-head:'Fraunces','Iowan Old Style',Georgia,serif;
  --font-num:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#081218;--surface:#101C23;--surface-2:#17272F;--ink:#E9F0F0;--muted:#93A4AA;--line:#21343C;
  --accent:#2FCFB0;--accent-strong:#62E2C9;--accent-soft:rgba(47,207,176,.13);--on-accent:#04241E;
  --gold:#DDB870;--gold-soft:rgba(221,184,112,.13);--danger:#FB923C;--navy:#0C222C;--navy-2:#0A1920;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);--shadow-md:0 18px 36px -16px rgba(0,0,0,.6);
}}
:root[data-theme="dark"]{
  --bg:#081218;--surface:#101C23;--surface-2:#17272F;--ink:#E9F0F0;--muted:#93A4AA;--line:#21343C;
  --accent:#2FCFB0;--accent-strong:#62E2C9;--accent-soft:rgba(47,207,176,.13);--on-accent:#04241E;
  --gold:#DDB870;--gold-soft:rgba(221,184,112,.13);--danger:#FB923C;--navy:#0C222C;--navy-2:#0A1920;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);--shadow-md:0 18px 36px -16px rgba(0,0,0,.6);
}

body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;background:
  radial-gradient(900px 420px at 85% -120px,var(--accent-soft),transparent 70%),
  radial-gradient(700px 380px at -10% 10%,var(--gold-soft),transparent 70%),var(--bg);background-attachment:fixed}
::selection{background:var(--accent);color:var(--on-accent)}
.wrap{max-width:1160px}
h1,h2,h3{font-weight:600;letter-spacing:-.015em}
h2{font-size:clamp(1.55rem,2.8vw,2.15rem)}
h3{font-size:1.18rem}

/* Rakamlar: düz ve hizalı */
.countdown,.t b,.days .left,.stat,.counter .num,.result .big,.sure-no,.ayet-num,.streak b,.tk-d b,.kz .sayi,.hd-no,.rh-list .n,.esma .esma-item i,.kz .icon-btn,.rh-step .no{font-family:var(--font-num);letter-spacing:-.02em}
#dialSvg text{font-family:var(--font-num);font-weight:600}

/* Bölüm başlığı süsü: sekiz köşeli yıldız */
.section-head{margin-bottom:20px}
.section-head h2{display:flex;align-items:center;gap:12px}
.section-head h2::before{content:"";flex:none;width:18px;height:18px;background:var(--gold);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='5' width='14' height='14'/%3E%3Crect x='5' y='5' width='14' height='14' transform='rotate(45 12 12)'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='5' width='14' height='14'/%3E%3Crect x='5' y='5' width='14' height='14' transform='rotate(45 12 12)'/%3E%3C/svg%3E") center/contain no-repeat}
.section{margin-top:48px}
.card-title{font-size:.74rem;letter-spacing:.11em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:12px}

/* Üst bar */
.top{background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:saturate(1.5) blur(16px);-webkit-backdrop-filter:saturate(1.5) blur(16px)}
.top .wrap{height:68px}
.brand{font-size:1.5rem;font-weight:600;letter-spacing:-.02em}
.brand svg{color:var(--gold);width:30px;height:30px}
.nav{gap:4px}
.nav button{font-size:.9rem;padding:8px 13px}
.nav button.on{background:var(--ink);color:var(--bg)}
.icon-btn{border-radius:14px;color:var(--ink);box-shadow:var(--shadow-sm)}
.icon-btn:hover{border-color:var(--accent)}

/* Düğmeler ve alanlar */
.btn,.install-btn{color:var(--on-accent);border-radius:13px;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 8px 16px -8px color-mix(in srgb,var(--accent) 70%,transparent)}
.btn:hover,.install-btn:hover{background:var(--accent-strong)}
.btn:active{transform:translateY(1px)}
.btn.ghost,.btn.danger{box-shadow:none;background:transparent}
.btn.ghost{color:var(--ink)}
.btn.ghost:hover{background:var(--surface-2)}
.btn.danger{color:var(--danger)}
.btn.danger:hover{background:var(--surface-2)}
.chip{border-radius:999px;padding:9px 16px}
.chip:hover{border-color:var(--accent)}
.field input,.field select,.search{border-radius:13px;padding:12px 14px;transition:border-color .15s,box-shadow .15s}
.field select{padding-right:34px}
.field input:focus,.field select:focus,.search:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}

/* Kartlar */
.card,.dua,.hd,.days,.table-wrap,.quick button,.sure-list button,.esma .esma-item,.kz{box-shadow:var(--shadow-sm)}
.card{padding:26px}
.quick button{border-radius:var(--radius);padding:20px;gap:10px}
.quick button:hover{border-color:var(--accent);box-shadow:var(--shadow-md)}
.quick .ic{background:linear-gradient(135deg,var(--accent-soft),var(--gold-soft));color:var(--accent-strong)}
.quick b{font:600 1.08rem var(--font-head)}

/* Hero */
.hero{background:radial-gradient(130% 150% at 100% 0%,#17525A 0%,#0F3440 34%,var(--navy) 62%,#081820 100%);
  box-shadow:inset 0 0 0 1px rgba(221,184,112,.22),0 30px 60px -30px rgba(8,24,32,.75);padding:clamp(26px,4.4vw,52px)}
.hero::after{background:radial-gradient(circle,rgba(221,184,112,.20),transparent 65%);right:-110px;top:-130px;width:380px;height:380px}
.besmele{margin-bottom:20px;color:#F4E6C4;text-shadow:0 2px 24px rgba(221,184,112,.25)}
.dates strong{color:#EBCB8B}
.loc-btn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);border-radius:14px}
.loc-btn:hover{background:rgba(255,255,255,.1)}
.next .label{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:#EBCB8B}
.next .name{font-size:1.55rem;font-weight:600}
.countdown{color:#fff;font-weight:700;letter-spacing:-.045em}
.vprog i{background:linear-gradient(90deg,var(--teal),#EBCB8B)}
.t{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.1);border-radius:16px;padding:14px 10px}
.t span{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase}
.t b{font-size:1.3rem;font-weight:700}
.t.now{background:linear-gradient(160deg,#5FE6CB,var(--teal));border-color:transparent;box-shadow:0 12px 26px -12px rgba(61,219,190,.8)}

/* Namaz takibi */
.nz{border-radius:16px}
.nz:hover{border-color:var(--accent)}
.streak{background:linear-gradient(135deg,var(--gold-soft),var(--accent-soft))}
.streak b{color:var(--gold)}

/* Günün ayeti / hadisi */
.q-card{position:relative;overflow:hidden;padding:28px}
.q-card::before{content:"“";position:absolute;top:-6px;right:18px;font:700 7rem/1 var(--font-head);color:var(--gold);opacity:.16;pointer-events:none}
.quote{font:italic 500 1.34rem/1.6 var(--font-head);letter-spacing:0}
.src{font-size:.86rem;letter-spacing:.02em}

/* Günün ismi: koyu vitrin */
.isim-card{background:radial-gradient(120% 160% at 0% 100%,#17525A 0%,var(--navy) 55%,#081820 100%);border:0;border-radius:var(--radius-lg);color:var(--on-navy);padding:clamp(24px,3.6vw,40px);box-shadow:inset 0 0 0 1px rgba(221,184,112,.22),var(--shadow-md)}
.isim-card .card-title{color:#EBCB8B}
.isim-card h3{font-size:clamp(1.7rem,3.4vw,2.3rem);color:#fff}
.isim-card p{color:var(--on-navy-muted);font-size:1.05rem}
.isim-ar{color:#EBCB8B;text-shadow:0 2px 30px rgba(221,184,112,.3);font-size:clamp(3rem,8vw,5rem)}
.isim-card .btn.ghost{color:var(--on-navy);border-color:rgba(255,255,255,.22)}
.isim-card .btn.ghost:hover{background:rgba(255,255,255,.08)}

/* Yaklaşan günler, tablo */
.days{border-radius:var(--radius);overflow:hidden}
.days li{padding:16px 22px;transition:background-color .15s}
.days li:hover{background:var(--surface-2)}
.days .d b{font:600 1.08rem var(--font-head)}
.days .left{background:var(--accent-soft);padding:5px 13px;border-radius:999px;font-size:.88rem;font-weight:700}
th{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase}
tr.today td{color:var(--accent-strong)}

/* Kur'an, dualar, hadisler */
.sure-list button{border-radius:14px;padding:14px 16px}
.sure-list b{font:600 1.05rem var(--font-head)}
.sure-no{border-radius:9px}
.resume{background:linear-gradient(120deg,#17525A,var(--navy));border-radius:var(--radius);box-shadow:var(--shadow-md)}
.reader-head{background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.ayet .mn{font-size:1.04rem;line-height:1.75}
.dua{padding:26px;border-radius:var(--radius)}
.dua h3{font-size:1.25rem}
.dua .ar{background:var(--surface-2);border-radius:14px;padding:16px 20px}
.dua .ok{color:var(--ink)}
.hd p{font:500 1.14rem/1.6 var(--font-head)}
.hd-no{background:var(--gold-soft);border-color:transparent;font-weight:700}

/* Zikirmatik, rehber, takvim */
.counter{background:radial-gradient(circle at 30% 22%,#1C5A62,var(--navy) 68%);box-shadow:inset 0 0 0 1px rgba(221,184,112,.25),0 30px 50px -24px rgba(8,24,32,.7)}
.counter .num{font-weight:700}
.chip.on{background:var(--navy);border-color:var(--navy)}
.rh-step{border-left:4px solid var(--gold);padding:28px}
.rh-step h3{font-size:1.6rem}
.rh-step .no{letter-spacing:.11em}
.tk-title b{font-size:1.5rem;font-weight:600}
.tk-d{border-radius:14px}
.tk-d.bugun{background:linear-gradient(150deg,#17525A,var(--navy));box-shadow:var(--shadow-md)}
.tk-d.ozel{background:var(--gold-soft)}
.stat{font-size:3rem;font-weight:700}
.result{border-radius:var(--radius)}
.modal{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modal-box{box-shadow:var(--shadow-md)}
.toast{border-radius:14px}
.foot{margin-top:24px}

@media (max-width:720px){
  .top .wrap{height:58px}
  .section{margin-top:34px}
  .card,.dua,.q-card{padding:20px}
  .quote{font-size:1.2rem}
  main{padding-bottom:calc(112px + env(safe-area-inset-bottom,0px))}
  /* Yüzen alt menü */
  .bottom{left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));border:1px solid var(--line);border-radius:24px;padding:6px;
    background:color-mix(in srgb,var(--surface) 84%,transparent);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);box-shadow:0 16px 36px -12px rgba(8,24,32,.35)}
  .bottom button{border-radius:18px;padding:8px 2px;font-weight:500;transition:background-color .15s,color .15s}
  .bottom button.on{background:var(--accent-soft);color:var(--accent-strong)}
  .bottom button.on svg{background:none}
  .toast{bottom:calc(100px + env(safe-area-inset-bottom,0px))}
  .t b{font-size:1.15rem}
}
main{padding-top:32px}
@media (max-width:720px){
  main{padding-top:18px}
  .bottom{background:color-mix(in srgb,var(--surface) 93%,transparent)}
}
.tk-grid{grid-template-columns:repeat(7,minmax(0,1fr))}
.tk-d{min-width:0;overflow:hidden}
@media (max-width:720px){.tk-d small{font-size:.58rem;letter-spacing:-.02em}.tk-d b{font-size:1rem}.tk-title b{font-size:1.3rem}}

/* v3.1.1 — bölüm bölüm kontrol sonrası düzeltmeler */
main{padding-top:40px}
.reader-head{top:calc(env(safe-area-inset-top,0px) + 68px)}
ol.plain{padding-left:22px;margin-top:10px}
ol.plain li{padding:4px 0}
ol.plain li::marker{color:var(--gold);font-weight:700;font-family:var(--font-num)}
.status-dot{width:10px;height:10px;box-shadow:0 0 0 4px var(--surface-2)}
.status-dot.on{box-shadow:0 0 0 4px var(--accent-soft)}
.zk-ar{font-size:2.6rem}
@media (max-width:720px){
  main{padding-top:20px}
  .reader-head{top:calc(env(safe-area-inset-top,0px) + 58px)}
  /* Kaza: tek satırda ad, sayı, ekle, kıldım */
  .kz{grid-template-columns:1fr auto auto auto;gap:8px;padding:8px 10px 8px 14px}
  .kz .btn{grid-column:auto;padding:8px 12px;font-size:.9rem}
  .kz .sayi{min-width:44px;font-size:1.2rem}
  .kz .icon-btn{width:36px;height:36px}
  /* Zikir: seçenekler tek satırda kaysın, sayaç ekranda kalsın */
  .zikir{gap:18px}
  .zikir .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -14px;padding:2px 14px}
  .zikir .chips::-webkit-scrollbar{display:none}
  .zikir .chip{flex:none}
  .zk-ar{margin:10px 0 0}
  .counter{width:min(270px,70vw)}
}
.zikir > div{min-width:0}

/* v3.1.2 — Ana ekrana ekle şeridi */
.kur{position:fixed;z-index:29;left:12px;right:12px;bottom:calc(92px + env(safe-area-inset-bottom,0px));max-width:520px;margin:0 auto;display:grid;grid-template-columns:auto 1fr auto auto;gap:12px;align-items:center;
  padding:12px 10px 12px 12px;border-radius:20px;color:var(--on-navy);background:linear-gradient(120deg,#17525A,var(--navy));
  box-shadow:inset 0 0 0 1px rgba(221,184,112,.3),0 18px 40px -12px rgba(8,24,32,.6);animation:kurIn .35s ease-out}
@keyframes kurIn{from{transform:translateY(24px)}to{transform:none}}
.kur img{border-radius:12px;display:block}
.kur-text{min-width:0}
.kur-text b{display:block;font:600 1.02rem/1.25 var(--font-head);color:#fff}
.kur-text small{display:block;color:var(--on-navy-muted);font-size:.82rem;line-height:1.3;margin-top:2px}
.kur .btn{background:#EBCB8B;color:#1B2A22;padding:10px 16px;box-shadow:none;white-space:nowrap}
.kur .btn:hover{background:#F4DCA6}
.kur-x{border:0;background:none;color:var(--on-navy-muted);width:36px;height:36px;border-radius:10px;display:grid;place-items:center;padding:0}
.kur-x:hover{background:rgba(255,255,255,.1);color:#fff}
.kur-x svg{width:18px;height:18px}
body.kur-acik main{padding-bottom:calc(196px + env(safe-area-inset-bottom,0px))}
body.kur-acik .toast{bottom:calc(184px + env(safe-area-inset-bottom,0px))}
.kur-adim{margin:0;padding:0;list-style:none;counter-reset:adim;display:grid;gap:10px}
.kur-adim li{counter-increment:adim;display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start;line-height:1.5}
.kur-adim li::before{content:counter(adim);width:28px;height:28px;border-radius:50%;background:var(--gold-soft);color:var(--gold);display:grid;place-items:center;font:700 .85rem var(--font-num)}
.kur-ikon{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:7px;background:var(--surface-2);vertical-align:middle;margin-left:4px}
.kur-ikon svg{width:16px;height:16px}
@media (min-width:721px){.kur{bottom:24px}}
@media (max-width:360px){.kur img{display:none}.kur{grid-template-columns:1fr auto auto}}

/* v3.2 — kari seçimi ve canlı yayın */
select.kari{appearance:none;-webkit-appearance:none;background:var(--surface);max-width:190px;padding-right:26px;text-overflow:ellipsis;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23808a8f' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center}
.canli-rozet{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--danger);background:color-mix(in srgb,var(--danger) 12%,transparent);padding:6px 12px;border-radius:999px}
.canli-rozet i{width:8px;height:8px;border-radius:50%;background:var(--danger);animation:nabiz 1.6s ease-in-out infinite}
@keyframes nabiz{50%{opacity:.25}}
.canli-kutu{position:relative;margin-top:16px;aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;background:#06121A;box-shadow:inset 0 0 0 1px rgba(221,184,112,.22),var(--shadow-md)}
.canli-kutu iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.canli-bos{position:absolute;inset:0;display:grid;place-items:center;color:var(--on-navy-muted);padding:20px;text-align:center}
.canli-alt{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:16px;flex-wrap:wrap}
.canli-alt b{display:block;font:600 1.25rem var(--font-head)}
.canli-alt small{color:var(--muted)}
.canli-alt a.btn{text-decoration:none;display:inline-block}
@media (max-width:720px){.canli-kutu{border-radius:var(--radius);margin-left:-4px;margin-right:-4px}select.kari{max-width:150px}}
.canli-bos p{max-width:420px;line-height:1.6}
@media (max-width:720px){.reader-head{gap:8px}.reader-head .mini{padding:5px 9px}select.kari{max-width:128px;padding-right:22px}}

/* v3.2.2 — mihrap logosu */
.brand svg{width:32px;height:32px}
.brand .nis{fill:var(--accent);stroke:none}
.kur img{box-shadow:0 0 0 1px rgba(221,184,112,.35)}