/* =========================================================================
   Advenway — makale sayfası
   Kaynak: "Advenway Makale Trekking Pantolonu.dc.html" (güncel tasarım)

   ⚠️ ANASAYFADAN FARKLI: bu ekranda köşeler YUVARLAK (12px kart, 16px büyük
   kart/görsel). Anasayfanın keskin kenar dili burada geçerli değil; tasarım
   makalede kart sistemine geçiyor. Bu bilinçli bir ayrım.
   ========================================================================= */

/* ---------- 1. Künye (breadcrumb) --------------------------------------- */
.adv-kirinti {
  padding: 24px var(--adv-yan) 0;
  max-width: none;
  margin: 0;
  font-family: var(--adv-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--adv-ikincil);
}
.adv-kirinti__son { color: #A0A4A8; }

/* ---------- 2. Başlık bloğu --------------------------------------------- */
/* Ortalı DEĞİL: sola yaslı, 1180px kolon içinde. */
.adv-makale { padding: 0; }

.adv-makale__basi {
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px var(--adv-yan) 26px;
  text-align: left;
}
.adv-makale__etiket {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  margin-bottom: 16px;
  background: var(--adv-turuncu);
  color: var(--adv-murekkep);
  font-family: var(--adv-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.adv-makale__etiket:hover { background: var(--adv-murekkep); color: var(--adv-krem); }

.adv-makale__baslik {
  margin: 0 0 20px;
  font-family: var(--adv-serif);
  font-size: 52px;
  line-height: 1.06;
  font-weight: 600;
  letter-spacing: -0.022em;
  max-width: 1000px;
  text-wrap: pretty;
}

/* Künye satırı: solda yazar+tarih, sağda paylaşım. */
.adv-makale__kunye {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 0 0 20px;
  border: 0;
  border-bottom: 1px solid rgba(20, 24, 28, 0.16);
}
.adv-makale__yazar { display: flex; align-items: center; gap: 14px; }
.adv-makale__avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--adv-murekkep);
  display: block;
}
.adv-makale__yazar-ad { display: block; font-size: 15px; font-weight: 700; }
.adv-makale__zaman {
  display: block;
  margin-top: 3px;
  font-family: var(--adv-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--adv-ikincil);
}
.adv-makale__zaman--guncel { color: var(--adv-turuncu-derin); }

.adv-paylas { display: flex; align-items: center; gap: 9px; }
.adv-paylas__basi {
  font-family: var(--adv-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--adv-ikincil);
  margin-right: 4px;
}
.adv-paylas a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border: 1px solid rgba(20, 24, 28, 0.24);
  font-family: var(--adv-mono);
  font-size: 11px;
  font-weight: 700;
  color: #31353A;
  transition: background .14s ease-out, border-color .14s ease-out, color .14s ease-out;
}
.adv-paylas a:hover {
  background: var(--adv-turuncu);
  border-color: var(--adv-turuncu);
  color: var(--adv-murekkep);
}

/* ---------- 3. Hero görseli --------------------------------------------- */
.adv-makale__hero {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--adv-yan) 26px;
}
.adv-makale__hero-cerceve {
  border-radius: 16px;
  overflow: hidden;
}
.adv-makale__hero img {
  display: block;
  width: 100%;
  height: 440px;
  object-fit: cover;
  background: var(--adv-yer-tutucu);
}
.adv-makale__hero figcaption {
  margin-top: 11px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--adv-ikincil);
  text-align: center;
  font-style: italic;
}

/* ---------- 4. Gövde ızgarası ------------------------------------------- */
.adv-makale__izgara {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 52px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--adv-yan) 26px;
  align-items: start;
  justify-content: initial;
}
.adv-makale__govde { max-width: 760px; margin: 0; }

/* ---------- 5. Gövde tipografisi ---------------------------------------- */
.adv-makale__govde .adv-prose { font-size: 18px; line-height: 1.78; color: var(--adv-govde); }
/* :where() — gerekçe advenway.css`teki eşinde yazılı. İkisi de 0,0,1
   olduğu için aralarındaki yarışı YÜKLEME SIRASI çözüyor: makale.css
   advenway`den sonra geliyor, dolayısıyla makalede 18px geçerli kalıyor. */
:where(.adv-makale__govde .adv-prose) p { margin: 0 0 18px; }

/* Giriş paragrafı bir punto büyük ve daha koyu. */
.adv-makale__govde .adv-prose > p:first-of-type {
  font-size: 19.5px;
  line-height: 1.72;
  color: var(--adv-baslik);
}

.adv-makale__govde .adv-prose h2 {
  margin: 40px 0 14px;
  font-family: var(--adv-serif);
  font-size: 31px;
  line-height: 1.16;
  font-weight: 600;
  letter-spacing: -0.014em;
}
.adv-makale__govde .adv-prose h3 {
  margin: 26px 0 10px;
  font-family: var(--adv-serif);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 600;
}

/* Madde imi: turuncu kare. Nokta değil — tasarımın imzası. */
.adv-makale__govde .adv-prose ul { margin: 0 0 18px; padding-left: 0; list-style: none; }
.adv-makale__govde .adv-prose ul > li {
  position: relative;
  margin-bottom: 11px;
  padding-left: 20px;
  font-size: 18px;
  line-height: 1.7;
}
.adv-makale__govde .adv-prose ul > li::before {
  content: "";
  position: absolute;
  left: 0; top: 12px;
  width: 7px; height: 7px;
  background: oklch(0.62 0.19 45);
}
.adv-makale__govde .adv-prose ol { margin: 0 0 18px; padding-left: 22px; }
/* ⚠️ `:where()` — gömülü araçlar kendi liste ölçülerini kullanabilsin diye.
   Sarılmadan önce (0,2,2) VO2 max Kaynaklar listesini eziyordu: eklenti
   12,5 px istiyordu, tema 18 px basıyordu ve 8 künye tam genişlikte
   ~136 karakterlik satırlara yayılıyordu. Aynı ilke tablolarda da uygulandı. */
:where(.adv-makale__govde .adv-prose) ol > li { margin-bottom: 11px; font-size: 18px; line-height: 1.7; }

/* ⚠️ `:where()` — yukarıdaki liste/tablo kuralıyla AYNI GEREKÇE, bu sefer
   bağlantılarda. Sarılmadan önce (0,3,1) idi ve gömülü araçların düğmelerini
   eziyordu: koşu ayakkabısı karşılaştırma tablosundaki "Modeli gör" düğmesi
   `border: 1px solid rgba(239,237,231,.3)` (0,2,0) ile açık renk çerçeve
   istiyordu, tema yalnız ALT kenarı `rgba(20,24,28,.35)` yapıyordu. Üç kenar
   açık, alt kenar koyu zeminde koyu → kutu altından açık görünüyordu.
   Kullanıcı 22 Ağustos 2026'da "alt çizgisi yok" diye bildirdi.
   Ölçüldü: dört kenar da `rgba(239,237,231,.3) 1px`, yazı içi 7 bağlantının
   rengi ve alt çizgisi değişmedi. */
:where(.adv-makale__govde .adv-prose) a {
  color: inherit;
  border-bottom: 1px solid rgba(20, 24, 28, 0.35);
}
:where(.adv-makale__govde .adv-prose) a:hover {
  color: var(--adv-turuncu-acik);
  border-bottom-color: var(--adv-turuncu-acik);
}

.adv-makale__govde .adv-prose img { border-radius: 12px; }
.adv-makale__govde .adv-prose figure { margin: 26px 0 24px; }
.adv-makale__govde .adv-prose figcaption {
  margin-top: 11px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--adv-ikincil);
  text-align: center;
  font-style: italic;
}

:where(.adv-makale__govde .adv-prose) table {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(20, 24, 28, 0.16);
  border-top: 1px solid rgba(20, 24, 28, 0.16);
}
/* ⚠️ TABLO KURALLARI `:where()` İÇİNDE — 21 Ağustos 2026.
 *
 * `:where()` özgüllüğe SIFIR katkı yapar. Yani bu üç kural düz yazı
 * tablolarını biçimlendirmeye devam ediyor (onlarla yarışan başka kural yok),
 * ama gömülü ARAÇ WIDGET'LARININ kendi tablo kuralları her zaman kazanıyor.
 *
 * Neden gerekti: vites hesaplayıcı bir yazının içine gömülü ve kendi koyu
 * tablosunu çiziyor. Buradaki zebra kuralı (0,3,3) widget'ın kendi
 * `.advvites .advvites__tablo td` kuralını (0,2,2) eziyordu; üstelik tema
 * CSS'i eklentiden SONRA yüklendiği için beraberlikte de tema kazanıyor.
 * Sonuç ölçüldü: 132 hücrenin 72'si krem zemin + krem yazı, kontrast 1,04 —
 * yani okunmuyordu. Aynı sızıntı eski temada da yaşanmıştı (CheerUp'ın
 * `tr:nth-child(odd) td` kuralı); eklenti tarafında özgüllük yükselterek
 * çözülmüştü ve yeni tema daha yüksek özgüllükle geri getirdi.
 *
 * Kural: temanın yazı gövdesine yazdığı ÇIPLAK ETİKET seçicileri (table, td,
 * th, tr) `:where()` ile sarılır. Böylece "widget her zaman kendi evinin
 * sahibidir" ve eklenti tarafında !important yarışına girilmez.
 */
:where(.adv-makale__govde .adv-prose) thead th {
  background: var(--adv-cizgi-vurgu);
  color: var(--adv-krem-2);
  padding: 11px 14px;
  font-size: 9.5px;
  letter-spacing: 0.15em;
}
:where(.adv-makale__govde .adv-prose) td {
  padding: 13px 14px;
  font-size: 14.5px;
  line-height: 1.55;
}
/* `td` de :where() içinde: aksi halde kural (0,0,1) özgüllüğüyle gömülü araç
   widget.larının tablo hücrelerini boyuyor. 22 Ağustos 2026.da hesaplayıcı
   tablosunda ölçüldü: 7 hücre krem zemin + krem yazı, kontrast ~1. */
:where(.adv-makale__govde .adv-prose tbody tr:nth-child(even) td) { background: #F3F1EB; }

/* ---------- 6. Etiketler ------------------------------------------------- */
.adv-etiketler {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin: 30px 0 0;
  padding-top: 22px;
  border-top: 1px solid rgba(20, 24, 28, 0.16);
}
.adv-etiketler__basi {
  font-family: var(--adv-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--adv-ikincil);
  margin-right: 4px;
}
.adv-etiketler a {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 13px;
  border: 1px solid rgba(20, 24, 28, 0.22);
  font-size: 13px;
  color: #31353A;
  transition: background .14s ease-out, border-color .14s ease-out, color .14s ease-out;
}
.adv-etiketler a:hover {
  background: var(--adv-turuncu);
  border-color: var(--adv-turuncu);
  color: var(--adv-murekkep);
}

/* ---------- 7. Kenar sütunu ---------------------------------------------- */
/*
 * Sütun üç karttan oluşur: içindekiler · bu yazıya uygun araç · ilgili yazılar.
 * DAHA FAZLA KART EKLENMEZ. Sütun ekran boyunu aşarsa `position:sticky` en
 * üstte kilitleniyor ve alttaki kartlara yazı bitmeden ulaşılamıyor — bu hata
 * bir kez yaşandı. İçindekiler listesi 360px'de kendi içinde kaydırılarak
 * sütunun boyu sabit tutuluyor.
 */
/*
 * ⚠️ SÜTUN EKRAN BOYUNU AŞMAMALI. Aşarsa `position:sticky` ancak sütunun
 * tamamı kaydıktan sonra yapışır — yani okurken sağ taraf sayfayla birlikte
 * YUKARI KAYAR ve kartlar gözden kaybolur. (v0.4.0'da bu yaşandı: tavan
 * kaldırılmıştı.) İçindekiler 360px'de kendi içinde kaydırılıyor, sütunun
 * tamamına da bir tavan konuyor; böylece sütun her zaman ekranda kalıyor.
 */
/*
 * TEK KAYDIRMA ÇUBUĞU. Önce hem sütuna hem içindekiler kartına `overflow:auto`
 * verilmişti; ekranda yan yana İKİ çubuk çıkıyordu ve demode duruyordu.
 * Artık sütun kırpıyor (`overflow:hidden`), kaydırma yalnız içindekiler
 * kartında. Sütun ekran boyunu aşmadığı için yapışkanlık da bozulmuyor.
 */
.adv-kenar {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: 20px;
  align-self: start;
  max-height: calc(100vh - 40px);
  overflow: hidden;
}

/*
 * ⚠️ ÇOCUKLAR EZİLMEZ. Flex kolonuna `max-height` konunca çocuklar varsayılan
 * olarak SIKIŞIYOR (flex-shrink:1). Araç kartında `overflow:hidden` da olduğu
 * için sıkışan kart içeriğini KIRPIYOR: kartta yalnız "Bu yazıya uygun araç"
 * etiketi kalıyor, araç adı ve butonu görünmüyordu. Sütun sıkıştırmak yerine
 * kaydırmalı.
 */
.adv-kenar > * { flex-shrink: 0; }

.adv-kenar__kart {
  border: 1px solid rgba(20, 24, 28, 0.16);
  border-radius: 12px;
  padding: 18px 20px 20px;
}
.adv-kenar__el {
  display: block;
  font-family: var(--adv-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--adv-ikincil);
  margin-bottom: 12px;
}

/* İçindekiler kartı: kalan alanı alır, kaydırma SADECE burada olur. */
.adv-kenar__kart--toc {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  min-height: 0;
}

.adv-toc {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 360px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(20, 24, 28, 0.28) transparent;
}
.adv-toc::-webkit-scrollbar { width: 6px; }
.adv-toc::-webkit-scrollbar-thumb { background: rgba(20, 24, 28, 0.22); border-radius: 3px; }
.adv-toc::-webkit-scrollbar-track { background: transparent; }
.adv-toc a {
  display: block;
  padding: 9px 0 9px 14px;
  border-left: 2px solid rgba(20, 24, 28, 0.14);
  font-size: 14.5px;
  line-height: 1.45;
  color: #31353A;
  transition: border-color .16s ease-out, color .16s ease-out;
}
.adv-toc a:hover { border-left-color: var(--adv-turuncu); color: oklch(0.52 0.17 45); }
.adv-toc a.adv-aktif {
  border-left-color: var(--adv-turuncu);
  color: var(--adv-turuncu-derin);
  font-weight: 700;
}

/* Bu yazıya uygun araç — koyu kart */
.adv-aracknt {
  display: block;
  box-sizing: border-box;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(198, 226, 235, 0.16);
  background: radial-gradient(130% 100% at 12% 0%, #17242E 0%, #101C24 48%, #0A1218 100%);
  box-shadow: 0 20px 54px rgba(10, 18, 24, 0.22);
  padding: 20px 22px 22px;
}
.adv-aracknt__el {
  display: block;
  font-family: var(--adv-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: oklch(0.82 0.15 45);
  margin-bottom: 10px;
}
.adv-aracknt__ad {
  display: block;
  font-family: var(--adv-serif);
  font-size: 22px;
  font-weight: 600;
  color: #F6F9FA;
  margin-bottom: 8px;
}
.adv-aracknt__metin {
  display: block;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(198, 226, 235, 0.68);
  margin-bottom: 14px;
}
.adv-aracknt__btn {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 16px;
  background: var(--adv-turuncu);
  color: var(--adv-murekkep);
  font-size: 13px;
  font-weight: 700;
  transition: background .16s ease-out;
}
.adv-aracknt:hover .adv-aracknt__btn { background: #F6F9FA; }

/* İlgili yazılar */
.adv-ilgilikart a {
  display: block;
  padding: 12px 0;
  border-top: 1px solid rgba(20, 24, 28, 0.12);
}
.adv-ilgilikart a:first-child { border-top: 0; padding-top: 0; }
.adv-ilgilikart__kat {
  display: block;
  font-family: var(--adv-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--adv-turuncu-derin);
  margin-bottom: 5px;
}
.adv-ilgilikart__ad {
  display: block;
  font-family: var(--adv-serif);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.28;
}
.adv-ilgilikart a:hover .adv-ilgilikart__ad { color: oklch(0.52 0.17 45); }

/* ---------- 8. SSS ------------------------------------------------------- */
.adv-sss__baslik {
  margin: 40px 0 16px;
  font-family: var(--adv-serif);
  font-size: 31px;
  line-height: 1.16;
  font-weight: 600;
  letter-spacing: -0.014em;
}
.adv-sss {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(20, 24, 28, 0.16);
  border-radius: 12px;
  overflow: hidden;
}
.adv-sss details { border-top: 1px solid rgba(20, 24, 28, 0.12); }
.adv-sss details:first-child { border-top: 0; }
.adv-sss summary {
  padding: 16px 18px;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.adv-sss summary::-webkit-details-marker { display: none; }
.adv-sss summary::after {
  content: "+";
  float: right;
  font-family: var(--adv-mono);
  color: var(--adv-turuncu-acik);
}
.adv-sss details[open] summary { background: #F3F1EB; }
.adv-sss details[open] summary::after { content: "−"; }
.adv-sss p {
  margin: 0;
  padding: 0 18px 18px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--adv-ikincil);
}

/* ---------- 9. Yazar kutusu (koyu kart) ---------------------------------- */
.adv-yazarkutu {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--adv-yan) 26px;
}
.adv-yazarkutu__kart {
  box-sizing: border-box;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(198, 226, 235, 0.16);
  background: radial-gradient(130% 100% at 12% 0%, #17242E 0%, #101C24 48%, #0A1218 100%);
  box-shadow: 0 20px 54px rgba(10, 18, 24, 0.28);
}
.adv-yazarkutu__ust {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 28px 20px;
  border-bottom: 1px solid rgba(198, 226, 235, 0.14);
}
.adv-yazarkutu__avatar {
  width: 62px; height: 62px;
  border-radius: 50%;
  background: #0C161D;
  display: block;
  flex-shrink: 0;
}
.adv-yazarkutu__el {
  display: block;
  font-family: var(--adv-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: oklch(0.82 0.15 45);
  margin-bottom: 6px;
}
.adv-yazarkutu__ad {
  display: block;
  font-family: var(--adv-serif);
  font-size: 26px;
  font-weight: 600;
  color: #F6F9FA;
}
.adv-yazarkutu__sosyal { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.adv-yazarkutu__sosyal a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border: 1px solid rgba(198, 226, 235, 0.26);
  font-family: var(--adv-mono);
  font-size: 11px;
  font-weight: 700;
  color: #E4EFF2;
  transition: background .14s ease-out, border-color .14s ease-out, color .14s ease-out;
}
.adv-yazarkutu__sosyal a:hover {
  background: var(--adv-turuncu);
  border-color: var(--adv-turuncu);
  color: var(--adv-murekkep);
}
.adv-yazarkutu__metin {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 26px;
  padding: 22px 28px 26px;
}
.adv-yazarkutu__metin p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(198, 226, 235, 0.72);
}

/* ---------- 10. Önceki / sonraki yazı ------------------------------------ */
.adv-gezinme {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--adv-yan) 26px;
}
.adv-gezinme__izgara {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.adv-gezinme__kart {
  display: flex;
  align-items: center;
  gap: 18px;
  box-sizing: border-box;
  border-radius: 16px;
  border: 1px solid rgba(20, 24, 28, 0.16);
  background: #F3F1EB;
  padding: 20px 22px;
  transition: background .16s ease-out;
}
.adv-gezinme__kart:hover { background: var(--adv-kagit-3); }
.adv-gezinme__kart img {
  width: 96px; height: 80px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
  background: var(--adv-yer-tutucu);
}
.adv-gezinme__el {
  display: block;
  font-family: var(--adv-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--adv-ikincil);
  margin-bottom: 6px;
}
.adv-gezinme__ad {
  display: block;
  font-family: var(--adv-serif);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
}
.adv-gezinme__kart:hover .adv-gezinme__ad { color: oklch(0.52 0.17 45); }
.adv-gezinme__kart--sonraki { text-align: right; }
/* `.adv-gezinme__bos` kuralı kaldırıldı: yer tutucu artık hiç basılmıyor
   (bkz. single.php'deki gerekçe). Kural yalnız sağdaki kart için yazılmıştı,
   soldaki biçimsiz kalıp kayboluyordu; asimetrinin sebebi buydu. */

/* ---------- 11. Mobil (≤900px) ------------------------------------------- */
@media (max-width: 900px) {
  .adv-kirinti { padding: 16px 16px 0; font-size: 10px; }

  .adv-makale__basi { padding: 16px 16px 20px; }
  .adv-makale__baslik { font-size: 32px; }
  .adv-makale__kunye { gap: 16px; }
  .adv-paylas { gap: 7px; }

  .adv-makale__hero { padding: 0 16px 20px; }
  .adv-makale__hero img { height: 220px; }

  .adv-makale__izgara {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 0 16px 20px;
  }

  /* Kenar sütunu akışa girer; iç kaydırma kalkar. */
  .adv-kenar {
    position: static;
    max-height: none;
    overflow: visible;
  }
  .adv-toc { max-height: none; overflow: visible; }

  .adv-makale__govde .adv-prose h2 { font-size: 24px; }
  .adv-makale__govde .adv-prose h3 { font-size: 19px; }
  .adv-makale__govde .adv-prose,
  .adv-makale__govde .adv-prose > p:first-of-type { font-size: 17px; }

  .adv-yazarkutu { padding: 0 16px 20px; }
  .adv-yazarkutu__ust { flex-wrap: wrap; padding: 18px 18px 16px; }
  .adv-yazarkutu__sosyal { margin-left: 0; }
  .adv-yazarkutu__metin { grid-template-columns: 1fr; gap: 16px; padding: 18px; }

  .adv-gezinme { padding: 0 16px 20px; }
  .adv-gezinme__izgara { grid-template-columns: 1fr; }
  .adv-gezinme__kart--sonraki { text-align: left; flex-direction: row-reverse; }

  .adv-sss__baslik { font-size: 24px; }
}

/* ---------- Yazar kutusu: kolon sayısı paragrafa uysun (21 Ağu) ---------
   Izgara `1fr 1fr 1fr` olarak sabitti; biyografi üç paragraftan azsa sağda
   BOŞ KOLON kalıyor ve metin sola sıkışmış görünüyordu. Kolon sayısı artık
   paragraf sayısından türüyor.

   ⚠️ İki ayrıntı bilerek böyle:
   ① Kurallar `min-width: 901px` içinde — `:has()` özgüllüğü (0,2,0) 900px
      altındaki tek kolona indiren kuraldan (0,1,0) yüksek; media dışına
      yazılsaydı MOBİLDE tek kolona inmeyi bozardı.
   ② Grid korundu, flex'e geçilmedi: aynı mobil kural `grid-template-columns`
      ile yazılmış, flex'te o satır etkisiz kalırdı.
   ---------------------------------------------------------------------- */
@media (min-width: 901px) {
  .adv-yazarkutu__metin:has(p:nth-child(2):last-child) { grid-template-columns: 1fr 1fr; }
  .adv-yazarkutu__metin:has(p:only-child)              { grid-template-columns: 1fr; }
}

/* =========================================================================
   Öğrenme Yolu (seri) — "Advenway Makale.dc.html"
   Tasarımda oklch() renkler ve satır içi stil vardı; buraya sitenin kendi
   token'larıyla taşındı (oklch bazı kontrast ölçerlerini kırıyor ve site
   genelinde tek renk kaynağı olsun diye).
   ========================================================================= */
.adv-seri {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--adv-yan) 26px;
}
.adv-seri__kart {
  padding: 34px 32px 32px;
  /* Sayfa zemininden (--adv-kagit #EFEDE7) bir tık koyu: modül makaleden
     ayrılsın diye tasarımda böyle. Token yok, değer tasarımdan. */
  background: #E9E6DE;
  border-top: 1px solid rgba(20, 24, 28, 0.14);
}

.adv-seri__basi {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.adv-seri__el {
  margin: 0 0 10px;
  font-family: var(--adv-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--adv-turuncu-acik);   /* ACIK zemin uzerinde: koyu ton */
}
.adv-seri__baslik {
  margin: 0;
  font-family: var(--adv-serif);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.12;
}
.adv-seri__kunye {
  margin: 0;
  font-family: var(--adv-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--adv-ikincil);
  font-variant-numeric: tabular-nums;
}

/* ---- ilerleme çubuğu ---- */
.adv-seri__cubuk { display: flex; gap: 6px; margin: 22px 0 20px; }
.adv-seri__dilim {
  display: block;
  height: 4px;
  flex: 1;
  background: rgba(20, 24, 28, 0.14);
}
.adv-seri__dilim--gecmis { background: #C6C2B8; }
.adv-seri__dilim--suanki { background: var(--adv-turuncu); }
/* Betik "gerçekten okundu" damgasını basınca dilim de dolar. */
.adv-seri__dilim.adv-seri--okundu { background: var(--adv-turuncu-derin); }

/* ---- adım kartları ---- */
.adv-seri__izgara {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
/* Kolon sayısı adım sayısına eşitlenir. 4 kolonluk sabit ızgarada 5
   adımlık bir seri 4+1 diziliyor ve altta üç boş kolon kalıyordu
   (Antrenmanın Temelleri serisinde canlıda görüldü). */
.adv-seri__izgara:has(.adv-seri__adim:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
.adv-seri__izgara:has(.adv-seri__adim:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
.adv-seri__izgara:has(.adv-seri__adim:nth-child(5):last-child) { grid-template-columns: repeat(5, 1fr); gap: 12px; }
.adv-seri__izgara:has(.adv-seri__adim:nth-child(6):last-child) { grid-template-columns: repeat(6, 1fr); gap: 10px; }
/* 7+ adım gerçekçi değil ama advenway_seri() 12'ye kadar döndürebiliyor. */
.adv-seri__izgara:has(.adv-seri__adim:nth-child(7))            { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
/* Beş ve üstünde kart daralıyor: başlık ve iç boşluk küçülmezse metin
   kolonlarda kırılıp kartları tırtıklaştırıyor. */
.adv-seri__izgara:has(.adv-seri__adim:nth-child(5)) .adv-seri__ic { padding: 18px 16px 20px; gap: 12px; }
.adv-seri__izgara:has(.adv-seri__adim:nth-child(5)) .adv-seri__ad { font-size: 18px; }

.adv-seri__ic {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  padding: 22px 22px 24px;
  border: 1px solid rgba(20, 24, 28, 0.18);
  color: var(--adv-baslik);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
a.adv-seri__ic:hover { border-color: var(--adv-turuncu); background: rgba(255, 255, 255, 0.4); }
a.adv-seri__ic:focus-visible { outline: 2px solid var(--adv-turuncu); outline-offset: 2px; }

.adv-seri__adim--suanki .adv-seri__ic {
  background: var(--adv-murekkep, #12161B);
  border-color: var(--adv-murekkep, #12161B);
  color: var(--adv-krem, #EFEDE7);
}

.adv-seri__ust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.adv-seri__no {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(20, 24, 28, 0.22);
  font-family: var(--adv-mono);
  font-size: 12px;
  font-weight: 700;
  color: #6B7076;
  flex-shrink: 0;
}
.adv-seri__adim--suanki .adv-seri__no {
  background: var(--adv-turuncu);
  border-color: transparent;
  color: var(--adv-murekkep, #12161B);
}
/* Okunmuş adım: numara yerine ✓ — betik sınıfı ekleyince görünür. */
.adv-seri__adim.adv-seri--okundu .adv-seri__no {
  background: #C6C2B8;
  color: var(--adv-baslik);
  font-size: 0;
}
.adv-seri__adim.adv-seri--okundu .adv-seri__no::before { content: "✓"; font-size: 13px; }

.adv-seri__durum {
  font-family: var(--adv-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--adv-ikincil);
  text-align: right;
}
.adv-seri__adim--suanki .adv-seri__durum {
  color: var(--adv-turuncu-koyu);   /* KOYU kart uzerinde: acik ton */
  font-weight: 400;
}
.adv-seri__ad {
  display: block;
  font-family: var(--adv-serif);
  font-size: 21px;
  line-height: 1.24;
  font-weight: 600;
  text-wrap: pretty;
}

/* ---- alt şerit ---- */
.adv-seri__serit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 22px;
  padding: 20px 24px;
  background: var(--adv-murekkep, #12161B);
  color: var(--adv-krem, #EFEDE7);
  flex-wrap: wrap;
}
.adv-seri__sonraki {
  font-size: 17px;
  color: var(--adv-krem, #EFEDE7);
  text-decoration: none;
}
a.adv-seri__sonraki:hover { color: var(--adv-turuncu-koyu); }
.adv-seri__sonraki strong { font-weight: 600; }
.adv-seri__dugme {
  display: inline-flex;
  align-items: center;
  height: 46px;
  padding: 0 24px;
  background: var(--adv-turuncu);
  color: var(--adv-murekkep, #12161B);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
}
.adv-seri__dugme:hover { background: var(--adv-turuncu-parlak); }
.adv-seri__serit--bitti { justify-content: flex-start; }

@media (max-width: 900px) {
  .adv-seri { padding: 0 16px 20px; }
  .adv-seri__kart { padding: 24px 18px 22px; }
  .adv-seri__baslik { font-size: 24px; }
  /* Mobilde hepsi tek kolon. ⚠️ Masaüstündeki :has() kuralları 0,2,0
     özgüllüğünde; burada TEK TEK sayılmazlarsa onları ezemez ve 5-6
     adımlık seriler telefonda da yan yana kalır. */
  .adv-seri__izgara,
  .adv-seri__izgara:has(.adv-seri__adim:nth-child(2):last-child),
  .adv-seri__izgara:has(.adv-seri__adim:nth-child(3):last-child),
  .adv-seri__izgara:has(.adv-seri__adim:nth-child(5):last-child),
  .adv-seri__izgara:has(.adv-seri__adim:nth-child(6):last-child),
  .adv-seri__izgara:has(.adv-seri__adim:nth-child(7))            { grid-template-columns: 1fr; gap: 16px; }
  .adv-seri__izgara:has(.adv-seri__adim:nth-child(5)) .adv-seri__ad { font-size: 19px; }
  .adv-seri__ad { font-size: 19px; }
  .adv-seri__serit { padding: 16px 18px; }
  .adv-seri__dugme { width: 100%; justify-content: center; }
}

/* ---------- Tablo: dikey çizgiye yapışan metin (22 Ağu) -----------------
   Kullanıcı: "çizgilerle başlangıç çok dip dibe."

   İki kural üst üste gelince oluyordu:
   ① Tema `.adv-prose th, .adv-prose td { padding: 13px 12px 13px 0 }` diyor —
      sol dolgu BİLEREK sıfır, ilk sütun gövde metniyle hizalansın diye.
   ② WordPress'in kendi `.wp-block-table td, .wp-block-table th` stili
      hücrelere `border-left: 1px solid` ekliyor.
   Sonuç: 2. sütundan itibaren metin dikey çizginin dibinde başlıyor.

   ⚠️ Çözüm ilk sütunun sıfır dolgusunu BOZMAMALI (o hizalama tasarımın
   kendisi). Bu yüzden yalnız KOMŞU hücrelere dolgu veriliyor: `+` seçicisi
   satırın ilk hücresini hiç görmez.
   ⚠️ Özgüllük: temanın kuralı 0,1,1. Buradaki 0,1,2 — `:where()` ile
   sarılsaydı 0 olur ve yine ezilirdi (aynı hata `makale.css`'in tablo
   kurallarında zaten yaşandı, oradaki `13px 14px` hiç uygulanmıyor).
   ------------------------------------------------------------------------ */
/* ⚠️ GÜNCELLEME (22 Ağu, 2. tur): önce yalnız KOMŞU hücrelere dolgu
   verilmişti, ilk sütunun sıfır dolgusu "gövde metniyle hizalansın" diye
   korunmuştu. Kullanıcı haklı olarak itiraz etti: başlık satırının koyu
   ZEMİNİ var ve sıfır dolgu, "KULLANICI PROFİLİ" yazısını siyah bloğun
   kenarına yapıştırıyor. O hizalama kararı, başlığın zemini YOKKEN
   anlamlıydı. Artık bütün hücreler dolgulu. */
.adv-makale__govde .adv-prose :is(td, th) {
  padding-left: 16px;
}

/* ---------- KURAL: koyu zeminli tablo başlığı beyaz mürekkep (22 Ağu) ----
   Kullanıcı: "siyah üzerine gri font olmamış, beyaz ile düzelt. Bu bir
   kuralsa tabloda da uygula."

   ÖLÇÜLEN HATA: `#4A4F55` üzerine `#14181C`, kontrast **2,16** — AA eşiğinin
   (4,5) çok altında. Gerçek bir erişilebilirlik hatasıydı, tercih değil.

   NEDEN OLUYORDU — yine yarım uygulanan bir kural:
   `makale.css` başlık için hem zemin hem renk veriyordu ama `:where()` ile
   sarılıydı (özgüllük 0). `advenway.css`'teki `.adv-prose th { color:
   var(--adv-ikincil) }` (0,1,1) RENGİ eziyor, ZEMİNİ ezmiyordu — çünkü
   zemine başka kimse dokunmuyor. Sonuç: koyu zemin + açık zemin için
   düşünülmüş gri mürekkep. Tasarımın kendi tablosunda başlık zaten AÇIK
   zeminli; koyu başlık temanın eklemesi, rengi ona göre güncellenmemiş.

   KURAL: koyu yüzeye oturan tablo başlığının mürekkebi `--adv-krem`.
   Kontrast 2,16 → **15,24**. Yeni bir koyu tablo başlığı yaparken bu
   kuralın kapsamına sok, tek tek renk yazma.
   ⚠️ `:where()` KULLANMA — bu dosyadaki tablo kurallarının hiç
   uygulanmamasının sebebi tam olarak oydu.
   ------------------------------------------------------------------------ */
.adv-makale__govde .adv-prose thead th {
  background: var(--adv-cizgi-vurgu);
  color: var(--adv-krem);
}