/* ─────────────────────────────────────────────────────────────────────────
   Zaaf — metin sayfaları (blog + hukuki) v3 teması.

   Bu sayfaların GÖVDESİ değişmiyor: hukuki metin ve SEO yazıları olduğu gibi
   duruyor. Değişen yalnız kabuk ve palet. Eski sayfalar koyu temadaydı ve
   `ds/tokens.css` + `ds/components.css` + `vulnytics.css` üçlüsüne bağlıydı;
   bu dosya o üçlünün yerini alıyor.

   ⚠ Gövdedeki SATIR İÇİ stiller eski token adlarını kullanıyor
   (`var(--sp-7)`, `var(--accent-fg)`, `var(--fs-md)`, `var(--fw-medium)`).
   O adlar burada yeniden tanımlanıyor — silinirlerse 75 satır içi stil
   sessizce bozulur. Yenisini eklemeden eskisini kaldırma.

   `vulnytics-v3.css` ile BİRLİKTE yükleniyor: fontlar, nav, hamburger,
   mobil panel ve alt bilgi oradan geliyor; burada yalnız sayfaya özgü olan.
   ───────────────────────────────────────────────────────────────────────── */

:root{
  /* Palet — landing v3 ile aynı mürekkep/kağıt/cyan */
  --paper:#F3F2F2;
  --ink:#16171A;
  --accent:#2340E8;

  --bg:var(--paper);
  --bg-subtle:#ffffff;
  --bg-elevated:#ffffff;
  --bg-muted:#e9eaeb;

  --fg:var(--ink);
  --fg-muted:rgba(22,23,26,0.70);
  --fg-subtle:rgba(22,23,26,0.55);
  --fg-faint:rgba(22,23,26,0.40);

  --accent-fg:#0d7f96;              /* açık zeminde AA okunur cyan */
  --accent-hover:#0a6a7d;
  --accent-bg:rgba(35,64,232,0.09);
  --accent-border:rgba(35,64,232,0.34);

  --border:rgba(22,23,26,0.12);
  --border-subtle:rgba(22,23,26,0.08);

  --font-mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --fs-2xs:10px; --fs-xs:11px; --fs-sm:12.5px; --fs-md:14.5px;
  --fs-base:15px; --fs-lg:16.5px; --fs-xl:19px; --fs-2xl:23px;
  --fs-3xl:28px; --fs-4xl:36px; --fs-5xl:46px;

  --fw-normal:400; --fw-medium:500; --fw-semi:600; --fw-bold:700;
  --lh-tight:1.15; --lh-snug:1.3; --lh-normal:1.5; --lh-relaxed:1.68;
  --ls-tight:-0.03em; --ls-snug:-0.02em; --ls-label:0.1em;

  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:26px; --sp-7:32px; --sp-8:40px; --sp-9:52px; --sp-10:64px;
  --sp-11:80px; --sp-12:96px;

  --r-xs:4px; --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:18px;
  --r-2xl:24px; --r-full:999px;
}
body{background:var(--bg);color:var(--fg);
  font-family:Archivo,"Helvetica Neue",Arial,sans-serif;margin:0;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}

/* Klavye kullanıcısı için içeriğe atlama — nav'ı her seferinde gezmesin. */
.vx-skip{position:absolute;left:-9999px;top:0;z-index:100;padding:12px 20px;
  background:var(--ink);color:#fff;border-radius:0 0 var(--r-md) 0}
.vx-skip:focus{left:0}

/* ── Sayfa kabı ──────────────────────────────────────────────────────── */
.vx-page{padding:var(--sp-11) 0 var(--sp-12)}
.vx-narrow{max-width:760px;margin:0 auto;padding:0 24px}
/* ── Blog yazısı hero görseli (şema, koyu panel) ───────────────────────── */
.vx-posthero{margin:34px 0 8px;border-radius:14px;overflow:hidden;border:1px solid rgba(22,23,26,.10);background:#070D15;line-height:0}
.vx-posthero img{width:100%;height:auto;display:block}
@media (max-width:760px){.vx-posthero{margin:24px 0 6px;border-radius:11px}}
.ds-lp-wrap{max-width:88rem;margin:0 auto;padding:0 24px}
@media (max-width:760px){
  .vx-page{padding:var(--sp-9) 0 var(--sp-10)}
  .vx-narrow,.ds-lp-wrap{padding:0 16px}
}

/* ── Kırıntı yolu ────────────────────────────────────────────────────── */
.ds-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);
  font-size:var(--fs-md);color:var(--fg-subtle)}
.ds-crumbs a{color:var(--fg-subtle);transition:color 180ms ease}
.ds-crumbs a:hover{color:var(--fg)}
.ds-crumbs__sep{color:var(--fg-faint)}

/* ── Başlık bloğu ────────────────────────────────────────────────────── */
.vx-posthead,.vx-sechead{display:flex;flex-direction:column;align-items:flex-start;
  gap:var(--sp-4);max-width:68ch}
.vx-posthead h1,.vx-narrow>h1{margin:0;font-size:clamp(32px,4.4vw,52px);
  font-weight:var(--fw-medium);letter-spacing:-0.04em;line-height:1.05;text-wrap:balance}
.vx-postmeta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-4);
  font-size:var(--fs-md);color:var(--fg-subtle)}

.ds-eyebrow{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:0.12em;
  text-transform:uppercase;color:var(--accent-fg)}
.ds-label{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:0.1em;
  text-transform:uppercase;color:var(--fg-subtle)}
.ds-h2{font-size:clamp(32px,4.4vw,52px);font-weight:var(--fw-medium);
  letter-spacing:-0.04em;line-height:1.05}
.ds-lede{font-size:clamp(16px,1.6vw,19px);line-height:1.6;color:var(--fg-muted);margin:0}
.ds-divider{height:1px;background:var(--border);border:0}
.ds-row{display:flex;align-items:center;flex-wrap:wrap}

.ds-badge{display:inline-flex;align-items:center;padding:4px 11px;border-radius:var(--r-sm);
  border:1px solid var(--border);font-size:var(--fs-sm);color:var(--fg-subtle)}
.ds-badge--accent{background:var(--accent-bg);border-color:var(--accent-border);
  color:var(--accent-fg);font-weight:var(--fw-medium)}

/* ── Gövde tipografisi ───────────────────────────────────────────────────
   Aralık TEK kuraldan yönetiliyor (`> * + *`). `.vx-prose p{margin:0}` gibi
   daha özgül bir kural yazmak bunu ezer ve paragraflar birbirine yapışır. */
.vx-prose{font-size:var(--fs-lg);line-height:var(--lh-relaxed);color:var(--fg-muted)}
.vx-prose>*{margin:0}
.vx-prose>*+*{margin-top:var(--sp-5)}
.vx-prose p{text-wrap:pretty}
.vx-prose .lede,.vx-prose>p:first-child{font-size:clamp(17px,1.7vw,21px);
  color:var(--fg);line-height:1.55}
.vx-prose h2{margin:var(--sp-10) 0 0;font-size:clamp(23px,2.4vw,32px);
  font-weight:var(--fw-medium);letter-spacing:var(--ls-tight);line-height:1.15;
  color:var(--fg);text-wrap:balance}
.vx-prose h3{margin:var(--sp-8) 0 0;font-size:var(--fs-xl);font-weight:var(--fw-medium);
  letter-spacing:var(--ls-snug);color:var(--fg)}
.vx-prose strong,.vx-prose b{color:var(--fg);font-weight:var(--fw-medium)}
.vx-prose em{color:var(--fg);font-style:italic}
.vx-prose ul,.vx-prose ol{margin:0;padding-left:var(--sp-6);display:flex;
  flex-direction:column;gap:var(--sp-3)}
.vx-prose li{padding-left:var(--sp-1)}
.vx-prose li::marker{color:var(--accent)}
.vx-prose a{color:var(--accent-fg);text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px}
.vx-prose a:hover{color:var(--accent-hover)}
.vx-prose blockquote{margin:0;padding:var(--sp-2) 0 var(--sp-2) var(--sp-5);
  border-left:2px solid var(--accent-border);color:var(--fg);font-style:italic}
.vx-prose code{font-family:var(--font-mono);font-size:0.88em;padding:2px 5px;
  background:var(--bg-muted);border-radius:var(--r-xs);color:var(--fg)}
.vx-prose hr{height:1px;border:0;background:var(--border-subtle);margin:var(--sp-9) 0}
.vx-prose img{max-width:100%;height:auto;border-radius:var(--r-md)}

/* ── Tablolar ────────────────────────────────────────────────────────── */
.ds-table-wrap,.vx-compare{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ds-table,.vx-prose table{width:100%;border-collapse:separate;border-spacing:0;
  font-size:var(--fs-md);text-align:left}
.ds-table th,.vx-prose th{padding:12px 14px;background:var(--bg-muted);
  font-weight:var(--fw-medium);color:var(--fg);white-space:nowrap;
  border-bottom:1px solid var(--border)}
.ds-table td,.vx-prose td{padding:12px 14px;border-bottom:1px solid var(--border-subtle);
  color:var(--fg-muted);vertical-align:top}
.ds-table tr:last-child td{border-bottom:0}
.vx-compare table{min-width:780px}
/* İlk sütun yatay kaydırmada sabit kalıyor, yoksa satırın hangi şey olduğu kaybolur. */
.vx-compare td:first-child,.vx-compare th:first-child{position:sticky;left:0;z-index:2;
  background:var(--bg-elevated)}
.vx-compare th:first-child{z-index:3;background:var(--bg-muted)}
.vx-compare .vx-us,.vx-prose td.us,.vx-prose .us{color:var(--accent-fg);font-weight:var(--fw-semi)}
.vx-prose .yes{color:#0f7d4a;font-weight:var(--fw-medium)}
.vx-prose .no{color:var(--fg-faint)}
.vx-compare__hint{margin-top:var(--sp-3);font-size:var(--fs-sm);color:var(--fg-faint)}

/* ── Vurgu kutusu ────────────────────────────────────────────────────── */
.vx-note{padding:var(--sp-5);background:var(--accent-bg);border:1px solid var(--accent-border);
  border-radius:var(--r-lg);font-size:var(--fs-md);line-height:var(--lh-relaxed)}
.vx-note .k{display:block;font-family:var(--font-mono);font-size:var(--fs-2xs);
  text-transform:uppercase;letter-spacing:var(--ls-label);color:var(--accent-fg);
  margin-bottom:var(--sp-2)}
.vx-note p{margin:0;color:var(--fg-muted)}

/* ── Yazı sonu dönüşüm kutusu ────────────────────────────────────────── */
.vx-ctabox{padding:var(--sp-7);background:var(--ink);color:#fff;border:0;
  border-radius:var(--r-2xl);display:flex;flex-direction:column;align-items:flex-start;
  gap:var(--sp-4)}
.vx-ctabox h3{margin:0;font-size:var(--fs-2xl);font-weight:var(--fw-medium);
  letter-spacing:var(--ls-tight);color:#fff}
.vx-ctabox p{margin:0;font-size:var(--fs-md);color:rgba(255,255,255,0.68)}
.vx-ctabox a{color:#fff}

/* ── Düğmeler ────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:9px;padding:11px 24px;
  border-radius:var(--r-full);font-size:var(--fs-lg);font-weight:var(--fw-medium);
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:background 200ms ease,border-color 200ms ease,color 200ms ease}
.btn-primary{background:var(--accent);color:var(--ink)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-secondary{background:transparent;border-color:rgba(255,255,255,0.28);color:#fff}
.btn-secondary:hover{background:rgba(255,255,255,0.1)}
/* Açık zeminde duran ikincil düğme (CTA kutusunun dışında) */
.vx-prose>.ds-row .btn-secondary,.vx-narrow>.ds-row .btn-secondary{
  border-color:var(--border);color:var(--fg)}
.vx-prose>.ds-row .btn-secondary:hover,.vx-narrow>.ds-row .btn-secondary:hover{
  background:var(--bg-muted)}

/* ── Kartlar / blog listesi ──────────────────────────────────────────── */
.ds-card{background:var(--bg-subtle);border:1px solid var(--border);
  border-radius:var(--r-2xl);transition:border-color 220ms ease,transform 220ms ease,
  box-shadow 220ms ease}
.ds-card--raised{box-shadow:0 1px 2px rgba(22,23,26,0.04)}
.ds-lift:hover{transform:translateY(-3px);border-color:var(--accent-border);
  box-shadow:0 18px 40px -28px rgba(22,23,26,0.5)}
.vx-postlist{display:flex;flex-direction:column;gap:var(--sp-4)}
.vx-postcard{display:block;padding:var(--sp-6);color:inherit;text-decoration:none}
.vx-postcard h2{margin:var(--sp-3) 0 0;font-size:var(--fs-xl);font-weight:var(--fw-medium);
  letter-spacing:var(--ls-snug);color:var(--fg);line-height:1.25}
.vx-postcard p{margin:var(--sp-2) 0 0;font-size:var(--fs-md);color:var(--fg-muted);
  line-height:1.55}
.ds-slidein{transition:transform 220ms cubic-bezier(.22,.61,.36,1)}
.vx-postcard:hover .ds-slidein{transform:translateX(3px)}

/* ── Yazı altı ───────────────────────────────────────────────────────── */
.post-related{font-size:var(--fs-md);color:var(--fg-subtle)}
.post-foot{margin-top:var(--sp-9);padding-top:var(--sp-6);border-top:1px solid var(--border)}
.post-faq details{border-top:1px solid var(--border);padding:var(--sp-4) 0}
.post-faq summary{cursor:pointer;list-style:none;font-weight:var(--fw-medium);color:var(--fg)}
.post-faq summary::-webkit-details-marker{display:none}
.disclaimer{font-size:var(--fs-sm);color:var(--fg-faint)}
.dot{color:var(--fg-faint)}
.back,.updated{font-size:var(--fs-md);color:var(--fg-subtle)}

/* ── Eski animasyon sınıfları ────────────────────────────────────────────
   Bu sayfalar artık eski vulnytics.js'i yüklemiyor. O script öğeleri
   göstermekten sorumluydu; sınıflar gizleme kuralı taşımıyorsa içerik zaten
   görünür. Yine de açıkça sabitleniyor — gizli metin, olmayan metindir. */
.ds-reveal,.ds-stagger>*{opacity:1!important;transform:none!important;filter:none!important}
.ds-spot{position:relative}

/* Düğmeler prose içindeyken .vx-prose a kuralının altını çizmesini alıyordu. */
.vx-prose .btn,.vx-ctabox .btn,.vx-narrow .btn{text-decoration:none}

/* Blog listesi 88rem'e yayılınca satırlar ~140 karaktere çıkıyordu; okunur
   bir sütuna kapatılıyor (başlık bloğu zaten 68ch ile sınırlı). */
.vx-postlist{max-width:900px}