/* Mogadishu Eye - kamuya acik site.
   Renk ve font degiskenleri icin bkz. tokens.css */
@import url('tokens.css?v=45');

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-sans); font-size: 16px; line-height: 1.6;
}

/* ---------- Tipografi hiyerarsisi ----------
   Basliklar sistem serifi (bkz. tokens.css --font-display), govde ve butun UI
   ogeleri sistem sans'i. Agirlik 700: Georgia'da 800 kesim yok, tarayici
   sentezler ve harfler bulanir. Harf araligi -.015em; sans icin dogru olan
   -.03em bir serifte harfleri birbirine yapistiriyor. */
h1, h2, h3, h4 {
  font-family: var(--font-display); font-weight: 700; color: var(--ink);
  letter-spacing: -.015em; line-height: 1.12; text-wrap: balance;
}
::selection { background: var(--ink); color: var(--ink-invert); }
.sec-title, .wires h4 { letter-spacing: .1em; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--brand-ink); }
/* Govde metnindeki bag rengi TASIYAMAZ: palet tek renkli, hover'da yalnizca
   bir ton aciliyor. Isareti alt cizgi veriyor (WCAG 1.4.1: renk tek gosterge
   olamaz), harflerin altina degmesin diye offset'li. */
.article-body a, .promo a, .form-note a {
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px; text-decoration-color: var(--ink-3);
}
.article-body a:hover, .promo a:hover, .form-note a:hover { text-decoration-color: currentColor; }
/* Odak: golge yok, gorunur outline */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px;
}
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* Yalnizca ekran okuyucular icin */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Icerige atla: odaklanana kadar gizli */
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  background: var(--brand-solid); color: var(--on-brand-solid); padding: 10px 16px;
  font-size: 13px; font-weight: 700; border-radius: var(--radius);
}
.skip-link:focus { top: 8px; color: var(--on-brand-solid); }

/* Ayrac: gazete sutunlarindaki ince cizgilerin karsiligi.
   Bloklar renkli kutuya sarilmaz, <hr> ile ayrilir. */
hr { border: 0; height: 0; margin: 0; }
.rule { border-top: 1px solid var(--line); }
.rule-strong { border-top: 2px solid var(--ink); }

/* ---------- Ust bar ---------- */
.topbar {
  background: var(--dark); color: var(--on-dark);
  font-size: 12.5px; letter-spacing: .02em;
}
.topbar .wrap { display: flex; align-items: center; gap: 18px; height: 36px; }
.topbar a { color: var(--on-dark); }
.topbar a:hover { color: #fff; }
.topbar .spacer { flex: 1; }
.topbar .date { color: var(--on-dark-2); }
/* Butonlar: dolgun hap bicimi, hafif yukselme animasyonu */
.btn-cta, .btn-ghost {
  display: inline-block; padding: 10px 20px; border-radius: var(--radius-s);
  font-family: var(--font-sans); font-size: 13px; font-weight: 700;
  letter-spacing: -.01em; border: 1px solid transparent; cursor: pointer;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn-cta { background: var(--brand-solid); color: var(--on-brand-solid) !important; }
.btn-cta:hover { background: var(--brand-strong); transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-cta:active { transform: translateY(0); }
.btn-ghost { background: none; border-color: currentColor; }
.btn-ghost:hover { color: var(--brand-ink); transform: translateY(-2px); }
/* Ust bardaki kompakt varyant */
.topbar .btn-cta { padding: 5px 14px; font-size: 12px; }
.free-flag {
  border: 1px solid rgba(255, 255, 255, .22); color: var(--on-dark); padding: 3px 12px;
  border-radius: var(--radius-s); font-size: 11.5px; letter-spacing: .02em;
}

/* Tema anahtari */
.theme-toggle {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px;
  background: none; border: 1px solid rgba(255, 255, 255, .22); color: var(--on-dark);
  border-radius: var(--radius-s); font: inherit; font-size: 11.5px; cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.theme-toggle:hover { color: #fff; border-color: rgba(255, 255, 255, .5); }
.theme-toggle .ikon { font-size: 13px; line-height: 1; }

/* ---------- Masthead ---------- */
.masthead { border-bottom: 1px solid var(--line); }
.masthead .wrap {
  display: flex; align-items: center; gap: 20px; padding-top: 20px; padding-bottom: 18px;
}
.logo { display: flex; align-items: center; gap: 13px; }
/* Marka isareti. Tek kaynak /assets/img/mark.svg?v=45; MASKE olarak veriliyor,
   <img> olarak degil - maske alfa kanalini okur, dolayisiyla renk
   currentColor'dan gelir ve isaret tema ile birlikte doner. Bir <img>
   currentColor'i miras almaz ve iki dosya tutmak gerekirdi. */
.logo-mark {
  flex: 0 0 auto; width: 34px; height: 34px; background: currentColor;
  -webkit-mask: url("/assets/img/mark.svg?v=45") center / contain no-repeat;
          mask: url("/assets/img/mark.svg?v=45") center / contain no-repeat;
}
.logo b {
  font-family: var(--font-display); font-size: 38px; font-weight: 700;
  letter-spacing: -.02em; line-height: 1; color: var(--ink);
  /* Iki satira BOLUNMESIN. Bolundugunde isaret iki satirin ortasinda asili
     kaliyor ve kilit dagiliyor; olculdu, 790px'te "MOGADISHU" ve "EYE" alt
     alta dusuyordu (isaret olmadan da dusuyordu - bu yeni bir sorun degil,
     isaret onu gorunur hale getirdi). Yer motto'dan aciliyor, asagiya bak. */
  white-space: nowrap;
}
/* Iki tonlu logo, renk olmadan: ikinci kelime bir kademe geri cekiliyor. */
.logo b em { font-style: normal; color: var(--ink-3); }
/* .motto, not ".logo span": the mark is a <span> too, and an element-type
   selector here styled it as if it were the motto - and hid it outright in the
   700px query below. */
.logo .motto {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--ink-3); border-left: 1px solid var(--line); padding-left: 10px;
}
.masthead .spacer { flex: 1; }
.search {
  display: flex; align-items: center; gap: 8px; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 7px 10px; background: var(--bg-2); min-width: 220px;
}
.search input { border: 0; background: none; outline: none; font-size: 14px; width: 100%; font-family: inherit; }

/* ---------- Ana menu / mega menu ---------- */
.mainnav {
  border-bottom: 1px solid var(--line); background: var(--bg);
  position: sticky; top: 0; z-index: 40;
}
.nav-list {
  display: flex; align-items: stretch; gap: var(--space-s);
  list-style: none; margin: 0; padding: 0;
}
.nav-item { position: static; }
.nav-link {
  display: flex; align-items: center; gap: 5px; padding: 14px 0;
  font-family: var(--font-sans); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; white-space: nowrap;
  color: var(--ink); background: none; border: 0; border-bottom: 3px solid transparent;
  cursor: pointer;
}
.nav-link:hover, .nav-link.on { color: var(--brand-ink); border-bottom-color: var(--brand); }
.caret { font-size: 9px; opacity: .55; }

/* Panel: tam genislik, cerceve yerine tek 1px alt cizgi */
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--bg); border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--space-m) 0; visibility: hidden; opacity: 0;
}
.has-mega:hover .mega, .has-mega:focus-within .mega, .has-mega.open .mega {
  visibility: visible; opacity: 1;
}
.has-mega:hover > .nav-link, .has-mega:focus-within > .nav-link, .has-mega.open > .nav-link {
  color: var(--brand-ink); border-bottom-color: var(--brand);
}
/* Esc ile kapatildiginda hover/odak yeniden acmasin */
.has-mega.suppressed .mega { visibility: hidden; opacity: 0; }
.mega-cols { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-m); }
.mega-col-wide { grid-column: span 2; }
.mega-title {
  font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3);
  margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.mega ul { list-style: none; margin: 0; padding: 0; }
.mega li { margin-bottom: 7px; }
.mega li a { font-size: 13.5px; color: var(--ink-2); }
.mega li a:hover { color: var(--brand-ink); }
.mega-letters li a { display: grid; gap: 2px; }
.mega-letters b {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
.mega-letters span { font-family: var(--font-display); font-size: 14.5px; color: var(--ink); }
.mega-feature { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; margin-bottom: 16px; }
.mega-feature img { aspect-ratio: 3/2; object-fit: cover; }
.mega-feature-title {
  display: block; font-family: var(--font-display); font-size: 15px;
  line-height: 1.25; color: var(--ink);
}
.mega-note { font-size: 13px; color: var(--ink-3); margin: 0 0 14px; }

/* ---------- Ulke cekmecesi ----------
   Eskiden burada iki ayri ulke arayuzu vardi: menude genis bir "Regions" mega
   paneli ve menunun altinda yatay kayan bir ulke seridi. Alti ulke icin ikisi
   de fazlaydi. Simdi tek bir cekmece, sagdan aciliyor, her satirda bayrak ve
   ad, en altta "All stories".

   Gizlemek icin [hidden] degil visibility kullaniliyor: display:none'dan
   aciliste gecis animasyonu calismaz; visibility hem erisilebilirlik agacindan
   cikarir hem de transform ile birlikte gecis yapabilir. */
.cekmece-perde {
  position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .62);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.cekmece-perde.acik {
  opacity: 1; visibility: visible;
  transition: opacity var(--dur) var(--ease), visibility 0s;
}
.cekmece {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61;
  width: min(360px, 88vw); display: flex; flex-direction: column;
  background: var(--bg); border-left: 1px solid var(--line);
  transform: translateX(100%); visibility: hidden;
  transition: transform var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.cekmece.acik {
  transform: none; visibility: visible;
  transition: transform var(--dur) var(--ease), visibility 0s;
}
.cekmece-bas {
  display: flex; align-items: center; gap: 12px;
  padding: 22px 24px; border-bottom: 1px solid var(--line);
}
.cekmece-bas h2 {
  font-family: var(--font-sans); font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; margin: 0; color: var(--ink-3);
}
.cekmece-kapat {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  color: var(--ink-3); font-size: 15px; line-height: 1; padding: 6px;
  transition: color var(--dur) var(--ease);
}
.cekmece-kapat:hover { color: var(--ink); }
.cekmece-liste { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.cekmece-liste a {
  display: flex; align-items: center; gap: 14px; padding: 15px 24px;
  border-bottom: 1px solid var(--line-2);
  font-family: var(--font-display); font-size: 19px; color: var(--ink);
  transition: background var(--dur) var(--ease);
}
.cekmece-liste a:hover { background: var(--bg-2); }
.cekmece-ok { margin-left: auto; color: var(--ink-3); font-size: 14px; }
.cekmece-liste a:hover .cekmece-ok { color: var(--ink); }
/* Bayrak orani 3:2 degil - her bayragin kendi orani var; kutu sabit, gorsel
   iceride kirpilmadan oturuyor. Ince cerceve, beyaz alanli bayraklar (Sudan,
   Somali) siyah zeminde kenarsiz kalmasin diye. */
.bayrak {
  width: 30px; height: 20px; object-fit: cover; flex: 0 0 auto;
  border: 1px solid var(--line); background: var(--bg-2);
}
.cekmece-tumu {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 24px; border-top: 1px solid var(--line);
  font-family: var(--font-sans); font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
}
.cekmece-tumu:hover { background: var(--bg-2); }
/* Menude saga yaslanan tetikleyici */
.nav-sag { margin-left: auto; }

/* ---------- Genel yapi ---------- */
.grid { display: grid; gap: var(--space-l); }
.cols-main { grid-template-columns: minmax(0, 1fr) 320px; }
/* Bolum basligi: cizgi yerine solda kalin vurgu cubugu */
.sec-title {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 22px; font-weight: 700;
  letter-spacing: -.015em; text-transform: none; color: var(--ink);
  border: 0; padding: 0; margin: 0 0 var(--space-s);
}
.sec-title::before {
  content: ''; width: 6px; height: 22px; border-radius: var(--radius-pill);
  background: var(--brand); flex: 0 0 auto;
}

/* Kategori etiketi: dolgulu hap rozet */
/* Kategori etiketi: hap degil, hairline cerceveli kare rozet. Tek renkli
   palette dolgu tasiyamiyor - cerceve tasiyor. */
.kicker {
  font-family: var(--font-sans); font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2);
  background: none; border: 1px solid var(--line); padding: 3px 9px;
  border-radius: var(--radius-s); display: inline-block; margin-bottom: 10px;
}
.byline {
  font-family: var(--font-sans); font-size: 12.5px; line-height: 1.5;
  color: var(--ink-3); margin-top: 10px;
}
.byline b { color: var(--ink-2); font-weight: 600; }
.dek {
  font-family: var(--font-sans); color: var(--ink-2); font-size: 15px;
  line-height: 1.6; margin: 8px 0 0;
}

/* ---------- Manset ---------- */
.hero { padding: var(--space-m) 0 var(--space-l); }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: var(--space-l);
}
.lead h1 {
  font-size: clamp(30px, 4.2vw, 46px); line-height: 1.1; margin: 12px 0 0;
  letter-spacing: -.015em;
}
.lead .dek { font-size: 17px; margin-top: 12px; }

/* Gorsel cercevesi: yuvarlatilmis, tasmayi kirpar; icerideki gorsel hover'da
   hafifce yakinlasir. Kirpma <img>'in kendisinde degil kapsayicida yapilir. */
.lead a, .mini > a, .card a, .listrow > a, .vid > a, .mega-feature {
  display: block; overflow: hidden; border-radius: var(--radius);
  background: var(--bg-2);
}
.card a, .mini > a { border-radius: var(--radius); }
.lead img, .mini img, .card img, .listrow img, .vid img, .mega-feature img {
  aspect-ratio: 3/2; object-fit: cover; width: 100%;
  transition: transform .45s var(--ease);
}
.lead a:hover img, .mini > a:hover img, .card a:hover img,
.listrow > a:hover img, .vid > a:hover img, .mega-feature:hover img {
  transform: scale(1.045);
}

.stack { display: grid; gap: var(--space-s); }
.mini { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 14px; }
.mini h3 { font-size: 17px; line-height: 1.26; margin: 4px 0 0; }

.card h3 { font-size: 22px; line-height: 1.2; margin: 10px 0 0; }
/* Kart izgaralari: ayrac cizgisi yok, bosluk ve hareket tasiyor */
.cards-3, .cards-4 { display: grid; column-gap: var(--space-s); row-gap: var(--space-m); }
.cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Kart hover: siyah zeminde "yukselme" golgesiz calismiyor - golge zaten
   gorunmuyor, kart sebepsiz kayiyordu. Hareketi gorselin kendi yakinlasmasi
   tasiyor (yukaridaki .card a:hover img). Cerceveli kutular (.nl-card) hala
   yukseliyor: onlar nesne, kartlar icerik. */
.card, .vid { transition: opacity var(--dur) var(--ease); }

/* ---------- Son dakika rayi ----------
   Yuvarlatilmis, hafif dolgulu yuzey. */
.wires {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px 22px;
}
.wires h4 {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 14px; font-size: 12.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink);
}
/* Tek renkli paletteki tek hue: canli isareti. Baska hicbir yerde kullanma -
   her yerde kullanilan bir renk hicbir sey soylemez. */
.wires h4::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--live); flex: 0 0 auto;
}
.wires li { list-style: none; padding: 12px 0; border-top: 1px solid var(--line-2); font-size: 14.5px; line-height: 1.45; }
.wires li:first-child { border-top: 0; padding-top: 0; }
.wires ul { margin: 0; padding: 0; }
.wires .meta { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 5px; }

/* ---------- Bülten kutusu ----------
   Sayfanin tersi tonda blok: acik temada koyu, koyu temada acik. */
.promo {
  background: var(--ink); color: var(--ink-invert); padding: var(--space-s);
  border-radius: var(--radius);
}
.promo h3 { font-size: 24px; margin: 0 0 10px; color: inherit; }
.promo p { font-size: 14px; line-height: 1.6; margin: 0 0 8px; opacity: .78; }
.promo ul { padding-left: 18px; margin: 14px 0 18px; font-size: 13.5px; opacity: .78; }
.promo li { margin-bottom: 6px; }

/* ---------- Bolum bloklari ----------
   Bloklar renkli seritlerle degil, aralarina konan <hr class="rule"> ile ayrilir. */
.band { padding: var(--space-l) 0; }
/* .nl-card artik kutu degil: zemin/kenarlik/padding yok, ayrac izgaradan gelir. */
.nl-card .code {
  font-family: var(--font-sans); font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-invert);
  background: var(--ink); padding: 4px 10px; border-radius: var(--radius-s);
  display: inline-block; margin-bottom: 10px;
}
.nl-card h3 { font-size: 19px; margin: 0 0 8px; line-height: 1.24; }
.nl-card p { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); margin: 0; }

.vid { position: relative; }
/* Play dugmesi ve sure rozeti karta degil GORSELE sabitlenir; kart gorselden
   uzun oldugu icin rozet kartin altina dusuyordu. */
.vid > a { position: relative; display: block; }
.vid img { aspect-ratio: 3/2; object-fit: cover; }
.vid .play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
}
.vid .play span {
  width: 52px; height: 52px; border-radius: 50%; background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(4px);
  border: 2px solid rgba(255, 255, 255, .9); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; padding-left: 3px;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.vid > a:hover .play span { transform: scale(1.12); background: var(--brand-solid); color: var(--on-brand-solid); }
.vid .dur {
  position: absolute; right: 10px; bottom: 10px; background: rgba(0, 0, 0, .74); color: #fff;
  font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: var(--radius-s);
}
/* Tiklandiginda posterin yerine gecen oynatici (adim 41a). Poster ile AYNI
   olculeri tutuyor - 3/2, tam genislik - yoksa kart tiklama aninda ziplar ve
   seritteki komsu kartlari kaydirir. Zemin siyah cunku klip yuklenirken o
   kare bos kaliyor ve --bg-2 acik temada beyaz bir flas veriyordu. */
.klip-oynatici {
  display: block; width: 100%; aspect-ratio: 3/2; background: #000;
  border-radius: var(--radius);
}
.vid h4 { font-size: 15.5px; line-height: 1.26; margin: 10px 0 4px; }
.vid .meta { font-size: 11.5px; color: var(--ink-3); }

/* ---------- Makale sayfasi ---------- */
.article { max-width: 720px; margin: 0 auto; padding: var(--space-m) 0 var(--space-s); }
.article h1 {
  font-size: clamp(28px, 3.6vw, 42px); line-height: 1.12; margin: 12px 0 16px;
  letter-spacing: -.015em;
}
.article .lede {
  font-family: var(--font-display); font-size: 20px; line-height: 1.5;
  color: var(--ink-2); margin: 0 0 20px;
}
.article .authorbox {
  display: flex; align-items: center; gap: 12px; padding: 14px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 24px;
}
.authorbox .author-name { font-weight: 600; }
.authorbox .spacer { flex: 1; }
.byline-flat { margin: 0; }
.article-end-text { flex: 1; min-width: 220px; }
.empty-state { padding: var(--space-l) 0; color: var(--ink-3); }
.sec-title-next { margin-top: var(--space-l); }
.promo + .wires, .wires + .promo { margin-top: var(--space-s); }

.article-hero {
  aspect-ratio: 3/2; object-fit: cover; width: 100%;
  border-radius: var(--radius); margin-bottom: var(--space-s);
}
/* Hero gorsel + fotograf kredisi (ROADMAP #14). Tarayicinin <figure> icin
   verdigi 1em 40px varsayilan bosluk resmi metin sutunundan iceri kaydirirdi,
   o yuzden sifirlaniyor. Alt bosluk figure'e geciyor: gorselin kendi
   margin-bottom'u kalsaydi kredi satiri resimden bir --space-s uzakta durur,
   ustteki resimle degil asagidaki paragrafla ilgili gorunurdu. */
.article-figure { margin: 0 0 var(--space-s); }
.article-figure .article-hero { margin-bottom: 6px; }
.photo-credit { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ink-3); }
.avatar {
  width: 44px; height: 44px; border-radius: 50%; background: var(--brand-solid); color: var(--on-brand-solid);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; flex: 0 0 auto;
}
/* Okuma alani: hedef ~70 karakter/satir. ch birimi fonta gore degistigi icin
   deger tarayicida satir satir olculerek kalibre edilir (bkz. Adim 8 notu). */
.article-body {
  font-family: var(--font-sans); font-size: 18px; line-height: 1.75;
  max-width: 59ch; color: var(--ink-2);
}
.article-body p { margin: 0 0 22px; }
.article-end {
  margin-top: var(--space-m); padding: var(--space-s);
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.article-end h2 { font-size: 19px; margin: 0 0 4px; }
.article-end p { color: var(--ink-2); font-size: 13.5px; margin: 0; }
.tagrow { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--space-s) 0; }
.tag {
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0; text-transform: none;
  background: none; border: 1px solid var(--line); padding: 5px 12px;
  border-radius: var(--radius-s); color: var(--ink-2);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.tag:hover { background: var(--brand-solid); border-color: var(--brand-solid); color: var(--on-brand-solid); }

.article-related {
  max-width: 720px; margin: 0 auto; padding: var(--space-l) 0 var(--space-xl);
  border-top: 1px solid var(--line);
}

/* ---------- Bolum sayfasi ---------- */
.section-grid { padding: var(--space-s) 0 var(--space-xl); }
.pagehead {
  padding: var(--space-m) 0; background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}
.pagehead h1 {
  font-size: clamp(28px, 3.4vw, 40px); margin: 0;
  display: flex; align-items: center; gap: 16px;
}
/* Ulke sayfasinin basligindaki bayrak: satir yuksekligiyle olceklenir,
   basligin yaninda durur - kucuk bir rozet degil, baslik kadar agir. */
.bayrak-buyuk { width: 54px; height: 36px; }
.pagehead p { color: var(--ink-3); margin: 8px 0 0; font-size: 15px; }
.listrow {
  display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-s);
  padding: var(--space-s) 0;
}
.listrow + .listrow { border-top: 1px solid var(--line-2); }
.listrow h3 { font-size: 24px; line-height: 1.2; margin: 8px 0 0; }

/* ---------- Alt bilgi ---------- */
footer.site { background: var(--dark); color: var(--on-dark); padding: var(--space-xl) 0 var(--space-m); }
/* Alt bilgi TEMADAN BAGIMSIZ koyu (--dark: #000). Marka kilidi bu yuzden
   kendi rengini burada aliyor:
   - .logo b global olarak var(--ink) veriyor; acik temada bu SIYAH, yani
     kelime siyah zeminde siyah kaliyordu. Renk .logo'ya yaziliyor ki
     isaretin currentColor'i ile kelime ayni beyazi paylassin, b de onu
     miras alsin (kendi kurali daha ozgul oldugu icin acikca iptal ediliyor).
   - em de ayni sebepten --ink-3 yerine --on-dark-2 aliyor. Koyu temada iki
     token ayni degerde (#8b8d93), yani orada hicbir sey degismiyor; acik
     temada --ink-3 siyah zeminde 4.0:1'e dusuyordu, --on-dark-2 6.3:1 veriyor
     (AA, degismez kural 3). */
footer.site .logo { color: #fff; }
footer.site .logo b { color: inherit; }
footer.site .logo b em { color: var(--on-dark-2); }
footer.site a { color: var(--on-dark); }
footer.site a:hover { color: #fff; }
footer.site .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; }
/* h2, not h5: the footer follows the page's h1/h2/h3, and jumping to h5
   skips levels (Lighthouse heading-order, ROADMAP 7.1). Looks unchanged. */
footer.site h2 {
  color: #fff; font-family: var(--font-sans); font-weight: 700;
  font-size: 12px; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 14px;
}
footer.site ul { list-style: none; padding: 0; margin: 0; font-size: 13.5px; }
footer.site li { margin-bottom: 7px; }
footer.site .fine {
  border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 30px; padding-top: 18px;
  font-size: 12.5px; color: var(--on-dark-2); display: flex; gap: 16px; flex-wrap: wrap;
}
/* ---------- Duyarli ---------- */
@media (max-width: 1000px) {
  /* Motto burada cekiliyor (eskiden 700px'ti). Genisligi ~145px ve arada
     kalan bantta tek kaybeden marka kilidi oluyordu. */
  .logo .motto { display: none; }
  .mega-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mega-col-wide { grid-column: span 3; }
  .cols-main, .hero-grid { grid-template-columns: 1fr; }
  .cards-3, .cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  footer.site .cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  /* Ust bar: tarih ve rozetler dar ekranda gizlenir, menu nefes alsin */
  .topbar .wrap { gap: 14px; }
  .topbar .date, .free-flag { display: none; }
  .masthead .wrap { padding-top: 16px; padding-bottom: 14px; }

  /* Menu: baslik seridi yatay kayar, mega panel tek sutuna duser ve
     dokunmayla (:focus-within) acilir; panel kendi icinde kayar. */
  .nav-list { overflow-x: auto; gap: 18px; }
  /* Ulkeler dar ekranda kayan seridin sonunda kalip gorunmez oluyordu.
     Konumlandirilmis ata .mainnav .wrap oldugu icin buton kaydirma
     kutusundan cikar ve sagda sabit durur; serit altindan kayar. */
  .mainnav .wrap { position: relative; padding-right: 122px; }
  .nav-sag {
    position: absolute; right: 24px; top: 0; bottom: 0; margin: 0;
    display: flex; align-items: center; background: var(--bg);
    padding-left: 14px; box-shadow: -14px 0 14px -10px rgba(0, 0, 0, .75);
  }
  .mega { max-height: 72vh; overflow-y: auto; padding: var(--space-s) 0; }
  .mega-cols { grid-template-columns: 1fr; gap: var(--space-s); }
  .mega-col-wide { grid-column: span 1; }
  .mega-col { border-top: 1px solid var(--line-2); padding-top: 14px; }
  .mega-col:first-child { border-top: 0; padding-top: 0; }

  /* Baslik boyutlari clamp() ile akiskan; burada yalnizca govde ayarlanir. */
  .article-body { font-size: 17px; }
  .cards-3, .cards-4 { grid-template-columns: 1fr; row-gap: var(--space-m); }
  .listrow { grid-template-columns: 1fr; }
  .mini { grid-template-columns: 96px minmax(0, 1fr); }
  .masthead .wrap { flex-wrap: wrap; }
  .search { width: 100%; }
  .logo b { font-size: 30px; }
  .logo-mark { width: 27px; height: 27px; }
  .logo { gap: 10px; }
}

/* ==========================================================================
   Yerlesim revizyonu - simetrik kart dizisi yerine asimetrik editoryal yapi
   ========================================================================== */

/* ---------- Son dakika ticker'i ---------- */
.ticker {
  display: flex; align-items: stretch; gap: 0;
  background: var(--ink); color: var(--ink-invert);
  overflow: hidden;
}
.ticker-etiket {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  background: var(--live); color: var(--live-ink);
  padding: 0 16px; font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
}
.ticker-pencere { flex: 1; overflow: hidden; min-width: 0; }
.ticker-akis { display: flex; width: max-content; animation: kay 46s linear infinite; }
.ticker:hover .ticker-akis, .ticker:focus-within .ticker-akis { animation-play-state: paused; }
.ticker-grup { display: flex; }
.ticker a {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 22px; font-size: 13px; color: var(--ink-invert); white-space: nowrap;
}
.ticker a:hover { color: var(--brand-on-dark); }
.ticker-nokta {
  width: 4px; height: 4px; border-radius: 50%; background: var(--ink-3); flex: 0 0 auto;
}
@keyframes kay { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Reserve the header's height until site.js draws it (ROADMAP 7.1).
   #chrome-top is empty in the served HTML and chrome() fills it only after
   the JSON data loads, while <main>'s static skeleton paints at once - so the
   header arrived 208px tall ABOVE content already on screen and pushed it
   all down. Lighthouse desktop measured CLS 1.0 on / and 0.78 on a story.
   Heights measured 2026-09-10 in iframes of each width: 208 at 701px and up,
   250 at 412-700, 270 at 320-360. :empty stops matching the moment chrome()
   writes into the div, so the real header always wins. If the header changes
   height (a new row, the ticker gone), re-measure and update these three. */
#chrome-top:empty { min-height: 208px; }
@media (max-width: 700px) { #chrome-top:empty { min-height: 250px; } }
@media (max-width: 400px) { #chrome-top:empty { min-height: 270px; } }

/* ...and keep <main> unpainted until the same moment. Reserving the header
   alone halved CLS (desktop 1.0 -> 0.52); the rest was <main>'s own static
   skeleton - section headings, empty boxes, on a story the server-rendered
   text - painting first and then being pushed down as the data filled in
   above it. Every page calls chrome() and fills its content in the SAME task,
   so while #chrome-top is still empty the content is not ready either; an
   invisible element's movement is not a layout shift.
   The animation is the safety net: if JavaScript or the data fails,
   visibility comes back after 3s by itself, so no page can stay blank. The
   500 page ships a non-empty #chrome-top on purpose and is never hidden. */
#chrome-top:empty ~ main { visibility: hidden; animation: ucs-reveal 0s linear 3s forwards; }
@keyframes ucs-reveal { to { visibility: visible; } }
@media (prefers-reduced-motion: reduce) {
  .ticker-akis { animation: none; }
  .ticker-pencere { overflow-x: auto; }
}

/* ---------- Blok basliklari: numarali, saga hizali eylem ---------- */
.blok-basi {
  display: flex; align-items: baseline; gap: var(--space-s);
  margin-bottom: var(--space-s);
}
.blok-basi .sec-title { margin: 0; }
.sec-no {
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  color: var(--ink-3); font-variant-numeric: tabular-nums;
  align-self: flex-start; margin-top: 2px;
}
.sec-title::before { display: none; }
.blok-link {
  margin-left: auto; font-size: 13px; font-weight: 700; color: var(--ink-2);
  white-space: nowrap; text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: var(--line);
}
.blok-link:hover { color: var(--brand-ink); text-decoration-color: currentColor; }
.blok-not { margin-left: auto; font-size: 13px; color: var(--ink-3); white-space: nowrap; }
.band-ilk { padding-top: var(--space-l); }

/* ---------- On sayfa: gazete on sayfasi ----------
   Fotografin uzerine binen tam genislikte manset kaldirildi. Basligin
   okunurlugu her seferinde fotografa bagliydi ve perdeyi koyulastirmaktan
   baska caresi yoktu. Yeni duzen: solda gorsel + ALTINDA olabildigince buyuk
   baslik, sagda ince bir cizgiyle ayrilmis "Latest" sutunu, altta uc metin
   sutunu. Kutu yok, golge yok, koseler duz - ayrimi cizgiler yapiyor. */
.front { padding: var(--space-m) 0 var(--space-l); }
.front-grid {
  display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr);
  gap: var(--space-l); align-items: start;
}
.front-lead-img { display: block; overflow: hidden; background: var(--bg-2); }
.front-lead-img img {
  width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block;
  transition: transform .5s var(--ease);
}
.front-lead-img:hover img { transform: scale(1.03); }
.front-lead .kicker { margin: 18px 0 10px; }
.front-lead h1 {
  font-size: clamp(34px, 4.4vw, 60px); line-height: 1.03;
  letter-spacing: -.02em; margin: 0; max-width: 18ch;
}
.front-lead .dek { font-size: 18px; max-width: 58ch; margin-top: 14px; }

/* Sag sutun: dikey cizgi ayirir, kutu degil. */
.front-yan { border-left: 1px solid var(--line); padding-left: var(--space-s); }
.tick { list-style: none; margin: 0; padding: 0; }
.tick li { padding: 14px 0; border-top: 1px solid var(--line-2); }
.tick li:first-child { border-top: 0; padding-top: 0; }
.tick time {
  display: block; font-family: var(--font-sans); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 5px; font-variant-numeric: tabular-nums;
}
.tick h3 { font-size: 16.5px; line-height: 1.3; margin: 0; }

/* Manset altindaki uc sutun: aralarinda dikey cizgi, gorsel yok. */
.front-alt {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
  margin-top: var(--space-l); padding-top: var(--space-s);
  border-top: 2px solid var(--ink);
}
.front-alt-kart { padding: 0 var(--space-s); }
.front-alt-kart + .front-alt-kart { border-left: 1px solid var(--line); }
.front-alt-kart:first-child { padding-left: 0; }
.front-alt-kart:last-child { padding-right: 0; }
.front-alt-kart h3 { font-size: 21px; line-height: 1.2; margin: 0 0 8px; }
.front-alt-kart .dek { font-size: 14.5px; margin: 0; }

/* Bolum basligi: kucuk buyuk harf etiket, saga uzanan sac teli cizgi. */
.sec-head { display: flex; align-items: center; gap: 16px; margin: 0 0 var(--space-s); }
.sec-head h2 {
  font-family: var(--font-sans); font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
  margin: 0; white-space: nowrap;
}
.sec-rule { flex: 1; height: 1px; background: var(--line); }
.band-koyu .sec-head h2 { color: var(--brand-on-dark); }
.band-koyu .sec-rule { background: rgba(255, 255, 255, .18); }

.byline-ters { color: rgba(255, 255, 255, .72); }
.byline-ters b { color: #fff; }

/* ---------- Bento: kasitli olarak esit olmayan kartlar ---------- */
.bento {
  display: grid; gap: var(--space-s); align-items: start;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
/* Ust blok: solda genis one cikan kart, sagda uc kompakt satirdan olusan sutun.
   Sutun kendi izgarasi; satirlar buyuk kartin yuksekligine esit araliklarla yayilir. */
.bento-buyuk { grid-column: span 4; }
/* One cikan kartin gorseli 16/9: 3/2 kart yuksekligini gereksiz buyutuyordu */
.bento-buyuk > a img { aspect-ratio: 16/9; }
.bento-buyuk h3 { font-size: clamp(26px, 2.6vw, 36px); }
/* Sag sutun: satirlar bastan asagi sikisik dizilir, kalan bosluk altta toplanir.
   Esit satirlara bolup ortalamak (onceki deneme) ayraclari icerikten kopariyordu. */
.bento-sutun {
  grid-column: span 2; display: grid; align-content: start; gap: 0;
}
.bento-kucuk {
  padding: 16px 0; border-top: 1px solid var(--line);
  grid-template-columns: 132px minmax(0, 1fr); gap: 16px;
}
.bento-sutun > .bento-kucuk:first-child { border-top: 0; padding-top: 0; }
.bento-kucuk h3 { font-size: 16.5px; }
/* Alt blok: iki esit genislikte kart */
.bento-orta { grid-column: span 3; }
.bento-orta h3 { font-size: 20px; }

/* ---------- Yatay kayan serit ---------- */
/* Dispatch seridi: HER IKI temada da koyu bant.
   Onceki tanim --ink zeminliydi, yani "sayfanin tersi": acik temada siyah,
   koyu temada BEYAZ. Siyah sayfada bu, serit boyunca dev bir beyaz levha
   uretiyordu ve ayni sayfadaki bulten kutusu da ters donuk oldugu icin iki
   beyaz blok yan yana dusuyordu. Sayfada tek bir ters blok kaliyor (.promo);
   bu serit artik tam siyah bir yuzey - koyu temada sayfadan (#0a0a0b) bir
   ton daha koyu, acik temada eskisi gibi koyu bant. */
.band-koyu { background: var(--dark); color: var(--on-dark); }
.band-koyu h1, .band-koyu h2, .band-koyu h3, .band-koyu h4,
.band-koyu .sec-title, .band-koyu .kutu-baslik { color: var(--brand-on-dark); }
.sec-title-ters { color: var(--brand-on-dark); }
.band-koyu .blok-not { color: var(--on-dark-2); }
.band-koyu .sec-no { color: var(--on-dark-2); }
.band-koyu .byline, .band-koyu .byline-ters { color: var(--on-dark-2); opacity: 1; }
.rail-pencere { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 300px);
  gap: var(--space-s); padding: 0 max(24px, calc((100vw - var(--wrap)) / 2 + 24px));
}
.rail-kart { scroll-snap-align: start; }
.rail-kart h3 { font-size: 17px; margin: 12px 0 0; line-height: 1.25; }
.band-koyu .rail-kart h3 a { color: var(--brand-on-dark); }
.band-koyu .rail-kart h3 a:hover { color: var(--on-dark); }

/* ---------- Akis + yapiskan yan kolon ---------- */
.akis-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-l); }
.yan { display: grid; gap: var(--space-s); align-content: start; position: sticky; top: 88px; }
.kutu { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; }
.kutu-baslik {
  font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  margin: 0 0 16px; color: var(--ink);
}

/* Numarali liste: iri, ici bos rakamlar */
.sirali-liste { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.sirali { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; padding: 12px 0; }
.sirali + .sirali { border-top: 1px solid var(--line); }
.sira {
  font-size: 30px; font-weight: 800; line-height: 1; color: transparent;
  -webkit-text-stroke: 1.5px var(--brand); font-variant-numeric: tabular-nums;
}
.sirali h3 { font-size: 15px; line-height: 1.3; margin: 0; }

/* ---------- Bulten izgarasi ---------- */
.nl-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-s); }
.nl-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 24px; transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.nl-card:hover { border-color: var(--brand); transform: translateY(-3px); }
.band-alt { background: var(--bg-2); }

/* ---------- Bulten kayit formu ---------- */
/* Sitedeki TEK form. Yer tutucu (placeholder) etiket yerine kullanilmiyor:
   yer tutucu yazilmaya baslaninca kayboluyor ve ekran okuyucularin bir kismi
   hic okumuyor - her alanin gorunur bir <label>'i var. */
.nl-form { display: grid; gap: var(--space-xs); max-width: 560px; margin: var(--space-s) 0 0; }
.nl-field { display: grid; gap: 8px; }
.nl-field > label { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--ink); }
.nl-form input[type="email"] {
  font-family: inherit; font-size: 16px; color: var(--ink);
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--radius-s);
  padding: 12px 14px; width: 100%;
  transition: border-color var(--dur) var(--ease);
}
/* 16px kucultulmuyor: iOS Safari 16px'ten kucuk bir alana odaklaninca sayfayi
   otomatik yakinlastiriyor ve geri uzaklastirmiyor. */
.nl-form input[type="email"]:hover { border-color: var(--brand); }
.nl-form input[type="email"][aria-invalid="true"] { border-color: var(--warn); }

/* fieldset/legend, not a div with a heading: a screen reader then announces
   "Which letters?" with every checkbox it reads out. legend cannot be a grid
   item reliably across engines, so the grid is the inner wrapper. */
.nl-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.nl-fieldset legend {
  font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--ink);
  padding: 0; margin: 0 0 10px;
}
.nl-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.nl-check {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start;
  font-size: 14px; color: var(--ink-2); cursor: pointer;
}
.nl-check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--brand-solid); }
.nl-check b { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }

.nl-form .btn-cta { justify-self: start; border: 0; cursor: pointer; font-family: inherit; }
.nl-form .btn-cta[disabled] { opacity: .55; cursor: default; transform: none; }

.form-note { font-size: 13px; line-height: 1.5; color: var(--ink-3); margin: 8px 0 0; }
/* Durum kutulari: renk TEK gosterge degil - her birinin metni de durumu
   soyluyor, renk korlugu icin (WCAG 1.4.1). */
.form-msg {
  font-size: 14px; line-height: 1.5; border-radius: var(--radius-s);
  padding: 12px 14px; border: 1px solid var(--line-2); margin: var(--space-xs) 0 0;
}
.form-msg-ok { border-color: var(--ok); color: var(--ink); background: var(--bg-3); }
.form-msg-bad { border-color: var(--warn); color: var(--ink); background: var(--bg-3); }
.form-msg:empty { display: none; }

@media (max-width: 700px) {
  .nl-choices { grid-template-columns: 1fr; }
}

/* ---------- Duyarli ---------- */
@media (max-width: 1000px) {
  /* Manset ve yan sutun alt alta; dikey cizgi yatay cizgiye doner. */
  .front-grid { grid-template-columns: 1fr; gap: var(--space-m); }
  .front-yan { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; padding-top: var(--space-s); }
  .front-alt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .front-alt-kart:nth-child(2) { padding-right: 0; }
  .front-alt-kart:nth-child(3) { padding-left: 0; padding-top: var(--space-s); margin-top: var(--space-s); border-left: 0; border-top: 1px solid var(--line); grid-column: span 2; }
  .akis-duzen { grid-template-columns: 1fr; }
  .yan { position: static; }
  /* Buyuk kart ve sag sutun alt alta; sutun artik esit satirlara bolunmez */
  .bento-buyuk, .bento-sutun { grid-column: span 6; }
  .bento-sutun { grid-auto-rows: auto; }
  .bento-kucuk { align-self: start; }
  .bento-orta { grid-column: span 3; }
}
@media (max-width: 700px) {
  .bento-orta { grid-column: span 6; }
  .bento-kucuk { grid-template-columns: 96px minmax(0, 1fr); }
  .nl-izgara { grid-template-columns: 1fr; }
  .blok-basi { flex-wrap: wrap; gap: 10px; }
  .front-alt { grid-template-columns: 1fr; border-top-width: 1px; }
  .front-alt-kart { padding: 18px 0; }
  .front-alt-kart + .front-alt-kart { border-left: 0; border-top: 1px solid var(--line); }
  .front-lead .dek { font-size: 16px; }
  .rail { grid-auto-columns: minmax(230px, 82vw); padding: 0 24px; }
}

/* Yatay kayan seritlerde kaydirma cubugunu gizle - kaydirma calismaya devam eder.
   Windows'ta kalici gorunen gri cubuk tasarimi bozuyordu. */
.rail-pencere, .nav-list, .cekmece-liste, .table-scroll {
  scrollbar-width: none; -ms-overflow-style: none;
}
.cekmece-liste::-webkit-scrollbar,
.rail-pencere::-webkit-scrollbar,
.nav-list::-webkit-scrollbar,
.table-scroll::-webkit-scrollbar { width: 0; height: 0; }

/* Cipa ile hedeflenen kayitlar (wire notu, bulten, video, etkinlik).
   Bu kayitlarin kendi sayfasi yok; ticker / rail / mega menu bir liste
   sayfasindaki karta "#..." ile atliyor.

   scroll-margin-top SART: .mainnav sticky (top: 0) oldugu icin tarayicinin
   atladigi kart serigin ALTINDA kalirdi ve okuyucu neye atlandigini gormezdi.
   Deger serit yuksekliginden biraz buyuk.

   :target vurgusu, uzun bir listede hangi kayda gelindigini soyleyen tek
   isaret; rengi --brand'den geliyor, dosyada renk sabiti yok (HANDOFF 11). */
:target { scroll-margin-top: 96px; }
.listrow:target, .nl-card:target, .card:target, .rail-kart:target {
  outline: 2px solid var(--brand);
  outline-offset: 6px;
  border-radius: var(--radius);
}