/* =====================================================================
   Blog — ortak stil
   =====================================================================
   Sitenin geri kalanında her sayfa kendi <style> bloğunu taşıyor.
   Blogda bunu tekrarlamıyoruz: yazı sayısı arttıkça aynı 200 satır
   her dosyaya kopyalanırdı ve biri değişince ötekiler geride kalırdı —
   bu projede elle çoğaltılan şeylerin sessizce ayrıştığını defalarca
   gördük. Tek dosya, tek kaynak.

   Renkler ana sayfayla AYNI değişken isimlerini kullanıyor ki bir gün
   ortak bir tema dosyasına taşınırsa isim değiştirmek gerekmesin.
   ===================================================================== */
:root{
  --ink:#0E2A32; --paper:#F2ECDD; --teal:#1E8C82; --teal-deep:#0F5C55;
  --coral:#C1502E; --line:#16505B; --gold:#B8912A;
  --paper-line:rgba(22,80,91,0.14);
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background:var(--paper); color:var(--line);
  font-family:'IBM Plex Sans',sans-serif; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:'IBM Plex Mono',monospace;}
h1,h2,h3{font-family:'Fraunces',serif; font-weight:600; color:var(--ink);}
a{color:var(--teal-deep);}
.wrap{max-width:720px; margin:0 auto; padding:0 24px;}

nav{position:sticky; top:0; z-index:50; background:rgba(242,236,221,0.93);
  backdrop-filter:blur(6px); border-bottom:1px solid var(--paper-line);}
nav .wrap{display:flex; align-items:center; justify-content:space-between;
  height:64px; max-width:1080px;}
.logo{font-family:'Fraunces',serif; font-weight:600; font-size:1.3rem; color:var(--ink);
  text-decoration:none;}
.logo span{color:var(--teal);}
nav .baglar{display:flex; gap:20px; font-size:0.9rem; font-weight:500;}
nav .baglar a{opacity:0.75; text-decoration:none;}
nav .baglar a:hover{opacity:1;}

header.yazi-bas{padding:52px 0 8px;}
.etiket{font-family:'IBM Plex Mono'; font-size:0.74rem; color:var(--teal-deep);
  letter-spacing:0.08em; text-transform:uppercase; margin-bottom:12px;}
.yazi-bas h1{font-size:clamp(1.7rem,4vw,2.3rem); line-height:1.2; margin-bottom:14px;}
.kunye{font-family:'IBM Plex Mono'; font-size:0.76rem; color:rgba(22,80,91,0.55);
  display:flex; gap:14px; flex-wrap:wrap;}

article{padding:32px 0 90px;}
article p{margin-bottom:18px; font-size:1.02rem;}
article h2{font-size:1.35rem; margin:40px 0 14px;}
article h3{font-size:1.08rem; margin:28px 0 10px;}
article ul,article ol{margin:0 0 18px 22px;}
article li{margin-bottom:8px;}
article strong{color:var(--ink);}

/* Ölçüm tablosu — rakamlar hizalı okunsun. Dar ekranda kendi içinde
   kayar; sayfayı yana kaydırmak yerine tabloyu kaydırıyoruz. */
table{width:100%; border-collapse:collapse; margin:20px 0 24px; font-size:0.9rem;}
@media (max-width:640px){
  table{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch;}
  td,th{white-space:nowrap;}
}
th,td{border:1px solid var(--paper-line); padding:9px 12px; text-align:left;}
th{background:rgba(30,140,130,0.07); font-weight:600; color:var(--ink);}
td.sag{font-family:'IBM Plex Mono'; text-align:right;}

/* Seyir uyarısı — her yazıda görünmeli. Blog bir seyir yayını değil;
   bunu yazının içinde söylemek, altbilgide söylemekten güçlü. */
.seyir-not{background:#F4E9E3; border:1px solid rgba(193,80,46,0.32);
  border-left:3px solid var(--coral); padding:16px 18px; border-radius:4px;
  font-size:0.88rem; color:rgba(22,80,91,0.9); margin:28px 0;}
.seyir-not strong{color:var(--coral);}

/* Veri notu — sayının nereden geldiğini söyler. */
.veri-not{background:#FBF4E4; border:1px solid rgba(184,145,42,0.32);
  border-left:3px solid var(--gold); padding:16px 18px; border-radius:4px;
  font-size:0.86rem; color:rgba(22,80,91,0.88); margin:28px 0;}

.cta{background:var(--ink); color:var(--paper); border-radius:6px;
  padding:26px 24px; margin:40px 0 0;}
.cta h3{color:var(--paper); font-size:1.15rem; margin-bottom:8px;}
.cta p{color:rgba(242,236,221,0.78); font-size:0.94rem; margin-bottom:16px;}
.cta a{display:inline-block; background:var(--teal); color:var(--ink);
  padding:12px 22px; border-radius:2px; font-weight:500; font-size:0.92rem;
  text-decoration:none;}

/* --- liste sayfası --- */
.liste{padding:24px 0 90px;}
.yazi-kart{display:block; text-decoration:none; color:inherit;
  border-top:1px solid var(--paper-line); padding:26px 0;}
.yazi-kart:last-child{border-bottom:1px solid var(--paper-line);}
.yazi-kart h2{font-size:1.25rem; margin-bottom:8px;}
.yazi-kart p{font-size:0.95rem; color:rgba(22,80,91,0.78); margin-bottom:10px;}
.yazi-kart .kunye{font-size:0.74rem;}
.yazi-kart:hover h2{color:var(--teal-deep);}

footer{border-top:1px solid var(--paper-line); padding:34px 0; font-size:0.84rem;}
footer .wrap{max-width:1080px; display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:16px; opacity:0.62;}
@media (max-width:640px){
  footer .wrap{flex-direction:column; align-items:flex-start; gap:10px;}
  footer .mono{font-size:0.75rem; overflow-wrap:anywhere;}
}

/* ---------- İKİ DİL ----------
   Hukuki metinlerdeki yöntemin aynısı: iki blok sayfada yan yana durur,
   hangisinin görüneceğini <html lang> belirler. rota-dil.js bu özniteliği
   betik yüklenir yüklenmez yazıyor, yani ilk boyamada doğru dil çıkıyor.
   Blog yazılarını sözlüğe KOYAMAYIZ — rota-dil.js her sayfada yükleniyor
   ve uzun metinler ana sayfayı da şişirirdi. */
#metin-en{display:none;}
html[lang="en"] #metin-tr{display:none;}
html[lang="en"] #metin-en{display:block;}