/*
 * Yakınımda Ne Var — arayüz
 *
 * Site tek bir kategoriye ait değil: kategori × şehir ızgarasında büyüyor.
 * Bu yüzden kimlik bir kategoriden (pazar tentesi, kitap, vs.) değil, bulma
 * eyleminden geliyor: eski şehir almanağının fihrist dili — nokta bağlaçlı
 * indeks satırları, künye sütunu, teyit damgası.
 *
 * Kurallar:
 *   1. Renk her zaman bir şey söyler. Marka rengi ile durum rengi ayrıdır;
 *      safran yalnızca "bugün / şimdi", yeşil yalnızca "açık" demektir.
 *   2. Sayfada tek gür öğe var: künye sütunu. Gerisi sessiz durur.
 *   3. Inline style yok (CSP: style-src-attr 'none'). Her şey burada.
 *   4. İstemcide uygulama JS'i yok. Açılır menü, sekme, animasyon kütüphanesi
 *      beklemeyin — gereken her davranış CSS ile çözüldü. Üç istisna var
 *      (tema, konum, şehir ızgarasını kısaltma) ve üçü de JavaScript'siz
 *      eksiksiz çalışan sayfanın üstüne ekleniyor.
 */

/* ==========================================================================
   1. Font
   Kendi sunucumuzdan. Google Fonts render'ı bloklayan bir üçüncü taraf isteği
   demekti ve her ziyaretçinin IP'si Google'a gidiyordu.

   İki aile. Schibsted Grotesk gövde ve başlık; JetBrains Mono yalnızca
   künye, saat ve etiket — sayıların hizalanması gereken her yer.
   İkisi de değişken ağırlık ekseni taşıyor (400-800 / 400-500) ama genişlik
   ekseni YOK. Archivo'nun 75-125 genişlik ekseniyle yapılan sıkıştırma bu
   yüzden harf aralığına taşındı: font-stretch bu ailelerde sessizce
   yok sayılırdı, letter-spacing ise aynı işi görüyor.

   Türkçe ş, ğ, İ latin-ext alt kümesinde, ı ise latin'de. İkisi de şart:
   yalnızca latin yüklemek başlıkları önce yedek fontla çizdiriyordu.
   ========================================================================== */

@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/static/fonts/schibsted-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/static/fonts/schibsted-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/static/fonts/jetbrains-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/static/fonts/jetbrains-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   2. Token'lar
   Palet "kum": kum zemin, lacivert mürekkep, kehribar şimdi.
   Kâğıdın kendisi kirli beyaz değil kum; kartlar ondan AÇIK olarak
   ayrılıyor. Gölge yok — ayrımı ton ve tek piksellik çizgi yapıyor.
   Krem + terracotta ve siyah + asit yeşili paletleri bilerek dışarıda —
   ikisi de artık her yerde ve hiçbir konuya ait değil.
   ========================================================================== */

:root {
  color-scheme: light;

  /* zeminler: kum. Kâğıt en koyu, kart en açık — kartlar zeminden
     yükseliyor, gölgeyle değil tonla. */
  --kagit: #e9e5db;
  --kart: #fffdf8;
  --kart-2: #f6f3ec;
  --cizgi: #e6e0d1;
  --cizgi-koyu: #ddd7c9;

  /* mürekkep. Lacivert, siyah değil: kum zeminde saf siyah sertti. */
  --murekkep: #1c3557;
  --soluk: #8b8271;

  /* marka mürekkeple aynı lacivert — bağlantıyı altı çizili olması
     ayırıyor, rengi değil. Üstüne gelince kehribara dönüyor: sayfadaki
     tek renk değişimi, o yüzden fark ediliyor. */
  --marka: #1c3557;
  --marka-koyu: #b8801a;
  --marka-yumusak: #e7ecf3;
  /* Dolu marka zemininin üstündeki yazı. Koyu temada marka rengi açılıyor,
     beyaz yazı okunmaz hâle geliyordu; bu yüzden ayrı token. */
  --marka-yazi: #f6f3ec;

  /* durum */
  --simdi: #f0b429;        /* bugün / şu an — dolgu */
  --simdi-yazi: #20240f;   /* kehribarın üstündeki yazı */
  --simdi-soluk: #fdf6e3;
  --simdi-cizgi: #ecd9a6;
  --simdi-metin: #8b7a55;  /* kehribar zeminli kutunun ikincil yazısı */
  --acik: #2f8f5f;         /* açık */
  --acik-yazi: #2f6b4f;    /* yeşil rozetin içindeki yazı */
  --acik-yumusak: #e4f0e8;
  --kapali: #c2b9a5;       /* kapalı — nokta ve çubuk */
  --uyari: #b23c26;        /* hata */
  --uyari-yumusak: #fbeae7;

  /* gece: kahraman bölümü ve içindeki panel. Lacivert zeminde kum
     mürekkebi ters çeviriyor; ayrı token seti gerekiyor çünkü koyu
     temada bu bölge AÇILMIYOR — zaten koyu, iki temada da aynı. */
  --gece: #1c3557;
  --gece-panel: #16294a;
  --gece-cizgi: #33496a;
  --gece-cizgi-2: #3c5679;
  --gece-yazi: #f6f3ec;
  --gece-soluk: #b9c4d6;
  --gece-kunye: #a8b6cc;
  --gece-zayif: #7e90ab;
  --gece-cubuk: #22385c;
  --gece-cubuk-dolu: #4c6a9b;
  --gece-nokta: #5fd39a;

  /* Kategori rengi. Varsayılan marka; her kategori kendi tonunu
     .tur-<slug> ile eziyor (bkz. 9. Kategori renkleri). Kural yeni
     kategoriye kapalı değil: tonu tanımlanmamış kategori lacivert
     çıkıyor, bozulmuyor. */
  --tur: var(--marka);

  /* Künye, saat, sayaç. Ailenin kendisi yüklenmezse sistem monosu
     devralıyor — hizalama bozulmuyor, yalnızca karakter değişiyor. */
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* tipografi ölçeği — akışkan, mobilde sıkışmaz masaüstünde şişmez */
  --t-mini: 0.75rem;
  --t-kucuk: 0.8125rem;
  --t-meta: 0.9375rem;
  --t-govde: 1rem;
  --t-orta: clamp(1.0625rem, 0.99rem + 0.36vw, 1.1875rem);
  --t-h3: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --t-h2: clamp(1.25rem, 1.14rem + 0.55vw, 1.5rem);
  --t-h1: clamp(1.75rem, 1.42rem + 1.65vw, 2.75rem);

  /* ritim */
  /* Kap akışkan: 46rem'de sabit kalınca 1280 pikselde iki yanda 270'er
     piksel boşluk kalıyordu. Düzyazının kendi ölçüsü ayrıca sınırlı
     (main p / main li = 40rem), o yüzden kabı genişletmek satırları
     okunmaz uzunluğa çıkarmıyor — yalnızca liste, kart ve başlık
     ekranın hakkını veriyor. Tavan 110rem: altındaki her değerde 1536 ve
     1920 piksellik ekranlarda iki yanda yüzlerce piksel ölü alan kalıyordu.
     Alt sınır 46rem şart — clamp yerine düz min() yazılsaydı mobilde kap
     92vw'ye inip kenarlara fazladan boşluk eklerdi. */
  --olcu: clamp(46rem, 92vw, 110rem);
  /* Genişleyen kapta gerilmemesi gereken bileşenler için */
  --dar: 46rem;
  --yumru: 10px;
  --yumru-kucuk: 6px;
  /* Bütün denetimler — metin alanı, düğme, düğme gibi görünen bağlantı
     (hap, süzgeç) — tek yarıçap taşıyor. Önceden başlıktaki arama ve konum
     düğmesi tam yuvarlak (999px), kahraman araması 14, ".button" 10, form
     alanları 6 pikseldi: yan yana gelen iki denetim farklı ailelerden
     gelmiş gibi duruyordu. Değer .button'ınki. Kartlardan ayrı değişken,
     çünkü kart köşesi değişince düğmeler değişmek zorunda değil. */
  --yumru-denetim: 10px;
  --kunye-en: 3.125rem;
}

/*
 * Koyu tema yalnızca kullanıcı seçtiğinde. Varsayılan açık tema — sistem
 * tercihine göre otomatik koyulaşma bilerek yok: siteye ilk gelen herkes
 * aynı sayfayı görüyor. Seçim tema düğmesiyle yapılıyor ve tarayıcıda
 * saklanıyor (bkz. public/js/tema.js).
 */
:root[data-theme='dark'] {
  color-scheme: dark;

    /* Kumun koyu karşılığı nötr gri değil, sıcak bir siyah: açık temanın
       karakteri kaybolmasın diye tonlar sarıya kaçıyor. */
    --kagit: #171613;
    --kart: #211f1b;
    --kart-2: #1c1a17;
    --cizgi: #33302a;
    --cizgi-koyu: #45413a;

    --murekkep: #efe9dc;
    --soluk: #a8a08e;

    /* Açık temada bağlantı mürekkeple aynı renk; koyu temada olamıyor —
       lacivert bu zeminde okunmuyor. Açılmış hâli bağlantıyı taşıyor,
       üstüne gelince yine kehribara dönüyor. */
    --marka: #9db8dd;
    --marka-koyu: #f0b429;
    --marka-yumusak: #1e2733;
    --marka-yazi: #10203a;

    --simdi: #f0b429;
    --simdi-yazi: #20240f;
    --simdi-soluk: #2e2717;
    --simdi-cizgi: #4a3f22;
    --simdi-metin: #d3bd8a;
    --acik: #56c692;
    --acik-yazi: #8fdcb4;
    --acik-yumusak: #1c2f27;
    --kapali: #6b6355;
    --uyari: #f08a76;
    --uyari-yumusak: #33201d;

    /* Kahraman bölümü iki temada da koyu. Burada yalnızca bir tık daha
       koyuluyor: açık temanın laciverti bu zeminde parlıyordu. */
    --gece: #16294a;
    --gece-panel: #101f3a;
}

/* ==========================================================================
   3. Temel
   ========================================================================== */

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

/* hidden niteliği her zaman kazanmalı. Tarayıcının kendi [hidden] kuralı
   display: none veriyor ama özgüllüğü sıfır: .button ya da .bul gibi
   display yazan HERHANGİ bir sınıf onu eziyor. Sonuç, JavaScript kapalıyken
   gizli kalması gereken konum ve tema düğmelerinin görünüp hiçbir şey
   yapmaması oluyordu. */
[hidden] {
  display: none !important;
}

/* Yapışkan çubuğun payı kaydırma kabında, tek tek hedeflerde değil: her
   çapa (/#kategoriler, /#sehirler, "içeriğe geç") ve klavye odağı çubuğun
   altında kalmadan duruyor. Pay yalnızca main'de tanımlıyken başlıktaki
   "Kategoriler" bağlantısı başlığı çubuğun altına gömüyor, okuyucu
   kartların ortasına iniyordu. Çubuk dar ekranda iki satır (~105 px),
   geniş ekranda tek satır (~67 px; bkz. 52rem bloğu); üstüne nefes payı. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 8rem;
}

body {
  margin: 0;
  background: var(--kagit);
  color: var(--murekkep);
  font-family: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--t-govde);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

/* Saat, sayı ve tarih çok: rakamlar sabit genişlikte olsun ki
   08:00–19:00 ile 10:00–22:00 alt alta hizalansın. */
time,
.saat,
.tally,
.sayi,
.bars b,
.kunye {
  font-variant-numeric: tabular-nums;
}

a {
  color: var(--marka);
  text-underline-offset: 0.16em;
  text-decoration-thickness: from-font;
}

a:hover {
  color: var(--marka-koyu);
}

img {
  max-width: 100%;
  height: auto;
}

/* Yalnızca yatay dolgu. Kısaltma (padding: 0 1.125rem) dikey dolguyu da
   sıfırlıyor ve .wrap ile aynı öğede duran .ust-ic'in kendi dikey dolgusunu
   eziyordu — aynı özgüllük, dosyada sonra gelen kazanıyor. Başlık yüksekliği
   bu yüzden ekran genişliğine göre 85 ile 105 arasında zıplıyordu. */
.wrap {
  max-width: var(--olcu);
  margin: 0 auto;
  padding-left: 1.125rem;
  padding-right: 1.125rem;
}

/* Klavyeyle gezen için: sekmenin ilk durağı içeriğe atlama bağlantısı. */
.atla {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 50;
  padding: 0.75rem 1rem;
  background: var(--marka);
  color: var(--marka-yazi);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--yumru-kucuk) 0;
}

.atla:focus {
  left: 0;
}

/* ==========================================================================
   4. Başlık
   Dizin büyüdükçe (81 il × N kategori) bağlantı çorbasına dönmemesi için
   başlık iki katmanla yetiniyor: kısayollar sabit, arama birincil.
   Kısayol üç tane ve üçü de dizinin bir ekseni: zaman, kategori, yer.
   "Kategoriler" bir raf değil tek bağlantı — her sayfanın tepesinde duran bir
   kategori rafı, dikey sayısı arttıkça başlığı ikinci bir menüye çeviriyordu.

   Çubuk yapışkan: uzun listelerde (bir sayfada 50-55 satır) arama ve
   "bugün" kısayolu yukarı dönmeden erişilebilir olmalı.
   ========================================================================== */

/* Yapışkan olan <header>'ın KENDİSİ. Bir ara sarmalayıcıya sticky vermek
   işe yaramıyor: yapışkan öğe ebeveyninin içerik kutusuyla sınırlı, yani
   header ekrandan çıkınca çubuk da onunla birlikte gidiyordu. */
/* Zemin kâğıt değil kart: kum zeminde çubuk sayfadan ayrışmıyordu, bir
   ton açığı tek çizgiye yaslanmadan da ayırıyor. */
.ust {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--kart);
  border-bottom: 1px solid var(--cizgi);
}

.ust-ic {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.625rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

/* Marka + kısayollar. Çubuk her genişlikte iki yakaya ayrılıyor: solda
   "burası neresi, nereye gidilir" (marka ve kısayollar), sağda eylemler
   (arama, konum, tema). Dar ekranda grup satırı dolduruyor ve tema düğmesini
   sağ kenara itiyor; kısayollar markanın hemen yanında kalıyor. Eskiden
   markanın otomatik kenar boşluğu kısayolları da sağa, tema düğmesinin
   yanına taşıyordu.

   Çubuğun geri kalanı ortalanıyor, bu ikisi ise kendi aralarında taban
   çizgisine göre hizalanıyor: ayrı ayrı ortalandıklarında küçük puntolu
   kısayollar markadan 2 piksel yukarıda duruyordu. Grubun boyu markanınki,
   yani marka çubukta eskisi gibi ortada. Sarma açık: dar ekranda sığmazsa
   kısayollar taşmak yerine alta iniyor. */
.ust-sol {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}

.marka-ad {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.3em;
  font-size: 1.0625rem;
  color: var(--murekkep);
  text-decoration: none;
  white-space: nowrap;
}

.marka-ad b {
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  font-size: 1.15em;
}

.marka-ad span {
  font-weight: 400;
  color: var(--soluk);
  letter-spacing: 0.01em;
}

.marka-ad:hover b {
  color: var(--marka);
}

/* Kısayollar. Hap değil düz metin: hap biçimi aynı çubuktaki "Yakınımı bul"
   düğmesiyle yarışıyordu ve dördü yan yana gelince başlık düğme tarlasına
   dönüyordu. Bulunulan sayfayı altındaki kehribar çizgi söylüyor.

   "Kategoriler" tek bir bağlantı, kategori rafı değil — 4. bölümün başındaki
   kural duruyor: dikey sayısı artınca burası uzamıyor, ana sayfadaki
   kategori ızgarası uzuyor. */
.kisayol {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 1.125rem;
}

.kisayol a {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: var(--t-meta);
  font-weight: 600;
  color: #5b6a80;
  text-decoration: none;
}

:root[data-theme='dark'] .kisayol a {
  color: var(--soluk);
}

.kisayol a:hover {
  color: var(--marka-koyu);
}

/* aria-current="page" zaten doğru olanı söylüyor; stil ondan türüyor,
   şablonda ikinci bir "aktif" sınıfı taşımaya gerek yok.

   Çizgi kenarlık değil, akışın dışında duran bir sözde öğe. Kenarlık
   (ve üstündeki dolgu) her bağlantının altına 4 piksel ekliyordu: metin
   markaya göre yukarı kayıyordu ve bulunulan sayfa kısayollardan biri
   değilken çizginin yeri boş bir aralık olarak kalıyordu. */
.kisayol a[aria-current='page'] {
  color: var(--murekkep);
}

.kisayol a[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.25rem;
  height: 2px;
  background: var(--simdi);
}

/* Tema düğmesi. JavaScript kapalıysa hiç görünmez (hidden niteliği
   şablonda duruyor, açan tema betiği). Simge temaya göre değişiyor:
   açık temada ay, koyu temada güneş — yani basınca ne olacağını gösteriyor. */
.tema {
  order: 3;
  width: 2.125rem;
  height: 2.125rem;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid var(--cizgi-koyu);
  border-radius: var(--yumru-denetim);
  background-color: var(--kart);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c3557' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.0625rem;
  cursor: pointer;
}

.tema:hover {
  border-color: var(--marka);
}

:root[data-theme='dark'] .tema {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23efe9dc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E");
}

/* Arama: dizinin birincil gezinti aracı, o yüzden en görünür bileşen.
   Mobilde kendi satırına düşüyor, masaüstünde sağ yakada konum ve tema
   düğmeleriyle birlikte duruyor.

   Tek çocuğu var — gönder düğmesi kalktı (bkz. partials/head.hbs). Yine de
   esnek kutu: alan kabın tamamına yayılsın diye. */
.ara {
  order: 4;
  flex: 1 1 100%;
  /* Esnek öğenin varsayılan min-width'i auto, yani içeriğinin en küçük
     hâli. Arama kutusu bunu 336 piksele çıkarıyordu ve 320 piksellik
     ekranda form kabından taşıyordu; sıfırlanınca gerçekten daralıyor. */
  min-width: 0;
  display: flex;
}

.ara input {
  flex: 1;
  min-width: 0;
  height: 2.625rem;
  /* Sol dolgu simgeye yer açıyor. */
  padding: 0 1.125rem 0 2.75rem;
  font: inherit;
  font-size: var(--t-meta);
  color: var(--murekkep);
  /* Kart değil kart-2: çubuğun kendisi artık kart renginde, aynı tonda
     bir alan sınırını yalnızca çizgiye bırakıyordu. */
  background-color: var(--kart-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b8271' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 1rem center;
  background-size: 1.125rem;
  border: 1px solid var(--cizgi-koyu);
  border-radius: var(--yumru-denetim);
}

.ara input::placeholder {
  color: var(--soluk);
}

/* "Yakınımı bul". Başlıktaki tek dolu düğme — konum, aramadan sonraki
   ikinci giriş yolu ve tarayıcı iznine bağlı olduğu için düğme olmak
   zorunda (bağlantı olamaz).

   hidden niteliği şablonda duruyor: geolocation yoksa konum.js düğmeyi hiç
   açmıyor ve kullanıcı çalışmayacak bir şeye basmıyor. Kehribar nokta
   "şimdi" demek — sayfadaki diğer kehribarla aynı anlamı taşıyor. */
.bul {
  /* Sıra dar ekranda da açıkça yazılmalı: varsayılan 0, markanın 1'inden
     ÖNCE geliyor ve düğme çubuğun soluna, markanın önüne geçiyordu. */
  order: 5;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.625rem;
  flex-shrink: 0;
  padding: 0 1rem;
  font: inherit;
  font-size: var(--t-meta);
  font-weight: 600;
  color: var(--marka-yazi);
  background: var(--marka);
  border: 0;
  border-radius: var(--yumru-denetim);
  cursor: pointer;
  white-space: nowrap;
}

.bul::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--simdi);
  flex: none;
}

.bul:hover {
  background: var(--marka-koyu);
  color: var(--simdi-yazi);
}

.bul:disabled {
  cursor: progress;
  opacity: 0.75;
}

/* ==========================================================================
   5. Kırıntı yolu ve içerik
   ========================================================================== */

/* Çapa payı burada değil, html kuralında: ikisi birden toplanırdı. */
main {
  display: block;
  padding-top: 1.25rem;
}

.crumbs {
  font-size: var(--t-kucuk);
  color: var(--soluk);
  margin: 0 0 0.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.crumbs a {
  color: var(--soluk);
  text-decoration: none;
}

.crumbs a:hover {
  color: var(--marka);
  text-decoration: underline;
}

.crumbs span + span::before {
  content: '›';
  padding: 0 0.45rem;
  color: var(--cizgi-koyu);
}

/* ==========================================================================
   6. Tipografi
   Tek aile, iki uç. Sıkışık + ağır büyük harf levha sesi; geniş + kalın
   başlık sesi; normal gövde. İkinci bir yazı ailesi indirmenin bedeli
   (ek istek, ek preload) bu genişlik ekseniyle karşılanabiliyordu.
   ========================================================================== */

/* Levha sesi: künye, göz kaşı, bölüm etiketi, durum rozeti. */
.goz,
.gun,
.durum,
.kunye-tek,
.damga-ust {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.goz {
  display: block;
  font-size: var(--t-kucuk);
  color: var(--marka);
  margin: 0 0 0.375rem;
}

.goz.bugun-goz {
  color: var(--simdi-yazi);
  background: var(--simdi);
  border-radius: var(--yumru-kucuk);
  padding: 0.25rem 0.5rem;
  width: max-content;
}

h1 {
  font-size: var(--t-h1);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0 0 0.75rem;
  text-wrap: balance;
}

h2 {
  font-size: var(--t-h2);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 2rem 0 0.75rem;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

h3 {
  font-size: var(--t-h3);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 1.5rem 0 0.375rem;
}

/* Doğrudan cevap: belgenin en üstündeki tek cümle. Modeller ve arama
   sonuçları buradan alıntılıyor, o yüzden görsel olarak da öne çıkıyor. */
.answer {
  font-size: var(--t-orta);
  line-height: 1.45;
  margin: 0 0 1.5rem;
  padding: 0 0 0 1rem;
  border-left: 3px solid var(--marka);
  color: var(--murekkep);
  text-wrap: pretty;
}

p {
  margin: 0 0 1rem;
  text-wrap: pretty;
}

/* Düzyazı ölçüsü yalnızca içerik alanında geçerli. Bu kurallar bir zamanlar
   .wrap'e bağlıydı; alt bilgi de .wrap kullandığı için oradaki listeleri de
   giriyor ve :not() zincirinin özgüllüğü yüzünden ezilemiyordu. */
main p,
main li {
  max-width: 40rem;
}

main ul:not(.chips):not(.list):not(.bars):not(.indeks):not(.kartlar):not(.sehir-kartlar):not(.acik-liste):not(.hafta-cubuk):not(.hafta-izgara) {
  padding-left: 1.125rem;
}

main ul:not(.chips):not(.list):not(.bars):not(.indeks):not(.kartlar):not(.sehir-kartlar):not(.acik-liste):not(.hafta-cubuk):not(.hafta-izgara) li {
  margin-bottom: 0.375rem;
}

.meta {
  font-size: var(--t-meta);
  color: var(--soluk);
  margin: 0;
}

.meta + .meta {
  margin-top: 0.125rem;
}

.tally {
  font-style: normal;
  font-size: var(--t-meta);
  font-weight: 500;
  color: var(--soluk);
}

/* ==========================================================================
   7. Kahraman bölümü ve ana sayfa (ana sayfa)
   Sayfadaki tek koyu blok. İki sütun: solda cümle ve iki giriş yolu
   (arama, konum), sağda haftanın dağılımı. Koyu olması bir süs değil bir
   ayrım — altındaki her şey liste, burası ise sayfanın tezi.

   Renkleri kendi token setinden alıyor (--gece-*): koyu temada bu blok
   AÇILMIYOR, zaten koyu. İki temada da aynı görünmesi doğru olan.
   ========================================================================== */

.hero {
  display: grid;
  gap: 1.75rem;
  margin: 0.5rem 0 1.5rem;
  padding: 1.75rem 1.5rem;
  background: var(--gece);
  color: var(--gece-yazi);
  border-radius: var(--yumru);
}

/* Koyu zeminde gövde bağlantısı marka rengini kullanamaz: lacivert üstüne
   lacivert. Blok içindeki her bağlantı kendi kuralını alıyor. */
.hero a {
  color: var(--gece-yazi);
}

.hero a:hover {
  color: var(--simdi);
}

.hero-kunye {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  font-family: var(--mono);
  font-size: var(--t-mini);
  letter-spacing: 0.08em;
  color: var(--gece-kunye);
}

/* Yeşil nokta "canlı" demek: sayı sabit bir metin değil, o an hesaplandı. */
.hero-nokta {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--gece-nokta);
  flex: none;
}

.hero h1 {
  margin: 0;
  max-width: 16ch;
  font-size: clamp(1.875rem, 1.35rem + 2.6vw, 3rem);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.035em;
}

/* Cümlenin sayıyı taşıyan parçası. <em> çünkü gerçekten vurgu; italik
   değil kehribar — sayfanın "şimdi" rengi. */
.hero h1 em {
  font-style: normal;
  color: var(--simdi);
}

.hero-alt {
  margin: 0.875rem 0 0;
  max-width: 34rem;
  font-size: var(--t-orta);
  color: var(--gece-soluk);
  text-wrap: pretty;
}

/* --- Kahraman araması ---------------------------------------------------- */

.hero-ara {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 1.5rem;
}

/* Taban 10rem, tavan 26rem. Serbest bırakılınca kutu sütunun tamamını
   yutuyor ve "Konumumu paylaş" alt satıra düşüyordu — üç öğe de aynı
   satırda kalmalı, çünkü ikisi aynı sorunun iki cevabı: yaz ya da paylaş. */
.hero-ara input {
  flex: 1 1 10rem;
  max-width: 26rem;
  min-width: 0;
  height: 3.25rem;
  padding: 0 1.125rem;
  font: inherit;
  /* Gövde ölçüsü, --t-orta değil: 19 pikselde "İlçe, mahalle veya pazar adı"
     yer tutucusu kutuya sığmayıp kırpılıyordu. Tasarımın kendi ölçüsü de 16. */
  font-size: var(--t-govde);
  color: var(--murekkep);
  background: var(--kart);
  border: 0;
  border-radius: var(--yumru-denetim);
}

.hero-ara input::placeholder {
  color: var(--soluk);
}

.hero-ara button {
  height: 3.25rem;
  padding: 0 1.375rem;
  font: inherit;
  font-size: var(--t-govde);
  font-weight: 700;
  color: var(--simdi-yazi);
  background: var(--simdi);
  border: 0;
  border-radius: var(--yumru-denetim);
  cursor: pointer;
}

.hero-ara button:hover {
  background: var(--gece-yazi);
}

/* Konum ikincil: aramanın yanında çerçeveli duruyor, çünkü izin isteyen
   bir eylem varsayılan yol olamaz.

   Seçici .hero-ara ile başlıyor: tek sınıf (.hero-konum) yukarıdaki
   ".hero-ara button" kuralını yenemiyor ve düğme kehribar dolguyu miras
   alıp birincil "Ara" düğmesinden ayırt edilemez hâle geliyordu. */
.hero-ara .hero-konum {
  background: transparent;
  color: var(--gece-yazi);
  border: 1px solid var(--gece-cizgi-2);
  font-weight: 600;
}

.hero-ara .hero-konum:hover {
  background: var(--gece-panel);
  color: var(--gece-yazi);
}

.hero-ara .hero-konum:disabled {
  cursor: progress;
  opacity: 0.7;
}

/* Konum hatası sayfada tek yerde söyleniyor, üç düğmenin altında değil
   (bkz. konum.js). Gizliyken yer kaplamıyor. */
.hero-hata {
  margin: 0.75rem 0 0;
  font-size: var(--t-meta);
  color: var(--simdi);
}

.hero-populer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.875rem 0 0;
  max-width: none;
  font-size: var(--t-kucuk);
  color: var(--gece-kunye);
}

.hero-populer a {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--gece-cizgi-2);
  border-radius: var(--yumru-denetim);
  text-decoration: none;
}

.hero-populer a:hover {
  border-color: var(--simdi);
}

/* --- Hafta çubukları ------------------------------------------------------
   Yatay çubuk, dikey değil: gün adları yan yana dizildiğinde 7 etiket dar
   ekranda üst üste biniyordu. Yatayda etiket sabit sütunda duruyor ve
   çubuk kalan alanı alıyor.
   -------------------------------------------------------------------------- */

.hafta-panel {
  padding: 1.25rem 1.375rem;
  background: var(--gece-panel);
  border: 1px solid var(--gece-cizgi);
  border-radius: var(--yumru);
}

.hafta-baslik {
  margin: 0 0 0.5rem;
  font-family: var(--mono);
  font-size: var(--t-mini);
  letter-spacing: 0.1em;
  color: var(--gece-kunye);
}

.hafta-cubuk {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hafta-cubuk li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: none;
  margin-top: 0.6875rem;
}

.hafta-gun,
.hafta-sayi {
  font-family: var(--mono);
  font-size: var(--t-kucuk);
  color: var(--gece-kunye);
}

.hafta-gun {
  width: 2rem;
  flex: none;
}

.hafta-sayi {
  width: 2.25rem;
  flex: none;
  text-align: right;
}

/* Yol her zaman tam genişlikte: dolu kısmın yanındaki boşluk da bilgi —
   "bu gün diğerlerine göre ne kadar sakin" sorusunun cevabı orada. */
.hafta-yol {
  flex: 1;
  height: 0.5rem;
  border-radius: 4px;
  background: var(--gece-cubuk);
  overflow: hidden;
}

.hafta-dolu {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--gece-cubuk-dolu);
}

/* Bugün kehribar: sayfadaki "şimdi" rengiyle aynı. */
.hafta-cubuk .bugun .hafta-gun,
.hafta-cubuk .bugun .hafta-sayi {
  color: var(--simdi);
}

.hafta-cubuk .bugun .hafta-dolu {
  background: var(--simdi);
}

/* Genişlik sınıfla veriliyor: inline style CSP'de kapalı (style-src-attr
   'none'). %5 adımlarla 21 sınıf — controller oranı buna yuvarlıyor. */
.pct-0   { width: 0; }
.pct-5   { width: 5%; }
.pct-10  { width: 10%; }
.pct-15  { width: 15%; }
.pct-20  { width: 20%; }
.pct-25  { width: 25%; }
.pct-30  { width: 30%; }
.pct-35  { width: 35%; }
.pct-40  { width: 40%; }
.pct-45  { width: 45%; }
.pct-50  { width: 50%; }
.pct-55  { width: 55%; }
.pct-60  { width: 60%; }
.pct-65  { width: 65%; }
.pct-70  { width: 70%; }
.pct-75  { width: 75%; }
.pct-80  { width: 80%; }
.pct-85  { width: 85%; }
.pct-90  { width: 90%; }
.pct-95  { width: 95%; }
.pct-100 { width: 100%; }

.hafta-not {
  margin: 1rem 0 0;
  max-width: none;
  font-size: var(--t-mini);
  line-height: 1.45;
  color: var(--gece-zayif);
}

/* --- Konum şeridi ---------------------------------------------------------
   Kehribar zemin: bir uyarı değil bir teklif. Kırmızı olsaydı hata gibi
   okunurdu, nötr olsaydı hiç okunmazdı.
   -------------------------------------------------------------------------- */

.konum-serit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 0.5rem;
  padding: 1rem 1.25rem;
  background: var(--simdi-soluk);
  border: 1px solid var(--simdi-cizgi);
  border-radius: 0.875rem;
}

.konum-soz {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
}

.konum-mark {
  width: 1.375rem;
  height: 1.375rem;
  margin-top: 0.125rem;
  border-radius: 7px;
  background: var(--simdi);
  flex: none;
}

.konum-baslik {
  margin: 0;
  font-size: var(--t-meta);
  font-weight: 700;
  color: var(--murekkep);
}

.konum-alt {
  margin: 0.1875rem 0 0;
  font-size: var(--t-kucuk);
  color: var(--simdi-metin);
}

.konum-eylem {
  display: flex;
  gap: 0.5rem;
  margin: 0;
  max-width: none;
  flex: none;
}

/* --- Bölüm başlığı --------------------------------------------------------
   Başlık ve onun yanındaki ikincil bilgi (sayaç, filtre) tek satırda.
   Dar ekranda alt alta iniyor.
   -------------------------------------------------------------------------- */

.bolum-ust {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-top: 2rem;
}

.bolum-ust h2 {
  margin: 0;
}

.bolum-alt {
  margin: 0;
  max-width: none;
  font-size: var(--t-kucuk);
  color: var(--soluk);
}

/* --- Hap gezinti ----------------------------------------------------------
   Sekme GİBİ görünüyor ama sekme değil: her hap kendi adresi olan gerçek
   bir sayfa. İstemcide durum tutulmuyor — JavaScript kapalıyken de
   çalışması gereken tek şey bağlantı.
   -------------------------------------------------------------------------- */

.pill {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem;
  background: var(--kart-2);
  border: 1px solid var(--cizgi);
  border-radius: var(--yumru-denetim);
}

/* İçteki seçili dilim dış köşeyle eş merkezli: dış yarıçaptan kenarlık ve
   dolgu düşülüyor. Aynı yarıçapı taşısaydı köşede dış çizgiyle iç dolgu
   arasındaki boşluk ortadakinden kalın görünürdü. */
.pill a {
  padding: 0.4rem 0.875rem;
  border-radius: calc(var(--yumru-denetim) - 0.25rem - 1px);
  font-size: var(--t-kucuk);
  font-weight: 600;
  color: var(--soluk);
  text-decoration: none;
  white-space: nowrap;
}

.pill a:hover {
  color: var(--murekkep);
}

.pill a[aria-current='page'] {
  background: var(--marka);
  color: var(--marka-yazi);
}

/* --- Bugün açık olanlar ---------------------------------------------------
   Satır dört parçalı: ad + tür, yer, saat, durum. Geniş ekranda tek satıra
   diziliyor; dar ekranda ad ve yer solda, saat ve durum altta kalıyor.
   Izgara, esnek kutu değil: saat sütunu bütün satırlarda aynı kenardan
   başlasın ki rakamlar dikey hizalansın.
   -------------------------------------------------------------------------- */

.acik-liste {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.acik-liste li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.25rem 1.25rem;
  max-width: none;
  padding: 0.9375rem 1.125rem;
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: 0.875rem;
}

.acik-liste li:hover {
  border-color: var(--marka);
}

.acik-ad {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.625rem;
  min-width: 0;
}

.acik-ad a {
  font-size: var(--t-orta);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--murekkep);
  text-decoration: none;
}

.acik-ad a:hover {
  color: var(--marka-koyu);
}

.acik-yer,
.acik-saat,
.acik-durum,
.acik-yol {
  margin: 0;
  max-width: none;
}

/* Yol tarifi listedeki tek dış bağlantı. Sessiz düğme: satırın kendi
   başlığıyla (kaydın sayfası) yarışmamalı — asıl eylem kaydı açmak,
   harita ikincil. */
.acik-yol {
  margin-top: 0.5rem;
}

.acik-yol .button {
  min-height: 2.25rem;
  padding: 0 0.875rem;
  font-size: var(--t-kucuk);
}

.acik-yer {
  font-size: var(--t-kucuk);
  color: var(--soluk);
}

.acik-saat {
  font-family: var(--mono);
  font-size: var(--t-kucuk);
  color: var(--soluk);
}

.acik-durum {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: var(--t-mini);
  color: var(--soluk);
}

/* "Bu hafta" ızgarası. Aynı kart dilini konuşuyor ama iki sütunlu ve
   daha kısa: yarın için hatırlatma, bugün için karar değil. Canlı durum
   rozeti taşımıyor — o yüzden satır da alçak. */
.hafta-izgara {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.625rem;
}

/* Kart esnek sütun: saat satırı kartın DİBİNE yaslanıyor, böylece adı iki
   satıra taşan kartla tek satırlık kartın saatleri aynı hizada bitiyor. */
.hafta-izgara li {
  display: flex;
  flex-direction: column;
  max-width: none;
  padding: 0.9375rem 1.125rem;
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: 0.875rem;
}

.hafta-izgara li:hover {
  border-color: var(--marka);
}

.hafta-izgara .acik-saat {
  margin-top: auto;
  padding-top: 0.5rem;
}

.acik-tumu {
  margin: 0.875rem 0 0;
  max-width: none;
  font-size: var(--t-meta);
  font-weight: 600;
}

.acik-tumu a {
  color: var(--marka-koyu);
  text-decoration: none;
}

.acik-tumu a:hover {
  text-decoration: underline;
}

/* --- Tür etiketi ----------------------------------------------------------
   Kaydın hangi kategoriden olduğunu söylüyor. Rengi kategoriden geliyor
   (bkz. 9. Kartlar sonundaki .tur-* blokları); tanımsız kategori marka
   rengine düşüyor, kırılmıyor.
   -------------------------------------------------------------------------- */

.tur {
  font-family: var(--mono);
  font-size: var(--t-mini);
  letter-spacing: 0.04em;
  padding: 0.2rem 0.45rem;
  border-radius: var(--yumru-kucuk);
  background: var(--tur);
  color: var(--gece-yazi);
  white-space: nowrap;
}

/* ==========================================================================
   8. Fihrist
   Almanak dili: etiket, nokta bağlacı, sayı. Bağlaç süs değil — gözü
   etikettten sayıya taşıyor ve 81 ile de aynı şekilde ölçekleniyor.
   ========================================================================== */

.indeks {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
}

.indeks li {
  max-width: none;
  border-bottom: 1px solid var(--cizgi);
}

.indeks a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.5rem 0;
  color: var(--murekkep);
  text-decoration: none;
}

.indeks a:hover {
  color: var(--marka);
}

.indeks .ad {
  font-weight: 600;
  flex-shrink: 0;
}

/* Nokta bağlacı: etiketle sayı arasındaki boşluğu dolduruyor. */
.baglac {
  flex: 1 1 auto;
  min-width: 1rem;
  align-self: center;
  height: 1em;
  background-image: radial-gradient(circle at center, var(--cizgi-koyu) 1.1px, transparent 1.3px);
  background-size: 7px 100%;
  background-position: 0 50%;
  opacity: 0.85;
}

.indeks .sayi {
  flex-shrink: 0;
  font-weight: 700;
  color: var(--soluk);
}

.indeks a:hover .sayi {
  color: var(--marka);
}

/* ==========================================================================
   9. Kartlar
   İki tür: kategori kartı (ana sayfada, iki üç tane, geniş ve tek sayılı)
   ve şehir kartı (onlarca, dar ve kategori dökümlü). Aynı kutu dilini
   konuşuyorlar — kenarlık, köşe, üzerine gelince marka rengi — ama farklı
   sorulara cevap verdikleri için ölçüleri ayrı.
   ========================================================================== */

/* --- Kategori kartı ------------------------------------------------------ */

.kartlar {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  display: grid;
  /* auto-fit: boş izler toplanıp alan mevcut kartlara dağıtılıyor, yani
     iki kategori varken satırın sağında boşluk kalmıyor. Kategori sayısı
     arttıkça satır başına kart artıyor, kart genişliği düşüyor. */
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: 0.75rem;
}

.kartlar li {
  max-width: none;
}

/* Esnek sütun: "Tümünü gör" satırı kartın DİBİNE yaslanıyor (margin-top
   auto), böylece açıklaması kısa olan kartla uzun olanın alt kenarı aynı
   hizada bitiyor. Blok düzende bu satır metnin hemen altında kalıyordu ve
   ızgara tırtıklı görünüyordu. */
.kart {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.25rem 1.25rem 1.125rem;
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: 1rem;
  text-decoration: none;
  color: var(--murekkep);
}

.kart:hover {
  border-color: var(--marka);
  background: var(--marka-yumusak);
}

.kart-ust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

/* Kategorinin rengi. Simge değil düz bir kare: dizin onlarca kategoriye
   büyüyor ve her birine ayrı bir simge çizmek (pazar tentesi, kitap...)
   sürdürülebilir değil — renk ölçekleniyor, metafor ölçeklenmiyor. */
.kart-mark {
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 7px;
  background: var(--tur);
  flex: none;
}

.kart-ad {
  display: block;
  margin-top: 1rem;
  font-size: var(--t-h3);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.kart-sayi {
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--t-meta);
  color: var(--marka);
  flex-shrink: 0;
}

.kart-alt {
  display: block;
  margin: 0.3125rem 0 0;
  font-size: var(--t-kucuk);
  line-height: 1.4;
  color: var(--soluk);
}

.kart-yer {
  display: block;
  margin: 0.625rem 0 0;
  font-size: var(--t-kucuk);
  color: var(--soluk);
}

.kart-git {
  display: block;
  margin-top: auto;
  padding-top: 1rem;
  font-size: var(--t-kucuk);
  font-weight: 600;
  color: var(--marka-koyu);
}

/* --- Şehir kartı ---------------------------------------------------------
   Kart bir sicil satırı: ad, altında kaydı olan her kategori için bir rakam.
   Rakam dar ve sağa yaslı bir sütunda duruyor; kart içinde alt alta gelen
   satırlarda 8 ile 542 aynı kenardan okunuyor ve ızgara gözle taranan bir
   cetvel oluyor.

   Fihristteki nokta bağlacı buraya taşınmadı. Bağlaç sitenin imzası ve
   gözü etiketten sayıya taşımak için var; sayfada altmıştan fazla kart
   varken 120 kez tekrarlansaydı imza olmaktan çıkıp desen olurdu.
   -------------------------------------------------------------------------- */

.sehir-kartlar {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  display: grid;
  /* Taban 9.5rem: 360 piksellik telefonda kap 20.25rem'e düşüyor ve iki
     sütun ancak bu ölçüde sığıyor. Tek sütuna inseydi 63 kart bugünkü
     fihristin iki katı uzunlukta bir sayfa yapardı.

     auto-fill, auto-fit değil: auto-fit boş izleri toplayıp alanı mevcut
     kartlara dağıtıyor ve iki şehirli /calisma-salonu sayfasında iki kart
     ekranı yarı yarıya bölüp içi boş duruyordu. Boş iz boş kalsın — kart
     dizinin her yerinde aynı boyda. */
  grid-template-columns: repeat(auto-fill, minmax(min(9.5rem, 100%), 1fr));
  gap: 0.5rem;
}

.sehir-kartlar li {
  max-width: none;
  margin: 0;
}

.sehir-kart {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
  padding: 0.75rem 0.875rem 0.8125rem;
  background: var(--kart);
  border: 1px solid var(--cizgi);
  /* Kategori kartından bir tık daha küçük yarıçap: aynı sayfada duran iki
     kart boyu farkını köşe de söylesin. */
  border-radius: var(--yumru-kucuk);
  color: var(--murekkep);
  text-decoration: none;
}

.sehir-kart:hover {
  border-color: var(--marka);
  background: var(--marka-yumusak);
}

/* Ad marka rengine geçiyor, rakam mürekkepte kalıyor. Global a:hover kuralı
   bunu zaten yapıyor — özgüllüğü (0,1,1) .sehir-kart'ın kendi rengini
   (0,1,0) yeniyor. Niyet burada yazılı olsun ki bir sonraki düzenlemede
   kazayla kaybolmasın. */
.sehir-kart:hover .sehir-ad {
  color: var(--marka-koyu);
}

.sehir-ad {
  font-weight: 700;
  font-size: var(--t-govde);
  line-height: 1.2;
  letter-spacing: -0.01em;
  /* Afyonkarahisar ve Kahramanmaraş dar kartta iki satıra iniyor; hecelenecek
     yeri olmayan illerde de taşma yerine kırılma olsun. */
  overflow-wrap: anywhere;
}

/* Döküm kartın altına yapışıyor: adı iki satıra inen şehirle tek satırlık
   şehrin rakamları aynı hizada dursun. */
.dokum {
  display: flex;
  flex-wrap: wrap;
  gap: 0.125rem 0.875rem;
  margin-top: auto;
}

/* Tek kural iki düzen: kart genişken satırlar yan yana, darken alt alta.
   Kategori sayısı arttıkça kendiliğinden sarıyor. */
.dokum-satir {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  font-size: var(--t-kucuk);
  color: var(--soluk);
}

/* Sabit genişlik hizayı kuran şey; tabular rakam da onu koruyor.
   Renk mürekkep, marka değil: kategori kartındaki mavi rakam sayfada iki
   tane olduğu için vurgu; burada 120 tane olurdu ve vurgu olmaktan çıkardı. */
.dokum-sayi {
  flex-shrink: 0;
  min-width: 2.125rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 1.0625rem;
  line-height: 1.15;
  color: var(--murekkep);
}

.dokum-ad {
  line-height: 1.25;
}

/* Ana sayfada ızgara ilk iki sırayla açılıyor (bkz. js/kisalt.js). Düğme
   kartlara yakın dursun diye ızgaranın alt boşluğu yarıya iniyor. Sayfanın
   sonundaki boşluğu zaten alt bilginin 3.5rem'lik üst boşluğu veriyor. */
[data-kisalt] > .sehir-kartlar {
  margin-bottom: 0.875rem;
}

.kisalt-eylem {
  margin: 0;
  max-width: none;
}

/* Kartlar geniş ekranda nefes alıyor. Alt sınır 12rem: bunun altında
   "çalışma salonu" etiketi iki satıra kırılıyordu. */
@media (min-width: 40rem) {
  .sehir-kartlar {
    grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr));
    gap: 0.625rem;
  }

  .sehir-kart {
    padding: 0.875rem 1rem 0.9375rem;
  }
}

/* --- Kategori renkleri ----------------------------------------------------
   Her kategorinin bir tonu var; kart işareti (.kart-mark) ve tür etiketi
   (.tur) onu okuyor. Tek yerde tanımlı, iki bileşende kullanılıyor.

   Yeni kategori eklemek bu listeye bir satır: yoksa --tur varsayılanı
   (marka laciverti) devreye giriyor ve kategori renksiz ama BOZUK DEĞİL
   görünüyor. Kural bilerek böyle — dizin onlarca dikeye büyürken bir
   kategorinin rengi unutuldu diye ana sayfa kırılmamalı.

   Tonlar birbirinden ayırt edilebilir olmak dışında bir şey iddia etmiyor:
   turuncu pazara, mavi salona ait değil, yalnızca komşusundan farklı.
   -------------------------------------------------------------------------- */

.tur-semt-pazari { --tur: #e8891f; }
.tur-calisma-salonu { --tur: #2f6b8f; }
.tur-nobetci-veteriner { --tur: #7a5aa6; }

/* Koyu temada aynı tonlar kararıyor: etiket yazısı krem olduğu için zemin
   yeterince koyu kalırsa kontrast düşüyor. Bir tık açılıyorlar. */
:root[data-theme='dark'] {
  --tur: var(--marka);
}

:root[data-theme='dark'] .tur-semt-pazari { --tur: #d9822b; }
:root[data-theme='dark'] .tur-calisma-salonu { --tur: #4e8fb5; }
:root[data-theme='dark'] .tur-nobetci-veteriner { --tur: #9678c4; }

/* ==========================================================================
   10. Hafta şeridi
   ========================================================================== */

.week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin: 0 0 1.75rem;
}

.week.zaman {
  grid-template-columns: repeat(3, 1fr);
}

.day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 3.25rem;
  padding: 0.375rem 0.125rem;
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: var(--yumru-kucuk);
  text-decoration: none;
  color: var(--soluk);
  font-size: var(--t-mini);
  line-height: 1.15;
  text-align: center;
}

.day b {
  display: block;
  font-size: var(--t-meta);
  font-weight: 700;
  color: var(--murekkep);
}

.day.empty {
  background: transparent;
  border-style: dashed;
  color: var(--cizgi-koyu);
}

.day.empty b {
  color: var(--cizgi-koyu);
  font-weight: 400;
}

.day.has:hover {
  border-color: var(--marka);
  background: var(--marka-yumusak);
}

.day.has:hover b {
  color: var(--marka);
}

.day.today {
  border-color: var(--simdi);
  background: var(--simdi-soluk);
}

.day.selected {
  background: var(--marka);
  border-color: var(--marka);
  color: var(--marka-yazi);
}

.day.selected b {
  color: var(--marka-yazi);
}

/* ==========================================================================
   11. Liste ve künye
   İMZA. Kaydın zaman kimliği sol sütunda, metnin içinde değil. Çok günlü
   kayıtlarda günler üst üste istifleniyor: "perşembe ve pazar" bilgisi
   cümle okumadan görünüyor. 50 satırlık liste böylece tarife gibi taranıyor.
   Sütun görsel (aria-hidden); aynı bilgi satırda metin olarak da duruyor.
   ========================================================================== */

/* Geniş ekranda kendiliğinden iki sütuna geçiyor: 100 kayıtlık bir listede
   satırları 1100 piksele germektense yan yana koymak hem daha az kaydırma
   hem daha iyi tarama demek. auto-fill sayesinde eşik ayrıca tanımlanmıyor,
   satır 25rem'in altına düşerse tek sütuna iniyor. Kap genişledikçe sütun
   ekleniyor ve satır genişliği 430-570 piksel bandında kalıyor — germek
   yerine bölmek. */
.list {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  /* min(): kap 26rem'den darsa iz de daralsın. Düz minmax(26rem, 1fr)
     mobilde 390 piksellik kapta 416 piksellik iz üretip yatay taşma
     yapıyordu — grid izleri kendi minimumlarının altına inmiyor. */
  grid-template-columns: repeat(auto-fill, minmax(min(25rem, 100%), 1fr));
  gap: 0.5rem;
}

.row {
  position: relative;
  max-width: none;
  display: grid;
  grid-template-columns: var(--kunye-en) 1fr;
  gap: 0.875rem;
  padding: 0.875rem 1rem;
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: var(--yumru);
}

/* Kartın tamamı tıklanabilir: başlıktaki bağlantı bir kaplama yayıyor.
   Ayrı bir sarmalayıcı <a> yerine bu yol seçildi; iç içe bağlantı
   üretmiyor ve ekran okuyucuda tek bir bağlantı olarak duyuruluyor. */
.row h3 a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--yumru);
}

.row:hover {
  border-color: var(--marka);
  background: var(--marka-yumusak);
}

.row:hover h3 a {
  color: var(--marka);
}

/* Satır içindeki diğer etkileşimli öğeler kaplamanın üstünde kalmalı,
   yoksa yönetim ekranındaki "Çözüldü / Reddet" düğmeleri tıklanamaz. */
.row form,
.row .meta a,
.row dd a {
  position: relative;
  z-index: 1;
}

.row.plain {
  grid-template-columns: 1fr;
}

.kunye {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.gun {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding: 0.25rem 0.125rem;
  border-radius: var(--yumru-kucuk);
  background: var(--kart-2);
  border: 1px solid var(--cizgi);
  color: var(--soluk);
  font-size: var(--t-kucuk);
  line-height: 1.05;
}

/* Bugün: tek dolu renk sayfada burada. Altındaki küçük etiket CSS'ten
   geliyor, çünkü sütun zaten aria-hidden — metin karşılığı satırda var. */
.gun.bugun {
  background: var(--simdi);
  border-color: var(--simdi);
  color: var(--simdi-yazi);
}

.gun.bugun::after {
  content: 'bugün';
  display: block;
  margin-top: 1px;
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  opacity: 0.85;
}

/* Künye sütunu sayfanın sıralama eksenini taşır: kategori listesinde gün,
   zaman listesinde kapanış saati, yakınımda listesinde mesafe. Hangi
   sayfada olursan ol, sol sütun o listeyi sıralayan şeyi gösteriyor. */
.vakit,
.mesafe {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding: 0.25rem 0.125rem;
  border-radius: var(--yumru-kucuk);
  background: var(--kart-2);
  border: 1px solid var(--cizgi);
  color: var(--soluk);
  font-weight: 700;
  font-size: var(--t-kucuk);
  line-height: 1.05;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.vakit.acik {
  background: var(--acik-yumusak);
  border-color: var(--acik);
  color: var(--acik);
}

.vakit small,
.mesafe small {
  margin-top: 1px;
  font-weight: 600;
  font-size: 0.5625rem;
  letter-spacing: 0.02em;
  opacity: 0.8;
}

/* En yakın kayıt: listenin cevabı odur. */
.mesafe.enyakin {
  background: var(--simdi);
  border-color: var(--simdi);
  color: var(--simdi-yazi);
}

.row h3 {
  margin: 0 0 0.25rem;
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
}

/* Dokunma hedefi: satır içi başlık bağlantısı 22 pikselde kalıyordu,
   WCAG 2.5.8 en az 24 istiyor. Dikey dolgu satır yüksekliğini bozmadan
   tıklanabilir alanı büyütüyor. */
.row h3 a {
  color: var(--murekkep);
  text-decoration: none;
  padding-block: 0.2rem;
}

.row h3 a:hover {
  color: var(--marka);
  text-decoration: underline;
}

.row p {
  margin: 0;
  max-width: none;
}

/* ==========================================================================
   12. Durum rozetleri
   Üç ayrı şey üç ayrı biçim: açık = dolu yeşil nokta, bilinmiyor = nötr,
   teyit bekliyor = çerçeveli (dolgusuz), çünkü bu bir uyarı değil bir
   eksiklik beyanı.
   ========================================================================== */

.durum {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-style: normal;
  font-size: var(--t-mini);
  letter-spacing: 0.05em;
  padding: 0.2rem 0.45rem;
  border-radius: var(--yumru-kucuk);
  background: var(--kart-2);
  color: var(--soluk);
  white-space: nowrap;
}

.durum.open {
  background: var(--acik-yumusak);
  color: var(--acik);
}

.durum.open::before {
  content: '';
  width: 0.4em;
  height: 0.4em;
  border-radius: 50%;
  background: currentColor;
}

.durum.unknown {
  background: transparent;
  border: 1px solid var(--cizgi);
  color: var(--soluk);
  font-weight: 600;
}

.durum.uzak {
  background: var(--marka-yumusak);
  color: var(--marka);
}

/* Teyit bekleyen kayıt: dolgusuz, kesikli çerçeve. Bilgi eksik, yanlış
   değil — görsel dili de bunu söylemeli. */
.unver {
  display: inline-flex;
  align-items: center;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--t-mini);
  padding: 0.15rem 0.4rem;
  border: 1px dashed var(--cizgi-koyu);
  border-radius: var(--yumru-kucuk);
  color: var(--soluk);
  white-space: nowrap;
}

/* ==========================================================================
   13. Etiketler (chip)
   ========================================================================== */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  margin: 0 0 1.75rem;
  list-style: none;
}

.chips li {
  max-width: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.5rem;
  padding: 0 0.875rem;
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: var(--yumru-denetim);
  text-decoration: none;
  color: var(--murekkep);
  font-size: var(--t-meta);
}

/* Bölüm başlığının içinde duruyor: kendi alt boşluğu yok, hizayı
   .bolum-ust'un gap'i veriyor. */
.chips-suzgec {
  margin: 0;
}

.chip:hover {
  border-color: var(--marka);
  color: var(--marka);
  background: var(--marka-yumusak);
}

.chip i {
  font-style: normal;
  font-weight: 700;
  font-size: var(--t-kucuk);
  color: var(--soluk);
}

.chip:hover i {
  color: var(--marka);
}

.chip.on {
  border-color: var(--marka);
  background: var(--marka);
  color: var(--marka-yazi);
}

.chip.on i {
  color: var(--marka-yazi);
  opacity: 0.75;
}

/* ==========================================================================
   14. Düğmeler
   ========================================================================== */

.actions {
  display: flex;
  gap: 0.625rem;
  flex-wrap: wrap;
  margin: 0 0 1.75rem;
  max-width: none;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 1.125rem;
  background: var(--marka);
  color: var(--marka-yazi);
  text-decoration: none;
  border: 1px solid var(--marka);
  border-radius: var(--yumru-denetim);
  font: inherit;
  font-size: var(--t-meta);
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}

.button:hover {
  background: var(--marka-koyu);
  border-color: var(--marka-koyu);
  color: var(--marka-yazi);
}

.button.quiet {
  background: var(--kart);
  color: var(--marka);
  border-color: var(--cizgi-koyu);
}

.button.quiet:hover {
  background: var(--marka-yumusak);
  border-color: var(--marka);
  color: var(--marka);
}

/* ==========================================================================
   15. Detay sayfası
   ========================================================================== */

.facts {
  margin: 0 0 1.75rem;
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: var(--yumru);
  overflow: hidden;
}

.facts div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.125rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--cizgi);
}

.facts div:last-child {
  border-bottom: 0;
}

.facts dt {
  color: var(--soluk);
  font-size: var(--t-kucuk);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.facts dd {
  margin: 0;
  font-size: var(--t-meta);
}

.map {
  margin: 0 0 1.5rem;
}

/* OSM gömme çerçevesi sabit bir bbox çiziyor: çerçeve genişledikçe
   haritayı büyütmüyor, yanlarına boş bant koyuyor. Genişliği sınırlamak
   çerçeveyi bbox'ın oranına yaklaştırıyor. */
.map iframe {
  display: block;
  width: 100%;
  max-width: 34rem;
  height: 280px;
  border: 1px solid var(--cizgi);
  border-radius: var(--yumru);
  background: var(--kart-2);
}

.map figcaption {
  margin-top: 0.5rem;
}

.sources {
  font-size: var(--t-kucuk);
  color: var(--soluk);
  margin: 1.75rem 0 0;
}

/* Teyit damgası
   Sitenin rakiplerden ayrıştığı tek şey burası: hiçbiri veriyi tarihlemiyor.
   Gri bir dipnot olarak kalırsa kimse görmez; bu yüzden gerçek bir damga
   gibi duruyor. Sayfada bir kez çıkıyor, o yüzden süs değil imza.  */
.damga {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin: 2rem 0 0;
  padding: 0.875rem 1rem;
  border: 1px solid var(--cizgi);
  border-radius: var(--yumru);
  background: var(--kart);
  max-width: none;
}

.damga-mark {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 4.25rem;
  height: 3.25rem;
  border: 2px solid var(--acik);
  border-radius: var(--yumru-kucuk);
  color: var(--acik);
  transform: rotate(-4deg);
}

.damga-ust {
  font-size: 0.5rem;
  line-height: 1;
  letter-spacing: 0.12em;
}

.damga-mark b {
  font-weight: 800;
  font-size: 0.9375rem;
  line-height: 1.1;
  margin-top: 2px;
}

.damga-yok .damga-mark {
  border-style: dashed;
  border-color: var(--cizgi-koyu);
  color: var(--soluk);
}

.damga p {
  margin: 0;
  font-size: var(--t-meta);
  color: var(--soluk);
}

/* ==========================================================================
   16. Bildirim formu
   ========================================================================== */

.report {
  margin-top: 2.5rem;
  padding: 1.25rem;
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: var(--yumru);
}

.report h2 {
  margin: 0 0 0.375rem;
  font-size: var(--t-h3);
}

.report form {
  display: grid;
  gap: 0.25rem;
  max-width: 28rem;
  margin-top: 1rem;
}

.report label {
  font-size: var(--t-kucuk);
  font-weight: 600;
  color: var(--soluk);
  margin-top: 0.75rem;
}

.report select,
.report textarea {
  font: inherit;
  font-size: var(--t-govde);
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--cizgi-koyu);
  border-radius: var(--yumru-denetim);
  background: var(--kagit);
  color: var(--murekkep);
  width: 100%;
}

.report select {
  min-height: 2.75rem;
}

.report button {
  justify-self: start;
  margin-top: 1rem;
}

/* tuzak alan — ekran dışında, hiç gösterilmez, hiç okunmaz */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   17. Bildirimler, uyarılar, boş durumlar
   Boş ekran bir hata değil, bir davet: ne yapılacağını söylüyor.
   ========================================================================== */

.notice,
.flash {
  margin: 0 0 1.5rem;
  padding: 0.875rem 1rem;
  border-radius: var(--yumru);
  border: 1px solid var(--cizgi);
  border-left: 3px solid var(--simdi);
  background: var(--simdi-soluk);
  font-size: var(--t-meta);
  max-width: none;
}

.flash {
  border-left-color: var(--acik);
  background: var(--acik-yumusak);
}

.flash.error {
  border-left-color: var(--uyari);
  background: var(--uyari-yumusak);
}

.empty {
  padding: 1.75rem 1.25rem;
  background: var(--kart);
  border: 1px dashed var(--cizgi-koyu);
  border-radius: var(--yumru);
  color: var(--soluk);
  text-align: center;
  max-width: none;
}

.empty code {
  font-family: var(--mono);
  font-size: 0.875em;
  background: var(--kart-2);
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
}

/* ==========================================================================
   18. Sayfalama
   ========================================================================== */

.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 1.75rem 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--cizgi);
  max-width: none;
}

.pager .meta {
  order: -1;
  width: 100%;
  text-align: center;
}

/* ==========================================================================
   19. Alt bilgi
   Tek satır bağlantı yerine sütunlar: dizin büyüdükçe alt bilgi ikinci
   gezinti katmanı oluyor ve arama motorlarına site yapısını anlatan yer
   burası. Sütunlar kategori ve şehir sayısıyla birlikte uzuyor.
   ========================================================================== */

footer {
  margin-top: 3.5rem;
  padding: 2rem 0 2.5rem;
  border-top: 1px solid var(--cizgi);
  background: var(--kart-2);
  font-size: var(--t-kucuk);
  color: var(--soluk);
}

.alt-ust {
  display: grid;
  gap: 1.75rem;
}

/* 26rem'de cümle iki satıra kırılıyordu; alt bilgi artık tam genişlikte
   olduğu için kırpmaya gerek yok. Üst sınır yalnızca çok geniş ekranda
   satırın okunmaz uzunluğa çıkmasını engelliyor. */
.alt-tanim {
  max-width: 56rem;
}

.alt-tanim .marka-ad {
  display: flex;
  margin: 0 0 0.5rem;
}

.alt-tanim p {
  margin: 0;
  max-width: none;
  font-size: var(--t-kucuk);
  line-height: 1.6;
}

/* Dört sütun tam genişliğe yayılıyor. Marka tanımıyla yan yana
   konulduğunda sütunlar 2x2'ye kırılıp solda büyük bir boşluk kalıyordu. */
.alt-sutunlar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(8rem, 100%), 1fr));
  gap: 1.25rem;
}

/* Sütun başlığı mono ve kehribar: alt bilgideki tek renkli öğe. Bağlantı
   olmadıklarını renk değil biçim söylüyor — mono aile sitede yalnızca
   künye, saat ve etikette kullanılıyor, yani "bu bir başlık, tıklanmaz". */
.alt-baslik {
  display: block;
  margin: 0 0 0.25rem;
  font-family: var(--mono);
  font-size: var(--t-mini);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--marka-koyu);
}

.alt-sutun ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.alt-sutun li {
  max-width: none;
  margin: 0;
}

/* "Hepsi" bir şehir adı değil, listeden çıkış. Üstündeki üçlüyle arasına
   konan boşluk onu dördüncü şehir gibi okunmaktan kurtarıyor. */
.alt-sutun li.alt-hepsi {
  margin-top: 0.375rem;
}

.alt-sutun a {
  display: block;
  padding: 0.4rem 0;
  color: var(--soluk);
  text-decoration: none;
}

.alt-sutun a:hover {
  color: var(--marka);
  text-decoration: underline;
}

footer a {
  color: var(--soluk);
}

/* Künye satırı: dizinin ölçüsü ve ne olduğu. Sütunlardan bir çizgiyle
   ayrılıyor çünkü gezinti değil beyan — sayı büyüdükçe kendini
   güncelliyor, elle yazılmıyor. */
.alt-kunye {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 1.75rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--cizgi);
  max-width: none;
  font-size: var(--t-mini);
  color: var(--soluk);
}

.alt-kunye .tally {
  font-family: var(--mono);
}

/* ==========================================================================
   20. Yönetim
   ========================================================================== */

form.inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.75rem;
}

form.inline .button {
  min-height: 2.25rem;
  font-size: var(--t-kucuk);
  padding: 0 0.75rem;
}

.bars {
  list-style: none;
  margin: 1rem 0 1.75rem;
  padding: 0;
}

.bars li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--cizgi);
  max-width: none;
  font-size: var(--t-meta);
}

.bars b {
  font-weight: 700;
}

.bars .bar {
  display: block;
  height: 4px;
  margin-top: 0.4rem;
  border-radius: 2px;
  background: var(--marka);
  opacity: 0.45;
}

/* Çubuk genişlikleri sınıf olarak: CSP inline style'ı engelliyor. */
.bars .w5 { width: 5%; }
.bars .w10 { width: 10%; }
.bars .w15 { width: 15%; }
.bars .w20 { width: 20%; }
.bars .w25 { width: 25%; }
.bars .w30 { width: 30%; }
.bars .w35 { width: 35%; }
.bars .w40 { width: 40%; }
.bars .w45 { width: 45%; }
.bars .w50 { width: 50%; }
.bars .w55 { width: 55%; }
.bars .w60 { width: 60%; }
.bars .w65 { width: 65%; }
.bars .w70 { width: 70%; }
.bars .w75 { width: 75%; }
.bars .w80 { width: 80%; }
.bars .w85 { width: 85%; }
.bars .w90 { width: 90%; }
.bars .w95 { width: 95%; }
.bars .w100 { width: 100%; }

/* ==========================================================================
   20b. Geniş ekran sınırları
   Kap 74rem'e kadar açılıyor ama her bileşen o genişlikte iyi durmuyor:
   yedi günlük şerit 155 piksellik hücrelere, künye tablosu ve form uçsuz
   bucaksız satırlara dönüşüyordu. Bunlar okuma ölçüsünde kalıyor.
   ========================================================================== */

.week,
.facts,
.report,
.damga,
.empty,
.notice,
.flash {
  max-width: var(--dar);
}

/* ==========================================================================
   21. Erişilebilirlik
   ========================================================================== */

/* Görsel künye sütunu aria-hidden. Aynı bilgi ekran okuyucular ve metinden
   çıkarım yapan araçlar için burada metin olarak duruyor. */
.only-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 3px solid var(--marka);
  outline-offset: 2px;
}

/* Halka köşeyi izliyor; yarıçapı olmayan düz bağlantıda hafif yuvarlansın.
   :where() özgüllüğü sıfırlıyor: tek sınıflı .button, .chip, .tema ve .bul
   bu kurala yeniliyor ve klavyeyle odaklanınca köşeleri 10 pikselden 2'ye
   iniyordu. */
:where(:focus-visible) {
  border-radius: 2px;
}

/* Kaplama yayan bağlantıda odak halkası metnin değil kartın çevresinde
   belirsin — klavyeyle gezerken tıklanabilir alanın neresi olduğunu
   gösteren şey bu. */
.row h3 a:focus-visible {
  outline: none;
}

.row:focus-within {
  outline: 3px solid var(--marka);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* Yüksek kontrast tercihi: dolgular yerine kenarlıklara güven. */
@media (prefers-contrast: more) {
  .row,
  .kart,
  .chip,
  .facts {
    border-color: var(--murekkep);
  }
}

/* ==========================================================================
   22. Kırılma noktaları
   ========================================================================== */

/* Dar ekranda başlık çubuğu kompaktlaşıyor: tam marka + iki kısayol + tema
   düğmesi 480 pikselin altında tek satıra sığmıyor ve yapışkan çubuk üç
   satıra kırılıp 105 piksele çıkıyordu. Markanın ayırt edici olan ilk
   kelimesi kalıyor. */
@media (max-width: 29.99rem) {
  .ust-ic {
    gap: 0.5rem 0.4375rem;
  }

  .ust-sol {
    column-gap: 0.75rem;
  }

  .ust-ic .marka-ad {
    font-size: 1rem;
  }

  .ust-ic .marka-ad span {
    display: none;
  }

  .kisayol {
    gap: 0.25rem 0.75rem;
  }

  .kisayol a {
    font-size: var(--t-kucuk);
  }

}

/* Eşik 64rem'den 52rem'e indi: dördüncü bağlantı ("Veri ve kaynak") kalkınca
   marka + üç bağlantı + arama 832 pikselde taşımadan sığıyor. 52rem'in
   altında başlık zaten sarmalıyor, arama kendi satırına düşüyor ve ilk
   satırda üçüncü bağlantıya yer kalmıyor.

   Düşen, ikincil olan. "Bugün" ve "Şehirler" dizinin iki ekseni (zaman ve
   yer) ve kalıyor; "Kategoriler" alt bilgide her sayfada zaten duruyor. */
@media (max-width: 51.99rem) {
  .kisayol a.ikincil {
    display: none;
  }
}

/* Konum düğmesi yalnızca gerçekten yer olduğunda. İki ayrı gerekçe:
   52rem altında başlık iki satıra kırılıyor ve düğme ÜÇÜNCÜ satırı
   açıyordu (yapışkan çubuk 160 piksele çıkıyordu); 52-80rem arasında ise
   çubuk tek satır ama marka + üç bağlantı + arama + düğme o satıra
   sığmayıp sağdan taşıyordu.

   Kayıp yok: aynı eylem kahraman bölümündeki "Konumumu paylaş"
   düğmesinde, ekranın hemen o kadar aşağısında duruyor. */
@media (max-width: 79.99rem) {
  .bul {
    display: none;
  }
}

/* 360 ve altı: sayfa kenar boşluğu da kısılıyor. Daha geniş telefonlarda
   içeriğin nefes payı korunsun diye bu ayrı tutuldu. */
@media (max-width: 22.5rem) {
  .wrap {
    padding-left: 0.875rem;
    padding-right: 0.875rem;
  }
}

@media (min-width: 30rem) {
  :root {
    --kunye-en: 3.5rem;
  }

  .facts div {
    grid-template-columns: 10rem 1fr;
    gap: 1rem;
    align-items: baseline;
  }

  .pager .meta {
    order: 0;
    width: auto;
  }
}

@media (min-width: 40rem) {
  :root {
    --kunye-en: 3.75rem;
  }

  .wrap {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .marka-ad {
    font-size: 1.1875rem;
  }

  .row {
    padding: 1rem 1.25rem;
  }

  .map iframe {
    height: 340px;
  }

  .alt-ust {
    gap: 2rem;
  }
}

/* Geniş ekranda başlık tek satıra iniyor: yapışkan çubuk 105 pikselden
   67'ye düşüyor. Eşik 52rem: 45rem denendi, 720-768 aralığında marka +
   arama + kısayollar + tema tek satıra sığmayıp yatay taşma yapıyor. */
@media (min-width: 52rem) {
  .ust-ic {
    flex-wrap: nowrap;
    gap: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  /* Otomatik kenar boşluğu esnek kutuda BÜTÜN boş alanı yutuyor: markayı ve
     kısayolları en küçük içerik genişliğine sıkıştırıp kendi içlerinde satır
     kırdırıyordu. Sağa itme işini grup yapıyor, arama yalnızca büyüyor. */
  .marka-ad {
    flex: 0 0 auto;
    flex-wrap: nowrap;
  }

  /* Gezinti markanın hemen yanında: ikisi birlikte "burası neresi, nereye
     gidilir" sorusunu cevaplıyor. Arama ve konum düğmesi karşı kenarda,
     çünkü ikisi de eylem. Boşluk aradaki otomatik kenar boşluğuna gidiyor. */
  .ust-sol {
    flex: 0 0 auto;
    margin-right: auto;
    flex-wrap: nowrap;
  }

  .kisayol {
    flex-wrap: nowrap;
    flex-shrink: 0;
  }

  /* Sabit değil daralabilir genişlik: 832 pikselde marka, üç bağlantı ve
     arama tek satıra ancak sığıyor. Üst sınırı 80rem bloğu geri veriyor. */
  .ara {
    order: 3;
    flex: 0 1 auto;
    width: 17rem;
    /* Alt sınır şart: nowrap'te tek daralabilen öğe bu olduğu için
       1024 pikselde 56 piksele inip yer tutucusu görünmez oluyordu.
       Simge + birkaç karakter en az bu kadar yer istiyor. */
    min-width: 13rem;
  }

  .bul {
    order: 4;
  }

  .tema {
    order: 5;
  }

  html {
    scroll-padding-top: 5.5rem;
  }

  /* Satır üç sütuna açılıyor: solda kimlik (ad, tür, yer), ortada zaman
     (saat, durum), sağda eylem (yol tarifi). Yerleştirme açıkça yazılıyor
     çünkü kaynak sırası mobildeki okuma sırası — orada beş parça alt alta
     iniyor ve ad → yer → saat → durum → yol sırası doğru olan. */
  .acik-liste li {
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
  }

  /* Seçiciler .acik-liste ile başlıyor: aynı parça sınıfları "Bu hafta"
     ızgarasında da kullanılıyor ve oradaki kart bir ızgara değil, düz bir
     kutu. Kapsam verilmediğinde saat oradaki kartta da sağa yaslanıp
     boşlukta asılı kalıyordu. */
  .acik-liste .acik-ad {
    grid-column: 1;
    grid-row: 1;
  }

  .acik-liste .acik-yer {
    grid-column: 1;
    grid-row: 2;
  }

  .acik-liste .acik-saat {
    grid-column: 2;
    grid-row: 1;
    text-align: right;
  }

  .acik-liste .acik-durum {
    grid-column: 2;
    grid-row: 2;
    justify-content: flex-end;
  }

  /* İki satırı da kaplıyor: düğme satırın dikey ortasında duruyor,
     saatle ya da rozetle aynı hizada değil. */
  .acik-liste .acik-yol {
    grid-column: 3;
    grid-row: 1 / span 2;
    margin-top: 0;
  }

  /* Tasarımdaki gibi iki sütun. auto-fit kullanılmıyor: dört kartı 1240
     pikselde üçe bölüp son satırda tek kart bırakıyordu. */
  .hafta-izgara {
    grid-template-columns: 1fr 1fr;
  }
}

/* Geniş ekranda ölçü genişlemiyor: satır uzunluğu okunabilirliğin
   sınırı, ekranın değil. Yalnızca nefes payı artıyor. */
@media (min-width: 64rem) {
  main {
    padding-top: 2rem;
  }

  h2 {
    margin-top: 2.75rem;
  }

}

/* Dar telefonda arama kutusu kendi satırını alıyor, düğmeler altta ikiye
   bölünüyor. Aynı satırda dururken kutuya 190 piksel kalıyor ve
   "İlçe, mahalle veya pazar adı" yer tutucusu kırpılıyordu — yer tutucu
   burada süs değil, ne yazılacağını söyleyen tek şey.

   Eşik 40rem: 34rem denendi, 544-639 aralığında üçü aynı satıra girip
   kutuyu yine 144 piksele düşürüyordu. 640'tan sonra üçü de rahat sığıyor. */
@media (max-width: 39.99rem) {
  .hero-ara input {
    flex: 1 1 100%;
    max-width: none;
  }

  .hero-ara button {
    flex: 1 1 auto;
  }
}

/* Kahraman iki sütuna açılıyor. Sol sütun daha geniş: cümle ve arama
   orada, çubuklar destekleyici.

   Eşik 72rem. 52rem'de denendi: çubuk paneli 240 piksele düşüp gün
   etiketiyle sayı birbirine giriyordu. 64rem de yetmedi — 1024 pikselde sol
   sütun 400 piksele iniyor ve arama kutusunun yer tutucusu ("İlçe, mahalle
   veya pazar adı") kırpılıyordu. Altında kahraman tek sütun: arama tam
   genişlik alıyor, çubuklar cümlenin altına geçiyor. */
@media (min-width: 72rem) {
  .hero {
    grid-template-columns: 1.35fr 1fr;
    align-items: center;
    gap: 2.5rem;
    padding: 2.25rem 1.875rem;
  }
}

/* Geniş ekranda arama tekrar açılıyor: dizinin birincil gezinti aracı ve
   yer varken dar durmasının gerekçesi yok. */
@media (min-width: 80rem) {
  .ara {
    width: 20rem;
  }
}

/* ==========================================================================
   23. Baskı
   Bir pazarın gününü ve adresini yazdırmak gerçek bir kullanım.
   ========================================================================== */

@media print {
  .ust,
  .report,
  .actions,
  .pager,
  .map,
  footer {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .row,
  .facts,
  .damga {
    border-color: #999;
    break-inside: avoid;
  }
}