/* Tek sütun okuma düzeni: ayet numarası solda dar bir sütunda, metin sağda akar. */
/* Tarayıcı harekeyi harfinden ayrı boyayamaz. Renkler bu yazı tipinin içindedir (Scheherazade New, COLR katmanı). */
@font-face { font-family: "Kuran Renkli"; src: url("kuran.woff2") format("woff2"); font-display: swap; }
@font-palette-values --harekat-koyu { font-family: "Kuran Renkli"; override-colors: 0 #ff8f86, 1 #7fb6ff, 2 #6fd99a; }
@font-palette-values --harekat-duz-acik { font-family: "Kuran Renkli"; override-colors: 0 #17302c, 1 #17302c, 2 #17302c; }
@font-palette-values --harekat-duz-koyu { font-family: "Kuran Renkli"; override-colors: 0 #dfe9e6, 1 #dfe9e6, 2 #dfe9e6; }
:root {
  --bg: #f2f6f5;
  --surface: #ffffff;
  --ink: #17302c;
  --muted: #5a716c;
  --line: #d3dfdc;
  --accent: #0d6a5e;
  --on-accent: #ffffff;
  --danger: #a8322a;
  --done: #dcefe8;
  --harekat: normal; --harekat-duz: --harekat-duz-acik;
  --read: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --arabic: "Kuran Renkli", "Noto Naskh Arabic", "Geeza Pro", "Traditional Arabic", serif;
  --fs: 19px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #101a19; --surface: #182523; --ink: #dfe9e6; --muted: #92a8a3;
    --line: #2b3d3a; --accent: #5cc4b2; --on-accent: #0c1f1c; --danger: #f0938b; --done: #17322d;
    --harekat: --harekat-koyu; --harekat-duz: --harekat-duz-koyu;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #101a19; --surface: #182523; --ink: #dfe9e6; --muted: #92a8a3;
  --line: #2b3d3a; --accent: #5cc4b2; --on-accent: #0c1f1c; --danger: #f0938b; --done: #17322d;
  --harekat: --harekat-koyu; --harekat-duz: --harekat-duz-koyu;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; overscroll-behavior-y: contain; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 var(--ui); }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Giriş */
.login {
  max-width: 400px; margin: 0 auto;
  padding-block: 12vh 32px;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
  display: grid; gap: 20px;
}
.login h1 { margin: 0; font: 600 36px/1.15 var(--read); color: var(--accent); }
.lead { margin: 0; font: 19px/1.45 var(--read); }
.form { display: grid; gap: 10px; }
.form label { font-weight: 600; }
.hint { margin: 0; color: var(--muted); font-size: 14px; }
.phone-row { display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.phone-row:focus-within { border-color: var(--accent); }
.prefix { display: flex; align-items: center; padding-inline: 14px; color: var(--muted); border-right: 1px solid var(--line); }
.phone-row input { flex: 1; min-width: 0; border: 0; background: none; padding: 14px; font-size: 18px; outline: none; }
.code { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 14px; font-size: 26px; letter-spacing: .35em; text-align: center; font-variant-numeric: tabular-nums; }
.primary { border: 0; border-radius: 10px; background: var(--accent); color: var(--on-accent); padding: 14px; font-weight: 600; }
.primary:disabled { opacity: .6; }
.row-links { display: flex; justify-content: space-between; gap: 12px; }
.link { border: 0; background: none; color: var(--accent); padding: 8px 0; }
.link:disabled { color: var(--muted); cursor: default; }
.error { margin: 0; color: var(--danger); }
.note { margin: 0; color: var(--muted); font-size: 14px; }

/* Okuma */
#reader {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  overflow: hidden; touch-action: none;
  background: var(--bg);
}
.bar {
  flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-block: calc(8px + env(safe-area-inset-top, 0px)) 8px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.where { display: flex; align-items: baseline; gap: 8px; min-width: 0; border: 0; background: none; padding: 6px 0; text-align: left; }
#whereName { font: 600 18px/1.2 var(--read); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.where-ayah { color: var(--muted); font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tools { flex: none; display: flex; align-items: center; gap: 8px; }
.tool { flex: none; min-height: 40px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 6px 12px; font-size: 14px; }
.icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); padding: 0; }
.sound .waves { display: none; }
.sound[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.sound.paused[aria-pressed="true"] { background: var(--surface); color: var(--accent); }
.sound[aria-pressed="true"] .waves { display: block; }
.sound[aria-pressed="true"] .mute { display: none; }

.text {
  flex: 1; min-height: 0; width: 100%; max-width: 680px; margin: 0 auto;
  overflow: hidden;
  padding-block: 16px 4px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.loading { color: var(--muted); padding-block: 32px; }
.foot {
  flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding-block: 6px calc(6px + env(safe-area-inset-bottom, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  border-top: 1px solid var(--line);
}
/* İki satır, Tefsir düğmesinin yüksekliğini aşmaz. Alt şerit büyürse ölçülen sayfalar taşar. */
.page-info { min-width: 0; }
.range, .reads { margin: 0; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.range { color: var(--muted); font-size: 13px; }
.reads { color: var(--muted); font-size: 13px; }
#reader.done { background: var(--done); }
.done .range { color: var(--ink); }
.done .reads { color: var(--accent); font-weight: 600; }
.done .verse b { color: var(--accent); }
.tefsir {
  flex: none; display: flex; align-items: center; gap: 6px; min-height: 40px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
  padding: 4px 12px; color: var(--accent); font-size: 14px; font-weight: 600; text-decoration: none;
}
.foot-tools { flex: none; display: flex; gap: 4px; }
.foot-tools .tefsir { flex-direction: column; justify-content: center; gap: 0; min-width: 50px; padding: 2px 6px; font-size: 11px; line-height: 1.15; }
.foot-tools .tefsir.off { color: var(--muted); font-weight: 400; }
.out { display: block; text-align: center; text-decoration: none; }
.tefsir-text p { margin: 0 0 .9em; font: var(--fs)/1.6 var(--read); white-space: pre-line; }
.tefsir-text p:last-child { margin-bottom: 0; }
.hadis-list { list-style: none; margin: 0; padding: 0; }
.hadis-list:empty { display: none; }
.hadis-list a { display: flex; justify-content: space-between; gap: 12px; padding: 12px 2px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.hadis-list .num { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.arabic-mark { width: 20px; height: 20px; overflow: hidden; font: 600 15px/20px var(--arabic); text-align: center; }
.arabic .verse { font: calc(var(--fs) * 1.7)/2.2 var(--arabic); font-palette: var(--harekat); word-spacing: .1em; }
.arabic.plain .verse { font-palette: var(--harekat-duz); }
.arabic .verse b { line-height: 3; }
.arabic .verse.playing { border-radius: 8px; background: var(--done); }
.head-tools { flex: none; display: flex; gap: 16px; }
.probe { position: absolute; top: 0; left: 0; visibility: hidden; pointer-events: none; }
.verse {
  display: grid; grid-template-columns: minmax(2.2em, max-content) minmax(0, 1fr); gap: 4px;
  margin: 0 0 .9em; font: var(--fs)/1.65 var(--read);
}
.verse:last-child { margin-bottom: 0; }
.verse b { font: 500 .68em/2.4 var(--ui); color: var(--muted); font-variant-numeric: tabular-nums; }

.kvkk-link { justify-self: start; padding: 0; font-size: 14px; text-decoration: underline; }
.kvkk { font-size: 15px; }
.kvkk h3 { margin: 16px 0 4px; font-size: 15px; }
.kvkk p { margin: 0; }
.kvkk p + p { margin-top: 10px; }
.sync-btn { border: 1px solid var(--line); border-radius: 10px; background: none; color: var(--accent); padding: 11px; }

/* Alt paneller */
.scrim { position: fixed; inset: 0; z-index: 9; background: rgb(0 0 0 / .4); }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  max-width: 560px; max-height: 82%; margin: 0 auto;
  display: flex; flex-direction: column; gap: 14px;
  padding-block: 14px calc(16px + env(safe-area-inset-bottom, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  background: var(--surface); border-radius: 16px 16px 0 0;
  overflow-y: auto;
}
.sheet-head { position: sticky; top: -14px; z-index: 1; margin-top: -14px; padding-block: 14px 8px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--surface); }
.sheet h2 { margin: 0; font: 600 20px/1.2 var(--read); }
#surahSearch { width: 100%; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); padding: 10px 12px; }
.surah-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; }
.surah-list button {
  display: grid; grid-template-columns: 2.4em minmax(0, 1fr) auto; gap: 6px; align-items: baseline;
  width: 100%; border: 0; border-bottom: 1px solid var(--line); background: none;
  padding: 11px 2px; text-align: left;
}
.surah-list .num, .surah-list .count { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.surah-list .name { font: 17px/1.3 var(--read); }
.surah-list .current .name { color: var(--accent); font-weight: 600; }
fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
legend { padding: 0 0 8px; font-weight: 600; }
.seg { display: flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.seg button { flex: 1; min-width: 0; border: 0; background: none; padding: 10px 6px; font-size: 15px; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.size-row { display: flex; align-items: center; gap: 16px; }
.size-row button { flex: 1; border: 1px solid var(--line); border-radius: 10px; background: none; padding: 10px; }
.size-row output { min-width: 2em; text-align: center; font-variant-numeric: tabular-nums; }
.logout { border: 1px solid var(--line); border-radius: 10px; background: none; color: var(--danger); padding: 11px; }