/* Haberpaketleri — blog bolumu.
   site.css ten AYRILDI: yalnizca gerektigi sayfada yuklenir.
   Ortak belirtecler (--brand vb.) site.css te tanimlidir; bu dosya
   ondan SONRA yuklenmelidir. */

/* ============ BLOG ============ */

/* Kategori suzgeci */
.blog-suzgec{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px}
.blog-etiket{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 14px; border-radius:999px; font-size:.83rem; font-weight:600;
  border:1px solid var(--line); background:var(--surface); color:var(--text-2);
  text-decoration:none; transition:border-color .15s ease, color .15s ease;
}
.blog-etiket:hover{border-color:var(--brand); color:var(--brand)}
.blog-etiket.is-on{background:var(--brand); border-color:var(--brand); color:#fff}
.blog-etiket__adet{font-size:.72rem; opacity:.75; font-variant-numeric:tabular-nums}
.blog-etiket.is-on .blog-etiket__adet{opacity:.85}

/* Liste kartlari — kartin tamami tek baglanti */
.blog-kart{padding:0; overflow:hidden}
.blog-kart__bag{display:flex; flex-direction:column; height:100%; text-decoration:none; color:inherit}
.blog-kart__gorsel{width:100%; aspect-ratio:16/9; object-fit:cover; display:block; background:var(--surface-2)}
.blog-kart__govde{padding:20px; display:flex; flex-direction:column; gap:9px; flex:1}
.blog-kart__ust{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  font-size:.74rem; color:var(--muted); font-family:var(--f-mono); letter-spacing:.03em;
}
.blog-kart__kategori{color:var(--brand); font-weight:700}
.blog-kart .card-link{margin-top:auto}

/* Sayfalama */
.blog-sayfalama{display:flex; align-items:center; justify-content:center; gap:8px; margin-top:34px; flex-wrap:wrap}
.blog-sayfa{
  min-width:38px; height:38px; display:inline-grid; place-items:center;
  border-radius:10px; border:1px solid var(--line); background:var(--surface);
  color:var(--text-2); font-weight:600; font-size:.86rem; text-decoration:none;
}
.blog-sayfa:hover{border-color:var(--brand); color:var(--brand)}
.blog-sayfa.is-on{background:var(--brand); border-color:var(--brand); color:#fff}

/* Yazi detayi */
.blog-ustbilgi{font-family:var(--f-mono); font-size:.78rem; color:var(--muted); letter-spacing:.04em}
.blog-duzen{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:38px; align-items:start}
.blog-yazi__kapak{width:100%; border-radius:var(--radius); margin-bottom:28px; display:block}
.blog-yazi__alt{display:flex; gap:10px; flex-wrap:wrap; margin-top:34px; padding-top:22px; border-top:1px solid var(--line)}

/* Yazi govdesi — icerik guvenli_html() izin listesinden gectigi icin
   yalnizca burada listelenen etiketler gelebilir. */
.blog-govde{max-width:72ch; color:var(--text-2); font-size:1.02rem; line-height:1.75}
.blog-govde > * + *{margin-top:17px}
.blog-govde h2{font-size:1.5rem; margin-top:34px; color:var(--text)}
.blog-govde h3{font-size:1.15rem; margin-top:28px; color:var(--text)}
.blog-govde h4{font-size:1rem; margin-top:24px; color:var(--text)}
.blog-govde a{color:var(--brand); text-decoration:underline; text-underline-offset:3px}
.blog-govde a:hover{color:var(--brand-deep)}
.blog-govde ul,.blog-govde ol{padding-left:22px}
.blog-govde li + li{margin-top:7px}
.blog-govde img{max-width:100%; height:auto; border-radius:var(--radius); display:block}
.blog-govde figure{margin:0}
.blog-govde figcaption{font-size:.82rem; color:var(--muted); margin-top:8px}
.blog-govde blockquote{
  border-left:3px solid var(--brand); padding:4px 0 4px 18px; color:var(--text-2); font-style:italic;
}
.blog-govde code{
  font-family:var(--f-mono); font-size:.87em; background:var(--surface-2);
  padding:2px 6px; border-radius:5px;
}
.blog-govde pre{
  background:var(--ink); color:#E9F1F8; padding:16px 18px; border-radius:var(--radius);
  overflow-x:auto; font-size:.85rem;
}
.blog-govde pre code{background:none; padding:0; color:inherit}
.blog-govde table{width:100%; border-collapse:collapse; font-size:.9rem; display:block; overflow-x:auto}
.blog-govde th,.blog-govde td{border:1px solid var(--line); padding:9px 12px; text-align:left}
.blog-govde th{background:var(--surface-2); font-weight:700}
.blog-govde hr{border:0; border-top:1px solid var(--line); margin:28px 0}

/* Yan sutun */
.blog-yan{display:flex; flex-direction:column; gap:16px; position:sticky; top:96px}
.blog-yan__kart{padding:20px}
.blog-yan__liste{list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:2px}
.blog-yan__liste li{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:7px 0}
.blog-yan__liste li + li{border-top:1px solid var(--line)}
.blog-yan__liste a{color:var(--text-2); text-decoration:none; font-size:.9rem}
.blog-yan__liste a:hover{color:var(--brand)}
.blog-yan__liste span{font-size:.76rem; color:var(--muted); font-variant-numeric:tabular-nums}
.blog-yan__cta p{font-size:.88rem; margin:8px 0 14px}

@media (max-width:900px){
  .blog-duzen{grid-template-columns:1fr; gap:28px}
  .blog-yan{position:static}
}


/* ============ KAPAK ALANI ============
   Yazilarin cogunda kapak gorseli yok. Gorsel yoksa kart bos bir kutuya
   donuyordu; bu yuzden kapaksiz yazilara kategori adini tasiyan tipografik
   bir zemin basilir. Ton kategori adindan turetilir, boylece ayni kategori
   her zaman ayni rengi alir. */
/* Oran 3:2 — kapak gorselleri genelde bu oranda uretiliyor. 16/9 iken
 tasarlanmis kapaklarin yan taraflari (baslik metni dahil) kirpiliyordu. */
/* height:auto SART. <img> uzerindeki height="..." ozniteligi tarayicida
 CSS "height" gibi uygulanir; yazar tarafinda height kurali olmadigi icin
 oznitelik kazaniyor ve aspect-ratio hic devreye girmiyordu. Kapak, oran
 yerine oznitelikteki piksel yuksekligiyle basiliyor, gorsel yanlardan
 kirpiliyordu. */
.blog-kapak{
  width:100%; height:auto; aspect-ratio:3/2; display:block; object-fit:cover;
  background:var(--surface-2);
}
.blog-kapak--yazi{
  display:grid; place-items:center; padding:18px; text-align:center;
  border-bottom:1px solid var(--line);
}
.blog-kapak__ad{
  font-family:var(--f-mono); font-size:.78rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:#fff;
  text-shadow:0 1px 2px rgba(8,64,111,.35);
}
.blog-kapak--t1{background:linear-gradient(135deg,#1580D0,#0C5FAE)}
.blog-kapak--t2{background:linear-gradient(135deg,#0C5FAE,#08406F)}
.blog-kapak--t3{background:linear-gradient(135deg,#2E9BD6,#116EA8)}
.blog-kapak--t4{background:linear-gradient(135deg,#4A7FB5,#0C5FAE)}

/* ============ BOS DURUM ============
   Blog yayina bos cikabilir. Kuru bir uyari satiri yerine ziyaretciyi
   urun sayfalarina yonlendiren, tamamlanmis gorunen bir bolum. */
.blog-bos{
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); padding:46px 28px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.blog-bos__ik{
  width:52px; height:52px; display:grid; place-items:center; border-radius:14px;
  background:var(--brand-soft); color:var(--brand); margin-bottom:4px;
}
.blog-bos__ik svg{width:26px; height:26px}
.blog-bos h2{margin:0}
.blog-bos p{margin:0; max-width:52ch; color:var(--text-2)}
.blog-bos__act{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:8px}

/* Yan sutun uzun yazi boyunca gorunur kalsin — yazi 7.000 karakteri asabiliyor
   ve okuyucu asagi indiginde kategoriler ile teklif kutusu ekrandan cikiyordu. */
@media (min-width:1000px){
  .blog-yan{position:sticky; top:24px; display:flex; flex-direction:column; gap:18px}
}

/* ============ YAZI DUZENI — TEK OLCU ============
 *
 * Sorun: kapak gorseli sutunun TAMAMINI (752px) kapliyor, metin ise okuma
 * olcusuyle sinirliydi (~663px). Ikisi soldan hizali basliyor ama sagda
 * gorsel metinden 90px tasiyordu — sayfa dagilmis gorunuyordu.
 * Ayrica gorseli 16/9'a kirpmak dogru bir cozum degildi: kapak tasarlanmis
 * bir grafik, kirpilinca icerik kaybediyor.
 *
 * Cozum: yazinin TAMAMI tek bir olcuye oturur. Gorsel de metin de ayni
 * genislikte olur, iki kenar da hizalanir; gorsel kirpilmadan kendi
 * oraninda (3:2) basilir.
 */
@media (min-width:1000px){
  /* Sayfa ic genisligi 1136px (1180 - 2x22 dolgu).
     392 + 44 + 700 = 1136 -> tam oturur, hicbir yerde olu alan kalmaz.
     700px, 1.06rem puntoda ~79 karakterlik satir demektir: okuma icin
     rahat araligin tam ortasi. */
  .blog-duzen{grid-template-columns:minmax(0,1fr) 392px; gap:44px}

  /* Yazi kendi sinirini koymaz: olcuyu sutun belirler, boylece gorsel de
     metin de sutunu birebir doldurur ve iki kenar hizali kalir. */
  .blog-yazi{max-width:none}
  .blog-govde{max-width:none; font-size:1.06rem; line-height:1.72}
}

/* Kapak: KIRPILMAZ. Kendi oraninda, yazinin olcusu kadar genis basilir. */
/* Kapak, gorselin KENDI oranini korur.
   aspect-ratio:auto + width/height ozniteligi birlikte calisir: tarayici
   oznitelikten orani cikarir, yeri onceden ayirir ve sayfa kaymaz.
   height:auto SART — oznitelikteki height, sunum ipucu olarak piksel
   yuksekligi dayatir ve gorseli ezer. */
.blog-yazi__kapak{
  width:100%; height:auto; aspect-ratio:auto; object-fit:fill;
  background:var(--surface-2);
}

/* ============ DORT SUTUNLUK KART IZGARASI ============
 * Kart icerigi bilincli olarak sade: gorsel, baslik, tarih. Dort sutunda
 * kartlar dar oldugu icin ozet metni kart yuksekliklerini esitsizlestirip
 * izgarayi dagitiyordu.
 * auto-fill degil sabit dort sutun: yazi sayisi kac olursa olsun kart
 * genisligi ayni kalir, tek yazi da dogru olcude gorunur. */
.blog-izgara4{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:20px}
@media (max-width:1000px){ .blog-izgara4{grid-template-columns:repeat(3, minmax(0,1fr))} }
@media (max-width:760px){  .blog-izgara4{grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px} }
@media (max-width:440px){  .blog-izgara4{grid-template-columns:1fr} }

.blog-kart4{
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); overflow:hidden;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.blog-kart4:hover{
  border-color:var(--brand); transform:translateY(-3px);
  box-shadow:0 14px 30px -20px rgba(8,64,111,.55);
}
.blog-kart4__bag{display:flex; flex-direction:column; height:100%; text-decoration:none; color:inherit}
.blog-kart4__govde{padding:15px 16px 17px; display:flex; flex-direction:column; gap:7px; flex:1}
.blog-kart4__baslik{
  font-size:1rem; line-height:1.34; margin:0; color:var(--text);
  font-weight:650; text-wrap:pretty;
}
.blog-kart4__tarih{
  margin-top:auto; font-family:var(--f-mono); font-size:.73rem;
  color:var(--muted); letter-spacing:.03em;
}

/* Blog listesinde h1 ile aciklama arasindaki alt baslik. h1 "Blog" kisa
   kaldigi icin sayfanin konusunu bu satir tasir. */
.blog-altbaslik{
  font-size:clamp(1.15rem,2.2vw,1.45rem); line-height:1.3; font-weight:650;
  color:var(--text); margin:6px 0 10px; text-wrap:balance;
}

/* ============ BLOG CAGRI BALONU ============
   Suzgec ile kart izgarasi arasinda durur. Renk sitenin satin alma
   turuncusudur (--buy ailesi); mavi govde icinde dikkat ceker ama
   yabanci durmaz. */
.blog-balon{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center; gap:16px;
  margin:22px 0 24px; padding:16px 20px;
  border:1px solid var(--buy-line); border-radius:var(--radius);
  background:var(--buy-soft);
}
.blog-balon__ik{
  width:38px; height:38px; display:grid; place-items:center; border-radius:11px;
  background:var(--buy); color:#fff; flex:none;
}
.blog-balon__ik svg{width:20px; height:20px}
.blog-balon__metin strong{display:block; color:var(--buy-text); font-size:1rem; margin-bottom:2px}
.blog-balon__metin p{margin:0; color:var(--text-2); font-size:.9rem; line-height:1.5}
.blog-balon__act{display:flex; gap:9px; flex-wrap:wrap; flex:none}
@media (max-width:860px){
  .blog-balon{grid-template-columns:auto minmax(0,1fr); row-gap:13px}
  .blog-balon__act{grid-column:1 / -1}
}

/* Balonda ust etiket (eyebrow) satiri */
.blog-balon__ust{
  display:block; font-family:var(--f-mono); font-size:.68rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--buy);
  margin-bottom:3px;
}
/* Metin uzadigi icin dugmeler ustten degil ortadan hizali kalsin */
.blog-balon{align-items:center}

/* Ekran okuyucuya acik, gozle gorunmez etiket */
.u-gizli{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ============ SUZGEC + ARAMA SATIRI ============
   Kategoriler solda, arama saginda. Dar ekranda arama alt satira duser ve
   tam genislige yayilir. */
.blog-ust{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; flex-wrap:wrap; margin-bottom:24px;
}
.blog-ust .blog-suzgec{margin-bottom:0; flex:1 1 auto}
.blog-ara{display:flex; align-items:center; gap:12px; flex:0 0 auto}

/* Arama kutusu: tek hap. Gonder dugmesi kutunun ICINDE, yuvarlak ikon.
   Ayri "Ara" dugmesi kaba duruyordu ve satiri geriyordu. */
.blog-ara__kutu{
  display:flex; align-items:center; gap:6px;
  width:290px; max-width:100%;
  padding:5px 5px 5px 16px;
  border:1px solid var(--line); border-radius:999px;
  background:var(--surface);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.blog-ara__kutu:hover{border-color:var(--line-2)}
.blog-ara__kutu:focus-within{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(12,95,174,.12);
}
.blog-ara__kutu input{
  flex:1; min-width:0; border:0; outline:0; background:none;
  font:inherit; font-size:.88rem; color:var(--text); padding:0;
}
.blog-ara__kutu input::placeholder{color:var(--muted)}
/* Tarayicinin kendi temizleme carpisi hapin icinde cirkin duruyor */
.blog-ara__kutu input::-webkit-search-cancel-button{display:none}

.blog-ara__dugme{
  flex:none; width:32px; height:32px; border:0; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:var(--brand); color:#fff;
  transition:background .18s ease, transform .18s ease;
}
.blog-ara__dugme svg{width:16px; height:16px}
.blog-ara__dugme:hover{background:var(--brand-lit); transform:scale(1.06)}
.blog-ara__dugme:active{transform:scale(.96)}
.blog-ara__dugme:focus-visible{outline:2px solid var(--brand-deep); outline-offset:2px}

/* Aramayi temizleyen kucuk carpi — hapin icinde, gonder dugmesinin solunda */
.blog-ara__sil{
  flex:none; width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center; color:var(--muted);
  background:var(--surface-2); transition:background .15s ease, color .15s ease;
}
.blog-ara__sil svg{width:13px; height:13px}
.blog-ara__sil:hover{background:var(--line); color:var(--text)}

.blog-ara__sonuc{margin:-6px 0 20px; color:var(--text-2); font-size:.92rem}
.blog-ara__sonuc strong{color:var(--text)}

@media (max-width:700px){
  .blog-ust{align-items:stretch}
  .blog-ara{flex:1 1 100%}
  .blog-ara__kutu{width:100%}
}

/* Blog listesinde bolum ust boslugu. .sec 72px veriyor; basligin hemen
   altindaki suzgec satirindan once bu kadar bosluk gereksiz duruyordu. */
.sec--blog{padding-block:38px 64px}

/* ============ YAZI KUNYESI ============ */
.blog-kategori-rozet{
  display:inline-flex; align-items:center; padding:5px 13px; border-radius:999px;
  background:var(--brand-soft); color:var(--brand); border:1px solid var(--brand-soft);
  font-family:var(--f-mono); font-size:.7rem; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase; text-decoration:none;
  margin-bottom:14px; transition:border-color .15s ease;
}
.blog-kategori-rozet:hover{border-color:var(--brand)}
.blog-kunye{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  font-family:var(--f-mono); font-size:.78rem; color:var(--muted);
  letter-spacing:.03em; margin-top:14px;
}
.blog-kunye__ayrac{color:var(--line-2)}

/* ============ YAN SUTUN ============ */
.blog-yan__kart{padding:20px}
.blog-yan__baslik{
  font-size:.82rem; font-weight:700; margin:0 0 14px;
  font-family:var(--f-mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--text); padding-bottom:11px; border-bottom:1px solid var(--line);
}

/* Mini yazi listesi: kucuk gorsel + baslik + tarih */
.blog-mini{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px}
.blog-mini li + li{padding-top:13px; border-top:1px solid var(--line)}
.blog-mini a{
  display:grid; grid-template-columns:74px minmax(0,1fr); gap:12px;
  align-items:center; text-decoration:none; color:inherit;
}
.blog-mini__gorsel{
  width:74px; height:auto; aspect-ratio:3/2; object-fit:cover;
  border-radius:8px; display:block; background:var(--surface-2);
}
.blog-mini__gorsel--bos{background:linear-gradient(135deg,#1580D0,#0C5FAE)}
.blog-mini__metin{display:flex; flex-direction:column; gap:4px; min-width:0}
.blog-mini__baslik{
  font-size:.87rem; font-weight:600; line-height:1.32; color:var(--text);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.blog-mini a:hover .blog-mini__baslik{color:var(--brand)}
.blog-mini__alt{font-family:var(--f-mono); font-size:.7rem; color:var(--muted)}

/* Cagri karti */
.blog-yan__cta-ust{
  display:block; font-family:var(--f-mono); font-size:.66rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--buy); margin-bottom:6px;
}
.blog-yan__cta .blog-yan__baslik{border-bottom:0; padding-bottom:0; margin-bottom:8px;
  font-family:inherit; font-size:1.02rem; letter-spacing:normal; text-transform:none}
.blog-yan__cta p{margin:0 0 14px; font-size:.88rem; color:var(--text-2); line-height:1.55}

/* ============ KUNYE + PAYLASIM SERIDI ============
   Gorselin altinda, govdenin ustunde. Solda kunye, sagda paylasim. */
.blog-meta{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  margin:-8px 0 26px; padding-bottom:18px;
  border-bottom:1px solid var(--line);
}
.blog-meta .blog-kunye{margin-top:0}

.blog-paylas{display:flex; align-items:center; gap:8px}
.blog-paylas__et{
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin-right:2px;
}
.blog-paylas__bag{
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--line); background:var(--surface); color:var(--muted);
  transition:border-color .16s ease, color .16s ease, background .16s ease, transform .16s ease;
}
.blog-paylas__bag svg{width:16px; height:16px}
.blog-paylas__bag:hover{
  border-color:var(--brand); color:var(--brand);
  background:var(--brand-soft); transform:translateY(-2px);
}
.blog-paylas__bag:focus-visible{outline:2px solid var(--brand); outline-offset:2px}

@media (max-width:620px){
  .blog-meta{gap:12px}
  .blog-paylas__et{display:none}
}

/* Yan listede su an okunan yazi: siralama dogru kalsin diye listeden
   cikarilmaz, ama okuyucu neden orada oldugunu anlasin diye soluklastirilir. */
.blog-mini li.is-simdi{opacity:.55}
.blog-mini li.is-simdi a{pointer-events:none; cursor:default}
.blog-mini li.is-simdi .blog-mini__baslik::after{
  content:" · şu an okuyorsunuz"; font-weight:400; font-size:.76em; color:var(--muted);
}

/* WebP turevi <picture> ile sunuluyor. <picture> varsayilan olarak inline
   bir kapsayicidir; kart bir flex sutunu oldugu icin blok davranmasi ve
   icindeki gorselin tam genisligi almasi gerekir. */
.blog-kart4__bag picture,
.blog-yazi picture,
.blog-mini picture{display:block; width:100%}
.blog-mini picture{width:auto; flex:none}