/* temel.css — belirteçler, sıfırlama, düzen iskeleti
   Renk sistemi tek kaynak: burası. Başka dosyada ham hex YAZILMAZ. */

:root {
  /* --- renk ---
   Yön: GECE LACİVERTİ + MAT ALTIN. Patron referans gösterdi (4 Eylül): koyu
   lacivert zemin, altın vurgu, tam kadraj sinematik fotoğraf, altın ışık.
   Önceki "matbu" (kâğıt/mürekkep/kırmızı) yönü gazete diline kaymıştı;
   projenin ilk yönü de zaten lacivert+altındı (CLAUDE.md).

   VARSAYILAN ARTIK GECE. `:root` gece temayı taşır; gündüz tema
   `[data-tema="acik"]` altında. Referansların tamamı koyu.

   ÖLÇÜLDÜ (araclar/kontrast.py): altın #D4B36A lacivert #0C1526 üstünde
   9.08:1, kart yüzeyinde 8.48:1. Gündüzde altın kâğıt üstünde kaybolur
   (#8A6D11 bile 4.51'de sınırda) — orada vurgu #6E5508 (6.50:1). */

  /* marka (temadan bağımsız) */
  --marka-lacivert: #0C1526;
  --marka-altin:    #D4B36A;
  --marka-kagit:    #F7F5F0;
  --marka-murekkep: #0C1526;

  /* semantik — GECE tema varsayılan */
  color-scheme: dark;
  --zemin:        #0C1526;
  --zemin-derin:  #070D18;   /* alt bilgi, jenerik perdesi */
  --zemin-kat:    #131C2E;   /* kart / yükseltilmiş yüzey */
  --metin:        #F2EDE3;
  --metin-sonuk:  #B8B2A6;
  --metin-silik:  #9A9488;
  --vurgu:        #D4B36A;
  --vurgu-parlak: #E3C77A;
  /* Marka parıltısının ışığı. --vurgu-parlak denendi ve ÇOK ZAYIF
     kaldı: krem metnin (#F2EDE3) üstünde açık altın #E3C77A
     ölçüldüğünde sıcaklığı yalnız 14'ten 26'ya çıkarıyordu,
     gözle seçilmiyordu. Doygun altın bandı görünür kılıyor. */
  --parilti:      var(--vurgu);
  /* Kahraman basligi golgesi: GECEDE fotografin ustunde okunurluk saglar.
     Gunduzde krem zeminde kirli hale yapiyordu (patron bildirdi). */
  --kahraman-golge: rgb(0 0 0 / 0.45);
  --cizgi:        rgb(212 179 106 / 0.18);
  --cizgi-guclu:  rgb(212 179 106 / 0.70);
  --hale:         rgb(212 179 106 / 0.10);
  --hale-yogun:   rgb(212 179 106 / 0.18);
  --isik:         rgb(227 199 122 / 0.22);   /* altın parıltı, radial için */
  --gren-katman:  overlay;
  --gren-siddet:  0.035;
  --perde:        rgb(7 13 24 / 0.86);
  --gorsel-suzgec: saturate(0.9) contrast(1.06);
  --makale-metin: rgb(242 237 227 / 0.86);
  --hata:         #FF9A8F;
  --hata-cizgi:   rgb(255 154 143 / 0.35);
  --golge:        0 18px 50px rgb(0 0 0 / 0.55);
  --golge-yakin:  0 4px 18px rgb(0 0 0 / 0.45);
}

/* GÜNDÜZ tema — kâğıt zemin, lacivert mürekkep, koyu altın vurgu.
   Altın kâğıtta ancak koyultulunca okunur (ölçüldü). */
:root[data-tema="acik"] {
  color-scheme: light;
  --zemin:        #F7F5F0;
  --zemin-derin:  #EBE7DE;
  --zemin-kat:    #FFFFFF;
  --metin:        #0C1526;
  --metin-sonuk:  #3E4658;
  --metin-silik:  #5C6374;
  --vurgu:        #6E5508;
  --vurgu-parlak: #5E4906;
  /* Gündüzde ışık AÇILAMAZ: lacivert metni açmak kontrastı
     düşürür. Onun yerine metin bir an altına döner. */
  --parilti:      var(--vurgu);
  /* Gunduzde zemin acik, golgeye gerek yok; varligi hale uretiyordu. */
  --kahraman-golge: transparent;
  --cizgi:        rgb(12 21 38 / 0.16);
  --cizgi-guclu:  rgb(12 21 38 / 0.85);
  --hale:         rgb(110 85 8 / 0.10);
  --hale-yogun:   rgb(110 85 8 / 0.16);
  --isik:         rgb(212 179 106 / 0.28);
  --gren-katman:  multiply;
  --gren-siddet:  0.026;
  --perde:        rgb(247 245 240 / 0.88);
  --gorsel-suzgec: saturate(0.94) contrast(1.03);
  --makale-metin: rgb(12 21 38 / 0.88);
  --hata:         #8F1810;
  --hata-cizgi:   rgb(143 24 16 / 0.35);
  --golge:        0 16px 40px rgb(12 21 38 / 0.10);
  --golge-yakin:  0 3px 14px rgb(12 21 38 / 0.08);
}

:root {
/* --- tipografi ---
   İKİ aile, her birinin işi belli. Önce üç aile vardı (Bodoni + Inter +
   Lora) ve hiçbiri diğerini taşımıyordu; Bodoni 400 display boyutunda saç
   teli inceliğinde kalıp başlıkları cılızlaştırıyordu.

   Archivo değişken: genişlik ekseni 62–125, ağırlık 400–900. Afiş
   ağırlığı buradan geliyor — ayrı bir "black" dosyası gerekmiyor.
   Newsreader yalnız uzun metinde: haber okumak için çizilmiş serif. */
  /* Ekran serifi: referanslardaki "THE LIGHT OF TOMORROW" dili. Cinzel büyük
     harf için çizilmiş; ağır grotesk afiş ayarları (800 / %118) ona uymaz,
     aşağıdaki afiş belirteçleri buna göre değişti. */
  --yazi-ekran:  "Cinzel", "Cormorant Garamond", Georgia, serif;
  --yazi-baslik: "Cinzel", "Cormorant Garamond", Georgia, serif;
  --yazi-govde:  "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --yazi-makale: "Newsreader", Georgia, "Times New Roman", serif;

  /* Akışkan ölçek — 360px ile 1600px arasında yumuşar.
     Afiş yönü gövde ile başlık arasında BÜYÜK bir sıçrama ister: eski
     ölçekte 2xl/s oranı 4,2 idi ve başlıklar gövdenin biraz büyüğü gibi
     duruyordu. Alt uç sabit tutulup üst uç açıldı. */
  --ol-3xs: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --ol-2xs: clamp(0.80rem, 0.77rem + 0.14vw, 0.88rem);
  --ol-xs:  clamp(0.88rem, 0.85rem + 0.16vw, 0.97rem);
  --ol-s:   clamp(1.00rem, 0.96rem + 0.20vw, 1.10rem);
  --ol-m:   clamp(1.15rem, 1.08rem + 0.32vw, 1.35rem);
  --ol-l:   clamp(1.50rem, 1.32rem + 0.80vw, 2.10rem);
  --ol-xl:  clamp(2.10rem, 1.65rem + 2.00vw, 3.60rem);
  --ol-2xl: clamp(2.90rem, 1.95rem + 4.20vw, 6.20rem);
  --ol-3xl: clamp(3.80rem, 2.10rem + 7.60vw, 9.60rem);
  --ol-dev: clamp(4.60rem, 1.40rem + 14.0vw, 16.0rem);

  /* --- tipografik duruş ---
     Afiş başlığı: ağır, geniş, sıkı satır arası, hafif negatif harf arası.
     Değişken eksen olduğu için ayrı dosya inmiyor. */
  --agirlik-afis: 600;      /* Cinzel: 400-700; 800 yok */
  --genislik-afis: 100%;    /* genişlik ekseni yok */
  --satir-afis: 1.02;       /* serif büyük harf sıkı satırda birbirine girer */
  --harf-afis: 0.02em;      /* büyük harf serifte hafif açık izleme */
  --satir-govde: 1.62;

  /* --- boşluk --- */
  --bos-1: 0.25rem;  --bos-2: 0.5rem;   --bos-3: 0.75rem;
  --bos-4: 1rem;     --bos-5: 1.5rem;   --bos-6: 2rem;
  --bos-7: 3rem;     --bos-8: 4rem;     --bos-9: 6rem;
  --bos-10: 8rem;    --bos-11: 12rem;

  /* Gazete yogunlugu: 11rem ust + 11rem alt = bolumler arasi 352px olu
     alan uretiyordu. Matbu duzen daha sik dizilir. */
  --bolum-bos: clamp(3.5rem, 2.2rem + 4.2vw, 7rem);

  /* --- düzen --- */
  --en-dar:  42rem;
  --en-orta: 62rem;
  --en-genis: 84rem;
  --kenar: clamp(1.25rem, 0.5rem + 3.2vw, 4.5rem);

  /* --- diğer --- */
  /* Matbu dilde yuvarlatma yok: kağıt kesilir, köşe keskindir. */
  --kose: 0;
  --kose-yumusak: 0;
  --golge: 0 18px 50px rgb(0 0 0 / 0.45);
  --golge-yakin: 0 4px 18px rgb(0 0 0 / 0.35);
  --gecis: 380ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --gecis-hizli: 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  color-scheme: light;
}

body {
  margin: 0;
  transition: background-color var(--gecis), color var(--gecis);
  background: var(--zemin);
  color: var(--metin);
  font-family: var(--yazi-govde);
  font-size: var(--ol-s);
  line-height: var(--satir-govde);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, video, svg { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

button, input, textarea, select { font: inherit; color: inherit; }

:where(h1, h2, h3, h4, p, figure, blockquote, ul, ol) { margin: 0; }

ul, ol { padding: 0; list-style: none; }

/* --- odak: klavye kullanıcısı görmeli, fare kullanıcısı görmemeli --- */
:focus-visible {
  outline: 2px solid var(--vurgu);
  outline-offset: 3px;
}

/* --- düzen yardımcıları --- */
.kap {
  width: 100%;
  max-width: var(--en-genis);
  margin-inline: auto;
  padding-inline: var(--kenar);
}
.kap-orta { max-width: var(--en-orta); }
.kap-dar  { max-width: var(--en-dar); }

.bolum { padding-block: var(--bolum-bos); }

/* Bos kalan bolumler JS ile hidden isaretlenir; hicbir sinif bunu ezmesin. */
[hidden] { display: none !important; }

.gizli-gorsel {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* içeriğe atla — klavye ve ekran okuyucu için */
.atla {
  position: absolute; left: var(--kenar); top: -100px; z-index: 999;
  background: var(--vurgu); color: var(--zemin-derin);
  padding: var(--bos-3) var(--bos-5); font-weight: 600;
  transition: top var(--gecis-hizli);
}
.atla:focus { top: var(--bos-4); }

/* --- hareket duyarlılığı: kullanıcı istemiyorsa animasyon yok --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Yalnız ekran okuyucuya görünen metin (rozetteki "ziyaret" gibi birim adları). */
.gizli-metin { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- sayfalar arası geçiş ----------
   Tarayıcının kendi belge-arası View Transitions özelliği. Kütüphane yok,
   JS yok, tek at-kuralı — Kural 5 (derleme yok) ve Kural 6 (giriş perdesi
   ağdan bir şey beklemez) ile uyumlu. Desteklemeyen tarayıcıda hiçbir şey
   olmaz: sayfa eskisi gibi yüklenir, bozulan bir şey kalmaz. */
@view-transition { navigation: auto; }

/* Başlık taşıması: her sayfanın h1'i aynı adı taşıdığı için tarayıcı
   ikisini EŞLEŞTİRİR ve birini diğerine dönüştürür. Ayrı ayrı bağlantı
   eşlemesi gerekmiyor. Üst şerit ve alt bilgi yerinde kalır. */
/* Ad BELGEDE TEKİL olmak zorunda; iki öğe aynı adı taşırsa tarayıcı
   geçişi tamamen iptal eder. Ölçüldü: `.marka` hem üst bilgide hem alt
   bilgide, `.baslik-1` ise ana sayfada hem h1'de hem çağrı bölümünün
   h2'sinde geçiyordu. Seçiciler bu yüzden dar. */
h1.baslik-1, .kahraman-ad { view-transition-name: sayfa-basligi; }
.ust { view-transition-name: ust-serit; }
.alt { view-transition-name: alt-serit; }
.ust .marka { view-transition-name: kunye; }

::view-transition-group(sayfa-basligi) {
  animation-duration: 520ms;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Şerit ve künye taşınır ama içerikleri erimez; yerinde duruyor izlenimi
   ancak böyle korunuyor. */
::view-transition-old(ust-serit),
::view-transition-new(ust-serit),
::view-transition-old(alt-serit),
::view-transition-new(alt-serit),
::view-transition-old(kunye),
::view-transition-new(kunye) {
  animation: none;
  mix-blend-mode: normal;
}

/* Sayfa gövdesi sakin bir çapraz geçişle değişir. */
::view-transition-old(root) {
  animation: 220ms cubic-bezier(0.4, 0, 1, 1) both cikis-sol;
}
::view-transition-new(root) {
  animation: 320ms cubic-bezier(0, 0, 0.2, 1) 60ms both giris-sag;
}
@keyframes cikis-sol { to { opacity: 0; } }
@keyframes giris-sag { from { opacity: 0; } }

/* Hareket duyarlılığı: geçiş tamamen kalkar, sayfa anında değişir. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}