/* 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}

/* Yazı ızgarası. Gerekçesi `sayfalar.ts`teki `yaziIzgarasi`: `.card-grid` sayfanın
   tam genişliği için kurulmuş, blogun listesi yan sütunlu bir düzenin içinde.
   `auto-fit` son satırda öksüz kart bırakmıyor. */
.yazi-izgara{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}

/* Öne çıkan yazı: dar ekranda tek sütun, 48rem üstünde görsel solda metin sağda. */
.one-cikan{position:relative;display:grid;grid-template-columns:minmax(0,1fr);
  border:0;border-radius:var(--radius-lg);background:var(--surface);
  overflow:hidden;margin-bottom:1.5rem}
@media (min-width:48rem){.one-cikan{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}}
/* Dar ekranda 16/9 (3/2 idi): üst bilginin kendisi zaten üç bant ve dar bir
   ekranda hero'nun altına düşen ilk yazı kartı ekranın altına düşüyordu.
   Görsel kısaltmak, tek başına bu ölçüyü kapatmıyor (üst bilgi yükseklikleri
   taşınan ön yüz kütüphanesinden geliyor, ayrışması gereken ayrı bir mesele)
   ama katkısı ölçülür: 390 piksel genişlikte otuz sekiz piksel geri kazanılıyor. */
.one-cikan__medya{aspect-ratio:16/9;background:var(--accent-soft)}
.one-cikan__medya img{width:100%;height:100%;object-fit:cover}
@media (min-width:48rem){.one-cikan__medya{aspect-ratio:auto;height:100%}}
.one-cikan__govde{display:flex;flex-direction:column;gap:.6rem;padding:1.25rem;justify-content:center}
.one-cikan__baslik{font-size:clamp(var(--text-xl),1rem + 1.3vw,var(--text-3xl));line-height:1.2}
/* Kartın tamamı tıklanabilir ama işaretlemede tek bağlantı var; `.yazi-karti` ile aynı desen. */
.one-cikan__baslik a::after{content:"";position:absolute;inset:0}
.one-cikan__ozet{color:var(--ink-soft)}

/* 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ı kartı. v3'ün `tour-card`ı kullanılmadı: o kart fiyat taşıyor ve blogda fiyat yok. */
.yazi-karti{position:relative;display:flex;flex-direction:column;border:0;
  border-radius:var(--radius-lg);background:var(--surface);overflow:hidden;min-width:0}
.yazi-karti__medya{aspect-ratio:3/2;background:var(--accent-soft)}
.yazi-karti__medya img{width:100%;height:100%;object-fit:cover}
.yazi-karti__govde{display:flex;flex-direction:column;gap:.5rem;padding:1rem;flex:1}
.yazi-karti__baslik{font-size:var(--text-lg);line-height:1.3}
/* Kartın tamamı tıklanabilir ama işaretlemede tek bağlantı var: başlığınki. İç içe
   bağlantı yerine kaplayan bir sözde öğe — ekran okuyucu bir kart için tek hedef
   duyuyor, fare kullanan kartın her yerine basabiliyor. */
.yazi-karti__baslik a::after{content:"";position:absolute;inset:0}
.yazi-karti__ozet{color:var(--ink-soft);font-size:var(--text-sm)}
.yazi-karti__alt{margin-top:auto;display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;
  color:var(--ink-soft);font-size:var(--text-xs)}
/* Kartın görünür eylemi. Kaplayan gizli bağlantının üstünde kalması DOM
   sırasından geliyor; z-index yalnız düğmenin kendi tıklama alanını
   kaplayanın önünde tutmak için. */
.karti__eylem{margin-top:.6rem;position:relative;z-index:1}

/* 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}
.blog-duzen--yazar .one-cikan,.blog-duzen--yazar .yazi-karti{border: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,.yazi-karti__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ı
   (`.yazi-karti__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)}
@media (min-width:64rem){.blog-duzen--yazar{grid-template-columns:minmax(0,1fr) 18rem;gap:3rem}}
.blog-duzen--yazar .yazar-kutusu__ad{display:none}
.blog-duzen--yazar .blog-yan__blok{border:0}
@media (min-width:64rem){.blog-duzen--yazi{grid-template-columns:minmax(0,1fr) 18rem;gap:1.5rem;max-width:67.5rem;margin-inline:auto}
.blog-duzen--yazi .yazi{max-width:none}}
.breadcrumb{direction:ltr;background-image:none;border:0}
.breadcrumb ol{display:flex;width:100%;min-width:0}
.breadcrumb li:last-child{flex:1 1 auto;min-width:0}
.breadcrumb li:last-child span{width:100%}
.blog-duzen--yazi .yazi__govde>.table{display:block;width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}