@charset "utf-8";
/* ==========================================================================
   sahaar.app — ortak stil
   Kaynak: docs/03-tasarim/tasarim-sistemi.md §2 (renk) · §3 (tipografi) ·
           §6 (hareket) · docs/03-tasarim/marka-kimligi.md ·
           site/landing/yon.md ("Ufuk" yönü)
   Kural: üçüncü taraf istek YOK (font, ikon, betik dahil). Sistem font yığını.
   ========================================================================== */

/* 1 — Tokenlar --------------------------------------------------------- */

:root {
  color-scheme: light dark;

  /* UI semantik (tasarım sistemi §2.2 — açık tema) */
  --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);
  /* Yalnız denetim (düğme/girdi) kenarı — WCAG 1.4.11 için ≥ 3:1 ölçüldü */
  --kenar-kontrol: rgba(23, 24, 28, 0.5);
  --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;
  --seher: #f4eadb;
  --seher-2: #c3c8e6;

  /* 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;
  --yazi-kod: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* Ölçü ve ritim */
  --olcu: 65ch;
  --kap: 1080px;
  --kenar: 20px;
  --ritim: clamp(64px, 9vw, 116px);

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

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

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

@media (prefers-color-scheme: dark) {
  :root {
    --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);
    --kenar-kontrol: rgba(242, 241, 236, 0.4);
  }
}

@media (prefers-contrast: more) {
  :root {
    --murekkep-2: var(--murekkep);
    --cizgi: var(--cizgi-vurgu);
    --cizgi-vurgu: var(--kenar-kontrol);
    --seher-2: var(--seher);
  }
}

/* 2 — Temel --------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--zemin);
  color: var(--murekkep);
  font-family: var(--yazi);
  font-size: 1.0625rem; /* 17px */
  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);
}

/* Atlama bağlantısı */
.atla {
  position: absolute;
  inset-inline-start: var(--kenar);
  inset-block-start: 12px;
  z-index: 50;
  padding: 10px 16px;
  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(-160%);
}
.atla:focus-visible { transform: translateY(0); }

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

/* 3 — Tipografi ------------------------------------------------------ */

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

h1 {
  font-size: clamp(2.125rem, 5.2vw, 3.25rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
}

h2 {
  font-size: clamp(1.625rem, 3.2vw, 2.25rem);
  line-height: 1.12;
  letter-spacing: -0.022em;
}

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

h4 {
  font-size: 1.0625rem;
  line-height: 1.35;
  letter-spacing: -0.005em;
}

p, ul, ol, dl, table, pre, blockquote, figure {
  margin: 0 0 1em;
}

p { text-wrap: pretty; }

:where(p, li) { overflow-wrap: break-word; }

.lede {
  font-size: clamp(1.125rem, 1.5vw, 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: block;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--murekkep-2);
  margin: 0 0 14px;
}

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

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

abbr[title] {
  text-decoration: underline dotted;
  text-underline-offset: 0.16em;
  cursor: help;
}

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

code, kbd, samp {
  font-family: var(--yazi-kod);
  font-size: 0.9em;
  background: var(--yuzey-2);
  padding: 0.1em 0.36em;
  border-radius: 5px;
}

pre {
  background: var(--yuzey-2);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose-m);
  padding: 16px 18px;
  overflow-x: auto;
  font-size: 0.875rem;
  line-height: 1.55;
}
pre code {
  background: none;
  padding: 0;
  font-size: inherit;
}

hr {
  border: 0;
  border-top: 1px solid var(--cizgi);
  margin: var(--ritim) 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; }

.bolum { padding-block: var(--ritim); }
.bolum + .bolum { padding-block-start: 0; }

/* 5 — Üst çubuk ------------------------------------------------------ */

.ust {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  min-height: 60px;
  padding-block: 12px;
}

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

.ust-baglar {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  font-size: 0.9375rem;
}
.ust-baglar a {
  display: inline-block;
  padding: 10px 12px;
  color: inherit;
  text-decoration: none;
  border-radius: var(--kose-s);
}
.ust-baglar a[aria-current="page"] { color: var(--safak); }
/* Koyu bantta "bulunduğunuz sayfa": açık tema --safak'ı (#a85217) gece üstünde
   2,83:1 veriyordu — 15 px normal metin için AA'nın altı (24.08 denetimi).
   Çözüm rengi amberle eşitlemek DEĞİL (o zaman etkin bağlantı diğerlerinden
   ayırt edilemez): bandın en parlak rengi + ağırlık. Ölçüldü: 12,9:1. */
.gece .ust-baglar a[aria-current="page"] {
  color: var(--seher);
  font-weight: 600;
}
@media (hover: hover) and (pointer: fine) {
  .ust-baglar a:hover { color: var(--safak); }
}

.dil {
  border: 1px solid currentColor;
  font-size: 0.875rem;
  padding: 8px 12px !important;
}

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

.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 22px;
  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); }

.dugme-sade {
  background: transparent;
  color: var(--murekkep);
  border-color: var(--kenar-kontrol);
}
@media (hover: hover) and (pointer: fine) {
  .dugme-sade:hover {
    background: var(--yuzey-2);
    color: var(--murekkep);
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .dugme:active { transform: none; opacity: 0.85; }
}

/* 7 — Gece bandı (kahraman ve kapanış) ------------------------------- */

.gece {
  position: relative; /* .gece::after ufuk bandının kapsayıcısı */
  isolation: isolate;
  color: var(--seher);
  background: linear-gradient(180deg, var(--gece-ust) 0%, var(--gece) 100%);
  overflow: hidden;
  --odak: var(--marka-amber);
}
.gece a { color: var(--marka-amber); }
@media (hover: hover) and (pointer: fine) {
  .gece a:hover { color: var(--seher); }
}
.gece h1,
.gece h2 { color: var(--seher); }
.gece .lede,
.gece .meta,
.gece .etiket { color: var(--seher-2); }
.gece .dugme {
  background: var(--marka-amber);
  color: #17181c;
}
@media (hover: hover) and (pointer: fine) {
  .gece .dugme:hover { background: #ffb066; }
}
.gece .dugme-sade {
  background: transparent;
  color: var(--seher);
  border-color: rgba(244, 234, 219, 0.45); /* gece üstünde 3,86:1 */
}
@media (hover: hover) and (pointer: fine) {
  .gece .dugme-sade:hover {
    background: rgba(244, 234, 219, 0.08);
    color: var(--seher);
  }
}

/* Ufuk: bandın altındaki tek amber çizgi + yer bandı */
/* Yer bandı + ufuk çizgisi YALNIZ hero/kapanış bantlarında (.ufuklu).
   Kısa başlık çubuklarında (gizlilik/destek `header.gece`) bant başlığın içine
   düşüp yazının ortasından çizgi geçiriyordu — 21.08 sahip bulgusu.
   Bant rengi bir sonraki bölümün zemini: ufuk, gökyüzü ile sayfanın sınırı olur;
   iki farklı koyu bandın üst üste binmesi (ana sayfadaki geçiş hatası) böylece biter. */
.gece.ufuklu::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 28px;
  background: var(--zemin);
  border-block-start: 1px solid rgba(242, 155, 74, 0.35);
  z-index: -1;
}

/* Kahraman içindeki dekoratif yarım disk + ışınlar.
   Dar ekranda metin bu katmanın üstüne binebildiği için opaklık ölçülmüş
   güvenli değerde tutulur (amber %28 → seher metni 8,2:1, seher-2 5,9:1).
   ≥ 1000 px'te grafik metin sütununun tamamen dışına çıkar, tam opaklığa döner. */
.gokyuzu {
  position: absolute;
  inset-block-end: 28px;
  inset-inline-end: -14%;
  width: min(520px, 84vw);
  aspect-ratio: 1024 / 780;
  z-index: -2;
  pointer-events: none;
  opacity: 0.28;
}
.gokyuzu svg { display: block; width: 100%; height: 100%; }

.kahraman {
  position: relative;
  padding-block: clamp(56px, 9vw, 104px) clamp(84px, 11vw, 140px);
}
.kahraman-metin {
  position: relative;
  z-index: 1;
  max-width: 640px;
}
.kahraman h1 { font-size: clamp(2.5rem, 6vw, 4.25rem); }

@media (min-width: 1000px) {
  .kahraman-metin { max-width: 52%; }
  .gokyuzu {
    inset-inline: 56% 0;
    width: auto;
    opacity: 1;
  }
}
.kahraman .imza {
  font-family: var(--yazi-yuvarlak);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--marka-amber);
  margin: 14px 0 20px;
}
.kahraman .lede { max-width: 44ch; }

.rozet {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(244, 234, 219, 0.28);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--seher);
  margin-block-end: 22px;
}
.rozet .isik {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--marka-amber);
  flex: 0 0 auto;
}

/* 8 — Özellik bölümleri ---------------------------------------------- */

.ozellikler {
  display: grid;
  gap: clamp(48px, 6vw, 76px);
}

.ozellik {
  display: grid;
  gap: 24px 48px;
  align-items: start;
}
@media (min-width: 860px) {
  .ozellik {
    grid-template-columns: 5fr 7fr;
  }
  .ozellik > .gorsel { grid-column: 2; }
  .ozellik.ters > .metin { grid-column: 2; }
  .ozellik.ters > .gorsel { grid-column: 1; grid-row: 1; }
}
.ozellik h3 { margin-block-end: 10px; }
.ozellik p { margin-block-end: 0; max-width: 52ch; }
.ozellik p + p { margin-block-start: 0.7em; }

/* 9 — Görsel öğeler (saf CSS/SVG, dosya yok) ------------------------- */

.kart-yuzey {
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose-l);
  padding: 20px;
}

/* Kilit ekranı alarm kartı */
.alarm-kart {
  max-width: 380px;
  background: var(--gece);
  border: 1px solid rgba(242, 155, 74, 0.22);
  border-radius: var(--kose-l);
  padding: 18px 20px;
  color: var(--seher);
  display: flex;
  gap: 14px;
  align-items: center;
}
.alarm-kart .zil {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  color: var(--marka-amber);
}
.alarm-kart .ad {
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.25;
}
.alarm-kart .saat {
  font-variant-numeric: tabular-nums;
  font-size: 1.75rem;
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-inline-start: auto;
}
.alarm-kart .alt {
  font-size: 0.8125rem;
  color: var(--seher-2);
  margin-block-start: 2px;
}

/* Güneş yayı */
.yay { width: 100%; max-width: 380px; height: auto; display: block; }

/* Widget karoları */
.karolar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
}
.karo {
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  color: var(--murekkep);
}
.karo-dairesel {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 2px;
  padding: 6px;
}
.karo-dairesel .ad {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--murekkep-2);
}
.karo-dairesel .saat {
  font-size: 1.0625rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.karo-dikdortgen {
  width: 200px;
  border-radius: var(--kose-m);
  padding: 12px 14px;
}
.karo-dikdortgen .ad {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--murekkep-2);
}
.karo-dikdortgen .saat {
  font-size: 1.5rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.karo-dikdortgen .sayac {
  font-size: 0.8125rem;
  color: var(--murekkep-2);
  font-variant-numeric: tabular-nums;
}

.ornek {
  display: inline-block;
  margin-block-start: 12px;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--murekkep-2);
}

/* 10 — Fiyat --------------------------------------------------------- */

.fiyatlar {
  display: grid;
  gap: 0;
  border-block-start: 1px solid var(--cizgi);
  margin-block-start: 36px;
}
@media (min-width: 760px) {
  .fiyatlar { grid-template-columns: repeat(3, 1fr); }
}

.plan {
  padding: 26px 22px;
  border-block-end: 1px solid var(--cizgi);
}
@media (min-width: 760px) {
  .plan { border-block-end: 0; border-inline-end: 1px solid var(--cizgi); }
  .plan:last-child { border-inline-end: 0; }
}
.plan.one-cikan { background: var(--safak-yumusak); }
.plan .ad {
  font-size: 1rem;
  font-weight: 600;
  margin-block-end: 6px;
}
.plan .tutar {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  display: block;
}
.plan .birim {
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--murekkep-2);
}
.plan .not {
  font-size: 0.875rem;
  color: var(--murekkep-2);
  margin-block-start: 8px;
}
.plan .pusula {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--safak);
  margin-block-end: 10px;
}

/* 11 — Belge sayfaları (politika, SSS) -------------------------------- */

.belge {
  padding-block: clamp(36px, 5vw, 64px) var(--ritim);
}
.belge > * { max-width: var(--olcu); }
.belge > .genis { max-width: none; }
/* Masaüstü (≥ 900 px): metin blokları içerik sütununun tam genişliğini kullanır — kart/tablo ile aynı hiza.
   65ch okuma ölçüsü 1000 px'lik sütunun 696 px'ini bırakıyor, sayfa «iki kolonun tekini kullanıyor»
   gibi görünüyordu (sahip, 18.09.2026 — önce şehir sayfalarında, aynı gün bütün alt sayfalara).
   Paragraflar iki yana yaslı + tireleme (dil <html lang>'dan: en/tr); başlıklar, meta satırları,
   listeler, tablolar ve resim altyazıları yaslanmaz; mobil (< 900 px) sola dayalı ve ölçüde kalır.
   Ana sayfalar (landing.css) .belge kullanmaz, etkilenmez. */
@media (min-width: 900px) {
  .belge > * { max-width: none; }
  .belge p:not(.meta) {
    text-align: justify;
    text-justify: inter-word;
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 7 3 3;
  }
  .belge figcaption, .belge summary, .belge .tablo-sar p { text-align: start; hyphens: manual; -webkit-hyphens: manual; }
}

.belge h1 { margin-block-end: 10px; }
.belge h2 {
  margin-block: 2.2em 0.5em;
  padding-block-start: 0.6em;
  border-block-start: 1px solid var(--cizgi);
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
}
.belge h3 {
  margin-block: 1.6em 0.35em;
}
.belge h4 { margin-block: 1.2em 0.3em; }
.belge > h1 + .meta { margin-block-end: 2em; }

.ozet {
  background: var(--safak-yumusak);
  border: 1px solid color-mix(in srgb, var(--safak) 26%, transparent);
  border-radius: var(--kose-l);
  padding: 22px 24px;
  margin-block: 8px 2.4em;
}
.ozet h2 {
  border: 0;
  padding: 0;
  margin: 0 0 12px;
  font-size: 1.0625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ozet ul { margin: 0; padding-inline-start: 1.2em; }
.ozet li:last-child { margin-block-end: 0; }

/* İçindekiler */
.icindekiler {
  border: 1px solid var(--cizgi);
  border-radius: var(--kose-m);
  padding: 18px 22px;
  margin-block-end: 2.4em;
  background: var(--yuzey);
}
.icindekiler h2 {
  border: 0;
  padding: 0;
  margin: 0 0 10px;
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--murekkep-2);
}
.icindekiler ol {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 28px;
}
@media (max-width: 599px) {
  .icindekiler ol { columns: 1; }
}
.icindekiler li { margin-block-end: 0.3em; break-inside: avoid; }
.icindekiler a { font-size: 0.9375rem; }

:target { scroll-margin-block-start: 24px; }

/* Tablolar */
.tablo-sar {
  overflow-x: auto;
  margin-block-end: 1.4em;
  border: 1px solid var(--cizgi);
  border-radius: var(--kose-m);
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.9375rem;
  margin: 0;
}
caption {
  text-align: start;
  font-size: 0.875rem;
  color: var(--murekkep-2);
  padding: 10px 14px;
}
th, td {
  text-align: start;
  padding: 11px 14px;
  border-block-end: 1px solid var(--cizgi);
  vertical-align: top;
}
thead th {
  font-weight: 600;
  background: var(--yuzey-2);
  white-space: nowrap;
}
tbody tr:last-child th,
tbody tr:last-child td { border-block-end: 0; }

/* SSS */
.sss-madde {
  border-block-end: 1px solid var(--cizgi);
  padding-block: 8px 18px;
}
.sss-madde:last-child { border-block-end: 0; }

/* Bilgi şeridi */
.serit {
  border-inline-start: 3px solid var(--safak);
  background: var(--safak-yumusak);
  border-radius: 0 var(--kose-m) var(--kose-m) 0;
  padding: 14px 18px;
  margin-block: 1.4em;
}
.serit :last-child { margin-block-end: 0; }

/* 12 — Altbilgi ------------------------------------------------------- */

/* Altbilgi: landing.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; }
}

/* 13 — Hareket -------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 14 — Yazdırma ------------------------------------------------------- */

@media print {
  .ust, .altbilgi-baglar, .atla, .gokyuzu, .eylemler { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .gece { background: none; color: #000; }
  a { color: #000; }
  .belge > * { max-width: none; }
}

/* 15 — Şehir namaz vakti sayfaları (/prayer-times/, ADR-046) ----------------
   Üretilen sayfalar: tools/sehir/uret.py. Yeni renk/font yok; yalnız bileşen.
   Hareket: yalnız transform+opacity (§13 reduced-motion zaten kapsar); karolar
   ve bugün satırı vurgusu ANLIK taşınır — dakikada bir olay, animasyon yok. */

.ust-baglar .cta {
  border: 1px solid currentColor;
  font-size: 0.875rem;
  padding: 8px 12px;
}
/* 390 px'te üç bağlantı + logo üç satıra kırılıyordu (18.09.2026). Uygulama yayında (28.09):
   telefonda indirme düğmesi kalır, ikinci bağlantı («Vakitler neden farklı», altbilgide de var) gizlenir. */
@media (max-width: 599px) {
  .ust-baglar:has(.cta) > a:nth-child(2) { display: none; }
  .ust-baglar:has(.cta) { flex-wrap: nowrap; gap: 0; }
  .ust-baglar:has(.cta) > a { padding-inline: 10px; white-space: nowrap; }
}

.sehir-bas { padding-block: 28px 56px; }
.sehir-bas h1 { margin-block-end: 8px; }
.sehir-bas .meta { margin-block-end: 0; }
.sehir-bas .siradaki {
  margin-block-start: 10px;
  font-family: var(--yazi-yuvarlak);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--marka-amber);
}

.kirinti ol {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  font-size: 0.9375rem;
  color: var(--seher-2);
}
.kirinti li { margin: 0; }
.kirinti li + li::before { content: "›"; padding-inline: 8px; color: var(--seher-2); }
.kirinti a { color: var(--seher); text-decoration: none; }
.kirinti [aria-current="page"] { color: var(--seher); font-weight: 600; }

.belge.sehir { padding-block-start: 24px; }
.belge.sehir > .genis { max-width: none; }
.belge.sehir > .yontem-kutu { max-width: var(--olcu); }
/* Masaüstü (≥ 900 px): tam genişlik + yaslı paragraf kuralı §11'de (.belge geneli, 18.09.2026).
   Burada yalnız şehre özgü kalanlar: §11'in `.belge > *`'ını ezen .yontem-kutu ölçüsü, .kible alt
   kutuları ve yaslanmayan sayı satırları (ikindi çifti, Kıble açısı). */
@media (min-width: 900px) {
  .belge.sehir > .yontem-kutu, .belge.sehir .kible > div { max-width: none; }
  .belge.sehir p.ikindi-cift, .belge.sehir p.kible-sayi { text-align: start; hyphens: manual; -webkit-hyphens: manual; }
}

/* Bugün karoları — amber yalnız sıradaki vakitte (uygulamadaki tek amber blok) */
.vakit-izgara {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
@media (min-width: 600px) {
  .vakit-izgara { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
}
.vakit-karo {
  margin: 0;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose-m);
  padding: 12px 12px 10px;
  display: grid;
  gap: 2px;
}
.vakit-karo .ad {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--murekkep-2);
}
.vakit-karo .ad small { display: none; }
.vakit-karo .saat {
  font-family: var(--yazi-yuvarlak);
  font-size: clamp(1.375rem, 3.4vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.vakit-karo.gunes .saat { color: var(--murekkep-2); font-weight: 500; }
.vakit-karo.siradaki {
  background: var(--safak);
  border-color: transparent;
  color: var(--safak-uzeri);
}
.vakit-karo.siradaki .ad { color: inherit; opacity: 0.85; }

.ikindi-cift {
  font-size: 0.9375rem;
  color: var(--murekkep-2);
  margin-block-end: 2.2em;
}
.ikindi-cift .ad { font-weight: 600; color: var(--murekkep); }
.ikindi-cift strong { color: var(--murekkep); }

/* Yöntem kutusu */
.yontem-kutu {
  background: var(--safak-yumusak);
  border-radius: var(--kose-m);
  padding: 22px 24px;
  margin-block: 0 2.4em;
}
.yontem-kutu h2 {
  border: 0;
  padding: 0;
  margin: 0 0 14px;
  font-size: 1.0625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.yontem-kutu dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 18px;
  margin: 0 0 14px;
  font-size: 0.9375rem;
}
.yontem-kutu dl > div { display: contents; }
.yontem-kutu dt { color: var(--murekkep-2); }
.yontem-kutu dd { margin: 0; }
.yontem-kutu p:last-child { margin-block-end: 0; }
@media (max-width: 480px) {
  .yontem-kutu dl { grid-template-columns: 1fr; gap: 2px; }
  .yontem-kutu dd { margin-block-end: 8px; }
}

/* Vakit tablosu: bugün satırı JS ile, şehrin saat dilimine göre */
.belge.sehir .tablo-sar th, .belge.sehir .tablo-sar td { padding: 8px 12px; white-space: nowrap; }
/* Tablo başlığı (caption) kaydırma kabının içinde tablo genişliğine yayılıyor ve 390 px'te kesik görünüyordu;
   aynı bilgi görünür h2 + .meta satırında var. Caption yalnız ekran okuyucuya kalır (Dalga 0 gösterimi, 18.09.2026). */
.belge.sehir .tablo-sar caption {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.tablo-sar .bugun th, .tablo-sar .bugun td { background: var(--safak-yumusak); font-weight: 600; }
/* Ülke sayfası: US/CA/AU şehirleri eyalet başlığıyla gruplu (<tbody> başına <tr class="grup">, Dalga 1 — 18.09.2026) */
.tablo-sar .grup th { background: var(--yuzey-2); color: var(--murekkep-2); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; }
.belge.sehir details { margin-block-end: 1.4em; }
.belge.sehir details > summary { cursor: pointer; list-style: none; }
.belge.sehir details > summary::-webkit-details-marker { display: none; }
.belge.sehir details > summary h2 { display: inline-block; }
.belge.sehir details > summary h2::after { content: " ▸"; color: var(--murekkep-2); }
.belge.sehir details[open] > summary h2::after { content: " ▾"; }

/* Yıl eğrisi — currentColor + token, iki temada okunur */
.yil-egri { margin: 0 0 1em; }
.yil-egri svg { width: 100%; height: auto; display: block; color: var(--murekkep); }
.yil-egri .izgara line { stroke: var(--cizgi); stroke-width: 1; }
.yil-egri text { font-size: 12px; fill: var(--murekkep-2); font-family: var(--yazi); font-variant-numeric: tabular-nums; }
/* viewBox 720 geniş; 390 px'te 12 px yazı ~6,5 px'e iniyordu. Yazı SVG biriminde büyütülür (Dalga 0 gösterimi, 18.09.2026). */
@media (max-width: 599px) { .yil-egri text { font-size: 18px; } }
.yil-egri .cizgi { fill: none; stroke-width: 2; stroke-linejoin: round; }
.yil-egri .cizgi.imsak { stroke: var(--safak); }
.yil-egri .cizgi.gunes { stroke: var(--murekkep-2); stroke-dasharray: 4 3; }
.yil-egri .cizgi.aksam { stroke: currentColor; }
.yil-egri .cizgi.yatsi { stroke: var(--safak); stroke-dasharray: 6 4; }
.yil-egri .lejant text { fill: var(--murekkep); font-weight: 600; }
.yil-egri figcaption { font-size: 0.875rem; color: var(--murekkep-2); margin-block-start: 8px; }
.uc-degerler { margin-block-end: 1.6em; }

/* Kıble */
.kible { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; margin-block-end: 1.2em; }
.kible .pusula { width: 132px; height: 132px; flex: 0 0 auto; color: var(--murekkep); }
.pusula .halka { fill: var(--yuzey); stroke: var(--cizgi-vurgu); stroke-width: 1.5; }
.pusula .yon text { font-size: 11px; font-weight: 600; fill: var(--murekkep-2); font-family: var(--yazi); }
.pusula .ok line { stroke: var(--safak); stroke-width: 3; stroke-linecap: round; }
.pusula .ok polygon { fill: var(--safak); }
.pusula .merkez { fill: currentColor; }
.kible-sayi { font-size: 1.125rem; margin-block-end: 0.4em; }
.kible > div { flex: 1 1 280px; max-width: var(--olcu); }

/* Yakın şehirler */
.yakin-liste { list-style: none; padding: 0; }
.yakin-liste li {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  align-items: baseline;
  padding-block: 10px;
  border-block-end: 1px solid var(--cizgi);
  margin: 0;
}
.yakin-liste li:last-child { border-block-end: 0; }

/* Dizin: süzme kutusu (ağa çıkmaz) ve ülke listesi */
.suz-etiket { display: block; font-size: 0.875rem; font-weight: 600; margin-block: 1.6em 6px; }
.suz {
  width: 100%;
  max-width: 420px;
  min-height: 48px;
  padding: 10px 14px;
  font: inherit;
  color: var(--murekkep);
  background: var(--yuzey-2);
  border: 1px solid var(--kenar-kontrol);
  border-radius: var(--kose-s);
  margin-block-end: 1.4em;
}
.bolge h2 { margin-block-start: 1.4em; }
.ulke-liste { list-style: none; padding: 0; }
.ulke-liste li { padding-block: 12px; border-block-end: 1px solid var(--cizgi); margin: 0; }
.ulke-liste li:last-child { border-block-end: 0; }
.ulke-liste .ulke { font-weight: 600; font-size: 1.0625rem; margin-inline-end: 10px; }
.ulke-liste .sehirler { display: block; margin-block-start: 4px; font-size: 0.9375rem; }
.ulke-liste .sehirler a + a::before { content: "· "; color: var(--murekkep-2); }

/* Kapanış bandı (ana sayfadaki .kapanis'in belge sayfası karşılığı) */
.gece.ufuklu.ters-ufuk::after {
  inset-block-end: auto;
  inset-block-start: 0;
  height: 0;
  background: none;
  border-block-end: 1px solid rgba(242, 155, 74, 0.35);
}
.kapanis { padding-block: clamp(56px, 8vw, 96px); text-align: center; }
.kapanis h2 { font-family: var(--yazi-yuvarlak); max-width: 18ch; margin-inline: auto; }
.kapanis p { margin-block: 18px 0; margin-inline: auto; max-width: 46ch; }
.kapanis .eylemler { justify-content: center; }