/* =========================================================================
   Advenway — Saha Rehberi tasarımı
   Kaynak: "Advenway Saha Rehberi.dc.html" (Claude Design)

   İLKE: Prototipteki satır içi biçimler buraya taşındı. Prototipin React
   kalıntıları (borderBottom, boxShadow, borderRadius, zIndex, style-hover)
   production'da geçerli CSS değil — hepsi burada gerçek CSS özelliklerine
   ve :hover kurallarına çevrildi.

   Köşe yarıçapı YOK ve gölge YOK: keskin kenar bu tasarımın karakteri.
   ========================================================================= */

/* ---------- 1. Tasarım tokenları ---------------------------------------- */
:root {
  /* Kâğıt (açık) yüzeyler */
  --adv-kagit:        #EFEDE7;
  --adv-kagit-2:      #E9E6DE;
  --adv-kagit-3:      #E6E3DB;   /* hover + yardımcı kutu */
  --adv-yer-tutucu:   #D9D6CE;   /* görsel yüklenene kadar */

  /* Mürekkep (koyu) yüzeyler */
  --adv-murekkep:     #12161B;
  --adv-koyu-2:       #1A1F25;   /* koyu hover */
  --adv-koyu-3:       #232A31;
  --adv-koyu-vurgu:   #171C22;   /* etkileşimli araç satırı */

  /* Kâğıt üzeri metin */
  --adv-baslik:       #14181C;
  --adv-govde:        #22262A;
  --adv-ikincil:      #4A4F55;
  --adv-meta:         #6B7076;

  /* Mürekkep üzeri metin */
  --adv-krem:         #EFEDE7;
  --adv-krem-2:       #B9BEB7;
  --adv-krem-3:       #8E958F;
  --adv-krem-4:       #6E756F;
  --adv-krem-etiket:  #9AA39C;

  /* Turuncu vurgu — zemine göre üç kademe */
  --adv-turuncu:        oklch(0.66 0.19 45);   /* dolu yüzey, üstüne mürekkep metin */
  --adv-turuncu-koyu:   oklch(0.72 0.17 45);   /* koyu zemin üzerinde metin */
  --adv-turuncu-acik:   oklch(0.58 0.19 45);   /* açık zemin üzerinde metin */
  --adv-turuncu-parlak: oklch(0.80 0.16 45);
  --adv-turuncu-derin:  oklch(0.50 0.17 45);

  /* Durum renkleri */
  --adv-yesil:        oklch(0.52 0.13 150);
  --adv-yesil-acik:   oklch(0.75 0.15 145);
  --adv-amber:        oklch(0.80 0.15 85);
  --adv-kirmizi:      oklch(0.55 0.20 25);
  --adv-kirmizi-acik: oklch(0.68 0.19 25);

  /* Çizgiler */
  --adv-cizgi:        rgba(20, 24, 28, 0.14);
  --adv-cizgi-koyu:   rgba(20, 24, 28, 0.20);
  --adv-cizgi-vurgu:  #14181C;
  --adv-cizgi-krem:   rgba(239, 237, 231, 0.16);
  --adv-cizgi-krem-2: rgba(239, 237, 231, 0.18);
  --adv-cizgi-krem-3: rgba(239, 237, 231, 0.30);

  /* Tipografi */
  --adv-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --adv-sans:  'Space Grotesk', Helvetica, Arial, sans-serif;
  --adv-mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Ölçü */
  --adv-yan:   36px;     /* sayfa yatay boşluğu */
  --adv-min:   1320px;   /* tasarımın kurulduğu genişlik */
}

/* ---------- 2. Temel ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--adv-kagit);
  color: var(--adv-baslik);
  font-family: var(--adv-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Tasarım 1320px'te kuruldu; altına inince mobil bloğu devreye girer. */
/*
 * ⚠️ min-width KALDIRILDI (21.08.2026) — burada gerçek bir kusur vardı.
 *
 * Eskiden `min-width: var(--adv-min)` yani 1320px'ti. Bu ölçü tasarım
 * dosyalarından geldi: prototipler tuval olduğu için hepsinde
 * `min-width:1320px` yazıyor. Üretime taşınınca şu oldu — kural yalnız
 * ≤900px'te sıfırlanıyordu, dolayısıyla **901–1319 px arasındaki her
 * ekranda sitenin TAMAMINDA yatay kaydırma** vardı: yatay tablet, küçük
 * dizüstü, yarıya bölünmüş tarayıcı penceresi.
 *
 * Ölçüldü (961 px): kural kaldırılınca belge 1320 → 946 px'e indi,
 * taşan tek öğe kalmadı, header 340 px yüksekliğini korudu, logo
 * 242 px, altı menü bağlantısı ve Araçlar düğmesi yerinde. İç kaplar
 * zaten `max-width` ile sınırlı olduğu için hiçbir düzen bozulmadı.
 */
.adv-sayfa { min-width: 0; }

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

a { color: inherit; text-decoration: none; }
a:hover { color: var(--adv-turuncu-acik); }

/* Koyu bantların içinde hover turuncusu açık tona döner. */
.adv-koyu a:hover { color: var(--adv-turuncu-koyu); }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; }

button { font-family: inherit; }

::selection { background: var(--adv-turuncu); color: var(--adv-murekkep); }

/* Klavye erişilebilirliği — her etkileşimli öğede görünür odak. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--adv-turuncu);
  outline-offset: 3px;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--adv-turuncu);
  outline-offset: 2px;
}

/* Ekran okuyucu metni + "içeriğe atla" bağlantısı. */
.adv-gizli {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.adv-atla:focus {
  position: fixed;
  top: 8px; left: 8px;
  z-index: 100;
  width: auto; height: auto;
  clip: auto;
  margin: 0;
  padding: 12px 20px;
  background: var(--adv-turuncu);
  color: var(--adv-murekkep);
  font-size: 14px;
  font-weight: 700;
}

/* ---------- 3. Yinelenen yardımcılar ------------------------------------ */

/* Bölüm kabuğu: yatay boşluk her bölümde aynı. */
.adv-bolum { padding: 56px var(--adv-yan) 60px; }
.adv-bolum--cizgili { border-bottom: 1px solid var(--adv-cizgi); }
.adv-koyu { background: var(--adv-murekkep); color: var(--adv-krem); }

/* Bölüm başlığı satırı: solda başlık, sağda "tümü →" bağlantısı. */
.adv-bolum-basi {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 26px;
}
.adv-bolum-basi h2 {
  margin: 0;
  font-family: var(--adv-serif);
  font-size: 34px;
  font-weight: 600;
}
.adv-tumu {
  font-family: var(--adv-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--adv-ikincil);
  white-space: nowrap;
}

/* Koyu bantların turuncu üst etiketi (eyebrow). */
.adv-eyebrow {
  font-family: var(--adv-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--adv-turuncu-koyu);
}

/* Görsel yer tutucusu: yüklenene kadar kutu boyu sabit kalsın (CLS). */
.adv-gorsel {
  display: block;
  width: 100%;
  object-fit: cover;
  background: var(--adv-yer-tutucu);
}

/* Kategori/meta şeridi — kart ve hero üstündeki mono satır. */
.adv-kunye {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--adv-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--adv-ikincil);
}
.adv-kunye__kat { color: var(--adv-turuncu-acik); }

/* Durum etiketi — yarış kaydı, sezon durumu. Renk TEK BAŞINA anlatmaz:
   her rozette metin de bulunur (renk körlüğü kuralı). */
.adv-rozet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  font-family: var(--adv-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #FBFAF6;
}
.adv-rozet--acik   { background: var(--adv-yesil); }
.adv-rozet--son    { background: var(--adv-turuncu); color: var(--adv-murekkep); }
.adv-rozet--bugun  { background: var(--adv-kirmizi); }
.adv-rozet--kapali { background: #6B7076; }
.adv-rozet--iptal  { background: var(--adv-kirmizi); text-decoration: line-through; }

/* ⓘ ipucu — veri tazeliği. Hover VE klavye odağında açılır. */
.adv-ipucu {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border: 1px solid rgba(239, 237, 231, 0.32);
  border-radius: 50%;
  font-family: var(--adv-mono);
  font-size: 10px;
  color: var(--adv-krem-2);
  cursor: help;
  flex-shrink: 0;
}
.adv-ipucu:hover,
.adv-ipucu:focus-visible {
  border-color: var(--adv-turuncu-koyu);
  color: var(--adv-turuncu-koyu);
}
.adv-ipucu__kutu {
  position: absolute;
  bottom: 26px; left: -8px;
  width: 236px;
  padding: 10px 12px;
  background: var(--adv-kagit);
  color: var(--adv-govde);
  font-family: var(--adv-sans);
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  z-index: 5;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .13s ease-out, transform .13s ease-out, visibility .13s;
}
.adv-ipucu:hover > .adv-ipucu__kutu,
.adv-ipucu:focus-visible > .adv-ipucu__kutu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* Son panodaki ipucu sağa taşmasın. */
.adv-pano__kutu:last-child .adv-ipucu__kutu { left: auto; right: -8px; }

/* ---------- 4. Üst şerit ------------------------------------------------- */
.adv-serit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  padding: 0 var(--adv-yan);
  border-bottom: 1px solid rgba(239, 237, 231, 0.12);
  font-family: var(--adv-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--adv-krem-3);
}
.adv-serit__slogan {
  font-weight: 600;
  font-size: 12px;
  color: var(--adv-krem-2);
}
.adv-serit__sosyal { display: flex; align-items: center; gap: 20px; }
/* Dil bayrakları: X'in sağında, ince bir ayraçla sosyal hesaplardan ayrılır. */
.adv-serit__diller {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-left: 20px;
  border-left: 1px solid rgba(239, 237, 231, 0.2);
}
.adv-serit__bayrak {
  display: block;
  line-height: 0;
  opacity: 0.85;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.adv-serit__bayrak svg {
  display: block;
  width: 21px;
  height: 14px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(239, 237, 231, 0.25);
}
.adv-serit__bayrak:hover,
.adv-serit__bayrak:focus-visible {
  opacity: 1;
  transform: translateY(-1px);
}

/* ---------- 5. Header ---------------------------------------------------- */
/*
 * 🚫 BU BLOKTAKİ SINIF ADI `adv-ust`, `adv-header` DEĞİL — GERİ ADLANDIRMA.
 *
 * `.adv-header` reklam engelleyicilerin filtre listelerinde yer alan bilinen
 * bir reklam kutusu adı. Eklenti CSS'i "user" katmanından enjekte ettiği için
 * sayfanın `!important`'ını bile yeniyor: header eklentili tarayıcılarda
 * TAMAMEN kayboluyordu (21 Ağu 2026, canlıda ölçüldü — satır içi
 * `display:block !important` dahi işe yaramadı).
 *
 * Ölçüm: temanın 38 `adv-*` sınıfından yalnızca `adv-header` engelleniyordu.
 * `adv-banner` ve `adv-top` da engelli çıktı — yeni sınıf adı seçerken bu
 * üçünden ve reklam çağrıştıran adlardan kaçın.
 */
/*
  Header iki katmandır ve sırası önemlidir:
  1) 8 duraklı gradyan — soldan (kâğıt) sağa (mürekkep) rampa,
  2) üstüne sağdan sola şeffaflaşan koyu levha.
  Levha, ekran daralınca menünün gri bölgeye kaymasını engeller; bu yüzden
  menü rengi SABİT kremdir ve genişliğe göre renk ayarlaması YAPILMAZ.
*/
.adv-ust { background: var(--adv-murekkep); color: var(--adv-krem); }

.adv-ust__bant {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 340px;
  padding: 0 var(--adv-yan);
  background: linear-gradient(90deg,
    #FBFAF6 0%, #F7F4ED 22%, #EAE6DD 46%, #D2CEC5 62%,
    #A7A6A2 71%, #5E6469 80%, #262C31 88%, #12161B 96%);
}
.adv-ust__levha {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 88%;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(18, 22, 27, 0)    0%,
    rgba(18, 22, 27, 0.14) 10%,
    rgba(18, 22, 27, 0.34) 20%,
    rgba(18, 22, 27, 0.56) 30%,
    rgba(18, 22, 27, 0.74) 40%,
    rgba(18, 22, 27, 0.87) 52%,
    rgba(18, 22, 27, 0.95) 66%,
    #12161B 82%);
}
/* Logo, menü ve arama levhanın ÜSTÜNDE durur. */
.adv-ust__logo,
.adv-ust__nav,
.adv-ust__sag { position: relative; }

/* -------------------------------------------------------------------------
 * MENÜ PERDESİ — KALDIRILDI (22 Ağu). Üç tur denendi, üçü de yanlıştı.
 * Buraya bir daha eklemeden ÖNCE bu notu oku.
 *
 * NE DENENDİ: menünün arkasına ikinci bir koyu perde (`.adv-ust__nav::before`)
 * koyup ilk menü öğesinin kontrastını AA eşiğine (4,5) çıkarmak.
 *   1. tur: menü yüksekliğinde kutu    → ortada kenarları belli levha
 *   2. tur: aynı kutu, daha koyu       → levha daha da belirgin, logo karardı
 *   3. tur: tam yükseklik, logoya değmiyor → levha gitti AMA geçiş bozuldu
 *
 * 3. turun ölçümü (1440 px, üst barın parlaklık eğrisi soldan sağa):
 *     tasarım  : 95 93 82 68 51 36 24 15 9 6 4 …  en dik adım 17 puan
 *     perdeyle : 95 93 82 59  8  5  3  2 1 …      en dik adım 51 puan
 * Yani tasarımın 0→%70 boyunca yayılan uzun geçişi %15–25 arasına sıkışıyor,
 * gerisi düz karanlık kalıyor. Kullanıcı: "geçiş hiç güzel olmadı."
 *
 * NEDEN HİÇBİR PERDE AYARI ÇALIŞMAZ — geometri elverişsiz:
 * Beyaz metnin 4,5 kontrast tutması için zeminin parlaklığı ≤ %18 olmalı.
 * İlk menü öğesi ("Koşu") barın ~%21'inde duruyor; tasarım eğrisi oraya
 * ~%65 parlaklık koyuyor. %18'e indirmek eğriyi ~15 puan sola kaydırmak
 * demek — ama logo barın %2,5–19'unda, yani aynı bölgede. Menüyü kurtaran
 * her ayar logoyu karartıyor. Ölçülen dört adayda da bu böyleydi.
 *
 * TASARIM BU SORUNU BAŞKA TÜRLÜ ÇÖZÜYOR: menü bağlantılarında
 * `text-shadow: 0 1px 14px rgba(11,17,22,0.75)` var (aşağıda, korunuyor).
 * WCAG formülü gölgeyi hesaba katmaz, dolayısıyla ölçülen sayı düşük çıkar
 * ama gerçek okunabilirlik sayının söylediğinden iyidir.
 *
 * GERÇEKTEN ÇÖZMEK GEREKİRSE (perde DEĞİL, ikisi de yerleşim işi):
 *   ① Menüyü sağa kaydır — koyu bölgeye otursun (tasarımdan sapma).
 *   ② Levhanın kendi durakları yeniden dengelensin ve logo daha sola alınsın.
 * ---------------------------------------------------------------------- */

/*
 * ⚠️ LOGODA `max-width:100%` KULLANMA — GÖRSEL 0 PİKSELE ÇÖKÜYOR.
 * Sıfırlama katmanındaki `img { max-width:100% }`, otomatik genişlikli bir
 * flex kapsayıcının içinde döngü kuruyor: kapsayıcı genişliğini görselden,
 * görsel max-width'ini kapsayıcıdan alıyor ve ikisi 0'da anlaşıyor. Sonuç:
 * logo yükleniyor (817×1024, complete) ama hesaplanan genişliği 0px oluyor ve
 * header boş bir gradyan bandı gibi görünüyor. 21 Ağu 2026'da canlıda ölçüldü.
 * Çözüm: kapsayıcı esnemesin, görselin max-width'i kalksın.
 */
.adv-ust__logo { display: flex; align-items: center; flex: 0 0 auto; }
.adv-ust__logo img {
  display: block;
  height: 240px;
  width: auto;
  max-width: none;
}

/*
 * Menü ortada kalır ve taşarsa sarar. Taşma önemli: uzun bir menü bağlanınca
 * sağdaki arama + Araçlar butonu bandın dışına itiliyor ve sayfa yatayda
 * kayıyordu (canlıda menü 1094px'e çıkmıştı).
 */
.adv-ust__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
  gap: 30px;
  font-size: 18px;
  font-weight: 600;
  color: #F6F9FA;
  /* ⚠️ DÖRT KATMANLI GÖLGE — TASARIMDAKİ TEK KATMANIN YERİNE (22 Ağu).
     Tasarım tek bir `0 1px 14px rgba(11,17,22,.75)` kullanıyordu; levha
     soldan sağa koyulaştığı için İLK iki öğe ("Koşu", "Outdoor") hâlâ açık
     zeminde kalıyor ve o tek gölge onları taşımıyordu — ölçülen kontrast
     1440 px'te 2,84, çıplak gözle de yıkanmış görünüyordu.
     Perde denendi ve ÜÇ TURDA DA BAŞARISIZ oldu (yukarıdaki uzun nota bak);
     sorunu çözen şey metnin kendi halesi: yakın+geniş katmanlar harflerin
     hemen çevresinde koyu bir alan üretiyor, üst barın gradyanına ise HİÇ
     dokunmuyor. Koyu tarafta zaten görünmez.
     WCAG formülü gölgeyi hesaba katmaz; bu yüzden ölçülen sayı düşük kalır
     ama gerçek okunabilirlik sayının söylediğinden iyidir. */
  text-shadow:
    0 1px  2px rgba(11, 17, 22, 0.92),
    0 0   10px rgba(11, 17, 22, 0.90),
    0 0   22px rgba(11, 17, 22, 0.75),
    0 0   40px rgba(11, 17, 22, 0.50);
}
.adv-ust__nav a:hover { color: var(--adv-turuncu-koyu); }
/* WordPress menüsü <ul> basar; tasarımdaki düz sırayı korumak için sıfırla. */
.adv-ust__nav ul {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Alt menüsü olan öğelerin çocukları üst düzeyde gösterilmez; menü tek
   satırdır. Alt kırılımlar footer'da ve /kategoriler/ sayfasındadır. */
.adv-ust__nav ul ul { display: none; }

.adv-ust__sag { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }

.adv-ara {
  display: flex;
  align-items: center;
  height: 42px;
  padding: 0 6px 0 14px;
  border: 1px solid var(--adv-cizgi-krem-3);
}
.adv-ara__ikon { font-size: 14px; color: var(--adv-krem); }
.adv-ara input {
  width: 104px; height: 38px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--adv-krem);
  font-family: inherit;
  font-size: 14px;
}
.adv-ara input::placeholder { color: #C9CDC7; opacity: 1; }

.adv-ust__cta {
  display: flex;
  align-items: center;
  height: 42px;
  padding: 0 22px;
  background: var(--adv-turuncu);
  color: var(--adv-murekkep);
  font-size: 14px;
  font-weight: 700;
}
.adv-ust__cta:hover { background: var(--adv-turuncu-derin); color: var(--adv-krem); }

/* Mobil menü düğmesi — geniş ekranda yok. */
.adv-ust__mobil { display: none; }

/* Makale/arşiv gibi iç sayfalarda header kompakttır. */
.adv-ust--kompakt .adv-ust__bant { height: 150px; }
.adv-ust--kompakt .adv-ust__logo img { height: 120px; }

/* ---------- 6. Footer ---------------------------------------------------- */
.adv-footer {
  background: var(--adv-murekkep);
  color: var(--adv-krem);
  padding: 56px var(--adv-yan) 34px;
}
/* Ana sayfa alt bilgisi: İKİ öğe — marka bloğu ve sütun kümesi.
   Eskiden dört sütun buranın doğrudan çocuğuydu ve 4 track'e 5 öğe düşüyordu;
   gerekçe footer.php'de yazılı. `minmax(0, …)`: 1fr'nin örtük alt sınırı
   içerik genişliğidir, uzun araç adları track'i şişirip taşma yapıyordu. */
.adv-footer__ust {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 3fr);
  gap: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--adv-cizgi-krem);
}
/* Sütunlar kendi içinde sarılabilsin: 900–1200 px bandında dört sütun yan yana
   sıkışıyordu (901 px'te sütun başına ~116 px). auto-fit ile dar ekranda 2×2
   oluyor. `--kompakt` DIŞARIDA: iç sayfa footer'ı flex satır olarak kalıyor. */
.adv-footer:not(.adv-footer--kompakt) .adv-footer__sutunlar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 32px 48px;
}
.adv-footer__marka {
  font-family: var(--adv-serif);
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 14px;
}
.adv-footer__tanim {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--adv-krem-2);
  max-width: 340px;
}
.adv-footer__sosyal {
  display: flex;
  /* Beşinci hesap (X) eklenince 375 px'de satır 385 px'e taşıyor ve sayfaya
     10 px yatay kaydırma açıyordu; ölçüldü. Sarma bunu kapatıyor. */
  flex-wrap: wrap;
  gap: 10px 18px;
  font-family: var(--adv-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--adv-krem-3);
}
.adv-footer__sutun { display: flex; flex-direction: column; gap: 12px; }
.adv-footer__baslik {
  font-family: var(--adv-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--adv-krem-etiket);
  margin-bottom: 4px;
}
.adv-footer__sutun a { font-size: 15px; color: var(--adv-krem-2); }
.adv-footer__sutun ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.adv-footer__alt {
  padding-top: 22px;
  font-family: var(--adv-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--adv-krem-4);
}

/* İç sayfa footer'ı: yatay logo + 3 kolon, bülten bandı yok. */
.adv-footer--kompakt { padding: 44px var(--adv-yan) 30px; }
.adv-footer--kompakt .adv-footer__ust {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  padding-bottom: 30px;
}
/* Aynı tuzak burada da geçerli: flex kapsayıcı + max-width:100% = 0 genişlik. */
.adv-footer__logo {
  display: block;
  height: 70px;
  width: auto;
  max-width: none;
  margin-bottom: 14px;
}
.adv-footer--kompakt .adv-footer__ust > div:first-child { flex: 0 1 auto; }
.adv-footer__sutunlar { display: flex; gap: 48px; }
.adv-footer--kompakt .adv-footer__baslik { letter-spacing: 0.2em; }

/* ---------- 7. Buton dili (tek dil, üç kademe) --------------------------- */
.adv-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 24px;
  border: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .16s ease-out, color .16s ease-out, border-color .16s ease-out;
}
/* Birincil: dolu turuncu, üstünde mürekkep metin. */
.adv-btn--birincil {
  background: var(--adv-turuncu);
  color: var(--adv-murekkep);
  font-weight: 700;
}
.adv-btn--birincil:hover { background: var(--adv-murekkep); color: var(--adv-krem); }
/* İkincil: şeffaf zemin + krem çerçeve (koyu bantlarda). */
.adv-btn--ikincil {
  background: transparent;
  border: 1px solid rgba(239, 237, 231, 0.32);
  color: var(--adv-krem);
}
.adv-btn--ikincil:hover {
  border-color: var(--adv-turuncu-koyu);
  color: var(--adv-turuncu-koyu);
}
/* Mürekkep: açık zeminlerde koyu dolu buton. */
.adv-btn--murekkep {
  height: 50px;
  padding: 0 32px;
  background: var(--adv-cizgi-vurgu);
  color: var(--adv-krem);
  font-size: 15px;
}
.adv-btn--murekkep:hover { background: var(--adv-turuncu-acik); color: var(--adv-krem); }

/* ---------- 8. Bülten bandı (anasayfa + makale) -------------------------- */
.adv-bulten {
  background: var(--adv-turuncu);
  color: var(--adv-murekkep);
  padding: 52px var(--adv-yan);
}
.adv-bulten__ic {
  display: grid;
  grid-template-columns: 1fr 460px;
  gap: 60px;
  align-items: center;
}
.adv-bulten h2 {
  margin: 0 0 10px;
  font-family: var(--adv-serif);
  font-size: 46px;
  line-height: 1.06;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.adv-bulten__vaat {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.5;
  font-weight: 500;
}
.adv-bulten__not {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(18, 22, 27, 0.72);
}
.adv-bulten__form { display: flex; flex-direction: column; gap: 12px; }
.adv-bulten__satir { display: flex; gap: 10px; }
.adv-bulten__form input[type="email"] {
  flex: 1;
  height: 54px;
  padding: 0 18px;
  border: 0;
  background: var(--adv-kagit);
  color: var(--adv-baslik);
  font-family: inherit;
  font-size: 15px;
}
.adv-bulten__form input[type="email"]::placeholder { color: #5A5F64; opacity: 1; }
.adv-bulten__form button {
  height: 54px;
  padding: 0 26px;
  border: 0;
  background: var(--adv-murekkep);
  color: var(--adv-krem);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.adv-bulten__form button:hover { background: var(--adv-koyu-3); }
.adv-bulten__kvkk {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(18, 22, 27, 0.78);
  cursor: pointer;
}
.adv-bulten__kvkk input {
  width: 16px; height: 16px;
  margin-top: 2px;
  accent-color: var(--adv-murekkep);
  flex-shrink: 0;
}
.adv-bulten__kvkk a { border-bottom: 1px solid rgba(18, 22, 27, 0.4); }
/* Hatalı e-posta: form AÇIK kalır, girilen adres korunur, tek satır uyarı. */
.adv-bulten__form.adv-hata input[type="email"] { border: 2px solid #8C1D12; }
.adv-bulten__uyari { margin: 0; font-size: 13px; font-weight: 600; color: #6E1409; }

/* Başarı / bilgi kutusu: form kapanır, yerini yumuşak koyu kutu alır.
   ⚠️ İKİ AYRI KUTU, tek kutunun iki rengi değil ("Form Durumlari"
   tasarımı). Yeşil tik = "işini yaptın, gelen kutuna bak". Nötr "i" =
   "yapacak bir şey yok, zaten kayıtlısın". İkisini aynı görselle
   göstermek ikinci durumu başarı gibi okutuyordu.
   Simge SOLDA duruyor; metin sütunu yanında akıyor. */
.adv-bulten__sonuc {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 26px 28px 28px;
  border-radius: 14px;
  background: rgba(18, 22, 27, 0.9);
  border: 1px solid rgba(239, 237, 231, 0.12);
  box-shadow: 0 14px 34px rgba(18, 22, 27, 0.22);
  color: var(--adv-krem);
}
/* Metin sarmalı: kart flex satır olduğu için başlık ve açıklama tek bir
   çocuk içinde toplanır, yoksa yan yana dizilirler (canlıda görüldü). */
.adv-bulten__sonuc-metin { display: block; min-width: 0; }
.adv-bulten__sonuc-metin > span { display: block; }
.adv-bulten__sonuc strong { display: block; }
.adv-bulten__sonuc strong { font-size: 19px; font-weight: 600; letter-spacing: -0.005em; margin-bottom: 7px; }
.adv-bulten__sonuc span { font-size: 14px; line-height: 1.55; color: var(--adv-krem-2); }
.adv-bulten__sonuc a { color: var(--adv-turuncu-koyu); border-bottom: 1px solid var(--adv-turuncu-koyu); }

/* Simge dairesi: iki durumda da 34px, farkı dolgu ve halka rengi. */
.adv-bulten__tik,
.adv-bulten__im {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}
.adv-bulten__tik {
  background: var(--adv-yesil-acik);
  color: #08120D;
  box-shadow: 0 0 0 6px rgba(98, 180, 140, 0.16);
}
.adv-bulten__im {
  border: 1px solid rgba(239, 237, 231, 0.35);
  color: var(--adv-krem-2);
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 0 0 6px rgba(239, 237, 231, 0.06);
}

/* ---------- 9. Gövde metni (makale, sayfa, arşiv açıklaması) ------------- */
.adv-prose {
  font-size: 19px;
  line-height: 1.78;
  color: var(--adv-govde);
}
.adv-prose > *:first-child { margin-top: 0; }
/* ⚠️ `:where()` — gömülü araçlar kendi paragraf ölçülerini kullanabilsin.
   Sarılmadan önce bu kural ve makale.css`teki eşi (0,2,1) Spor Bulucu`nun
   `.soluk` notlarını eziyordu: `margin` KISAYOLU üst boşluğu sıfırlıyor,
   not girdinin dibine yapışıyordu. Aynı sızıntı tablolarda ve listelerde
   de yaşandı — artık üç prose kuralı da :where() içinde. */
:where(.adv-prose) p { margin: 0 0 26px; }
.adv-prose h2 {
  margin: 46px 0 16px;
  font-family: var(--adv-serif);
  font-size: 34px;
  line-height: 1.2;
  font-weight: 600;
  color: var(--adv-baslik);
}
.adv-prose h3 {
  margin: 34px 0 12px;
  font-size: 23px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--adv-baslik);
}
/* `:where()` — gömülü araçlar kendi bağlantı/düğme çerçevelerini kullanabilsin
   diye. Ayrıntılı gerekçe makale.css'teki eşi olan kuralda yazılı. */
:where(.adv-prose) a {
  color: var(--adv-turuncu-acik);
  border-bottom: 1px solid rgba(20, 24, 28, 0.25);
}
:where(.adv-prose) a:hover { border-bottom-color: var(--adv-turuncu-acik); }
.adv-prose ul, .adv-prose ol { margin: 0 0 26px; padding-left: 22px; }
.adv-prose li { margin-bottom: 10px; }
.adv-prose img { display: block; height: auto; background: var(--adv-yer-tutucu); }
.adv-prose figcaption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--adv-meta);
}
.adv-prose blockquote {
  margin: 34px 0;
  padding-left: 24px;
  border-left: 3px solid var(--adv-cizgi-vurgu);
  font-family: var(--adv-serif);
  font-size: 28px;
  line-height: 1.35;
  color: var(--adv-baslik);
}
.adv-prose table {
  width: 100%;
  margin: 0 0 30px;
  border-collapse: collapse;
  border-top: 2px solid var(--adv-cizgi-vurgu);
  font-size: 16px;
}
.adv-prose th, .adv-prose td {
  padding: 13px 12px 13px 0;
  text-align: left;
  border-bottom: 1px solid rgba(20, 24, 28, 0.12);
  vertical-align: top;
}
.adv-prose th {
  font-family: var(--adv-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--adv-ikincil);
}

/* ---------- 9a. Kart ızgarası (rehber kartları + "Bunları da okuyun") ---- */
.adv-kartlar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
}
.adv-kart {
  display: block;
  padding: 14px;
  margin: -14px;
  transition: background .16s ease-out;
}
.adv-kart:hover { background: var(--adv-kagit-3); color: inherit; }
.adv-kart .adv-gorsel { height: 260px; margin-bottom: 20px; }
.adv-kart .adv-kunye { margin-bottom: 12px; }
/* Başlık alanı iki satıra sabit → özetler üç kartta aynı hizadan başlar. */
.adv-kart__baslik {
  display: block;
  font-family: var(--adv-serif);
  font-size: 27px;
  line-height: 1.22;
  font-weight: 600;
  margin-bottom: 10px;
  min-height: 66px;
  text-wrap: pretty;
}
.adv-kart__ozet {
  display: block;
  font-size: 15px;
  line-height: 1.65;
  color: var(--adv-ikincil);
}

/* ---------- 9d. Makale ---------------------------------------------------- */
.adv-makale { padding: 34px var(--adv-yan) 20px; }

.adv-kirinti {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 860px;
  margin: 0 auto 34px;
  font-family: var(--adv-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--adv-ikincil);
}
.adv-kirinti a:hover { color: var(--adv-turuncu-acik); }
.adv-kirinti__son {
  color: var(--adv-meta);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adv-makale__basi { max-width: 860px; margin: 0 auto 34px; text-align: center; }
.adv-makale__etiket {
  display: inline-block;
  padding: 5px 10px;
  margin-bottom: 20px;
  background: var(--adv-turuncu);
  color: var(--adv-murekkep);
  font-family: var(--adv-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.adv-makale__etiket:hover { background: var(--adv-murekkep); color: var(--adv-krem); }
.adv-makale__baslik {
  margin: 0 0 18px;
  font-family: var(--adv-serif);
  font-size: 60px;
  line-height: 1.06;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}
.adv-makale__dek {
  margin: 0 0 26px;
  font-family: var(--adv-serif);
  font-size: 24px;
  line-height: 1.42;
  color: var(--adv-ikincil);
}
.adv-makale__kunye {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 0;
  border-top: 1px solid var(--adv-cizgi);
  border-bottom: 1px solid var(--adv-cizgi);
  font-size: 14px;
  color: var(--adv-ikincil);
}
.adv-makale__avatar { border-radius: 50%; width: 34px; height: 34px; }
.adv-makale__kunye a:hover { color: var(--adv-turuncu-acik); }

.adv-makale__hero { max-width: 1180px; margin: 0 auto 40px; }
.adv-makale__hero img { display: block; width: 100%; height: auto; background: var(--adv-yer-tutucu); }
.adv-makale__hero figcaption {
  margin-top: 10px;
  font-size: 13px;
  color: var(--adv-meta);
}

.adv-makale__govde { max-width: 760px; margin: 0 auto; }

.adv-makale__etiketler {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 760px;
  margin: 40px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--adv-cizgi);
}
.adv-makale__etiketler-basi {
  font-family: var(--adv-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--adv-meta);
}
.adv-makale__etiketler a {
  padding: 6px 12px;
  border: 1px solid var(--adv-cizgi-koyu);
  font-size: 13px;
}
.adv-makale__etiketler a:hover { border-color: var(--adv-turuncu-acik); }

.adv-ilgili {
  padding: 56px var(--adv-yan) 64px;
  background: var(--adv-kagit-2);
  border-top: 1px solid var(--adv-cizgi);
}

/* ---------- 9b. Yazı listesi (anasayfa + tüm arşivler) ------------------- */
/*
  Site tek bir liste diline sahiptir: anasayfadaki "Son Yazılar" satırı ile
  kategori/etiket/arama arşivlerindeki satır aynı bileşendir.
*/

/* Tarih kovası başlığı: "Bu hafta" / "Geçen hafta" / ay adı. */
.adv-kova {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 22px 0 8px;
}
.adv-kova:first-of-type { padding-top: 8px; }
.adv-kova__ad {
  font-family: var(--adv-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--adv-baslik);
}
.adv-kova__cizgi { flex: 1; height: 1px; background: var(--adv-cizgi-koyu); }
.adv-kova__sayi {
  font-family: var(--adv-mono);
  font-size: 11px;
  color: var(--adv-meta);
}

/* Satır: 132px görsel | 96px tarih | 138px kategori | 1fr başlık | 122px süre | 30px ok */
.adv-satir {
  display: grid;
  grid-template-columns: 132px 96px 138px 1fr 122px 30px;
  align-items: center;
  gap: 28px;
  padding: 20px 0;
  border-top: 1px solid var(--adv-cizgi);
  transition: background .14s ease-out;
}
.adv-satir:hover { background: var(--adv-kagit-3); color: inherit; }
.adv-satir[hidden] { display: none; }
.adv-satir .adv-gorsel { height: 80px; }
.adv-satir__tarih {
  font-family: var(--adv-mono);
  font-size: 13px;
  color: var(--adv-meta);
}
/* Kategori adı satır içi süzme kısayoludur (anasayfada etkin). */
.adv-satir__kat {
  font-family: var(--adv-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--adv-turuncu-acik);
  justify-self: start;
  border-bottom: 1px solid transparent;
}
.adv-anasayfa .adv-satir__kat { cursor: pointer; }
.adv-anasayfa .adv-satir__kat:hover { border-bottom-color: var(--adv-turuncu-acik); }
/* Artık h2/h3 olarak basılıyor (arşivde h2, anasayfada h3) — tarayıcının
   başlık varsayılanları sıfırlanmalı ki görünüm değişmesin. */
.adv-satir__baslik {
  margin: 0;
  font-family: inherit;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}
.adv-satir__sure { font-size: 14px; color: var(--adv-meta); }
.adv-satir__ok { text-align: right; color: var(--adv-meta); }

/* ---------- 9c. Arşiv başlığı ve boş durum ------------------------------- */
.adv-liste-basi {
  padding-bottom: 26px;
  border-bottom: 2px solid var(--adv-cizgi-vurgu);
  margin-bottom: 8px;
}
.adv-liste-basi__ust {
  display: block;
  font-family: var(--adv-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--adv-turuncu-acik);
  margin-bottom: 14px;
}
.adv-liste-basi__baslik {
  margin: 0 0 10px;
  font-family: var(--adv-serif);
  font-size: 46px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}
.adv-liste-basi__alt {
  margin: 0;
  max-width: 680px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--adv-ikincil);
}

/* Arşiv sonu iç bağlantı şeridi — liste bittiğinde ölü uç bırakmaz. */
.adv-cikis {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 2px solid var(--adv-cizgi-vurgu);
}
.adv-cikis__el {
  display: block;
  font-family: var(--adv-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--adv-ikincil);
  margin-bottom: 14px;
}
.adv-cikis__baglar { display: flex; flex-wrap: wrap; gap: 8px; }
.adv-cikis__baglar a {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 9px 14px;
  border: 1px solid var(--adv-cizgi-koyu);
  font-size: 14px;
  transition: background .14s ease-out, border-color .14s ease-out, color .14s ease-out;
}
.adv-cikis__baglar a:hover {
  background: var(--adv-cizgi-vurgu);
  border-color: var(--adv-cizgi-vurgu);
  color: var(--adv-krem);
}
.adv-cikis__baglar a i {
  font-style: normal;
  font-family: var(--adv-mono);
  font-size: 11px;
  color: var(--adv-meta);
}
.adv-cikis__baglar a:hover i { color: var(--adv-krem-2); }
.adv-cikis__tumu {
  border-color: transparent !important;
  font-family: var(--adv-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--adv-turuncu-acik) !important;
}
.adv-cikis__tumu:hover { background: transparent !important; color: var(--adv-turuncu-derin) !important; }

.adv-bos { padding: 60px 0 40px; max-width: 620px; }
.adv-bos__baslik {
  margin: 0 0 10px;
  font-family: var(--adv-serif);
  font-size: 28px;
  font-weight: 600;
}
.adv-bos__metin {
  margin: 0 0 24px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--adv-ikincil);
}
.adv-bos__metin a { color: var(--adv-turuncu-acik); border-bottom: 1px solid var(--adv-cizgi-koyu); }
.adv-bos__form { display: flex; gap: 10px; }
.adv-bos__form input {
  flex: 1;
  height: 50px;
  padding: 0 16px;
  border: 1px solid var(--adv-cizgi-koyu);
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  color: var(--adv-baslik);
}
.adv-bos__form input::placeholder { color: #5A5F64; opacity: 1; }

/* ---------- 10. Sayfalama ------------------------------------------------ */
.adv-sayfalama {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 0 8px;
  font-family: var(--adv-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
}
.adv-sayfalama .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px; height: 42px;
  padding: 0 12px;
  border: 1px solid var(--adv-cizgi-koyu);
}
.adv-sayfalama .page-numbers:hover { border-color: var(--adv-turuncu-acik); }
.adv-sayfalama .page-numbers.current {
  background: var(--adv-cizgi-vurgu);
  border-color: var(--adv-cizgi-vurgu);
  color: var(--adv-krem);
}
.adv-sayfalama .dots { border: 0; }

/* ---------- 11. Mobil — kabuk (≤900px) ---------------------------------- */
/*
  Tek medya sorgusu bloğu. Kural: min-width kalkar, yan boşluk 16px'e iner,
  header dikeye geçer ve gradyan levhası dikey akışa döner.
*/
@media (max-width: 900px) {
  .adv-sayfa { min-width: 0; }

  /* ---- İpucu baloncuğu: telefonda sayfayı yatay kaydırtıyordu ------------
     ÖLÇÜM (22 Ağu 2026, 375 px): sayfa `scrollWidth` 558 / ekran 375 →
     183 px hayalet kaydırma. Sebep `.adv-ipucu__kutu`: sabit 236 px, mutlak
     konumlu ve konum bağlamı 18 px'lik "i" simgesi. Panoda kartlar telefonda
     İKİ SÜTUN olduğu için sağ sütundaki kartın baloncuğu ekranın dışına
     taşıyordu.
     ⚠️ EN SİNSİ YANI: baloncuk GÖRÜNMÜYOR (`visibility:hidden`, hover'da
     açılıyor) — ama mutlak konumlu öğeler görünmese de kaydırma genişliğine
     sayılır. Kullanıcı telefonda sağa kaydırıp bomboş alan görüyordu.
     Eski kısmi önlem (`:last-child` → `right:-8px`) yalnız son kartı
     kurtarıyordu; burada bilerek o da eziliyor.
     ÇÖZÜM: konum bağlamını KARTA taşı, baloncuk kart genişliğine yayılsın.
     Ölçüldü: taşma 0, dört baloncuk da kartının içinde ve metin kırpılmıyor. */
  .adv-pano__kutu { position: relative; }
  .adv-ipucu { position: static; }
  .adv-pano__kutu .adv-ipucu__kutu,
  .adv-pano__kutu:last-child .adv-ipucu__kutu {
    left: 12px;
    right: 12px;
    width: auto;
    bottom: 44px;
  }

  .adv-bolum { padding-left: 16px; padding-right: 16px; }

  .adv-serit {
    height: auto;
    flex-direction: column;
    gap: 8px;
    padding: 12px 18px;
    text-align: center;
  }
  /* Beşinci hesap (X) eklenince dar ekranda tek satıra sığmıyordu; şerit
     sarmıyor olsaydı yatay kaydırma açardı — bkz. anasayfa mobil taşma notu. */
  .adv-serit__sosyal {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 16px;
  }

  .adv-ust__bant {
    height: auto;
    flex-direction: column;
    gap: 18px;
    padding: 22px 18px;
  }
  .adv-ust__levha {
    width: 100%;
    background: linear-gradient(180deg,
      rgba(18, 22, 27, 0) 0%, rgba(18, 22, 27, 0.85) 46%, #12161B 100%);
  }
  .adv-ust__logo img { height: 165px; }
  .adv-ust--kompakt .adv-ust__logo img { height: 140px; }
  .adv-ust__nav,
  .adv-ust__nav ul {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 18px;
    font-size: 15px;
  }

  .adv-footer__ust { grid-template-columns: 1fr; gap: 26px; }
  .adv-footer--kompakt { padding: 30px 16px 24px; }
  .adv-footer--kompakt .adv-footer__ust { flex-direction: column; gap: 26px; }
  .adv-footer__sutunlar { flex-direction: column; gap: 24px; }

  .adv-bulten { padding: 34px 16px; }
  .adv-bulten__ic { grid-template-columns: 1fr; gap: 26px; }
  .adv-bulten h2 { font-size: 34px; }
  .adv-bulten__satir { flex-direction: column; }

  .adv-prose { font-size: 17px; line-height: 1.72; }
  .adv-prose h2 { font-size: 24px; }
  .adv-prose h3 { font-size: 20px; }

  /* Yazı listesi kart hâline gelir: görsel + metin. */
  .adv-satir {
    grid-template-columns: 96px 1fr;
    gap: 14px;
    padding: 16px 0;
  }
  .adv-satir .adv-gorsel { height: 68px; grid-row: span 2; }
  .adv-satir__tarih,
  .adv-satir__sure,
  .adv-satir__ok { display: none; }
  .adv-satir__baslik { font-size: 16px; }

  .adv-liste-basi__baslik { font-size: 30px; }
  .adv-bos__form { flex-direction: column; }
  .adv-cikis { grid-template-columns: 1fr; gap: 28px; margin-top: 32px; }

  .adv-kartlar { grid-template-columns: 1fr; gap: 26px; }
  .adv-kart { margin: 0; padding: 0; }
  .adv-kart .adv-gorsel { height: 200px; }
  .adv-kart__baslik { font-size: 22px; min-height: 0; }

  .adv-makale { padding: 24px 16px 16px; }
  .adv-makale__baslik { font-size: 34px; }
  .adv-makale__dek { font-size: 19px; }
  .adv-kirinti { margin-bottom: 22px; font-size: 10px; }
  .adv-ilgili { padding: 34px 16px 40px; }

  /* Dokunma hedefleri en az 44px. */
  .adv-btn { min-height: 44px; }
}

/* Hareket azaltma tercihi: süslemeli geçişler kapanır. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}



/* ---------- Koyu zeminli sayfa (22 Ağu) ---------------------------------
   `/baglanti/` gibi zemini WPCode parçacığından gelen sayfalarda makale
   başlığı ve kırıntı, temanın koyu mürekkebiyle basılıp okunmaz oluyordu.
   Ölçülen: başlık `#14181C` üzerine `#100D0B` → kontrast **1,09**;
   kırıntı bağlantısı 2,34 · kırıntı sonu 3,88. Hepsi AA eşiğinin altında.

   ⚠️ BU KURAL NEDEN `makale.css`'TE DEĞİL: ilk denemede oraya yazıldı ve
   HİÇ UYGULANMADI — `/baglanti/` düz bir sayfa ve `makale.css` yalnız
   yazı, iletişim, araç ve kontrol listesi sayfalarında kuyruğa giriyor.
   Canlıda ölçüldü: sayfada yüklü tek tema stili `advenway.css`. Gövde
   sınıfı ve kural doğruydu, dosya yanlıştı. Koyu sayfa kuralları her
   sayfada yüklenen bu dosyada durmalı.

   Sınıf `body_class` süzgecinden geliyor (functions.php →
   `advenway_koyu_sayfa_sinifi`), slug listesi `advenway_koyu_sayfalar`
   süzgeciyle genişletilebilir.
   ------------------------------------------------------------------------ */
.adv-koyu-sayfa .adv-makale__baslik { color: var(--adv-krem); }
.adv-koyu-sayfa .adv-makale__giris,
.adv-koyu-sayfa .adv-makale__kunye,
.adv-koyu-sayfa .adv-makale__kunye a { color: var(--adv-krem-2); }
.adv-koyu-sayfa .adv-kirinti,
.adv-koyu-sayfa .adv-kirinti a { color: var(--adv-krem-2); }
.adv-koyu-sayfa .adv-kirinti a:hover { color: var(--adv-turuncu-koyu); }
.adv-koyu-sayfa .adv-kirinti__son { color: var(--adv-krem-etiket); }

/* Bağlantılar hero başlığı: "Ücretsiz" alt satıra iniyordu.
   Sebep WPCode parçacığındaki `.advbl-hero-ic h1 { max-width: 15ch }` —
   başlık 23 karakter, sınırı aşıyor ve kırılıyor. Kapsayıcı 760 px,
   tek satır 712 px istiyor: yani YER VAR, sınır gereksiz.
   Parçacık REST'ten düzenlenemediği için tema ezmesi yapılıyor;
   özgüllük 0,2,1 > 0,1,1 olduğu için kural geçiyor.
   ⚠️ `text-wrap: balance` bilerek duruyor: dar ekranda başlık yine
   kırılacak (380 px'te üç satır ölçüldü) ama satırlar dengeli bölünsün. */
.adv-koyu-sayfa .advbl-hero-ic h1 {
  max-width: none;
  text-wrap: balance;
}

/* ---------- Bağlantılar: 12 aracın eşit kart ızgarası (22 Ağustos) ------
   Sayfa önce iki büyük görselli kart + dört geniş şerit + altı ince satır
   olarak üç ayrı biçimde diziliyordu; hem uzuyor hem dağınık duruyordu.
   Artık tek bir ızgarada 12 eşit kart.

   ⚠️ GÖRSEL YOK, BİLEREK: 12 aracın yalnız 6'sında kapak görseli var ve
   onlar da farklı oranlarda (kimi OG görseli, kimi afiş). Yarısı görselli
   yarısı görselsiz bir ızgara, düzensizliğin en görünür hâli olurdu.
   Kapak seti tamamlanırsa karta görsel yuvası eklenebilir.

   ⚠️ `auto-fit` + `minmax(220px, 1fr)`: sütun sayısı sabit DEĞİL, alana
   göre çözülüyor. 1032 px'lik gövdede tam 4 sütun çıkıyor (5 sütun
   5×220 + boşluklar = 1148 px isterdi, sığmıyor); ekran daraldıkça
   kendiliğinden 3 → 2 → 1'e iniyor. Kırılma noktası yazmaya gerek yok.
   ⚠️ Sınıf öneki `advbl-t`: sayfanın koyu zemini ve eski `.advbl-kart`
   biçimleri WPCode parçacığından geliyor, oraya dokunmadan yeni bir
   isim uzayı açıldı — çakışma olmasın diye.
   ------------------------------------------------------------------------ */
.adv-koyu-sayfa .advbl-t-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 0;
}

.adv-koyu-sayfa .advbl-t {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 18px 44px;
  position: relative;
  background: rgba(239, 237, 231, 0.045);
  border: 1px solid rgba(239, 237, 231, 0.12);
  color: var(--adv-krem);
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.adv-koyu-sayfa .advbl-t:hover {
  background: rgba(239, 237, 231, 0.08);
  border-color: var(--adv-turuncu);
}
.adv-koyu-sayfa .advbl-t:focus-visible {
  outline: 2px solid var(--adv-turuncu);
  outline-offset: 2px;
}

.adv-koyu-sayfa .advbl-t-ust {
  font-family: var(--adv-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--adv-turuncu-koyu);
}
.adv-koyu-sayfa .advbl-t-ad {
  font-family: var(--adv-serif);
  font-size: 19px;
  line-height: 1.22;
  font-weight: 600;
  text-wrap: pretty;
}
.adv-koyu-sayfa .advbl-t-not {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--adv-krem-2);
}
/* Ok kartın sol altına sabit: kartlar farklı uzunlukta metin taşıyor,
   akışta bıraksaydım her kartta başka hizada dururdu. */
.adv-koyu-sayfa .advbl-t-ok {
  position: absolute;
  left: 18px;
  bottom: 16px;
  font-size: 17px;
  color: var(--adv-turuncu-koyu);
  transition: transform 0.15s ease;
}
.adv-koyu-sayfa .advbl-t:hover .advbl-t-ok { transform: translateX(5px); }

@media (max-width: 520px) {
  .adv-koyu-sayfa .advbl-t { padding: 16px 16px 40px; }
  .adv-koyu-sayfa .advbl-t-ad { font-size: 18px; }
}

/* Bağlantılar sayfasında okuma ölçüsü sınırı kalkar.
   `.adv-makale__govde` yazılar için 760 px'e sınırlı — doğru bir karar,
   ama bu sayfa makale değil araç dizini. 760 px'te ızgara 3 sütuna
   düşüyordu; 1180 px'te tam 4 sütun çıkıyor (ölçüldü: ızgara 1032 px,
   kart 248 px, 12 kart 3 satır). Hero ve giriş metni kendi ölçülerini
   koruyor, o yüzden genişleme yalnız ızgarayı etkiliyor. */
.adv-koyu-sayfa .adv-makale__govde { max-width: 1180px; }

/* Kart görsel yuvası — ÖNİZLEME (22 Ağustos).
   ⚠️ Kaynak görseller tek bir set DEĞİL: 506×210, 150×100, 1536×1024 ve
   680×330 karışık. `aspect-ratio` + `object-fit: cover` hepsini aynı
   çerçeveye oturtuyor, yani ızgara eşit duruyor — ama 150×100 olanlar
   248 px'lik karta gerildiği için BULANIK çıkıyor. Bu geçici bir önizleme;
   kalıcı çözüm 12 görseli tek ölçüde yeniden üretmek.
   Görseli olmayan üç kartta yuva hiç basılmıyor, o kartlar kısa kalıyor. */
.adv-koyu-sayfa .advbl-t-gorsel {
  display: block;
  margin: -18px -18px 4px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: rgba(239, 237, 231, 0.06);
}
.adv-koyu-sayfa .advbl-t-gorsel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Bağlantılar sayfasının altındaki "advenway.com" — ANA SAYFAYA DÖNÜŞ.
   Instagram'dan gelen ziyaretçinin araç dizininden siteye geçmesi için
   tek çıkış kapısı; ama düz küçük bir yazı olduğu için kullanıcı
   22 Ağu'da "bunun anlamı ne, kaldıralım mı" diye sordu. Anlamı var,
   görünürlüğü yoktu — düğmeye çevrildi. */
.adv-koyu-sayfa .advbl-alt {
  margin: 34px 0 0;
  text-align: center;
}
.adv-koyu-sayfa .advbl-alt a {
  display: inline-flex;
  align-items: center;
  height: 46px;
  padding: 0 26px;
  background: var(--adv-turuncu);
  color: var(--adv-murekkep);
  font-family: var(--adv-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 0;
}
.adv-koyu-sayfa .advbl-alt a:hover { background: var(--adv-turuncu-parlak); }
.adv-koyu-sayfa .advbl-alt a:focus-visible { outline: 2px solid var(--adv-krem); outline-offset: 3px; }