/* Kur'an-ı Kerim ve Cevaplar — web sürümü. Android uygulamasıyla (Jetpack Compose, Material 3) BİREBİR aynı görünüm:
   renkler ui/tema/Tema.kt, ölçüler Material 3 bileşenleri (1 dp = 1 CSS px). Dış kaynak yok. */
@font-face { font-family: "Amiri Quran"; src: url("fonts/AmiriQuran-Regular.ttf") format("truetype"); font-display: swap; }
/* Roboto (Apache 2.0) ve Noto Serif (OFL 1.1): Android'in sistem yazı tipleri; Latin + Türkçe alt kümesi */
@font-face { font-family: "KC Sans"; src: url("fonts/roboto-400.woff2") format("woff2"); font-weight: 100 449; font-display: swap; }
@font-face { font-family: "KC Sans"; src: url("fonts/roboto-500.woff2") format("woff2"); font-weight: 450 649; font-display: swap; }
@font-face { font-family: "KC Sans"; src: url("fonts/roboto-700.woff2") format("woff2"); font-weight: 650 900; font-display: swap; }
@font-face { font-family: "KC Serif"; src: url("fonts/noto-serif-400.woff2") format("woff2"); font-weight: 100 549; font-display: swap; }
@font-face { font-family: "KC Serif"; src: url("fonts/noto-serif-700.woff2") format("woff2"); font-weight: 550 900; font-display: swap; }
@font-face { font-family: "KC Mono"; src: url("fonts/droid-sans-mono.woff2") format("woff2"); font-display: swap; }

/* ---------- renk belirteçleri (Tema.kt) ---------- */
:root {
  --primary: #14532D; --on-primary: #FBF7EE; --p-cont: #DCE9DD; --on-p-cont: #0B3A1F;
  --secondary: #46624F; --sec-cont: #E5ECE3; --on-sec-cont: #1B3324;
  --bg: #F6F2E9; --on-sfc: #23262B; --on-sfc-var: #585D64;
  --sfc-lowest: #FFFFFF; --sfc-low: #FCFAF4; --sfc: #F1ECE1; --sfc-high: #ECE6DA; --sfc-highest: #E6DFD1;
  --outline: #8E8574; --outline-var: #E2DACA; --error: #9B2C2C;
  --inv-sfc: #2B2E33; --inv-on-sfc: #F1ECE1; --inv-primary: #9FD0AE;
  --altin: #B08D57; --isaret: #8A6A36; --vurgu: #E3EEE2;
  --kart-yesil: #14532D; --sayac-zemin: var(--primary); --sayac-metin: var(--on-primary); --sayac-etiket: #E2C48E;
  --kible-yesil: #1B7A3A; --kible-kirmizi: #C62828; --zemin-oran: 9%;
  --sans: "KC Sans", Roboto, "Noto Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --serif: "KC Serif", "Noto Serif", Georgia, serif;
  --arapca: "Amiri Quran", "Amiri", "Noto Naskh Arabic", serif;
  --ar-punto: 28px; --meal-punto: 17px;
  color-scheme: light;
}
:root[data-tema="koyu"] {
  --primary: #9FD0AE; --on-primary: #0B2E19; --p-cont: #1F4631; --on-p-cont: #D3EBD9;
  --secondary: #B4CAB8; --sec-cont: #2C3B31; --on-sec-cont: #D9E7DB;
  --bg: #16181B; --on-sfc: #ECE5D5; --on-sfc-var: #BDB6A6;
  --sfc-lowest: #111315; --sfc-low: #1B1E21; --sfc: #202327; --sfc-high: #272A2F; --sfc-highest: #2F3338;
  --outline: #51565C; --outline-var: #34383D; --error: #F2B8B5;
  --inv-sfc: #ECE5D5; --inv-on-sfc: #23262B; --inv-primary: #14532D;
  --altin: #C4A271; --isaret: #C4A271; --vurgu: #203A2B;
  --kart-yesil: #1C4A30; --sayac-zemin: var(--p-cont); --sayac-metin: var(--on-p-cont); --sayac-etiket: var(--altin);
  --kible-yesil: #6FD08C; --kible-kirmizi: #FF8A80; --zemin-oran: 16%;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-tema="sistem"] {
    --primary: #9FD0AE; --on-primary: #0B2E19; --p-cont: #1F4631; --on-p-cont: #D3EBD9;
    --secondary: #B4CAB8; --sec-cont: #2C3B31; --on-sec-cont: #D9E7DB;
    --bg: #16181B; --on-sfc: #ECE5D5; --on-sfc-var: #BDB6A6;
    --sfc-lowest: #111315; --sfc-low: #1B1E21; --sfc: #202327; --sfc-high: #272A2F; --sfc-highest: #2F3338;
    --outline: #51565C; --outline-var: #34383D; --error: #F2B8B5;
    --inv-sfc: #ECE5D5; --inv-on-sfc: #23262B; --inv-primary: #14532D;
    --altin: #C4A271; --isaret: #C4A271; --vurgu: #203A2B;
    --kart-yesil: #1C4A30; --sayac-zemin: var(--p-cont); --sayac-metin: var(--on-p-cont); --sayac-etiket: var(--altin);
    --kible-yesil: #6FD08C; --kible-kirmizi: #FF8A80; --zemin-oran: 16%;
    color-scheme: dark;
  }
}
/* yüksek kontrast (Tema.kt AcikKontrast / KoyuKontrast) */
:root[data-kontrast="1"] {
  --primary: #0A3A1C; --p-cont: #C7E0CC; --on-p-cont: #000000; --bg: #FFFFFF; --on-sfc: #000000; --on-sfc-var: #1E1E1E;
  --sfc-lowest: #FFFFFF; --sfc-low: #FFFFFF; --sfc: #F2F2F2; --sfc-high: #EAEAEA; --sfc-highest: #E0E0E0;
  --outline: #4A4A4A; --outline-var: #8A8A8A; --altin: #7A5A26; --isaret: #7A5A26; --vurgu: #D6EBDA;
}
:root[data-tema="koyu"][data-kontrast="1"] {
  --primary: #C8F2D4; --on-primary: #000000; --p-cont: #0E3A20; --on-p-cont: #FFFFFF; --bg: #000000; --on-sfc: #FFFFFF; --on-sfc-var: #EDEDED;
  --sfc-lowest: #000000; --sfc-low: #0B0B0B; --sfc: #141414; --sfc-high: #1C1C1C; --sfc-highest: #262626;
  --outline: #BDBDBD; --outline-var: #7A7A7A; --altin: #E2C48E; --isaret: #E2C48E; --vurgu: #0E3A20;
}
@media (prefers-color-scheme: dark) {
  :root[data-tema="sistem"][data-kontrast="1"] {
    --primary: #C8F2D4; --on-primary: #000000; --p-cont: #0E3A20; --on-p-cont: #FFFFFF; --bg: #000000; --on-sfc: #FFFFFF; --on-sfc-var: #EDEDED;
    --sfc-lowest: #000000; --sfc-low: #0B0B0B; --sfc: #141414; --sfc-high: #1C1C1C; --sfc-highest: #262626;
    --outline: #BDBDBD; --outline-var: #7A7A7A; --altin: #E2C48E; --isaret: #E2C48E; --vurgu: #0E3A20;
  }
}

/* ---------- temel ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--on-sfc);
  font: 400 16px/26px var(--sans); letter-spacing: .5px;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { -webkit-appearance: none; appearance: none; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
h1, h2, h3, p { margin: 0; font: inherit; overflow-wrap: break-word; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
[tabindex="-1"]:focus { outline: none; }
[hidden] { display: none !important; }
.gorunmez { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ikon { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; line-height: 0; }
.ikon svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.ikon.k18 { width: 18px; height: 18px; } .ikon.k16 { width: 16px; height: 16px; } .ikon.k20 { width: 20px; height: 20px; }
.ikon.k22 { width: 22px; height: 22px; } .ikon.k26 { width: 26px; height: 26px; } .ikon.k30 { width: 30px; height: 30px; }
.ikon.k40 { width: 40px; height: 40px; } .ikon.k44 { width: 44px; height: 44px; }
.ust12 { margin-top: 12px; } .ust16 { margin-top: 16px; }
.ust .ikon-dugme.isaret { color: var(--isaret); }
.altin { color: var(--altin); } .birincil { color: var(--primary); } .soluk { color: var(--on-sfc-var); } .isaret { color: var(--isaret); }
.noscript { padding: 24px; text-align: center; }
.atla { position: fixed; z-index: 100; left: 12px; top: -80px; padding: 12px 16px; border-radius: 12px; background: var(--primary); color: var(--on-primary); }
.atla:focus { top: 8px; }

/* ---------- tipografi (Material 3 + Tema.kt) ---------- */
.t-dm { font: 400 45px/52px var(--sans); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.t-hm { font: 400 28px/36px var(--serif); letter-spacing: 0; }
.t-hs { font: 400 24px/32px var(--serif); letter-spacing: 0; }
.t-tl { font: 400 22px/28px var(--serif); letter-spacing: 0; }
.t-tm { font: 600 16px/24px var(--sans); letter-spacing: .15px; }
.t-ts { font: 500 14px/20px var(--sans); letter-spacing: .1px; }
.t-bl { font: 400 16px/26px var(--sans); letter-spacing: .5px; }
.t-bm { font: 400 14px/20px var(--sans); letter-spacing: .25px; }
.t-bs { font: 400 12px/16px var(--sans); letter-spacing: .4px; }
.t-ll { font: 500 14px/20px var(--sans); letter-spacing: .2px; }
.t-lm { font: 500 12px/16px var(--sans); letter-spacing: .5px; }
.t-ls { font: 500 11px/16px var(--sans); letter-spacing: .5px; }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- kabuk ---------- */
.kabuk { min-height: 100vh; display: flex; flex-direction: column; }
.icerik { flex: 1; padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
body.alt-yok .icerik { padding-bottom: 0; }
body.alt-yok .gezinme { display: none; }

/* Üst çubuk (TopAppBar, 64 dp) */
.ust { position: sticky; top: 0; z-index: 20; background: var(--bg); transition: background-color .2s; }
.ust.yok { display: none; }
.ust.kaydi.renkli { background: var(--sfc); }
.ust-ic { display: flex; align-items: center; height: 64px; padding: 0 4px; }
.ust-baslik { flex: 1; min-width: 0; padding-left: 12px; display: flex; flex-direction: column; justify-content: center; }
.ust .geri:not([hidden]) + .ust-baslik { padding-left: 4px; }
.ust-ad { font: 400 22px/28px var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0; }
.ust-alt { font: 400 12px/16px var(--sans); letter-spacing: .4px; color: var(--on-sfc-var); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ust-eylem { display: flex; align-items: center; }

/* Simge düğmesi (IconButton 48 dp, simge 24) */
.ikon-dugme { position: relative; display: inline-grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 50%; color: var(--on-sfc-var); }
.ust .ikon-dugme { color: var(--on-sfc); }
.ust .ikon-dugme.etkin { color: var(--primary); }
.ust .ikon-dugme.soluk { color: var(--on-sfc-var); }
.ikon-dugme::before, .dokun::before { content: ""; position: absolute; inset: 4px; border-radius: inherit; background: currentColor; opacity: 0; transition: opacity .15s; pointer-events: none; }
.dokun { position: relative; }
.dokun::before { inset: 0; }
@media (hover: hover) { .ikon-dugme:hover::before, .dokun:hover::before { opacity: .08; } }
.ikon-dugme:active::before, .dokun:active::before { opacity: .12; }
.ikon-dugme:disabled { opacity: .38; cursor: default; }

/* Alt gezinme (NavigationBar, 80 dp, 7 öğe) */
.gezinme {
  position: fixed; z-index: 30; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: 8px;
  height: calc(80px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: var(--sfc-low);
}
.sekme { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; padding-top: 12px; color: var(--on-sfc-var); }
.sekme-ikon { position: relative; display: grid; place-items: center; width: 64px; height: 32px; border-radius: 16px; flex: none; }
.sekme-ikon .dolu { display: none; }
.sekme[aria-current="page"] { color: var(--primary); }
.sekme[aria-current="page"] .sekme-ikon { background: var(--p-cont); }
.sekme[aria-current="page"] .sekme-ikon .bos { display: none; }
.sekme[aria-current="page"] .sekme-ikon .dolu { display: grid; }
.sekme-ad { margin-top: 4px; font: 500 12px/16px var(--sans); letter-spacing: .5px; white-space: nowrap; max-width: 100%; }
/* 360 px altında etiketler küçülür (Android TextAutoSize, en az 9 sp) */
@media (max-width: 359px) { .gezinme { column-gap: 4px; } .sekme-ad { font-size: 10.5px; letter-spacing: .2px; } }
@media (hover: hover) { .sekme:not([aria-current]):hover .sekme-ikon { background: color-mix(in srgb, var(--on-sfc) 8%, transparent); } }

/* Masaüstü: aynı telefon yerleşimi ortalanmış sütunda */
@media (min-width: 900px) {
  body { background: var(--sfc); }
  .kabuk { max-width: 480px; margin: 0 auto; background: var(--bg); box-shadow: 0 0 0 1px var(--outline-var); }
  .gezinme { max-width: 480px; margin: 0 auto; }
  .pencere-kap { max-width: 480px; margin: 0 auto; }
}

/* ---------- ortak bileşenler ---------- */
.sutun { padding: 0 16px; }
.kart { position: relative; display: block; background: var(--sfc-lowest); border-radius: 16px; overflow: hidden; }
/* Compose kartında kenar çizgisi içe çizilir (iç dolguyu kaydırmaz) */
.kart::after { content: ""; position: absolute; inset: 0; z-index: 2; border: 1px solid var(--outline-var); border-radius: inherit; pointer-events: none; }
.kart.r28 { border-radius: 28px; }
a.kart, button.kart { position: relative; color: inherit; text-align: left; width: 100%; }
a.kart::before, button.kart::before, .satir-tik::before { content: ""; position: absolute; inset: 0; background: var(--on-sfc); opacity: 0; transition: opacity .15s; pointer-events: none; }
@media (hover: hover) { a.kart:hover::before, button.kart:hover::before, .satir-tik:hover::before { opacity: .08; } }
a.kart:active::before, button.kart:active::before, .satir-tik:active::before { opacity: .12; }
.satir-tik { position: relative; display: flex; align-items: center; width: 100%; text-align: left; }
.ayrac { height: 1px; background: var(--outline-var); border: 0; margin: 0; }
.ayrac.i16 { margin: 0 16px; }

/* Bölüm başlığı (BolumBasligi): labelMedium, büyük harf, aralıklı */
.bolum-bas { display: flex; align-items: center; min-height: 16px; }
.bolum-bas h2 { flex: 1; font: 600 12px/16px var(--sans); letter-spacing: 1.2px; color: var(--primary); text-transform: uppercase; }

/* Altın ayraç (AltinAyrac) */
.altin-ayrac { display: flex; align-items: center; height: 10px; color: var(--altin); }
.altin-ayrac i { flex: 1; height: .8px; background: currentColor; opacity: .55; }
.altin-ayrac b { flex: none; width: 7px; height: 7px; margin: 0 4.5px; background: currentColor; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }

/* Yıldız içinde numara (YildizNumara) */
.yildiz { position: relative; display: grid; place-items: center; flex: none; width: 40px; height: 40px; color: var(--altin); }
.yildiz svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.yildiz b { position: relative; font: 600 12px/16px var(--sans); letter-spacing: .5px; color: var(--on-sfc); }
.yildiz.y38 { width: 38px; height: 38px; }
.yildiz.uc b { font-size: 11px; }

/* Düğmeler (Material 3) */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 10px 24px; border-radius: 20px; font: 500 14px/20px var(--sans); letter-spacing: .2px; white-space: nowrap; overflow: hidden; }
.btn::before { content: ""; position: absolute; inset: 0; background: currentColor; opacity: 0; transition: opacity .15s; }
@media (hover: hover) { .btn:hover::before { opacity: .08; } }
.btn:active::before { opacity: .12; }
.btn:disabled { opacity: .38; cursor: default; }
.btn:disabled::before { display: none; }
.btn.ikonlu { padding-left: 16px; }
/* Material düğmeleri 48 dp dokunma alanında 40 dp görünür (minimumInteractiveComponentSize) */
.btn { margin: 4px 0; }
.btn.h48, .eylem-satir .btn, .gps-mesaj .btn { margin: 0; }
.btn-dolu { background: var(--primary); color: var(--on-primary); }
.btn-ton { background: var(--sec-cont); color: var(--on-sec-cont); }
.btn-cizgi { border: 1px solid var(--outline); color: var(--primary); }
.btn-metin { padding: 10px 12px; color: var(--primary); }
.btn-metin.ikonlu { padding-left: 12px; padding-right: 16px; }
.btn.h48 { min-height: 48px; }
.btn .ikon { width: 18px; height: 18px; }

/* Arama alanı (OutlinedTextField, 56 dp, köşe 16) */
.alan { position: relative; display: flex; align-items: center; min-height: 56px; border-radius: 16px; background: var(--sfc-lowest); }
.alan::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid var(--outline); pointer-events: none; }
.alan:focus-within::after { border: 2px solid var(--primary); }
.alan > .ikon { margin: 0 16px 0 12px; color: var(--on-sfc-var); }
.alan input, .alan textarea { flex: 1; min-width: 0; align-self: stretch; border: 0; outline: 0; background: transparent; padding: 16px 0; font: 400 16px/24px var(--sans); letter-spacing: .5px; color: var(--on-sfc); caret-color: var(--primary); resize: none; }
.alan input::placeholder, .alan textarea::placeholder { color: var(--on-sfc-var); opacity: 1; }
.alan input::-webkit-search-cancel-button { display: none; }
.alan:not(:has(.alan-son:not([hidden]))) input, .alan:not(:has(.alan-son:not([hidden]))) textarea { margin-right: 16px; }
.alan-son { display: flex; align-items: center; padding-right: 4px; }
.alan-son .ikon-dugme { color: var(--on-sfc-var); }
.alan-son .ikon-dugme.git { color: var(--on-sfc); }
.alan.cok textarea { padding: 18px 0; line-height: 24px; overflow: hidden; }
/* koyu yeşil kart içindeki alan */
.alan.yesilde { background: #FBF8F1; --primary: #C9A86A; }
.alan.yesilde::after { border-color: transparent; }
.alan.yesilde:focus-within::after { border-color: #C9A86A; }
.alan.yesilde input, .alan.yesilde textarea { color: #23262B; caret-color: #C9A86A; }
.alan.yesilde input::placeholder, .alan.yesilde textarea::placeholder { color: #5B6067; }
.alan.yesilde > .ikon, .alan.yesilde .alan-son .ikon-dugme { color: #5B6067; }
.alan.yesilde .alan-son .ikon-dugme.git { color: #23262B; }

/* Parçalı düğme (SingleChoiceSegmentedButtonRow, 40 dp) */
.parcali { display: flex; width: 100%; padding: 4px 0; } /* 48 dp dokunma alanı içinde 40 dp düğme */
.parca { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid var(--outline); margin-left: -1px; font: 500 14px/20px var(--sans); letter-spacing: .2px; color: var(--on-sfc); white-space: nowrap; overflow: hidden; }
.parca:first-child { margin-left: 0; border-radius: 20px 0 0 20px; }
.parca:last-child { border-radius: 0 20px 20px 0; }
.parca .ikon { width: 18px; height: 18px; display: none; }
.parca[aria-checked="true"], .parca[aria-selected="true"] { background: var(--sec-cont); color: var(--on-sec-cont); z-index: 1; }
.parca[aria-checked="true"] .ikon, .parca[aria-selected="true"] .ikon { display: grid; }
.parca::before { content: ""; position: absolute; inset: 0; background: currentColor; opacity: 0; }
@media (hover: hover) { .parca:hover::before { opacity: .08; } }

/* Sekme satırı (PrimaryTabRow, 48 dp) */
.sekmeler { display: flex; position: relative; background: var(--bg); }
.sekmeler::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--outline-var); }
.sekmeler button { position: relative; flex: 1; height: 48px; display: grid; place-items: center; font: 500 14px/20px var(--sans); letter-spacing: .1px; color: var(--primary); }
.sekmeler button > span { position: relative; height: 48px; display: grid; place-items: center; }
.sekmeler button[aria-selected="true"] > span::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--primary); z-index: 1; }
@media (hover: hover) { .sekmeler button:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); } }

.sekmeler.yapiskan { position: sticky; top: 64px; z-index: 15; }

/* Git diyaloğu: etiketli OutlinedTextField (köşe 4, etiket odakta üst çizgiye çıkar) */
.git-govde { display: flex; flex-direction: column; gap: 14px; }
.git-alan { position: relative; height: 56px; border-radius: 4px; }
.git-alan::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--outline); border-radius: inherit; pointer-events: none; }
.git-alan.odak::after { border: 2px solid var(--primary); }
.git-alan.hatali::after { border: 2px solid var(--error); }
.git-alan input { position: absolute; inset: 0; width: 100%; padding: 16px; border: 0; outline: 0; background: transparent; font: 400 16px/24px var(--sans); letter-spacing: .5px; color: var(--on-sfc); caret-color: var(--primary); }
.git-alan label { position: absolute; z-index: 1; left: 12px; top: 16px; padding: 0 4px; max-width: calc(100% - 24px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 400 16px/24px var(--sans); letter-spacing: .5px; color: var(--on-sfc-var); background: var(--sfc-high); pointer-events: none; transition: top .15s, font-size .15s; }
.git-alan.odak label, .git-alan.dolu label { top: -8px; font-size: 12px; line-height: 16px; letter-spacing: .4px; }
.git-alan.odak label { color: var(--primary); }
.git-alan.hatali label { color: var(--error); }
.git-hata { min-height: 20px; padding: 4px 16px 0; font: 400 12px/16px var(--sans); letter-spacing: .4px; color: var(--error); }

/* Anahtar (Switch 52×32) */
.anahtar { position: relative; flex: none; width: 52px; height: 32px; margin: 0; appearance: none; -webkit-appearance: none; border-radius: 16px; background: var(--sfc-highest); border: 2px solid var(--outline); cursor: pointer; transition: background-color .15s; }
.anahtar::after { content: ""; position: absolute; top: 50%; left: 6px; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: var(--outline); transition: all .15s; }
.anahtar:checked { background: var(--primary); border-color: var(--primary); }
.anahtar:checked::after { left: 22px; width: 24px; height: 24px; margin-top: -12px; background: var(--on-primary); }

/* Kaydırıcı (Slider, Material 3 1.3: 16 dp iz, 4×44 tutamak) */
.kaydirici { --oran: 50%; display: block; width: 100%; height: 48px; margin: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; }
.kaydirici::-webkit-slider-runnable-track { height: 16px; border-radius: 8px;
  background: linear-gradient(to right, var(--primary) 0 calc(var(--oran) - 6px), transparent calc(var(--oran) - 6px) calc(var(--oran) + 6px), var(--sec-cont) calc(var(--oran) + 6px)); }
.kaydirici::-webkit-slider-thumb { -webkit-appearance: none; width: 4px; height: 44px; margin-top: -14px; border-radius: 2px; background: var(--primary); }
.kaydirici::-moz-range-track { height: 16px; border-radius: 8px; background: var(--sec-cont); }
.kaydirici::-moz-range-progress { height: 16px; border-radius: 8px; background: var(--primary); }
.kaydirici::-moz-range-thumb { width: 4px; height: 44px; border: 0; border-radius: 2px; background: var(--primary); }
.kaydirici-kap { position: relative; }
.kaydirici-kap::after { content: ""; position: absolute; right: 6px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: var(--primary); pointer-events: none; }

/* Boş durum (BosDurum) */
.bos-durum { display: flex; flex-direction: column; align-items: center; padding: 40px 32px; text-align: center; }
.bos-durum > .ikon { width: 40px; height: 40px; color: var(--altin); }
.bos-durum h2 { margin-top: 16px; font: 400 22px/28px var(--serif); letter-spacing: 0; }
.bos-durum p { margin-top: 8px; font: 400 14px/20px var(--sans); letter-spacing: .25px; color: var(--on-sfc-var); }
.bos-durum .eylemler { margin-top: 20px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bos-durum.eylemsiz { padding-bottom: 60px; }

/* Yükleniyor (CircularProgressIndicator) */
.donen { display: inline-block; width: 40px; height: 40px; border-radius: 50%; border: 4px solid var(--primary); border-right-color: transparent; animation: don 1s linear infinite; }
.donen.k28 { width: 28px; height: 28px; border-width: 3px; } .donen.k24 { width: 24px; height: 24px; border-width: 2.5px; }
@keyframes don { to { transform: rotate(360deg); } }
.yukleniyor { display: grid; place-items: center; padding: 32px; }
@media (prefers-reduced-motion: reduce) { .donen { animation-duration: 3s; } }
.cizgi-ilerleme { height: 2px; background: var(--sec-cont); overflow: hidden; position: relative; margin-bottom: 2px; }
.cizgi-ilerleme::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; background: var(--primary); animation: kay 1.2s ease-in-out infinite; }
@keyframes kay { from { left: -40%; } to { left: 100%; } }

/* Bildirim (Snackbar / Toast) */
.bildirim { position: fixed; z-index: 60; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); width: max-content; max-width: calc(100% - 32px); min-height: 48px; display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 16px; border-radius: 4px; background: var(--inv-sfc); color: var(--inv-on-sfc); font: 400 14px/20px var(--sans); letter-spacing: .25px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; box-shadow: 0 3px 6px rgba(0,0,0,.2); }
body.alt-yok .bildirim { bottom: calc(24px + env(safe-area-inset-bottom)); }
.bildirim.acik { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.bildirim:not(:has(button)) { padding-right: 16px; }
.bildirim button { color: var(--inv-primary); font: 500 14px/20px var(--sans); letter-spacing: .2px; padding: 10px 12px; border-radius: 20px; }

/* Alt sayfa (ModalBottomSheet), diyalog (AlertDialog), açılır menü (DropdownMenu) */
.ortu { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, 0); transition: background-color .2s; display: flex; flex-direction: column; justify-content: flex-end; }
.ortu.acik { background: rgba(0, 0, 0, .32); }
.pencere-kap { width: 100%; }
.alt-sayfa { width: 100%; max-height: calc(100vh - 72px); overflow: auto; background: var(--sfc-low); border-radius: 28px 28px 0 0; transform: translateY(100%); transition: transform .25s ease; padding-bottom: env(safe-area-inset-bottom); }
.ortu.acik .alt-sayfa { transform: none; }
.alt-sayfa.yarim { height: 50vh; overflow: hidden; }
.alt-sayfa.tam { transition: transform .25s ease, height .25s ease; }
.tutamak { display: block; width: 32px; height: 4px; margin: 22px auto; border-radius: 2px; background: var(--on-sfc-var); opacity: .4; }
.ortu.diyalog { justify-content: center; align-items: center; padding: 24px 0; }
.ortu.diyalog.acik { background: rgba(0, 0, 0, .6); } /* platform diyaloğu karartması */
.diyalog-kutu { width: 100%; max-width: 560px; min-width: 280px; max-height: calc(100vh - 48px); display: flex; flex-direction: column; background: var(--sfc-high); border-radius: 28px; padding: 24px 0 24px; opacity: 0; transform: scale(.94); transition: opacity .15s, transform .15s; }
.ortu.acik .diyalog-kutu { opacity: 1; transform: none; }
.diyalog-kutu > h2 { padding: 0 24px; font: 400 24px/32px var(--serif); color: var(--on-sfc); letter-spacing: 0; }
.diyalog-govde { padding: 16px 24px 0; overflow: auto; font: 400 14px/20px var(--sans); letter-spacing: .25px; color: var(--on-sfc-var); }
.diyalog-eylem { display: flex; justify-content: flex-end; gap: 8px; padding: 24px 24px 0; }
.menu { position: fixed; z-index: 55; min-width: 112px; max-width: 280px; padding: 8px 0; background: var(--sfc); border-radius: 4px; box-shadow: 0 2px 6px 2px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.3); }
.menu button, .menu a { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; height: 48px; padding: 0 12px; color: var(--on-sfc); font: 500 14px/20px var(--sans); letter-spacing: .1px; white-space: nowrap; padding-right: 24px; }
.menu .ikon { color: var(--on-sfc-var); }
.menu button::before, .menu a::before { content: ""; position: absolute; inset: 0; background: var(--on-sfc); opacity: 0; }
@media (hover: hover) { .menu button:hover::before, .menu a:hover::before { opacity: .08; } }
body.pencere-acik { overflow: hidden; }

/* Radyo (RadioButton 20 dp) */
.radyo { position: relative; flex: none; width: 20px; height: 20px; margin: 10px; border-radius: 50%; border: 2px solid var(--on-sfc-var); }
[aria-checked="true"] > .radyo { border-color: var(--primary); }
[aria-checked="true"] > .radyo::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--primary); }

/* Bilgi notu (BilgiNotu / MealNotu) */
.bilgi-not { display: flex; align-items: flex-start; gap: 8px; padding: 0 4px; font: 400 12px/16px var(--sans); letter-spacing: .4px; color: var(--on-sfc-var); }
.bilgi-not > .ikon { width: 18px; height: 18px; padding-top: 2px; box-sizing: content-box; margin-top: -2px; }
.meal-not { display: flex; align-items: flex-start; gap: 6px; font: 400 12px/16px var(--sans); letter-spacing: .4px; color: var(--on-sfc-var); }
.meal-not > .ikon { width: 16px; height: 16px; margin-top: 1px; }

/* ---------- Ana ekran ---------- */
.ana { padding: 28px 20px 24px; }
.ana-baslik { text-align: center; font: 400 28px/36px var(--serif); color: var(--on-sfc); letter-spacing: 0; }
.ana .altin-ayrac { width: 140px; margin: 10px auto 24px; }
.devam { display: flex; align-items: center; padding: 18px 20px; }
.devam-metin { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ust-etiket { font: 600 11px/16px var(--sans); letter-spacing: 1.4px; color: var(--primary); text-transform: uppercase; }
.devam-ad { margin-top: 6px; font: 400 24px/32px var(--serif); letter-spacing: 0; }
.devam-alt { font: 400 14px/20px var(--sans); letter-spacing: .25px; color: var(--on-sfc-var); }
.devam-ar { margin-left: 12px; font: 30px/normal var(--arapca); color: var(--primary); }
.kucuk-kartlar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.kucuk-kart { min-height: 112px; padding: 16px; display: flex !important; flex-direction: column; align-items: flex-start; }
.kucuk-kart > .ikon { width: 26px; height: 26px; color: var(--primary); }
.kucuk-kart .t-tm { margin-top: 14px; }
.kucuk-kart .t-bs { margin-top: 2px; color: var(--on-sfc-var); }
.cevap-kart { position: relative; margin-top: 20px; border-radius: 28px; background: var(--kart-yesil); color: #F6F0E2; overflow: hidden; padding: 22px 20px 10px; }
.cevap-kart .desen { position: absolute; top: 0; right: 0; width: 136px; height: 128px; pointer-events: none; }
.cevap-kart h2 { position: relative; font: 400 24px/32px var(--serif); color: #F6F0E2; letter-spacing: 0; }
.cevap-kart .aciklama { position: relative; margin-top: 6px; padding-right: 40px; font: 400 14px/20px var(--sans); letter-spacing: .25px; color: rgba(246, 240, 226, .82); }
.cevap-kart .alan { margin-top: 16px; }
.cevap-kart .ornek { display: flex; justify-content: flex-end; margin-top: 4px; }
.cevap-kart .ornek .btn-metin { color: #F6F0E2; padding-right: 12px; gap: 6px; }
.cevap-kart .ornek .ikon { color: #C9A86A; }
.ayet-ara-kart { display: flex !important; align-items: center; margin-top: 12px; padding: 16px 18px; }
.ayet-ara-kart > .ikon:first-child { color: var(--altin); margin-right: 14px; }
.ayet-ara-kart .metin { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ayet-ara-kart .t-bs { color: var(--on-sfc-var); }
.ayet-ara-kart > .ikon:last-child { color: var(--on-sfc-var); }

/* ---------- Sure / cüz listesi ---------- */
.liste-satir { min-height: 64px; padding: 10px 16px; gap: 16px; }
.liste-satir .metin { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.liste-satir .metin .t-bs { color: var(--on-sfc-var); }
.liste-satir .ar { font: 24px/normal var(--arapca); color: var(--primary); }
.liste-ayrac { height: 1px; margin-left: 72px; background: var(--outline-var); }
.liste-sonu { height: 24px; }

/* ---------- Okuma ---------- */
.sure-bas { display: flex; flex-direction: column; align-items: center; padding: 12px 0 8px; }
.sure-bas .ar-ad { font: 38px/normal var(--arapca); color: var(--primary); direction: rtl; text-align: center; }
.sure-bas .t-tl { text-align: center; }
.sure-bas .t-bs { margin-top: 4px; color: var(--on-sfc-var); }
.sure-bas .altin-ayrac { width: 160px; margin-top: 14px; }
.besmele { margin: 10px 16px; padding: .275em 0 .423em; direction: rtl; text-align: center; font-family: var(--arapca); font-size: calc(var(--ar-punto) + 2px); line-height: 2em; color: var(--on-sfc); }
.ayet { position: relative; display: flex; content-visibility: auto; contain-intrinsic-size: auto 240px; }
.ayet .serit { width: 3px; flex: none; }
.ayet.vurgulu { background: var(--vurgu); }
.ayet.vurgulu .serit { background: var(--primary); }
.ayet-govde { flex: 1; min-width: 0; padding: 6px 4px 18px 13px; }
.ayet-ust { display: flex; align-items: center; min-height: 48px; }
.ayet-ust .ortak { margin-left: 10px; font: 500 12px/16px var(--sans); letter-spacing: .5px; color: var(--on-sfc-var); }
.ayet-ust .bosluk { flex: 1; }
.ayet-ust .kayit-isaret { width: 20px; height: 20px; color: var(--isaret); }
/* Kur'an metni (arapcaStil): satır aralığı 2 em, LineHeightStyle(Center, Trim.Both) + includeFontPadding — ilk satırın üstü ve son
   satırın altı yazı tipinin doğal yüksekliğinde (Amiri Quran: çıkıntı 1,815 em, iniş 0,634 em, yMax 1,864, yMin −0,835) */
.ar-metin { direction: rtl; text-align: right; font-family: var(--arapca); font-size: var(--ar-punto); line-height: 2em; padding: .275em 0 .423em; letter-spacing: 0; color: var(--on-sfc); }
/* Meal metni (mealStil): satır aralığı 1,6 em; Compose varsayılanı Trim.Both: ilk satır üstü ve son satır altı kırpılır (Roboto 1,172 em) */
.meal-metin { --kirp: calc(var(--meal-punto) * -0.214); margin: var(--kirp) 0; font: 400 var(--meal-punto)/1.6 var(--sans); letter-spacing: 0; color: var(--on-sfc-var); }
.meal-metin mark { background: var(--vurgu); color: var(--primary); font-weight: 600; }
.ayet-govde .ar-metin, .ayet-govde .meal-metin, .ayet-govde .meal-not { margin-right: 12px; }
.ayet-govde .meal-not.eksik { margin-top: 12px; }
.ayet-govde .meal-metin { margin-top: calc(12px + var(--kirp)); }
.ayet-govde .meal-not.kismi { margin-top: 8px; }
.ayet-ayrac { height: .6px; margin: 0 16px; background: var(--outline-var); }
:root[data-meal="0"] .gizlenebilir { display: none !important; }
.sonraki-sure { display: flex; justify-content: center; padding: 20px 16px 52px; }
.sonraki-sure .btn .ikon { margin-left: 0; }
.okuma-sonu { height: 32px; }

/* ---------- Ayet kartı (AyetKarti) ---------- */
.ayet-kart { padding: 6px 4px 8px 18px; margin-bottom: 12px; }
.kart-ust { display: flex; align-items: center; }
.kart-ust .cubuk { width: 3px; height: 18px; border-radius: 4px; background: var(--altin); flex: none; margin-right: 10px; }
.kart-ust .ref { flex: 1; min-width: 0; font: 500 14px/20px var(--sans); letter-spacing: .1px; color: var(--primary); }
.kart-ust .ikon-dugme.kayitli { color: var(--isaret); }
.ayet-kart .ar-metin { margin: 4px 12px 0 0; }
.ayet-kart .meal-bolum { margin: 12px 12px 0 0; display: flex; flex-direction: column; }
.meal-bolum .meal-not + .meal-metin { margin-top: calc(6px + var(--kirp)); }
.meal-bolum .meal-metin + .meal-not { margin-top: 6px; }
.ayet-kart .ayrac { margin: 6px 12px 0 0; }
.kart-alt { display: flex; flex-wrap: wrap; gap: 2px; padding-top: 2px; }
.kart-alt .btn-metin { gap: 6px; }
.kart-alt .btn-metin.ok { gap: 4px; }

/* ---------- Sorular ---------- */
.sorular { padding: 4px 16px 32px; }
.soru-ara-kart { position: relative; border-radius: 28px; background: var(--kart-yesil); color: #F6F0E2; padding: 20px 18px 18px; overflow: hidden; }
.soru-ara-kart .desen { position: absolute; top: 0; right: 0; width: 124px; height: 112px; pointer-events: none; }
.soru-ara-kart h2 { position: relative; padding-right: 48px; font: 400 24px/32px var(--serif); letter-spacing: 0; }
.soru-ara-kart .aciklama { position: relative; margin-top: 6px; padding-right: 24px; font: 400 14px/20px var(--sans); letter-spacing: .25px; color: rgba(246, 240, 226, .84); }
.soru-ara-kart .alan { margin-top: 16px; min-height: 60px; }
.sorular-govde { margin-top: 16px; }
.soru-satir { min-height: 56px; padding: 12px 4px; gap: 14px; border-bottom: 1px solid var(--outline-var); }
.soru-satir .metin { flex: 1; min-width: 0; font: 400 16px/26px var(--sans); letter-spacing: .5px; }
.soru-satir > .ikon:last-child { color: var(--on-sfc-var); }
.soru-satir > .ikon.birincil { color: var(--primary); }
.sorular .bolum-bas { padding: 4px 0; }
.sorular .bolum-bas.son { padding: 2px 0 0; min-height: 50px; }
.cipler { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.cip { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 12px 0 8px; border-radius: 8px; overflow: hidden; }
.cip::after { content: ""; position: absolute; left: 0; right: 0; top: 4px; bottom: 4px; border: 1px solid var(--outline-var); border-radius: 8px; pointer-events: none; }
.cip .ikon { width: 18px; height: 18px; color: var(--on-sfc-var); }
.cip span { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 14px/20px var(--sans); letter-spacing: .2px; color: var(--on-sfc-var); }
.yardim { padding: 4px; font: 400 14px/20px var(--sans); letter-spacing: .25px; color: var(--on-sfc-var); }
.secenek-bas { display: flex; align-items: flex-start; gap: 12px; padding: 4px 0 6px; }
.secenek-bas > .ikon { color: var(--altin); }
.eylem-satir { display: flex; flex-wrap: wrap; gap: 8px; }
.eylem-satir .btn { min-height: 48px; }
.eylem-satir.ust12 { margin-top: 12px; }
.bulunamadi-kart { padding: 18px; margin-bottom: 8px; }
.bulunamadi-kart .ust-satir { display: flex; align-items: flex-start; gap: 12px; }
.bulunamadi-kart .ust-satir > .ikon { color: var(--altin); }
.bulunamadi-kart .ipucu { margin-top: 8px; padding-left: 36px; font: 400 14px/20px var(--sans); letter-spacing: .25px; color: var(--on-sfc-var); }
.bulunamadi-kart .eylem-satir { margin-top: 14px; }
.ayet-ara-satir { min-height: 56px; margin-top: 16px; padding: 10px 4px; gap: 14px; }
.ayet-ara-satir > .ikon:first-child { color: var(--primary); }
.ayet-ara-satir .metin { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ayet-ara-satir .t-bs { color: var(--on-sfc-var); }
.ayet-ara-satir > .ikon:last-child { color: var(--on-sfc-var); }

/* Soru detayı */
.soru-detay { padding: 0 16px 24px; }
.soru-detay h1 { padding: 0 4px; font: 400 24px/32px var(--serif); letter-spacing: 0; }
.ilgili { display: flex; align-items: center; gap: 12px; margin: 14px 0; padding: 0 4px; }
.ilgili h2 { font: 500 14px/20px var(--sans); letter-spacing: .2px; color: var(--primary); }
.ilgili .altin-ayrac { flex: 1; }
.baglam { padding: 0 20px 24px; }
.baglam .kart-ust .ref { font: 600 16px/24px var(--sans); letter-spacing: .15px; }
.baglam .ar-metin { margin-top: 10px; }
.baglam .meal-bolum { margin-top: 12px; display: flex; flex-direction: column; }
.baglam .gezin { display: flex; align-items: center; margin-top: 16px; }
.baglam .gezin .btn-metin { gap: 4px; }
.baglam .btn-cizgi { width: 100%; margin-top: 4px; }

/* ---------- Ara ---------- */
.ara { padding: 4px 16px 32px; }
.ara .parcali { margin-top: 10px; }
.ara .ust-bosluk { height: 12px; }
.ara .ust-bosluk.ince { height: 8px; }
.sonuc-sayi { padding: 0 0 10px 4px; font: 500 14px/20px var(--sans); letter-spacing: .2px; color: var(--on-sfc-var); }

/* ---------- Kaydedilenler ---------- */
.kayitli-govde { padding: 16px; }
.kayitli-govde.sorular-l { padding: 8px 16px; }
.kayitli-soru { min-height: 56px; padding: 8px 0 8px 4px; display: flex; align-items: center; border-bottom: 1px solid var(--outline-var); }
.kayitli-soru a { flex: 1; min-width: 0; font: 400 16px/26px var(--sans); letter-spacing: .5px; }
.kayitli-soru .ikon-dugme { color: var(--isaret); }

/* ---------- Ayarlar ---------- */
.ayarlar { padding: 0 16px 32px; }
.ayarlar .bolum-bas { padding: 24px 0 8px; }
.ayarlar .bolum-bas:first-child { padding-top: 4px; }
.ayar-blok { padding: 16px; }
.ayar-blok .parcali { margin-top: 10px; }
.anahtar-satir { min-height: 56px; padding: 10px 16px; gap: 12px; cursor: pointer; }
.anahtar-satir .metin, .gez-satir .metin { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.anahtar-satir .t-bs, .gez-satir .t-bs { color: var(--on-sfc-var); }
.gez-satir { min-height: 56px; padding: 10px 16px; gap: 16px; }
.gez-satir > .ikon:first-child { color: var(--altin); }
.gez-satir > .ikon:last-child:not(:first-child) { color: var(--on-sfc-var); }
.punto-satir { display: flex; align-items: center; }
.punto-satir .t-bl { flex: 1; }
.punto-satir .t-ll { color: var(--primary); }
.onizleme-et { margin-top: 8px; font: 500 12px/16px var(--sans); letter-spacing: .5px; color: var(--on-sfc-var); }
.onizleme-ar { margin-top: 4px; }
.surum-satir { display: flex; align-items: center; min-height: 56px; padding: 0 16px; }
.surum-satir .t-bl { flex: 1; }
.surum-satir .t-bm { color: var(--on-sfc-var); }
.punto-sayfa { padding: 0 24px 32px; display: flex; flex-direction: column; gap: 6px; }
.punto-sayfa h2 { font: 400 22px/28px var(--serif); margin-bottom: 14px; letter-spacing: 0; }
.punto-sayfa .anahtar-satir { padding: 4px 0 0; min-height: 52px; }
.meal-radyo { display: flex; align-items: center; gap: 12px; min-height: 52px; width: 100%; text-align: left; color: var(--on-sfc); font: 400 16px/26px var(--sans); letter-spacing: .5px; }
.meal-radyo .radyo { margin: 0; }

/* Kaynaklar / Gizlilik */
.metin-blok { padding: 16px; }
.metin-blok .t-bm + .t-bm { margin-top: 12px; }
.lisans { margin: 0; padding: 12px; border-radius: 12px; background: var(--sfc); color: var(--on-sfc); font: 11px/15px "KC Mono", "Droid Sans Mono", monospace; letter-spacing: 0; white-space: pre; overflow-x: auto; }
.meal-kaynak { display: flex; padding: 6px 0; gap: 8px; }
.meal-kaynak .t-bl { flex: 1; }
.meal-kaynak .t-bs { color: var(--on-sfc-var); }
.gizlilik { padding: 16px; }
.gizlilik .kart { padding: 18px 18px 6px; }
.gizlilik p { margin-bottom: 12px; }

/* ---------- Vakit (İftar ve Sahur) ---------- */
.vakit { padding: 12px 16px 32px; }
.konum-satir { display: flex !important; align-items: center; min-height: 56px; padding: 8px 6px 8px 14px; }
.konum-satir > .ikon { color: var(--altin); margin-right: 12px; }
.konum-satir .metin { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.konum-satir .metin > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.konum-satir .t-bs { color: var(--on-sfc-var); }
.konum-satir .degistir { padding: 12px 10px; font: 500 14px/20px var(--sans); letter-spacing: .2px; color: var(--primary); }
.vakit-ic { margin-top: 14px; }
.sayac-kart { display: flex; flex-direction: column; align-items: center; padding: 22px 20px; border-radius: 28px; background: var(--sayac-zemin); color: var(--sayac-metin); }
.sayac-ic { display: flex; flex-direction: column; align-items: center; width: 100%; }
.sayac-etiket { font: 600 14px/20px var(--sans); letter-spacing: 1.6px; color: var(--sayac-etiket); text-transform: uppercase; }
.sayac-rakam { display: flex; align-items: flex-end; justify-content: center; margin-top: 10px; }
.sayac-rakam .say { font: 400 45px/52px var(--sans); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.sayac-rakam .birim { margin: 0 12px 9px 3px; font: 500 14px/20px var(--sans); letter-spacing: .1px; opacity: .78; }
.sayac-rakam .birim:last-child { margin-right: 0; }
.sayac-hedef { margin-top: 8px; font: 600 16px/24px var(--sans); letter-spacing: .15px; opacity: .92; }
.ramazan-hap { margin-top: 14px; padding: 7px 14px; border-radius: 999px; background: color-mix(in srgb, var(--sayac-metin) 12%, transparent); font: 500 14px/20px var(--sans); letter-spacing: .2px; }
.saat-kartlar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.saat-kart { padding: 14px 16px; }
.saat-kart .t-ts { color: var(--primary); }
.saat-kart .t-bs { color: var(--on-sfc-var); }
.saat-kart .saat { margin-top: 4px; font: 400 28px/36px var(--serif); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.tarih-satir { margin-top: 10px; text-align: center; font: 400 14px/20px var(--sans); letter-spacing: .25px; color: var(--on-sfc-var); }
.vakitler-bas { margin-top: 20px; padding-bottom: 8px; }
.vakit-satir { display: flex; align-items: center; min-height: 52px; padding: 8px 16px; }
.vakit-satir .ad { flex: 1; font: 400 16px/26px var(--sans); letter-spacing: .5px; }
.vakit-satir.kalin .ad { font-weight: 600; }
.vakit-satir .saat { font: 400 22px/28px var(--serif); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.vakit-satir.gecti { color: var(--on-sfc-var); }
.vakit-satir.siradaki { background: var(--p-cont); color: var(--on-p-cont); }
.vakit-satir.siradaki .ad, .vakit-satir.siradaki .saat { font-weight: 600; }
.siradaki-hap { margin-right: 12px; padding: 3px 10px; border-radius: 999px; background: var(--primary); color: var(--on-primary); font: 500 12px/16px var(--sans); letter-spacing: .5px; }
.vakit .bilgi-not { margin-top: 12px; }
.imsakiye-kart { display: flex !important; align-items: center; min-height: 64px; padding: 10px 16px; gap: 16px; margin-top: 12px; }
.imsakiye-kart > .ikon:first-child { color: var(--altin); }
.imsakiye-kart .metin { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.imsakiye-kart .t-bs { color: var(--on-sfc-var); }
.imsakiye-kart > .ikon:last-child { color: var(--on-sfc-var); }

/* ---------- Kıble ---------- */
.kible-durum { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; text-align: center; font: 400 24px/32px var(--serif); color: var(--on-sfc); letter-spacing: 0; }
.kible-durum.canli { font-weight: 600; }
.kible-durum .ikon { width: 30px; height: 30px; }
.kadran { display: block; width: 100%; max-width: 340px; margin: 12px auto 0; aspect-ratio: 1; }
.kadran svg { display: block; width: 100%; height: 100%; overflow: visible; }
.kible-bilgi { margin-top: 20px; }
.uyari-kart { display: flex; align-items: flex-start; gap: 12px; padding: 14px; margin-bottom: 12px; background: var(--sec-cont); color: var(--on-sec-cont); }
.uyari-kart::after { border-color: color-mix(in srgb, var(--altin) 60%, transparent); }
.uyari-kart .metin { display: flex; flex-direction: column; }
.deger-kartlar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.deger-kart { padding: 12px 14px; }
.deger-kartlar .deger-kart { min-height: 104px; }
.deger-kart .t-ll { color: var(--primary); }
.deger-kart .deger { margin-top: 2px; font: 400 24px/32px var(--serif); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.deger-kart .t-bs { color: var(--on-sfc-var); }
.kible-bilgi > .deger-kart { margin-top: 12px; }
.izin-dugme { display: flex; justify-content: center; margin-top: 12px; }

.kadran { --kr: var(--outline-var); --ki: var(--altin); --kn: var(--on-sfc); --kz: var(--sfc-lowest); }
.kadran[data-durum="hizali"] { --kr: var(--kible-yesil); --ki: var(--kible-yesil); --kn: var(--kible-yesil); --kz: color-mix(in srgb, var(--kible-yesil) var(--zemin-oran), var(--sfc-lowest)); }
.kadran[data-durum="hizasiz"] { --kr: var(--kible-kirmizi); --ki: var(--kible-kirmizi); --kn: var(--kible-kirmizi); --kz: color-mix(in srgb, var(--kible-kirmizi) var(--zemin-oran), var(--sfc-lowest)); }
.kadran .k-yuz { fill: var(--kz); transition: fill .3s; }
.kadran .k-halka { stroke: var(--kr); transition: stroke .3s; }
.kadran .c-ana { stroke: var(--on-sfc); }
.kadran .c-uzun { stroke: color-mix(in srgb, var(--on-sfc-var) 80%, transparent); }
.kadran .c-kisa { stroke: color-mix(in srgb, var(--on-sfc-var) 45%, transparent); }
.kadran text { font: 600 18px var(--sans); fill: var(--on-sfc-var); }
.kadran text.h-k { font-weight: 700; fill: var(--error); }
.kadran .k-igne { stroke: var(--ki); transition: stroke .3s; }
.kadran .k-gobek { fill: var(--ki); transition: fill .3s; }
.kadran .k-nisan { fill: var(--kn); }
.kadran .k-altin-dolgu { fill: var(--altin); }
.kadran .k-altin-cizgi { stroke: var(--altin); }
.kible-durum[data-durum="hizali"] { color: var(--kible-yesil); }
.kible-durum[data-durum="hizasiz"] { color: var(--kible-kirmizi); }

/* Geniş pencere (yatay telefon, tablet): iki sütun (Android BoxWithConstraints ≥ 600 dp) */
.kabuk { container-type: inline-size; }
@container (min-width: 600px) {
  .vakit-iki { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; align-items: start; }
  .vakit-iki .vakitler-bas { margin-top: 0; }
  .kible-iki { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
  .kible-iki .kadran { max-width: 300px; }
  .kible-iki .kible-bilgi { margin-top: 0; }
}
/* alçak pencerede (yatay telefon) Vakit/Kıble başlık çubuğu gizlenir */
@media (max-height: 479px) { body.vakit-sayfa .ust { display: none; } }

/* İmsakiye: tablo kendi içinde kayar (başlık satırı sabit), dar ekranda yana da kayar */
.imsakiye { display: flex; flex-direction: column; height: calc(100vh - 64px); height: calc(100dvh - 64px); padding-bottom: 0; }
.ims-tablo-kap { position: relative; flex: 1; min-height: 0; overflow: auto; }
.ims-tablo { min-width: 410px; padding-bottom: 32px; }
.ims-bas { position: sticky; top: 0; z-index: 1; }

/* ---------- Konum seçici ---------- */
.konum-sec { padding: 4px 16px 32px; }
.gps-kart { margin-top: 12px; margin-bottom: 8px; }
.gps-kart .satir-tik { min-height: 64px; padding: 12px 16px; gap: 16px; }
.gps-kart .satir-tik > .ikon { color: var(--primary); }
.gps-kart .metin { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gps-kart .t-tm { color: var(--primary); }
.gps-kart .t-bs { color: var(--on-sfc-var); }
.gps-mesaj { padding: 16px; }
.gps-mesaj .btn { margin-top: 8px; min-height: 48px; }
.konum-sec .bolum-bas.son-b { padding: 12px 0 4px; }
.konum-sec .bolum-bas.il-b { padding: 16px 0 4px; }
.dunya-ipucu { padding-bottom: 4px; font: 400 12px/16px var(--sans); letter-spacing: .4px; color: var(--on-sfc-var); }
.yer-satir { min-height: 52px; padding: 6px 8px; gap: 14px; border-bottom: 1px solid var(--outline-var); }
.yer-satir > .ikon:first-child { width: 22px; height: 22px; color: var(--altin); }
.yer-satir .metin { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.yer-satir .metin > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yer-satir .t-bs { color: var(--on-sfc-var); }
.yer-satir .secili { color: var(--primary); }
.il-satir { min-height: 52px; padding: 6px 8px; border-bottom: 1px solid var(--outline-var); }
.il-satir .plaka { width: 36px; flex: none; font: 500 14px/20px var(--sans); letter-spacing: .2px; color: var(--isaret); }
.il-satir .t-bl { flex: 1; }
.il-satir .secili { color: var(--primary); margin-right: 8px; }
.il-satir > .ikon:last-child { color: var(--on-sfc-var); }
.ilce-bas { display: flex; align-items: center; padding-top: 8px; }
.ilce-bas .bolum-bas { flex: 1; }
.konum-yok { padding: 8px; font: 400 16px/26px var(--sans); letter-spacing: .5px; color: var(--on-sfc-var); }

/* ---------- İmsakiye ---------- */
/* imsakiye: bkz. üstteki sabit başlıklı tablo düzeni */
.ims-ust { padding: 0 16px; }
.ims-ay { display: flex; align-items: center; margin-top: 6px; }
.ims-ay .t-tl { flex: 1; text-align: center; }
.ims-ramazan { min-height: 48px; padding-top: 12px; text-align: center; margin-top: 6px; }


.ims-bas, .ims-satir { display: grid; grid-template-columns: 78fr repeat(6, 50fr); align-items: center; padding: 0 16px; }
.ims-bas { padding-top: 10px; padding-bottom: 10px; background: var(--sfc); }
.ims-bas span { text-align: center; font: 500 12px/16px var(--sans); letter-spacing: .5px; color: var(--on-sfc-var); white-space: nowrap; }
.ims-bas span:first-child { text-align: left; font: 500 14px/20px var(--sans); letter-spacing: .2px; color: var(--on-sfc); }
.ims-bas span.vurgu { font-weight: 700; color: var(--primary); }
.ims-satir { min-height: 52px; padding-top: 6px; padding-bottom: 6px; background: var(--bg); border-bottom: 1px solid color-mix(in srgb, var(--outline-var) 60%, transparent); }
.ims-satir.cift { background: var(--sfc-low); }
.ims-satir.bugun { background: var(--p-cont); }
.ims-gun { display: flex; flex-direction: column; min-width: 0; }
.ims-gun b { font: 600 14px/20px var(--sans); letter-spacing: .25px; white-space: nowrap; }
.ims-gun span { font: 500 11px/16px var(--sans); letter-spacing: .5px; color: var(--on-sfc-var); white-space: nowrap; }
.ims-saat { text-align: center; font: 400 14px/20px var(--sans); letter-spacing: .25px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ims-saat.vurgu { font-weight: 600; color: var(--primary); }
.ims-satir.bugun .ims-saat.vurgu { color: var(--on-sfc); }