@charset "utf-8";
/* ==========================================================================
   sahaar.app — ana sayfa (landing) stili
   Kaynak: site/landing/yon.md ("Ufuk" yönü) · docs/03-tasarim/tasarim-sistemi.md
           §2 renk · §3 tipografi · §4 yarıçap · §6 hareket ·
           docs/03-tasarim/marka-kimligi.md · ikon-ve-logo-yonu.md (Yön A)
   Ürün görselleri: site/landing/ekranlar.css (§10, `--sh-` önekiyle satır içi)

   KURALLAR
   · Üçüncü taraf istek YOK (font, ikon, betik dahil) — sistem font yığını.
   · Tek CSS dosyası: alt sayfaların site/ortak.css'i bu dosyadan bağımsızdır.
   · HAREKET yalnız transform + opacity ile kurulur (düzen/boyama zinciri
     tetiklenmez). Tek istisna, hareket olmayan renk geri bildirimidir:
     hover/basma için `color` ve `background-color` — boyama adımı, 140 ms.
   · `transition: all` ve `ease-in` yok; arayüz hareketi 300 ms'i geçmez
     (300 ms üstü yalnız §9'daki dört sahne hareketindedir);
     otomatik oynayan döngü yok.
   ========================================================================== */

/* ==========================================================================
   1 — Tokenlar
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* UI semantik — açık tema (tasarım sistemi §2.2) */
  --zemin: #f6f4ef;
  --yuzey: #ffffff;
  --yuzey-2: #ece9e2;
  --murekkep: #17181c;
  --murekkep-2: #5a5e6a;
  --safak: #a85217;
  --safak-uzeri: #ffffff;
  --safak-yumusak: #f8eadf;
  --cizgi: rgba(23, 24, 28, 0.1);
  --cizgi-vurgu: rgba(23, 24, 28, 0.22);
  --odak: var(--safak);

  /* Marka / gece bandı (§2.3b) — tema değiştirmez, marka yüzeyidir */
  --gece-ust: #1c2050;
  --gece: #171a3d;
  --gece-alt: #111436;
  --marka-amber: #f29b4a;
  --marka-amber-ac: #ffb066;
  --seher: #f4eadb;
  --seher-yumusak: rgba(244, 234, 219, 0.82);
  /* Bant üstündeki kenar/iz renkleri — ham rgba kullanılmaz */
  --seher-hat: rgba(244, 234, 219, 0.28);
  --seher-hat-guclu: rgba(244, 234, 219, 0.4);
  --amber-hat: rgba(242, 155, 74, 0.35);
  --amber-iz: rgba(242, 155, 74, 0.6);
  --amber-uzeri: #17181c;
  --cam: rgba(255, 255, 255, 0.14);
  --cam-kenar: rgba(255, 255, 255, 0.12);

  /* Kâğıdın gölgeli ucu — gece bandının hemen altındaki ilk yüzey.
     ELLE seçildi: eskiden `color-mix(in srgb, gece 7%, zemin)` idi ve
     lacivert karıştırmak kâğıdın kromasını 7'den 3'e düşürüyordu (ofis grisi).
     Bu değer aynı açıklığı verir, sıcaklığı bırakmaz — krom 20. (24.08 denetimi) */
  --zemin-ust: #eee8dc;
  /* Sıcak hatlar: kâğıdın kendi hue'sundan türer, nötr siyahtan değil.
     Kontrast rolü yok (dekoratif kenar) — denetim kenarı hâlâ --cizgi-vurgu. */
  --cizgi-sicak: rgba(96, 66, 32, 0.14);
  --parilti: rgba(255, 255, 255, 0.75);
  --kart-golge: 0 1px 2px rgba(58, 42, 22, 0.045),
                0 20px 44px -30px rgba(58, 42, 22, 0.34);
  /* Ufuk ışıması — dört gök evresinde de aynı: şafak bir ışık durumudur */
  --isima: rgba(242, 155, 74, 0.3);
  --isima-sonuk: rgba(242, 155, 74, 0.09);

  /* Cihaz yüzeyleri — temadan bağımsız: iOS donanımı her temada aynı görünür */
  --cihaz-siyah: #000;
  --cihaz-beyaz: #fff;
  --ios-turuncu: #ff9f0a;
  --cihaz-golge: rgba(0, 0, 0, 0.08);

  /* Gökyüzü — varsayılan evre: Şafak (JS kapalıysa bu kalır) */
  --gok: linear-gradient(180deg, #171a3d 0%, #3b2c50 58%, #7a4a34 100%);
  --disk-opak: 1;

  /* Tipografi */
  --yazi: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
    system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --yazi-yuvarlak: ui-rounded, -apple-system, "SF Pro Rounded", system-ui,
    "Segoe UI", sans-serif;

  /* Ölçü ve ritim — iki adımlı: küme içi (sık) ve küme arası (nefes).
     Tek değer kullanmak sayfayı metronoma çevirir. */
  --olcu: 64ch;
  --kap: 1120px;
  --kenar: 20px;
  --ritim: clamp(88px, 11vw, 148px);
  --ritim-sik: clamp(56px, 7vw, 96px);

  /* Yarıçap ölçeği (§4.2) */
  --kose-s: 10px;
  --kose-m: 14px;
  --kose-l: 20px;
  --kose-xl: 28px;

  /* Hareket (§6) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

@media (min-width: 600px) {
  :root { --kenar: 32px; }
}
@media (min-width: 1024px) {
  :root { --kenar: 40px; }
}

/* Gökyüzü evreleri — <html data-evre> ile seçilir (§3.3) */
:root[data-evre="gece"] {
  --gok: linear-gradient(180deg, #080b22 0%, #141735 100%);
  --disk-opak: 0.7;
}
:root[data-evre="safak"] {
  --gok: linear-gradient(180deg, #171a3d 0%, #3b2c50 58%, #7a4a34 100%);
}
:root[data-evre="gunduz"] {
  --gok: linear-gradient(180deg, #1b2551 0%, #2e3e6b 100%);
}
:root[data-evre="aksam"] {
  --gok: linear-gradient(180deg, #241a3e 0%, #5a3350 66%, #7a3e2e 100%);
}

/* Koyu tema — yalnız prefers-color-scheme; ikinci mekanizma yok */
@media (prefers-color-scheme: dark) {
  :root {
    --zemin-ust: #13161f;
    --cizgi-sicak: rgba(242, 241, 236, 0.1);
    --parilti: rgba(255, 255, 255, 0.045);
    --kart-golge: 0 1px 2px rgba(0, 0, 0, 0.3),
                  0 20px 44px -30px rgba(0, 0, 0, 0.9);
    --isima: rgba(242, 155, 74, 0.24);
    --isima-sonuk: rgba(242, 155, 74, 0.07);
    --zemin: #0e1017;
    --yuzey: #171a23;
    --yuzey-2: #20242f;
    --murekkep: #f2f1ec;
    --murekkep-2: #a6a9b4;
    --safak: #f0a35a;
    --safak-uzeri: #1a1204;
    --safak-yumusak: #2b2118;
    --cizgi: rgba(242, 241, 236, 0.1);
    --cizgi-vurgu: rgba(242, 241, 236, 0.24);
  }
}

/* Yüksek kontrast — çizgi güçlenir, ikincil metin birincil olur, gök sabitlenir */
@media (prefers-contrast: more) {
  :root {
    --murekkep-2: var(--murekkep);
    --cizgi: var(--cizgi-vurgu);
    --cizgi-sicak: var(--cizgi-vurgu);
    --kart-golge: 0 0 0 transparent; /* liste içinde `none` geçersiz olurdu */
    --isima: transparent;
    --isima-sonuk: transparent;
    --seher-yumusak: var(--seher);
    --seher-hat: var(--seher-hat-guclu);
    --amber-hat: var(--amber-iz);
    --gok: linear-gradient(180deg, #080b22 0%, #141735 100%);
  }
}

/* ==========================================================================
   2 — Temel
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Klavye odağı, geç yüklenen içeriklerin yumuşak kaydırma animasyonunu
   yarıda bırakıp odaklanan öğeyi ekran dışına itmesine izin vermemeli. */
html:has(:focus-visible) { scroll-behavior: auto; }

body {
  margin: 0;
  background: var(--zemin);
  color: var(--murekkep);
  font-family: var(--yazi);
  font-size: 1.0625rem; /* 17 px */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-underline-position: from-font;
}

::selection {
  background: var(--safak-yumusak);
  color: var(--murekkep);
}

img, svg { max-width: 100%; }

/* Atlama bağlantısı — ilk odaklanabilir öğe */
.atla {
  position: absolute;
  inset-inline-start: var(--kenar);
  inset-block-start: 12px;
  z-index: 50;
  padding: 12px 18px;
  border-radius: var(--kose-s);
  background: var(--yuzey);
  color: var(--murekkep);
  border: 1px solid var(--cizgi-vurgu);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-180%);
}
.atla:focus-visible { transform: translateY(0); }

/* Odak halkası — animasyonsuz, her yüzeyde görünür */
:where(a, button, summary, input, [tabindex]):focus-visible {
  outline: 2px solid var(--odak);
  outline-offset: 3px;
  border-radius: 4px;
}

[id] { scroll-margin-block-start: 24px; }

/* ==========================================================================
   3 — Tipografi (yon.md §4.2)
   ========================================================================== */

h1, h2, h3 {
  margin: 0;
  font-weight: 600;
  color: var(--murekkep);
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.5rem, 6vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
}

h2 {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

h3 {
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

p, ul, ol, dl { margin: 0 0 1em; }
p { text-wrap: pretty; }
:where(p, li) { overflow-wrap: break-word; }

figure { margin: 0; }
figcaption { margin-block-start: 14px; text-align: center; }

.lede {
  font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--murekkep-2);
  max-width: 46ch;
}

.meta {
  font-size: 0.875rem;
  line-height: 1.45;
  letter-spacing: 0.005em;
  color: var(--murekkep-2);
}

.etiket {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--murekkep-2);
}
/* Kılavuz çizgi: bölüm etiketini markanın rengine bağlar (.evre::before ile
   aynı jest). Kahraman rozetinde yok — orada işaret zaten .isik noktasıdır. */
.etiket:not(.rozet)::before {
  content: "";
  width: 18px;
  height: 1px;
  flex: none;
  background: var(--safak);
  opacity: 0.6;
}
.gece .etiket:not(.rozet)::before { background: var(--marka-amber); opacity: 0.75; }

.sayi,
.tab { font-variant-numeric: tabular-nums; }

a {
  color: var(--safak);
  text-decoration-thickness: from-font;
  text-underline-offset: 0.12em;
  text-decoration-skip-ink: auto;
  transition: color 140ms ease;
}
@media (hover: hover) and (pointer: fine) {
  a:hover { color: var(--murekkep); }
}

ul { padding-inline-start: 1.35em; }
li { margin-bottom: 0.4em; }
li::marker { color: var(--murekkep-2); }

/* Örnek veri etiketi — ADR-004 şeffaflık kuralının sayfa karşılığı */
.ornek {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--cizgi-vurgu);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--murekkep-2);
}
.ornek::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--murekkep-2);
  flex: none;
}
p.ornek { margin-block-end: 0; }

/* ==========================================================================
   4 — Düzen
   ========================================================================== */

.kap {
  max-width: var(--kap);
  margin-inline: auto;
  padding-inline: var(--kenar);
}

.olcu { max-width: var(--olcu); }
.olcu-dar { max-width: 52ch; }

.akis {
  /* Sayfa boyu açılma: gece bandından sabah kâğıdına (yon §2.3).
     Üst durak artık lacivert karışımı değil, kâğıdın kendi sıcak gölgesi:
     srgb'de gece karıştırmak kromayı yarıya indirip bölümleri ofis grisi
     yapıyordu (24.08 denetimi). Ufuk bandı da aynı rengi kullanır, dikiş yok. */
  background: linear-gradient(
    180deg,
    var(--zemin-ust) 0%,
    var(--zemin) 46%
  );
}

/* Ritim: bölümler küme küme akar. Varsayılan sık; `.nefes` yeni kümeyi açar. */
.bolum { padding-block-start: var(--ritim-sik); }
.bolum:last-child { padding-block-end: var(--ritim-sik); }
.bolum.nefes { padding-block-start: var(--ritim); }

/* İki kolon — genişlik eşit, asimetri içeriğin kendi ölçüsünden gelir */
.ikili {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

@media (min-width: 860px) {
  .ikili { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ikili > .yazi { grid-column: 1; grid-row: 1; }
  .ikili > .gorsel { grid-column: 2; grid-row: 1; }
  .ikili.ters > .yazi { grid-column: 2; }
  .ikili.ters > .gorsel { grid-column: 1; }

  /* Görseller dış kenara yaslanır: sayfanın kenarı sabit kalır,
     ortada yüzen kart görüntüsü kaybolur */
  .ikili > .gorsel { justify-content: flex-end; }
  .ikili.ters > .gorsel { justify-content: flex-start; }

  /* 21.09.2026 masaüstü düzen düzeltmesi (sahip bulgusu): Bugün, Kontrol Merkezi ve
     Kur'an giriş satırı .ikili KULLANMIYORDU — tek .kap içinde .yazi.olcu dar sütunda
     kalıyor, görsel .ekran-sahne/.gorsel'in kendi justify-content:center'ıyla altta
     ortalanıyor, sağda geniş boş kolon kalıyordu. Üçü artık .ikili; .gorsel'in üstündeki
     .bosluk-ust satır boşluğu artık grid'in kendi `gap`inden geliyor, iki yana da
     eklenip görseli aşağı itmesin diye burada sıfırlanır. */
  .ikili > .gorsel.bosluk-ust { margin-block-start: 0; }

  /* Bir satırın metni tek kolona sığmayan uzun devam paragrafları (Kur'an bölümü
     "Reading/Keeping track/…" gibi) — satırın altında, iki kolonu da kaplar.
     `.yazi` hâlâ eşleştiği için `grid-row` de burada elle sıfırlanmalı, yoksa
     `.ikili > .yazi { grid-row: 1 }` kazanıp metin ve görselle üst üste biner.
     `.olcu`'nun 64ch tavanı da burada kaldırılır — iki kolonu kaplayan blok
     kendi genişliğini `.yazi-genis`'in ALTINDAKİ 1024 px kuralından alır. */
  .ikili > .yazi-genis { grid-column: 1 / -1; grid-row: 2; max-width: none; }
}

/* 21.09.2026 tur 2 (sahip bulgusu — tur 1'de `grid-column:1/-1` genişliği verdi ama
   metin hâlâ TEK akışta sol yarıda kalıp sağı boş bırakıyordu): ≥ 1024 px'te bu uzun
   gövde metni gerçek İKİ metin kolonuna bölünür (CSS multi-column). Paragraf içi
   bölünme yok (`break-inside: avoid`); dipnot (`.meta`) iki kolonu da kaplayarak
   altta kalır. Kolon ölçüsü ~1040 px'lik `.kap` içinde iki kolon + boşlukla
   60–70ch bandında kalır (860–1023 px arası tek, tam genişlik sütun olarak kalır —
   o aralıkta iki kolon dar/çirkin olurdu). */
@media (min-width: 1024px) {
  .yazi-genis {
    column-count: 2;
    column-gap: clamp(32px, 4vw, 56px);
  }
  .yazi-genis > * { break-inside: avoid; }
  .yazi-genis > .meta { column-span: all; }
}

.gorsel {
  display: flex;
  justify-content: center;
  min-width: 0;
}

/* Üst üste yığılan görsel öğeler (kart + liste) */
.gorsel-dikey {
  display: flex;
  flex-direction: column;
  width: min(420px, 100%);
}

.yazi > * + * { margin-block-start: 16px; }
.yazi p { margin-block-end: 0; }
.yazi h2 + p { margin-block-start: 20px; }
.olcu > h2 + p,
.gizlilik > h2 + p { margin-block-start: 20px; }

/* 22.09.2026 (sahip): ana sayfada iki yana yaslama KALDIRILDI — «hoş durmamış». Gövde metni her genişlikte
   sola dayalıdır; alt sayfalardaki (.belge) yaslama bu karardan etkilenmez. */

/* Boşluk yardımcıları — ritim tek yerden gelir */
.bosluk-ust { margin-block-start: clamp(32px, 4vw, 48px); }
.not-ust { margin-block-start: 20px; }

/* ==========================================================================
   5 — Gece bandı, üst çubuk, kahraman
   ========================================================================== */

.gece {
  position: relative;
  isolation: isolate;
  /* Dekoratif gökyüzü kenardan taşar, sayfa kaymaz.
     `clip`, `hidden`den farklı olarak KAYDIRMA KAPSAYICISI YARATMAZ — §9.4'teki
     `animation-timeline: view()` en yakın kaydırma kapsayıcısına bağlanır ve
     `hidden` ile hiç ilerlemeyen bir çizelgeye kilitleniyordu. Desteklemeyen
     tarayıcı ilk satırdaki `hidden`da kalır (kırpma aynı, yalnız parallax yok). */
  overflow: hidden;
  overflow: clip;
  color: var(--seher);
  background: var(--gok);
  --odak: var(--marka-amber);
}

.gece h1,
.gece h2 { color: var(--seher); }
.gece .lede,
.gece .meta,
.gece .etiket { color: var(--seher-yumusak); }
.gece a { color: var(--marka-amber); }
@media (hover: hover) and (pointer: fine) {
  .gece a:hover { color: var(--seher); }
}

/* Ufuk: bandın altındaki tek amber çizgi + yer bandı.
   YALNIZ .ufuklu bantlarda (kısa başlık çubuklarında çizgi yazının içinden geçiyordu);
   bant rengi sayfa zemini — hero, ufukta sayfaya açılır, iki koyu bant üst üste binmez. */
.gece.ufuklu::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 30px;
  /* Bant rengi = akışın ilk durağı (--zemin-ust). İkisi ayrı renkken
     ufukta 30 px'lik görünür bir dikiş kalıyordu (24.08 denetimi). */
  background: var(--zemin-ust);
  border-block-start: 0;
  z-index: -1;
}

/* Ufuk çizgisi: düz kenar yerine ışığın altında güçlenen tek hairline.
   Ayrı katman, çünkü bandın kendi rengiyle birlikte tek `background`ta durur. */
.gece.ufuklu:not(.ters-ufuk)::after {
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    var(--amber-hat) 12%,
    var(--marka-amber) 62%,
    var(--amber-hat) 90%,
    transparent 100%
  );
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: top left;
}

/* Ufuk ışıması — gece bandının alt kenarında, diskin arkasında duran
   geniş amber bulut. Uygulamanın mağaza karelerindeki ışık dili sitede de
   olsun diye (24.08). Dört gök evresinde de aynı: şafak bir ışık durumudur.
   z-index -2: diskin ve yer bandının ARKASINDA kalır, metne dokunmaz. */
.gece.ufuklu:not(.ters-ufuk)::before {
  content: "";
  position: absolute;
  inset-inline: -25%;
  inset-block-end: 0;
  height: min(58%, 460px);
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(
      58% 100% at 76% 104%,
      var(--isima) 0%,
      var(--isima-sonuk) 42%,
      transparent 72%
    ),
    radial-gradient(
      120% 74% at 50% 108%,
      var(--isima-sonuk) 0%,
      transparent 68%
    );
}

/* Kapanış bandında ufuk ters yönde: yalnız ince amber çizgi üstte */
.gece.ufuklu.ters-ufuk::after {
  inset-block-end: auto;
  inset-block-start: 0;
  height: 0;
  background: none;
  border-block-end: 1px solid var(--amber-hat);
}

/* Kapanış bandı: ışıma yer bandının hemen ALTINDA (ufuk ters yönde).
   Alfa kasten düşük — ortadaki metnin kontrastına dokunmaz. */
.gece.ufuklu.ters-ufuk::before {
  content: "";
  position: absolute;
  inset-inline: -25%;
  inset-block-start: 0;
  height: min(46%, 300px);
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(
    90% 100% at 50% -6%,
    var(--isima-sonuk) 0%,
    transparent 68%
  );
}

/* Üst çubuk — yapışkan değil, sayfayla akar */
.ust {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  min-height: 60px;
  padding-block: 10px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 9px;
  font-family: var(--yazi-yuvarlak);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--seher);
  text-decoration: none;
}
.wordmark .nokta { color: var(--marka-amber); }
.wordmark .im {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  flex: none;
}

.ust-baglar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  font-size: 0.9375rem;
}
.ust-baglar a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: var(--kose-s);
  color: var(--seher);
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .ust-baglar a:hover { color: var(--marka-amber); }
}
/* Başlıkta App Store düğmesi (28.09.2026, sahip: «düğmeler daha büyük, başlıkta da»).
   Telefonda Destek/Gizlilik gizlenir (altbilgide var); dil + indirme kalır. */
.ust-baglar .cta {
  margin-inline-start: 6px;
  padding: 10px 16px;
  background: var(--marka-amber);
  color: var(--amber-uzeri);
  font-size: 0.9375rem;
  font-weight: 600;
}
@media (hover: hover) and (pointer: fine) {
  .ust-baglar .cta:hover { background: var(--marka-amber-ac); color: var(--amber-uzeri); }
}
@media (max-width: 599px) {
  .ust-baglar > a:not(.dil):not(.cta) { display: none; }
  .ust:has(.cta), .ust-baglar { flex-wrap: nowrap; }
  .ust-baglar .dil { padding-inline: 10px; }
  .ust-baglar .cta { padding-inline: 12px; font-size: 0.875rem; white-space: nowrap; }
}
.cta-kisa { display: none; }
@media (max-width: 599px) {
  .cta-uzun { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .cta-kisa { display: inline; }
}
.dugme-buyuk {
  min-height: 58px;
  padding: 16px 34px;
  font-size: 1.125rem;
}
.ust-baglar .dil {
  border: 1px solid var(--seher-hat-guclu);
  font-size: 0.875rem;
  padding-inline: 12px;
}

/* Kahraman */
.kahraman {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(36px, 5vw, 56px);
  padding-block: clamp(40px, 6vw, 72px) clamp(96px, 12vw, 152px);
}

@media (min-width: 900px) {
  .kahraman {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
    align-items: center;
  }
}

.kahraman .rozet {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
  padding: 7px 14px;
  border: 1px solid var(--seher-hat);
  border-radius: 999px;
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 0.8125rem;
  color: var(--seher-yumusak);
}
.kahraman .rozet .isik {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--marka-amber);
  flex: none;
}

.kahraman h1 { max-width: 20ch; }

.imza {
  margin: 18px 0 0;
  font-family: var(--yazi-yuvarlak);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--marka-amber);
}

.kahraman .lede { margin-block-start: 22px; }

.eylemler {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-block: 28px 14px;
}

.kahraman .meta + .meta { margin-block-start: 10px; }
.kahraman .durum strong { color: var(--seher); }

/* Evre mikro-metni — ziyaretçinin kendi gökyüzü (yon §2.2) */
.evre {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 26px 0 0;
  font-size: 0.875rem;
  letter-spacing: 0.005em;
  color: var(--seher-yumusak);
}
.evre::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--amber-iz);
  flex: none;
}

/* Dekoratif gökyüzü: yarım amber disk + kesik ışınlar (ikon geometrisi) */
.gokyuzu {
  position: absolute;
  inset-block-end: 30px;          /* ufuk çizgisinin üstüne oturur */
  inset-inline-end: -18%;         /* kenardan taşar: içerik taşar, kontroller taşmaz */
  width: min(340px, 58vw);
  z-index: -1;
  opacity: var(--disk-opak);
  pointer-events: none;
}
.gokyuzu svg { display: block; width: 100%; height: auto; }

@media (min-width: 900px) {
  .gokyuzu { inset-inline-end: -6%; width: min(320px, 26vw); }
}

/* ==========================================================================
   6 — Düğmeler
   ========================================================================== */

.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 13px 24px;
  border: 1px solid transparent;
  border-radius: var(--kose-m);
  background: var(--safak);
  color: var(--safak-uzeri);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 140ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .dugme:hover { background: color-mix(in srgb, var(--safak) 84%, #000); }
}
.dugme:active { transform: scale(0.97); }

.gece .dugme {
  background: var(--marka-amber);
  color: var(--amber-uzeri);
}
@media (hover: hover) and (pointer: fine) {
  .gece .dugme:hover { background: var(--marka-amber-ac); }
}

/* İkincil eylem — düğme değil, bağlantı */
.ikincil {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.9375rem;
  font-weight: 500;
  transition: transform 160ms var(--ease-out), color 140ms ease;
}
.ikincil:active { transform: scale(0.97); }

/* Metin akışındaki tek başına duran eylem bağlantısı — dokunma hedefi 44 px */
.bag-eylem {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 500;
}

/* Azaltılmış hareket: basma geri bildirimi kalır ama yer değiştirmez —
   ölçek yerine kısa bir sönme */
@media (prefers-reduced-motion: reduce) {
  .dugme,
  .ikincil { transition: opacity 120ms var(--ease-out), background-color 140ms ease, color 140ms ease; }
  .dugme:active,
  .ikincil:active { transform: none; opacity: 0.85; }
}

/* ==========================================================================
   7 — Bölüm görselleri (saf CSS/SVG)
   ========================================================================== */

/* --- 7.1 Alarm: kilit ekranı kartı + sessiz anahtarı ------------------- */

.alarm-sahne {
  /* Açık genişlik: yüzde ölçülü çocuklar shrink-to-fit kapsayıcıda
     erken satır atlıyordu */
  width: min(456px, 100%);
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
}

.kilit-kart {
  width: min(320px, 100%);
  padding: 26px 22px 24px;
  border-radius: var(--kose-xl);
  color: var(--seher);
  background:
    radial-gradient(120% 62% at 50% 108%, color-mix(in srgb, var(--marka-amber) 20%, transparent) 0%, transparent 62%),
    linear-gradient(168deg, var(--gece-ust) 0%, var(--gece) 48%, var(--sh-gece-3) 100%);
}

.kilit-saat {
  font-size: 3.25rem;
  font-weight: 200;
  letter-spacing: -0.02em;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.kilit-tarih {
  margin: 6px 0 22px;
  text-align: center;
  font-size: 0.875rem;
  color: var(--seher-yumusak);
}

.alarm-bildirim {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 15px;
  border-radius: var(--kose-l);
  background: var(--cam);
  border: 1px solid var(--cam-kenar);
}
.alarm-bildirim .zil {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--marka-amber);
  color: var(--amber-uzeri);
}
.alarm-bildirim .zil svg {
  width: 19px;
  height: 19px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.alarm-bildirim .ad {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
}
.alarm-bildirim .alt {
  font-size: 0.8125rem;
  color: var(--seher-yumusak);
  font-variant-numeric: tabular-nums;
}

.sessiz {
  width: 118px;
  flex: none;
  padding: 14px 12px 12px;
  border-radius: var(--kose-l);
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  text-align: center;
}
.sessiz .anahtar {
  width: 44px;
  height: 26px;
  margin: 0 auto 10px;
  border-radius: 999px;
  background: var(--yuzey-2);
  border: 1px solid var(--cizgi-vurgu);
  display: flex;
  align-items: center;
  padding: 2px;
}
.sessiz .anahtar::before {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ios-turuncu);
  box-shadow: inset -6px 0 0 var(--cihaz-golge);
}
.sessiz .yazi-kucuk {
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--murekkep-2);
}

/* --- 7.1b Gerçek ürün kareleri (site/assets/urun, WebP 1x/2x) ----------
   Simülatör kareleri; CSS taklidinin yerine geçer, yanına konmaz.
   width/height öznitelikleri + sabit en-boy oranı CLS'yi önler. ------- */

.urun-foto {
  margin: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.urun-foto figcaption { margin-block-start: 0; }
.urun-foto img {
  display: block;
  width: 100%;
  height: auto;
}

/* Tam ekran kare: köşe yarıçapı karede gömülü (1080 px'te 96 px); kapsayıcı
   yarıçapı ondan büyük tutulur ki köşe zemini görünmesin */
.urun-kare {
  overflow: hidden;
  border-radius: 2.5em;
  background: var(--cihaz-siyah);
  box-shadow: var(--sh-golge);
  border: 1px solid var(--sh-cizgi); /* koyu zeminde silüet kaybolmasın (26.08 denetimi) */
}

/* Kesit: tam ekran karenin yalnız alt bölümü (Live Activity / widget'lar) */
.urun-kesit { aspect-ratio: 540 / 340; }
.urun-kesit img {
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}
/* Live Activity karesi: etkinlik %66–75 bandında, ana ekran çizgisi dışarıda kalsın */
.urun-kesit--la img { object-position: center 86%; }

/* Bant: Dynamic Island ya da ana ekran widget kesiti — duvar kağıdı koyu,
   açık temada kenar için ince çizgi */
.urun-bant {
  overflow: hidden;
  border-radius: var(--kose-l);
  border: 1px solid var(--sh-cizgi);
  background: var(--cihaz-siyah);
  box-shadow: var(--sh-golge-kucuk);
}

.urun-foto--alarm { width: min(280px, 100%); }
/* Kıble: gerçek cihaz karesi (16.09.2026) — elle çizilmiş 1.x replikasının yerine. */
.urun-foto--kible { width: min(300px, 100%); }
/* Kısayollar: Siri bölümünde dar bant (17.09.2026) — metin listesinin altında kanıt karesi. */
.urun-foto--kisayol { width: min(520px, 100%); margin-top: clamp(20px, 3vw, 28px); }
/* Kur'an: iki tam ekran kare yan yana (13.09.2026, Plan 5) — alarm karesiyle aynı kalıp. */
.urun-foto--kuran { width: min(300px, 100%); }
/* 21.09.2026: bölüm .ikili düzenine alınınca sağ kolon ~488 px'e indi; iki kare
   300 px'te yan yana sığmayıp alt alta düşüyordu. Yalnız bu bağlamda küçültülür —
   mobil (<860 px, .ikili tek sütun) 300 px'te kalır. */
@media (min-width: 860px) {
  /* 22.09.2026 tur 5 (sahip): sol kolondaki metin uzun, iki kare yan yana kısa kalıyordu → kareler ALT ALTA
     ve boyları METNİN BOYUNA göre: görsel kolonu satırı doldurur (stretch), içerik mutlak konumlu olduğu için
     satır yüksekliğini metin belirler; iki kare o yüksekliği eşit paylaşır, genişlik en-boy oranından gelir.
     Önceki turlar (yan yana + yapışkan) bununla geçersiz. */
  .ikili:has(.urun-foto--kuran) { align-items: stretch; row-gap: 32px; }
  .ikili:has(.urun-foto--kuran) > .gorsel { position: relative; align-self: stretch; min-height: 720px; }
  .ikili:has(.urun-foto--kuran) > .yazi-genis { margin-block-start: 0; }
  .ikili > .gorsel .sh-widget:has(.urun-foto--kuran) {
    position: absolute; inset: 0;
    flex-direction: column; flex-wrap: nowrap; align-items: flex-end; gap: 28px;
  }
  .ikili > .gorsel .urun-foto--kuran { flex: 1 1 0; min-height: 0; width: auto; max-width: 100%; align-items: center; }
  .ikili > .gorsel .urun-foto--kuran .urun-kare { flex: 1 1 0; min-height: 0; aspect-ratio: 540 / 1174; max-width: 100%; }
  .ikili > .gorsel .urun-foto--kuran img { width: 100%; height: 100%; object-fit: cover; }
}
.urun-foto--ramazan { width: 100%; }
.urun-foto--ramazan .urun-bant { align-self: center; width: min(360px, 100%); }
.urun-foto--zikir { width: min(280px, 100%); }
/* Ayet paylaşımı (ADR-054, 28.09.2026): tam ekran kare, Kur'an bölümündeki karelerle aynı ölçek. */
.urun-foto--ayet { width: min(220px, 100%); margin-inline: auto; }

/* --- 7.1c Widget gallery (14.09.2026 copy pass) ------------------------
   Eight product widgets, two free and six Sahaar Pro. Crops come in three
   different shapes (small square, wide, tall) — no object-fit crop is
   applied, each card keeps the image's own aspect ratio. */
.widget-galeri {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 40px) clamp(20px, 3vw, 32px);
}
@media (min-width: 640px) {
  .widget-galeri { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  /* 21.09.2026 tur 2 (sahip bulgusu — tam sayfa taraması): girişteki .yazi.olcu
     64ch'te kalıp altındaki tam genişlik ızgaranın üstünde sağda boş bir şerit
     bırakıyordu. Burada eşleşen tek `.kap` bu olduğundan `:has()` ile dar
     kapsamda tutuldu; ızgarayla aynı genişliğe getirildi. */
  .kap:has(> .widget-galeri) > .yazi.olcu { max-width: none; }
  /* 22.09.2026: tam genişlik tek paragraf uzun satıra düşüyordu → etiket + başlık SOL, metin SAĞ kolon. */
  .kap:has(> .widget-galeri) > .yazi.olcu {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(32px, 5vw, 64px); align-items: end;
  }
  .kap:has(> .widget-galeri) > .yazi.olcu > .etiket { grid-column: 1; grid-row: 1; }
  .kap:has(> .widget-galeri) > .yazi.olcu > h2 { grid-column: 1; grid-row: 2; margin-block-end: 0; }
  .kap:has(> .widget-galeri) > .yazi.olcu > p:not(.etiket) { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
}

/* 22.09.2026 (sahip bulgusu): iki kolonlu otomatik akışta çok uzun «Gün akışı» kartının yanında kısa
   «İki vakit» kalıyor, sağ kolonda büyük bir delik oluşuyordu. ≥860 px'te 6 sütunlu ızgara ve elle yerleşim:
   1. satır Sıradaki vakit | Günün vakitleri · 2–3. satır Gün akışı (iki satır boyu) | İki vakit + Günün ayeti
   (ikisinin toplam boyu Gün akışı'na denk) · 4. satır üç kare kart yan yana. DOM sırası değişmez. */
@media (min-width: 860px) {
  .widget-galeri { grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: start; }
  .widget-galeri > .widget-kart:nth-child(1) { grid-column: 1 / 4; grid-row: 1; }
  .widget-galeri > .widget-kart:nth-child(2) { grid-column: 4 / 7; grid-row: 1; }
  .widget-galeri > .widget-kart:nth-child(3) { grid-column: 1 / 4; grid-row: 2 / span 2; }
  .widget-galeri > .widget-kart:nth-child(4) { grid-column: 4 / 7; grid-row: 2; }
  .widget-galeri > .widget-kart:nth-child(8) { grid-column: 4 / 7; grid-row: 3; }
  .widget-galeri > .widget-kart:nth-child(5) { grid-column: 1 / 3; grid-row: 4; }
  .widget-galeri > .widget-kart:nth-child(6) { grid-column: 3 / 5; grid-row: 4; }
  .widget-galeri > .widget-kart:nth-child(7) { grid-column: 5 / 7; grid-row: 4; }
}

.widget-kart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 0;
  text-align: center;
}
/* Görsel kendi oranında: küçük widget dar, orta/büyük ve kilit ekranı satırı geniş.
   img'ye width/height:auto verilmezse HTML yükseklik özniteliği oranı bozuyordu (15.09.2026). */
.widget-kart .urun-kare { width: 100%; max-width: 380px; border-radius: 1.6em; }
.widget-kart .urun-kare:has(img[width="540"]) { max-width: 230px; }
.widget-kart .urun-kare img { display: block; width: 100%; height: auto; }
.widget-kart figcaption { margin-block-start: 0; }

/* No capture yet (Two Prayers) — text-only, same rhythm as the others so
   the grid doesn't show a hole. */
.widget-kart--metin {
  justify-content: center;
  min-height: 180px;
  padding: 24px;
  border-radius: var(--kose-l);
  border: 1px dashed var(--cizgi-vurgu);
  background: var(--yuzey);
}

.widget-ad {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--murekkep);
}
.widget-kart .meta { margin-block-start: 4px; }
.widget-kart figcaption { max-inline-size: 40ch; }

.etiket-free,
.etiket-pro {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.etiket-free {
  border: 1px solid var(--cizgi-vurgu);
  color: var(--murekkep-2);
}
.etiket-pro {
  background: var(--safak-yumusak);
  color: var(--safak);
}

/* `.sh` yığınında ölçü `.sh-kilit` ile aynı (21.25em → --sh-olcek çalışır) */
.sh-foto {
  width: 21.25em;
  max-width: 100%;
}

/* --- 7.2 Kaynak etiketi + yöntem listesi ------------------------------ */

.kaynak-blok {
  width: min(420px, 100%);
  padding: 26px 24px;
  border-radius: var(--kose-l);
  background: var(--yuzey);
  border: 1px solid var(--cizgi-sicak);
  box-shadow: inset 0 1px 0 var(--parilti), var(--kart-golge);
  text-align: center;
}
.kaynak-blok .hicri {
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.kaynak-blok .mil {
  margin-block-start: 4px;
  font-size: 0.9375rem;
  color: var(--murekkep-2);
  font-variant-numeric: tabular-nums;
}
.cip-kaynak {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-block-start: 16px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--safak-yumusak);
  color: var(--safak);
  font-size: 0.875rem;
  font-weight: 600;
}
.cip-kaynak svg {
  width: 15px;
  height: 15px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.yontem-liste {
  list-style: none;
  margin: 20px 0 0;
  padding: 6px;
  border-radius: var(--kose-m);
  background: var(--yuzey);
  border: 1px solid var(--cizgi-sicak);
  box-shadow: inset 0 1px 0 var(--parilti), var(--kart-golge);
  text-align: start;
}
.yontem-liste li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 0;
  padding: 0 12px;
  border-radius: var(--kose-s);
  font-size: 0.9375rem;
}
.yontem-liste li + li { border-block-start: 1px solid var(--cizgi); }
.yontem-liste .isaret {
  width: 18px;
  height: 18px;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--murekkep-2);
  opacity: 0.45;
}
.yontem-liste .isaret svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.yontem-liste .secili {
  background: var(--safak-yumusak);
  color: var(--safak);
  font-weight: 600;
  border-block-start-color: transparent;
}
.yontem-liste .secili .isaret { color: var(--safak); opacity: 1; }

/* --- 7.3 Bugün: günün tamamını gösteren geniş bant --------------------
   Kahraman telefonundaki Bugün ekranının kırpılmış kopyası değil; günü
   baştan sona tek satırda okutan ayrı bir kompozisyon. */

.gun-bant {
  margin-block-start: clamp(32px, 4vw, 48px);
  padding: clamp(28px, 4vw, 44px) clamp(20px, 3vw, 36px) clamp(22px, 3vw, 30px);
  border-radius: var(--kose-xl);
  background: var(--yuzey);
  /* Malzeme: nötr siyah yerine kâğıdın kendi hue'sundan hairline, üstte tek
     piksel iç parıltı, ve fısıltı derinlik. Uygulama UI'ında kart gölgesi
     yoktur (tasarım sistemi §0) — web yüzeyi ayrı bir malzemedir. */
  border: 1px solid var(--cizgi-sicak);
  box-shadow: inset 0 1px 0 var(--parilti), var(--kart-golge);
}

.gun-hedef {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0;
}
.gun-hedef .ad {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--safak);
}
.gun-hedef .sayac {
  font-size: clamp(2.25rem, 5.5vw, 3.5rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1;
}

.gun-yay {
  display: block;
  width: 100%;
  height: auto;
  margin-block-start: clamp(14px, 2vw, 22px);
}

.gun-evre {
  margin: 12px 0 0;
  text-align: center;
}

.gun-cizelge {
  list-style: none;
  margin: clamp(18px, 2.4vw, 26px) 0 0;
  padding: clamp(16px, 2vw, 20px) 0 0;
  border-block-start: 1px solid var(--cizgi);
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 540px) {
  .gun-cizelge { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 4px; }
}
.gun-cizelge li {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.gun-cizelge .ad {
  font-size: 0.8125rem;
  letter-spacing: 0.005em;
  color: var(--murekkep-2);
}
.gun-cizelge .saat { font-size: 0.9375rem; font-weight: 500; }
.gun-cizelge .gecti .ad,
.gun-cizelge .gecti .saat { opacity: 0.5; }
.gun-cizelge .siradaki .ad,
.gun-cizelge .siradaki .saat { color: var(--safak); font-weight: 600; }

.gun-alt {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: clamp(20px, 2.4vw, 26px) 0 0;
}

/* --- 7.3b Kapsam beyanı — sayfanın dönüş noktası ----------------------- */

.beyan::before {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  border-radius: 2px;
  background: var(--safak);
  margin-block-end: clamp(22px, 3vw, 30px);
}
.beyan h2 {
  font-size: clamp(2rem, 4.6vw, 3rem);
  max-width: 17ch;
}
.beyan p {
  margin: 22px 0 0;
  max-width: 50ch;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.5;
  color: var(--murekkep-2);
}
/* 21.09.2026 (sahip bulgusu, yalnız masaüstü ≥ 860 px — mobil düzen dokunulmaz):
   tek satırlık bu bildirim, .kap'ın geniş 1120 px'lik kutusunda sola yaslı kalınca
   sağda büyük bir boşluk bırakıyordu — ne bir metin sütunu ne bir görsel eşlik
   ettiği için iki kolona da uymuyor. Bilinçli seçim: sayfanın TEK başka kısa
   bildirim bloğuyla (.kapanis, kapanış CTA'sı) aynı ortalanmış "büyük cümle"
   kalıbı — .nefes sınıfıyla zaten bir "soluklanma" olarak işaretliydi, kalıp
   tutarlı hâle geldi. */
@media (min-width: 860px) {
  .beyan { text-align: center; }
  .beyan::before { margin-inline: auto; }
  .beyan h2 { margin-inline: auto; }
  .beyan p { margin-inline: auto; }
}

/* --- 7.4 Ramazan: Dynamic Island + tablo ------------------------------ */

.ramazan-sahne {
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ada {
  align-self: center;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--cihaz-siyah);
  color: var(--cihaz-beyaz);
}
.ada .nokta {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--marka-amber);
  flex: none;
}
.ada .ad {
  font-size: 0.875rem;
  font-weight: 500;
  opacity: 0.85;
}
.ada .sayac {
  margin-inline-start: auto;
  font-size: 1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--marka-amber);
}

.ram-tablo {
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--kose-m);
  /* `overflow: hidden` YOK: Chrome tablonun taşma kutusuna `caption`ı da alıyor
     ve `caption-side: bottom` altyazının ilk harfini 1 px kırpıyordu ("Example"
     → "ᴱxample"; 24.08 denetimi, yedekte de vardı). Köşe yuvarlaklığı zemin ve
     kenarlıktan gelir; satır ayıraçları hücre kenarlığı olduğundan taşmaz. */
  background: var(--yuzey);
  border: 1px solid var(--cizgi-sicak);
  box-shadow: var(--kart-golge);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}
.ram-tablo caption {
  caption-side: bottom;
  padding-block-start: 12px;
  font-size: 0.8125rem;
  color: var(--murekkep-2);
  text-align: start;
}
.ram-tablo th,
.ram-tablo td {
  padding: 11px 14px;
  text-align: end;
  border-block-start: 1px solid var(--cizgi);
}
.ram-tablo thead th {
  border-block-start: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--murekkep-2);
}
.ram-tablo th[scope="row"],
.ram-tablo thead th:first-child {
  text-align: start;
  font-weight: 500;
  color: var(--murekkep);
}

/* --- 7.4b İmsakiye paylaşım kartı -------------------------------------
   20.09.2026: gerçek, tam görsel kompakt önizlenir; satır/sütun kırpılmaz.
   Küçük rakamları okumak için tam boy bağlantısı vardır. Yeni HTML ürün
   replikası yoktur: MANIFEST'teki aynı WebP ve @2x karşılığı kullanılır. */

.imsakiye-duzen {
  display: grid;
  gap: 32px clamp(32px, 5vw, 80px);
  align-items: center;
}
.imsakiye-duzen > * { min-inline-size: 0; }

.imsakiye-kart {
  width: 100%;
  margin: clamp(32px, 4vw, 48px) 0 0;
}
.imsakiye-duzen .imsakiye-kart {
  max-inline-size: 340px;
  margin: 0;
  justify-self: center;
}
.ims-foto {
  overflow: hidden;
  border-radius: var(--kose-l);
  background: var(--gece);
  box-shadow: 0 2px 4px rgba(12, 14, 40, 0.16), 0 28px 56px -34px rgba(12, 14, 40, 0.7);
}
.ims-foto img { display: block; width: 100%; height: auto; }
@media (min-width: 840px) {
  .imsakiye-duzen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .imsakiye-duzen .imsakiye-kart { max-inline-size: 420px; justify-self: end; }
}

/* 13.09.2026: elle çizilmiş imsakiye kartı, dinî günler listesi ve "Son 7 gün" takip ızgarası
   replikalarının kuralları silindi — üçü de gerçek uygulama karesiyle değişti (site ve yayin/ ikizleri). */
.imsakiye-kart figcaption {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px 14px;
  width: 100%;
  margin-block-start: 14px;
}
.imsakiye-tam {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-block-size: 44px;
  inline-size: 100%;
  font-size: 1rem;
  font-weight: 600;
  text-underline-offset: 0.2em;
}

/* Native açıklamalar JS olmadan da çalışır; açma/kapama yüksekliği hareket
   etmez. Sayfanın mevcut mürekkep ve kenar tokenları iki temada da aynıdır. */
.ozellik-detayi {
  margin-block: 24px 0;
  border-block: 1px solid var(--cizgi-vurgu);
}
.ozellik-detayi summary {
  min-block-size: 44px;
  padding-block: 12px;
  padding-inline-end: 8px;
  color: var(--murekkep);
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 600;
  cursor: pointer;
}
.ozellik-detayi summary::marker { color: var(--safak); }
.yazi .ozellik-detayi p {
  margin-block: 0 16px;
  font-size: 1rem;
  line-height: 1.6;
}


/* --- 7.5 Kıble ve takip ----------------------------------------------- */


/* --- 7.6 Her ekranda: widget + saat yan yana -------------------------- */

.ekran-sahne {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 32px);
  align-items: flex-start;
  justify-content: center;
}
/* Esnek öğeler daralabilsin — dar ekranda min-content taşmasını keser */
.ekran-sahne > *,
.sh-widget > *,
.sh-watch > *,
.sh-anaekran > * { min-width: 0; }

/* ==========================================================================
   8 — Gizlilik, fiyat, SSS, kapanış, altbilgi
   ========================================================================== */

.gizlilik { max-width: var(--olcu); }
.gizlilik p + p { margin-block-start: 20px; }
@media (min-width: 860px) {
  /* 21.09.2026 (sahip bulgusu): 64ch okuma ölçüsü 1120 px'lik .kap'ın büyük kısmını
     boş bırakıyor, iki kolonlu komşularının arasında dengesiz duruyordu. Gizlilik
     gerçek gövde metni taşıyor (üç paragraf) — .beyan'ın tek cümlelik bildirimi
     gibi ortalanmış bir vurguya değil, alt sayfalardaki (.belge, d78783b,
     18.09.2026) "bilinçli tam genişlik + iki yana yaslı" kalıbına uyar. */
  .gizlilik { max-width: none; }
}
/* 22.09.2026: yaslama kalkınca tam genişlik paragraf ~130 karakterlik satıra düşüyordu — okunmaz.
   ≥1024 px'te gövde iki metin kolonuna akar; etiket, başlık ve politika bağlantısı iki kolonu da kaplar. */
@media (min-width: 1024px) {
  .gizlilik { columns: 2; column-gap: clamp(32px, 5vw, 64px); }
  .gizlilik > .etiket, .gizlilik > h2 { column-span: all; }
  .gizlilik > h2 { margin-block-end: 24px; }
  .gizlilik > p { break-inside: avoid; }
  .gizlilik > h2 + p { margin-block-start: 0; }
}

/* 21.09.2026 tur 1 (sahip bulgusu): .fiyat ortalanmış + 52–56ch'lik dar bir sütuna
   sıkıştırıyordu, sayfanın geri kalanındaki sola yaslı .yazi kolonlarıyla
   tutarsızdı. Merkezleme kaldırıldı; başlıklar da diğer bölümler gibi sola
   dayalı kalır (kart ızgarası .planlar zaten text-align:start idi, etkilenmez).
   Tur 2 (aynı gün — sahip: "sol yarıda, sağı boş" hâlâ duruyordu): giriş metni
   artık .fiyat-ust'ta plan kartlarıyla YAN YANA, Free/Pro metni .fiyat-alt'ta
   kendi aralarında YAN YANA — dipnotlar tam genişlikte altta kalır. */
.fiyat {
  border-block-start: 1px solid var(--cizgi);
  padding-block-start: clamp(48px, 6vw, 72px);
}
.fiyat .on-yazi { margin-block: 20px 0; }

.fiyat-ust {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
}
@media (min-width: 860px) {
  .fiyat-ust { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .fiyat-ust .planlar { margin-block-start: 0; }
}

.planlar {
  display: grid;
  gap: 0;
  margin-block: clamp(36px, 5vw, 56px) 0;
  border: 1px solid var(--cizgi-sicak);
  border-radius: var(--kose-l);
  overflow: hidden;
  background: var(--yuzey);
  box-shadow: inset 0 1px 0 var(--parilti), var(--kart-golge);
  text-align: start;
}

@media (min-width: 760px) {
  .planlar { grid-template-columns: repeat(3, 1fr); }
}

.plan {
  padding: 26px 24px;
  border-block-start: 1px solid var(--cizgi);
}
.plan:first-child { border-block-start: 0; }

@media (min-width: 760px) {
  .plan {
    border-block-start: 0;
    border-inline-start: 1px solid var(--cizgi);
  }
  .plan:first-child { border-inline-start: 0; }
}

.plan.one-cikan { background: var(--safak-yumusak); }

.plan .rozet-plan {
  display: inline-block;
  margin-block-end: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--safak);
  color: var(--safak-uzeri);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.plan h3 {
  font-size: 1rem;
  color: var(--murekkep-2);
  font-weight: 600;
}
.plan .tutar {
  margin-block: 8px 0;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--murekkep);
}
.plan .tutar .birim {
  font-size: 1rem;
  font-weight: 400;
  color: var(--murekkep-2);
}
.plan .not {
  margin-block: 8px 0;
  font-size: 0.875rem;
  color: var(--murekkep-2);
}

.fiyat-alt {
  display: grid;
  gap: 24px;
  margin-block: clamp(32px, 4vw, 44px) 0;
}
.fiyat-alt .fark {
  margin-block: 0;
  max-width: 56ch;
}
@media (min-width: 860px) {
  .fiyat-alt { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 40px); }
  .fiyat-alt .fark { max-width: none; }
}

.fiyat .dipnotlar {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  max-width: 56ch;
  font-size: 0.875rem;
  color: var(--murekkep-2);
}
.fiyat .dipnotlar li { margin-bottom: 4px; }

/* SSS */
.sss-liste {
  display: grid;
  gap: 32px 48px;
  margin-block-start: clamp(32px, 4vw, 48px);
}
@media (min-width: 800px) {
  .sss-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sss-liste h3 { margin-bottom: 8px; }
.sss-liste p {
  margin: 0;
  max-width: 52ch;
  color: var(--murekkep-2);
}

/* Kapanış */
.kapanis {
  padding-block: clamp(72px, 9vw, 112px);
  text-align: center;
}
.kapanis h2 {
  font-family: var(--yazi-yuvarlak);
  max-width: 18ch;
  margin-inline: auto;
}
.kapanis p {
  margin-block: 20px 0;
  margin-inline: auto;
  max-width: 46ch;
  color: var(--seher-yumusak);
}
.kapanis .eylemler { justify-content: center; }

/* Altbilgi */
/* --- Free / Pro karşılaştırma tablosu (28.09.2026) -------------------------
   Fiyat bölümünde, plan kartlarının altında. Tek kaynak: sahibin özellik dokümanı
   (sahaar-ozellikler.html, 26.09) + kod. Pro sütunu yumuşak şafak tonunda; işaretler
   maskeli SVG — renk tokendan gelir, koyu temada kendiliğinden döner. */
.gorsel-gizli {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.karsilastirma { margin-block-start: clamp(40px, 5vw, 64px); --kt-sutun: 8.5rem; --kt-pro-zemin: color-mix(in srgb, var(--safak-yumusak) 60%, transparent); }
.kt {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--yuzey);
  border: 1px solid var(--cizgi-sicak);
  border-radius: var(--kose-l);
  box-shadow: inset 0 1px 0 var(--parilti), var(--kart-golge);
  overflow: hidden;
  font-size: 0.9375rem;
  line-height: 1.4;
  text-align: start;
}
.kt th, .kt td { padding: 13px 20px; vertical-align: middle; }
.kt thead th {
  padding-block: 18px 14px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--murekkep-2);
}
.kt thead th:not(:first-child), .kt td { width: var(--kt-sutun); text-align: center; }
.kt thead .kt-pro { color: var(--safak); }
.kt tbody th { font-weight: 400; color: var(--murekkep); text-align: start; }
.kt tbody tr:not(.kt-grup) > * { border-block-start: 1px solid var(--cizgi); }
.kt td:last-child, .kt thead th:last-child {
  background: var(--kt-pro-zemin);
}
.kt .kt-grup th {
  padding-block: 26px 8px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--murekkep-2);
  /* Pro sütununun zemini grup satırında da sürer (sütun kesilmesin). */
  background: linear-gradient(to left, var(--kt-pro-zemin) var(--kt-sutun), transparent var(--kt-sutun));
}
.kt tbody:first-of-type .kt-grup th { padding-block-start: 10px; }
.kt-var {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--yuzey-2);
  vertical-align: middle;
}
.kt-var::after {
  content: "";
  width: 12px;
  height: 12px;
  background: var(--murekkep);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.3l2.4 2.4 5.2-5.4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.3l2.4 2.4 5.2-5.4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.kt td:last-child .kt-var { background: var(--safak); }
.kt td:last-child .kt-var::after { background: var(--safak-uzeri); }
.kt-yok {
  display: inline-block;
  width: 12px;
  height: 1.5px;
  border-radius: 1px;
  background: var(--cizgi-vurgu);
  vertical-align: middle;
}
.kt-metin { font-size: 0.8125rem; color: var(--murekkep-2); font-variant-numeric: tabular-nums; }
.kt td:last-child .kt-metin { color: var(--murekkep); font-weight: 500; }
@media (max-width: 599px) {
  .kt { font-size: 0.875rem; }
  .kt th, .kt td { padding: 12px 10px; }
  .kt tbody th, .kt thead th:first-child { padding-inline-start: 16px; }
  .karsilastirma { --kt-sutun: 5.25rem; }
  .kt-metin { font-size: 0.75rem; }
}

/* Altbilgi: ortak.css ile BİREBİR aynı blok — biri değişirse öteki de (28.09.2026). */
.altbilgi {
  border-block-start: 1px solid var(--cizgi);
  padding-block: clamp(40px, 5vw, 56px);
  font-size: 0.875rem;
  color: var(--murekkep-2);
}
.altbilgi-baglar {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
  margin-block-end: 24px;
}
.altbilgi-baglar a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 10px;
  border-radius: var(--kose-s);
  text-decoration: none;
  color: var(--murekkep);
}
@media (hover: hover) and (pointer: fine) {
  .altbilgi-baglar a:hover { color: var(--safak); }
}
.altbilgi p {
  max-width: 62ch;
  margin-block-end: 8px;
}
.altbilgi-atif { font-size: 0.8125rem; }
/* Geniş ekranda iki sütun: sol açıklama, sağ marka/telif; şehir sayfalarının veri atfı
   en altta tam genişlik. Tek altbilgi, tüm sayfa tiplerinde aynı (28.09.2026). */
@media (min-width: 820px) {
  .altbilgi .kap {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    column-gap: clamp(32px, 6vw, 96px);
    align-items: end;
  }
  .altbilgi-baglar { grid-column: 1 / -1; }
  .altbilgi-aciklama { grid-column: 1; grid-row: 2 / span 2; margin-block-end: 0; }
  .altbilgi-marka { grid-column: 2; grid-row: 2; align-self: end; }
  .altbilgi-telif { grid-column: 2; grid-row: 3; margin-block-end: 0; }
  .altbilgi .altbilgi-atif { grid-column: 1 / -1; grid-row: 4; margin-block-start: 16px; max-width: none; }
}

/* ==========================================================================
   9 — Hareket (karar belgesi: build/animasyon/dil.md · plan: .../plan.md)
   · Yalnız transform + opacity animasyonlanır (renk geri bildirimi §6'dadır,
     hareket değildir).
   · `transition: all` ve `ease-in` yok.
   · Tıklanabilir/okunabilir hiçbir geçiş 300 ms'i geçmez; 300 ms üstü yalnız
     dört sahne hareketindedir (§9.3 ufuk 420 ms, §9.4 disk 520 ms,
     §9.5 yay perdesi 520 ms, §9.4 parallax — kaydırmaya bağlı).
   · İçerik belirişi YALNIZ `.beliris-hazir` + `no-preference` kesişimindedir:
     gözlemci kurulmadan, JS kapalıyken veya hareket azaltılmışken gizlenmez.
   · `will-change` kullanılmaz; döngü (infinite/alternate) yoktur.
   ========================================================================== */

/* --- 9.1 Kaydırmayla beliriş (dil.md §2.1) ----------------------------- */
/* Tek yön: aşağıdan yukarı, 8 px. Bölüm başına en fazla 4 öğe, blok hâlinde.
   `animation` değil `transition`: hızlı kaydırmada yeniden hedefleme yumuşak
   olsun ve tetikleme anında öğe yarı görünürse zıplama olmasın.

   TETİKLEYİCİ SATIRIN KENDİSİDİR, öğeleri değil: `data-sahne` bir satırın
   kapsayıcısındadır (`.kap.ikili` / stacked `.kap`), iki yarısında değil.
   Yan yana duran metin ile görselin yükseklikleri farklı olduğu için ayrı
   gözlemcilerle farklı kaydırma noktalarında tetikleniyor, satır iki parça
   hâlinde oturuyordu. Tek tetikleyiciyle satır tek blok gibi yerleşir.
   20.09.2026: uzun widget galerisindeki her kart ayrıca gözlenir; bölümün
   başlığına gelmek aşağıda kalan sekiz kartı birden oynatmaz. */

@media (prefers-reduced-motion: no-preference) {
  .beliris-hazir .beliren,
  .beliris-hazir .widget-kart {
    opacity: 0;
    transform: translateY(8px);
  }
  .beliris-hazir .gorunur.beliren,
  .beliris-hazir .gorunur .beliren,
  .beliris-hazir .widget-kart.gorunur {
    opacity: 1;
    transform: none;
    transition:
      opacity 260ms var(--ease-out),
      transform 260ms var(--ease-out);
  }

  /* Stagger — iki fiyat kartı (dil.md §2.2).
     Adım 60 ms, zincir 2 öğe, toplam kuyruk 60 ms.
     Satır içinde (metin ↔ görsel) stagger YOK: satır tek bloktur.
     21.09.2026 tur 2: tetikleyici .planlar'dan üst satır kapsayıcısı .fiyat-ust'a
     taşındı (.planlar artık .fiyat-ust'un içinde, metinle yan yana) — .gorunur
     de oraya düşüyor, seçici onu izler. */
  .beliris-hazir .fiyat-ust.gorunur .plan:nth-child(1) { transition-delay: 0ms; }
  .beliris-hazir .fiyat-ust.gorunur .plan:nth-child(2) { transition-delay: 60ms; }

  /* KLAVYE KURTARMASI — odak halkası asla opaklığı 0 olan bir kutuda kalmaz.
     Gözlemci daha tetiklenmeden odak perdenin arkasına düşebilir: hızlı Sekme,
     derin bağlantı (#notify) ya da ekrandan uzun bir blokta alt kenar payı.
     Bu blokta beliriş yok — geçiş kapalı: odak anında görünür olmalı, ziyaretçi
     halkanın gelmesini beklememeli. Kalıcı açma betikteki `focusin` ile yapılır;
     bu kural yalnız aradaki kareyi kapatır. Bu selektörler .gorunur
     kurallarından SONRA gelmeli (aynı özgüllük, sonraki kazanır). */
  .beliris-hazir .beliren:focus-within,
  .beliris-hazir [data-sahne]:focus-within .beliren,
  .beliris-hazir .widget-kart:focus-within {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --- 9.2 Kahraman açılışı (dil.md §3) ---------------------------------- */
/* Sayfadaki TEK sahnelenmiş açılış. Ziyaretçi bunu oturumda bir kez görür.
   Sıra: rozet → başlık → (telefon) → imza → lede → eylemler → evre.
   Telefon 3. sıradadır: en ağır görsel sonda gelirse dikkat çalar.
   Bütçe: son arayüz öğesi 460 ms'te oturur (tavan 500 ms). */

@media (prefers-reduced-motion: no-preference) {
  .js .giris-1 { animation: yukari-kucuk 240ms var(--ease-out)   0ms both; }
  .js .giris-2 { animation: yukari       260ms var(--ease-out)  50ms both; }
  .js .giris-3 { animation: yukari-kucuk 240ms var(--ease-out) 100ms both; }
  .js .giris-4 { animation: yukari-kucuk 240ms var(--ease-out) 150ms both; }
  .js .giris-5 { animation: yukari-kucuk 240ms var(--ease-out) 200ms both; }
  /* Evre satırı yer değiştirmez, yalnız solar: ortam metnidir, başlık değil.
     260 ms gecikme, altbilgi betiği metni değiştirirken opaklık hâlâ 0. */
  .js .giris-6 { animation: solma        200ms var(--ease-out) 260ms both; }

  .js .kahraman-gorsel { animation: belir 280ms var(--ease-out) 120ms both; }
}

@keyframes yukari       { from { opacity: 0; transform: translateY(10px); }  to { opacity: 1; transform: none; } }
@keyframes yukari-kucuk { from { opacity: 0; transform: translateY(8px); }   to { opacity: 1; transform: none; } }
@keyframes belir        { from { opacity: 0; transform: scale(0.985); }      to { opacity: 1; transform: none; } }
@keyframes solma        { from { opacity: 0; }                               to { opacity: 1; } }

/* --- 9.3 Ufuk çizimi (dil.md §2.3) — sahne hareketi -------------------- */
/* 420 ms, 300 ms tavanının ÜSTÜNDE ve bilinçli: bu bir arayüz öğesi değil.
   Tıklanamaz, okunamaz, kimse beklemez ve ekranın tüm genişliğini kat eder.
   Yalnız transform — width / background-size ASLA (layout thrash).
   Sayfada iki ufuk hattı vardır ve yalnız onlar çizilir; bölüm ayırıcıları,
   .sh-cizgi, tablo kenarlıkları, .beyan::before ve .evre::before çizilmez. */

@media (prefers-reduced-motion: no-preference) {
  /* Kahraman: sayfa yükünde bir kez, merkezden iki yana */
  .js .gece.ufuklu:not(.ters-ufuk)::after {
    transform-origin: 50% 50%;
    animation: ufuk-ac 420ms var(--ease-out) 60ms both;
  }

  /* Kapanış: bölüm görünür olunca, aynı hareket (dil.md §2.3) */
  .js .gece.ufuklu.ters-ufuk::after {
    transform: scaleX(0.55);
    transform-origin: 50% 50%;
  }
  .js .gece.ufuklu.ters-ufuk.gorunur::after {
    transform: none;
    transition: transform 420ms var(--ease-out);
  }
}

@keyframes ufuk-ac { from { transform: scaleX(0.55); } to { transform: none; } }

/* --- 9.4 Gökyüzü diski (dil.md §2.6 + §4) ------------------------------ */
/* Konum: ziyaretçinin yerel dakikasından türeyen --gun (0 = gece, 1 = öğle).
   Bu bir ANİMASYON DEĞİL, yerleşimdir: azaltılmış harekette de geçerlidir —
   hareket tercihini kapatan kullanıcı da doğru gökyüzünü görür.
   Katman ayrımı zorunlu: dış katman --gun konumu + parallax, iç katman doğuş. */
.gokyuzu { transform: translateY(calc((1 - var(--gun, 0.5)) * 42px)); }

@media (prefers-reduced-motion: no-preference) {
  /* Doğuş — iç katmanda: dış katmanın transform'u --gun konumuna ayrılmıştır.
     520 ms: sahne hareketi (dekoratif, okunmayan, tıklanmayan). Bir kez oynar
     ve orada kalır — döngü değildir. Dıştaki opacity: var(--disk-opak) ile
     çarpılır, gece evresinde disk fazla parlamaz. */
  .js .gokyuzu svg { animation: gun-dogus 520ms var(--ease-out) 80ms both; }

  /* Parallax: yalnız yerel kaydırma zaman çizelgesi. JS yok, scroll dinleyicisi
     yok, rAF döngüsü yok. Desteklemeyen tarayıcıda hiç hareket olmaz.
     Metin, başlık, ürün görselleri, kartlar parallax ALMAZ. */
  @supports (animation-timeline: view()) {
    .gokyuzu {
      animation: ufuk-suzul linear both;
      animation-timeline: view();
      animation-range: contain 0% exit 100%;
    }
  }
}

@keyframes gun-dogus {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

/* Toplam yer değiştirme 24 px — bu bir TAVAN, başlangıç değeri değil.
   `linear` doğrudur: kaydırmaya bağlı hareket kullanıcının kendi hızıdır,
   üstüne ikinci bir eğri bindirilmez. Kare, --gun konum terimini içinde
   taşır; taşımazsa onu ezer ve disk yanlış yüksekliğe atlar. */
@keyframes ufuk-suzul {
  from { transform: translateY(calc((1 - var(--gun, 0.5)) * 42px)); }
  to   { transform: translateY(calc((1 - var(--gun, 0.5)) * 42px - 24px)); }
}

/* --- 9.5 Güneş yayı perdesi (dil.md §2.7) — sahne hareketi ------------- */
/* TEMEL DURUM: perde çekili (görünmez). JS yoksa, IntersectionObserver yoksa
   ya da hareket azaltılmışsa yay ilk kareden itibaren TAM görünür.
   scaleX(0) burada bir "yoktan var olma" değil, perdenin toplanmış hâlidir —
   giriş animasyonu değil maskedir, giriş için alt sınır yine 0,9'dur.
   `stroke-dashoffset` yerine perde: o teknik repaint gerektirir ve
   "yalnız transform/opacity" kuralını deler. Dolgu --yuzey, çünkü perde
   .gun-bant'ın içindedir (zemini --yuzey) — koyu temada da dikişsiz. */
.gun-yay .perde {
  transform-box: fill-box;
  transform-origin: 100% 50%;   /* sağ kenar: perde sağa doğru toplanır */
  transform: scaleX(0);
}

@media (prefers-reduced-motion: no-preference) {
  .js .gun-yay .perde { transform: scaleX(1); }          /* yayı örter */
  /* `.gorunur` artık satır kapsayıcısına (.kap) düşüyor, .gun-bant'a değil:
     seçici torun ilişkisiyle kurulur, işareti hangi ata alırsa alsın çalışır. */
  .js .gorunur .gun-yay .perde {
    transform: scaleX(0);                                 /* soldan sağa açılır */
    transition: transform 520ms var(--ease-out) 120ms;
  }
}

/* --- 9.5b Ürün karelerinin kaydırmaya bağlı yerleşmesi (28.09.2026) ----- */
/* Sahip talebi: görseller kaydırmayla uyumlu hareket etsin. §9.4'teki «ürün
   görselleri parallax ALMAZ» kuralı KORUNUR: sürekli kayma yok. Kare yalnız
   ekrana GİRERKEN kaydırmaya bağlı yükselir (72 px), %92 → %100 büyür ve
   belirginleşir (sahip 28.09: «çok zayıf»); ekranın ~%50'sine gelince durur, okunurken kıpırdamaz. Geri kaydırınca geri oynar.
   İç katmanda (.urun-kare / .ims-foto / .urun-bant / .sh-saatkasa / .ram-tablo) çalışır: dış katmanın transform'u
   §9.1 belirişine ayrılmıştır, ikisi çakışmaz. Kahraman telefonu hariç (§9.2).
   `linear`: kaydırma hızı kullanıcınındır (§9.4 notu). Destek yoksa hareket yok. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .urun-kare,
    .ims-foto,
    .urun-bant,
    .sh-saatkasa,
    .ram-tablo {
      animation: kare-yerles linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 50%;
    }
    .kahraman-gorsel .urun-kare { animation: none; }
    /* İkili kare (Kur'an): ikincisi biraz geriden gelir, sıra hissi. */
    .sh-yigin + .sh-yigin .urun-kare,
    .sh-yigin + .sh-yigin .sh-saatkasa { animation-range: entry 30% cover 60%; }
    /* Widget kartları küçük: yarım genlik. */
    .widget-kart .urun-kare { animation-name: kare-yerles-kucuk; }
  }
}

@keyframes kare-yerles {
  from { opacity: 0.35; transform: translateY(72px) scale(0.92); }
  to   { opacity: 1; transform: none; }
}
@keyframes kare-yerles-kucuk {
  from { opacity: 0.5; transform: translateY(36px) scale(0.95); }
  to   { opacity: 1; transform: none; }
}

/* --- 9.6 Azaltılmış hareket — tam kapanış (dil.md §3) ------------------ */
/* Basma geri bildirimi (§6, opacity .85) KALIR: geri bildirim hareket değil,
   cevaptır. Gökyüzü diskinin --gun konumu da kalır: o yerleşimdir. */
@media (prefers-reduced-motion: reduce) {
  .giris,
  .kahraman-gorsel,
  .gokyuzu,
  .gokyuzu svg,
  .beliren,
  .widget-kart,
  .gece.ufuklu::after,
  .gun-yay .perde {
    animation: none !important;
    transition: none !important;
  }

  .giris,
  .kahraman-gorsel,
  .gokyuzu svg,
  .beliren,
  .widget-kart {
    opacity: 1 !important;
    transform: none !important;
  }

  /* .gokyuzu (dış katman) bilerek yukarıdaki listede DEĞİL: onun transform'u
     --gun yerleşimidir, animasyon değil. Yalnız animation/transition kapanır. */
  .gece.ufuklu::after { transform: none !important; }
  .gun-yay .perde { transform: scaleX(0) !important; }
}

@media print {
  .beliren, .widget-kart {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   10 — Ürün görselleri (site/landing/ekranlar.css — `--sh-` önekli)
        Kaynak doğrulaması: TodayView.swift · QiblaView.swift · SahaarWidgets
   ========================================================================== */

:root {
  --sh-zemin: #f6f4ef;
  --sh-yuzey: #ffffff;
  --sh-yuzey-2: #ece9e2;
  --sh-murekkep: #17181c;
  --sh-murekkep-2: #5a5e6a;
  --sh-murekkep-3: #7a7e8b;
  --sh-cizgi: rgba(23, 24, 28, 0.1);
  --sh-cizgi-vurgu: rgba(23, 24, 28, 0.18);
  --sh-safak: #a85217;
  --sh-safak-yumusak: #f8eadf;
  --sh-kuzey: #c73d33;
  --sh-glass: rgba(255, 255, 255, 0.55);
  --sh-glass-kenar: rgba(255, 255, 255, 0.45);
  --sh-golge: 0 30px 60px -22px rgba(23, 24, 28, 0.32);
  --sh-golge-kucuk: 0 10px 26px -16px rgba(23, 24, 28, 0.45);
  --sh-kasa: #1c1c1e;
  --sh-kasa-2: #3a3a3c;
  /* Cihaz yüzeyleri temadan bağımsız (kilit ekranı ve saat her zaman koyu) */
  --sh-gece-1: #1c2050;
  --sh-gece-2: #171a3d;
  --sh-gece-3: #0b0d14;
  --sh-amber-koyu: #f0a35a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sh-zemin: #0e1017;
    --sh-yuzey: #171a23;
    --sh-yuzey-2: #20242f;
    --sh-murekkep: #f2f1ec;
    --sh-murekkep-2: #a6a9b4;
    --sh-murekkep-3: #767a87;
    --sh-cizgi: rgba(242, 241, 236, 0.1);
    --sh-cizgi-vurgu: rgba(242, 241, 236, 0.2);
    --sh-safak: #f0a35a;
    --sh-safak-yumusak: #2b2118;
    --sh-kuzey: #e2695b;
    --sh-glass: rgba(23, 26, 35, 0.55);
    --sh-glass-kenar: rgba(255, 255, 255, 0.12);
    --sh-golge: 0 30px 60px -22px rgba(0, 0, 0, 0.65);
    --sh-golge-kucuk: 0 10px 26px -16px rgba(0, 0, 0, 0.7);
  }
}

.sh,
.sh * { box-sizing: border-box; }

.sh {
  --sh-olcek: 1;
  font-size: calc(16px * var(--sh-olcek));
  font-family: var(--yazi);
  -webkit-font-smoothing: antialiased;
  color: var(--sh-murekkep);
  line-height: 1.25;
  max-width: 100%;
}

.sh .sh-tab {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.sh-etiket {
  font-size: 0.75em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  /* 16.09.2026: üçüncül mürekkep AA'yı geçmiyordu (koyu 4,44:1 · açık 3,68:1, eşik 4,5).
     Eski Puppeteer bu satırları "ölçülemedi" sayıp gizliyordu. İkincil mürekkep:
     açık 5,89:1 · koyu 8,10:1. */
  color: var(--sh-murekkep-2);
}

/* --- 10.1 Bugün ekranı — telefon çerçeveli (390 × 844 pt) -------------- */

.sh-bugun {
  width: max-content;
  max-width: 100%;
}

.sh-sahne {
  width: calc(var(--sh-w) * 1px * var(--sh-olcek));
  height: calc(var(--sh-h) * 1px * var(--sh-olcek));
  max-width: 100%;
}

.sh-sahne > * {
  transform: scale(var(--sh-olcek));
  transform-origin: 0 0;
}

.sh-tel-kap {
  width: 414px;
  height: 868px;
  padding: 12px;
}

.sh-tel {
  position: relative;
  width: 390px;
  height: 844px;
  border-radius: 54px;
  background: var(--sh-zemin);
  color: var(--sh-murekkep);
  overflow: hidden;
  box-shadow: 0 0 0 10px var(--sh-kasa), 0 0 0 12px var(--sh-kasa-2), var(--sh-golge);
}

/* Bugün kahramanı gerçek simülatör karesidir (site/assets/urun/bugun-*.webp;
   üreteç tools/site-urun-gorsel.py, tek kaynak MANIFEST.json). Kare kendi durum
   çubuğunu, Dynamic Island'ını ve sekme çubuğunu taşır — .sh-ada / .sh-durum /
   .sh-icerik / .sh-tabbar bu blokta KULLANILMAZ. */
.sh-kare {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.sh-ada {
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
  width: 126px;
  height: 37px;
  border-radius: 20px;
  background: #000;
  z-index: 4;
}

.sh-durum {
  position: absolute;
  top: 16px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 32px;
  font-size: 15px;
  font-weight: 600;
  z-index: 3;
}

.sh-durum-sag {
  display: flex;
  align-items: center;
  gap: 5px;
}
.sh-durum-sag svg { display: block; fill: currentColor; }

.sh-icerik {
  position: absolute;
  inset: 0;
  padding: 62px 16px 0;
  display: flex;
  flex-direction: column;
}

.sh-ustcubuk {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding-top: 8px;
}

.sh-cip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--sh-glass);
  border: 1px solid var(--sh-glass-kenar);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--sh-murekkep);
}
.sh-cip svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.sh-cip .sh-chev { width: 10px; height: 10px; stroke-width: 2.6; }

.sh-deneme {
  margin-left: auto;
  white-space: nowrap;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--sh-safak-yumusak);
  color: var(--sh-safak);
  font-size: 13px;
  font-weight: 500;
}

.sh-ikonbtn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--sh-murekkep-2);
  flex: none;
}
.sh-ikonbtn svg {
  width: 19px;
  height: 19px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sh-geri {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0 4px;
}

.sh-geri-ad {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--sh-safak);
}

.sh-sayac {
  display: flex;
  align-items: baseline;
  margin-top: 8px;
  color: var(--sh-murekkep);
}
.sh-sayac b {
  font-size: 60px;
  font-weight: 300;
  letter-spacing: -0.5px;
  line-height: 1.05;
}
.sh-sayac small {
  font-size: 22px;
  font-weight: 400;
  color: var(--sh-murekkep-2);
  margin: 0 6px 0 4px;
}
.sh-sayac small:last-child { margin-right: 0; }

.sh-yay { margin-top: 10px; display: block; }

.sh-hedef {
  margin-top: 10px;
  font-size: 15px;
  color: var(--sh-murekkep-2);
}
.sh-hedef .sh-hava { color: var(--sh-murekkep-3); }

.sh-liste {
  margin-top: 10px;
  padding: 6px;
  border-radius: 14px;
  background: var(--sh-yuzey);
  border: 1px solid var(--sh-cizgi);
}

.sh-satir {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 10px;
  border-radius: 10px;
}
.sh-satir.sh-siradaki { background: var(--sh-safak-yumusak); }

.sh-ad { font-size: 17px; color: var(--sh-murekkep); }

.sh-satir.sh-gecmis .sh-ad,
.sh-satir.sh-gecmis .sh-saat { color: var(--sh-murekkep-3); }

.sh-satir.sh-gunes .sh-ad,
.sh-satir.sh-gunes .sh-saat { color: var(--sh-murekkep-2); }

.sh-satir.sh-siradaki .sh-ad {
  color: var(--sh-safak);
  font-weight: 600;
}
.sh-satir.sh-siradaki .sh-saat { font-weight: 600; }

.sh-saat {
  margin-left: auto;
  font-size: 17px;
  color: var(--sh-murekkep);
}

.sh-mark {
  width: 22px;
  display: grid;
  place-items: center;
  flex: none;
}
.sh-mark svg { width: 18px; height: 18px; display: block; }

.sh-halka {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--sh-murekkep-2);
}
.sh-halka.sh-kesik {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--sh-murekkep-3) 60%, transparent);
}
.sh-halka.sh-kesik.sh-safak {
  border-color: color-mix(in srgb, var(--sh-safak) 60%, transparent);
}

.sh-mod {
  width: 24px;
  display: grid;
  place-items: center;
  flex: none;
  color: var(--sh-murekkep-3);
}
.sh-mod.sh-bildirim { color: color-mix(in srgb, var(--sh-murekkep-3) 70%, transparent); }
.sh-mod svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sh-cizgi {
  height: 1px;
  background: var(--sh-cizgi);
  margin: 0 10px;
}
.sh-bosluk { height: 1px; }

.sh-ozet {
  display: flex;
  justify-content: flex-end;
  padding: 8px 10px;
  font-size: 12px;
  color: var(--sh-murekkep-2);
}

.sh-altbilgi {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.sh-altbilgi .sh-hicri {
  font-size: 15px;
  font-weight: 500;
  color: var(--sh-murekkep);
}
.sh-altbilgi .sh-mil {
  font-size: 13px;
  color: var(--sh-murekkep-2);
}

.sh-kaynak {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--sh-murekkep-2);
}
.sh-kaynak .sh-fx {
  font-family: "Times New Roman", Times, Georgia, serif;
  font-style: italic;
  font-size: 15px;
  line-height: 1;
}

.sh-tabbar {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 14px;
  height: 74px;
  border-radius: 37px;
  background: var(--sh-glass);
  border: 1px solid var(--sh-glass-kenar);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 8px;
}
.sh-tabbar span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 70px;
  font-size: 10px;
  color: var(--sh-murekkep-2);
}
.sh-tabbar span.sh-aktif { color: var(--sh-safak); }
.sh-tabbar svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Kahraman telefonu — ölçek içerikten gelir, taşma yok */
.kahraman-gorsel {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}
.kahraman-gorsel figcaption { color: var(--seher-yumusak); }
/* 13.09.2026: dar ekranda ufuk güneşi (.gokyuzu, bölümün dibine oturur) ışınlarıyla
   altyazının üstüne biniyordu; altyazı güneşin tepesinden yukarıda kalsın. */
@media (max-width: 899px) {
  .kahraman-gorsel { padding-block-end: 64px; }
}
.kahraman-gorsel .sh-bugun { --sh-olcek: 0.62; }

@media (min-width: 480px) {
  .kahraman-gorsel .sh-bugun { --sh-olcek: 0.72; }
}
@media (min-width: 900px) {
  .kahraman-gorsel .sh-bugun { --sh-olcek: 0.78; }
}
@media (min-width: 1180px) {
  .kahraman-gorsel .sh-bugun { --sh-olcek: 0.88; }
}

/* --- 10.2 Widget kompozisyonu ----------------------------------------- */

.sh-widget {
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
  align-items: flex-start;
}

.sh-yigin {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
}

.sh-kilit {
  width: 21.25em;
  max-width: 100%;
  border-radius: 2.5em;
  padding: 2.25em 1.75em 1.75em;
  color: #fff;
  background:
    radial-gradient(120% 65% at 50% 108%, rgba(242, 155, 74, 0.22) 0%, rgba(242, 155, 74, 0) 62%),
    linear-gradient(168deg, var(--sh-gece-1) 0%, var(--sh-gece-2) 46%, var(--sh-gece-3) 100%);
  box-shadow: var(--sh-golge);
  display: flex;
  flex-direction: column;
  gap: 0.75em;
}

.sh-kilit-satir {
  text-align: center;
  font-size: 0.9375em;
  font-weight: 500;
  opacity: 0.92;
}

.sh-kilit-saat {
  text-align: center;
  font-size: 4.25em;
  font-weight: 200;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: -0.06em 0 0.06em;
}

.sh-kilit-widget {
  display: flex;
  gap: 0.875em;
  align-items: center;
  justify-content: center;
  margin-top: 0.5em;
}

.sh-dairesel {
  width: 3.5em;
  height: 3.5em;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
  flex: none;
}
.sh-dairesel span { font-size: 0.6875em; font-weight: 500; }
.sh-dairesel b { font-size: 0.9375em; font-weight: 600; }

.sh-dik {
  height: 3.5em;
  min-width: 10.5em;
  padding: 0 0.875em;
  border-radius: 0.875em;
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.0625em;
}
.sh-dik b { font-size: 1em; font-weight: 600; }
.sh-dik span { font-size: 0.8125em; opacity: 0.74; }

.sh-anaekran {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  align-items: flex-start;
  padding: 1.25em;
  border-radius: 1.75em;
  background:
    radial-gradient(90% 70% at 15% 0%, color-mix(in srgb, var(--sh-safak) 12%, transparent) 0%, transparent 60%),
    var(--sh-zemin);
  border: 1px solid var(--sh-cizgi);
}

.sh-wkart {
  border-radius: 1.375em;
  background: var(--sh-yuzey);
  border: 1px solid var(--sh-cizgi);
  box-shadow: var(--sh-golge-kucuk);
  padding: 0.875em;
  display: flex;
  flex-direction: column;
  flex: none;
}

.sh-w-kucuk {
  width: 9.875em;
  height: 9.875em;
  justify-content: space-between;
}

.sh-w-orta {
  width: 21.125em;
  max-width: 100%;
  height: 9.875em;
  justify-content: space-between;
}

.sh-w-konum {
  font-size: 0.6875em;
  font-weight: 600;
  color: var(--sh-murekkep-2);
}
.sh-w-baslik {
  font-size: 0.9375em;
  font-weight: 600;
  color: var(--sh-safak);
}
.sh-w-sayac {
  font-size: 1.75em;
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.1;
  white-space: nowrap;
}
.sh-w-alt {
  font-size: 0.75em;
  color: var(--sh-murekkep-2);
  margin-top: 0.15em;
}
.sh-w-ust {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5em;
}
.sh-w-ust .sh-k {
  font-size: 0.75em;
  font-weight: 600;
  color: var(--sh-murekkep-2);
}
.sh-w-ust .sh-v {
  font-size: 0.9375em;
  font-weight: 600;
  color: var(--sh-safak);
}

.sh-w-izgara {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.1em 1em;
  font-size: 0.8125em;
}
.sh-w-izgara div {
  display: flex;
  justify-content: space-between;
  gap: 0.5em;
  padding-bottom: 0.3em;
  margin-bottom: 0.25em;
  border-bottom: 1px solid var(--sh-cizgi);
  color: var(--sh-murekkep);
}
.sh-w-izgara div.sh-meta { color: var(--sh-murekkep-2); }
.sh-w-izgara div.sh-solmus { color: var(--sh-murekkep-3); }
.sh-w-izgara div.sh-n { color: var(--sh-safak); font-weight: 600; }

/* --- 10.3 ~~Kıble pusulası~~ — 16.09.2026'da SİLİNDİ: elle çizilmiş 1.x replikası
   yerini SG cihazından çekilen gerçek kareye bıraktı (kible-tr/en). --- */

/* --- 10.4 Apple Watch — komplikasyon ---------------------------------- */

.sh-watch {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5em;
  align-items: flex-start;
}

.sh-saatkasa {
  width: 11.5em;
  border-radius: 2.75em;
  background: #000;
  border: 0.375em solid #2a2a2c;
  box-shadow: var(--sh-golge);
  color: #fff;
  flex: none;
}
/* Gerçek kadran karesi kasanın içinde (410 × 502, çerçevesiz kaynak) */
.sh-saatkasa img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1.5em;
}
.sh-saatkasa:has(img) { padding: 0.5em; }

.sh-saatyuz {
  height: 14em;
  padding: 1.5em 1.125em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.sh-saatyuz .sh-zaman {
  font-size: 2.125em;
  font-weight: 300;
  letter-spacing: -0.02em;
  text-align: right;
  line-height: 1;
  color: #fff;
}
.sh-saatyuz .sh-komp {
  display: flex;
  align-items: center;
  gap: 0.625em;
}

.sh-wdair {
  width: 3.5em;
  height: 3.5em;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
  flex: none;
}
.sh-wdair span {
  font-size: 0.6875em;
  font-weight: 500;
  color: var(--sh-amber-koyu);
}
.sh-wdair b { font-size: 0.9375em; font-weight: 600; }

/* Dar ekran */
@media (max-width: 560px) {
  .sh-widget,
  .sh-watch { gap: 1.25em; }
  .sh-widget { --sh-olcek: 0.86; }
}