/* milanbahishaberi.com — "Skor Masası" kompozisyonu.
   Harici font yalnız Google Fonts (Roboto / Roboto Condensed); başka CDN yok. */

:root{
  --zemin:#0d0f13; --yuzey:#161a20; --yuzey2:#1d222a; --yuzey3:#242a34;
  --metin:#eef1f5; --soluk:#98a2b0; --cizgi:#272d37;
  /* ACCENT İKİYE BÖLÜNDÜ. Tek kırmızı hem dolgu hem METİN olarak kullanılıyordu ve
     koyu temada (varsayılan) küçük metinde WCAG AA'yı geçmiyordu — ölçüldü:
     #e03b48 / yüzey = 4,06 · / zemin = 4,47 · beyaz / #e03b48 = 4,30 (eşik 4,5;
     yazılar 10,5-11px olduğu için "büyük metin" istisnası yok). Üstelik hata tam da
     sitenin var oluş sebebi olan bilgideydi: "maç hangi kanalda" rozeti.
     --kirmizi       : dekoratif (kenarlık, vurgu çizgisi, hover)
     --kirmizi-metin : metin olarak okunacak kırmızı
     --kirmizi-dolgu : üzerine BEYAZ metin gelen zemin */
  --kirmizi:#e03b48; --kirmizi-metin:#ff6b76; --kirmizi-dolgu:#b81a28;
  --yesil:#2bb673; --mavi:#5b9cff;
  --cond:'Roboto Condensed',ui-sans-serif,system-ui,sans-serif;
  --sans:'Roboto',ui-sans-serif,system-ui,sans-serif;
  --olcu:68ch;
  /* Yapışkan başlığın yüksekliği. scroll-padding-top bunu okuyor; başlığı iki satıra
     çıkaran her kırılım/tema bu değeri de GÜNCELLEMEK zorunda, yoksa atlama bağlantısı
     hedefi başlığın ardında bırakır. */
  --ust-yukseklik:59px;
}
@media (prefers-color-scheme:light){
  :root{
    --zemin:#f3f5f8; --yuzey:#ffffff; --yuzey2:#eef1f5; --yuzey3:#e6eaf0;
    --metin:#11151b; --soluk:#5a6472; --cizgi:#dde2e9;
    /* Aydınlık temada aynı kırmızı zaten geçiyor (beyaz/#c11f2c = 6,00;
       #c11f2c/#eef1f5 = 5,30), o yüzden üç token da aynı değere işaret ediyor. */
    --kirmizi:#c11f2c; --kirmizi-metin:#c11f2c; --kirmizi-dolgu:#c11f2c;
    --yesil:#0f7a45; --mavi:#1f5fd0;
  }
}

*{box-sizing:border-box}
/* scroll-padding-top ŞART. .ust yapışkan (position:sticky) ve "İçeriğe atla" bağlantısı
   #icerik'e götürüyor; hedef, başlığın ARDINDA kalıyordu — yani WCAG 2.4.1'in istediği
   baypas mekanizması fiilen çalışmıyordu. Ölçüldü: mobilde başlık 105px, atlamadan sonra
   main'in ilk 105px'i örtülü kalıyor ve ilk görünür şey bölüm başlığı oluyordu.
   Değer sabit değil: masaüstünde başlık 58px, mobilde iki satıra çıkıyor. */
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--ust-yukseklik, 62px) + 8px)}
body{margin:0;background:var(--zemin);color:var(--metin);font-family:var(--sans);font-size:16px;line-height:1.55}
a{color:inherit;text-decoration:none;cursor:pointer}
a:focus-visible{outline:3px solid var(--mavi);outline-offset:3px;border-radius:6px}
img{display:block;max-width:100%;height:auto}
.kap{max-width:1320px;margin:0 auto;padding:0 20px}
.atla{position:absolute;left:-9999px}
.atla:focus{left:10px;top:10px;background:var(--yuzey);padding:9px 14px;z-index:99;border:2px solid var(--mavi)}

/* ── Üst bar ─────────────────────────────────────────────────────────────── */
.ust{background:var(--yuzey);border-bottom:1px solid var(--cizgi);position:sticky;top:0;z-index:30}
.ust .kap{display:flex;align-items:center;gap:24px;height:58px}
.logo{font-family:var(--cond);font-weight:700;font-size:21px;text-transform:uppercase;white-space:nowrap}
.logo .v{color:var(--kirmizi)}
.nav{display:flex;gap:19px;font-size:14px;font-weight:500;overflow-x:auto}
.nav a{color:var(--soluk);padding:5px 0;border-bottom:2px solid transparent;white-space:nowrap;transition:color .2s ease,border-color .2s ease}
.nav a:hover,.nav a[aria-current]{color:var(--metin);border-color:var(--kirmizi)}

/* ── Maç şeridi ──────────────────────────────────────────────────────────── */
.serit{background:var(--yuzey2);border-bottom:1px solid var(--cizgi)}
.serit-ic{display:flex;overflow-x:auto;padding:12px 0;scroll-snap-type:x proximity}
.gun-grup{display:flex;align-items:stretch;gap:9px;padding-right:18px;margin-right:18px;border-right:1px solid var(--cizgi)}
.gun-grup:last-child{border-right:0;margin-right:0;padding-right:0}
.gun-etiket{
  flex:0 0 auto;display:flex;align-items:center;
  font-family:var(--cond);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--soluk);writing-mode:vertical-rl;transform:rotate(180deg);
}
.gun-etiket.bugun{color:var(--kirmizi-metin)}
.mac-kart{
  flex:0 0 auto;min-width:198px;background:var(--yuzey);border:1px solid var(--cizgi);
  border-radius:9px;padding:10px 12px;scroll-snap-align:start;display:block;
  transition:border-color .2s ease,transform .2s ease;
}
.mac-kart:hover{border-color:var(--kirmizi);transform:translateY(-2px)}
.mac-ust{display:flex;justify-content:space-between;align-items:center;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--soluk);margin-bottom:7px}
.mac-takim{display:block;font-family:var(--cond);font-size:16.5px;font-weight:600;line-height:1.25}
.mac-alt{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:12px}
.kanal{background:var(--kirmizi-dolgu);color:#fff;font-weight:700;padding:2px 7px;border-radius:4px;letter-spacing:.04em;font-size:10.5px}
.saat{color:var(--soluk);font-variant-numeric:tabular-nums;font-weight:500}
.canli{display:inline-flex;align-items:center;gap:5px;color:var(--yesil);font-weight:700;font-size:10.5px;letter-spacing:.08em}
.canli::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--yesil)}
.skor{font-family:var(--cond);font-size:16.5px;font-weight:700;font-variant-numeric:tabular-nums}

/* ── Yayın rehberi bandı ─────────────────────────────────────────────────── */
.band{background:var(--yuzey3);border-bottom:1px solid var(--cizgi)}
.band .kap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 20px;flex-wrap:wrap}
.band p{margin:0;font-size:15px}
.band .alt-not{color:var(--soluk);font-size:13.5px}
.band a{display:inline-flex;align-items:center;gap:7px;background:var(--metin);color:var(--zemin);
  font-weight:600;font-size:14px;padding:9px 15px;border-radius:999px;white-space:nowrap;transition:opacity .2s ease}
.band a:hover{opacity:.85}
.band svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4}

/* ── Gövde ızgarası ──────────────────────────────────────────────────────── */
/* İki kolonlu ızgara ARTIK <main>'de DEĞİL: layout her sayfaya basıyordu ve yalnız
   ana sayfa iki kolona göre yazılmıştı. Sonuç masaüstünde şuydu — kategori sayfasında
   H1 solda, spot sağ raya; yazı sayfasında "İlgili" bölümü metnin altında değil sağ
   kolonda. 1040px altında ızgara tek kolona düştüğü için mobilde hiç görünmüyordu.
   Artık ızgarayı İSTEYEN görünüm kendi sarmalayıcısına koyuyor (bkz. views/home.php). */
/* padding-BLOCK, kısayol DEĞİL. <main class="kap icerik-alani"> iki sınıfı birden
   taşıyor; `padding:26px 0 46px` kısayolu .kap'ın `padding:0 20px` yatay dolgusunu da
   sıfırlıyordu (aynı özgüllük, dosyada sonra geliyor). Masaüstünde bu görünmüyor çünkü
   .kap'ın max-width + margin:auto'su zaten kenar boşluğu bırakıyor; MOBİLDE ise o pay
   yok ve bütün içerik ekranın soluna YAPIŞIYORDU — ölçüldü: 390px'te .bolum-bas
   sol kenarı 0px, oysa maç şeridi 20px, yayın bandı 16px'ten başlıyor. Üç farklı
   sol kenar, tek ekranda. */
.icerik-alani{padding-block:26px 46px}
/* Ekranda gizli, ekran okuyucuda ve arama motorunda görünür. Başlık hiyerarşisindeki
   boşlukları görsel tasarımı bozmadan doldurmak için — display:none KULLANILMAZ, o
   içeriği erişilebilirlik ağacından da siler. */
.gorunmez{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.govde{display:grid;grid-template-columns:1fr 322px;gap:30px}
.bolum-bas{display:flex;align-items:center;justify-content:space-between;margin:0 0 14px}
.bolum-bas h2{font-family:var(--cond);font-size:14px;letter-spacing:.15em;text-transform:uppercase;margin:0;color:var(--soluk)}
.bolum-bas a{font-size:13px;color:var(--mavi)}

/* ── Manşet (görselsiz de tam çalışır) ───────────────────────────────────── */
.lead{background:var(--yuzey);border:1px solid var(--cizgi);border-radius:14px;overflow:hidden;
  margin-bottom:26px;display:grid;grid-template-columns:1fr}
.lead.gorselli{grid-template-columns:1.05fr .95fr}
.lead .gorsel{background:var(--yuzey2)}
.lead .gorsel img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10}
.lead .ic{padding:24px 26px}
.rozet{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--kirmizi-metin);margin-bottom:11px}
.lead h3{font-family:var(--cond);font-size:clamp(26px,3.3vw,38px);line-height:1.12;margin:0 0 12px;font-weight:700}
.lead h3 a{transition:color .2s ease}
.lead h3 a:hover{color:var(--kirmizi-metin)}
.lead .spot{color:var(--soluk);margin:0 0 18px;font-size:16.5px;max-width:58ch}
.kunye{display:flex;align-items:center;gap:11px;flex-wrap:wrap;font-size:13.5px;color:var(--soluk);
  border-top:1px solid var(--cizgi);padding-top:13px}
.av{width:34px;height:34px;border-radius:50%;background:var(--yuzey2);border:1px solid var(--cizgi);flex:0 0 auto}
.kunye .yzr{color:var(--metin);font-weight:600}
.kunye time{font-variant-numeric:tabular-nums}
.nokta{width:3px;height:3px;border-radius:50%;background:var(--soluk);display:inline-block}

/* ── Haber listesi (thumbnail yok) ───────────────────────────────────────── */
.liste{display:flex;flex-direction:column;background:var(--yuzey);border:1px solid var(--cizgi);border-radius:14px;overflow:hidden}
.satir{display:grid;grid-template-columns:96px 1fr auto;gap:16px;align-items:baseline;
  padding:16px 20px;border-bottom:1px solid var(--cizgi);transition:background .18s ease}
.satir:last-child{border-bottom:0}
.satir:hover{background:var(--yuzey2)}
.satir .kat{font-family:var(--cond);font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--kirmizi-metin)}
/* Baslik seviyesi h4'ten h3'e cekildi (h2 bolum basligindan sonra seviye atlamasin).
   Bicim kurallari da tasindi: kalirsa her liste satiri varsayilan h3 olarak render edilir. */
.satir h3{font-family:var(--cond);font-size:20px;line-height:1.25;margin:0 0 5px;font-weight:600}
.satir h3 a{transition:color .2s ease}
.satir:hover h3 a{color:var(--kirmizi-metin)}
.satir .meta{font-size:12.5px;color:var(--soluk);margin:0}
.satir .sag{font-size:12.5px;color:var(--soluk);white-space:nowrap;font-variant-numeric:tabular-nums}
.bos{color:var(--soluk)}

/* ── Sağ ray ─────────────────────────────────────────────────────────────── */
.ray section{background:var(--yuzey);border:1px solid var(--cizgi);border-radius:14px;padding:16px 18px;margin-bottom:16px}
.ray h2{font-family:var(--cond);font-size:12.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--soluk);margin:0 0 13px}
.dosya a{display:block;padding:12px 0;border-bottom:1px solid var(--cizgi);transition:color .2s ease}
.dosya a:last-child{border-bottom:0}
.dosya a:hover{color:var(--kirmizi-metin)}
.dosya .ne{display:block;font-family:var(--cond);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--soluk);font-weight:700;margin-bottom:4px}
.dosya .b{font-family:var(--cond);font-size:17.5px;line-height:1.28;font-weight:600}
/* .ray İLE KAPSAMLANMIŞ. Çıplak `.yazar` iki AYRI bağlamı birden vuruyordu:
   home.php:119'daki sağ ray yazar listesi (<a class="yazar">) ve article.php:49'daki
   künye satırı (<span class="yazar">). Kural liste için yazılmıştı; künyeye
   uygulanınca display:flex yazar adını ve unvanını yan yana diziyor (oysa unvan alt
   satıra tasarlanmış) ve künyenin ortasına sahte bir yatay çizgi çiziyordu —
   `.yazar:last-child{border-bottom:0}` da kurtarmıyor, çünkü span son çocuk değil:
   ardından <time> ve okuma süresi geliyor. */
.ray .yazar{display:flex;gap:11px;align-items:center;padding:9px 0;border-bottom:1px solid var(--cizgi)}
.ray .yazar:last-child{border-bottom:0}
.ray .yazar b{display:block;font-size:14.5px}
.ray .yazar span span{font-size:12.5px;color:var(--soluk)}

/* ── Sayfa başlıkları (kategori / yazar / 404) ───────────────────────────── */
.sayfa-baslik{font-family:var(--cond);font-size:clamp(26px,4vw,38px);line-height:1.14;margin:4px 0 8px}
.sayfa-spot{color:var(--soluk);margin:0 0 22px;max-width:var(--olcu)}
.kirinti{font-size:13px;color:var(--soluk);margin:0 0 12px}

/* ── Haber sayfası ───────────────────────────────────────────────────────── */
/* margin-inline:auto ŞART. 68ch okuma ölçüsü metin için doğru, ama .kap 1320px:
   ortalanmadan masaüstünde makale sola yaslanıyor ve sağda ~700px ölü alan kalıyordu.
   Yazı sayfasında yan ray YOK (ilgili yazılar makalenin ALTINDA), yani o boşluğu
   dolduracak bir şey de yok. */
.haber{max-width:var(--olcu);margin-inline:auto;background:var(--yuzey);border:1px solid var(--cizgi);border-radius:14px;padding:26px 28px}
.haber h1{font-family:var(--cond);font-size:clamp(28px,4.4vw,42px);line-height:1.12;margin:6px 0 12px;font-weight:700}
.spot{font-size:18px;color:var(--soluk);margin:0 0 16px}
.kunye-satir{display:flex;align-items:center;gap:11px;flex-wrap:wrap;font-size:13.5px;color:var(--soluk);
  border-top:1px solid var(--cizgi);border-bottom:1px solid var(--cizgi);padding:13px 0;margin-bottom:22px}
.yazar-foto{border-radius:50%}
.kunye-satir .yazar a{color:var(--metin);font-weight:600}
.yazar-unvan{display:block;font-size:12.5px}
.kapak{margin:0 0 22px}
.kapak img{border-radius:10px;width:100%}
.kapak figcaption{font-size:12.5px;color:var(--soluk);padding-top:7px}
.yazi-govde p{margin:0 0 18px}
.yazi-govde h2{font-family:var(--cond);font-size:25px;line-height:1.25;margin:30px 0 12px}
.yazi-govde h3{font-family:var(--cond);font-size:21px;margin:24px 0 10px}
.yazi-govde ul,.yazi-govde ol{margin:0 0 18px;padding-left:22px}
.yazi-govde li{margin:0 0 8px}
.yazi-govde blockquote{margin:0 0 18px;padding:2px 0 2px 16px;border-left:3px solid var(--kirmizi);color:var(--soluk)}
.kaynak,.uretim-notu{font-size:13.5px;color:var(--soluk);border-top:1px solid var(--cizgi);padding-top:14px}
.uretim-notu{background:var(--yuzey2);border:1px solid var(--cizgi);padding:12px 14px;border-radius:9px}
.etiketler{list-style:none;display:flex;gap:8px;flex-wrap:wrap;padding:0;margin:20px 0}
.etiketler a{display:inline-block;font-size:12.5px;padding:4px 11px;border:1px solid var(--cizgi);border-radius:999px;color:var(--soluk)}
.etiketler a:hover{border-color:var(--kirmizi);color:var(--kirmizi-metin)}
.yazar-kutu{background:var(--yuzey2);border:1px solid var(--cizgi);border-radius:10px;padding:16px 18px;margin:26px 0 0}
.yazar-kutu h2{font-family:var(--cond);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--soluk);margin:0 0 8px}
.yazar-kutu p{margin:0}

/* İlgili haberler */
.ilgili{max-width:var(--olcu);margin:30px auto 0}
.ilgili h2{font-family:var(--cond);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--soluk);margin:0 0 16px}
.kart-liste{list-style:none;padding:0;margin:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.kart{background:var(--yuzey);border:1px solid var(--cizgi);border-radius:12px;padding:14px 16px;transition:border-color .2s ease}
.kart:hover{border-color:var(--kirmizi)}
.kart img{border-radius:8px;aspect-ratio:16/9;object-fit:cover;width:100%;margin-bottom:10px}
.kart h3{font-family:var(--cond);font-size:18px;line-height:1.28;margin:0 0 6px;font-weight:600}
.kart time{font-size:12.5px;color:var(--soluk)}

/* ── Sayfalama ───────────────────────────────────────────────────────────── */
.sayfalama{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:26px 0 0;padding-top:18px;border-top:1px solid var(--cizgi)}
.sayfa-bilgi{font-size:13.5px;color:var(--soluk)}
.sayfalama a{font-weight:600;color:var(--mavi)}

/* ── Yazar profili ───────────────────────────────────────────────────────── */
.yazar-profil{display:flex;gap:18px;align-items:flex-start;margin:4px 0 24px;flex-wrap:wrap}
.yazar-foto-buyuk{border-radius:50%}
.yazar-profil h1{font-family:var(--cond);margin:0 0 4px;font-size:30px}
.yazar-bio{margin:8px 0;max-width:var(--olcu)}
.yazar-baglanti{display:flex;gap:14px;font-size:14px;margin:8px 0;flex-wrap:wrap}

/* ── Yayın ilkeleri (kurumsal imza sayfası) ───────────────────────────────
   HİÇ BİÇİMLENMEMİŞTİ: views/author.php bu bloğu basıyor ama ne burada ne bir yön
   dosyasında kuralı vardı — tarayıcı varsayılanı devreye giriyordu. Ölçüldü: h2
   25,5px/700 (sayfanın kendi başlık ölçüsü 13px), ul 40px sol dolgu ve disc madde
   imleri, li sol kenarı 60px iken sayfadaki her şey 20px'te. Yani sayfada tek başına
   yeni bir hiza ve yeni bir tipografi açılıyordu.
   İçerik önemsiz değil: bu blok yayının E-E-A-T beyanı — nasıl çalıştığını anlatıyor. */
.yayin-ilkeleri{background:var(--yuzey2);border:1px solid var(--cizgi);border-radius:10px;
  padding:18px 20px;margin:22px 0 0;max-width:var(--olcu)}
.yayin-ilkeleri h2{font-family:var(--cond);font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--soluk);margin:0 0 10px}
.yayin-ilkeleri p{margin:0 0 12px}
.checklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.checklist li{position:relative;padding-left:22px;font-size:15px}
/* İşaretçi CSS ile çiziliyor: emoji ya da özel karakter, yazı tipi düşerse kaybolur
   ya da başka bir şeye dönüşür. Renk TEK BAŞINA anlam taşımıyor — biçim de farklı. */
.checklist li::before{content:"";position:absolute;left:0;top:.55em;
  width:9px;height:2px;background:var(--kirmizi);border-radius:1px}
.yazar-sayi{font-size:13.5px;color:var(--soluk);margin:0}

/* ── Alt ─────────────────────────────────────────────────────────────────── */
.alt{border-top:1px solid var(--cizgi);background:var(--yuzey);padding:22px 0 42px;color:var(--soluk);font-size:13.5px}
.alt .kap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
.alt-menu{display:flex;gap:16px;flex-wrap:wrap}
.alt-menu a:hover{color:var(--kirmizi-metin)}

@media (max-width:1040px){
  .govde{grid-template-columns:1fr}
  .lead.gorselli{grid-template-columns:1fr}
}
@media (max-width:620px){
  .satir{grid-template-columns:1fr;gap:5px}
  .satir .sag{grid-row:3}
  .gun-etiket{writing-mode:horizontal-tb;transform:none;padding:0 0 4px}
  .gun-grup{flex-direction:column;align-items:flex-start}
  .haber{padding:20px 18px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ── Yazı gövdesindeki linkler ─────────────────────────────────────────────
   Global kural `a{color:inherit;text-decoration:none}` diyor ve gövde için istisna
   YOKTU: haberin içindeki iç linkler ve kaynak atıfları çevre metinden hiçbir işaretle
   ayrılmıyordu — tıklanabilir oldukları görünmüyordu. İç linkleme ve kaynak atfı bu
   sitenin iki stratejik ekseni; görünmeyen link ikisini de sessizce öldürüyor.
   Renk TEK BAŞINA yeterli değil (renk körlüğü), o yüzden alt çizgi de var. */
.yazi-govde a{color:var(--mavi);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px}
.yazi-govde a:hover{text-decoration-thickness:2px}
/* Dış kaynak linkleri ayrıca işaretleniyor: okur nereye gittiğini bilsin. */
.yazi-govde a[href^="http"]::after{content:" ↗";font-size:.85em;color:var(--soluk)}

/* AYNI İSTİSNA GÖVDE DIŞINDAKİ METİN LİNKLERİNE DE GEREKLİ. Yukarıdaki kural yalnız
   .yazi-govde altını kapsıyordu, oysa yorumu "iç linkler ve KAYNAK ATIFLARI" diyor —
   ve <p class="kaynak"> o kapsayıcının DIŞINDA. Ölçüldü: .kaynak a rengi ebeveyniyle
   birebir aynı (rgb(154,150,145)) ve text-decoration 'none', yani kaynak atfı
   tıklanabilir olduğunu hiçbir işaretle söylemiyordu. Aynı durum kırıntıda, yazar
   iletişim bağlantılarında ve 404'ün tek kurtarma linkinde de vardı.
   Kaynak atfı bu sitenin iki stratejik ekseninden biri; görünmeyen link onu öldürür.
   Renk TEK BAŞINA yeterli değil (renk körlüğü), o yüzden alt çizgi de var. */
.kaynak a,.kirinti a,.yazar-baglanti a,.yazar-bio a,.bos a,.sayfa-spot a{
  color:var(--mavi);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px}
.kaynak a:hover,.kirinti a:hover,.yazar-baglanti a:hover,.yazar-bio a:hover{
  text-decoration-thickness:2px}


/* ═══════════════════════════════════════════════════════════════════════════
   ROSSONERO — benimsenen görsel yön.
   
   Aşağıdaki blok icerik/tasarim/yon-a-rossonero.css'ten OLDUĞU GİBİ, SIRASI
   KORUNARAK alındı. Sıra önemli: önizlemede de bu dosya main.css'in ÜSTÜNE
   yükleniyordu, yani doğrulanan render ile buradaki render birebir aynı.
   Yukarıdaki kuralların bir kısmını bilerek eziyor — silinmediler çünkü hangi
   kararın neyi ezdiği, gerekçesiyle birlikte okunabilir kalsın.

   Yazı tipleri kendi sunucumuzda: public/assets/fonts/ + assets/css/fontlar.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   YÖN A — "ROSSONERO"                       milanbahishaberi.com override kat
   main.css'in ÜSTÜNE yüklenir. HTML'e dokunulmadı; yalnız mevcut sınıflar.

   TEZ
   Bu bir gece maçı sitesi: zemin gerçekten siyah, kırmızı ise vurgu değil
   TAŞIYICI — bölüm başlığının, manşet plakasının, yayın bandının, günün
   maçlarının kendisi kırmızıdan yapılıyor.

   MOTİF
   Milan'ın dikey çubuğu tek bir değişkene indirildi: --desen = dar kırmızı
   bant (4px) + geniş siyah (10px). Süsleme olarak DEĞİL, yapısal ayraç olarak
   kullanılıyor — üst barın alt kenarı, bölüm başlığının orta rayı, bugünün maç
   grubunun tepesi, yazı içi H2'lerin üstündeki kısa tik, alt bilginin tepesi.
   Yani çizgi sayfanın ritmini kuruyor; hiçbir yerde "dekor şerit" değil.

   PALET (6 ad)
     --siyah        #08090B  gerçek zemin (gece)
     --kurum        #101114  yüzey / kart
     --kirmizi      #E01F27  DEKORATİF kırmızı — yalnız çizgi/kenar/desen
     --kirmizi-metin#FF5A55  METİN kırmızısı — koyu zeminde okunacak kırmızı
     --kirmizi-dolgu#A6111C  DOLGU kırmızısı — üzerine BEYAZ metin gelen zemin
     --kemik        #EFEDE8  ana metin (nötr-sıcak beyaz, krem ZEMİN değil)
   Yardımcılar: --soluk #9A9691 · --cizgi #26272C · --yesil #35C08A · --mavi #6EA8FF

   KIRMIZI ÜÇE BÖLÜNDÜ — main.css'in ölçülmüş dersi burada da geçerli.
   Tek kırmızıyı hem dolgu hem metin yapmak koyu temada AA'yı düşürüyor.
   Ölçüm: dekoratif #E01F27 / #08090B = 4,17 → METİN OLARAK KULLANILMAZ
   (4,5 eşiğinin altında). Bu yüzden main.css'te .logo .v'ye verilen
   var(--kirmizi) burada bilerek --kirmizi-metin'e çevrildi... daha doğrusu
   kırmızı DOLGU'ya: "Haberi" artık kırmızı zeminde beyaz bir damga.

   TİPOGRAFİ (yalnız gömülü yüzler; listede olmayan yüz yok)
     'Archivo Black' 400 → yalnız BÜYÜK başlık: .lead h3, .haber h1,
        .yazi-govde h2, .sayfa-baslik, .logo. Küçük punto asla — hamur olur.
     'Archivo' 400/600  → gövde metni, liste başlıkları, ray başlıkları.
     'Barlow Condensed' 600 → küçük yapısal etiket: .kat .ne .rozet .gun-etiket
        .mac-ust .kanal .canli .bolum-bas h2 .ray h2 .nav a .alt-menu a.
        (Sıkışık spor etiketi registeri; Archivo Black'in yapamadığı iş.)
     'IBM Plex Mono' 500 → sayısal veri: saat, skor, tarih, dakika, künye.
        Maç şeridinde rakamlar hizalı kolon gibi dursun diye.
     Oswald ve Lora bilerek KULLANILMADI: bu yön endüstriyel, serif yok.
     Archivo Black'in tek ağırlığı 400 — her yerde açıkça 400 yazıldı ve
     font-synthesis:none verildi, yoksa tarayıcı sahte-kalın üretiyor.

   YERLEŞİM FİKRİ
     · Kartların yuvarlaklığı SIFIRLANDI (radius 0). Bu yön keskin.
     · Manşet: görsel sütunun tam genişliğinde akıyor, metin onun ÜSTÜNE binen
       masif siyah bir plaka olarak yukarı taşıyor; plakanın sol kenarı 5px
       kırmızı bant. Alınan risk bu. Metin yarı saydam bir katmanın üstünde
       DEĞİL — plaka tamamen mat, o yüzden kontrast ölçülebilir kalıyor.
     · Sol kırmızı bant yalnız iki yerde: manşet plakası (hiyerarşinin tepesi)
       ve satır :hover'ı (imlecin yeri). Her karta konmadı — konsaydı "yuvarlak
       kartta vurgu şeridi" jeneriğine düşerdi.
     · Sağ ray kutulardan çıkarıldı: kutu yerine 2px kırmızı üst kural + dikey
       ayraç çizgi. Haber sayfası da kutusuz, siyah üstünde tek kolon.

   ÖLÇÜLEN KONTRASTLAR (php luminance formülü ile hesaplandı, tahmin yok)
     KOYU  kemik/siyah 17,03 · kemik/kurum 16,14 · kemik/plaka 16,61
           soluk/kurum 6,42 · soluk/siyah 6,78 · soluk/plaka 6,61
           kirmizi-metin/kurum 6,15 · /plaka 6,33 · /siyah 6,49 · /yuzey2 5,78
           beyaz/kirmizi-dolgu 7,73 · band-alt-not #F3D6D8/dolgu 5,67
           yesil/kurum 8,14 · mavi/kurum 7,83 · mavi/siyah 8,26
           dekoratif #E01F27/siyah 4,17 → yalnız çizgi, METİN DEĞİL
     AÇIK  metin/zemin 14,98 · /yuzey 18,10 · soluk/yuzey 6,92 · /zemin 5,72
           kirmizi-metin #A6111C/yuzey 7,41 · /zemin 6,13
           beyaz/kirmizi-dolgu 7,73 · yesil 5,15 · mavi 8,30
   En düşük ölçüm 5,15 (açık temada .canli yeşili) — AA eşiği 4,5, geçiyor.

   TEMA KALIBI: main.css ile aynı — :root KOYU, @media(light) onu çevirir.
   İki blok da doldurulmuş; yarım tema render riski yok.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Gece paleti (varsayılan) ───────────────────────────────────────── */
  --siyah:#08090B;          /* sayfa zemini: gerçekten siyah */
  --kurum:#101114;          /* kart/yüzey */
  --plaka:#0C0D10;          /* manşet metin plakası — görselin üstüne binen blok */
  --zemin:var(--siyah);
  --yuzey:var(--kurum);
  --yuzey2:#17181C;
  --yuzey3:#1E2025;
  --kemik:#EFEDE8;
  --metin:var(--kemik);
  --soluk:#9A9691;
  --cizgi:#26272C;
  /* Kart/bileşen SINIRI ayrı token: --cizgi dekoratif ayraç (1,27:1), bu ise WCAG
     1.4.11'in arayüz bileşeni sınırı için istediği 3:1'i sağlıyor. İkisi aynı değere
     bağlansaydı ya ayraçlar gereksiz sertleşirdi ya sınırlar eşiği geçmezdi. */
  --kart-sinir:#606166;   /* #101114 üstünde 3,06 */

  /* Kırmızı üç role bölünmüş — nedeni yukarıdaki blokta ölçüsüyle yazılı. */
  --kirmizi:#E01F27;        /* dekoratif: çizgi, kenar, desen, hover */
  --kirmizi-metin:#FF5A55;  /* koyu zeminde okunacak kırmızı METİN */
  --kirmizi-dolgu:#A6111C;  /* üzerine BEYAZ metin gelen dolgu */
  --uzeri-beyaz:#FFFFFF;
  --band-not:#F3D6D8;       /* kırmızı dolgu üstündeki ikincil metin (5,67) */

  --yesil:#35C08A;
  --mavi:#6EA8FF;

  /* Motifin kendisi. Dar kırmızı + geniş siyah; her yerde aynı değişken. */
  --desen-siyah:#000000;
  --desen:repeating-linear-gradient(90deg,
          var(--kirmizi) 0 4px, var(--desen-siyah) 4px 14px);

  /* Yazı tipi rolleri. main.css yalnız --cond ve --sans biliyor; onları
     yeniden tanımlamak en temiz yol, geri kalanı bu katmanda dağıtılıyor. */
  --cond:'Archivo Black',ui-sans-serif,system-ui,sans-serif;   /* BÜYÜK başlık */
  --sans:'Archivo',ui-sans-serif,system-ui,sans-serif;         /* gövde */
  --etiket:'Barlow Condensed',ui-sans-serif,system-ui,sans-serif; /* küçük etiket */
  --rakam:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;  /* sayısal veri */

  --olcu:66ch;              /* 17,5px Archivo ile 68ch fazla geniş kalıyordu */
}

/* Kart sınırının AÇIK tema karşılığı. Aynı gri iki zeminde aynı oranı vermez:
   #606166 açık temanın #FAFAFB kartında 4,9 ile fazla sert, #88898e ise 3,35. */
@media (prefers-color-scheme:light){
    /* Kart sınırının açık tema karşılığı — aynı gri iki zeminde aynı oranı VERMEZ. */

  :root{
    /* Gündüz sürümü: krem/kâğıt DEĞİL, soğuk gazete grisi. Sıcak krem
       (#F4F1EA) bilerek kaçınıldı — o palet artık jenerik imza.
       Kırmızı burada tek koyu tona iniyor: #A6111C hem metin hem dolgu olarak
       ölçüldü ve ikisinde de geçiyor (7,41 / 7,73), o yüzden üçe bölmeye
       gerek yok — koyu temadaki bölünmenin sebebi zeminin siyah olmasıydı. */
    --siyah:#E4E5E7;
    --kurum:#FAFAFB;
    --plaka:#FFFFFF;
    --zemin:var(--siyah);
    --yuzey:var(--kurum);
    --yuzey2:#EFEFF1;
    --yuzey3:#E6E7EA;
    --kemik:#101114;
    --metin:var(--kemik);
    --soluk:#55575E;
    --cizgi:#CFD1D6;
    --kart-sinir:#88898e;   /* #FAFAFB üstünde 3,35 */

    --kirmizi:#D01C25;
    --kirmizi-metin:#A6111C;
    --kirmizi-dolgu:#A6111C;
    --band-not:#F3D6D8;      /* dolgu hâlâ koyu kırmızı → aynı değer geçerli */

    --yesil:#0C6E44;
    --mavi:#14479E;

    /* Desendeki "siyah" açık temada da koyu kalıyor: Milan çubuğu kırmızı-siyah
       olduğu için gündüz sürümünde beyaza çevirmek motifi öldürürdü. */
    --desen-siyah:#101114;
  }
}

/* ── Temel ──────────────────────────────────────────────────────────────── */
body{
  background:var(--zemin);color:var(--metin);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  /* Archivo Black tek ağırlıklı (400). Sahte-kalın sentezini kapat, yoksa
     Chrome 700 istendiğinde yüzü şişiriyor ve harfler birbirine giriyor. */
  /* -weight EKİ ŞART: çıplak `font-synthesis:none` weight + style + small-caps'in
     ÜÇÜNÜ birden kapatır. Gömülü sette tek bir italik yüz yok, yani italik sentezi de
     kapanınca <em> çevresindeki metinden ayırt edilemez hâle geliyordu — vurgu
     semantik olarak sessizce ölüyordu. Amaç yalnız sahte-KALIN'ı önlemekti. */
  font-synthesis-weight:none;
}
/* Bu yönün tek biçim kuralı: köşe yok. main.css'teki 9-14px yarıçaplar tek
   tek değil toplu sıfırlanıyor; keskinlik burada bir stil değil, karar. */
.mac-kart,.kanal,.lead,.liste,.ray section,.haber,.kart,.kapak img,
.uretim-notu,.yazar-kutu,.band a,.av,.nokta,.etiketler a{border-radius:0}

/* ── Üst bar ────────────────────────────────────────────────────────────── */
.ust{
  background:var(--zemin);
  border-bottom:0;                 /* hairline yerine motif geliyor */
}
/* Üst barın alt kenarı = rossonero çubuk. Sayfanın ilk yapısal işareti bu. */
.ust::after{content:"";display:block;height:6px;background:var(--desen)}
.ust .kap{height:66px;gap:26px}

.logo{
  font-family:var(--cond);font-weight:400;font-size:22px;
  letter-spacing:.005em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:6px;
}
/* "Haberi" artık kırmızı METİN değil kırmızı DAMGA. Sebep ölçülmüş:
   dekoratif kırmızı siyah üstünde 4,17 → küçük/orta puntoda AA'yı geçmez.
   Dolguya çevirince beyaz/#A6111C = 7,73 ile sorun kökten kapanıyor,
   üstelik logo bir "arma" hâline geliyor. */
.logo .v{
  background:var(--kirmizi-dolgu);color:var(--uzeri-beyaz);
  padding:2px 8px 3px;line-height:1;display:inline-block;
}

/* Nav'da UPPERCASE YOK. Kategori adları Türkçe ("Şampiyonlar Ligi",
   "İtalya Kupası"); html lang="tr" sayesinde modern tarayıcılar i→İ dönüşümünü
   doğru yapsa da bu davranış motora bağımlı ve başlıkta risk almaya değmez.
   Sıkışık yüz zaten "spor menüsü" hissini uppercase olmadan veriyor. */
.nav{gap:22px;font-family:var(--etiket)}
.nav a{
  font-family:var(--etiket);font-size:16px;font-weight:600;letter-spacing:.01em;
  color:var(--soluk);padding:6px 0;border-bottom:3px solid transparent;
}
.nav a:hover,.nav a[aria-current]{color:var(--metin);border-color:var(--kirmizi)}

/* ── Maç şeridi ─────────────────────────────────────────────────────────── */
.serit{background:var(--zemin);border-bottom:1px solid var(--cizgi)}
.serit-ic{padding:15px 0}          /* overflow-x:auto main.css'te — yatay taşma yok */
.gun-grup{gap:10px;padding-right:20px;margin-right:20px}

.gun-etiket{
  font-family:var(--etiket);font-size:12px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--soluk);
}
.gun-etiket.bugun{color:var(--kirmizi-metin)}
/* MOTİFİN ANLAM TAŞIDIĞI YER: bugünün maç grubunun tepesine rossonero çubuk.
   Şeritteki tek "bugün" işareti bu; kırmızıyı süs değil bilgi yapan hamle.
   :has desteklemeyen tarayıcıda kural düşer, etiket rengi işaretlemeye devam
   eder — bilgi kaybı yok. */
/* padding-top DEĞİL, kutu içi vurgu. align-items:stretch yüzünden gruba verilen üst
   dolgu o günün kartlarını komşu günün kartlarından KISALTIYOR ve aynı satırdaki
   kartların alt kenarları hizalanmıyordu. Bugün işareti zaten etiketin renginde. */
/* BUGÜNÜN GRUBU: rossonero çubuğu üstte. Desen KORUNUYOR — bu, şeritteki tek "bugün"
   işareti ve yönün taşıyıcı motifi. Düzeltilen şey hizalama: üst dolgu YALNIZ bu gruba
   verilince, align-items:stretch yüzünden bugünün kartları komşu günün kartlarından
   11px kısalıyor ve aynı satırdaki kartların ALT kenarları hizalanmıyordu. Artık pay
   bütün gruplarda var (bkz. .gun-grup), desen yalnız bugünde. */
.gun-grup{padding-top:11px}
.gun-grup:has(.gun-etiket.bugun){
  background-image:var(--desen);background-repeat:no-repeat;
  background-position:0 0;background-size:56px 3px;
}

.mac-kart{
  min-width:212px;background:var(--yuzey);border:1px solid var(--cizgi);
  padding:11px 13px 12px;
}
.mac-kart:hover{border-color:var(--kirmizi);background:var(--yuzey2);transform:translateY(-1px)}
.mac-ust{
  font-family:var(--etiket);font-size:11.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--soluk);margin-bottom:8px;
}
.mac-takim{
  font-family:var(--etiket);font-size:18px;font-weight:600;
  line-height:1.18;letter-spacing:.005em;color:var(--metin);
}
.mac-alt{margin-top:10px}
/* Kanal rozeti sitenin var oluş sebebi olan bilgiyi taşıyor: dolgu kırmızısı +
   beyaz = 7,73. Metin kırmızısıyla yazılsaydı 10,5px'te sınırda kalırdı. */
.kanal{
  background:var(--kirmizi-dolgu);color:var(--uzeri-beyaz);
  font-family:var(--etiket);font-weight:600;font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;padding:2px 8px 3px;
}
/* Saat artık soluk değil: "maç saat kaçta" sorusunun cevabı ikincil bilgi olamaz. */
.saat{font-family:var(--rakam);font-weight:500;font-size:12.5px;color:var(--metin)}
.canli{font-family:var(--etiket);font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.canli::before{border-radius:0;width:7px;height:7px;animation:nabiz 1.6s steps(2,end) infinite}
@keyframes nabiz{0%,49%{opacity:1}50%,100%{opacity:.25}}
.skor{font-family:var(--rakam);font-weight:500;font-size:17px;letter-spacing:-.02em}

/* ── Yayın bandı — sayfanın tek büyük kırmızı düzlemi ───────────────────── */
/* Şeridin altında duran bu bant stratejik olarak en değerli link. Kırmızıyı
   "taşıyıcı" yapan tez tam burada sınanıyor: bant kırmızının kendisi. */
.band{background:var(--kirmizi-dolgu);border-bottom:0}
.band::before{content:"";display:block;height:4px;background:var(--desen)}
.band .kap{padding:16px 20px;gap:18px}
.band p{color:var(--uzeri-beyaz);font-size:16px}
.band p b{font-family:var(--cond);font-weight:400;font-size:17px;letter-spacing:-.01em}
.band .alt-not{color:var(--band-not);font-size:14px;display:block;margin-top:3px}
/* Buton kırmızının içinde siyah bir blok: aynı motifin küçük ölçekteki hâli. */
.band a{
  background:var(--desen-siyah);color:var(--uzeri-beyaz);
  font-family:var(--etiket);font-weight:600;font-size:16px;letter-spacing:.04em;
  /* KENARLIK YARI SAYDAM OLAMAZ. rgba(255,255,255,.28) butonun KENDİ siyah zemini
     üzerine kompozit oluyor (arka plan border-box'a kadar boyanıyor), bandın kırmızısı
     üzerine değil — ölçüldü: gerçek kompozit #474747 ve bandın kırmızısına karşı 1,20:1.
     Yani butonun dolgusu da (2,72) kenarlığı da eşiği geçmiyordu ve kaybolan şey
     etiketin okunurluğu değil, ORANIN BİR DÜĞME OLDUĞU bilgisiydi (WCAG 1.4.11).
     Kemik beyazı bandın kırmızısı üzerinde 6,60:1.
     --kemik TEMAYLA DÖNÜYOR (koyu #EFEDE8, açık #101114) ama BANT iki temada da kırmızı
     kalıyor — ölçüldü: açık temada sınır 2,44'e düşüyordu. Bandın üzerindeki metin için
     zaten ayrılmış olan --uzeri-beyaz sabit; butonun rengi de o. */
  padding:10px 18px;border:1px solid var(--uzeri-beyaz);
}
.band a:hover{opacity:1;background:#000;border-color:var(--uzeri-beyaz)}
.band svg{width:15px;height:15px;stroke-width:2.6}

/* ── Bölüm başlığı: etiket | rossonero ray | link ───────────────────────── */
/* ::before yeni bir flex öğesi olarak doğuyor ve order ile ORTAYA alınıyor.
   Böylece başlık ile "tümü" linki arasındaki boşluk boş kalmıyor, motif
   sayfanın yatay ritmini kuruyor. HTML'e tek bir düğüm eklenmedi. */
.bolum-bas{margin:0 0 16px;gap:0}
.bolum-bas h2{
  order:0;flex:0 0 auto;
  font-family:var(--etiket);font-weight:600;font-size:14px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--metin);
}
.bolum-bas::before{
  content:"";order:1;flex:1 1 auto;min-width:24px;height:8px;
  margin:0 16px;background:var(--desen);
}
.bolum-bas a{
  order:2;flex:0 0 auto;
  font-family:var(--etiket);font-weight:600;font-size:15px;letter-spacing:.03em;
  color:var(--kirmizi-metin);
}
.bolum-bas a:hover{text-decoration:underline;text-underline-offset:4px}

/* ── Manşet — ALINAN RİSK ───────────────────────────────────────────────── */
/* Görsel sütunun tamamını kaplayarak akıyor; metin plakası onun üstüne
   BİNİYOR (negatif üst kenar boşluğu) ve solda 5px kırmızı bant taşıyor.
   Plaka MAT: yarı saydam bir katman kullanılsaydı kontrast görsele göre
   değişirdi ve ölçülemezdi. Böylece kemik/plaka 16,61 sabit. */
.lead{background:transparent;border:0;margin-bottom:34px;grid-template-columns:1fr}
.lead.gorselli{grid-template-columns:1fr}
.lead .gorsel{background:var(--yuzey2)}
.lead .gorsel img{width:100%;height:auto;aspect-ratio:16/7;object-fit:cover}
.lead .ic{
  position:relative;z-index:1;
  background:var(--plaka);
  border:1px solid var(--cizgi);border-left:5px solid var(--kirmizi);
  padding:26px 30px 22px;
}
.lead.gorselli .ic{margin:-72px 44px 0 0}   /* üste binme + sağdan editoryal boşluk */
.rozet{
  font-family:var(--etiket);font-weight:600;font-size:13px;
  letter-spacing:.16em;color:var(--kirmizi-metin);margin-bottom:12px;
}
.lead h3{
  font-family:var(--cond);font-weight:400;
  font-size:clamp(27px,3.6vw,44px);line-height:1.06;letter-spacing:-.018em;
  margin:0 0 14px;
}
.lead h3 a:hover{color:var(--kirmizi-metin)}
.lead .spot{font-size:17px;color:var(--soluk);max-width:56ch;margin:0 0 20px}
.kunye{font-size:14px;padding-top:14px;gap:10px}
.av{width:36px;height:36px;border:1px solid var(--cizgi)}
.kunye .yzr{font-weight:600;color:var(--metin)}
.kunye time,.kunye-satir time{font-family:var(--rakam);font-weight:500;font-size:13px}
/* Ayraç nokta artık kare ve kırmızı: yuvarlak nokta bu yönde yabancı duruyordu. */
.nokta{width:4px;height:4px;background:var(--kirmizi)}

/* ── Haber listesi ──────────────────────────────────────────────────────── */
.liste{background:var(--yuzey);border:1px solid var(--cizgi)}
.satir{grid-template-columns:112px 1fr auto;gap:18px;padding:18px 22px}
.satir:hover{background:var(--yuzey2);box-shadow:inset 4px 0 0 var(--kirmizi)}
.satir .kat{
  font-family:var(--etiket);font-weight:600;font-size:12.5px;
  /* text-transform:none AÇIKÇA yazılmalı. Bildirimi silmek YETMEZ — main.css:145
     `.satir .kat{...text-transform:uppercase}` aynı özgüllükte ve önce geliyor, yani
     override bir şey demezse ONUN değeri geçerli kalır. Ölçüldü: bildirimi sildikten
     sonra hesaplanan değer hâlâ 'uppercase'ti.
     uppercase YOK. Bu etiketin içeriği KATEGORİ ADI ve dosyanın kendi gerekçesi
     (bkz. .nav kuralı) tam bu yüzden nav'da uppercase'i reddediyor: lang="tr" ile
     tarayıcı i -> İ dönüşümü yapıyor ve "Serie A" ekranda "SERİE A" olarak çıkıyor —
     yabancı özel ad noktalı İ ile yazılmış oluyor. Aynı ad, aynı sayfada iki farklı
     kuralla ele alınamaz. Harf aralığı ayırt ediciliği zaten taşıyor. */
  letter-spacing:.14em;text-transform:none;color:var(--kirmizi-metin);
}
/* Liste başlıkları Archivo 600 — Archivo Black burada hamurlaşırdı.
   Ağır yüz yalnız manşet ve H1 ölçeğinde kalıyor. */
.satir h3{font-family:var(--sans);font-weight:600;font-size:20px;line-height:1.24;letter-spacing:-.012em}
.satir:hover h3 a{color:var(--kirmizi-metin)}      /* yuzey2 üstünde 5,78 ✓ */
.satir .meta{font-size:13.5px}
.satir .sag{font-family:var(--rakam);font-weight:500;font-size:12px}

/* ── Sağ ray — kutu değil, kural ────────────────────────────────────────── */
.ray{border-left:1px solid var(--cizgi);padding-left:28px}
.ray section{
  background:transparent;border:0;border-top:2px solid var(--kirmizi);
  padding:14px 0 6px;margin-bottom:30px;
}
.ray h2{
  font-family:var(--etiket);font-weight:600;font-size:13px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--metin);margin:0 0 12px;
}
.dosya a{padding:13px 0}
.dosya .ne{
  font-family:var(--etiket);font-weight:600;font-size:11.5px;
  letter-spacing:.16em;color:var(--soluk);margin-bottom:5px;
}
.dosya .b{font-family:var(--sans);font-weight:600;font-size:17px;line-height:1.3;letter-spacing:-.01em}
.dosya a:hover{color:var(--kirmizi-metin)}
/* Bunlar SAĞ RAY yazar listesine ait; çıplak `.yazar` article.php'deki künye satırını
   da vuruyordu (aynı sınıf, iki bağlam). main.css'te de aynı kapsamlama yapıldı. */
.ray .yazar{padding:11px 0;gap:12px}
.ray .yazar b{font-family:var(--sans);font-weight:600;font-size:15px}
.ray .yazar span span{font-size:13px}

/* ── Yazı sayfası — siyah üstünde tek kolon ─────────────────────────────── */
/* Kutu kaldırıldı: gece zemininde kenarlıklı beyaz-gri panel makaleyi
   "widget"a çeviriyordu. Metin doğrudan siyahın üstünde duruyor (16,x kontrast),
   ölçüyü --olcu tutuyor. */
.haber{background:transparent;border:0;padding:0;max-width:var(--olcu)}
/* KIRINTI DA uppercase DEĞİL. İçeriği kategori adı ("Ana sayfa › Yayın") ve Türkçe'de
   i -> İ dönüşümü "Serie A"yı "SERİE A" yapıyor — yabancı özel ad noktalı İ ile yazılmış
   oluyor. Aynı ad, aynı sayfada iki farklı kuralla ele alınamaz: .nav'da uppercase tam bu
   gerekçeyle reddedilmişti. Ayırt edicilik harf aralığı + ağırlıkla zaten sağlanıyor. */
.kirinti{
  font-family:var(--etiket);font-weight:600;font-size:13px;
  letter-spacing:.1em;color:var(--soluk);margin-bottom:16px;
}
.kirinti a:hover{color:var(--kirmizi-metin)}
.haber h1{
  font-family:var(--cond);font-weight:400;
  font-size:clamp(30px,4.8vw,50px);line-height:1.04;letter-spacing:-.022em;margin:0 0 16px;
}
.spot{font-size:19px;line-height:1.5;color:var(--soluk);max-width:58ch}
.kunye-satir{font-size:14px;padding:14px 0;margin-bottom:26px}
.yazar-foto{border-radius:0;border:1px solid var(--cizgi)}
.kunye-satir .okuma,.kunye-satir .guncelleme{font-family:var(--rakam);font-weight:500;font-size:12.5px}
.kapak{margin-bottom:26px}
/* Künye satırı: mono + sol kırmızı bant. Görselin kaynağı bir "iddia"dır,
   gövde metninden tipografik olarak ayrılması gerekiyor. */
/* .kapak ÖN EKİ ŞART: çıplak `figcaption` (0,0,1) main.css'teki `.kapak figcaption`
   (0,2,0) tarafından eziliyor ve kural sessizce hiç uygulanmıyordu. */
.kapak figcaption{
  font-family:var(--rakam);font-weight:500;font-size:12px;line-height:1.5;
  color:var(--soluk);border-left:2px solid var(--kirmizi);
  padding:2px 0 2px 11px;margin-top:10px;
}
.yazi-govde{font-size:17.5px;line-height:1.72}
.yazi-govde p{margin:0 0 20px}
/* H2'nin ÜSTÜNDE 72px'lik rossonero tik: bölüm başlangıcını çizgi motifiyle
   işaretliyor, ayrı bir ayraç çizgisine gerek kalmıyor. */
.yazi-govde h2{
  font-family:var(--cond);font-weight:400;font-size:27px;line-height:1.16;
  letter-spacing:-.015em;margin:40px 0 14px;padding-top:16px;
  background-image:var(--desen);background-repeat:no-repeat;
  background-position:0 0;background-size:72px 4px;
}
.yazi-govde h3{font-family:var(--sans);font-weight:600;font-size:21px;letter-spacing:-.01em;margin:28px 0 10px}
.yazi-govde blockquote{
  border-left:5px solid var(--kirmizi);padding:4px 0 4px 18px;
  font-size:19px;line-height:1.5;color:var(--metin);
}
.uretim-notu,.yazar-kutu{background:var(--yuzey);border:1px solid var(--cizgi)}
.yazar-kutu h2,.ilgili h2{
  font-family:var(--etiket);font-weight:600;font-size:13px;letter-spacing:.2em;color:var(--soluk);
}
.kaynak,.uretim-notu{font-size:14px}
.etiketler a{font-family:var(--etiket);font-weight:600;font-size:14px;letter-spacing:.04em;padding:4px 12px}
.kart{background:var(--yuzey);border:1px solid var(--cizgi)}
.kart:hover{border-color:var(--kirmizi)}
.kart img{border-radius:0}
.kart h3{font-family:var(--sans);font-weight:600;font-size:18px;letter-spacing:-.01em}
.kart time{font-family:var(--rakam);font-weight:500;font-size:12px}
.sayfa-baslik{font-family:var(--cond);font-weight:400;letter-spacing:-.02em;line-height:1.06}
/* RENK DE DEVREDİLMEK ZORUNDA. Bu kural yalnız yazı tipini alıyordu; rengi main.css'ten
   miras kalıyor ve orada --mavi. Bu yönde --mavi ODAK HALKASINA ayrılmış bir renk ve
   bütün bağlantı vurgusu --kirmizi-metin — yani sayfalama, sitenin tek "yabancı renkli"
   bağlantısı olarak kalıyordu. */
.sayfalama a,.sayfa-bilgi{font-family:var(--etiket);font-weight:600;font-size:16px}
.sayfalama a{color:var(--kirmizi-metin)}
.sayfalama a:hover{color:var(--metin)}
.yazar-profil h1{font-family:var(--cond);font-weight:400;letter-spacing:-.02em}
.yazar-foto-buyuk{border-radius:0;border:1px solid var(--cizgi)}

/* ── Alt bilgi ──────────────────────────────────────────────────────────── */
.alt{background:var(--zemin);border-top:0;padding:0 0 46px;font-size:14px}
.alt::before{content:"";display:block;height:6px;background:var(--desen);margin-bottom:24px}
.alt .kap{gap:20px}
.alt-menu{gap:18px}
.alt-menu a{font-family:var(--etiket);font-weight:600;font-size:15px;letter-spacing:.03em}
.alt-menu a:hover{color:var(--kirmizi-metin)}

/* ── Kırılımlar ─────────────────────────────────────────────────────────── */
@media (max-width:1040px){
  /* TABLET BANDI (641-1040) PAYSIZDI. Mobil blok 640'ta bitiyor, gövde ızgarası ise
     1040'ta tek kolona düşüyor — arada kalan bantta menü tek satırda logoyla yarışıyor.
     Mevcut 5 kategoriyle sığıyor ama ölçüldü: tek bir kategori daha eklenince menü
     301px'e sıkışıyor, scrollWidth 399 oluyor (98px kırpık) ve altında GÖRÜNÜR kaydırma
     çubuğu beliriyor — yani mobilde kaldırılan kusur bu bantta aynen geri geliyor.
     Kategori sayısı veriye bağlı; bu dosyanın kendi örnekleri zaten "Şampiyonlar Ligi"
     ve "İtalya Kupası"nı sayıyor. Çubuk gizleme ve kaydırma davranışı buraya taşındı. */
  .nav,.serit-ic{scrollbar-width:none;-ms-overflow-style:none}
  .nav::-webkit-scrollbar,.serit-ic::-webkit-scrollbar{width:0;height:0;display:none}
  .ray{border-left:0;padding-left:0;border-top:1px solid var(--cizgi);padding-top:26px;margin-top:8px}
  .lead .gorsel img{aspect-ratio:16/8}
  .lead.gorselli .ic{margin:-56px 24px 0 0}
}
@media (max-width:640px){
  /* ── MOBİL YAPI YENİDEN KURULDU ─────────────────────────────────────────
     Önceki mobil blok yalnız BOYUT ayarlıyordu; yapı masaüstünden olduğu gibi
     miras alınıyordu ve ölçüldüğünde şu çıktı (390px, koyu tema):
       · logo 240px alıyor, menüye 78px kalıyor → "Serie A | Mil…" kesik,
         altında ayrı bir kaydırma çubuğu beliriyor
       · maç şeridi 316px YÜKSEKLİĞİNDE: yatay kaydırıcının içinde dikey
         yığılmış gün kolonları — kaydırıcı içinde kaydırıcı, iki çubuk birden
       · takım adları kırpık ("Juventus – Laz…")
       · bölüm başlığının kesikli rayı sağdaki bağlantıyı ekran dışına itiyor
     Aşağıdaki blok bunların dördünü de yapı düzeyinde çözüyor. */

  /* ÜST BAR İKİ SATIRA AYRILIYOR. Tek satırda logo ile menü aynı 373px'i
     paylaşamıyor; menü eziliyordu. Yükseklik sabit DEĞİL (height:auto),
     yoksa ikinci satır taşar. */
  /* Başlık iki satıra çıkınca --ust-yukseklik de güncellenmek ZORUNDA: html'deki
     scroll-padding-top bunu okuyor ve "İçeriğe atla" hedefi aksi hâlde başlığın
     ardında kalıyor (ölçüldü: mobilde başlık 105px, main'in ilk 105px'i örtülüydü). */
  :root{--ust-yukseklik:117px}   /* ölçüldü: .ust gerçek yüksekliği */
  .ust .kap{height:auto;flex-wrap:wrap;gap:0;padding-top:11px;padding-bottom:0}
  .logo{font-size:20px;width:100%;padding-bottom:9px}
  /* Negatif marj TAM OLARAK .kap'ın yatay dolgusu kadar (20px), yoksa menü
     logodan başka bir sol kenardan başlıyor. Ölçüldü: -16px iken menü 4px'ten,
     logo 20px'ten başlıyordu — aynı ekranda iki farklı hiza. */
  /* width:calc(100% + 40px) ŞART. .nav bir FLEX ÖĞESİ ve `width:100%` kapsayıcının
     İÇERİK kutusuna eşitleniyor — yani yatay dolgusu ZATEN düşülmüş genişliğe. Negatif
     marjlar kutuyu yalnız SOLA kaydırıyor, GENİŞLETMİYOR. Ölçüldü: menü her mobil
     genişlikte sağda tam 40px berisinde bitiyordu; 320px'te "Transfer" ekranda 40px boş
     yer dururken kırpılıyor, üst ayraç çizgisi de kenara ulaşmıyordu.
     Dikey dolgu odak halkası için: .nav yatay kaydırıcı olduğundan overflow KIRPIYOR ve
     halkanın 6px'lik üst/alt segmenti tamamen kesiliyordu (ölçüldü: üst boşluk 0,00px). */
  .nav{width:calc(100% + 40px);gap:0;margin:0 -20px;padding:6px 20px;
       border-top:1px solid var(--cizgi)}
  .nav a{padding:12px 14px 11px;font-size:13px}   /* dokunma hedefi ≥44px */
  .nav a:first-child{padding-left:0}

  /* ŞERİT TEK YATAY SIRA. main.css 620px altında .gun-grup'u dikey yığıyor
     (flex-direction:column) — o karar şeridi 316px'lik bir bloğa çeviriyor ve
     yatay kaydırma ile birlikte iki eksende birden gezinmek gerekiyor. Bu yön
     için geri alındı: mobilde tek eksende KAYDIRILAN tek sıra, spor
     uygulamalarının kalıbı. */
  /* GÜN SINIRI ÇİZGİYE DEĞİL BOŞLUĞA VE ETİKETE YASLANIYOR. Yön mobilde gün gruplarını
     tek yatay akışa aldı; o anda "Bugün" ile "Yarın" arasındaki TEK sınır main.css'in
     1px'lik --cizgi'si oldu ve ölçüldü: 1,34:1 (WCAG 1.4.11 eşiği 3,0). Fikstür
     şeridinde gün sınırı içeriğin kendisidir, dekor değil. Hairline'ı 3:1'e parlatmak
     motifi bozardı; boşluk ise kontrast eşiğine tabi değil ve her iki grubun başındaki
     etiket zaten görsel işareti taşıyor. */
  .gun-grup{flex-direction:row;align-items:stretch;gap:8px;
            border-right:0;padding-right:0;margin-right:22px}
  /* GÜN ETİKETİ DE SNAP HEDEFİ OLMALI. main.css ilk .mac-kart'a scroll-snap-align:start
     veriyor, kapsayıcı ise scroll-snap-type:x proximity. Etiket satırın başına inline bir
     öğe olarak girince tarayıcı yerleşimde onu ATLAYIP ilk karta yapıştı. Ölçüldü: sayfa
     daha açılırken .serit-ic.scrollLeft = 40,5 ve "Bugün" etiketi sol kenarın tamamen
     dışında (-20,5..12,2) — yani şeridin bugün işareti hiç görünmüyordu. */
  .gun-etiket{writing-mode:horizontal-tb;transform:none;
              align-self:center;padding:0 2px 0 0;font-size:10px;letter-spacing:.14em;
              scroll-snap-align:start}
  /* scroll-padding-left hem snap hedefini düzeltiyor hem de ilk kartın odak halkasının
     SOL segmentinin kaydırma kutusunun başlangıç kenarında kırpılmasını engelliyor. */
  .serit-ic{scroll-padding-left:20px}
  .mac-kart{min-width:158px;padding:9px 11px}     /* ~2,3 kart görünür: kaydır ipucu */
  /* KART SINIRI 3:1'E ÇIKARILDI (WCAG 1.4.11 — arayüz bileşeni sınırı). Bu yön iki
     taşıyıcıyı birden kaldırmıştı: border-radius:0 ve şerit zeminini --yuzey2'den
     --zemin'e çekmek. Kalan tek işaret 1px'lik --cizgi'ydi ve ölçüldü: kenarlık/kart
     1,27 · kart/şerit 1,06 — yani kart neredeyse görünmüyordu. Bu, mobil düzeltmenin
     KENDİ gerekçesini de çürütüyordu: "ikinci kart yarım görünsün, kaydırma ipucu
     olsun" demek, kartın kenarının görülmesine bağlı. Hesaplandı: #606166 koyu kart
     zemininde 3,06 · #88898e açık kart zemininde 3,35. */
  .mac-kart{border-color:var(--kart-sinir)}
  .mac-takim{font-size:15px}
  .serit-ic{padding:10px 0;gap:0}

  /* KAYDIRMA ÇUBUKLARI GİZLENİYOR. Ekranda iki ayrı çubuk beliriyordu ve
     ikisi de içeriğin bir parçası gibi duruyordu. Kaydırma yine çalışıyor;
     ipucu görsel olarak yarım kalan karttan geliyor. */
  .nav,.serit-ic{scrollbar-width:none;-ms-overflow-style:none}
  .nav::-webkit-scrollbar,.serit-ic::-webkit-scrollbar{width:0;height:0;display:none}

  /* BÖLÜM BAŞLIĞI RAYI KALKIYOR. Dekoratif kesikli ray dar ekranda sağdaki
     bağlantıyı taşırıyordu; burada bilgi taşımıyor, o yüzden düşürülüyor. */
  .bolum-bas::before{display:none}
  .bolum-bas{gap:12px}
  .bolum-bas a{white-space:nowrap}

  .band .kap{align-items:flex-start}
  .band a{width:100%;justify-content:center}
  /* AYIRIM BOŞLUKLA. Ölçüldü: ardışık iki haber arasındaki görsel boşluk 0px ve satır
     mobilde tek kolona düzleşiyor (kategori/başlık/meta alt alta) — iki AYRI haberin
     nerede bittiğini söyleyen tek şey 1,27:1'lik ince çizgiydi. WCAG 1.4.11 eşiği 3,0 ve
     bir hairline'ı o kadar parlatmak motifi bozardı; boşluk ise kontrast eşiğine tabi
     değil ve ayrımı yapısal hale getiriyor. */
  .satir{grid-template-columns:1fr;gap:6px;padding:18px 20px 20px}
  .liste{display:flex;flex-direction:column;gap:10px;background:none;border:0}
  .satir{background:var(--yuzey);border:1px solid var(--cizgi)}
  .satir:last-child{border-bottom:1px solid var(--cizgi)}
  .satir h3{font-size:19px}
  .lead .gorsel img{aspect-ratio:16/9}
  .lead .ic{padding:20px 18px 18px}
  .lead.gorselli .ic{margin:-40px 14px 0 0}
  .yazi-govde{font-size:17px}
}
@media (max-width:430px){
  /* 390px hedefi: plaka üste binmeye devam ediyor ama binme payı görselin
     yüksekliğine göre küçültüldü, yoksa fotoğrafın konusu tamamen kapanıyor. */
  .lead.gorselli .ic{margin:-28px 10px 0 0}
  /* 20px, 16px DEĞİL. Ekrandaki diğer HER ŞEY (logo, menü, maç kartı, bölüm başlığı,
     ray, alt bilgi) 20px'ten başlıyor; band 16px'te kalınca telefon aralığının
     TAMAMINDA tek başına 4px'lik bir hiza sapması oluyordu — hem solda hem sağda. */
  .band .kap{padding:14px 20px}
  /* 186px'e GERİ BÜYÜTMEK yanlıştı: 373px'lik alanda gün etiketi + boşluklarla
     birlikte tek kart neredeyse ekranı dolduruyor ve "kaydırılabilir" olduğu
     hiç belli olmuyordu. 152px'te ikinci kart yarım görünüyor — kaydırma ipucu
     görsel olarak veriliyor, ayrı bir gösterge gerekmiyor. */
  .mac-kart{min-width:152px}

  /* YAPIŞKAN BAŞLIK KÜÇÜK TELEFONDA SIKIŞTIRILIYOR. İki satıra ayırmak yapısal kusurları
     çözdü ama sabit bir bedeli var: başlık 117px'e çıkıyor ve 320x568'lik bir ekranda
     viewport'un ~%20'sini KALICI olarak yiyor (kaydırdıkça da orada duruyor). Buradaki
     ölçüler o payı geri kazanıyor; logo hâlâ okunur, dokunma hedefi 44px'in altına
     inmiyor. --ust-yukseklik de güncelleniyor, yoksa atlama bağlantısının payı şişer. */
  :root{--ust-yukseklik:105px}  /* ölçüldü: .ust gerçek yüksekliği (99px kap + 6px desen) */
  .ust .kap{padding-top:8px}
  .logo{font-size:18px;padding-bottom:7px}
  .nav a{padding:10px 12px 9px}
  .nav a:first-child{padding-left:0}
}

/* Hareketi kapatan blok. main.css'te de var ama bu dosya tek başına da
   doğru davranmalı: nabız animasyonu buradan geliyor. */
@media (prefers-reduced-motion:reduce){
  /* ::before/::after AYRICA YAZILMAK ZORUNDA. `*` yalnız ELEMENT'leri seçer,
     pseudo-element'lere UYMAZ — ölçüldü: reduce altında .canli::before'un animationName'i
     hâlâ 'nabiz', state 'running'. Yani "hareketi kapatıyorum" diyen blok, bu dosyanın
     eklediği TEK animasyonu durdurmuyordu. */
  *,*::before,*::after{transition:none!important;animation:none!important}
  .canli::before{opacity:1}
}

/* a:focus-visible main.css'te tanımlı (3px --mavi outline) ve BİLEREK
   dokunulmadı; --mavi bu palette de siyah üstünde 8,26 ile fazlasıyla görünür.
   Yalnız yarıçapı motife uyduruluyor. */
a:focus-visible{border-radius:0}

/* ODAK HALKASI KIRMIZI BANDIN ÜZERİNDE GÖRÜNMÜYORDU. Yukarıdaki gerekçe yalnız SAYFA
   ZEMİNİNE karşı kurulmuş; oysa bu yön bandın kendisini kırmızı dolguya çevirdi ve o yeni
   düzlemi hiç ölçmedi. Ölçüldü: açık temada --mavi #14479E, bant #A6111C üstünde 1,12:1
   (eşik 3,0). outline-offset:3px olduğu için halkanın İÇ boşluğu da bandın kırmızısını
   gösteriyor — yani halkanın HER İKİ komşusu da 1,12. Beyaz, bandın kırmızısı üstünde
   her iki temada da 8,2:1 veriyor ve bant zaten beyaz metin taşıyor. */
.band a:focus-visible{outline-color:#ffffff}