/* ══ CardflowPi hukuki sayfalar — ORTAK STİL ═══════════════════════════════
   🔴 NEDEN AYRI DOSYA: `index.html` tek dosya servis ediliyor ve satır içi
      stil taşıyor; hukuki sayfalar ONA BAĞLI DEĞİL, üç sayfa arasında ortak.
      Üçe kopyalansaydı biri güncellenip ikisi bayatlardı (bu repoda ölçülmüş
      bir kaza sınıfı: "aynı gerçek iki yerde durursa ergeç ayrışır").
   🔴 Değişkenler `index.html`in `:root`undan BİREBİR alındı. Ayrışırsa iki
      yüzey aynı markayı farklı çizer. Değiştirirken ORAYA da bak.          */

:root{
  --zemin:#f1f1f1;
  --kart:#ffffff;
  --kart-kenar:#e3e3e3;
  --metin:#303030;
  --metin-ikincil:#616161;
  --murekkep-koyu:#1a1a1a;
  --cizgi:#e3e3e3;
  --sari:#ffcb00;
  --font:"Avenir Next","Avenir",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
    "Helvetica Neue",Arial,sans-serif;
  /* 🔴 Boşluk adımları `index.html` ile aynı SEMANTİK: sayı değil İLİŞKİ
     seçiliyor. Hepsi 4'ün katı (sitenin boşluk standardı).                 */
  --r-yakin:   8px;
  --r-etiket: 12px;
  --r-baslik: 16px;
  --r-blok:   32px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;max-width:100%;overflow-x:hidden}
body{
  background:var(--zemin);color:var(--metin);font-family:var(--font);
  line-height:1.6;  /* 🔴 1.45 DEĞİL: orası kart ritmi, burası okunan metin. */
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}

/* ── kabuk ── */
.sayfa{max-width:720px;margin:0 auto;padding:0 20px 96px}

/* ── üst çubuk: markaya dönüş yolu ── */
.ust{
  border-bottom:1px solid var(--cizgi);margin-bottom:var(--r-blok);
  padding:20px 0;display:flex;align-items:center;justify-content:space-between;
  gap:var(--r-baslik);flex-wrap:wrap;
}
.marka{
  display:inline-flex;align-items:center;text-decoration:none;color:var(--metin);
  font-weight:700;font-size:17px;
}
/* 🔴 İşaret `/marka.svg`den geliyor, `index.html` ile AYNI dosya. Eskiden üç
   div'le CSS'te çiziliyordu ve iki yerde ayrı ayrı tanımlıydı; marka CFP
   yazısı taşıyınca metin div'lerle kurgulanamadı ve tek SVG'ye taşındı.
   Yan fayda: iki yüzeyin ayrışması artık YAPISAL OLARAK imkânsız.       */
.isaret{width:32px;height:32px;flex:none;display:inline-block;margin-right:var(--r-yakin)}
.ustBag{font-size:14px;color:var(--metin-ikincil);text-decoration:none}
.ustBag:hover{color:var(--metin)}

/* ── başlıklar ── */
h1{font-size:clamp(28px,5vw,38px);line-height:1.15;margin:0 0 var(--r-baslik)}
h2{font-size:21px;line-height:1.3;margin:var(--r-blok) 0 var(--r-baslik);padding-top:var(--r-yakin)}
h3{font-size:16.5px;margin:24px 0 var(--r-yakin)}
p,li{font-size:16px}
p{margin:0 0 var(--r-baslik)}
ul,ol{margin:0 0 var(--r-blok);padding-left:22px}
li{margin-bottom:var(--r-yakin)}
a{color:var(--metin);text-decoration:underline;text-underline-offset:2px}

/* ── tarih künyesi ── */
.kunye{
  font-size:14px;color:var(--metin-ikincil);margin:0 0 var(--r-blok);
  padding-bottom:var(--r-baslik);border-bottom:1px solid var(--cizgi);
}

/* ── vurgulu kutu: okuyanın atlamaması gereken tek cümle ── */
.kutu{
  background:var(--kart);border:1px solid var(--kart-kenar);
  border-left:4px solid var(--sari);border-radius:10px;
  padding:20px;margin:0 0 var(--r-blok);
}
.kutu :last-child{margin-bottom:0}

/* ── tablo ── */
table{width:100%;border-collapse:collapse;margin:0 0 var(--r-blok);font-size:15px}
th,td{text-align:left;padding:12px;border-bottom:1px solid var(--cizgi);vertical-align:top}
th{font-weight:700;background:var(--kart)}
.tabloKap{overflow-x:auto;margin-bottom:var(--r-blok)}
.tabloKap table{margin-bottom:0;min-width:440px}

/* ── dip ── */
.dip{
  border-top:1px solid var(--cizgi);margin-top:var(--r-blok);padding-top:20px;
  font-size:14px;color:var(--metin-ikincil);
}
.dip a{color:var(--metin-ikincil)}

/* 🔴 Erişilebilirlik: odak halkası koyu, sarı DEĞİL. Sarı zemin üstünde
   sarı halka 1.35:1 kontrastla görünmez oluyordu (vitrinde ölçülmüş kusur). */
a:focus-visible,summary:focus-visible{
  outline:2px solid var(--murekkep-koyu);outline-offset:2px;border-radius:2px;
}