/* ==========================================================================
   bahis-liga.com — saha teması
   Ana renk gökyüzü mavisi, zemin koyu. İkincil griyi bilerek az kullandık:
   sadece hero rozeti, adım numarası, H1'in ikinci satırı ve callout kenarı.
   Beşinci bir yere koyarsak mavinin işi zorlaşıyor.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Değişkenler — yeni bir domaine taşırken sadece bu blok değişsin
   -------------------------------------------------------------------------- */
:root{
  /* ham renkler */
  --bg:      #070c14;   /* en dip zemin */
  --bg2:     #0a111d;   /* şeritlerin zemini */
  --panel:   #0f1a2b;   /* kart yüzeyi */
  --panel2:  #13233a;   /* kartın koyu ucu, gradyan için */
  --sky:     #0ea5e9;   /* ANA renk */
  --sky-dim: #0284c7;   /* butonun koyu ucu */
  --slate:   #94a3b8;   /* İKİNCİL — sayfada topu topu 4 yerde */
  --ink:     #e8eff9;   /* başlık metni */
  --muted:   #8ea3c6;   /* gövde metni, saf beyaz değil (bilerek kırık ton) */
  --line:    rgba(148,163,184,.13);

  /* anlamsal takma adlar — CTA hep --primary, vurgu hep --champ */
  --primary: var(--sky);
  --champ:   var(--slate);

  /* gölge tek formül, iki kademe */
  --sh-1: 0 20px 50px rgba(0,0,0,.35);
  --sh-2: 0 32px 80px rgba(0,0,0,.5);

  --r:   16px;   /* standart köşe */
  --r-l: 22px;   /* büyük kutular */
}

/* --------------------------------------------------------------------------
   2. Sıfırlama ve gövde
   -------------------------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box}

html{
  scroll-behavior:smooth;
  /* yapışkan header 74px; çapaya inince başlık altta kalmasın diye 118 verdik */
  scroll-padding-top:118px;
}

body{
  font-family:'Saira',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:400;
  font-size:16.5px;
  line-height:1.7;
  color:var(--muted);
  background:var(--bg);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* Arka plandaki üç leke. Konumları da opaklıkları da kasten eşit değil;
   simetrik olunca hemen "şablon" gibi duruyor. */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(820px 520px at 15% 10%, rgba(14,165,233,.14), transparent 62%),
    radial-gradient(700px 460px at 85% 20%, rgba(14,165,233,.12), transparent 58%),
    radial-gradient(900px 520px at 50% 90%, rgba(148,163,184,.10), transparent 64%),
    var(--bg);
}

/* Neredeyse görünmeyen nokta dokusu. Fark edilmiyor ama zemindeki
   "ucuz düz renk" hissini siliyor. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:radial-gradient(rgba(232,239,249,.015) 1px, transparent 1px);
  background-size:32px 32px;
}

h1,h2,h3,h4,.stat b,.bnum,.final-title{
  font-family:'Saira Condensed','Saira',sans-serif;
  font-weight:800;
  color:var(--ink);
  line-height:1.08;
  letter-spacing:.004em;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
strong{color:var(--ink);font-weight:600}

.wrap{max-width:1180px;margin:0 auto;padding:0 22px}

/* Klavyeyle gezenler için; ekranda görünmüyor, sekmeyle geliyor */
.skip{
  position:absolute;left:-9999px;top:0;
  background:var(--primary);color:#04121d;
  padding:10px 18px;border-radius:0 0 10px 0;font-weight:600;z-index:400;
}
.skip:focus{left:0}

:focus-visible{outline:2px solid var(--primary);outline-offset:3px}

/* --------------------------------------------------------------------------
   3. Butonlar — dolu, çerçeveli, küçük, tam genişlik, büyük
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:'Saira Condensed','Saira',sans-serif;
  font-weight:700;font-size:1.06rem;letter-spacing:.02em;
  padding:14px 28px;border-radius:12px;border:1px solid transparent;
  cursor:pointer;transition:transform .22s, box-shadow .22s, background .22s;
}
.btn-solid{
  background:linear-gradient(140deg,var(--sky),var(--sky-dim));
  color:#04121d;
  box-shadow:0 14px 34px rgba(14,165,233,.30);
}
/* buton -3px kalkıyor; kartlar -4px kalkıyor. Bilerek farklı. */
.btn-solid:hover{transform:translateY(-3px);box-shadow:0 20px 46px rgba(14,165,233,.42)}
.btn-ghost{
  background:rgba(255,255,255,.035);
  border-color:var(--line);
  color:var(--ink);
}
.btn-ghost:hover{background:rgba(14,165,233,.10);border-color:rgba(14,165,233,.42)}
.btn-sm{padding:10px 20px;font-size:.98rem;border-radius:10px}
.btn-lg{padding:17px 40px;font-size:1.26rem}
.btn-block{width:100%;margin-top:16px}

/* --------------------------------------------------------------------------
   4. Header — yapışkan, bulanık zeminli
   -------------------------------------------------------------------------- */
.site-head{
  position:sticky;top:0;z-index:120;
  background:rgba(7,12,20,.82);
  backdrop-filter:blur(20px) saturate(170%);
  -webkit-backdrop-filter:blur(20px) saturate(170%);
  border-bottom:1px solid var(--line);
}
.head-in{display:flex;align-items:center;gap:20px;height:74px}

/* Koyu tema olduğu için logo-dark sürümünü kullanıyoruz: "BAHİS" beyaz,
   "LİGA" mavi. Arkasına chip/kutu koymuyoruz, zeminin üstünde çıplak dursun. */
.brand{flex:0 0 auto;line-height:0}
.brand img{display:block}

.nav{display:flex;gap:26px;margin-left:auto}
.nav a{
  font-weight:600;font-size:.96rem;color:var(--muted);
  position:relative;padding:4px 0;transition:color .2s;
}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--primary);transition:right .25s;
}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{right:0}

.burger{
  display:none;background:none;border:1px solid var(--line);
  border-radius:10px;padding:9px 8px;cursor:pointer;
}
.burger span{display:block;width:20px;height:2px;background:var(--ink);margin:4px 0;border-radius:2px}

/* --------------------------------------------------------------------------
   5. Hero — grid kasten eşit değil (1.12 / .88)
   -------------------------------------------------------------------------- */
.hero{padding:62px 0 54px}
.hero-grid{
  display:grid;
  grid-template-columns:1.12fr .88fr;
  gap:52px;
  align-items:center;
}

/* İKİNCİL RENK 1/4 — hero rozeti */
.live-badge{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.8rem;font-weight:600;letter-spacing:.09em;
  color:var(--champ);
  border:1px solid rgba(148,163,184,.34);
  background:rgba(148,163,184,.07);
  border-radius:99px;padding:6px 15px;margin-bottom:20px;
}
/* Aciliyeti metinle değil bu nokta ile kuruyoruz */
.pulse{
  width:7px;height:7px;border-radius:50%;
  background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.6);
  animation:nabiz 2s infinite;
}
@keyframes nabiz{
  0%  {box-shadow:0 0 0 0 rgba(34,197,94,.55)}
  70% {box-shadow:0 0 0 9px rgba(34,197,94,0)}
  100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
}

.hero h1{
  font-size:clamp(2.5rem,6.2vw,4.15rem);
  line-height:.98;
  margin-bottom:20px;
}
/* İKİNCİL RENK 2/4 — H1'in ikinci satırı */
.hero h1 .accent{color:var(--champ)}

.hero-lead{font-size:1.1rem;max-width:585px;margin-bottom:18px}

.hero-note{
  display:flex;gap:11px;align-items:flex-start;
  font-size:.95rem;color:var(--ink);
  background:rgba(14,165,233,.08);
  border:1px solid rgba(14,165,233,.24);
  border-radius:12px;padding:13px 17px;margin-bottom:26px;max-width:585px;
}
.hero-note svg{flex:0 0 20px;color:var(--primary);margin-top:3px}

.hero-cta{display:flex;gap:14px;flex-wrap:wrap}

/* --- Hero'nun sağı: adres durum paneli --- */
.addr-panel{
  background:linear-gradient(165deg,var(--panel),var(--panel2));
  border:1px solid var(--line);
  border-radius:var(--r-l);
  padding:26px 24px 22px;
  box-shadow:var(--sh-1);
  position:relative;overflow:hidden;
}
/* Panelin üstündeki ince mavi saç teli */
.addr-panel::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--primary),transparent);
}
.ap-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.ap-title{font-family:'Saira Condensed',sans-serif;font-weight:700;font-size:1.15rem;color:var(--ink)}
.ap-live{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.78rem;font-weight:600;letter-spacing:.06em;color:#22c55e;
  border:1px solid rgba(34,197,94,.3);border-radius:99px;padding:4px 11px;
}
/* Gerçek domain yazmıyoruz; marka + durum yeter, adres yanmasın */
.ap-url{
  font-family:'Saira Condensed',sans-serif;font-size:1.5rem;font-weight:700;
  color:var(--ink);background:rgba(0,0,0,.28);
  border:1px dashed rgba(14,165,233,.3);border-radius:11px;
  padding:11px 15px;letter-spacing:.02em;
}
.ap-url b{color:var(--primary)}
.ap-rows{margin:18px 0 6px;border-top:1px solid var(--line);padding-top:14px}
.ap-row{
  display:flex;justify-content:space-between;gap:14px;
  padding:7px 0;font-size:.93rem;
}
.ap-row b{color:var(--ink);font-weight:600}
.ap-fine{font-size:.74rem;line-height:1.55;opacity:.72;margin-top:14px;text-align:center}

/* --------------------------------------------------------------------------
   6. Tam genişlik şeritler — düzen arketipi F'in omurgası
   -------------------------------------------------------------------------- */
.band{padding:52px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band-stat{background:linear-gradient(180deg,rgba(14,165,233,.07),rgba(7,12,20,0))}
.band-accent{background:var(--bg2);padding:64px 0}
.band-check{background:linear-gradient(180deg,rgba(148,163,184,.05),rgba(7,12,20,0));padding:46px 0}
.band-trust{background:var(--bg2);padding:60px 0}
.band-final{
  background:
    radial-gradient(600px 300px at 22% 0%, rgba(14,165,233,.20), transparent 60%),
    radial-gradient(520px 280px at 82% 100%, rgba(148,163,184,.13), transparent 62%),
    var(--bg2);
  padding:66px 0;
}

/* --- sayısal şerit: 4 kutu --- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stat{
  background:rgba(255,255,255,.028);
  border:1px solid var(--line);border-radius:var(--r);
  padding:20px 18px;text-align:center;
}
.stat b{display:block;font-size:2.05rem;color:var(--primary);line-height:1.05}
.stat span{font-size:.88rem;display:block;margin-top:3px}

/* --- güven şeridi: 5 rozet --- */
.trust{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:22px}
.trust-item{
  display:flex;gap:11px;align-items:center;
  background:rgba(255,255,255,.022);
  border:1px solid var(--line);border-radius:13px;padding:14px 15px;
  transition:border-color .22s, background .22s;
}
/* Bunlar kıpırdamıyor; sadece çerçevesi maviye dönüp içi hafif doluyor.
   Kartlar kalkıyor, ödeme satırları sağa kayıyor — üçü de ayrı davransın. */
.trust-item:hover{border-color:rgba(14,165,233,.35);background:rgba(14,165,233,.05)}
.trust-item svg{flex:0 0 24px;color:var(--primary)}
.trust-item b{display:block;font-family:'Saira Condensed',sans-serif;font-size:1.02rem;color:var(--ink);font-weight:700}
.trust-item span{font-size:.8rem;display:block;line-height:1.4}

/* --------------------------------------------------------------------------
   7. Bölüm başlıkları — H2'nin soluna 12x40 dikey aksan bar
   -------------------------------------------------------------------------- */
.sec{padding:62px 0}
.sec-head{max-width:760px;margin-bottom:32px}

.kicker{
  /* text-transform:uppercase YOK! Türkçe İ'yi bozuyor, elle büyük yazıyoruz */
  font-size:.76rem;font-weight:600;letter-spacing:.19em;
  color:var(--primary);margin-bottom:12px;
}

h2{
  font-size:clamp(1.68rem,3.6vw,2.35rem);
  position:relative;padding-left:22px;margin-bottom:12px;
}
h2::before{
  content:"";position:absolute;left:0;top:.16em;
  width:5px;height:40px;border-radius:3px;
  background:linear-gradient(180deg,var(--sky),rgba(14,165,233,.12));
}
.sec-head p{font-size:1.04rem;padding-left:22px}

h3{font-size:1.24rem;margin-bottom:9px}
h3.sub{
  font-size:1.42rem;margin-bottom:16px;
  padding-bottom:9px;border-bottom:1px solid var(--line);
}
h4{font-size:1.06rem;margin-bottom:6px}

.prose p{max-width:840px;margin-bottom:15px}
.prose p:last-child{margin-bottom:0}
/* Izgaradan ya da kutulardan sonra gelen düz metin dibe yapışmasın.
   Her seferinde elle margin yazmaktansa bir kere burada halledelim. */
.duo + .prose,
.steps + .prose,
.tiles + .prose,
.cas + .prose,
.seals + .prose,
.pays + .prose{margin-top:27px}
/* Para bölümünün kapanış cümlesi — kısa, emirle biter, biraz nefes alsın */
.prose p.tight{color:var(--ink);font-size:1.04rem;margin-top:20px}

/* --------------------------------------------------------------------------
   8. İkili kutular
   -------------------------------------------------------------------------- */
.duo{display:grid;grid-template-columns:1.04fr .96fr;gap:22px}
.duo-tight{grid-template-columns:.94fr 1.06fr}
.box{
  background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r);
  padding:24px 24px 22px;
  transition:transform .24s, border-color .24s, box-shadow .24s;
}
/* kart hover'ı: -4px yukarı. Sayfadaki tek "yukarı kalkan" bileşen grubu. */
.box:hover{transform:translateY(-4px);border-color:rgba(14,165,233,.34);box-shadow:var(--sh-1)}
.box p{font-size:.97rem}
.box-line{border-left:2px solid rgba(14,165,233,.4)}

/* İKİNCİL RENK 3/4 — callout kenarı */
.callout{
  margin-top:26px;
  border-left:3px solid var(--champ);
  background:rgba(148,163,184,.06);
  border-radius:0 12px 12px 0;
  padding:15px 20px;font-size:.97rem;color:var(--ink);max-width:840px;
}

.warn{
  display:flex;gap:12px;align-items:flex-start;margin-top:24px;
  background:rgba(234,88,12,.07);
  border:1px solid rgba(234,88,12,.26);
  border-radius:13px;padding:15px 18px;font-size:.96rem;
}
.warn svg{flex:0 0 22px;color:#fb923c;margin-top:3px}

/* --------------------------------------------------------------------------
   9. Adımlar — numara kartın üst kenarından taşıyor
   -------------------------------------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:adim;margin-top:34px}
.step{
  position:relative;
  background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r);
  padding:30px 22px 22px;
  transition:border-color .24s;
}
/* İKİNCİL RENK 4/4 — adım numarası. top:-16px, yani kartın dışına taşıyor. */
.step::before{
  counter-increment:adim;
  content:counter(adim);
  position:absolute;top:-16px;left:22px;
  width:36px;height:36px;border-radius:11px;
  background:var(--champ);color:#0b1220;
  display:grid;place-items:center;
  font-family:'Saira Condensed',sans-serif;font-weight:800;font-size:1.16rem;
  box-shadow:0 8px 20px rgba(0,0,0,.45);
}
.step:hover{border-color:rgba(14,165,233,.34)}
.step p{font-size:.95rem}

/* --------------------------------------------------------------------------
   10. Güncellik şeridi + saha maketi
   -------------------------------------------------------------------------- */
.check-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:44px;align-items:center}
.check-lead{padding-left:22px;max-width:620px;font-size:1.02rem}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;padding-left:22px}
.chip{
  font-size:.84rem;font-weight:600;color:var(--ink);
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);border-radius:9px;padding:7px 13px;
}

/* Saha maketi. Hiçbir işi yok, sadece güzel duruyor.
   Kaldırırsak sayfa çalışır ama bir tuhaf olur. */
.pitch-wrap{margin:0}
.pitch{
  position:relative;
  aspect-ratio:3/2;width:100%;
  background:
    repeating-linear-gradient(90deg, rgba(14,165,233,.055) 0 26px, rgba(14,165,233,.02) 26px 52px),
    var(--panel);
  border:2px solid rgba(14,165,233,.28);
  border-radius:10px;
  box-shadow:var(--sh-1);
}
.pitch-mid{position:absolute;left:50%;top:0;bottom:0;width:2px;background:rgba(14,165,233,.28)}
.pitch-circle{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:31%;aspect-ratio:1;border:2px solid rgba(14,165,233,.28);border-radius:50%;
}
.pitch-box{position:absolute;top:26%;height:48%;width:15%;border:2px solid rgba(14,165,233,.28)}
.pitch-box.left{left:0;border-left:0;border-radius:0 6px 6px 0}
.pitch-box.right{right:0;border-right:0;border-radius:6px 0 0 6px}
.pitch-dot{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--primary)}
/* Üç nokta üç bölümü temsil ediyor gibi duruyor ama etmiyor.
   Hepsi mavi: gri burada beşinci vurgu olurdu, renk bütçesi taşardı. */
.pitch-dot.d1{left:22%;top:34%}
.pitch-dot.d2{left:47%;top:62%}
.pitch-dot.d3{left:71%;top:41%}
.pitch-wrap figcaption{
  font-size:.82rem;opacity:.72;margin-top:11px;text-align:center;line-height:1.5;
}

/* --------------------------------------------------------------------------
   11. Spor kutucukları — 7 adet, ızgara kasten 4+3 kırılıyor
   -------------------------------------------------------------------------- */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tile{
  background:var(--panel);
  border:1px solid var(--line);border-radius:14px;
  padding:20px 18px;
  transition:border-color .22s, background .22s;
}
/* Kutucuk kalkmıyor; zemini maviye çalıyor ve ikon bir tık büyüyor */
.tile svg{color:var(--primary);margin-bottom:11px;transition:transform .22s}
.tile:hover{border-color:rgba(14,165,233,.4);background:rgba(14,165,233,.05)}
.tile:hover svg{transform:scale(1.12)}
.tile b{
  display:block;font-family:'Saira Condensed',sans-serif;font-weight:800;
  font-size:1.5rem;color:var(--primary);line-height:1.1;margin-top:4px;
}
.tile span{font-size:.83rem;display:block;line-height:1.45}

/* --------------------------------------------------------------------------
   12. Casino kartları — 5 adet
   -------------------------------------------------------------------------- */
.cas{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.cas-card{
  background:linear-gradient(170deg,var(--panel),rgba(19,35,58,.55));
  border:1px solid var(--line);border-radius:14px;padding:20px 18px;
  transition:transform .24s, border-color .24s;
}
.cas-card:hover{transform:translateY(-4px);border-color:rgba(14,165,233,.34)}
.cas-card p{font-size:.9rem;line-height:1.6}

/* --------------------------------------------------------------------------
   13. Güven mühürleri — 4 adet
   -------------------------------------------------------------------------- */
.seals{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.seal{
  text-align:center;padding:18px 14px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);border-radius:13px;
}
.seal b{
  display:block;font-family:'Saira Condensed',sans-serif;font-weight:700;
  font-size:1.14rem;color:var(--ink);
}
.seal span{font-size:.85rem;display:block;line-height:1.45;margin-top:2px}

/* --------------------------------------------------------------------------
   14. Bonus kartları — ortadaki öne çıkıyor
   -------------------------------------------------------------------------- */
.bonus{display:grid;grid-template-columns:1fr 1.14fr 1fr;gap:20px;align-items:start}
.bcard{
  background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r-l);
  padding:26px 22px;text-align:center;
  transition:transform .24s, border-color .24s;
}
.bcard:hover{transform:translateY(-4px)}
.bcard.feat{
  position:relative;
  border-color:rgba(14,165,233,.5);
  background:linear-gradient(170deg,rgba(14,165,233,.11),var(--panel2));
  box-shadow:var(--sh-2);
  padding-top:34px;
}
.feat-tag{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  white-space:nowrap;
  font-size:.71rem;font-weight:600;letter-spacing:.14em;
  background:var(--primary);color:#04121d;
  border-radius:99px;padding:5px 15px;
}
.bnum{font-size:3.1rem;line-height:1;color:var(--primary);margin:6px 0 2px}
.bcard.feat .bnum{font-size:3.5rem}
.bsub{font-size:.98rem;color:var(--ink)}
.bterm{
  font-size:.84rem;margin-top:12px;padding-top:11px;
  border-top:1px solid var(--line);
}

.age-line{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:22px;font-size:.9rem;
}
/* 18+ rozeti paletin dışında bir renkte dursun, göz takılsın */
.b18{
  display:inline-grid;place-items:center;
  width:40px;height:40px;border-radius:50%;
  border:2px solid #fb923c;color:#fb923c;
  font-family:'Saira Condensed',sans-serif;font-weight:800;font-size:.94rem;
  flex:0 0 40px;
}

/* --------------------------------------------------------------------------
   15. Ödeme satırları — 6 adet, hover'da sağa kayıyor
   -------------------------------------------------------------------------- */
.pays{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pay{
  background:rgba(255,255,255,.028);
  border:1px solid var(--line);border-radius:13px;
  padding:16px 18px;
  transition:transform .22s, border-color .22s;
}
/* Kartlar yukarı kalkıyordu, bunlar sağa kayıyor. Kasten farklı. */
.pay:hover{transform:translateX(4px);border-color:rgba(14,165,233,.34)}
.pay b{
  display:block;font-family:'Saira Condensed',sans-serif;font-weight:700;
  font-size:1.1rem;color:var(--ink);
}
.pay span{font-size:.86rem;display:block;line-height:1.5}

/* --------------------------------------------------------------------------
   16. Mobil bölümü + telefon maketi
   -------------------------------------------------------------------------- */
.mob-grid{display:grid;grid-template-columns:1.28fr .72fr;gap:46px;align-items:center}
.mob-lead{padding-left:22px;max-width:640px;margin-bottom:22px}
/* İki kutu ama tam yarı yarıya değil; soldaki bir tık geniş dursun */
.mob-feats{display:grid;grid-template-columns:1.06fr .94fr;gap:18px;padding-left:22px}
.mf{
  background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:18px 18px 16px;
}
.mf h3{font-size:1.08rem}
.mf p{font-size:.92rem;line-height:1.6}

.phone{
  width:min(232px,100%);margin:0 auto;
  aspect-ratio:9/18;
  background:linear-gradient(170deg,var(--panel2),var(--panel));
  border:2px solid rgba(148,163,184,.22);
  border-radius:30px;padding:16px 14px;
  box-shadow:var(--sh-2);
  position:relative;
}
.phone-bar{
  width:54px;height:5px;border-radius:99px;
  background:rgba(148,163,184,.35);margin:0 auto 16px;
}
.phone-screen{display:flex;flex-direction:column;gap:9px}
.ps-row{height:11px;border-radius:5px;background:rgba(148,163,184,.16);display:block}
.ps-row.w70{width:70%}
.ps-row.w45{width:45%}
.ps-row.w60{width:60%}
.ps-row.w80{width:80%}
.ps-card{
  height:74px;border-radius:11px;display:block;margin:5px 0;
  background:linear-gradient(140deg,rgba(14,165,233,.4),rgba(14,165,233,.12));
}

/* --------------------------------------------------------------------------
   17. SSS akordiyonu — ikincisi açık doğuyor (ilki değil, bilerek)
   -------------------------------------------------------------------------- */
.faq details{
  background:var(--panel);
  border:1px solid var(--line);border-radius:14px;
  margin-bottom:12px;overflow:hidden;
  transition:border-color .22s;
}
.faq details[open]{border-color:rgba(14,165,233,.34)}
.faq summary{
  cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding:18px 22px;
  font-family:'Saira Condensed',sans-serif;font-weight:700;font-size:1.14rem;
  color:var(--ink);
  transition:background .2s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:rgba(14,165,233,.05)}
/* Artı işareti açılınca 45 derece dönüp çarpı oluyor */
.faq summary::after{
  content:"+";
  font-family:'Saira Condensed',sans-serif;font-size:1.7rem;line-height:1;
  color:var(--primary);transition:transform .25s;flex:0 0 auto;
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 22px 19px;font-size:.97rem;max-width:900px}

/* --------------------------------------------------------------------------
   18. Kapanış CTA
   -------------------------------------------------------------------------- */
.final{text-align:center;max-width:760px;margin:0 auto}
.final .kicker{margin-bottom:10px}
.final-title{font-size:clamp(2.1rem,5.4vw,3.3rem);line-height:1;margin-bottom:14px}
.final-sub{font-size:1.06rem;margin-bottom:26px}

/* --------------------------------------------------------------------------
   19. Footer — kolon oranları eşit değil (1.6 / 1 / 1 / 1)
   -------------------------------------------------------------------------- */
.site-foot{border-top:1px solid var(--line);padding:52px 0 30px;background:rgba(0,0,0,.22)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px}
.fdesc{font-size:.9rem;margin-top:14px;max-width:320px;line-height:1.65}
.fcol h4{font-size:1.06rem;margin-bottom:14px}
.fcol a{
  display:block;font-size:.91rem;margin-bottom:8px;
  color:var(--muted);transition:color .2s, transform .2s;
}
.fcol a:hover{color:var(--primary);transform:translateX(3px)}

.legal{
  border-top:1px solid var(--line);
  margin-top:34px;padding-top:24px;text-align:center;
}
.legal .b18{margin:0 auto 12px}
.legal p{font-size:.85rem;max-width:720px;margin:0 auto;line-height:1.65}
.legal .lic{margin-top:11px;opacity:.72;font-size:.8rem}
.legal .cp{margin-top:14px;opacity:.6;font-size:.8rem}

/* --------------------------------------------------------------------------
   20. Tablet — 1024px altı
   -------------------------------------------------------------------------- */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:38px}
  .check-grid{grid-template-columns:1fr;gap:32px}
  .mob-grid{grid-template-columns:1fr;gap:34px}
  .pitch-wrap{max-width:440px;margin:0 auto}
  .phone{width:min(210px,100%)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .trust{grid-template-columns:repeat(3,1fr)}
  .tiles{grid-template-columns:repeat(3,1fr)}
  .cas{grid-template-columns:repeat(3,1fr)}
  .seals{grid-template-columns:repeat(2,1fr)}
  .pays{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1.4fr 1fr 1fr}
}

/* --------------------------------------------------------------------------
   21. Mobil — 768px altı. Menü drawer'a düşüyor.
   -------------------------------------------------------------------------- */
@media (max-width:768px){
  body{font-size:16px}
  .head-in{gap:12px;height:68px}
  .burger{display:block;order:3}
  .nav{
    display:none;
    position:absolute;top:68px;left:0;right:0;
    flex-direction:column;gap:14px;
    background:var(--bg2);
    border-bottom:1px solid var(--line);
    padding:18px 22px 22px;
  }
  .nav.open{display:flex}
  .head-in .btn-sm{margin-left:auto}

  .hero{padding:44px 0 40px}
  .steps{grid-template-columns:1fr;gap:30px}
  .duo,.duo-tight{grid-template-columns:1fr;gap:16px}
  .mob-feats{grid-template-columns:1fr}
  .bonus{grid-template-columns:1fr;gap:26px}
  .bcard.feat{order:-1}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .cas{grid-template-columns:repeat(2,1fr)}
  .trust{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr;gap:26px}
  .fcol:first-child{grid-column:1 / -1}
  .sec{padding:48px 0}
  .band{padding:44px 0}
  .band-accent,.band-trust,.band-final{padding:48px 0}
}

/* --------------------------------------------------------------------------
   22. Küçük telefon — 390px'te yatay kaydırma olmayacak
   -------------------------------------------------------------------------- */
@media (max-width:430px){
  .wrap{padding:0 16px}
  h2{padding-left:16px;font-size:1.58rem}
  h2::before{width:4px;height:34px}
  .sec-head p,.check-lead,.mob-lead,.chips,.mob-feats{padding-left:16px}
  .hero h1{font-size:2.3rem}
  .stats{grid-template-columns:1fr;gap:12px}
  .tiles,.cas,.pays,.trust,.seals{grid-template-columns:1fr}
  .btn{width:100%;padding:14px 18px}
  .head-in .btn-sm{width:auto;padding:9px 15px;font-size:.9rem}
  .hero-cta{gap:11px}
  .ap-url{font-size:1.25rem}
  .brand img{width:126px;height:42px}
  .faq summary{padding:15px 16px;font-size:1.05rem}
  .faq details p{padding:0 16px 16px}
  .final-title{font-size:2.05rem}
  .foot-grid{grid-template-columns:1fr}
}

/* --------------------------------------------------------------------------
   23. Hareket azaltma tercihi — nabız atmayı bırakır
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}