/* Layout: kenar menü (masaüstü) / yüzen alt sekme çubuğu (telefon); tek sütun içerik. Tüm yönler mantıksal (RTL uyumlu).
   Renk paletleri: Gece (varsayılan: siyah, kahverengi→yeşil geçiş), Zümrüt, Klasik. Her palet açık ve koyu kipte çalışır.
   Paleti html[data-palette], kipi html[data-theme] seçer; "sistem" kipinde prefers-color-scheme belirler. */
:root{
  --bg:#f6f1e7; --surface:#fffdf8; --surface-2:#efe8da; --ink:#1b1712; --muted:#6a6155; --line:#e3d9c6;
  --primary:#1f6a50; --on-primary:#ffffff; --primary-soft:#e2eee7; --primary-deep:#154d3a;
  --gold:#8a6a2f; --gold-soft:#f3e9d4; --good:#2a7a45; --warn:#a65d12; --bad:#b4442f;
  --hero:linear-gradient(135deg,#3b2615 0%,#15120d 50%,#0f3a2b 100%); --hero-accent:#e6cf98;
  --pattern:transparent; --shadow:0 1px 2px rgba(40,32,18,.05),0 8px 24px rgba(40,32,18,.07);
  --f-ui:"Readex Pro","IBM Plex Sans Arabic","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-quran:"Amiri Quran","Amiri","Scheherazade New","Geeza Pro",serif;
  --f-ar:"Amiri","Scheherazade New","Geeza Pro",serif;
  --f-big:"Scheherazade New","Amiri","Geeza Pro",serif;
  --r:18px; --r-sm:12px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0b0a08; --surface:#15130f; --surface-2:#100f0c; --ink:#f2ebdd; --muted:#a9a192; --line:#2c2821;
  --primary:#8cc5ad; --on-primary:#0b1a14; --primary-soft:#16261f; --primary-deep:#6fae95;
  --gold:#d6b879; --gold-soft:#2a2216; --good:#7cc48a; --warn:#e3a457; --bad:#e58a76;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px rgba(0,0,0,.35); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0b0a08; --surface:#15130f; --surface-2:#100f0c; --ink:#f2ebdd; --muted:#a9a192; --line:#2c2821;
  --primary:#8cc5ad; --on-primary:#0b1a14; --primary-soft:#16261f; --primary-deep:#6fae95;
  --gold:#d6b879; --gold-soft:#2a2216; --good:#7cc48a; --warn:#e3a457; --bad:#e58a76;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px rgba(0,0,0,.35); color-scheme:dark}

/* Zümrüt */
:root[data-palette="emerald"]{
  --bg:#f5f0e5; --surface:#fffcf5; --surface-2:#ede6d6; --ink:#102820; --muted:#56635d; --line:#ddd4c2;
  --primary:#1d5c47; --on-primary:#ffffff; --primary-soft:#dfeee6; --primary-deep:#102820;
  --gold:#8f6f2c; --gold-soft:#f1e6cd; --hero:linear-gradient(160deg,#1d4d3e 0%,#102820 70%); --hero-accent:#d6b879}
@media (prefers-color-scheme: dark){:root[data-palette="emerald"]:not([data-theme="light"]){
  --bg:#0b1d17; --surface:#102820; --surface-2:#0d221b; --ink:#f5f0e5; --muted:#b0b8ac; --line:#24433a;
  --primary:#8cc5ad; --on-primary:#0b1d17; --primary-soft:#173a2f; --primary-deep:#6fae95;
  --gold:#d6b879; --gold-soft:#2b2b1c; color-scheme:dark}}
:root[data-palette="emerald"][data-theme="dark"]{
  --bg:#0b1d17; --surface:#102820; --surface-2:#0d221b; --ink:#f5f0e5; --muted:#b0b8ac; --line:#24433a;
  --primary:#8cc5ad; --on-primary:#0b1d17; --primary-soft:#173a2f; --primary-deep:#6fae95;
  --gold:#d6b879; --gold-soft:#2b2b1c; color-scheme:dark}

/* Klasik (RHUM'un önceki renkleri) */
:root[data-palette="classic"]{
  --bg:#f7f3ec; --surface:#fffdf9; --surface-2:#f2ece1; --ink:#1c2a26; --muted:#6a716b; --line:#e8e0d2;
  --primary:#0f5a4a; --on-primary:#ffffff; --primary-soft:#e3eee8; --primary-deep:#093b31;
  --gold:#a8834a; --gold-soft:#f4ead8; --hero:radial-gradient(130% 100% at 50% 0%,#15705e,#062a23 75%); --hero-accent:#f0d8a6}
@media (prefers-color-scheme: dark){:root[data-palette="classic"]:not([data-theme="light"]){
  --bg:#0b1512; --surface:#121d1a; --surface-2:#0e1815; --ink:#ece6da; --muted:#a3a99f; --line:#253330;
  --primary:#62c2a2; --on-primary:#062a22; --primary-soft:#15332b; --primary-deep:#0b3a30;
  --gold:#d9b374; --gold-soft:#2c2416; color-scheme:dark}}
:root[data-palette="classic"][data-theme="dark"]{
  --bg:#0b1512; --surface:#121d1a; --surface-2:#0e1815; --ink:#ece6da; --muted:#a3a99f; --line:#253330;
  --primary:#62c2a2; --on-primary:#062a22; --primary-soft:#15332b; --primary-deep:#0b3a30;
  --gold:#d9b374; --gold-soft:#2c2416; color-scheme:dark}

/* Yazı tipleri */
:root[data-font="plex"]{--f-ui:"IBM Plex Sans Arabic","Segoe UI",system-ui,sans-serif}
:root[data-font="jakarta"]{--f-ui:"Plus Jakarta Sans","IBM Plex Sans Arabic","Segoe UI",system-ui,sans-serif}
:root[data-arfont="scheherazade"]{--f-ar:"Scheherazade New","Amiri","Geeza Pro",serif;--f-quran:"Scheherazade New","Amiri Quran","Geeza Pro",serif}

/* Kisve: saf siyah ve altın işleme */
:root[data-palette="kiswa"]{
  --bg:#f7f5f0; --surface:#ffffff; --surface-2:#efebe2; --ink:#141210; --muted:#6b655b; --line:#e2dccf;
  --primary:#8a6a22; --on-primary:#ffffff; --primary-soft:#f2ead6; --primary-deep:#5e4714;
  --gold:#8a6a22; --gold-soft:#f2ead6; --hero:radial-gradient(120% 95% at 50% 0%,#211d15 0%,#050505 72%); --hero-accent:#d4af5a}
@media (prefers-color-scheme: dark){:root[data-palette="kiswa"]:not([data-theme="light"]){
  --bg:#000000; --surface:#0d0d0c; --surface-2:#070707; --ink:#f3efe6; --muted:#9c968a; --line:#262421;
  --primary:#d4af5a; --on-primary:#140f04; --primary-soft:#211b0e; --primary-deep:#b8933f;
  --gold:#d4af5a; --gold-soft:#211b0e; color-scheme:dark}}
:root[data-palette="kiswa"][data-theme="dark"]{
  --bg:#000000; --surface:#0d0d0c; --surface-2:#070707; --ink:#f3efe6; --muted:#9c968a; --line:#262421;
  --primary:#d4af5a; --on-primary:#140f04; --primary-soft:#211b0e; --primary-deep:#b8933f;
  --gold:#d4af5a; --gold-soft:#211b0e; color-scheme:dark}
/* İznik: lacivert, firuze ve mercan çini renkleri */
:root[data-palette="iznik"]{
  --bg:#f3f6f8; --surface:#ffffff; --surface-2:#e8eef2; --ink:#0e1a2b; --muted:#566273; --line:#d8e0e7;
  --primary:#17626a; --on-primary:#ffffff; --primary-soft:#dcedee; --primary-deep:#0e434a;
  --gold:#b2432f; --gold-soft:#f6e3de; --hero:linear-gradient(140deg,#0e1a2b 0%,#16365a 55%,#17626a 100%); --hero-accent:#f2a58e}
@media (prefers-color-scheme: dark){:root[data-palette="iznik"]:not([data-theme="light"]){
  --bg:#08111d; --surface:#0f1b2c; --surface-2:#0b1524; --ink:#e9eef5; --muted:#9aa6b6; --line:#1f2e43;
  --primary:#4fb8b4; --on-primary:#04201f; --primary-soft:#123038; --primary-deep:#3a9f9b;
  --gold:#ec8b72; --gold-soft:#2c1a17; color-scheme:dark}}
:root[data-palette="iznik"][data-theme="dark"]{
  --bg:#08111d; --surface:#0f1b2c; --surface-2:#0b1524; --ink:#e9eef5; --muted:#9aa6b6; --line:#1f2e43;
  --primary:#4fb8b4; --on-primary:#04201f; --primary-soft:#123038; --primary-deep:#3a9f9b;
  --gold:#ec8b72; --gold-soft:#2c1a17; color-scheme:dark}
/* Medine: mermer beyazı, Yeşil Kubbe ve pirinç */
:root[data-palette="medina"]{
  --bg:#fbfaf6; --surface:#ffffff; --surface-2:#f1efe8; --ink:#13261f; --muted:#5c6a63; --line:#e4e1d6;
  --primary:#1f6b4a; --on-primary:#ffffff; --primary-soft:#e1efe7; --primary-deep:#144a33;
  --gold:#946f26; --gold-soft:#f3ebd8; --hero:linear-gradient(150deg,#22744f 0%,#0f3326 80%); --hero-accent:#e7cf95}
@media (prefers-color-scheme: dark){:root[data-palette="medina"]:not([data-theme="light"]){
  --bg:#0c1411; --surface:#121e19; --surface-2:#0f1915; --ink:#eef2ec; --muted:#a3ada6; --line:#22322b;
  --primary:#62c294; --on-primary:#06231a; --primary-soft:#163527; --primary-deep:#4caa7d;
  --gold:#d6b46a; --gold-soft:#2a2414; color-scheme:dark}}
:root[data-palette="medina"][data-theme="dark"]{
  --bg:#0c1411; --surface:#121e19; --surface-2:#0f1915; --ink:#eef2ec; --muted:#a3ada6; --line:#22322b;
  --primary:#62c294; --on-primary:#06231a; --primary-soft:#163527; --primary-deep:#4caa7d;
  --gold:#d6b46a; --gold-soft:#2a2414; color-scheme:dark}
/* Başlık yazı tipi: Editoryal (serif) veya Modern (sans) */
:root{--f-display:"Bodoni Moda","Reem Kufi",Georgia,"Times New Roman",serif}
:root[lang="ar"]{--f-display:"Reem Kufi","Readex Pro",serif}
:root[data-style="modern"]{--f-display:var(--f-ui)}

*{box-sizing:border-box}
html,body{min-height:100%}
body{background:var(--bg);color:var(--ink);font:15px/1.6 var(--f-ui);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--bg)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--primary)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:10px}
[dir="rtl"] .flip svg,[dir="rtl"] .btn.back svg{transform:scaleX(-1)}
.bgpat{position:fixed;inset:0;pointer-events:none;z-index:0;background:var(--pattern);
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='black' stroke-width='1.1'%3E%3Cpath d='M48 12l10 14 17-5-5 17 14 10-14 10 5 17-17-5-10 14-10-14-17 5 5-17-14-10 14-10-5-17 17 5z'/%3E%3Ccircle cx='48' cy='48' r='11'/%3E%3Cpath d='M0 0l12 12M96 0L84 12M0 96l12-12M96 96L84 84'/%3E%3C/g%3E%3C/svg%3E") 0 0/96px 96px;
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='black' stroke-width='1.1'%3E%3Cpath d='M48 12l10 14 17-5-5 17 14 10-14 10 5 17-17-5-10 14-10-14-17 5 5-17-14-10 14-10-5-17 17 5z'/%3E%3Ccircle cx='48' cy='48' r='11'/%3E%3Cpath d='M0 0l12 12M96 0L84 12M0 96l12-12M96 96L84 84'/%3E%3C/g%3E%3C/svg%3E") 0 0/96px 96px}

/* tipografi */
h1,h2,h3,h4{font-weight:700;letter-spacing:-.02em;text-wrap:balance;margin:0;line-height:1.2}
h1{font-size:1.9rem} h2{font-size:1.4rem} h3{font-size:1.1rem} h4{font-size:1rem;margin-block:8px 2px}
.eyebrow{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--gold);font-weight:600}
[lang="ar"] .eyebrow{letter-spacing:0;font-size:.82rem}
.muted{color:var(--muted)} .small{font-size:.85rem} .faint{opacity:.7;font-size:.8rem;margin-top:4px} .m0{margin:0} .num{font-variant-numeric:tabular-nums}
.center{text-align:center;align-items:center} .center-row{justify-content:center} .left{text-align:start} .end{text-align:end}
.ar{font-family:var(--f-ar);direction:rtl;line-height:2.05;text-align:right}
.quran{font-family:var(--f-quran);line-height:2.35}
.ayno{font-family:var(--f-quran);color:var(--gold);font-size:.85em;white-space:nowrap}
.hadith-ar{font-size:1.4rem;line-height:2}
.dhikr-ar{font-size:1.5rem}
.note{font-size:.8rem;color:var(--muted);border-top:1px dashed var(--line);padding-top:10px;margin:0}
.tr{font-size:1.02rem;max-width:66ch}
.src{font-size:.8rem;color:var(--muted);font-weight:500}
.src.center{display:block;text-align:center}
.linkish{background:none;border:0;padding:0;color:var(--primary);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* kabuk */
.app{position:relative;z-index:1;display:grid;grid-template-columns:256px minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:env(safe-area-inset-top,0px);height:100vh;padding:22px 14px;background:var(--surface);border-inline-end:1px solid var(--line);display:flex;flex-direction:column;gap:20px;overflow-y:auto}
.brand{display:flex;align-items:center;gap:10px;padding-inline:8px}
.brand-mark{width:40px;height:40px;flex:none}
.brand b{font-size:1.45rem;font-weight:700;letter-spacing:.08em;line-height:1}
.brand small{display:block;font-size:.72rem;color:var(--muted);margin-top:3px}
.nav{display:flex;flex-direction:column;gap:2px}
.nav button{display:flex;align-items:center;gap:12px;padding:9px 12px;border:0;background:transparent;border-radius:12px;text-align:start;color:var(--muted);font-weight:500}
.nav button svg{width:20px;height:20px;flex:none}
.nav button:hover{background:var(--surface-2);color:var(--ink)}
.nav button[aria-current="page"]{background:var(--primary-soft);color:var(--primary);font-weight:600}
.side-foot{margin-top:auto;font-size:.75rem;color:var(--muted);padding-inline:8px}
.main{min-width:0;padding-block:28px 64px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.wrap{max-width:1040px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
.topbar{display:none}
.tabbar{display:none}
@media (max-width:900px){
 .app{grid-template-columns:minmax(0,1fr)}
 .side{display:none}
 .main{padding-block:14px 120px}
 .topbar{display:flex;align-items:center;justify-content:space-between;gap:10px}
 .tabbar{display:flex;position:fixed;z-index:25;inset-inline:max(12px,env(safe-area-inset-left,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px));background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:0 10px 30px rgba(0,0,0,.12);padding:6px}
 .tabbar button{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;border:0;background:transparent;padding:7px 2px;border-radius:16px;color:var(--muted);font-size:.66rem;font-weight:500}
 .tabbar button svg{width:22px;height:22px}
 .tabbar button span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .tabbar button[aria-current="page"]{color:var(--primary);background:var(--primary-soft)}
 h1{font-size:1.6rem}
}

/* bileşenler */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--shadow);min-width:0}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){.g2,.g3{grid-template-columns:minmax(0,1fr)}}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row.nowrap{flex-wrap:nowrap} .row.top{align-items:flex-start} .between{justify-content:space-between} .tight-gap{gap:6px}
.grow{flex:1;min-width:0}
.stack{display:flex;flex-direction:column;gap:12px}
.sec-head{display:flex;flex-direction:column;gap:6px}
.sec-head p{margin:0;max-width:66ch;color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:var(--surface);padding:9px 16px;border-radius:999px;font-weight:600;font-size:.9rem;text-decoration:none;color:var(--ink);white-space:nowrap}
.btn:hover{border-color:var(--primary)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.btn.primary:hover{background:var(--primary-deep);border-color:var(--primary-deep)}
.btn.ghost{background:transparent}
.btn.tight{padding:3px 10px}
.btn svg{width:16px;height:16px;flex:none}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--surface);padding:6px 14px;border-radius:999px;font-size:.85rem;font-weight:500;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.chip svg{width:13px;height:13px}
.chip[aria-pressed="true"]{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.seg{display:flex;gap:4px;padding:4px;background:var(--surface-2);border:1px solid var(--line);border-radius:14px;overflow-x:auto;scrollbar-width:none;max-width:100%}
.seg::-webkit-scrollbar{display:none}
.seg button{border:0;background:transparent;padding:8px 14px;border-radius:10px;font-weight:500;font-size:.88rem;color:var(--muted);white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--primary);font-weight:600;box-shadow:var(--shadow)}
.badge{display:inline-block;font-size:.72rem;font-weight:600;padding:3px 10px;border-radius:999px;background:var(--primary-soft);color:var(--primary)}
.badge.gold{background:var(--gold-soft);color:var(--gold)}
.grade{font-size:.72rem;font-weight:600;padding:3px 10px;border-radius:999px;background:color-mix(in srgb,var(--good) 14%,transparent);color:var(--good);white-space:nowrap}
.grade.h{background:var(--gold-soft);color:var(--gold)} .grade.d{background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--bad)}
select,input[type="text"],input[type="number"],input[type="search"],input[type="time"],textarea{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:9px 12px;min-width:0;max-width:100%}
input[type="search"],form.row input{flex:1}
input[type="range"]{accent-color:var(--primary)}
.field{display:flex;flex-direction:column;gap:4px;font-size:.8rem;color:var(--muted);flex:1;min-width:200px}
.field select{color:var(--ink);font-size:.95rem}
.mini{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;color:var(--muted)}
.switch{display:inline-flex;align-items:center;gap:10px;font-weight:500;cursor:pointer}
.switch input{width:40px;height:23px;appearance:none;background:var(--line);border-radius:999px;position:relative;cursor:pointer;transition:background .2s;flex:none;margin:0}
.switch input::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:17px;height:17px;border-radius:50%;background:var(--surface);transition:transform .2s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.switch input:checked{background:var(--primary)}
.switch input:checked::after{transform:translateX(17px)}
[dir="rtl"] .switch input:checked::after{transform:translateX(-17px)}
.bar{height:6px;background:var(--surface-2);border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--gold));border-radius:99px;transition:width .4s}
.stat{display:flex;flex-direction:column;gap:3px}
.stat b{font-size:1.6rem;font-weight:600;font-variant-numeric:tabular-nums}
.tile{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:start;cursor:pointer;transition:transform .15s,border-color .15s}
.tile:hover{transform:translateY(-2px);border-color:var(--primary)}
.tile svg{width:28px;height:28px;color:var(--primary)}
.quote{border-inline-start:3px solid var(--gold);padding-inline-start:14px;display:flex;flex-direction:column;gap:4px}
.tlc{color:var(--primary);font-style:italic}

/* ana kart (kemer) */
.hero{position:relative;overflow:hidden;border-radius:220px 220px var(--r) var(--r)/130px 130px var(--r) var(--r);background:radial-gradient(130% 100% at 50% 0%,#15705e,#062a23 75%);color:#fff;padding:56px 24px 24px;text-align:center;box-shadow:0 18px 40px color-mix(in srgb,var(--primary-deep) 35%,transparent)}
.hero::before{content:"";position:absolute;inset:0;opacity:.14;background:#fff;-webkit-mask:inherit;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cpath d='M36 6l8 11 13-4-4 13 11 8-11 8 4 13-13-4-8 11-8-11-13 4 4-13-11-8 11-8-4-13 13 4z' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E") 0 0/72px 72px;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cpath d='M36 6l8 11 13-4-4 13 11 8-11 8 4 13-13-4-8 11-8-11-13 4 4-13-11-8 11-8-4-13 13 4z' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E") 0 0/72px 72px}
.hero::after{content:"";position:absolute;inset:10px;border:1px solid rgba(255,255,255,.28);border-radius:210px 210px 12px 12px/122px 122px 12px 12px;pointer-events:none}
.hero>*{position:relative}
.hero .eyebrow{color:#f0d8a6}
.hero .next-name{font-size:2.4rem;font-weight:600;line-height:1.1;margin-top:2px}
.hero .count{font-size:3.2rem;font-weight:500;letter-spacing:.02em;font-variant-numeric:tabular-nums;line-height:1.15}
.hero .meta{opacity:.85;font-size:.88rem}
.hero-times{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-top:18px}
.hero-times div{background:rgba(255,255,255,.1);border-radius:12px;padding:8px 2px;font-size:.74rem;backdrop-filter:blur(4px)}
.hero-times div b{display:block;font-size:1rem;font-weight:600;font-variant-numeric:tabular-nums}
.hero-times div.on{background:#f0d8a6;color:#2a1f08}
@media (max-width:540px){.hero{padding:46px 14px 18px}.hero .count{font-size:2.5rem}.hero .next-name{font-size:2rem}.hero-times{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ask{display:flex;flex-direction:column;gap:10px;background:linear-gradient(135deg,var(--gold-soft),var(--surface))}
.ask .row svg{width:20px;height:20px;color:var(--gold)}
.ask form{gap:8px}
.ask input{flex:1;border-radius:999px;padding-inline:16px}
.ask .btn{padding:9px 14px}
.verse-card .ar{font-size:1.9rem}

/* vakitler */
.times{display:flex;flex-direction:column}
.trow{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 8px;border-bottom:1px solid var(--line)}
.trow:last-child{border-bottom:0}
.trow .t{font-size:1.25rem;font-weight:600;font-variant-numeric:tabular-nums}
.trow.cur{background:var(--primary-soft);border-radius:14px;border-bottom-color:transparent}
.trow.cur .t,.trow.cur .n{color:var(--primary)}
.trow .n{font-weight:600} .trow .d{font-size:.78rem;color:var(--muted)}
.dot{width:10px;height:10px;border-radius:50%;background:var(--line);justify-self:center}
.trow.cur .dot{background:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 25%,transparent)}
.trow.past{opacity:.55}
.tbl-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.9rem}
th,td{padding:8px 10px;text-align:center;border-bottom:1px solid var(--line);white-space:nowrap;font-variant-numeric:tabular-nums}
th{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:500}
td:first-child,th:first-child{text-align:start}
tr.today td{background:var(--primary-soft);font-weight:600}
.compass{width:100%;max-width:220px;margin:0 auto;display:block}

/* kur'an */
.surah-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.sl{display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:12px 14px;text-align:start;transition:border-color .15s}
.sl:hover{border-color:var(--primary)}
.sl b{display:block;font-weight:600}
.sl small{color:var(--muted);font-size:.76rem}
.sno{width:38px;height:38px;flex:none;display:grid;place-items:center;font-size:.82rem;font-weight:600;color:var(--primary);background:var(--primary-soft);clip-path:polygon(50% 0,63% 13%,82% 10%,87% 32%,100% 50%,87% 68%,82% 90%,63% 87%,50% 100%,37% 87%,18% 90%,13% 68%,0 50%,13% 32%,18% 10%,37% 13%);font-variant-numeric:tabular-nums}
.sar{font-family:var(--f-quran);font-size:1.25rem;color:var(--primary);line-height:1.5}
.aud{color:var(--gold)} .aud svg{width:14px;height:14px}
.res{display:flex;flex-direction:column;gap:2px;text-align:start;border:0;border-bottom:1px solid var(--line);background:transparent;padding:12px 4px}
.res:last-child{border-bottom:0}
.res .ar{font-family:var(--f-quran);font-size:1.4rem}
.surah-head{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--line)}
.surah-ar{font-family:var(--f-quran);font-size:2.2rem;color:var(--primary);line-height:1.6}
.player{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;padding:14px;border-radius:16px;background:var(--surface-2);border:1px solid var(--line)}
.pbtn{width:56px;height:56px;border-radius:50%;border:0;background:var(--primary);color:var(--on-primary);display:grid;place-items:center;box-shadow:0 6px 16px color-mix(in srgb,var(--primary) 32%,transparent)}
.pbtn:disabled{opacity:.4;cursor:not-allowed}
.pbtn svg{width:22px;height:22px}
.pctl{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;min-width:0}
.pctl select#psel{max-width:100%;flex:1;min-width:180px}
.pnow{font-size:.82rem;color:var(--muted);width:100%}
.pnow b{color:var(--ink)}
.bism{font-size:1.8rem;text-align:center;color:var(--primary);padding:6px;border-radius:14px}
.ayah{display:flex;flex-direction:column;gap:6px;padding:16px 6px;border-bottom:1px solid var(--line);border-radius:0;transition:background .2s}
.ayah:last-child{border-bottom:0}
.ayah .ar{font-size:var(--arsize,2.1rem)}
.ayah .tl{color:var(--primary);font-style:italic;font-size:.95rem}
.ayah .trn{color:var(--muted)}
[lang="ar"] .ayah .trn{font-family:var(--f-ar);font-size:1.1rem;color:var(--ink);opacity:.85}
.no{display:inline-grid;place-items:center;width:34px;height:34px;font-size:.78rem;font-weight:600;color:var(--gold);border:1.5px solid var(--gold);border-radius:50%;flex:none;background:transparent;font-variant-numeric:tabular-nums;margin-top:8px}
.no:hover{background:var(--gold-soft)}
.ayah.playing,.bism.playing{background:var(--gold-soft);border-radius:16px;padding-inline:14px;border-bottom-color:transparent}
.ayah.playing .no{background:var(--gold);color:var(--surface)}
.ayah.flash{animation:flash 2s ease}
@keyframes flash{0%,40%{background:var(--primary-soft)}100%{background:transparent}}
.hide-tl .tl,.hide-tr .trn{display:none}
.memo .tl,.memo .trn{filter:blur(6px);cursor:pointer;transition:filter .2s}
.memo .ayah.reveal .tl,.memo .ayah.reveal .trn{filter:none}
.imams{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.imam{border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:12px;text-align:start;display:flex;gap:10px;align-items:center}
.imam[aria-pressed="true"]{border-color:var(--primary);background:var(--primary-soft)}
.imam .av{width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:700;font-size:1.05rem;background:var(--gold-soft);color:var(--gold)}
.imam b{display:block;font-size:.9rem;font-weight:600}
.imam small{color:var(--muted);font-size:.74rem}

/* öğren */
.letters{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px;direction:rtl}
.lt{position:relative;border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:8px 4px 6px;text-align:center;transition:transform .15s,border-color .15s}
.lt:hover{transform:translateY(-2px);border-color:var(--primary)}
.lt .g{font-family:var(--f-big);font-size:2.4rem;line-height:1.5;display:block}
.lt .nm{font-size:.76rem;font-weight:500;color:var(--muted)}
.lt.done::after{content:"";position:absolute;top:7px;left:7px;width:8px;height:8px;border-radius:50%;background:var(--good)}
.lt[aria-pressed="true"]{border-color:var(--primary);background:var(--primary-soft)}
.lt.thick .nm{color:var(--gold)}
.ldetail{display:grid;grid-template-columns:190px minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:640px){.ldetail{grid-template-columns:minmax(0,1fr)}}
.bigl{font-family:var(--f-big);font-size:7rem;line-height:1.3;text-align:center;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);color:var(--primary)}
.forms{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;direction:rtl}
.forms div{text-align:center;border:1px dashed var(--line);border-radius:12px;padding:4px}
.forms .g{font-family:var(--f-big);font-size:2.3rem;line-height:1.6;display:block}
.forms small{font-size:.72rem;color:var(--muted)}
.syl{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px}
.sy{border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:6px 6px 8px;text-align:center}
.sy:hover{border-color:var(--primary)}
.sy .g{font-family:var(--f-big);font-size:2.3rem;line-height:1.7;display:block;direction:rtl}
.sy b{font-size:.95rem} .sy small{display:block;font-size:.7rem;color:var(--muted)}
.rule{border-inline-start:3px solid var(--gold)}
.card.rule{border-inline-start-width:3px}
.rule .ex{font-family:var(--f-ar);font-size:1.6rem;direction:rtl;line-height:2}
.letters-inline{font-family:var(--f-big);font-size:1.5rem;direction:rtl;letter-spacing:.15em;color:var(--primary)}
.path{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.step{border:1px solid var(--line);border-radius:16px;padding:14px;background:var(--surface);text-align:start;display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.step .k{font-size:.7rem;font-weight:600;color:var(--gold);letter-spacing:.1em}
.step:hover{border-color:var(--primary)}
.quiz-q{font-family:var(--f-big);font-size:6rem;line-height:1.4;text-align:center;color:var(--primary)}
.quiz-score{font-size:4rem;font-weight:600;color:var(--primary)}
.opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.opt{border:1.5px solid var(--line);background:var(--surface);border-radius:14px;padding:14px;font-weight:600;font-size:1.05rem}
.opt:hover{border-color:var(--primary)}
.opt.ok{border-color:var(--good);background:color-mix(in srgb,var(--good) 14%,var(--surface));color:var(--good)}
.opt.no{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 12%,var(--surface));color:var(--bad)}

/* listeler */
.list{display:flex;flex-direction:column;gap:14px}
.item .ar{font-size:1.65rem}
.item-foot{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;align-items:center;padding-top:10px;border-top:1px solid var(--line)}
.hadith-txt{white-space:pre-line}
.books{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.book{display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:10px 12px;text-align:start}
.book:hover{border-color:var(--primary)}

/* zikir */
.zgrid{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:18px;align-items:start}
@media (max-width:960px){.zgrid{grid-template-columns:minmax(0,1fr)}}
.zlist{display:flex;flex-direction:column;gap:8px}
.zi{border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:12px 14px;text-align:start;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center}
.zi[aria-pressed="true"]{border-color:var(--primary);background:var(--primary-soft)}
.zi .ar{font-size:1.3rem;line-height:1.7;grid-column:1/-1}
.zi .cnt{font-size:1.3rem;font-weight:600;color:var(--gold);font-variant-numeric:tabular-nums;text-align:end}
.zi small{color:var(--muted);font-size:.76rem;grid-column:1/-1}
.counter{position:sticky;top:calc(env(safe-area-inset-top,0px) + 16px);display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center}
.tap{position:relative;width:250px;height:250px;max-width:100%;border:0;background:transparent;border-radius:50%;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.tap svg{position:absolute;inset:0;width:100%;height:100%}
.tap .in{position:absolute;inset:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--primary) 70%,#fff),var(--primary-deep));display:grid;place-items:center;color:#fff;box-shadow:inset 0 -6px 16px rgba(0,0,0,.18),0 10px 24px color-mix(in srgb,var(--primary) 35%,transparent);transition:transform .08s}
.tap:active .in{transform:scale(.96)}
.tap .in b{font-size:3.6rem;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.tap .in span{font-size:.85rem;opacity:.85;font-variant-numeric:tabular-nums}
.cur-ar{font-family:var(--f-ar);font-size:1.6rem;line-height:1.8;direction:rtl}
.steps{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.steps span{font-size:.72rem;font-weight:600;padding:3px 10px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.steps span.on{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.steps span.ok{background:var(--primary-soft);color:var(--primary);border-color:transparent}

/* esmâ */
.esma{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.es{border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:12px 10px;text-align:center;display:flex;flex-direction:column;gap:2px;position:relative}
.es:hover{border-color:var(--gold)}
.es .i{position:absolute;top:8px;inset-inline-start:10px;font-size:.7rem;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.es .ar{font-size:1.7rem;line-height:1.9;color:var(--primary);text-align:center}
.es b{font-size:.9rem;font-weight:600}
.es small{font-size:.74rem;color:var(--muted);line-height:1.4}
.esma-big{font-size:3rem;color:var(--primary);text-align:center;line-height:1.8}

/* haremeyn, yerler */
.harem-hero{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:20px;align-items:center}
@media (max-width:640px){.harem-hero{grid-template-columns:minmax(0,1fr)}.harem-hero>svg{max-width:200px;margin:0 auto}}
.harem-hero>svg{width:100%;height:auto;display:block}
.tl{position:relative;display:flex;flex-direction:column;padding-inline-start:24px}
.tl::before{content:"";position:absolute;inset-inline-start:6px;top:6px;bottom:6px;width:2px;background:var(--line)}
.ev{position:relative;padding-bottom:18px}
.ev::before{content:"";position:absolute;inset-inline-start:-23px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--surface);border:2.5px solid var(--gold)}
.ev .y{font-size:.76rem;font-weight:600;color:var(--gold);font-variant-numeric:tabular-nums}
.ev b{display:block}
.ev p{margin:2px 0 0;color:var(--muted);font-size:.92rem;max-width:66ch}
.places{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.place{border:1px solid var(--line);border-radius:16px;padding:14px;background:var(--surface);text-align:start;display:flex;flex-direction:column;gap:4px}
.place p{margin:4px 0 0;font-size:.86rem;color:var(--muted)}
.place.pl{cursor:pointer}
.place.pl:hover{border-color:var(--primary)}
.place .small svg{width:13px;height:13px;vertical-align:-2px;margin-inline-end:3px}
.ustep{display:grid;grid-template-columns:46px minmax(0,1fr);gap:14px}
.ustep .k{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--primary);color:var(--on-primary);font-weight:600;font-size:1.2rem}
.card ul{margin:6px 0 0;padding-inline-start:20px;display:flex;flex-direction:column;gap:5px}
.hukum{font-size:.72rem;font-weight:600;padding:2px 9px;border-radius:999px;background:var(--gold-soft);color:var(--gold)}
.pack{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.pack label{display:flex;gap:10px;align-items:flex-start;padding:8px 2px;border-bottom:1px dashed var(--line);cursor:pointer;font-size:.93rem}
.pack label:last-child{border-bottom:0}
.pack input{margin-top:4px;accent-color:var(--primary);width:17px;height:17px;flex:none}
.pack label.got span{text-decoration:line-through;color:var(--muted)}
.pack small{display:block;color:var(--muted);font-size:.78rem}
.pack h3{margin-bottom:6px}
.mapcard{padding:12px}
.map{width:100%;height:auto;display:block}
.map .pin{cursor:pointer}
.map .pin:hover circle:last-child,.map .pin:focus circle:last-child{r:7}
.mini-map{max-width:360px;margin:0 auto}

/* asistan */
.chat{display:flex;flex-direction:column;gap:12px;padding:0;overflow:hidden}
.chat>.row{padding:0 16px 14px}
.msgs{display:flex;flex-direction:column;gap:12px;padding:18px;min-height:340px;max-height:62vh;overflow-y:auto;background:var(--surface-2)}
.empty{margin:auto;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:20px}
.ai-orb{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 30% 30%,var(--gold),var(--primary));color:#fff}
.ai-orb svg{width:30px;height:30px}
.msg{max-width:86%;padding:10px 14px;border-radius:18px;line-height:1.6;overflow-wrap:anywhere}
.msg p{margin:0 0 6px} .msg p:last-child{margin:0}
.msg ul,.msg ol{margin:4px 0 8px;padding-inline-start:20px}
.msg.user{align-self:flex-end;background:var(--primary);color:var(--on-primary);border-end-end-radius:6px}
.msg.assistant{align-self:flex-start;background:var(--surface);border:1px solid var(--line);border-end-start-radius:6px}
.msg .srcs{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.msg .srcs a{font-size:.75rem;padding:2px 8px;border-radius:999px;background:var(--primary-soft);text-decoration:none}
.typing{color:var(--muted);animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.4}}
.composer{display:flex;gap:8px;align-items:flex-end;padding:0 16px}
.composer textarea{flex:1;resize:none;border-radius:18px;padding:11px 14px;line-height:1.5}
.composer .btn{width:46px;height:46px;padding:0;border-radius:50%}
[dir="rtl"] .composer .btn svg{transform:scaleX(-1)}

/* ayarlar, hatırlatıcı */
.rem-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.rem-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.langs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.lang{border:1.5px solid var(--line);background:var(--surface);border-radius:16px;padding:16px;font-size:1.05rem}
.lang.on{border-color:var(--primary);background:var(--primary-soft);color:var(--primary)}

/* katmanlar */
.modal{position:fixed;inset:0;z-index:40;background:rgba(5,18,16,.5);display:grid;place-items:center;padding:16px;backdrop-filter:blur(3px)}
.modal .card{max-width:480px;width:100%;text-align:center;display:flex;flex-direction:column;gap:12px;max-height:88vh;overflow:auto}
.modal .card.wide{max-width:600px}
.modal .card.sheet{max-width:560px}
.more-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.more-grid button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 6px;border:1px solid var(--line);border-radius:16px;background:var(--surface);font-size:.8rem;font-weight:500}
.more-grid svg{width:24px;height:24px;color:var(--primary)}
@media (max-width:900px){.modal{align-items:end;padding:0}.modal .card{border-radius:24px 24px 0 0;max-width:none;padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}}
.toast{position:fixed;z-index:50;left:50%;transform:translateX(-50%);bottom:calc(96px + env(safe-area-inset-bottom,0px));width:min(540px,calc(100% - 32px));background:var(--ink);color:var(--bg);border-radius:16px;padding:14px 16px;box-shadow:0 12px 36px rgba(0,0,0,.3);display:flex;gap:12px;align-items:flex-start}
.toast .ar{font-size:1.3rem;line-height:1.8}
.toast .x{background:transparent;border:0;color:inherit;font-size:1.3rem;line-height:1;opacity:.7}
@media (min-width:901px){.toast{bottom:24px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* premium */
.pro-hero{position:relative;overflow:hidden;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;padding:36px 20px 30px;border-radius:var(--r);color:#fff;background:radial-gradient(120% 100% at 50% 0%,#14403a,#071f1c);box-shadow:0 18px 40px rgba(7,31,28,.3)}
.pro-hero::before{content:"";position:absolute;inset:0;opacity:.1;background:#f0d8a6;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cpath d='M36 6l8 11 13-4-4 13 11 8-11 8 4 13-13-4-8 11-8-11-13 4 4-13-11-8 11-8-4-13 13 4z' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E") 0 0/72px 72px;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cpath d='M36 6l8 11 13-4-4 13 11 8-11 8 4 13-13-4-8 11-8-11-13 4 4-13-11-8 11-8-4-13 13 4z' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E") 0 0/72px 72px}
.pro-hero>*{position:relative}
.pro-hero .eyebrow{color:#f0d8a6}
.pro-hero p{margin:0;max-width:58ch;opacity:.85}
.crown{width:72px;height:72px;color:#f0d8a6}
.crown svg{width:100%;height:100%}
.crown.sm{width:44px;height:44px;flex:none;color:var(--gold)}
.info-card{background:var(--primary-soft);border-color:transparent;color:var(--primary);font-weight:500}
.ok-card{display:flex;flex-direction:column;gap:4px;border-color:var(--good)}
.lock-card{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--gold-soft);border-color:transparent}
.lock-card svg{width:22px;height:22px;color:var(--gold);flex:none}
.cmp{table-layout:fixed}
.cmp td,.cmp th{white-space:normal;overflow-wrap:anywhere;padding:10px 6px}
.cmp th:first-child,.cmp td:first-child{width:44%;font-weight:500}
@media (max-width:480px){.cmp td,.cmp th{font-size:.82rem}}
.cmp .pro-col{color:var(--primary);font-weight:600;background:var(--primary-soft)}
.cmp thead .pro-col{border-radius:12px 12px 0 0}
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:480px){.plans{grid-template-columns:minmax(0,1fr)}}
.plan{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:20px 14px 16px;border:2px solid var(--line);background:var(--surface);border-radius:var(--r);text-align:center}
.plan[aria-pressed="true"]{border-color:var(--primary);background:var(--primary-soft);box-shadow:0 8px 24px color-mix(in srgb,var(--primary) 18%,transparent)}
.plan .badge{position:absolute;top:-11px}
.plan .price{font-size:1.7rem;font-weight:600;font-variant-numeric:tabular-nums}
.plan small{color:var(--muted)}
.btn.big{padding:15px 22px;font-size:1.05rem;width:100%;max-width:420px;align-self:center}
.pro-tag{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--gold-soft);color:var(--gold);flex:none}
.pro-tag svg{width:14px;height:14px}
.pro-tag.big{width:40px;height:40px}
.pro-tag.big svg{width:20px;height:20px}
.imam.locked{opacity:.8}
.tile.locked{opacity:.6;cursor:default}
.tile.locked:hover{transform:none;border-color:var(--line)}
.pro-banner{display:flex;align-items:center;gap:14px;text-align:start;cursor:pointer;background:linear-gradient(135deg,var(--gold-soft),var(--surface));border-color:color-mix(in srgb,var(--gold) 35%,var(--line))}
.pro-banner b{display:block}
.pro-banner .btn{pointer-events:none}
@media (max-width:540px){.pro-banner{flex-wrap:wrap}.pro-banner .btn{width:100%}}
.cmp thead th{letter-spacing:.02em;overflow-wrap:normal;font-size:.7rem}
a.pbtn{text-decoration:none}
.row>svg,form>svg{width:20px;height:20px;flex:none;color:var(--muted)}
/* Kur'an sayfası başlığı: kemerli, desenli zemin üzerinde ayet */
.qhero{position:relative;overflow:hidden;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;padding:52px 24px 34px;color:#fff;border-radius:200px 200px var(--r) var(--r)/110px 110px var(--r) var(--r);background:radial-gradient(130% 100% at 50% 0%,#14806f,#062e2a 75%);box-shadow:0 18px 40px rgba(6,46,42,.28)}
.qhero::before{content:"";position:absolute;inset:0;opacity:.12;background:#f0d8a6;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cpath d='M36 6l8 11 13-4-4 13 11 8-11 8 4 13-13-4-8 11-8-11-13 4 4-13-11-8 11-8-4-13 13 4z' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E") 0 0/72px 72px;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cpath d='M36 6l8 11 13-4-4 13 11 8-11 8 4 13-13-4-8 11-8-11-13 4 4-13-11-8 11-8-4-13 13 4z' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E") 0 0/72px 72px}
.qhero::after{content:"";position:absolute;inset:10px;border:1px solid rgba(240,216,166,.35);border-radius:190px 190px 12px 12px/102px 102px 12px 12px;pointer-events:none}
.qhero>*{position:relative}
.qhero .eyebrow{color:#f0d8a6}
.qhero-ayah{font-family:var(--f-quran);direction:rtl;font-size:clamp(1.8rem,4.6vw,3.1rem);line-height:2;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.25);max-width:30ch;text-wrap:balance}
.qhero-tr{margin:0;max-width:52ch;opacity:.9;font-size:1.02rem}
.qhero-ref{font-size:.8rem;color:#f0d8a6;font-weight:600;letter-spacing:.04em}
@media (max-width:540px){.qhero{padding:44px 16px 26px}}

[lang="ar"] body{font-family:"IBM Plex Sans Arabic","Plus Jakarta Sans",system-ui,sans-serif}
.brand b{letter-spacing:.04em}

/* açılış animasyonu */
#splash{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:radial-gradient(120% 90% at 50% 30%,#14705e,#062a23 70%);color:#fff;transition:opacity .55s ease,visibility .55s;cursor:pointer}
#splash.out{opacity:0;visibility:hidden}
#splash .sp{display:flex;flex-direction:column;align-items:center;gap:18px}
#splash svg{width:132px;height:132px;overflow:visible}
#splash .star{fill:none;stroke:#d6b879;stroke-width:2.2;stroke-linejoin:round;stroke-dasharray:260;stroke-dashoffset:260;animation:spDraw 1.1s .1s ease-out forwards}
#splash .ring{fill:none;stroke:#e2bd73;stroke-opacity:.45;stroke-width:1;transform-origin:50% 50%;transform:scale(.6);opacity:0;animation:spRing .9s .55s ease-out forwards}
#splash .glyph{fill:#f5f0e5;opacity:0;animation:spFade .7s .75s ease-out forwards}
#splash .word{font:600 1.7rem "Readex Pro",system-ui,sans-serif;letter-spacing:.6em;padding-inline-start:.6em;color:#f0d8a6;opacity:0;animation:spWord .9s 1s ease-out forwards}
#splash .tag{font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.7);opacity:0;animation:spFade .7s 1.25s ease-out forwards}
@keyframes spDraw{to{stroke-dashoffset:0}}
@keyframes spRing{to{transform:scale(1);opacity:1}}
@keyframes spFade{to{opacity:1}}
@keyframes spWord{from{letter-spacing:1.2em;opacity:0}to{letter-spacing:.32em;opacity:1}}
@media (prefers-reduced-motion:reduce){#splash *{animation-duration:.01s!important;animation-delay:0s!important}}

/* ===== RHUM QURAN 2: sadeleştirilmiş zemin, ana kart geçişi, dokunma alanları ===== */
.bgpat{display:none}
[lang="ar"] body,body{font-family:var(--f-ui)}
h1,h2,h3,h4{font-weight:600;letter-spacing:-.01em}
.hero,.qhero,.pro-hero,#splash{background:var(--hero)}
.hero::before,.qhero::before,.pro-hero::before{display:none}
.hero .eyebrow,.qhero .eyebrow,.pro-hero .eyebrow,.qhero-ref{color:var(--hero-accent)}
.hero-times div.on{background:var(--hero-accent);color:#1b1408}
.crown{color:var(--hero-accent)}
.hero::after{border-color:color-mix(in srgb,var(--hero-accent) 40%,transparent)}
.btn{min-height:44px}
.btn.tight{min-height:34px}
.chip,.seg button{min-height:38px}
.nav button{min-height:44px}
.ar{line-height:2.15}
.quran{line-height:2.4}
.brand b{font-weight:600;letter-spacing:.06em}
.brand-mark{color:var(--gold)}
.method-line{margin:-8px 0 0;text-align:center}
/* ana ekran */
.cta-learn{display:flex;align-items:center;gap:16px;text-align:start;cursor:pointer;color:#fff;background:var(--hero);border:0;transition:transform .15s}
.cta-learn:hover{transform:translateY(-2px)}
.cta-learn b{display:block;font-size:1.2rem}
.cta-learn .small{opacity:.85}
.cta-ic{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:rgba(255,255,255,.1);color:var(--hero-accent);flex:none}
.cta-ic svg{width:30px;height:30px}
.five-card .seg button{padding:8px 10px}
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;text-align:center;font-size:.72rem;color:var(--muted)}
.week span{display:flex;flex-direction:column;align-items:center;gap:4px}
.week i{width:100%;max-width:30px;height:30px;border-radius:9px;background:var(--surface-2);border:1px solid var(--line)}
.week .on i{background:var(--primary-soft);border-color:var(--primary)}
.week .full i{background:var(--primary);border-color:var(--primary)}
.explore .tile svg{color:var(--gold)}
/* 5 dakika */
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;counter-reset:f}
.flow li{counter-increment:f;padding:8px 6px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);text-align:center;font-size:.85rem;color:var(--muted)}
.flow li::before{content:counter(f) " · ";font-variant-numeric:tabular-nums}
.flow li.on{background:var(--primary);border-color:var(--primary);color:var(--on-primary);font-weight:600}
.flow li.ok{background:var(--primary-soft);color:var(--primary)}
textarea{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px;width:100%;resize:vertical;line-height:1.5}
/* ilk kullanım */
.modal .card.onb{gap:14px}
.mark-lg{display:flex;justify-content:center}
.mark-lg .brand-mark{width:64px;height:64px}
.dots{display:flex;gap:6px;justify-content:center}
.dots i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.dots i.on{background:var(--primary);width:22px;border-radius:8px}
@media (max-width:480px){.langs{grid-template-columns:minmax(0,1fr)}}
/* dersler */
.lessons{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.lesson{display:flex;flex-direction:column;gap:8px;text-align:start;cursor:pointer}
.lesson:hover{border-color:var(--primary)}
.lesson b{font-size:1.02rem}
.rev{display:inline-block;font-size:.72rem;font-weight:600;padding:3px 9px;border-radius:999px;border:1px dashed var(--gold);color:var(--gold);white-space:nowrap}
.stepbar{display:flex;gap:4px;flex-wrap:wrap}
.stepbar button{flex:1;min-width:14px;height:8px;border-radius:6px;border:0;background:var(--line);padding:0}
.stepbar button.ok{background:var(--primary-soft);outline:1px solid var(--primary)}
.stepbar button.on{background:var(--primary)}
.stepbar button:focus-visible{outline:2px solid var(--gold)}
.lstep .lead{font-size:1.05rem;line-height:1.7;max-width:66ch}
.figwrap{display:flex;justify-content:center}
.fig{width:120px;height:120px;fill:none;stroke:var(--primary);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.fig .w{stroke:var(--gold);stroke-width:2}
.dua{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:14px 16px;gap:8px}
.dua-ar{font-size:1.65rem}
.lq{display:flex;flex-direction:column;gap:4px;padding-block:6px;border-bottom:1px dashed var(--line)}
.lq:last-of-type{border-bottom:0}
.lq .ar{font-size:1.7rem}
.rk td,.rk th{text-align:center}
.rk td:first-child,.rk th:first-child{text-align:start}
.terms{margin:0;display:grid;gap:10px}
.terms div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.terms dt{font-weight:600;color:var(--primary)}
.terms dd{margin:0;color:var(--muted)}
@media (max-width:520px){.terms div{grid-template-columns:minmax(0,1fr);gap:2px}}
.rep{color:var(--muted);font-weight:500}
/* widget önizlemesi */
.wgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:20px;align-items:start}
@media (max-width:760px){.wgrid{grid-template-columns:minmax(0,1fr)}}
.phone{background:var(--hero);border-radius:28px;padding:28px 20px;display:flex;justify-content:center;min-height:260px;align-items:center}
.widget{border:0;text-align:start;cursor:pointer;border-radius:22px;padding:14px 16px;display:flex;flex-direction:column;gap:6px;box-shadow:0 8px 24px rgba(0,0,0,.3);overflow:hidden}
.widget.small{width:158px;height:158px}
.widget.medium{width:100%;max-width:330px;min-height:158px}
.widget.light{background:#f6f1e7;color:#1b1712}
.widget.dark{background:#15130f;color:#f2ebdd}
.w-eb{font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#b0924f}
.widget.light .w-eb{color:#8a6a2f}
.w-big{font-size:1.25rem;font-variant-numeric:tabular-nums}
.widget.small .w-big{font-size:1.1rem}
.w-ar{font-family:var(--f-quran);font-size:1.15rem;line-height:1.9;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.widget.small .w-ar{-webkit-line-clamp:2;font-size:1rem}
.w-txt{margin:0;font-size:.8rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;opacity:.9}
.widget.small .w-txt{-webkit-line-clamp:4}
.w-foot{margin-top:auto;font-size:.66rem;opacity:.7}
.w-times{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;font-size:.62rem;text-align:center}
.w-times span{border-radius:8px;padding:4px 0;background:rgba(127,127,127,.12)}
.w-times span.on{background:#8cc5ad;color:#0b1a14}
.w-times b{display:block;font-size:.72rem;font-variant-numeric:tabular-nums}
/* yasal */
.draft{background:var(--gold-soft);border-color:transparent}
.legal p{max-width:70ch;line-height:1.7}
mark{background:var(--gold-soft);color:var(--gold);border-radius:4px;padding:0 4px;font-weight:600}
.srcs td,.srcs th{white-space:normal;text-align:start;vertical-align:top}
/* ayarlar: palet ve yazı tipi seçimi */
.pals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:480px){.pals{grid-template-columns:minmax(0,1fr)}}
.pal{display:flex;flex-direction:column;gap:8px;align-items:flex-start;border:1.5px solid var(--line);background:var(--surface);border-radius:16px;padding:12px;text-align:start}
.pal[aria-pressed="true"]{border-color:var(--primary);background:var(--primary-soft)}
.pal .sw{display:flex;gap:4px}
.pal .sw i{width:22px;height:22px;border-radius:50%;border:1px solid rgba(127,127,127,.3)}
.pal .grad{width:100%;height:28px;border-radius:10px}
.fonts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:480px){.fonts{grid-template-columns:minmax(0,1fr)}}
.fontb{border:1.5px solid var(--line);background:var(--surface);border-radius:14px;padding:12px;text-align:start;display:flex;flex-direction:column;gap:2px}
.fontb[aria-pressed="true"]{border-color:var(--primary);background:var(--primary-soft)}
.fontb span{font-size:1.25rem}

/* ===== Editoryal düzen: mushaf sayfasından esinlenen dergi dili ===== */
body{font-size:16px;line-height:1.65}
.wrap{max-width:1080px;gap:28px}
h1,h2,.hero .next-name,.qhero-ayah+*,.pro-hero h1,.cta-learn b,.lesson b,.five-card h2{font-family:var(--f-display)}
h1{font-size:clamp(2.1rem,4.4vw,3.2rem);font-weight:500;letter-spacing:-.018em;line-height:1.06}
h2{font-size:clamp(1.45rem,2.6vw,1.9rem);font-weight:500;letter-spacing:-.01em;line-height:1.15}
h3{font-size:1.12rem;font-weight:600}
:root[data-style="modern"] h1,:root[data-style="modern"] h2{font-weight:600;letter-spacing:-.02em}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:.68rem;letter-spacing:.22em;font-weight:600}
.eyebrow::before{content:"";width:8px;height:8px;flex:none;background:currentColor;clip-path:polygon(50% 0,61% 21%,85% 15%,79% 39%,100% 50%,79% 61%,85% 85%,61% 79%,50% 100%,39% 79%,15% 85%,21% 61%,0 50%,21% 39%,15% 15%,39% 21%)}
[lang="ar"] .eyebrow{letter-spacing:0}
.sec-head{gap:10px;padding-bottom:18px;border-bottom:1px solid var(--line);position:relative}
.sec-head::after{content:"";position:absolute;inset-inline-start:0;bottom:-2px;width:72px;height:3px;background:var(--gold);border-radius:2px}
.sec-head p{font-size:1.04rem;line-height:1.6;max-width:62ch}
/* kartlar: gölgesiz, ince çizgi */
.card{box-shadow:none;border-radius:16px;padding:22px}
.tile:hover,.lesson:hover{border-color:var(--gold);transform:translateY(-2px)}
/* ana kart: unvan (sure başlığı) çerçevesi */
.hero{border-radius:28px;padding:50px 28px 26px;box-shadow:0 24px 60px -24px rgba(0,0,0,.55)}
.hero::after{inset:12px;border:1px solid color-mix(in srgb,var(--hero-accent) 38%,transparent);border-radius:20px;box-shadow:inset 0 0 0 4px transparent,inset 0 0 0 5px color-mix(in srgb,var(--hero-accent) 16%,transparent)}
.hero .eyebrow{justify-content:center}
.hero .next-name{font-style:italic;font-weight:400;font-size:clamp(2rem,5vw,2.8rem)}
.hero .count{font-family:var(--f-display);font-weight:400;font-size:clamp(3.2rem,10vw,5.6rem);letter-spacing:-.02em;line-height:1}
:root[data-style="modern"] .hero .count{font-weight:300}
.hero .meta{letter-spacing:.02em}
.hero-times{gap:0;margin-top:24px}
.hero-times div{background:transparent;border-radius:0;border-top:1px solid rgba(255,255,255,.16);padding:10px 2px 2px;backdrop-filter:none}
.hero-times div b{font-family:var(--f-display);font-weight:400;font-size:1.2rem}
.hero-times div.on{background:transparent;color:var(--hero-accent);border-top:2px solid var(--hero-accent)}
.method-line{margin-top:-14px}
/* günün ayeti: kenar süslemeli alıntı */
.verse-card{background:transparent;border:0;border-block:1px solid var(--line);border-radius:0;padding-block:34px;position:relative}
.verse-card::before{content:"";position:absolute;top:-7px;left:50%;width:13px;height:13px;transform:translateX(-50%);background:var(--gold);clip-path:polygon(50% 0,61% 21%,85% 15%,79% 39%,100% 50%,79% 61%,85% 85%,61% 79%,50% 100%,39% 79%,15% 85%,21% 61%,0 50%,21% 39%,15% 15%,39% 21%)}
.verse-card .ar{font-size:clamp(1.9rem,4vw,2.6rem)}
.verse-card .tr{font-family:var(--f-display);font-style:italic;font-size:1.25rem;line-height:1.5;margin-inline:auto;text-align:center}
:root[data-style="modern"] .verse-card .tr{font-style:normal;font-size:1.1rem}
.verse-card .src{letter-spacing:.06em;text-transform:uppercase;font-size:.72rem}
/* ana ekran öğeleri */
.cta-learn{border-radius:20px;padding:24px}
.cta-learn b{font-size:1.5rem;font-weight:500;line-height:1.15;margin-bottom:4px}
.five-card{border-color:color-mix(in srgb,var(--gold) 40%,var(--line))}
.explore{gap:12px}
.tile{padding:18px;gap:8px}
.tile b{font-family:var(--f-display);font-weight:500;font-size:1.15rem}
.lesson b{font-weight:500;font-size:1.2rem;line-height:1.2}
.stat b{font-family:var(--f-display);font-weight:500}
/* menü */
.side{padding:26px 16px;gap:24px}
.brand b{font-family:var(--f-display);font-size:1.6rem;font-weight:500;letter-spacing:.02em}
.brand-mark{width:42px;height:42px}
.nav button{font-size:.93rem;border-radius:10px}
.nav button[aria-current="page"]{background:transparent;color:var(--ink);font-weight:600;box-shadow:inset 3px 0 0 var(--gold)}
[dir="rtl"] .nav button[aria-current="page"]{box-shadow:inset -3px 0 0 var(--gold)}
.tabbar button[aria-current="page"]{background:transparent;color:var(--gold)}
/* düğmeler */
.btn{border-radius:12px;font-weight:600;letter-spacing:.01em}
.btn.primary{box-shadow:none}
.chip,.seg button{border-radius:10px}
.seg{border-radius:12px}
/* Kur'an ve hadis başlıkları */
.qhero,.pro-hero{border-radius:28px}
.qhero-ayah{font-size:clamp(2rem,5vw,3.3rem)}
.surah-head{border-bottom:1px solid var(--line);padding-bottom:18px}
.item{border-radius:16px}
/* stil önizleme düğmeleri */
.styles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.styleb{border:1.5px solid var(--line);background:var(--surface);border-radius:14px;padding:14px;text-align:start;display:flex;flex-direction:column;gap:4px}
.styleb[aria-pressed="true"]{border-color:var(--primary);background:var(--primary-soft)}
.styleb .big{font-size:1.6rem;line-height:1.1}
@media (max-width:540px){.hero{padding:42px 16px 18px}.card{padding:18px}}

.sw-pick{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.swp{border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:4px;padding:0;font-size:.7rem;color:var(--muted)}
.swp span{width:100%;aspect-ratio:1;max-width:52px;border-radius:14px;border:2px solid transparent}
.swp[aria-pressed="true"] span{border-color:var(--gold);box-shadow:0 0 0 2px var(--surface) inset}
.swp[aria-pressed="true"]{color:var(--ink);font-weight:600}
@media (max-width:420px){.sw-pick{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pals{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}

/* ===== RHUM QURAN 3: rafine editoryal düzen, gruplu menü, hareket sistemi ===== */
/* sol menü: hafif ağırlık, gruplar, kayan altın gösterge */
.nav{position:relative;gap:14px}
.nav-group{display:flex;flex-direction:column;gap:1px}
.nav-h{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);opacity:.8;padding:4px 14px 6px;font-weight:500}
[lang="ar"] .nav-h{letter-spacing:0;font-size:.75rem}
.nav button{font-weight:400;font-size:.92rem;gap:13px;padding:8px 14px;min-height:40px;line-height:1.25;color:var(--muted);background:transparent;position:relative;z-index:1;transition:color .2s,background .2s}
.nav button svg{width:18px;height:18px;stroke-width:1.6;opacity:.85}
.nav button:hover{background:color-mix(in srgb,var(--ink) 4%,transparent);color:var(--ink)}
.nav button[aria-current="page"]{color:var(--ink);font-weight:500;background:color-mix(in srgb,var(--gold) 9%,transparent);box-shadow:none}
.nav button[aria-current="page"] svg{color:var(--gold);opacity:1}
.nav-ind{position:absolute;inset-inline-start:0;top:0;width:2px;border-radius:2px;background:var(--gold);opacity:0;transition:transform .38s cubic-bezier(.2,.8,.2,1),height .3s,opacity .2s;pointer-events:none;z-index:2}
[dir="rtl"] .nav-ind{inset-inline-start:auto;inset-inline-end:0}
.side{gap:20px}
.more-g{display:flex;flex-direction:column;gap:6px;text-align:start}
/* karşılama */
.greet{display:flex;flex-direction:column;gap:2px;margin-bottom:-8px}
.greet h1{font-size:clamp(2.2rem,5vw,3.4rem)}
.dateline{margin:0;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:500}
[lang="ar"] .dateline{letter-spacing:0;font-size:.9rem}
/* devam */
.cont2{padding:26px;border-color:color-mix(in srgb,var(--gold) 35%,var(--line));background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 5%,var(--surface)),var(--surface))}
.cont-main{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.cont-kind{font-size:.85rem;color:var(--muted)}
.cont-title{font-size:clamp(1.7rem,3.6vw,2.4rem);margin-top:4px}
.cont-more{list-style:none;margin:16px 0 0;padding:12px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.cont-more li{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.lead{font-size:1.06rem;line-height:1.6}
/* küçük adım */
.small-step{gap:12px}
.goal-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.goal-row{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.goal-row:last-child{border-bottom:0}
.gcheck{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;flex:none;color:transparent;transition:background .3s,border-color .3s,color .3s}
.gcheck svg{width:16px;height:16px;stroke-width:2.4;stroke-dasharray:24;stroke-dashoffset:24}
.goal-row.is-done .gcheck{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.goal-row.is-done .gcheck svg{stroke-dashoffset:0}
.goal-row.is-done b{color:var(--muted);font-weight:500}
.gdone{color:var(--primary);font-weight:500}
[data-motion="on"] .goal-row.just-done .gcheck{animation:pop .5s cubic-bezier(.2,1.4,.4,1)}
[data-motion="on"] .goal-row.just-done .gcheck svg{transition:stroke-dashoffset .45s .1s ease-out}
@keyframes pop{0%{transform:scale(.8)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
/* ayet sahnesi */
.verse-scene{position:relative;overflow:hidden;border-radius:24px;color:#f5f0e5;background:#0b1d17;min-height:300px;display:grid;place-items:center;padding:44px 28px;isolation:isolate}
.verse-scene .scene-text{position:relative;z-index:2;max-width:760px;text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center}
.verse-scene .eyebrow{color:#e7cf95}
.verse-scene .ar{color:#fff;font-size:clamp(1.9rem,4.2vw,2.7rem);text-shadow:0 1px 18px rgba(0,0,0,.35)}
.verse-scene .tr{color:#f1ebdd;font-family:var(--f-display);font-style:italic;font-size:1.22rem;line-height:1.5;text-align:center;margin:0}
.verse-scene .src{color:#e7cf95}
.verse-scene .btn{color:#f5f0e5;border-color:rgba(245,240,229,.25);background:rgba(0,0,0,.18)}
.verse-scene .rep{color:#d9d2c2}
.has-scene{position:relative;isolation:isolate}
.has-scene>*:not(.scene){position:relative;z-index:2}
.scene{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.scene .veil{position:absolute;inset:0;background:radial-gradient(90% 75% at 50% 52%,rgba(6,18,14,.82),rgba(6,18,14,.55) 60%,rgba(6,18,14,.25))}
.scene .glow{position:absolute;border-radius:50%;filter:blur(40px);opacity:.55}
.scene .g1{width:60%;height:90%;left:-10%;top:-30%;background:radial-gradient(circle,#2f8f6d,transparent 65%)}
.scene .g2{width:55%;height:80%;right:-12%;bottom:-35%;background:radial-gradient(circle,#c9a85c,transparent 65%);opacity:.28}
.scene svg{position:absolute;inset:0;width:100%;height:100%}
.scene-nur{background:linear-gradient(160deg,#123b30,#0b1d17 70%)}
.scene-nur .lat path{fill:none;stroke:#d6b879;stroke-width:1;opacity:.16}
.scene-nur .sweep{position:absolute;inset:-20%;background:linear-gradient(100deg,transparent 40%,rgba(214,184,121,.10) 50%,transparent 60%)}
.scene-mekke{background:linear-gradient(180deg,#132b23 0%,#0f241d 55%,#0a1813 100%)}
.scene-medine{background:linear-gradient(180deg,#123328 0%,#0d2620 60%,#09170f 100%)}
.scene .hill{fill:#0c1f18;opacity:.9}
.scene .min rect,.scene .min path{fill:#1d3a30}
.scene .arc{fill:#173329}
.scene .kf{fill:#070908}.scene .ks{fill:#111412}.scene .kt{fill:#1b1f1c}
.scene .kb{fill:#c9a85c;opacity:.85}.scene .kd{fill:#b8954a;opacity:.7}
.scene .ground{fill:#1a3a2f;opacity:.6}
.scene .drum{fill:#1e5d45}.scene .dome{fill:#2f8a62}.scene .fin{fill:none;stroke:#d6b879;stroke-width:3}
.scene-medine .min rect,.scene-medine .min path{fill:#21463a}
/* hareket: yalnızca transform ve opacity, çok yavaş */
[data-motion="on"] .scene .g1{animation:drift1 38s ease-in-out infinite alternate}
[data-motion="on"] .scene .g2{animation:drift2 46s ease-in-out infinite alternate}
[data-motion="on"] .scene-nur .lat{animation:latmove 90s linear infinite alternate}
[data-motion="on"] .scene-nur .sweep{animation:sweep 24s ease-in-out infinite}
[data-motion="on"] .scene .far{animation:par1 60s ease-in-out infinite alternate}
[data-motion="on"] .scene .mid{animation:par2 60s ease-in-out infinite alternate}
[data-motion="on"] .scene .near{animation:kenburns 70s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(18%,22%) scale(1.15)}}
@keyframes drift2{to{transform:translate(-14%,-18%) scale(1.1)}}
@keyframes latmove{to{transform:translate(-4%,-3%) scale(1.04)}}
@keyframes sweep{0%,100%{transform:translateX(-30%);opacity:0}50%{transform:translateX(30%);opacity:1}}
@keyframes par1{to{transform:translateX(-1.5%)}}
@keyframes par2{to{transform:translateX(1%) scale(1.01)}}
@keyframes kenburns{to{transform:scale(1.05) translateY(-1%)}}
.scene.off *,.is-hidden .scene *,.off.has-scene .scene *{animation-play-state:paused!important}
.has-scene.off .scene *{animation-play-state:paused!important}
[data-motion="off"] .scene *{animation:none!important}
.qhero.has-scene{background:#0b1d17}
.qhero.has-scene::after{z-index:2}
/* hadis satırı ve öğren kısayolu */
.hadith-line{display:flex;flex-direction:column;gap:10px;padding:6px 4px 18px;border-bottom:1px solid var(--line)}
.hq{font-family:var(--f-display);font-size:1.15rem;line-height:1.55;max-width:70ch}
:root[data-style="modern"] .hq{font-family:var(--f-ui);font-size:1.05rem}
.learn-line{display:flex;align-items:center;gap:16px;text-align:start;padding:18px 20px;border-radius:18px;border:1px solid color-mix(in srgb,var(--gold) 35%,var(--line));background:var(--surface);transition:transform .2s,border-color .2s}
.learn-line b{display:block;font-family:var(--f-display);font-size:1.35rem;font-weight:500}
.learn-line .cta-ic{background:var(--primary-soft);color:var(--primary);width:50px;height:50px;border-radius:14px}
.learn-line .arrow{color:var(--gold);transform:scaleX(-1)}
[dir="rtl"] .learn-line .arrow{transform:none}
.learn-line:hover{border-color:var(--gold);transform:translateY(-2px)}
/* haftalık ve keşfet */
.week2{display:flex;flex-direction:column;gap:12px}
.wk{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;text-align:center}
.wk span{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:.72rem;color:var(--muted)}
.wk i{width:10px;height:10px;border-radius:50%;background:var(--line)}
.wk .on i{background:var(--primary)}
.wk .today small{color:var(--ink);font-weight:600}
.explore2{display:flex;flex-direction:column;gap:12px}
.ex-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));border-top:1px solid var(--line)}
.ex-list button{display:flex;flex-direction:column;gap:2px;text-align:start;padding:14px 4px 14px 0;border:0;border-bottom:1px solid var(--line);background:transparent;transition:color .2s}
.ex-list b{font-family:var(--f-display);font-weight:500;font-size:1.12rem}
.ex-list span{font-size:.84rem;color:var(--muted)}
.ex-list button:hover b{color:var(--gold)}
/* hedefler sayfası */
.goal-card.paused{opacity:.6}
.hist{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:4px;margin-top:6px}
.hcell{border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:3px;padding:0;min-height:34px}
.hcell i{width:100%;max-width:22px;aspect-ratio:1;border-radius:6px;background:var(--surface-2);border:1px solid var(--line)}
.hcell.full i{background:var(--primary);border-color:var(--primary)}
.hcell.small i{background:color-mix(in srgb,var(--primary) 40%,var(--surface));border-color:var(--primary)}
.hcell small{font-size:.6rem;color:var(--muted)}
.picks{display:flex;flex-wrap:wrap;gap:8px}
.pick{border:1.5px solid var(--line);background:var(--surface);border-radius:12px;padding:10px 14px;min-height:44px;font-weight:500}
.pick.on{border-color:var(--primary);background:var(--primary-soft);color:var(--primary)}
.pick.custom{display:inline-flex;align-items:center;padding:4px 8px}
.pick.custom input{width:110px;border:0;background:transparent}
.days{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.dayc{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:10px;padding:6px 10px;font-size:.85rem;cursor:pointer}
.dayc input{accent-color:var(--primary)}
/* takip */
.daynav{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.daynav b{font-family:var(--f-display);font-weight:500;font-size:1.3rem}
.checks5{display:flex;flex-wrap:wrap;gap:8px}
.chk{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:12px;padding:10px 14px;min-height:44px;cursor:pointer}
.chk input{width:18px;height:18px;accent-color:var(--primary)}
.chk:has(input:checked){border-color:var(--primary);background:var(--primary-soft)}
.kaza{display:flex;flex-direction:column;gap:6px}
.kz{display:grid;grid-template-columns:minmax(0,1fr) 40px 52px 40px;align-items:center;gap:6px;padding:4px 0;border-bottom:1px dashed var(--line)}
.kz b{text-align:center;font-size:1.1rem}
.ram{border-color:color-mix(in srgb,var(--gold) 40%,var(--line))}
.ram-times{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ram-times div{display:flex;flex-direction:column}
.ram-times b{font-family:var(--f-display);font-size:2rem;font-weight:500}
.ram-grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px}
.ram-grid span{text-align:center;font-size:.72rem;padding:6px 0;border-radius:8px;background:var(--surface-2);border:1px solid var(--line)}
.ram-grid span.on{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.ram-grid span.cur{outline:2px solid var(--gold)}
/* okuyucu: kayıt düğmesi, not, ezber */
.abtn{border:0;background:transparent;color:var(--muted);width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:none;margin-top:8px}
.abtn svg{width:17px;height:17px}
.abtn.on{color:var(--gold)}
.abtn:hover{background:var(--surface-2)}
.anote{margin:4px 0 0;padding:8px 12px;border-inline-start:2px solid var(--gold);background:var(--gold-soft);border-radius:8px;font-size:.9rem}
.memo-card{display:flex;flex-direction:column;gap:10px;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--surface-2)}
.ayah.in-range{border-inline-start:2px solid color-mix(in srgb,var(--gold) 60%,transparent);padding-inline-start:10px}
.memo-hide .ayah.in-range .quran,.memo-hide .ayah.in-range .tl,.memo-hide .ayah.in-range .trn{filter:blur(7px);cursor:pointer;transition:filter .2s}
.memo-hide .ayah.in-range.reveal .quran,.memo-hide .ayah.in-range.reveal .tl,.memo-hide .ayah.in-range.reveal .trn{filter:none}
.plan-card{border-color:color-mix(in srgb,var(--gold) 30%,var(--line))}
.sharecard{width:100%;max-width:360px;border-radius:12px;align-self:center;box-shadow:0 10px 30px rgba(0,0,0,.25)}
/* sayfa geçişi, ilk görünüş, düğme geri bildirimi */
[data-motion="on"] #view.enter{animation:viewIn .32s cubic-bezier(.2,.8,.2,1)}
@keyframes viewIn{from{opacity:.001;transform:translateY(8px)}to{opacity:1;transform:none}}
[data-motion="on"] #view .rv{opacity:.001;transform:translateY(14px)}
[data-motion="on"] #view .rv.in{opacity:1;transform:none;transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
[data-motion="on"] .btn,[data-motion="on"] .tile,[data-motion="on"] .pick,[data-motion="on"] .chk{transition:transform .15s ease,background .2s,border-color .2s,color .2s}
[data-motion="on"] .btn:active,[data-motion="on"] .pick:active{transform:scale(.97)}
[data-motion="on"] .btn.primary:hover{transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){[data-motion] .scene *{animation:none!important}#view.enter{animation:none!important}}
@media (max-width:640px){.verse-scene{padding:36px 18px;min-height:260px;border-radius:20px}.cont2{padding:20px}.hist small{display:none}.kz{grid-template-columns:minmax(0,1fr) 44px 44px 44px}}

/* ===== RHUM QURAN 4: video, özel günler, dualar, sade takip, ziyaret rehberi, pusula, hikâye, baloncuk, harita ===== */
.bgvid{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:inherit}
.bgvid img,.bgvid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bgvid .vveil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,14,11,.55),rgba(4,14,11,.72) 55%,rgba(4,14,11,.86))}
.hero.has-video{background:#06120e}
.hero.has-video>*:not(.bgvid){position:relative;z-index:2}
.hero.has-video::after{z-index:3}
.credit{display:block;font-size:.68rem;opacity:.75;letter-spacing:.02em}
.credit a{color:inherit}
.hero .credit{margin-top:14px;color:#e9e2d2}
.media-hero{position:relative;min-height:340px;border-radius:24px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:28px;color:#f5f0e5;isolation:isolate;background:#06120e}
.media-hero>*:not(.bgvid){position:relative;z-index:2}
.media-hero h2{font-size:clamp(2rem,4.5vw,3rem);color:#fff}
.media-hero .eyebrow{color:#e7cf95}
.media-hero .credit{margin-top:8px;color:#e9e2d2}
.photo{margin:0;display:flex;flex-direction:column;gap:6px}
.photo img{width:100%;max-height:420px;object-fit:cover;border-radius:20px;display:block;background:var(--surface-2)}
.photo figcaption{color:var(--muted)}
/* yatay gezinme, açılır bölümler, sade metin */
.hscroll{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;border-bottom:1px solid var(--line)}
.hscroll::-webkit-scrollbar{display:none}
.hscroll button{flex:none;border:0;background:transparent;padding:10px 4px;margin-inline-end:14px;font-size:.95rem;color:var(--muted);border-bottom:2px solid transparent;min-height:44px;white-space:nowrap}
.hscroll button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--gold);font-weight:500}
.acc{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:4px 0}
.acc+.acc{border-top:0}
.acc summary{cursor:pointer;list-style:none;padding:12px 2px;font-weight:500;display:flex;justify-content:space-between;align-items:center;min-height:44px}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";color:var(--gold);font-size:1.3rem;line-height:1}
.acc[open] summary::after{content:"–"}
.acc>*:not(summary){margin-bottom:12px}
.prose2{display:flex;flex-direction:column;gap:12px;max-width:72ch}
.prose2 p{margin:0;line-height:1.75}
ul.clean{margin:0;padding-inline-start:20px;display:flex;flex-direction:column;gap:6px;line-height:1.6}
ul.clean li::marker{color:var(--gold)}
.tags,.tagt,.tagq{display:inline-block;font-size:.7rem;font-weight:600;padding:2px 9px;border-radius:999px;white-space:nowrap}
.tags{background:var(--primary-soft);color:var(--primary)}
.tagq{background:var(--gold-soft);color:var(--gold)}
.tagt{border:1px dashed var(--gold);color:var(--gold)}
/* ana sayfa kategorileri ve özel gün kartı */
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:2px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cats button{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:16px 10px;border:0;background:transparent;text-align:start;min-height:84px;border-radius:12px}
.cats button svg{width:22px;height:22px;color:var(--gold)}
.cats button span{font-size:.92rem}
.cats button:hover{background:color-mix(in srgb,var(--gold) 7%,transparent)}
.sp-card{display:flex;align-items:center;gap:18px;padding:16px 18px;border:1px solid color-mix(in srgb,var(--gold) 35%,var(--line));border-radius:18px;background:var(--surface);text-align:start;width:100%}
.sp-when{display:flex;flex-direction:column;align-items:center;min-width:76px;padding-inline-end:16px;border-inline-end:1px solid var(--line)}
.sp-when b{font-family:var(--f-display);font-weight:500;font-size:1.1rem;color:var(--gold);text-align:center}
.sp-when small{color:var(--muted)}
.sp-t{display:block;font-family:var(--f-display);font-weight:500;font-size:1.3rem}
.sp-card .arrow{color:var(--gold);transform:scaleX(-1)}
[dir="rtl"] .sp-card .arrow{transform:none}
.cal-bar{display:flex;flex-wrap:wrap;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.sp-list{list-style:none;margin:0;padding:0}
.sp-list button{display:flex;align-items:center;gap:16px;width:100%;padding:14px 4px;border:0;border-bottom:1px solid var(--line);background:transparent;text-align:start;flex-wrap:wrap}
.sp-list button:hover b{color:var(--gold)}
.sp-date{display:flex;flex-direction:column;align-items:center;width:52px;flex:none}
.sp-date b{font-family:var(--f-display);font-size:1.6rem;font-weight:500;line-height:1}
.sp-date small{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.sp-list .grow{display:flex;flex-direction:column;gap:2px;min-width:200px}
.sp-list .grow b{font-family:var(--f-display);font-weight:500;font-size:1.15rem}
/* dualar */
.needs{display:flex;flex-direction:column}
.need{display:flex;flex-direction:column;gap:12px;padding:22px 0;border-bottom:1px solid var(--line)}
.need-body{display:flex;flex-direction:column;gap:8px}
.need-body .ar{font-size:1.7rem}
.need .part{color:var(--gold)}
.need-meta{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;align-items:center}
.count-src{margin:0;font-size:.85rem;padding:8px 12px;border-inline-start:2px solid var(--gold);background:var(--gold-soft);border-radius:8px}
.need-act{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.counter2{display:inline-flex;align-items:center;gap:8px;margin-inline-start:auto;flex-wrap:wrap}
.counter2 b{font-family:var(--f-display);font-size:1.4rem;min-width:2ch;text-align:center}
[data-motion="on"] .need.goal-hit{animation:hit .8s ease}
@keyframes hit{0%{background:transparent}30%{background:var(--primary-soft)}100%{background:transparent}}
[data-dfav][aria-pressed="true"]{color:var(--gold)}
/* sade takip */
.track2{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.trow2{display:grid;grid-template-columns:minmax(110px,180px) minmax(0,1fr);gap:6px 16px;align-items:center;padding:16px 2px;border-bottom:1px solid var(--line)}
.trow2 .tl2{font-family:var(--f-display);font-size:1.15rem;font-weight:500}
.trow2 small{grid-column:2}
.pchips{display:flex;flex-wrap:wrap;gap:6px}
.pchip,.tog{border:1.5px solid var(--line);background:var(--surface);border-radius:999px;padding:8px 14px;min-height:44px;font-weight:500;display:inline-flex;align-items:center;gap:6px}
.pchip.on,.tog.on{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.tog svg{width:16px;height:16px}
[data-motion="on"] .pchip.pop{animation:pop .45s cubic-bezier(.2,1.4,.4,1)}
@media (max-width:560px){.trow2{grid-template-columns:minmax(0,1fr)}.trow2 small{grid-column:1}}
/* ziyaret rehberi */
.qd-places{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.qd-place{display:flex;flex-direction:column;gap:8px}
.qd-place h4{font-family:var(--f-display);font-weight:500;font-size:1.3rem;margin:4px 0 0}
.qd-place p{margin:0}
.types{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0;border-top:1px solid var(--line)}
.type{padding:14px 14px 14px 0;border-bottom:1px solid var(--line)}
.type b{font-family:var(--f-display);font-weight:500;font-size:1.2rem}
.hsteps{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.hsteps li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;padding:18px 0;border-bottom:1px solid var(--line)}
.hday{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);padding-top:4px}
.hsteps h3{font-family:var(--f-display);font-weight:500;font-size:1.25rem;margin-bottom:4px}
@media (max-width:560px){.hsteps li{grid-template-columns:minmax(0,1fr);gap:4px}}
.pack2{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px}
.pack2 h3{font-family:var(--f-display);font-weight:500;margin-bottom:6px}
.pk{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 0;border-bottom:1px dashed var(--line)}
.pk label{display:flex;gap:10px;align-items:flex-start;cursor:pointer;flex:1;min-height:36px;padding-top:6px}
.pk input{width:18px;height:18px;accent-color:var(--primary);margin-top:2px;flex:none}
.pk.got span{text-decoration:line-through;color:var(--muted)}
.pk .btn svg{width:14px;height:14px}
#pkAdd input{flex:1}
/* pusula */
.cmp-live{display:flex;flex-direction:column;align-items:center;gap:12px;padding-top:14px;margin-top:6px;border-top:1px solid var(--line);width:100%}
.cmp-svg{width:180px;height:180px}
.cmp-dial circle{fill:var(--surface-2);stroke:var(--line);stroke-width:2}
.cmp-dial text{fill:var(--muted);font-size:13px;text-anchor:middle;font-weight:600}
.cmp-dial,.cmp-needle{transform-origin:100px 100px;transform-box:view-box}
[data-motion="on"] .cmp-dial,[data-motion="on"] .cmp-needle{transition:transform .25s linear}
.cmp-needle path{fill:var(--gold)}.cmp-needle rect{fill:var(--ink)}
.cmp-hub{fill:var(--primary)}
.cmp-live.aligned .cmp-needle path{fill:var(--good)}
#cmpDeg{font-size:1.4rem;font-family:var(--f-display)}
/* hikâye önizleme */
.story-prev{display:flex;gap:10px;overflow-x:auto;justify-content:center;padding:4px}
.story-prev img{height:340px;width:auto;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.3);flex:none}
@media (max-width:480px){.story-prev img{height:280px}}
/* okuyucu: kaynak satırı ve tefsir */
.src-line{margin:0;font-size:.82rem;color:var(--muted);padding:10px 0;border-bottom:1px solid var(--line)}
.tafsir{margin-top:8px;padding:12px 14px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.tafsir .ar{font-size:1.15rem;line-height:2}
/* asistan baloncuğu */
.chat-bubble{position:fixed;z-index:24;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(24px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:2px;touch-action:none}
.cb-main{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;padding:12px 18px 12px 14px;min-height:48px;background:var(--primary);color:var(--on-primary);font-weight:600;box-shadow:0 10px 28px rgba(0,0,0,.28);cursor:grab}
.cb-main svg{width:20px;height:20px}
.cb-x{width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--muted);display:grid;place-items:center;margin-inline-start:-6px;align-self:flex-start}
.cb-x svg{width:12px;height:12px}
@media (max-width:900px){.chat-bubble{bottom:calc(96px + env(safe-area-inset-bottom,0px))}}
/* harita */
.map-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.map-tools input{flex:1;min-width:200px}
.map-wrap{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}
.map-wrap:not(:has(.pl-panel)){grid-template-columns:minmax(0,1fr)}
.map .pin.sel circle:last-child{r:8;stroke:var(--ink)}
.cl-n{fill:var(--on-primary);font-size:10px;font-weight:700;pointer-events:none}
.pl-panel{position:relative;display:flex;flex-direction:column;gap:8px;padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}
.pl-panel h3{font-family:var(--f-display);font-weight:500;font-size:1.35rem;padding-inline-end:36px}
.pl-close{position:absolute;top:10px;inset-inline-end:10px}
.pl-list{list-style:none;margin:0;padding:0;columns:2 280px;column-gap:24px}
.pl-list li{break-inside:avoid}
.pl-list button{display:flex;flex-direction:column;gap:2px;width:100%;text-align:start;border:0;border-bottom:1px solid var(--line);background:transparent;padding:10px 2px}
.pl-list button[aria-pressed="true"] b{color:var(--gold)}
@media (max-width:900px){.map-wrap{grid-template-columns:minmax(0,1fr)}.pl-panel{position:fixed;z-index:26;inset-inline:max(8px,env(safe-area-inset-left,0px));bottom:calc(8px + env(safe-area-inset-bottom,0px));max-height:62vh;overflow:auto;border-radius:20px 20px 16px 16px;box-shadow:0 -10px 30px rgba(0,0,0,.25)}}
/* marka önizleme */
.brand-preview{display:flex;flex-direction:column;gap:14px;align-items:flex-start;padding:22px 0;border-bottom:1px solid var(--line)}
.brand-preview img{height:84px;width:auto;border-radius:12px}
.bp-light{display:none}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .bp-light{display:block}:root:not([data-theme="dark"]) .bp-dark{display:none}}
:root[data-theme="light"] .bp-light{display:block}:root[data-theme="light"] .bp-dark{display:none}
.brand b,#brand-name{font-family:var(--f-display);letter-spacing:.14em;font-weight:500}
.brand small,#brand-sub{letter-spacing:.06em}

/* ===== RHUM QURAN 5: ölçülü tipografi, açılır yarı şeffaf menü, açılış, oynatıcı durumları ===== */
/* Tipografi ölçeği: başlık / alt başlık / gövde / etiket — her düzey ayrı, aynı oranda küçültme yok */
body{font-size:15px;line-height:1.6}
h1{font-size:clamp(1.65rem,3.1vw,2.35rem);font-weight:500;line-height:1.12}
h2{font-size:clamp(1.25rem,2vw,1.5rem);font-weight:500;line-height:1.2}
h3{font-size:1rem;font-weight:600;letter-spacing:0}
h4{font-size:.95rem;font-weight:600}
.sec-head{gap:6px;padding-bottom:14px}
.sec-head p{font-size:.95rem}
.eyebrow{font-size:.64rem;letter-spacing:.2em;font-weight:600}
.lead{font-size:.98rem;line-height:1.65}
.small{font-size:.82rem}.note{font-size:.76rem}
.btn{font-size:.86rem;font-weight:500}
.btn.tight{font-size:.8rem}
.chip,.seg button,.hscroll button{font-size:.84rem}
.card{padding:20px}
.greet h1{font-size:clamp(1.8rem,3.8vw,2.6rem)}
.dateline{font-size:.7rem}
.hero .next-name{font-size:clamp(1.6rem,3.6vw,2.2rem)}
.hero .count{font-size:clamp(2.6rem,7vw,4.2rem)}
.hero-times div{font-size:.7rem}.hero-times div b{font-size:1.02rem}
.cont-title{font-size:clamp(1.35rem,2.6vw,1.75rem)}
.cont-kind{font-size:.8rem}
.goal-row b{font-weight:500;font-size:.93rem}
.goal-row{padding:12px 0;gap:12px}
.gcheck{width:26px;height:26px}
.learn-line b{font-size:1.1rem}
.learn-line{padding:14px 16px}
.sp-t{font-size:1.1rem}
.tile b,.ex-list b,.lesson b,.type b,.qd-place h4,.pack2 h3,.sp-list .grow b,.hsteps h3{font-size:1.02rem}
.trow2 .tl2{font-size:.98rem}
.pchip,.tog{font-size:.84rem;font-weight:500}
.cats button span{font-size:.84rem}
.pl-panel h3{font-size:1.15rem}
.pl-list b{font-weight:500;font-size:.92rem}
.verse-scene .tr{font-size:1.08rem}
.verse-scene{min-height:260px;padding:36px 24px}
.hq{font-size:1.02rem}
.need-body p{font-size:.95rem}
.msg{font-size:.94rem;line-height:1.65}
.msg.assistant h4{font-size:.95rem}
.stat b{font-size:1.3rem}
.lstep .lead{font-size:.98rem}
/* Arapça ve Kur'an metni küçültülmez; kullanıcının yazı boyutu tercihi (--arsize) korunur */
.ayah .ar{font-size:var(--arsize,2.1rem)}
/* sol menü: ince şerit → üzerine gelince açılır; içerik itilmez */
@media (min-width:901px){
 .app{grid-template-columns:76px minmax(0,1fr)}
 .app>.main{grid-column:2;grid-row:1;min-width:0}
 .side{position:fixed;inset-block:0;inset-inline-start:0;width:76px;z-index:28;padding:18px 12px;overflow-x:hidden;overflow-y:auto;gap:14px;
  background:color-mix(in srgb,var(--bg) 80%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);
  border-inline-end:1px solid color-mix(in srgb,var(--line) 80%,transparent);transition:width .26s cubic-bezier(.2,.8,.2,1) .28s,box-shadow .26s .28s;scrollbar-width:none}
 .side::-webkit-scrollbar{display:none}
 .side:hover,.side:focus-within{width:250px;transition-delay:.06s;background:color-mix(in srgb,var(--bg) 97%,transparent);box-shadow:0 0 0 1px var(--line),12px 0 40px rgba(0,0,0,.18)}
 :root[data-nav="pinned"] .app{grid-template-columns:250px minmax(0,1fr)}
 :root[data-nav="pinned"] .side{width:250px;box-shadow:none}
 .side .brand{padding-inline:6px;min-height:44px}
 .side .brand>div,.side .nav-h,.side .nav button span,.side .side-foot,.nav-pin span{opacity:0;white-space:nowrap;transition:opacity .16s .2s}
 .side:hover .brand>div,.side:focus-within .brand>div,.side:hover .nav-h,.side:focus-within .nav-h,.side:hover .nav button span,.side:focus-within .nav button span,.side:hover .side-foot,.side:focus-within .side-foot,.side:hover .nav-pin span,.side:focus-within .nav-pin span,
 :root[data-nav="pinned"] .side .brand>div,:root[data-nav="pinned"] .side .nav-h,:root[data-nav="pinned"] .side .nav button span,:root[data-nav="pinned"] .side .side-foot,:root[data-nav="pinned"] .nav-pin span{opacity:1;transition-delay:.12s}
 .side .nav-h{height:18px;overflow:hidden}
 .nav button{padding:8px 15px;font-size:.86rem;gap:16px;white-space:nowrap}
 .nav-group{gap:0}
 .nav{gap:10px}
}
.nav-h{font-size:.6rem;letter-spacing:.2em}
.nav button svg{width:18px;height:18px}
.nav-pin{display:flex;align-items:center;gap:16px;border:0;background:transparent;color:var(--muted);padding:8px 15px;border-radius:10px;min-height:40px;font-size:.8rem;margin-top:auto}
.nav-pin svg{width:18px;height:18px;flex:none}
.nav-pin[aria-pressed="true"]{color:var(--gold)}
.nav-pin:hover{color:var(--ink)}
@media (max-width:900px){.nav-pin{display:none}}
[data-motion="off"] .side{transition:none}
/* açılış (~5 sn, atlanabilir) */
#splash.sp5{background:radial-gradient(120% 90% at 50% 35%,#163a2f,#0b1d17 70%)}
#splash.sp5 svg{width:120px;height:120px}
#splash.sp5 .star{stroke:#D6B879;stroke-width:2.4;stroke-dasharray:180;stroke-dashoffset:180;animation:spDraw 2.1s .2s cubic-bezier(.4,.1,.2,1) forwards}
#splash.sp5 .glyph{opacity:0;animation:spFade .6s 2.1s ease-out forwards}
#splash.sp5 .word{font-family:"Bodoni Moda",Georgia,serif;font-weight:500;letter-spacing:.32em;color:#F5F0E5;animation:spFade 1s 2.5s ease-out forwards}
#splash.sp5 .tag{letter-spacing:.14em;color:#D6B879;animation:spFade .9s 3.1s ease-out forwards}
.sp-skip{position:absolute;top:calc(16px + env(safe-area-inset-top,0px));inset-inline-end:max(16px,env(safe-area-inset-right,0px));border:1px solid rgba(245,240,229,.3);background:rgba(0,0,0,.2);color:#F5F0E5;border-radius:999px;padding:8px 16px;min-height:40px;font-size:.82rem}
@media (prefers-reduced-motion:reduce){#splash.sp5 .star{stroke-dashoffset:0;animation:none}#splash.sp5 .glyph,#splash.sp5 .word,#splash.sp5 .tag{opacity:1;animation:none}}
/* oynatıcı: gerçek yüklenme */
.pbtn.loading{opacity:.9}
.pbtn .spin,.spin{display:inline-block;width:20px;height:20px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.aload{color:var(--gold)}
.alt-recs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
/* tanılama */
.diag{margin:0;padding-inline-start:20px;display:flex;flex-direction:column;gap:4px;font-size:.84rem}
.diag li.ok b{color:var(--good)}.diag li.bad b{color:var(--bad)}
.img-fail{display:grid;place-items:center;min-height:180px;border-radius:20px;border:1px dashed var(--line);background:var(--surface-2);color:var(--muted);font-size:.85rem;padding:16px;text-align:center}
/* rotalar */
ol.route{margin:0;padding-inline-start:22px;display:flex;flex-direction:column;gap:8px;line-height:1.5}
/* asistan: okunaklı mesajlar, gerçek duruma bağlı hareketli simge */
.msgs{gap:14px;padding:20px}
.msg.assistant{background:var(--surface);border:1px solid var(--line);max-width:min(680px,92%)}
.msg .srcs a{font-size:.74rem;border:1px solid color-mix(in srgb,var(--primary) 30%,transparent);background:transparent}
.ai-orb{width:56px;height:56px;background:radial-gradient(circle at 32% 28%,color-mix(in srgb,var(--gold) 80%,#fff),var(--primary) 60%,var(--primary-deep));box-shadow:0 8px 24px color-mix(in srgb,var(--primary) 30%,transparent)}
[data-motion="on"] .ai-orb{animation:orbIdle 6s ease-in-out infinite}
[data-motion="on"] .ai-orb.thinking,[data-motion="on"].ai-busy .ai-orb{animation:orbThink 1.4s ease-in-out infinite}
@keyframes orbIdle{50%{transform:translateY(-2px);box-shadow:0 12px 28px color-mix(in srgb,var(--primary) 34%,transparent)}}
@keyframes orbThink{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.retry{display:flex;justify-content:flex-start}
[data-motion="on"] .cb-main{transition:transform .15s}
[data-motion="on"].ai-busy .cb-main svg{animation:orbThink 1.4s ease-in-out infinite}
.need-ctx{color:var(--muted);border-inline-start:2px solid var(--gold);padding-inline-start:10px;margin-top:8px}
/* ===== RHUM QURAN 6: İlahiler ve Dinlen ve Sakinleş ===== */
.il-filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.il-filters input[type=search]{width:100%;min-height:44px}
.il-filters select{min-height:44px}
.il-list{display:flex;flex-direction:column;gap:10px}
.il-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 16px;align-items:center;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.il-main{display:flex;flex-direction:column;gap:4px;min-width:0}
.il-t{font-size:1rem;font-weight:600}
.il-a{font-size:.88rem}
.il-tags{display:flex;flex-wrap:wrap;gap:6px}
.pill{font-size:.7rem;padding:2px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.pill.vo{border-color:color-mix(in srgb,var(--gold) 60%,transparent);color:var(--gold)}
.il-act{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.il-embed{grid-column:1/-1}.il-embed:empty{display:none}
.il-embed iframe{width:100%;aspect-ratio:16/9;max-width:100%;border:0;border-radius:12px}
@media (max-width:560px){.il-card{grid-template-columns:1fr}.il-act{justify-content:flex-start}}
.note-card summary{cursor:pointer;font-weight:500}
/* dinlenme: sakin, koyu, düşük hareketli */
.calm-wrap{--c-bg:#0c1a15;--c-card:#12251e;--c-line:rgba(214,184,121,.18);--c-ink:#ECE6D8;--c-mut:#a9b5ac;display:flex;flex-direction:column;gap:18px;background:var(--c-bg);color:var(--c-ink);border-radius:24px;padding:24px max(16px,2vw)}
.calm-wrap .muted,.calm-wrap .sec-head p{color:var(--c-mut)}
.calm-wrap .card{background:var(--c-card);border-color:var(--c-line);color:var(--c-ink)}
.calm-wrap a{color:#D6B879}
.calm-wrap *{transition-duration:.01ms!important;animation:none!important}
.calm-wrap .spin{animation:spin 1.2s linear infinite!important}
.calm-need{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.calm-need button{display:flex;align-items:center;gap:14px;text-align:start;padding:18px;border-radius:18px;border:1px solid var(--c-line);background:var(--c-card);color:var(--c-ink);font-size:1rem;min-height:64px}
.calm-need button svg{width:22px;height:22px;color:#D6B879;flex:none}
.calm-need button.on{border-color:#D6B879;box-shadow:inset 0 0 0 1px #D6B879}
.calm-tip{display:flex;flex-direction:column;gap:10px}
.calm-player{display:flex;flex-direction:column;gap:12px}
.cp-now{display:flex;flex-direction:column;gap:2px}
.cp-now b{font-size:1.05rem;font-weight:600}
.cp-row{display:flex;flex-direction:row;align-items:center;gap:10px}.cp-row.cpw,.row.cpw{flex-wrap:wrap}
.cp-row input[type=range]{width:100%;min-height:32px;accent-color:#D6B879}
.cp-state .bad{color:#f0a39a}
.calm-wrap .chip{border:1px solid var(--c-line);background:transparent;color:var(--c-ink);border-radius:999px;padding:6px 12px;min-height:36px}
.calm-wrap .chip.on{background:#D6B879;color:#102820;border-color:#D6B879}
.calm-sec{display:flex;flex-direction:column;gap:10px}
.calm-sec h2{font-size:1.1rem}
.ctiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.ctile{display:flex;align-items:stretch;border:1px solid var(--c-line);border-radius:14px;background:var(--c-card);overflow:hidden}
.ctile.on{border-color:#D6B879}
.ctile-main{flex:1;display:flex;flex-direction:column;gap:2px;text-align:start;padding:12px 14px;background:transparent;border:0;color:var(--c-ink);min-height:56px;min-width:0}
.ctile-main b{font-weight:500;font-size:.92rem}.ctile-main small{color:var(--c-mut);font-size:.74rem}
.ctile-fav{border:0;background:transparent;color:#D6B879;width:44px;display:grid;place-items:center}
.ctile-fav svg{width:18px;height:18px}
.calm-wrap .btn{border-color:var(--c-line)}

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[data-iltab][aria-selected="true"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--gold);font-weight:600}
.pl-photo{margin:0 0 4px;display:flex;flex-direction:column;gap:6px}
.pl-photo img{width:100%;max-width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;background:var(--surface-2)}
.pl-photo figcaption{font-size:.7rem;color:var(--muted);line-height:1.4}
.pl-list button.has-th{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:12px;align-items:center}
.pl-list button.has-th>b,.pl-list button.has-th>span{grid-column:2}
.pl-th{grid-row:1/span 2;width:56px;height:56px;border-radius:10px;object-fit:cover;background:var(--surface-2)}
.pl-panel p svg,.pl-panel .small svg{width:14px;height:14px;vertical-align:-2px;display:inline-block}
.pl-panel .pl-close{z-index:2;background:color-mix(in srgb,var(--bg) 70%,transparent)}
.note-na{color:var(--gold);border-inline-start:2px solid var(--gold);padding-inline-start:10px}
.calm-wrap .note-na{color:#D6B879}
.ctile.na{opacity:.55}
.pl-photo.small-mode img{width:112px;height:112px;aspect-ratio:1;flex:none}
.pl-photo.small-mode{flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:10px}
.pl-photo.small-mode figcaption,.pl-photo .ph-note{flex:1 1 160px;min-width:0}
.ph-note{font-size:.7rem;color:var(--muted)}
/* Akış: dikey, tam ekran kartlar, kaydırınca bir sonrakine oturur */
.feed{display:flex;flex-direction:column;gap:10px;max-width:640px;margin:0 auto;width:100%}
.feed-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.feed-t{font-size:1.4rem;margin:0}
.feed-f{flex:1;min-width:0}
.reels{height:calc(100dvh - 190px);min-height:420px;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;border-radius:26px;scrollbar-width:none;outline:none}
.reels::-webkit-scrollbar{display:none}
.reels:focus-visible{box-shadow:0 0 0 2px var(--gold)}
.reel{height:100%;scroll-snap-align:start;scroll-snap-stop:always;position:relative;display:flex;flex-direction:column;justify-content:center;padding:28px 22px 24px;border-radius:26px;overflow:hidden;
 background:radial-gradient(120% 80% at 50% 0%,#1d4a3b,#0d211a 70%);color:#F5F0E5;margin-bottom:10px}
.reel.rh{background:radial-gradient(120% 80% at 50% 0%,#3a3020,#14120c 72%)}
.reel.re{background:radial-gradient(120% 80% at 50% 0%,#203a4a,#0c1820 72%)}
.reel.rb{background:#10201a}
.reel::before{content:"";position:absolute;inset:14px;border:1px solid rgba(214,184,121,.22);border-radius:18px;pointer-events:none}
.reel-in{display:flex;flex-direction:column;gap:16px;align-items:center;text-align:center;max-width:520px;margin:0 auto;width:100%;flex:1;justify-content:center;min-height:0;overflow-y:auto;padding-inline:4px}
.reel-k{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:#D6B879;font-weight:600}
.reel-ar{font-size:clamp(1.5rem,4.6vw,2.2rem);line-height:2;color:#F5F0E5}
.reel-name{font-size:clamp(2.6rem,9vw,3.6rem);line-height:1.5}
.reel-tl{font-size:1.05rem;color:#D6B879;font-weight:500}
.reel-tr{font-size:1.02rem;line-height:1.7;margin:0;color:#ece6d8}
.reel-src{font-size:.78rem;color:#c8bfa9;margin:0}
.reel-act{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;padding-top:14px;position:relative;z-index:1}
.ract{display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:rgba(255,255,255,.06);color:#F5F0E5;border-radius:14px;padding:8px 12px;min-width:64px;min-height:44px;font-size:.7rem}
.ract svg{width:20px;height:20px}
.ract[aria-pressed="true"]{color:#D6B879}
.ract:hover{background:rgba(255,255,255,.12)}
[data-motion="on"] .reel .reel-in{opacity:.35;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
[data-motion="on"] .reel.in .reel-in{opacity:1;transform:none}
.feed-hint{text-align:center;margin:0}
@media (max-width:900px){.reels{height:calc(100dvh - 230px - env(safe-area-inset-bottom,0px))}.feed-head h1{display:none}}
@media (prefers-reduced-motion:reduce){.reels{scroll-behavior:auto}}
[data-ff2][aria-selected="true"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--gold);font-weight:600}
.reels:focus-visible{box-shadow:0 0 0 1px rgba(214,184,121,.45)}
@media (max-width:560px){.reel-act{flex-wrap:nowrap;gap:4px}.ract{flex:1 1 0;min-width:0;padding:8px 4px;font-size:.62rem}.ract span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}}