/* grafit · Lora / Source Sans 3 · hesaplayici */
:root{
  --zemin:#fbfbfc; --yuzey:#efedf2; --cizgi:#d5cede; --metin:#231c2c;
  --sonuk:#554b63; --vurgu:#187cba; --vurgu-yazi:#1671aa; --cta-yazi:#ffffff;
  --bas:"Lora",Georgia,serif;
  --gvd:"Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --yar-kart:8px; --yar-buton:6px; --yar-gorsel:8px;
  --baslik-olcek:2.4; --bosluk-olcek:1.0;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--zemin);color:var(--metin);
  font:400 17px/1.65 var(--gvd);text-rendering:optimizeLegibility}
a{color:var(--vurgu-yazi);text-underline-offset:.18em}
h1,h2,h3{font-family:var(--bas);line-height:1.2;text-wrap:balance;margin:0 0 .5em}
h1{font-size:2.1rem}h2{font-size:1.45rem}h3{font-size:1.15rem}
p{margin:0 0 1.05em;max-width:68ch}
img{max-width:100%;height:auto}
main{padding:0 1.25rem 5rem}
.ust{border-bottom:1px solid var(--cizgi);padding:1.1rem 1.25rem;display:flex;
  gap:1.25rem;align-items:baseline;flex-wrap:wrap}
.ust .marka{color:var(--metin);text-decoration:none;font-family:var(--bas);
  font-weight:600;font-size:1.05rem}
.ust nav{display:flex;gap:.9rem;flex-wrap:wrap;font-size:.9rem}
.ust nav a{color:var(--sonuk);text-decoration:none}
.ust nav a:hover{color:var(--vurgu-yazi)}
.alt{border-top:1px solid var(--cizgi);padding:2rem 1.25rem;color:var(--sonuk);
  font-size:.85rem}
.etiket{display:inline-block;font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:color-mix(in srgb,var(--vurgu-yazi) 55%,var(--metin));font-weight:600}
.sonuk{color:var(--sonuk)}
.kaydir{overflow-x:auto}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--vurgu);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.madde{max-width:40rem;margin:0 auto}
.madde p:first-of-type{font-size:1.08rem}

/* arketip duzeni: arac-once */
.sar{max-width:48rem;margin:0 auto}
.arac{background:var(--yuzey);border:1px solid var(--cizgi);padding:1.5rem;
  margin:1.5rem 0 2.5rem}
.arac label{display:block;font-size:.85rem;color:var(--sonuk);margin:.8rem 0 .25rem}
.arac input,.arac select{width:100%;padding:.55rem .7rem;background:var(--zemin);
  color:var(--metin);border:1px solid var(--cizgi);font:inherit;font-size:.95rem}
.arac .sonuc{margin-top:1.2rem;padding-top:1.1rem;border-top:1px solid var(--cizgi);
  font-family:var(--bas);font-size:1.35rem}
.arac .sonuc b{color:var(--vurgu-yazi);font-variant-numeric:tabular-nums}
.baglantilar{list-style:none;padding:0}
.baglantilar li{padding:.55rem 0;border-bottom:1px solid var(--cizgi)}
.baglantilar a{text-decoration:none;color:var(--metin)}

/* --- TICARI BILESENLER --- ortak katman, her sitede ayni yapi, tema
   degiskenleriyle boyaniyor; renk sitenin paletinden gelir. */
.modul{margin:3rem 0}
.modul-baslik{font-family:var(--bas);font-size:1.5rem;margin:0 0 .35em}
.modul-aciklama{color:var(--sonuk);font-size:.92rem;margin:0 0 1.2rem}

.cta{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  background:var(--vurgu);color:var(--cta-yazi,var(--zemin));text-decoration:none;font-weight:700;
  font-size:.92rem;padding:.6rem 1rem;border-radius:.35rem;white-space:nowrap;
  /* 44px: dokunma hedefi alt siniri. Olculdu 05.09.2026 - butonlar 43px
     yuksekligindeydi ve mobil denetimde 300 kusur satiri uretti. */
  min-height:44px;box-sizing:border-box;
  transition:filter .12s,transform .12s}
.cta:hover{filter:brightness(1.12);transform:translateY(-1px)}
.cta-ok{font-size:1.05em;line-height:1}
.cta-kucuk{padding:.35rem .7rem;font-size:.84rem}
.cta-buyuk{padding:.8rem 1.4rem;font-size:1rem}

.firma-listesi{display:grid;gap:.75rem;min-width:0}
.firma-kart{display:grid;grid-template-columns:auto 9rem 1fr auto;gap:1rem;
  align-items:center;border:1px solid var(--cizgi);background:var(--yuzey);
  padding:.9rem 1.1rem;border-radius:.5rem}
.firma-kart .sira{font-family:var(--bas);font-size:1.1rem;color:var(--vurgu-yazi);
  font-variant-numeric:tabular-nums;min-width:1.4rem;text-align:center}
/* LOGO PLAKASI - olculdu 05.09.2026: 24 logonun 20'si KOYU
   (parlaklik 0,20-0,41) ve 30 sitenin 15'i koyu temali. O logolar koyu
   kart zemininde neredeyse kayboluyordu. Acik plaka her iki temada da
   kasitli duruyor ve logoyu okunur kiliyor - gercek affiliate sitelerinin
   yaptigi da bu. Ince cerceve, acik temada plakanin havada durmamasi icin. */
.firma-logo-kutu{display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:.35rem;
  padding:.35rem .5rem;min-height:52px}
.firma-logo{max-width:100%;height:auto;object-fit:contain;
  mix-blend-mode:normal}
.firma-ad{font-size:1rem;margin:0 0 .15rem}
.firma-bonus{font-size:.9rem;color:var(--sonuk);margin:0}
.firma-bonus strong{color:var(--metin)}
@media(max-width:640px){
  .firma-kart{grid-template-columns:auto 1fr;grid-template-areas:
    "sira logo" "govde govde" "cta cta";gap:.6rem}
  .firma-kart .sira{grid-area:sira}
  .firma-logo-kutu{grid-area:logo;justify-content:flex-start}
  .firma-govde{grid-area:govde}
  .firma-kart .cta{grid-area:cta;justify-content:center}
}

.bonus-listesi{list-style:none;padding:0;margin:0;display:grid;gap:.4rem}
.bonus-satir{display:flex;align-items:center;gap:.8rem;padding:.6rem .2rem;
  border-bottom:1px solid var(--cizgi)}
.bonus-firma{font-weight:600;min-width:8rem}
.bonus-metin{flex:1;color:var(--sonuk);font-size:.9rem}
@media(max-width:560px){.bonus-satir{flex-wrap:wrap}.bonus-metin{width:100%}}

.one-cikan{display:grid;grid-template-columns:11rem 1fr auto;gap:1.5rem;
  align-items:center;border:1px solid var(--vurgu-sonuk);background:var(--yuzey);
  padding:1.4rem;border-radius:.6rem;margin:2rem 0}
.one-cikan-logo{display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:.4rem;
  padding:.5rem .7rem;min-height:62px}
.one-cikan-ad{font-size:1.35rem;margin:.2rem 0 .3rem}
.one-cikan-bonus{font-size:1.05rem;margin:0 0 .4rem}
.one-cikan-not{font-size:.82rem;color:color-mix(in srgb,var(--sonuk) 80%,var(--metin));margin:0;max-width:44ch}
@media(max-width:760px){.one-cikan{grid-template-columns:1fr;text-align:left}}

.makale-cta{display:flex;align-items:center;gap:1rem;border:1px solid var(--cizgi);
  background:var(--yuzey);padding:.9rem 1.1rem;border-radius:.5rem;margin:2rem 0}
.makale-cta>div{display:flex;align-items:center;gap:.8rem;flex:1;flex-wrap:wrap}
.makale-cta span{color:var(--sonuk);font-size:.9rem}
@media(max-width:560px){.makale-cta{flex-wrap:wrap}}

.ilgili{margin:3rem 0 0;border-top:1px solid var(--cizgi);padding-top:1.4rem}
.ilgili h2{font-size:1.1rem;margin:0 0 .6rem}
.ilgili ul{list-style:none;padding:0;margin:0;display:grid;gap:.4rem}
.ilgili a{text-decoration:none;color:var(--metin)}
.ilgili a:hover{color:var(--vurgu-yazi)}

.sorumlu{border-top:1px solid var(--cizgi);margin-top:2.5rem;padding-top:1rem;
  color:var(--sonuk);font-size:.82rem;line-height:1.5}
.sorumlu strong{color:var(--vurgu-yazi);margin-right:.35rem}

/* --- 404 --- */
.yok-sayfa{max-width:38rem;margin:3.5rem auto}
.yok-sayfa h1{font-size:1.7rem;margin:.4rem 0 .6rem}
.yok-oneri{color:var(--sonuk);font-size:.95rem}
.yok-eylem{margin:1.6rem 0}

/* --- ZENGIN GOVDE KUTULARI --- */
.kutu{border-left:3px solid var(--vurgu);background:var(--yuzey);
  padding:.9rem 1.1rem;margin:1.7rem 0;border-radius:0 .4rem .4rem 0}
.kutu-baslik{display:block;font-size:.71rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--vurgu-yazi);font-weight:700;margin-bottom:.35rem}
.kutu p{margin:0}
.kutu-dikkat{border-left-color:#E0603C}
.kutu-dikkat .kutu-baslik{color:#F07A5A}
.kutu-ornek{border-left-color:#2E9AA8}
.kutu-ornek .kutu-baslik{color:#2E9AA8}

/* --- OLCUT TABLOSU --- */
/* Grid kolonu icindeki tablo: kapsayici min-width:0 almazsa kolon
   tablonun min-width'ine kadar genisliyor ve SAYFA tasiyor - sozluk
   arketipinde 375px'te scrollWidth 596 oldu (olculdu 05.09.2026). */
.kaydir{min-width:0;max-width:100%;overflow-x:auto}
/* Tasan ogeyi saran HER kapsayici kuculebilmeli. Grid/flex ogesinin
   varsayilan min-width:auto degeri kolonu icerigin en kucuk genisligine
   kadar sisiriyor; .kaydir'a min-width:0 vermek TEK BASINA yetmedi
   (iki kez olculdu: 375px'te scroll=596, 30 sitenin 10'unda). */
.sar,.sar>*,.modul,.modul>*,.madde,main{min-width:0}
.modul-olcut{overflow:hidden}
.olcut-tablo{min-width:36rem;font-size:.9rem}
.olcut-tablo th,.olcut-tablo td{border:1px solid var(--cizgi);padding:.6rem .75rem;
  text-align:left;vertical-align:top}
.olcut-tablo thead th{background:var(--yuzey);font-family:var(--bas)}
.olcut-tablo tbody th{font-weight:600;white-space:nowrap}
.olcut-tablo .neden{color:var(--sonuk)}

.giris{font-size:1.05rem;max-width:60ch}
.kirinti{font-size:.82rem;color:var(--sonuk);margin-bottom:.8rem}
.kirinti a{color:var(--sonuk);text-decoration:none}
.kirinti a:hover{color:var(--vurgu-yazi)}
.modul-icerik{margin-top:3rem}

/* ===== FB yama 05.09.2026 — olculmus iki kusur ===== */

/* 1) COK KOLONLU ARKETIPLERDE TICARI MODULLER
   Sozluk gibi arketiplerde main.sar iki kolonlu bir izgara (olculdu
   site-18: 240px + 672px). Ticari moduller izgaranin dogrudan cocugu
   oldugu icin 240px'lik dar kolona dusuyor; one-cikan kartinin kendi
   izgarasi ise icerikten 449px istiyor - tasip ikinci kolonun yazisinin
   ustune biniyordu.
   min-width:0 sart: izgara ogesinin varsayilan min-width:auto degeri
   kucultmeyi engelliyor (ayni tuzaga 375px tasmasinda da dusmustuk). */
main.sar>.modul,main.sar>.one-cikan,main.sar>.bonus-seridi,
main.sar>.olcut-tablosu,main.sar>.sss{grid-column:1/-1}
.one-cikan,.one-cikan>*{min-width:0}
.one-cikan-govde{min-width:12rem}

/* 2) VITEPRESS CAKISMASI
   VitePress varsayilan temasi `.vp-doc a` ile tum baglanti renklerini
   eziyor (ozgulluk 0,2,0). Bizim `.cta` 0,1,0 oldugu icin kaybediyor ve
   dugme yazisi --vp-c-brand-1 rengine donuyor; tema o degiskeni
   var(--vurgu)'ya bagladigi icin YAZI RENGI ARKA PLANLA AYNI oluyor,
   dugme ici bos blok gibi goruluyordu (olculdu site-26/27/28).
   Ozgulluk asiliyor (0,2,1), !important kullanilmiyor. */
.vp-doc a.cta,.vp-doc a.cta:hover{color:var(--cta-yazi);text-decoration:none;font-weight:700}
.vp-doc a.cta-ikincil,.vp-doc a.cta-ikincil:hover{color:var(--vurgu-yazi)}
.vp-doc .firma-satir a,.vp-doc .firma-kart a{text-decoration:none}

/* ===== FB yama-2 05.09.2026 — logo keskinligi ===== */
/* Kaynak logolar ag genelinde 200x100 (canli motor dahil; olculdu).
   Kutu 140 CSS px'ti: DPR 3 telefonda 420 aygit pikseli isteniyor,
   kaynak 200 - 2.1 kat buyutme. Tirtikli ve yumusak gorunmesinin
   sebebi buydu (HOVARDA ampulleri, BETROAD kenarlari).

   Cozum kaynak degistirmek olurdu ama agda daha buyuk surum YOK.
   Bunun yerine gosterim boyutu kaynaga oturtuluyor: 120 px'te DPR 2'de
   1.2 kat, DPR 3'te 1.8 kat - ikisi de oncekinden belirgin iyi.
   Levha ayni kaliyor, logo icinde daha ferah duruyor. */
.firma-logo{max-width:120px;max-height:52px;width:auto;height:auto}
.firma-logo-kutu{padding:.45rem .7rem}
.one-cikan-logo .firma-logo{max-width:150px;max-height:64px}

/* ===== FB yama-3 05.09.2026 — logo levhasi ===== */
/* KUSUR (kullanici): "logolarin etrafinda cok buyuk beyaz kutucuklar".
   Olculdu site-06'da: levha 144x68, logo 104x52 -> alanin %45'i bos
   beyaz. Sebep min-height:52px + genis dolgu + izgara sutununun
   levhayi gerdirmesi.
   Levha artik logoyu SARIYOR: sabit yukseklik yok, dolgu inceldi,
   genislik icerige gore. Beyaz zemin duruyor - koyu temalarda koyu
   logolarin okunmasi icin gerekliydi, o karar degismiyor. */
.firma-logo-kutu{padding:.2rem .3rem;min-height:0;width:-moz-fit-content;
  width:fit-content;justify-self:start;align-self:center}
.firma-logo{max-width:110px;max-height:44px}
.one-cikan-logo .firma-logo{max-width:140px;max-height:56px}

/* ===== FB yama-4 05.09.2026 — logo levhasi, ikinci tur ===== */
/* KUSUR (kullanici, ikinci bildirim): "logolarin etrafi hala beyaz
   kutucuk var, logo resmi ufak gorunuyor".

   Ilk turda levhayi kucultmustum ama oran degismedi: logo levhanin
   icinde kucuk kaliyor ve levha ayri bir kutu gibi okunuyor.

   NEDEN LEVHA TAMAMEN KALDIRILMIYOR: koyu temalarda koyu logolar
   okunmuyordu, levha bunun icin konmustu. Acik temada da bazi
   markalarin logosu BEYAZ YAZILI - levhayi kaldirmak onlari acik
   kartin uzerinde gorunmez yapardi. Yani levha gerekli.

   Cozum oran: levha logoya yapisiyor (dolgu 2px) ve logo buyuyor
   (110 -> 138 px). Levha artik logonun kendi zemini gibi okunuyor,
   ayri bir kutu gibi degil. */
.firma-logo-kutu{padding:2px 3px;border-radius:.25rem;min-height:0;
  width:-moz-fit-content;width:fit-content;justify-self:start;align-self:center}
.firma-logo{max-width:138px;max-height:58px}
.one-cikan-logo .firma-logo{max-width:176px;max-height:74px}

/* ===== FB yama-5 05.09.2026 — govde ici ara ticari birimler ===== */
/* KUSUR (kullanici): "cta sayisi hala az, birer, ikiser, ucer firma
   tanitimi veya bonus listeleme olmali". Onceki durumda ilk paragraftan
   sonra tek kart, en altta alti firmalik liste vardi; aradaki 10-12
   paragraf bostu.
   Uc bicim donusumlu giriyor. Hepsi YAZI GENISLIGINDE kaliyor ve
   kendi zeminini kullaniyor - okuma akisini kesmeden ayirt ediliyor. */
.fb-ara-cta{margin:1.6rem 0;padding:.7rem .85rem;border-radius:.5rem;
  background:var(--yuzey);border:1px solid var(--cizgi)}

.fb-ara-cta-tekli{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap}
.fb-ara-cta-tekli>div{flex:1 1 8rem;min-width:0;display:flex;flex-direction:column}
.fb-ara-cta-tekli strong{font-size:1rem}
.fb-ara-cta-tekli span{color:var(--sonuk);font-size:.88rem}

.fb-ara-cta-ikili{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.75rem}
.fb-ara-cta-oge{display:flex;flex-direction:column;gap:.3rem;align-items:flex-start;min-width:0}
.fb-ara-cta-oge span{color:var(--sonuk);font-size:.85rem}

.fb-ara-cta-serit{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.fb-ara-cta-etiket{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--sonuk);width:100%}
.fb-ara-cta-serit-oge{flex:1 1 8rem;min-width:0;display:flex;flex-direction:column;
  gap:.1rem;padding:.45rem .6rem;border-radius:.35rem;background:var(--zemin);
  border:1px solid var(--cizgi);text-decoration:none;color:inherit}
.fb-ara-cta-serit-oge:hover{border-color:var(--vurgu-yazi)}
.fb-ara-cta-serit-oge span{color:var(--sonuk);font-size:.82rem}

/* VitePress varsayilan temasi baglanti renklerini eziyor (ozgulluk
   0,2,0); ara birimlerdeki baglantilarin da ustune yaziliyor. */
.vp-doc .fb-ara-cta a{text-decoration:none}
.vp-doc a.fb-ara-cta-serit-oge{color:inherit}

/* FB uyari-ust 06.09.2026 — üst 18+ şerit */
.uyari-ust{margin:0;padding:.35rem 1.25rem;font-size:.78rem;line-height:1.4;font-weight:500;text-align:center;color:var(--sonuk,#5b6472);background:var(--yuzey,#eef1f4);border-bottom:1px solid var(--cizgi,#d5dae2);letter-spacing:.01em}

/* ===== FB D3 06.09.2026 - mobil logo levhasi (agresif) ===== */
/* Olculdu: 390px / 34 sayfa - logo levhanin %20-29u. Onceki yama
   yetmedi: one-cikan-logo min-height/padding + 1fr hucresi bosluk birakti.
   Levha logoyu sifir dolguyla sarsin; logo biraz buyusun; masaustu ayni. */
@media(max-width:480px){
  .firma-kart{grid-template-columns:auto auto}
  .firma-logo-kutu,.one-cikan-logo{
    padding:0;min-height:0;min-width:0;
    width:-moz-fit-content;width:fit-content;max-width:100%;
    justify-self:start;align-self:center;box-sizing:border-box}
  .firma-logo{max-width:160px;max-height:70px;width:auto;height:auto;display:block}
  .one-cikan-logo .firma-logo{max-width:180px;max-height:80px;width:auto;height:auto;display:block}
  .one-cikan{grid-template-columns:auto 1fr;gap:.8rem;align-items:center}
}

/* kimlik site-05 · tema=acik · kart=golgeli · 20260907075528 */
h1{font-size:calc(1rem * var(--baslik-olcek));}
.modul{margin:calc(3rem * var(--bosluk-olcek)) 0;}
.cta,.cta-kucuk,.cta-buyuk{border-radius:var(--yar-buton);}
.firma-logo-kutu, .firma-logo-kutu img, .gorsel, .kapak, img.kart-gorsel{border-radius:var(--yar-gorsel);}
.firma-kart{border-radius:var(--yar-kart);}.firma-kart{border:none;box-shadow:0 8px 24px rgba(0,0,0,.12);}