/* ==========================================================
   landing.css — casino ana sayfası
   token'lar, temalar ve bileşen stilleri
   ========================================================== */
:root{
  --ui:'Calibri','Carlito',Arial,sans-serif;
  --disp:'Calibri','Carlito',Arial,sans-serif;
  --bg:#05080d; --bar:#02040a; --head:#080b11;
  --panel:#0d1219; --panel2:#111823; --tile:#151d29; --tileh:#1c2634;
  --b1:#12181f; --b2:#212b39; --b3:#2a3547;
  --t1:#eef2f7; --t2:#c6cfdb; --t3:#8d99a9; --t4:#5f6b7b; --t5:#3d4756;
  --gold:#e6c169; --gold2:#f4d98c; --goldd:#b8912f;
  --gold-grad:linear-gradient(175deg,var(--gold2),var(--gold) 58%,#d4ad4d);
  --live:#ff4d4d; --green:#5ddb7f;
  --felt:#0e3b2b; --felt2:#155c41;
  --sh:rgba(0,0,0,.6); --sh2:rgba(0,0,0,.4);
  --onAcc:#1a1405; --accRGB:230,193,105; --onAccRGB:26,20,5;
  --backdrop:rgba(5,8,13,.82);
  --r:12px;
}

/* ---------- BEYAZ TEMA ---------- */
body.light{
  --bg:#ffffff; --bar:#f5f5f5; --head:#ffffff;
  --panel:#ffffff; --panel2:#ececec; --tile:#f0f0f0; --tileh:#e4e4e4;
  --b1:#d3dbe2; --b2:#b9c6d1; --b3:#93a8b8;
  --t1:#0a2944; --t2:#33526b; --t3:#5c7a91; --t4:#8098ac; --t5:#a9bac7;
  /* beyaz temada vurgu rengi altın değil, turuncu-kırmızı */
  --gold:#ea5022; --gold2:#f27c54; --goldd:#b93916;
  --gold-grad:linear-gradient(175deg,#f27c54,#ea5022 58%,#b93916);
  --onAcc:#fff8f6; --accRGB:234,80,34; --onAccRGB:255,248,246;
  --live:#d92c2c; --green:#0e7a40;
  --sh:rgba(10,41,68,.13); --sh2:rgba(10,41,68,.08);
  --backdrop:rgba(255,255,255,.85);
  /* ikincil vurgu: lacivert — turuncu birincil butonların (btn-gold) yanında
     ikincil butonlar (btn-ghost) dolgulu lacivert olsun, sadece metin rengi
     olarak kalınca fark edilmiyordu. gold-grad'ı direkt değiştirmiyoruz çünkü
     o birincil butonlarda hâlâ turuncu kalmalı; ayrı bir gradyan tanımlı. */
  --navy:#0a2944; --navyd:#061c2e;
  --navy-grad:linear-gradient(175deg,#33526b,#0a2944 58%,#061c2e);
}
body.light .btn-ghost{background:var(--navy);border-color:var(--navy);color:#fff}
body.light .btn-ghost:hover{background:var(--navyd);border-color:var(--navyd);color:#fff}
/* oyun kartındaki YENİ rozeti ve canlı akıştaki öne çıkan kademe rozetleri (ROYAL/GRAND/MEGA)
   turuncu yerine lacivert dolgulu — metin rengi zaten onAcc (beyaz), değişmesi gerekmiyor */
body.light .gm .new{background:var(--navy-grad)}
body.light .fd-tier{background:var(--navy-grad)}
body.light .box-h h2,body.light .sec-h h2{color:var(--t1)}
body.light .bn-tag,body.light .cs-eyebrow,body.light .jk-p,body.light .box-all:hover,
body.light .ft-links a:hover,body.light .tb-btn:hover,body.light .cs-terms:hover,
body.light .bn-slide h3 em,body.light .cs-h em,body.light .pop .px{color:var(--goldd)}
body.light .sr-back{background:rgba(255,255,255,.85)}
body.light ::-webkit-scrollbar-thumb{background:#c5c5c5}
body.light .odd:hover{border-color:var(--b3)}
/* jackpot tabelası iki temada da koyu kalır: içindeki token'ları koyu tema değerlerine sabitle */
body.light .jk{
  --t2:#c6cfdb; --t3:#8d99a9; --t4:#7f8b9c; --t5:#5f6b7b;
  --b1:#1e2836; --b2:#283346;
  /* arka video/bokeh parlaması ve prize kutuları altın yerine lacivert+beyaz */
  --accRGB:10,41,68;
  --gold-grad:linear-gradient(175deg,#33526b,#0a2944 58%,#061c2e);
}
body.light .jk-net,body.light .jk-row-n{color:#eef2f7}
/* ödül tutarları turuncu vurguyla öne çıksın */
body.light .jk-tot,body.light .jk-row-v{color:var(--gold)}
/* beyaz zeminde altın parlamalar ağır duruyor: kısılıyor */
body.light .fd-r b{color:var(--goldd)}
body.light .fd.hot{background:linear-gradient(90deg,rgba(var(--accRGB),.22),transparent 70%)}
body.light .bn-art{opacity:.4}
body.light .cs-glow{opacity:.5}
body.light .jk-p,body.light .cj-h{color:#ffffff}


*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
#liveCasino,#miniGames{scroll-margin-top:76px}
body{margin:0;background:var(--bg);color:var(--t1);font-family:var(--disp);font-size:14px;-webkit-font-smoothing:antialiased}
button,input{font-family:inherit}
button{cursor:pointer;border:none;background:none;color:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--b3);border-radius:8px}
::-webkit-scrollbar-track{background:transparent}
.num,.odd b,.t-lim,.mg-x{font-family:var(--ui);font-variant-numeric:tabular-nums}
.logo{display:block;height:28px;width:87px;background:url(../assets/logo.svg) center/contain no-repeat}
.pulse{width:6px;height:6px;border-radius:50%;background:var(--live);box-shadow:0 0 0 0 rgba(255,77,77,.55);animation:pl 1.9s infinite;flex-shrink:0}
@keyframes pl{0%{box-shadow:0 0 0 0 rgba(255,77,77,.5)}70%{box-shadow:0 0 0 7px rgba(255,77,77,0)}100%{box-shadow:0 0 0 0 rgba(255,77,77,0)}}


/* ---------- ÜST ---------- */
.topbar{display:flex;align-items:center;gap:13px;padding:7px 18px;background:var(--bar);
  border-bottom:1px solid var(--b1);font-size:9.5px;letter-spacing:.11em;color:var(--t4);font-weight:700}
.tb-item{display:flex;align-items:center;gap:6px}
.ti{width:12px;height:12px}
.tb-age{border:1px solid var(--b3);border-radius:20px;padding:2px 7px;color:var(--t3);letter-spacing:.06em;font-size:9px;font-weight:700}
.tb-sp{flex:1}
.tb-btn{display:flex;align-items:center;gap:5px;font-size:9.5px;font-weight:700;letter-spacing:.11em;color:var(--t3)}
.tb-btn svg{width:9px;height:9px}
.tb-btn:hover{color:var(--gold)}

header{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:24px;padding:0 18px;height:58px;
  background:var(--head);border-bottom:1px solid var(--b1);transition:box-shadow .2s}
header.stuck{box-shadow:0 12px 30px var(--sh2)}
.brand{flex-shrink:0}
nav{display:flex;align-items:center;gap:2px;height:100%;flex:1;min-width:0}
.nav-item{display:flex;align-items:center;height:100%;padding:0 13px;font-size:11px;font-weight:700;
  letter-spacing:.1em;color:var(--t3);border-bottom:2px solid transparent;white-space:nowrap}
.nav-item:hover{color:var(--t1)}
.nav-item.on{color:var(--gold);border-bottom-color:var(--gold)}
.hdr-right{display:flex;align-items:center;gap:9px;flex-shrink:0}
.icon-btn{width:32px;height:32px;display:grid;place-items:center;border-radius:7px;color:var(--t3)}
.icon-btn:hover{background:var(--tile);color:var(--t1)}
.burger{display:none}
.btn-ghost{padding:9px 18px;border:1px solid var(--b3);border-radius:6px;font-size:10.5px;font-weight:700;letter-spacing:.1em;color:var(--t1);white-space:nowrap}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn-ghost.sm{padding:8px 13px;font-size:9.5px}
.btn-gold{padding:10px 20px;border-radius:6px;font-size:10.5px;font-weight:800;letter-spacing:.1em;color:var(--onAcc);background:var(--gold-grad);white-space:nowrap}
.btn-gold:hover{filter:brightness(1.08)}
.btn-gold.wide{width:100%;padding:13px;font-size:11.5px;letter-spacing:.14em}
/* mobil gezinme: alt alta açılan çekmece yerine başlığın altında yatay şerit
   (her zaman görünür, taşarsa yana kaydırılır) */
.mnav{display:none;background:var(--panel);border-bottom:1px solid var(--b1)}
.mnav a{flex:0 0 auto;padding:11px 14px;font-size:10.5px;font-weight:700;letter-spacing:.1em;
  color:var(--t2);white-space:nowrap;border-bottom:2px solid transparent}
.mnav a:hover{color:var(--t1)}
.mnav a.on{color:var(--gold);border-bottom-color:var(--gold)}

/* ---------- IZGARA (wireframe) ---------- */
.home{
  display:grid;gap:13px;padding:13px;max-width:1720px;margin:0 auto;align-items:stretch;
  min-height:calc(100vh - 86px);
  grid-template-columns:230px minmax(0,1fr) 336px 322px;
  grid-template-rows:auto auto auto auto;
  grid-template-areas:
    "rail banner banner right"
    "rail bets   jackc  right"
    "rail feed   feed   feed"
    "rail live   live   live";
}
.rail{grid-area:rail;display:grid;grid-template-rows:auto minmax(0,1fr);gap:13px;min-height:0}
.banner{grid-area:banner}
.bets{grid-area:bets;min-height:0}
.jackc{grid-area:jackc;display:grid;grid-template-rows:minmax(0,1.25fr) minmax(0,1fr);gap:13px;min-height:0}
.right{grid-area:right;display:grid;grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:13px;min-height:0}
.feedrow{grid-area:feed;min-height:0}
.liverow{grid-area:live;min-height:0}
.casino{grid-area:casino}
.box{background:var(--panel);border:1px solid var(--b1);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;min-height:0}
.box-h{display:flex;align-items:center;gap:10px;padding:13px 14px 11px;flex-shrink:0}
.box-h h2{margin:0;font-size:12.5px;font-weight:800;letter-spacing:.11em;white-space:nowrap}
.box-n{display:flex;align-items:center;gap:6px;font-family:var(--ui);font-size:10px;color:var(--t4);white-space:nowrap}
.box-all{margin-left:auto;display:flex;align-items:center;gap:5px;font-size:9px;font-weight:800;letter-spacing:.13em;color:var(--t4)}
.box-all svg{width:10px;height:10px}
.box-all:hover{color:var(--gold)}

/* ---------- SOL RAY ---------- */
.rail-box{overflow-y:auto}
.pop{display:flex;align-items:center;gap:10px;width:100%;padding:9px 14px;text-align:left;border-top:1px solid var(--b1)}
.pop:hover{background:var(--panel2)}
.pop .pi{width:26px;height:34px;border-radius:5px;flex-shrink:0;display:grid;place-items:center;
  background:linear-gradient(160deg,var(--c1),var(--c2));font-size:14px;font-weight:800;color:rgba(255,255,255,.92)}
.pop .pn{flex:1;min-width:0}
.pop .pn b{display:block;font-size:11.5px;font-weight:700;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pop .pn small{display:block;margin-top:2px;font-family:var(--ui);font-size:9.5px;color:var(--t4)}
.pop .px{font-family:var(--ui);font-size:10px;font-weight:700;color:var(--gold)}
.sp{display:flex;align-items:center;gap:10px;width:100%;padding:8px 14px;text-align:left;border-top:1px solid var(--b1);cursor:pointer}
.sp:hover{background:var(--panel2)}
.sp:hover .sp-n{color:var(--gold)}
.sp svg{width:16px;height:16px;color:var(--t4);flex-shrink:0}
.sp-n{flex:1;font-size:11px;font-weight:700;letter-spacing:.05em;color:var(--t2)}
.sp-c{font-family:var(--ui);font-size:10px;color:var(--t4)}

/* ---------- BANNER ---------- */
.banner{position:relative;min-height:172px}
.bn-track{display:flex;flex:1;transition:transform .55s cubic-bezier(.4,0,.2,1)}
.bn-slide{flex:0 0 100%;position:relative;overflow:hidden;display:flex;align-items:center;
  gap:20px;padding:26px 30px}
.bn-art{position:absolute;right:-70px;top:-90px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(closest-side,var(--ba),transparent 70%);pointer-events:none}
.bn-txt{position:relative;max-width:560px}
.bn-tag{font-size:9px;font-weight:800;letter-spacing:.19em;color:var(--gold)}
.bn-slide h3{margin:8px 0 8px;font-size:30px;line-height:1.1;font-weight:800}
.bn-slide h3 em{font-style:normal;color:var(--gold)}
.bn-slide p{margin:0 0 16px;font-family:var(--ui);font-size:12.5px;line-height:1.65;color:var(--t3);max-width:430px}
.bn-cta{display:flex;align-items:center;gap:12px}
.bn-when{font-family:var(--ui);font-size:10.5px;color:var(--t4)}
.bn-dots{position:absolute;right:16px;bottom:14px;display:flex;gap:6px}
.bn-dots i{width:20px;height:3px;border-radius:2px;background:var(--b3);cursor:pointer;transition:background .2s}
.bn-dots i.on{background:var(--gold)}

/* ---------- BAHİS LİSTESİ ---------- */
#betList{flex:1;overflow-y:auto}
.bet{display:grid;grid-template-columns:52px minmax(0,1fr) repeat(3,84px);gap:8px 10px;
  align-items:center;padding:9px 14px;border-top:1px solid var(--b1)}
.bet-odds{display:contents}
.bet:hover{background:var(--panel2)}
.bet-t{font-family:var(--ui);font-size:10px;color:var(--t4);line-height:1.4}
.bet-t b{display:block;font-family:var(--disp);font-size:11px;font-weight:700;color:var(--t2);letter-spacing:.03em}
.bet-m{min-width:0}
.bet-m span{display:block;font-size:12px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bet-m small{display:block;margin-top:3px;font-family:var(--ui);font-size:9.5px;color:var(--t4)}
.odd{display:flex;align-items:center;justify-content:space-between;gap:5px;height:30px;padding:0 8px;
  border-radius:5px;background:var(--tile);border:1px solid var(--b2)}
.odd i{font-style:normal;font-size:9px;font-weight:800;color:var(--t4)}
.odd b{font-size:11.5px;font-weight:700;color:var(--t1)}
.odd:hover{background:var(--tileh);border-color:var(--b3)}
.odd.on{background:var(--gold-grad);border-color:var(--gold2)}
.odd.on i{color:rgba(var(--onAccRGB),.65)}.odd.on b{color:var(--onAcc)}

/* ---------- JACKPOT AKIŞI ---------- */
#feedList{flex:1;overflow:hidden}
.fd{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 8px;align-items:center;
  padding:8px 12px;border-top:1px solid var(--b1);animation:fdIn .45s ease}
.fd-r{grid-column:2;display:flex;align-items:baseline;gap:6px}
@keyframes fdIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.fd.hot{background:linear-gradient(90deg,rgba(var(--accRGB),.14),transparent 70%)}
.fd-tier{align-self:start;margin-top:2px;font-size:7.5px;font-weight:800;letter-spacing:.11em;color:var(--onAcc);background:var(--gold-grad);
  padding:3px 6px;border-radius:3px;white-space:nowrap}
.fd-tier.s2{background:none;color:var(--t3);border:1px solid var(--b3)}
.fd-m{min-width:0}
.fd-m b{display:block;font-size:11.5px;font-weight:700;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd-m small{display:block;margin-top:2px;font-family:var(--ui);font-size:9.5px;color:var(--t4);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd-r b{flex-shrink:0}
.fd-r b{font-family:var(--ui);font-variant-numeric:tabular-nums;font-size:12px;font-weight:700;color:var(--gold)}
.fd-r small{margin-left:auto;font-family:var(--ui);font-size:9px;color:var(--t5)}
.feed-f{display:flex;align-items:baseline;gap:8px;padding:10px 14px;border-top:1px solid var(--b2);flex-shrink:0}
.feed-f span{font-size:8px;font-weight:800;letter-spacing:.13em;color:var(--t5)}
.feed-f b{margin-left:auto;font-family:var(--ui);font-variant-numeric:tabular-nums;font-size:11px;color:var(--t3)}

/* ---------- SLIDER ---------- */
.sl{position:relative;flex:1;min-height:132px;overflow:hidden;padding:0 0 14px}
/* slider yükseklikleri: yeni yerleşim */
.bets #betList{flex:1;min-height:0;overflow-y:auto}
.sl[data-slider="jack"]{flex:1;min-height:206px}
.sl[data-slider="combo"]{flex:1;min-height:186px}
.sl[data-slider="streams"]{height:238px;flex:none}
#slotBox .sl,#liveCasino .sl{flex:1;min-height:200px}
/* mobilde sayfa 2 kolona düşüyor -> 2x2 ızgara, kartlara yer gerek */
body.mv #slotBox .sl,body.mv #liveCasino .sl{height:306px;flex:none}
@media (max-width:900px){#slotBox .sl,#liveCasino .sl{height:306px;flex:none}}
.sl-track{display:flex;height:100%;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.sl-page{flex:0 0 100%;display:grid;gap:9px;padding:0 14px;grid-template-columns:repeat(var(--pp,4),minmax(0,1fr))}
.sl-page.v{grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(0,1fr)}
.sl-nav{margin-left:auto;display:flex;gap:5px}
.sl-nav button{width:22px;height:22px;display:grid;place-items:center;border-radius:5px;background:var(--tile);color:var(--t3)}
.sl-nav button:hover{background:var(--tileh);color:var(--gold)}
.sl-nav svg{width:11px;height:11px}

.gm{position:relative;overflow:hidden;border-radius:9px;border:1px solid var(--b2);
  background:linear-gradient(160deg,var(--c1),var(--c2));display:flex;flex-direction:column;
  justify-content:flex-end;padding:10px;min-height:0;text-align:center;transition:transform .16s}
.gm:hover{transform:translateY(-3px)}
.gm .sym{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);font-size:44px;font-weight:800;
  color:rgba(255,255,255,.9);text-shadow:0 3px 14px rgba(0,0,0,.45);line-height:1}
/* oyun görseli: boyutu ne olursa olsun kartı tamamen doldurur (cover).
   kenar solması artık "arkayı açığa çıkar" (mask) yerine "kartın kendi
   rengiyle boya" (üstüne renkli overlay) yöntemiyle: görselin kendi rengi
   kartın c1/c2'sine yakınsa mask hiç görünmüyordu, bu yöntem renk farkı
   olsun olmasın her zaman çalışıyor.
   (background-image bilerek burada değil, satır içi style'da tanımlanıyor: url() göreli
   yolu tanımlandığı yere göre çözülür, bu kural css/ altında olduğu için yanlış çözülürdü) */
.gm .art{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat}
.gm .art-fade{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 65%,var(--c2) 100%)}
.gm .vig{position:absolute;inset:0;background:linear-gradient(180deg,transparent 38%,rgba(255,255,255,.88))}
.gm b{position:relative;font-size:11.5px;font-weight:700;color:#161616;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gm small{position:relative;margin-top:2px;font-family:var(--ui);font-size:9.5px;color:rgba(22,22,22,.65)}
.gm .rtp{position:absolute;top:8px;right:8px;font-size:8px;font-weight:800;color:var(--gold2);
  background:rgba(0,0,0,.5);padding:3px 5px;border-radius:4px}
.gm .badges{position:absolute;top:8px;left:8px;display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.gm .new{font-size:7.5px;font-weight:800;letter-spacing:.11em;
  color:var(--onAcc);background:var(--gold-grad);padding:3px 5px;border-radius:4px}
.gm .hot{font-size:7.5px;font-weight:800;letter-spacing:.11em;color:#fff;
  background:linear-gradient(135deg,#ff6b3d,#c8241a);padding:3px 5px;border-radius:4px}

.tb{position:relative;overflow:hidden;border-radius:9px;border:1px solid var(--b2);text-align:left;
  display:flex;flex-direction:column;justify-content:flex-end;padding:10px;min-height:0;
  background:radial-gradient(120% 90% at 50% 0,var(--felt2),var(--felt) 60%,#07231a);transition:transform .16s}
.tb:hover{transform:translateY(-3px)}
.tb .rim{position:absolute;left:10px;right:10px;top:10px;height:52%;border-radius:8px;border:1px dashed rgba(255,255,255,.16)}
.tb .chips{position:absolute;left:50%;top:26%;transform:translateX(-50%);display:flex;gap:4px}
.tb .chips i{width:13px;height:13px;border-radius:50%;background:var(--cc);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.35),0 2px 5px rgba(0,0,0,.4)}
.tb .lv{position:absolute;top:8px;left:8px;display:flex;align-items:center;gap:4px;font-size:7.5px;
  font-weight:800;letter-spacing:.12em;color:#fff;background:rgba(0,0,0,.42);padding:3px 6px;border-radius:4px}
.tb .st{position:absolute;top:8px;right:8px;font-family:var(--ui);font-size:8px;font-weight:700;
  color:#e3ebf3;background:rgba(0,0,0,.42);padding:3px 6px;border-radius:4px}
.tb b{position:relative;font-size:11.5px;font-weight:700;color:#fff}
.tb small{position:relative;margin-top:2px;font-family:var(--ui);font-size:9.5px;color:rgba(255,255,255,.62)}
.t-lim{position:relative;margin-top:5px;font-size:9.5px;color:rgba(255,255,255,.8)}

/* ---------- JACKPOT WIDGET ---------- */
.jk{position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:0;
  border-radius:11px;border:1px solid rgba(var(--accRGB),.42);background:#0a0d13;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5),0 0 22px rgba(var(--accRGB),.06)}
/* canlı bokeh zemin: video yerine CSS ile üretiliyor */
.jk-bg{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(75% 60% at 18% 8%,rgba(var(--accRGB),.22),transparent 70%),
    radial-gradient(60% 55% at 88% 26%,rgba(var(--accRGB),.14),transparent 72%),
    linear-gradient(180deg,#121017,#07080c)}
.jk-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9;
  filter:saturate(1.05) hue-rotate(var(--vhue,0deg))}
body.light .jk-vid{opacity:.82;--vhue:172deg;filter:saturate(1.25) hue-rotate(var(--vhue))}
.jk-bg i{position:absolute;border-radius:50%;
  background:radial-gradient(closest-side,rgba(var(--accRGB),.55),transparent 74%);
  animation:bk var(--d,11s) ease-in-out infinite alternate;animation-delay:var(--dl,0s)}
@keyframes bk{from{transform:translate3d(0,0,0) scale(1);opacity:.75}
  to{transform:translate3d(var(--tx,10px),var(--ty,-14px),0) scale(1.35);opacity:.35}}
.jk-scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,8,12,.58),rgba(6,8,12,.8) 55%,rgba(6,8,12,.9))}
.jk-in{position:relative;display:flex;flex-direction:column;height:100%;padding:11px}

.jk-h{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:9px;align-items:center}
.jk-logo{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.22),transparent 60%),var(--gold-grad);
  color:var(--onAcc);font-size:9px;font-weight:800;letter-spacing:-.02em;
  box-shadow:0 2px 8px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.25)}
.jk-net{display:block;font-size:8.5px;font-weight:800;letter-spacing:.14em;color:var(--gold)}
.jk-p{display:block;margin-top:2px;font-size:14px;font-weight:800;letter-spacing:.04em;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jk-tot{display:block;margin-top:2px;font-family:var(--ui);font-variant-numeric:tabular-nums;
  font-size:13.5px;font-weight:800;color:#fff}
.jk-go{width:20px;height:20px;display:grid;place-items:center;color:rgba(255,255,255,.55);flex-shrink:0}
.jk-go svg{width:13px;height:13px}
.jk:hover .jk-go{color:var(--gold)}

/* ödüller: kutu yok, düz "isim - tutar" satırları */
.jk-list{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:7px;margin-top:10px}
.jk-row{display:flex;align-items:baseline;gap:6px}
.jk-row-n{flex-shrink:0;font-size:10px;font-weight:800;letter-spacing:.06em;color:var(--gold)}
.jk-row-n::after{content:"-";margin-left:6px;font-weight:400;opacity:.5}
.jk-row-v{min-width:0;font-family:var(--ui);font-variant-numeric:tabular-nums;font-size:12px;font-weight:800;
  color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform-origin:left center}
/* değer bounce: değer değişince kısaca sıçrar */
.jk-row-v.pop{animation:jtpop .47s cubic-bezier(.34,1.56,.5,1)}
@keyframes jtpop{
  0%  {transform:scale(1)}
  40% {transform:scale(1.12)}
  100%{transform:scale(1)}
}
@media (prefers-reduced-motion:reduce){.jk-bg i{animation:none}}


/* ---------- ÖNERİLEN KUPONLAR ---------- */
.cb{display:flex;flex-direction:column;min-height:0;padding:11px;border-radius:9px;
  background:rgba(var(--accRGB),.055);border:1px solid rgba(var(--accRGB),.2)}
.cb-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.cb-t{font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--gold)}
.cb-n{margin-left:auto;font-family:var(--ui);font-size:9.5px;color:var(--t4)}
.cb-legs{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:1px;margin:9px 0}
.cbl{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:7px;align-items:center;padding:4px 0}
.cbl i{font-style:normal;font-size:8.5px;font-weight:800;letter-spacing:.06em;color:var(--onAcc);
  background:var(--gold-grad);padding:2px 5px;border-radius:3px;white-space:nowrap}
.cbl b{font-size:10.5px;font-weight:600;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cbl em{font-style:normal;font-family:var(--ui);font-variant-numeric:tabular-nums;
  font-size:10.5px;font-weight:700;color:var(--t1)}
.cb-f{display:flex;align-items:center;gap:10px;padding-top:9px;border-top:1px dashed rgba(var(--accRGB),.22)}
.cb-f small{display:block;font-size:8px;font-weight:800;letter-spacing:.13em;color:var(--t4)}
.cb-f b{display:block;margin-top:2px;font-family:var(--ui);font-variant-numeric:tabular-nums;
  font-size:16px;font-weight:800;color:var(--gold)}
.cb-go{margin-left:auto;padding:9px 16px;border-radius:6px;background:var(--gold-grad);color:var(--onAcc);
  font-size:10px;font-weight:800;letter-spacing:.12em}
.cb-go:hover{filter:brightness(1.08)}

/* ---------- JACKPOT AKIŞI (geniş satır) ---------- */
.feed-sum{margin-left:auto;text-align:right}
.feed-sum small{display:block;font-size:8px;font-weight:800;letter-spacing:.13em;color:var(--t5)}
.feed-sum b{display:block;margin-top:2px;font-family:var(--ui);font-variant-numeric:tabular-nums;
  font-size:11.5px;color:var(--t3)}
#feedList{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0 13px;padding:0 14px 12px;align-content:start;overflow:hidden}
.fd{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:9px;align-items:center;
  padding:8px 0;border-top:1px solid var(--b1);animation:fdIn .45s ease}
.fd-r{display:flex;align-items:baseline;gap:8px;flex-shrink:0}

/* ---------- CANLI YAYINLAR ---------- */
.st{display:flex;flex-direction:column;min-height:0;text-align:left}
.st-screen{position:relative;overflow:hidden;flex:1;min-height:0;border-radius:9px;border:1px solid var(--b2)}
.st-screen.fb{background:linear-gradient(175deg,#1b5c39,#0d3a23 62%,#082516)}
.st-screen.bb{background:linear-gradient(175deg,#8a5a24,#5c3a16 62%,#331f0c)}
.st-grass{position:absolute;inset:0;opacity:.5;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 22px,transparent 22px 44px)}
.st-screen.bb .st-grass{background:repeating-linear-gradient(0deg,rgba(0,0,0,.1) 0 16px,transparent 16px 32px)}
.st-screen::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 80% at 50% 0,rgba(255,255,255,.14),transparent 60%),
             linear-gradient(180deg,transparent 45%,rgba(0,0,0,.62))}
.st-live{position:absolute;top:8px;left:8px;z-index:2;display:flex;align-items:center;gap:5px;
  font-size:8px;font-weight:800;letter-spacing:.12em;color:#fff;background:rgba(0,0,0,.45);
  padding:4px 7px;border-radius:4px}
.st-hd{position:absolute;top:8px;right:8px;z-index:2;font-size:8px;font-weight:800;letter-spacing:.08em;
  color:#dfe7f0;background:rgba(0,0,0,.45);padding:4px 6px;border-radius:4px}
.st-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:rgba(0,0,0,.42);color:#fff;transition:background .16s,transform .16s}
.st-play svg{width:14px;height:14px;margin-left:2px}
.st:hover .st-play{background:var(--gold-grad);color:var(--onAcc);transform:translate(-50%,-50%) scale(1.08)}
.st-score{position:absolute;left:8px;right:8px;bottom:8px;z-index:2;display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:center;
  padding:6px 9px;border-radius:6px;background:rgba(6,10,14,.62);backdrop-filter:blur(3px)}
.st-score b{font-size:10.5px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-score b.a{text-align:right}
.st-score em{font-style:normal;font-family:var(--ui);font-variant-numeric:tabular-nums;
  font-size:13px;font-weight:800;color:var(--gold2)}
.st-b{display:flex;align-items:baseline;gap:8px;padding-top:7px;flex-shrink:0}
.st-t{display:none}
/* dar ekranda 3 kolonluk skor barı sığmıyor: alt alta diziliyor */
body.mv .st-score{grid-template-columns:minmax(0,1fr);gap:1px;padding:5px 7px}
body.mv .st-score b,body.mv .st-score b.a{display:block;text-align:center;font-size:9.5px}
body.mv .st-score em{display:block;text-align:center;font-size:12px}
@media (max-width:900px){
  .st-score{grid-template-columns:minmax(0,1fr);gap:1px;padding:5px 7px}
  .st-score b,.st-score b.a{display:block;text-align:center;font-size:9.5px}
  .st-score em{display:block;text-align:center;font-size:12px}
}
.st-min{font-family:var(--ui);font-size:10.5px;font-weight:700;color:var(--green)}
.st-lg{margin-left:auto;font-family:var(--ui);font-size:10px;color:var(--t4)}

/* sağ kolon: 4'lü sayfa 2x2 ızgaraya düşer */
.right .sl-page{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-rows:minmax(0,1fr)}
.right .sl{height:auto;flex:1;min-height:0}

/* ---------- ALT ---------- */
footer{margin-top:6px;border-top:1px solid var(--b1);background:var(--head)}
.rg{max-width:1720px;margin:0 auto;padding:20px 18px;display:flex;align-items:flex-start;gap:16px}
.rg-ico{flex-shrink:0;width:34px;height:34px;border-radius:8px;display:grid;place-items:center;
  background:rgba(var(--accRGB),.1);color:var(--gold)}
.rg-ico svg{width:18px;height:18px}
.rg h3{margin:0 0 6px;font-size:13px;font-weight:800}
.rg p{margin:0;font-family:var(--ui);font-size:11.5px;line-height:1.7;color:var(--t4);max-width:700px}
.rg p b{color:var(--t2)}
.rg-btns{margin-left:auto;display:flex;gap:7px;flex-shrink:0}
.ft-bot{max-width:1720px;margin:0 auto;padding:13px 18px 22px;display:flex;align-items:center;gap:16px;
  border-top:1px solid var(--b1);flex-wrap:wrap}
.ft-links{display:flex;gap:14px;flex-wrap:wrap}
.ft-links a{font-family:var(--ui);font-size:11px;color:var(--t4)}
.ft-links a:hover{color:var(--gold)}
.ft-sp{flex:1}
.ft-note{font-family:var(--ui);font-size:10px;color:var(--t5)}

/* ---------- ARAMA ---------- */
#search{position:fixed;inset:0;z-index:90;display:flex;justify-content:center;align-items:flex-start;padding:72px 16px 16px}
#search[hidden]{display:none}
.sr-back{position:absolute;inset:0;background:var(--backdrop);backdrop-filter:blur(3px)}
.sr-box{position:relative;width:100%;max-width:600px;background:var(--panel2);border:1px solid var(--b3);
  border-radius:12px;box-shadow:0 26px 70px var(--sh);overflow:hidden}
.sr-in{display:flex;align-items:center;gap:10px;padding:13px 15px;border-bottom:1px solid var(--b1);color:var(--t3)}
.sr-in input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--t1);font-size:15px;font-weight:600}
.sr-in input::placeholder{color:var(--t4);font-weight:500}
.sr-esc{font-size:9px;font-weight:800;letter-spacing:.11em;color:var(--t4);border:1px solid var(--b3);border-radius:4px;padding:5px 8px}
.sr-esc:hover{color:var(--gold);border-color:var(--gold)}
.sr-res{max-height:min(60vh,400px);overflow-y:auto;padding:7px}
.sr-hint{padding:8px 9px 5px;font-size:9px;font-weight:800;letter-spacing:.14em;color:var(--t4)}
.sr-row{display:flex;align-items:center;gap:11px;width:100%;padding:8px 9px;border-radius:8px;text-align:left}
.sr-row:hover,.sr-row.sel{background:var(--tile)}
.sr-thumb{width:32px;height:42px;border-radius:5px;flex-shrink:0;display:grid;place-items:center;
  background:linear-gradient(160deg,var(--c1),var(--c2));font-size:17px;font-weight:800;color:rgba(255,255,255,.9)}
.sr-row .nm{font-size:12.5px;font-weight:700;color:var(--t1)}
.sr-row .mt{font-family:var(--ui);font-size:10.5px;color:var(--t4);margin-top:3px}
.sr-row mark{background:rgba(var(--accRGB),.22);color:var(--gold);border-radius:2px;padding:0 1px}
.sr-none{padding:26px 14px;text-align:center;font-family:var(--ui);font-size:12px;color:var(--t4);line-height:1.7}

/* ---------- DUYARLI ---------- */
/* tek satırlık bahis düzeni sadece isim sığdığında */
@media (max-width:1560px){
  .bet{grid-template-columns:52px minmax(0,1fr)}
  .bet-odds{display:grid;grid-column:2;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
}
@media (max-width:1500px){
  .home{grid-template-columns:214px minmax(0,1fr) 310px 296px}
  .bn-slide h3{font-size:25px}
}
@media (max-width:1240px){
  .home{
    grid-template-columns:minmax(0,1fr) 296px;
    grid-template-areas:
      "banner banner"
      "bets   jackc"
      "right  right"
      "feed   feed"
      "live   live"
      "rail   rail";
  }
  .rail{grid-template-rows:auto auto}
  .rail-box{max-height:340px}
  .right{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  #feedList{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bets #betList{max-height:440px}
  .bet{grid-template-columns:52px minmax(0,1fr)}
  .bet-odds{display:grid;grid-column:2;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .sl[data-slider="streams"]{height:224px}
  #slotBox .sl,#liveCasino .sl{height:220px;flex:none}
}
@media (max-width:900px){
  nav{display:none}
  .mnav{display:flex;overflow-x:auto;scrollbar-width:none}
  .mnav::-webkit-scrollbar{display:none}
  .burger{display:none}
  .btn-ghost{display:none}
  header{padding:0 12px;gap:10px;height:54px}
  .topbar{padding:7px 12px;gap:10px}
  .topbar .tb-item{max-width:150px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .home{
    gap:11px;padding:11px;
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"banner" "bets" "jackc" "right" "feed" "live" "rail";
  }
  .jackc,.right{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto}
  #feedList{grid-template-columns:minmax(0,1fr)}
  .banner{min-height:0}
  .bn-slide{padding:20px 18px}
  .bn-slide h3{font-size:21px}
  .bn-slide p{font-size:12px;margin-bottom:13px}
  .bet{grid-template-columns:46px minmax(0,1fr)}
  .bet-odds{display:grid;grid-column:2;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .sl-page{--pp:2!important}
  .sl[data-slider="streams"]{height:206px}
  .sl[data-slider="jack"]{min-height:250px}
  .sl[data-slider="combo"]{min-height:210px}
  .rg{flex-direction:column;gap:12px}
  .rg-btns{margin-left:0}
  .ft-bot{gap:11px}
}
@media (max-width:520px){
  .bn-slide h3{font-size:19px}
  .st-score b{font-size:9.5px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}


/* ---------- MOBİL ÖNİZLEME ---------- */
body.mv{background:#010307}
body.light.mv{background:#dfe4ec}
body.mv #site{width:390px;max-width:100%;margin:12px auto 0;background:var(--bg);
  border:1px solid var(--b3);border-radius:20px;overflow:hidden;box-shadow:0 24px 70px var(--sh)}
body.mv header{position:static}
body.mv #sbView{left:50%;transform:translateX(-50%);width:390px;max-width:100%}
/* arama kaplaması da çerçevenin içinde kalsın (position:fixed pencereye göreydi) */
body.mv #search{left:50%;right:auto;transform:translateX(-50%);width:390px;max-width:100%;
  top:calc(var(--phead,42px) + 12px);bottom:0}
body.mv nav{display:none}
body.mv .mnav{display:flex;overflow-x:auto;scrollbar-width:none}
body.mv .mnav::-webkit-scrollbar{display:none}
body.mv .burger{display:none}
body.mv .btn-ghost{display:none}
body.mv header{padding:0 12px;gap:10px;height:54px}
body.mv .topbar{padding:7px 12px;gap:10px}
body.mv .topbar .tb-item{max-width:150px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
body.mv .home{gap:11px;padding:11px;
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:"banner" "bets" "jackc" "right" "feed" "live" "rail";}
body.mv .jackc,body.mv .right{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto}
body.mv #feedList{grid-template-columns:minmax(0,1fr)}
body.mv .rail{grid-template-rows:auto auto}
body.mv .rail-box{max-height:320px}
body.mv .bets #betList{max-height:420px}
body.mv .banner{min-height:0}
body.mv .bn-slide{padding:20px 18px}
body.mv .bn-slide h3{font-size:19px}
body.mv .bn-slide p{font-size:12px;margin-bottom:13px}
body.mv .bet{grid-template-columns:46px minmax(0,1fr)}
body.mv .bet-odds{display:grid;grid-column:2;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
body.mv .sl-page{--pp:2!important}
body.mv .right .sl-page{grid-template-columns:repeat(2,minmax(0,1fr))!important}
body.mv .sl[data-slider="streams"]{height:206px}
body.mv .sl[data-slider="jack"]{min-height:250px}
body.mv .sl[data-slider="combo"]{min-height:210px}
body.mv #slotBox .sl,body.mv #liveCasino .sl{height:306px;flex:none}
body.mv .st-score b{font-size:9.5px}
body.mv .rg{flex-direction:column;gap:12px}
body.mv .rg-btns{margin-left:0}
body.mv .ft-bot{gap:11px}

/* ---------- YAZI TİPİ SEÇİMİ (üst çubuktaki FONT) ----------
   sınıf gövdeye TK tarafından basılır; --ui/--disp'i ezerek tüm siteyi çevirir */
body.fs-calibri{--ui:'Calibri','Carlito',Arial,sans-serif;--disp:'Calibri','Carlito',Arial,sans-serif}
body.fs-arial{--ui:Arial,Helvetica,sans-serif;--disp:Arial,Helvetica,sans-serif}
body.fs-roboto{--ui:'Roboto',Arial,sans-serif;--disp:'Roboto',Arial,sans-serif}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}