/* Kategori şeridi — üst bilginin üçüncü bandı.
   Dar ekranda **kendi kabında** yatayda kayıyor: gövde kaymıyor, kategori gizlenmiyor.
   Dokunma hedefi 44 piksel (`min-height:2.75rem`). */
.blog-kategori{background:#fff;border-bottom:1px solid rgb(var(--gray-200))}
/* Kaydırılabildiğini gösteren ipucu: sağ kenar erir. Ölçüldü (`scripts/tasma-olc.mjs`):
   şeridin kendisi hiçbir zaman görünümü taşırmıyor (`overflow-x:auto` kendi kabında
   kalıyor), ama şeritteki son öge dar ekranda yarım kesiliyordu ve bunun "daha var,
   kaydır" anlamına geldiğini söyleyen görsel bir işaret yoktu. Maske arka plan rengini
   bilmek zorunda değil — bu yüzden koyu kipte ayrıca tanımlanması gerekmiyor. */
.blog-kategori__liste{display:flex;align-items:center;gap:.25rem;margin:0;padding:0;
  list-style:none;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 2rem),transparent 100%);
  mask-image:linear-gradient(to right,#000 calc(100% - 2rem),transparent 100%)}
.blog-kategori__liste a{display:flex;align-items:center;min-height:2.75rem;padding:0 .875rem;
  white-space:nowrap;font-size:.875rem;font-weight:var(--weight-medium);
  color:rgb(var(--gray-700));border-bottom:2px solid transparent}
.blog-kategori__liste a:hover{color:rgb(var(--primary-700));text-decoration:none}
.blog-kategori__liste a[aria-current]{color:rgb(var(--primary-700));
  border-bottom-color:rgb(var(--primary-700))}



/* Kırıntı: v3'ün `.breadcrumb ol`u `overflow-x:auto;white-space:nowrap` — taşıyor,
   sarmıyor. Ölçüldü, 22.08.2026: 390 pikselde uzun bir yazı başlığı son ögeyi (bulunduğun
   sayfa) kaydırma çubuğu gizli olduğu için görünüm dışına itiyordu, hiçbir kesilme işareti
   yok. Yalnız son öge küçülüp üç noktayla kesiliyor; önceki ögeler sabit kalıyor. */
.breadcrumb li:last-child{min-width:0;flex-shrink:1}
.breadcrumb li:last-child span{display:inline-block;max-width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}

/* İki sütun: içerik + yan sütun. `minmax(0,1fr)` olmadan uzun bir başlık ızgarayı
   genişletiyor ve gövde yatayda kayıyor — dar ekranda tam olarak yasaklanan şey. */
.blog-duzen{display:grid;gap:2rem;grid-template-columns:minmax(0,1fr);padding-block:2rem}
@media (min-width:64rem){
  .blog-duzen{grid-template-columns:minmax(0,1fr) 18rem;gap:3rem;align-items:start}
  /* Yazı 32rem'lik okunabilir satırını korur; yan sütun artık kalan 1fr'nin öbür ucuna
     itilmez. Yazar sayfası kartları için biraz daha geniştir. İkisinde de gerçek aralık 24px. */
  .blog-duzen--yazi{grid-template-columns:minmax(0,32rem) 18rem;gap:1.5rem}
  .blog-duzen--yazar{grid-template-columns:minmax(0,40rem) 18rem;gap:1.5rem}
  .blog-yan{position:sticky;top:1.5rem}
}
/* Yazar sayfasında dış düzen zaten üst dolguyu veriyor. İçteki ilk `.section`ın
   ikinci kez dolgu eklemesi, başlığı masaüstünde yan sütundan 56px aşağı itiyordu. */
.blog-duzen--yazar>div>.section:first-child{padding-top:0}
/* 12px rozet metni açık turkuaz yüzeyde 4.35:1 kalıyordu. Yalnız yazar sayfasında,
   aynı marka paletinin koyu turkuaz basamağıyla okunur hâle geliyor. */
.blog-duzen--yazar .eyebrow{color:rgb(var(--primary-800))}
.blog-yan{display:flex;flex-direction:column;gap:1.5rem;min-width:0}
.blog-yan__blok{border:0;border-radius:var(--radius-lg);
  background:var(--surface);padding:1rem}
.blog-yan__baslik{font-size:var(--text-sm);font-weight:var(--weight-bold);
  text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);margin-bottom:.75rem}
.blog-yan ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.blog-yan a:hover{color:var(--accent)}

/* `<picture>` bir kap değil bir seçici: ölçüyü ve nesne uydurmasını `<img>` taşıyor.
   `display:contents` olmadan araya satır içi bir eleman giriyor ve kart medyası
   `object-fit` uygulayamıyor. */
picture{display:contents}

/* Liste kartları, ızgara ve ana sayfa bölümleri (blog-*): görünüm barındıran sitenin UI
   kütüphanesinde (mbdtravel-v3 blog-liste-styles.ts). Paket yalnız işaretleme üretir (kart.ts). */

/* Bilgi kutusu: ipucu ve uyarı. Alıntıdan ayrı çiziliyor çünkü ayrı bir şey. */
.blog-bilgi{display:flex;flex-direction:column;gap:.35rem;padding:.9rem 1rem;
  border-left:3px solid var(--accent);border-radius:var(--radius-md);background:var(--accent-soft)}
.blog-bilgi--uyari{border-left-color:var(--warn);background:var(--warn-soft)}
.blog-bilgi__baslik{font-weight:var(--weight-bold)}
.blog-bilgi__govde{display:flex;flex-direction:column;gap:.5rem}

/* Yazı sayfası. Ölçü 68 karakter: daha geniş satırlarda göz satır başını kaybediyor.
   44rem yazılmıştı ama ölçmedi — gerçek yazı tipiyle (17px, tarayıcıda) 96 karaktere
   çıkıyordu, ürün sahibinin masaüstünde ölçtüğü "85 ile 90" ile aynı sınıfta. 32rem'de
   gövde satırı 68 karaktere düşüyor; ölçüldü, 22.08.2026, canlı sayfada. */
.yazi{max-width:32rem;min-width:0}
.yazi__ust{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1.5rem}
/* Belirteç ölçeği panel için kurulmuş ve en büyüğü `--text-3xl` = 1.8rem. Bir blog
   başlığı için küçük, ama ölçeğe yeni bir basamak eklemek paleti buradan çatallamak
   olurdu. `clamp` ölçeğin son basamağından başlıyor ve geniş ekranda 2.4rem'e çıkıyor —
   yeni bir belirteç değil, var olanın tarayıcı tarafından ölçeklenmesi. */
.yazi__baslik{font-size:clamp(var(--text-3xl),1.4rem + 2.2vw,2.4rem);line-height:1.15}
.yazi__meta{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;
  color:var(--ink-soft);font-size:var(--text-sm)}
.yazi__meta a:hover{color:var(--accent)}
.yazi__kapak{border-radius:var(--radius-lg);overflow:hidden;margin:0 0 1.5rem}
.yazi__kapak img{width:100%;height:auto}
.yazi__govde{display:flex;flex-direction:column;gap:.8rem;font-size:1.0625rem;line-height:1.65}
.yazi__govde h2{font-size:var(--text-2xl);margin-top:.5rem}
.yazi__govde h3{font-size:var(--text-xl);margin-top:.25rem}
.yazi__govde ul,.yazi__govde ol{margin:0;padding-left:1.25rem;
  display:flex;flex-direction:column;gap:.4rem}
.yazi__govde a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
/* SSS akordiyonu v3'te panelin yardımcı metni için kuruldu: 13px, gövdenin 17px'inden
   dört punto küçük. Blogda akordiyonun içindeki soru-cevap sayfanın **asıl** metni,
   yardımcı bir not değil; okunma boyutu gövdeyle aynı olmalı. */
.yazi__govde .accordion__body{font-size:1.0625rem;line-height:1.65}
.yazi__etiketler{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:2rem}

.blog-gorsel{margin:0;display:flex;flex-direction:column;gap:.5rem}
.blog-gorsel img{border-radius:var(--radius-md);width:100%}
.blog-gorsel figcaption{color:var(--ink-soft);font-size:var(--text-sm)}
.blog-alinti{margin:0;border-left:3px solid var(--accent);padding-left:1rem;
  display:flex;flex-direction:column;gap:.35rem}
.blog-alinti blockquote{margin:0;font-size:var(--text-lg);line-height:1.5}
.blog-alinti cite{color:var(--ink-soft);font-size:var(--text-sm);font-style:normal}
.blog-baglantilar{list-style:none;margin:.25rem 0 0;padding:0;
  display:flex;flex-direction:column;gap:.25rem;font-size:var(--text-sm)}
.blog-baglantilar a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}

/* Taşabilecek tek şey kod. Kendi kabında kayıyor, gövde kaymıyor. */
.blog-tasan{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-md);
  background:var(--accent-soft)}
.blog-tasan pre{margin:0;padding:1rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--text-sm);line-height:1.5}

/* Ürün bağları. Fiyat yok — gerekçesi `icerik.ts`teki `UrunBagi`. */
.urun-baglari{display:grid;gap:.75rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:48rem){.urun-baglari{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Ürün bağı olmayan yazıdaki tek eylem: ana siteye açık bir düğme. */
.yazi-cta{display:flex}
.urun-bagi{display:flex;gap:.75rem;align-items:center;border:0;
  border-radius:var(--radius-md);background:var(--surface);padding:.75rem;min-width:0}
.urun-bagi img{width:64px;height:64px;object-fit:cover;border-radius:var(--radius-sm);flex:none}
.urun-bagi__metin{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.urun-bagi__ad{font-weight:var(--weight-medium);overflow-wrap:anywhere}
.urun-bagi__tur{color:var(--ink-soft);font-size:var(--text-xs);
  text-transform:uppercase;letter-spacing:.06em}

.yazar-kutusu{display:flex;gap:1rem;align-items:flex-start;border:0;
  border-radius:var(--radius-lg);background:var(--surface);padding:1rem;margin-top:2rem;min-width:0}
.yazar-kutusu img{width:56px;height:56px;border-radius:999px;object-fit:cover;flex:none}
.yazar-kutusu__metin{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.yazar-kutusu__ad{font-weight:var(--weight-bold)}
.yazar-kutusu__unvan{color:var(--ink-soft);font-size:var(--text-xs);
  text-transform:uppercase;letter-spacing:.06em}
.yazar-kutusu__ozgecmis{color:var(--ink-soft);font-size:var(--text-sm)}
/* Sosyal hesaplar. Etiket ağın adı, adres değil: bir künyenin altına ham adres
   yazmak satırı taşırıyor ve dar ekranda kutuyu kırıyor. */
.yazar-kutusu__sosyal{display:flex;gap:.75rem;flex-wrap:wrap;font-size:var(--text-sm)}
.yazar-kutusu__sosyal a{display:inline-flex;align-items:center;justify-content:center;
  width:2.75rem;min-width:2.75rem;min-height:2.75rem;padding:0;border:0;
  border-radius:var(--radius-pill);background:var(--accent-soft);color:var(--accent);text-decoration:none}
.yazar-kutusu__sosyal a:hover{background:var(--accent-soft);text-decoration:none}
.yazar-kutusu__sosyal a:focus-visible{outline-color:rgb(var(--primary-800))}

/* Yazar profilinde künye ile ilk yazı birbirine yapışmaz. Bu sayfadaki künye ve yazı
   kartları ayrıca görselin çevresinde ikinci bir çerçeve çizmez; liste ve yazı sayfaları
   kendi mevcut kart görünümünü korur. */
.blog-duzen--yazar .yazar-kutusu{margin:0 0 1.5rem;border:0;border-radius:0;background:transparent;padding:0}

/* Yazar listesi. Kart başına bir künye kutusu; kutunun kendi kenarlığı zaten
   var, kart ikinci bir çerçeve çizmiyor. */
.yazar-izgara{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}
.yazar-karti{display:flex;flex-direction:column;gap:.5rem;min-width:0}
.yazar-karti .yazar-kutusu{margin-top:0;flex:1}
.yazar-karti__sayi{font-size:var(--text-sm)}
.yazar-karti__sayi a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}

.terim-bulutu{display:flex;gap:.5rem;flex-wrap:wrap}

/* Uzun bir slug ya da boşluksuz bir başlık dar ekranda kabı taşırmasın. */
.yazi__baslik,.blog-serit__ad{overflow-wrap:anywhere}

/* Dokunma hedefleri: 44 piksel.
   Ölçüldü (21.08.2026, 390 piksel, altı sayfa türü): yan sütun bağlantıları 18,
   etiket rozetleri 24, kırıntılar 28, telefon 19, hesap düğmeleri ve sosyal
   simgeler 40 pikseldi. Parmak 18 piksele nişan alamıyor; v3 aynı kusuru alt
   bilgi sütunlarında ölçüp 2.75rem'e çıkarmıştı, kural onun devamı.

   Yalnız dar ekranda: geniş ekranda işaret eden şey fare ve 44 piksellik satırlar
   listeyi iki katına uzatıyor. Sınır 64rem, `CHROME`ın kendi sınırıyla aynı.

   Cümlenin **içindeki** bağlantı kapsam dışı: bir paragrafta geçen bağlantıyı 44
   piksel yapmak satır aralığını bozar ve WCAG 2.2 de onu istisna tutuyor.
   Kart başlıkları da kapsam dışı — onların gerçek hedefi kartın tamamı
   (`.blog-kart__baslik a::after` kabı kaplıyor). */
.pagination a,.pagination span{display:inline-flex;align-items:center;justify-content:center;
  min-height:2.75rem;min-width:2.75rem}
@media (max-width:63.9375rem){
  .blog-yan ul a,.yazar-kutusu__ad a,.yazar-karti__sayi a{display:flex;align-items:center;min-height:2.75rem}
  /* Yazının künye satırındaki yazar bağlantısı. Cümle içi bir bağlantı değil,
     satırın tek hedefi; komşuları düz metin. */
  .yazi__meta a{display:inline-flex;align-items:center;min-height:2.75rem}
  .breadcrumb a,.breadcrumb ol span,.terim-bulutu a,.yazi__etiketler a,
  .blog-baglantilar a,.urun-bagi{display:inline-flex;align-items:center;min-height:2.75rem}
}

@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) .blog-kategori{background:var(--surface);color:var(--ink)}
:root:not([data-theme="light"]) .blog-kategori{border-bottom-color:var(--line)}
:root:not([data-theme="light"]) .blog-kategori__liste a{color:var(--ink-soft)}
:root:not([data-theme="light"]) .blog-kategori__liste a:hover,:root:not([data-theme="light"]) .blog-kategori__liste a[aria-current]{color:var(--accent);border-bottom-color:var(--accent)}
}
:root[data-theme="dark"] .blog-kategori{background:var(--surface);color:var(--ink)}
:root[data-theme="dark"] .blog-kategori{border-bottom-color:var(--line)}
:root[data-theme="dark"] .blog-kategori__liste a{color:var(--ink-soft)}
:root[data-theme="dark"] .blog-kategori__liste a:hover,:root[data-theme="dark"] .blog-kategori__liste a[aria-current]{color:var(--accent);border-bottom-color:var(--accent)}