/* Color X blog — site paletiyle, uzun metin için okunur tipografi. */
:root{--ink:#0f0f0f;--panel:#161616;--line:#2a2a2a;--cream:#efeae0;--muted:#a7a19a;
      --bordo:#8E2A38;--bordo2:#b53142;--dim:#6f6a62}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Arial,sans-serif;
     color:var(--cream);background:var(--ink);line-height:1.5}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
header{position:sticky;top:0;z-index:20;background:rgba(15,15,15,.82);
       backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;height:60px;gap:12px}
.brand img{height:24px;width:auto;display:block}
.right{display:flex;align-items:center;gap:14px}
.back{color:var(--muted);font-size:.9rem}
@media(max-width:640px){.back{font-size:.8rem}.right{gap:10px}.brand img{height:21px}}
/* Dar ekranda üst bar sığmıyordu: TR/EN düğmesi sağdan TAŞIYOR ve "E" kesik
   kalıyordu (2026-09-15, iPhone 16 Pro genişliğinde doğrulandı). İkincil
   bağlantılar (Tarifler/Video) gizlenir; Blog, ana sayfa ve dil düğmesi kalır
   — ikisi de alt bağlantılardan yine erişilebiliyor. */
@media(max-width:480px){
  .back.opt{display:none}
  .right{gap:8px}
  .bar{gap:8px}
  .brand img{height:19px}
}

/* ---- yazı ---- */
.post{max-width:760px;padding-top:44px;padding-bottom:70px}
.eyebrow{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bordo2);
         font-weight:800;margin-bottom:16px}
.post h1{font-size:clamp(2rem,5.2vw,3.1rem);line-height:1.06;font-weight:900;
         letter-spacing:-.02em;margin-bottom:18px;text-wrap:balance}
.standfirst{font-size:clamp(1.05rem,2.2vw,1.25rem);line-height:1.5;color:#cfc8bd;
            margin-bottom:18px}
.byline{color:var(--dim);font-size:.82rem;letter-spacing:.02em;
        padding-bottom:22px;border-bottom:1px solid var(--line)}
.toc{margin:26px 0 8px;padding:18px 22px;background:var(--panel);border:1px solid var(--line);
     border-radius:12px}
.toc-t{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
       margin-bottom:10px;font-weight:800}
.toc ol{margin:0;padding-left:20px;color:var(--muted);font-size:.93rem}
.toc li{margin:5px 0}
.toc a:hover{color:var(--cream)}

.body{font-size:1.06rem;line-height:1.75;color:#ddd6ca;margin-top:14px}
.body p{margin:0 0 18px}
.body h2{font-size:1.55rem;line-height:1.2;font-weight:900;color:var(--cream);
         margin:46px 0 16px;padding-top:20px;border-top:1px solid var(--line);
         letter-spacing:-.01em;scroll-margin-top:76px}
.body h3{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bordo2);
         font-weight:800;margin:30px 0 10px}
.body h4{font-size:1.12rem;font-weight:800;color:var(--cream);margin:26px 0 10px}
.body ul{margin:0 0 18px;padding-left:22px}
.body li{margin:6px 0}
.tw{overflow-x:auto;margin:22px 0 26px;border:1px solid var(--line);border-radius:12px}
.body table{border-collapse:collapse;width:100%;font-size:.9rem;background:var(--panel)}
.body th{text-align:left;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
         color:var(--muted);padding:12px 14px;border-bottom:1px solid var(--line);
         white-space:nowrap;font-weight:800}
.body td{padding:11px 14px;border-bottom:1px solid #202020;vertical-align:top;color:#d6cfc4}
.body tr:last-child td{border-bottom:0}
.foot-note{margin-top:44px;padding-top:18px;border-top:1px solid var(--line);
           color:var(--dim);font-size:.8rem;line-height:1.6}

/* ---- liste ---- */
/* DİKKAT: `.wrap` yanlarda 20px dolgu veriyor. Burada `padding` KISAYOLUNU
   kullanmak onu SIFIRLIYOR ve dar ekranda metin kenara yapışıyordu (kullanıcı
   raporu 2026-09-15, iPhone 16 Pro). Masaüstünde blok ortalandığı için hata
   görünmüyordu. Uzun yazım kullan — `.post` zaten öyle yapıyor. */
.hero{padding-top:52px;padding-bottom:10px;max-width:760px}
.hero h1{font-size:clamp(2.1rem,6vw,3.4rem);font-weight:900;letter-spacing:-.02em;
         line-height:1.04;margin-bottom:14px}
.hero p{color:var(--muted);font-size:1.02rem;line-height:1.6}
.posts{display:grid;gap:16px;padding-top:26px;padding-bottom:60px;max-width:860px}
.card{display:block;background:var(--panel);border:1px solid var(--line);border-radius:14px;
      padding:22px 24px;transition:border-color .15s,transform .15s}
.card:hover{border-color:#4a4a4a;transform:translateY(-1px)}
.card .tag{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
           color:var(--bordo2);font-weight:800}
.card h2{font-size:1.32rem;font-weight:800;margin:8px 0 8px;line-height:1.25}
.card p{color:var(--muted);font-size:.95rem;line-height:1.55}
.card .meta{color:var(--dim);font-size:.78rem;margin-top:12px}
footer{border-top:1px solid var(--line);padding:26px 0;color:var(--muted);
       font-size:.88rem;text-align:center}
footer a:hover{color:var(--cream)}
/* Fujifilm bağımsızlık notu — sitenin diğer sayfalarıyla aynı metin (2026-10-04) */
footer .disc{max-width:720px;margin:14px auto 0;font-size:.76rem;line-height:1.5;color:var(--dim)}

/* ---- dil anahtarı (istek 2026-09-15: blog yazıları TR + EN) ----
   Gizlilik/koşullar sayfalarıyla AYNI düzen: iki dil de sayfada duruyor,
   `?lang=` hangisinin görüneceğini seçiyor. Ayrı EN dosyası açmak yerine bu
   yol seçildi — tek kanonik URL, arama motoru ikizlenmiyor ve dil değişince
   sayfa yeniden yüklenmiyor. */
.langtog{display:flex;gap:2px;border:1px solid var(--line);border-radius:999px;
         overflow:hidden}
.langtog a{padding:5px 12px;text-decoration:none;color:var(--muted);
           font-size:.82rem;font-weight:700}
.langtog a.on{background:var(--cream);color:var(--ink)}
@media(max-width:640px){.langtog a{font-size:.7rem;padding:4px 9px}}
/* Gizleme DISPLAY DEĞERİYLE DEĞİL, kök sınıfla yapılır: `[data-lang]{display:none}`
   koyup JS'ten `display=''` yazmak kuralı EZMİYOR ve sayfa boş kalıyordu
   (2026-09-15, doğrulamada yakalandı). Ayrıca her öğenin doğal display'i farklı
   (ızgara, satır içi bağlantı, makale) — tek bir değer dayatmak düzeni bozardı.
   Sınıf <head>'de, gövde çizilmeden önce konur; dil titremesi olmaz. */
html.lang-tr [data-lang="en"],html.lang-tr [data-lang="de"]{display:none}
html.lang-en [data-lang="tr"],html.lang-en [data-lang="de"]{display:none}
html.lang-de [data-lang="tr"],html.lang-de [data-lang="en"]{display:none}

/* Almanca uzun bileşik sözcükler dar ekranda taşmasın (2026-11-04). */
html[lang=de] h1,html[lang=de] h2,html[lang=de] h3{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}