/* ==========================================================
   sportsbook.css — spor bahisleri sayfası (kendi token seti)
   ========================================================== */

:root{
  --s-page:#05080d;
  --s-bar:#02040a;
  --s-out:#010307;
  --s-head:#080b11;
  --s-head2:#0a0e15;
  --s-panel:#0d1219;
  --s-panel2:#0f151f;
  --s-panel3:#111823;
  --s-pop:#131a25;
  --s-tile:#151d29;
  --s-tile2:#161e29;
  --s-tile3:#1a2331;
  --s-tileh:#1c2634;
  --b-1:#12181f;
  --b-2:#212b39;
  --b-3:#2a3547;
  --b-4:#2f3d50;
  --t-1:#eef2f7;
  --t-2:#c6cfdb;
  --t-3:#8d99a9;
  --t-4:#5f6b7b;
  --t-5:#3d4756;
  --ok-t:#c8f5d6;
  --no-t:#ffd2d2;
  --sh-1:rgba(0,0,0,.6);
  --sh-2:rgba(0,0,0,.4);
  --ring:rgba(255,255,255,.18);
  --gold-t:var(--gold);
  --kit-line:rgba(0,0,0,.35);
  --t-hi:#ffffff;
  --glass:rgba(9,13,19,.86);
  --glass-s:rgba(9,13,19,.97);
  --fade0:rgba(10,14,21,0);
  --num:var(--ui);
  --disp:'Calibri','Carlito',Arial,sans-serif;
  --ui:'Calibri','Carlito',Arial,sans-serif;
  --bg:var(--s-page);
  --panel:var(--s-panel);
  --tile:var(--s-tile);
  --tile-hover:var(--s-tileh);
  --line:var(--b-1);
  --line-soft:var(--s-tile2);
  --txt:var(--t-1);
  --txt-dim:var(--t-3);
  --txt-mute:var(--t-4);
  --gold:#e6c169;
  --gold-deep:#b8912f;
  --gold-2:#f4d98c;
  --goldRGB:230,193,105;   /* rgba() ile parıltı/tint kurabilmek için */
  --live:#ff4d4d;
  --green:#5ddb7f;
  --gold-grad:linear-gradient(175deg,var(--gold-2),var(--gold) 58%,#d4ad4d);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--txt);
  font-family:'Calibri','Carlito',Arial,sans-serif;
  font-size:13px;-webkit-font-smoothing:antialiased;
}
button{
  font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;user-select:none;
}
button:active{opacity:.82}
.odd:active,.bet:active,.sp-pill:active{transform:scale(.97)}
.ts[data-tip]{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
html{-webkit-text-size-adjust:100%}
input{font-size:16px}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--b-3);border-radius:0}

/* ---------- PREVIEW BAR ---------- */
.preview{
  position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:8px 14px;background:var(--s-bar);border-bottom:1px solid var(--b-1);
}
.preview .pl{font-size:10.5px;font-weight:700;letter-spacing:.16em;color:var(--txt-mute)}
.vbtn{
  padding:6px 14px;border-radius:0;background:var(--s-panel3);color:var(--t-3);
  font-size:11px;font-weight:700;letter-spacing:.1em;display:flex;align-items:center;gap:6px;
}
.vbtn:hover{background:var(--s-tileh);color:var(--t-hi)}
.vbtn.on{background:var(--gold-grad);color:#1a1405}
.vbtn svg{width:12px;height:12px}
.pdiv{width:1px;height:16px;background:var(--b-1);margin:0 4px}
.vw{margin-left:auto;font-size:11px;font-weight:600;color:var(--txt-mute);font-variant-numeric:tabular-nums}

/* ---------- HEADER ---------- */
.stickhead{position:sticky;top:var(--phead,37px);z-index:40}
header{
  position:relative;height:54px;display:flex;align-items:center;gap:12px;padding:0 16px;
  background:var(--s-head);border-bottom:1px solid var(--b-1);
}
.brand{position:relative;display:flex;align-items:center;text-decoration:none;border-radius:0;flex-shrink:0}
.sitenav{display:flex;align-items:center;gap:2px;height:100%;flex:1;min-width:0;margin-left:8px}
.site-item{display:flex;align-items:center;height:100%;padding:0 12px;font-size:10.5px;font-weight:700;
  letter-spacing:.1em;color:var(--t-3);border-bottom:2px solid transparent;white-space:nowrap;text-decoration:none}
.site-item:hover{color:var(--t-1)}
.site-item.on{color:var(--gold-t);border-bottom-color:var(--gold)}
/* mobil gezinme şeridi: landing sayfalarındakiyle aynı desen, sportsbook'un
   kendi token setiyle (iki token seti birleştirilmiyor). Mobilde .sitenav
   gizlendiği için casino/slot sayfalarına tek geçiş yolu bu. */
.mnav{display:none;background:var(--s-panel);border-bottom:1px solid var(--b-1)}
.mnav a{flex:0 0 auto;padding:11px 14px;font-size:10.5px;font-weight:700;letter-spacing:.1em;
  color:var(--t-2);white-space:nowrap;border-bottom:2px solid transparent}
.mnav a:hover{color:var(--t-1)}
.mnav a.on{color:var(--gold-t);border-bottom-color:var(--gold)}
@media (max-width:900px){
  .sitenav{display:none}
  .mnav{display:flex;overflow-x:auto;scrollbar-width:none}
  .mnav::-webkit-scrollbar{display:none}
}
body.mv .mnav{display:flex;overflow-x:auto;scrollbar-width:none}
body.mv .mnav::-webkit-scrollbar{display:none}
.topbar{display:flex;align-items:center;gap:12px;padding:6px 16px;background:var(--s-bar);
  border-bottom:1px solid var(--b-1);font-size:9px;letter-spacing:.11em;color:var(--t-4);font-weight:700}
.tb-age{border:1px solid var(--b-3);border-radius:0;padding:2px 6px;color:var(--t-3);letter-spacing:.05em}
.tb-sp{flex:1}
body.mv .topbar{padding:6px 11px;gap:9px}
body.mv .sitenav{display:none}
body.mv .brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.brand:hover{filter:brightness(1.06)}
body.mv .brand:active{transform:translate(-50%,-50%) scale(.97)}
.logo{display:block;height:30px;width:93px;
  background:url(../assets/logo.svg) center/contain no-repeat}
.logo.mini{height:15px;width:47px}
body.mv .logo{height:26px;width:81px}
.icon-btn{width:30px;height:30px;display:grid;place-items:center;border-radius:0;color:var(--t-3);flex-shrink:0}
.icon-btn:hover{background:var(--s-tile2);color:var(--t-1)}
.hdr-search{margin-left:auto}
/* ---------- LAYOUT ---------- */
.shell{display:grid;grid-template-columns:300px minmax(0,1fr);gap:13px;padding:13px;align-items:start}
.side{display:flex;flex-direction:column;gap:13px;min-width:0}
.card{background:var(--panel);border:1px solid var(--line-soft);border-radius:0}

/* ---------- BANNER (Upcoming Matches üstü) ---------- */
/* görselin kendisi tam bir banner (metin/CTA görselin içinde gömülü);
   ana kolonu dolduracak şekilde tam genişlik, gerekirse cover ile kırpılır */
/* üç banner yan yana; aspect-ratio kaynak görselle aynı (1820x864) olduğu için
   cover hiçbir yeri kırpmaz, görselin tamamı küçülerek sığar */
.sb-banners{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.sb-banner{display:block;width:100%;aspect-ratio:1820/864;border-radius:0;overflow:hidden;
  background:url(../assets/sportsbook-banner.jpg) center/cover no-repeat;
  transition:filter .15s}
.sb-banner.b2{background-image:url(../assets/sportsbook-banner-2.jpg)}
.sb-banner.b3{background-image:url(../assets/sportsbook-banner-3.jpg)}
.sb-banner:hover{filter:brightness(1.04)}
/* okları konumlandırmak için: .sb-banners kaydırma kabı olduğu için
   absolute çocuk içerikle birlikte kayardı, o yüzden dış sarmalayıcı var */
.sb-bwrap{position:relative}
/* üç banner yan yanayken kaydırma yok, oklar da gereksiz */
.sb-bnav{display:none}
/* dar ekranda üçe bölünce metin okunmaz olurdu: yatay kaydırılan şeride dönüyor
   (sayfadaki .tips şeridiyle aynı desen).
   dokunmatik olmayan mobil önizlemede parmakla kaydırılamadığı için ok butonları şart */
@media (max-width:900px){
  .sb-banners{display:flex;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth}
  .sb-banners::-webkit-scrollbar{display:none}
  .sb-banner{flex:0 0 80%}
  .sb-bnav{display:grid}
}
.sb-bnav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:28px;height:28px;place-items:center;border-radius:50%;
  background:rgba(6,10,16,.72);border:1px solid rgba(255,255,255,.22);color:#fff;
  transition:opacity .15s,background .15s}
.sb-bnav.prev{left:6px}
.sb-bnav.next{right:6px}
.sb-bnav:hover{background:rgba(6,10,16,.9)}
.sb-bnav.off{opacity:0;pointer-events:none}

/* ---------- SIDEBAR ---------- */
.side-title{padding:12px 14px;font-size:10.5px;font-weight:700;letter-spacing:.15em;color:var(--txt)}
.sport{
  display:flex;align-items:center;gap:10px;padding:8px 14px;border-left:2px solid transparent;
  color:var(--t-2);font-size:11.5px;font-weight:600;letter-spacing:.05em;width:100%;text-align:left;
  transition:background .15s,color .15s;
}
.sport .ico{width:17px;height:17px;flex-shrink:0;opacity:.7}
.sport .nm{flex:1;text-transform:uppercase}
.sport .ct{font-size:11px;color:var(--txt-mute);font-weight:600}
.sport:hover{background:var(--s-panel3);color:var(--t-hi)}
.sport.on{background:linear-gradient(90deg,rgba(230,193,105,.10),transparent);border-left-color:var(--gold-t);color:var(--gold-t)}
.sport.on .ico{opacity:1}.sport.on .ct{color:var(--gold-t)}
.side-pad{padding-bottom:7px}

/* ---------- SPORTS (kupon önerileri altı, yatay kayan) ---------- */
.quick{display:flex;align-items:center;gap:9px;padding:7px 14px;font-size:11.5px;color:var(--t-2);width:100%;text-align:left}
.quick:hover{color:var(--gold-t)}
.quick .ico{width:13px;height:13px;opacity:.7}
.quick .nm{flex:1}
.quick .ct{font-size:11px;color:var(--txt-mute)}
.dot-live{width:6px;height:6px;border-radius:50%;background:var(--live);box-shadow:0 0 6px rgba(255,77,77,.8);flex-shrink:0}

/* ---------- CENTER ---------- */
.sec-head{display:flex;align-items:center;gap:9px;padding:13px 14px;flex-wrap:wrap}
.sec-head h2{margin:0;font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.selects{margin-left:0;flex:1;display:flex;gap:8px}
.select-wrap{position:relative}
.select{
  display:flex;align-items:center;gap:16px;padding:6px 10px;background:var(--tile);
  border:1px solid var(--b-2);border-radius:0;font-size:11px;font-weight:600;color:var(--t-2);
  min-width:148px;justify-content:space-between;
}
.select:hover{border-color:var(--b-4)}
.select.active{border-color:var(--gold-t);color:var(--gold-t)}
.select.active svg{transform:rotate(180deg)}
.select svg{flex-shrink:0;transition:transform .2s}
.dd{
  position:absolute;top:calc(100% + 6px);right:0;min-width:250px;max-height:290px;overflow-y:auto;
  background:var(--s-panel3);border:1px solid var(--b-3);border-radius:0;padding:5px;z-index:30;
  box-shadow:0 18px 44px var(--sh-1);
}
.dd-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 9px;border-radius:0;font-size:11.5px;color:var(--t-2);text-align:left}
.dd-item:hover{background:var(--s-tileh);color:var(--t-hi)}
.dd-box{width:14px;height:14px;border-radius:0;border:1.5px solid var(--b-4);display:grid;place-items:center;flex-shrink:0;font-size:9px;color:transparent;font-weight:900}
.dd-item.on .dd-box{background:var(--gold);border-color:var(--gold-t);color:#1a1405}
.dd-box.rd{border-radius:50%}
.dd-item.on .dd-box.rd{color:transparent;box-shadow:inset 0 0 0 2.5px var(--s-panel3)}
.dd-item .nm{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dd-item .ct{font-size:10px;color:var(--txt-mute);flex-shrink:0}
.dd-sep{height:1px;background:var(--line-soft);margin:5px 3px}
.no-rows{padding:26px 14px;text-align:center;font-size:11.5px;color:var(--txt-mute);line-height:1.7}

.rowhead{display:grid;grid-template-columns:1fr repeat(3,var(--owid,68px)) 96px;column-gap:6px;align-items:center;padding:2px 14px 8px}
.rowhead .lbl{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;letter-spacing:.14em;color:var(--t-2)}
.rowhead .c{text-align:center;font-size:10px;font-weight:700;color:var(--t-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.match{display:grid;grid-template-columns:1fr repeat(3,var(--owid,68px)) 96px;column-gap:6px;align-items:center;padding:9px 14px;border-top:1px solid var(--line-soft)}
.mleft{display:grid;grid-template-columns:44px 16px 1fr;gap:8px;align-items:center;min-width:0}
.clock{font-size:11px;font-weight:700;color:var(--green);line-height:1.3}
.clock.pre{color:var(--t-2);font-weight:700}
.clock.pre small{display:block;color:var(--txt-mute);font-weight:600;font-size:9.5px;margin-bottom:2px}
.teams{min-width:0}
.team{display:flex;align-items:center;gap:9px;padding:2.5px 0;min-width:0}
.kit{width:19px;height:19px;flex-shrink:0;display:block;filter:drop-shadow(0 1px 1.5px var(--sh-2))}
.crest{
  width:18px;height:18px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  font-size:7px;font-weight:800;color:var(--t-hi);box-shadow:inset 0 0 0 1px var(--ring);
}
.team .tn{font-size:12.5px;font-weight:600;color:var(--t-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
#tip{
  position:fixed;left:0;top:0;z-index:80;pointer-events:none;opacity:0;transform:translateY(5px);
  transition:opacity .15s ease,transform .15s ease;
  background:var(--s-pop);border:1px solid var(--b-3);border-radius:0;padding:9px 11px;
  box-shadow:0 16px 38px var(--sh-1);min-width:126px;max-width:220px;
}
#tip.on{opacity:1;transform:none}
#tip .tt{display:flex;align-items:center;gap:6px;font-size:8px;font-weight:800;letter-spacing:.13em;
         color:var(--txt-mute);margin-bottom:8px;line-height:1.4}
#tip .tt u{width:8px;height:11px;border-radius:0;background:var(--c);text-decoration:none;flex-shrink:0}
#tip .tr{display:flex;align-items:baseline;gap:8px;font-size:11.5px;font-weight:700;color:var(--t-1);padding:2.5px 0}
#tip .tr em{font-style:normal;margin-left:auto;font-size:10px;font-weight:600;color:var(--txt-mute);font-variant-numeric:tabular-nums}
#tip::after{content:"";position:absolute;left:var(--ax,50%);bottom:-5px;width:9px;height:9px;
  background:var(--s-pop);border-right:1px solid var(--b-3);border-bottom:1px solid var(--b-3);
  transform:translateX(-50%) rotate(45deg)}
#tip.below::after{bottom:auto;top:-5px;border-right:none;border-bottom:none;
  border-left:1px solid var(--b-3);border-top:1px solid var(--b-3)}
.ts[data-tip]{cursor:pointer;color:var(--t-3)}
.ts[data-tip]:hover,.ts[data-tip].act{color:var(--t-1)}
.ts[data-tip]:hover u,.ts[data-tip].act u{box-shadow:inset 0 0 0 .5px var(--sh-2),0 0 0 1.5px rgba(255,255,255,.28)}
.tstat{margin-left:auto;display:flex;align-items:center;gap:9px;flex-shrink:0;padding-left:10px}
.ts{display:inline-flex;align-items:center;justify-content:flex-end;gap:4px;min-width:30px;
    font-size:11px;font-weight:800;color:var(--t-3);font-variant-numeric:tabular-nums;line-height:1}
.ts u{width:9px;height:12px;border-radius:0;background:var(--c);text-decoration:none;flex-shrink:0;
      box-shadow:inset 0 0 0 .5px var(--sh-2),0 1px 2px var(--sh-2)}
.ts svg{width:12px;height:12px;color:var(--t-3);flex-shrink:0}
.ts i{font-style:normal;font-size:9px;letter-spacing:.05em;color:var(--t-4);font-weight:700}
body.mv .tstat{gap:7px;padding-left:7px}
body.mv .ts{min-width:27px;font-size:10.5px;gap:3px}
body.mv .ts u{width:8px;height:11px}
body.mv .ts svg{width:11px;height:11px}
.lg-head{display:flex;align-items:center;gap:9px;padding:9px 14px;background:var(--s-panel2);border-top:1px solid var(--line-soft)}
.lg-head .lg-sport{font-size:8px;font-weight:800;letter-spacing:.05em;color:var(--sc);
  background:var(--s-tileh);padding:3px 7px;border-radius:0;flex-shrink:0;white-space:nowrap}
.lg-head .lg{width:17px;height:17px;border-radius:50%;background:var(--s-tileh);display:grid;place-items:center;font-size:6.5px;font-weight:800;color:var(--t-3);flex-shrink:0}
.lg-name{font-size:11.5px;font-weight:700;letter-spacing:.05em;color:var(--t-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lg-count{font-size:10px;color:var(--txt-mute);flex-shrink:0}
.lg-chev{margin-left:auto;display:flex;color:var(--txt-mute);flex-shrink:0}
.lg-head:hover .lg-name{color:var(--gold-t)}
.lg-head+.match{border-top:none}
.scores{display:flex;flex-direction:column;gap:5px;align-items:center;font-size:12.5px;font-weight:700;color:var(--green)}

.odd{
  height:32px;margin:0;border-radius:0;background:var(--tile);border:1px solid var(--s-tile3);
  display:flex;align-items:center;justify-content:space-between;gap:5px;padding:0 8px;
  transition:background .15s,border-color .15s,transform .1s;min-width:0;
}
.odd .oc{font-size:9.5px;font-weight:800;letter-spacing:.02em;color:var(--t-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.odd>b{font-size:12px;font-weight:700;color:var(--t-1);flex-shrink:0;font-variant-numeric:tabular-nums}
.odd.picked .oc{color:rgba(26,20,5,.66)}
.odd.picked>b{color:#1a1405}
.odd:hover{background:var(--tile-hover);border-color:var(--b-4)}
.odd:active{transform:scale(.97)}
.odd.picked{background:var(--gold-grad);border-color:var(--gold-2);color:#1a1405}
.more{display:flex;align-items:center;justify-content:flex-end;gap:5px;color:var(--txt-dim);font-size:11px;font-weight:600}
.more:hover{color:var(--gold-t)}
.sec-foot{padding:11px;text-align:center;border-top:1px solid var(--line-soft);font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--t-2);width:100%}
.sec-foot:hover{color:var(--gold-t)}
.link-more{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;letter-spacing:.1em;color:var(--txt-dim)}
.link-more:hover{color:var(--gold-t)}

/* ---------- BET SLIP ---------- */
.slip-head{display:flex;align-items:center;padding:12px 14px;gap:6px}
.slip-head h3{margin:0;font-size:12px;font-weight:700;letter-spacing:.12em}
.slip-head .sp{flex:1}
.tabs{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
.tab{padding:10px 0;font-size:10.5px;font-weight:700;letter-spacing:.09em;color:var(--txt-dim);border-bottom:2px solid transparent}
.tab:hover{color:var(--txt)}
.tab.on{color:var(--gold-t);border-bottom-color:var(--gold-t)}
.pick{display:grid;grid-template-columns:20px 1fr auto auto;gap:9px;align-items:start;padding:11px 14px;border-bottom:1px solid var(--line-soft)}
.pick .pico{width:18px;height:18px;border-radius:50%;background:var(--s-tile2);display:grid;place-items:center;margin-top:1px}
.pick .pname{font-size:12.5px;font-weight:700;color:var(--t-1)}
.pick .pmkt{font-size:10.5px;color:var(--txt-dim);margin-top:2px}
.pick .pevt{font-size:10.5px;color:var(--txt-mute);margin-top:2px}
.pick .podd{font-size:13px;font-weight:700}
.pick .prm{color:var(--txt-mute);font-size:13px;line-height:1}
.pick .prm:hover{color:var(--live)}
.slip-empty{padding:26px 14px;text-align:center;color:var(--txt-mute);font-size:11.5px;line-height:1.6}
.srow{display:flex;align-items:center;padding:11px 14px 0;font-size:11.5px;color:var(--t-2)}
.srow b{margin-left:auto;font-size:15px;font-weight:700;color:var(--t-hi)}
.stepper{margin-left:auto;display:flex;align-items:center;background:var(--tile);border:1px solid var(--b-2);border-radius:0;overflow:hidden}
.stepper button{width:30px;height:31px;display:grid;place-items:center;color:var(--t-2);font-size:14px}
.stepper button:hover{background:var(--tile-hover);color:var(--t-hi)}
.stepper input{width:74px;height:31px;background:transparent;border:none;text-align:center;color:var(--t-hi);font-size:12.5px;font-weight:700;font-family:inherit}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.win{margin-left:auto;font-size:15px;font-weight:800;color:var(--gold-t)}
.place{margin:13px 14px 14px;width:calc(100% - 28px);padding:12px;border-radius:0;background:var(--gold-grad);color:#1a1405;font-weight:800;font-size:12px;letter-spacing:.13em}
.place:hover{filter:brightness(1.08)}
.place:disabled{filter:grayscale(.7) brightness(.6);cursor:not-allowed}

/* ---------- POPULAR ---------- */
.pop{display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid var(--line-soft);width:100%;text-align:left;font-size:12px;color:var(--t-2)}
.pop:hover{background:var(--s-panel3);color:var(--gold-t)}
.pop .lg{width:18px;height:18px;border-radius:50%;background:var(--s-tile2);display:grid;place-items:center;font-size:6.5px;font-weight:800;color:var(--t-3);flex-shrink:0}
.pop .nm{flex:1}
.pop svg{opacity:.45}
.pop .ico{width:15px;height:15px;flex-shrink:0;color:var(--t-3);opacity:1}
.pop:hover .ico{color:var(--gold-t)}
.pop .ct{flex-shrink:0;font-family:var(--ui);font-size:10px;font-weight:700;color:var(--txt-mute)}

/* ---------- HIZLI GEÇİŞ ÇUBUĞU ---------- */
.qbar{display:flex;align-items:center;gap:7px;padding:8px 14px;background:var(--s-head2);
  border-bottom:1px solid var(--b-1)}
.qbar .crumbs{flex:1;min-width:0;gap:6px;flex-wrap:nowrap}
.qbar .cr{flex:1;min-width:0}
.qbar .cr-b{width:100%;max-width:none;justify-content:space-between;padding:7px 9px}
.qbar .cr-sep{display:none}
.qbar .cr .dd{min-width:220px}
.q-go{flex-shrink:0;padding:7px 16px;border-radius:0;background:var(--gold-grad);color:#1a1405;
  font-weight:800;font-size:10px;letter-spacing:.14em}
.q-go:hover{filter:brightness(1.08)}
.q-go.done{background:rgba(93,219,127,.2);color:var(--green)}
body.mv .qbar{padding:8px 10px;gap:6px;align-items:stretch;flex-wrap:nowrap}
body.mv .qbar .crumbs{display:grid;grid-template-columns:1fr 1fr;gap:6px;flex:1;min-width:0}
body.mv .qbar .cr{width:100%;min-width:0}
body.mv .qbar .cr-b{width:100%;max-width:none;height:100%;padding:8px 9px;font-size:9.5px;gap:4px}
body.mv .q-go{align-self:stretch;padding:0 11px;font-size:9.5px;letter-spacing:.08em}
body.mv .qbar .cr .dd{min-width:0;width:100%;max-height:240px}

/* ---------- ODAKLI GÖRÜNÜM (spor/ülke/lig sayfası) ----------
   tanıtım blokları gizlenir; liste, şeritler ve yan panel yerinde kalır */
#pageSports.focus .sb-bwrap,
#pageSports.focus .sox-box,
#pageSports.focus #tipsSec{display:none}
.fp-top{display:flex;align-items:center;gap:11px;padding:10px 14px;margin-bottom:13px}
.fp-back{width:26px;height:26px;flex-shrink:0;display:grid;place-items:center;border-radius:0;
  background:var(--s-tile);border:1px solid var(--b-3);color:var(--t-2)}
.fp-back:hover{border-color:var(--gold-t);color:var(--gold-t)}
.fp-title{flex:1;min-width:0;font-size:13px;font-weight:800;letter-spacing:.06em;
  color:var(--t-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fp-count{flex-shrink:0;font-family:var(--ui);font-size:10.5px;font-weight:700;color:var(--txt-mute);
  font-variant-numeric:tabular-nums}
body.light .fp-top{background:var(--txt)}
body.light .fp-title{color:#fff}
body.light .fp-count{color:rgba(255,255,255,.7)}
body.light .fp-back{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);color:#fff}
body.light .fp-back:hover{background:rgba(255,255,255,.24);border-color:#fff;color:#fff}
@media (max-width:900px){
  .fp-top{padding:9px 10px;gap:9px}
  .fp-title{font-size:11.5px}
  .fp-count{font-size:9.5px}
}
body.mv .fp-top{padding:9px 10px;gap:9px}
body.mv .fp-title{font-size:11.5px}
body.mv .fp-count{font-size:9.5px}

/* ---------- ALTERNATİF SEÇİCİ: DİYAGRAMDAKİ ÜÇ SATIR ----------
   şeritli tasarımla aynı panelleri açar; hangisi tercih edilecek diye
   ikisi şimdilik birlikte duruyor */
.sel3{display:flex;flex-direction:column}
.s3-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:13px 14px;border-top:1px solid var(--line-soft);color:var(--t-2)}
.s3-row:first-child{border-top:none}
.s3-row:hover{background:var(--s-panel3)}
.s3-l{flex-shrink:0;font-size:10px;font-weight:800;letter-spacing:.13em;color:var(--txt-mute)}
.s3-v{flex:1;min-width:0;text-align:right;font-size:12px;font-weight:700;color:var(--t-1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s3-row:hover .s3-v{color:var(--gold-t)}
.s3-c{width:13px;height:13px;flex-shrink:0;color:var(--txt-mute)}
/* hizli tarih filtresi: iki esit dugme yan yana */
.s3-dates{display:flex;border-top:1px solid var(--line-soft)}
.s3-date{flex:1;min-width:0;padding:12px 10px;font-size:10px;font-weight:800;letter-spacing:.1em;
  color:var(--txt-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  border-left:1px solid var(--line-soft)}
.s3-date:first-child{border-left:none}
.s3-date b{font-weight:800;color:var(--t-1)}
.s3-date:hover{background:var(--s-panel3);color:var(--t-2)}
.s3-date:hover b{color:var(--gold-t)}
.s3-date.on{color:var(--gold-t)}
.s3-date.on b{color:var(--gold-t)}
@media (max-width:900px){
  .s3-date{padding:11px 8px;font-size:9px;letter-spacing:.05em}
}
body.mv .s3-date{padding:11px 8px;font-size:9px;letter-spacing:.05em}
.s3-row:hover .s3-c{color:var(--gold-t)}
@media (max-width:900px){
  .s3-row{padding:12px 11px;gap:8px}
  .s3-l{font-size:9px;letter-spacing:.1em}
  .s3-v{font-size:11px}
}
body.mv .s3-row{padding:12px 11px;gap:8px}
body.mv .s3-l{font-size:9px;letter-spacing:.1em}
body.mv .s3-v{font-size:11px}

/* ---------- SPOR ÇEKMECESİ ---------- */
.dr-open{margin-right:-6px}
#drawer,#pickDrawer{position:fixed;inset:0;z-index:85;display:none}
#drawer.on,#pickDrawer.on{display:block}
/* ülke/lig tam listesi (soldan) */
.dr-head .pk-bk{margin-left:0;margin-right:2px;width:26px;height:26px}
.pk-search{display:flex;align-items:center;gap:8px;padding:10px 14px;
  border-bottom:1px solid var(--line-soft);color:var(--t-4)}
.pk-search input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--t-1);
  font-family:inherit;font-size:12.5px;font-weight:600}
.pk-search input::placeholder{color:var(--t-4);font-weight:500}
.pk-list{position:absolute;left:0;right:0;top:98px;bottom:0;overflow-y:auto}
.pk-item{display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  padding:10px 14px;border-bottom:1px solid var(--line-soft);
  font-size:11.5px;font-weight:600;color:var(--t-2)}
.pk-item .pk-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-item .pk-c{flex-shrink:0;font-family:var(--ui);font-size:10px;font-weight:700;color:var(--txt-mute);
  font-variant-numeric:tabular-nums}
.pk-item:hover{background:var(--s-panel3);color:var(--t-hi)}
.pk-item.on{color:var(--gold-t)}
.pk-item.on .pk-c{color:var(--gold-t)}
.pk-none{padding:24px 14px;text-align:center;font-size:11.5px;color:var(--txt-mute)}
.dr-back{position:absolute;inset:0;background:var(--glass-s);backdrop-filter:blur(2px)}
.dr-panel{position:absolute;left:0;top:0;bottom:0;width:min(300px,86vw);background:var(--s-panel);
  border-right:1px solid var(--b-3);box-shadow:12px 0 44px var(--sh-1);overflow-y:auto;
  animation:drIn .2s ease;padding-bottom:16px}
@keyframes drIn{from{transform:translateX(-16px);opacity:.5}to{transform:none;opacity:1}}
body.mv .dr-panel{left:calc(50% - 195px);width:300px;max-width:100vw}
.dr-link{display:block;width:100%;text-align:left;padding:8px 0;font-size:11px;font-weight:700;
  letter-spacing:.1em;color:var(--t-3)}
.dr-link:hover{color:var(--gold-t)}
.dr-link.on{color:var(--gold-t)}
.dr-search{display:flex;align-items:center;gap:9px;width:100%;padding:11px 14px;text-align:left;
  font-size:11.5px;color:var(--t-4);border-bottom:1px solid var(--line-soft)}
.dr-search:hover{color:var(--gold-t);background:var(--s-panel3)}
.dr-search svg{flex-shrink:0}
.dr-link{display:block;width:100%;text-align:left;padding:8px 0;font-size:11px;font-weight:700;
  letter-spacing:.1em;color:var(--t-3)}
.dr-link:hover,.dr-link.on{color:var(--gold-t)}
.dr-head{display:flex;align-items:center;padding:14px 14px 12px;border-bottom:1px solid var(--line-soft);
  position:sticky;top:0;background:var(--s-panel);z-index:2}
.dr-head span{font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--t-1)}
.dr-head .icon-btn{margin-left:auto}
.dr-sec{padding:13px 14px;border-bottom:1px solid var(--line-soft)}
.dr-lbl{display:block;font-size:9px;font-weight:800;letter-spacing:.15em;color:var(--t-4);margin-bottom:9px}
.dr-sec .crumbs{gap:6px}
.dr-sec .cr-b{max-width:100%;width:100%;justify-content:space-between;padding:8px 10px;font-size:10.5px}
.dr-sec .cr{width:100%}
.dr-sec .cr-sep{display:none}
.dr-sec .cr .dd{min-width:100%;max-height:230px}

/* ---------- ARAMA ---------- */
#search{position:fixed;inset:0;z-index:90;display:flex;justify-content:center;align-items:flex-start;padding:70px 16px 16px}
.sr-back{position:absolute;inset:0;background:var(--glass-s);backdrop-filter:blur(3px)}
.sr-box{position:relative;width:100%;max-width:560px;background:var(--s-pop);border:1px solid var(--b-3);
  border-radius:0;box-shadow:0 26px 70px var(--sh-1);overflow:hidden;animation:mpIn .18s ease}
.sr-in{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line-soft);color:var(--t-3)}
.sr-in input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--t-1);
  font-family:inherit;font-size:15px;font-weight:600}
.sr-in input::placeholder{color:var(--t-4);font-weight:500}
.sr-esc{font-size:9px;font-weight:800;letter-spacing:.11em;color:var(--t-4);border:1px solid var(--b-3);
  border-radius:0;padding:4px 7px;flex-shrink:0}
.sr-esc:hover{color:var(--gold-t);border-color:var(--gold)}
.sr-res{max-height:min(62vh,440px);overflow-y:auto;padding:6px}
.sr-hint{padding:8px 10px 4px;font-size:9px;font-weight:800;letter-spacing:.13em;color:var(--t-4)}
/* satır = maça gitme butonu (.sr-main) + altında oran düğmeleri (.sr-odds) */
.sr-row{border-radius:0}
.sr-row:hover,.sr-row.sel{background:var(--s-tile)}
.sr-main{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:center;width:100%;
  padding:9px 10px;border-radius:0;text-align:left}
.sr-odds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:0 10px 9px}
.sr-odds.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.sr-o{height:30px;padding:0 10px}
.sr-o .oc{font-size:9.5px;font-weight:800;color:var(--t-4)}
.sr-o>b{font-size:11.5px}
.sr-row .kits{display:grid;gap:2px}
.sr-row .kit{width:16px;height:16px}
.sr-row .nm{font-size:12.5px;font-weight:700;color:var(--t-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-row .mt{font-size:10px;color:var(--t-4);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-row mark{background:rgba(230,193,105,.22);color:var(--gold-t);border-radius:0;padding:0 1px}
.sr-row .rt{display:flex;align-items:center;gap:7px;flex-shrink:0}
.sr-row .lv{display:flex;align-items:center;gap:4px;font-size:8.5px;font-weight:800;letter-spacing:.09em;
  color:var(--live);background:rgba(255,77,77,.12);padding:3px 6px;border-radius:0}
.sr-row .tm{font-size:10.5px;font-weight:700;color:var(--t-3);font-variant-numeric:tabular-nums}
.sr-none{padding:26px 14px;text-align:center;font-size:12px;color:var(--t-4);line-height:1.7}
body.mv #search{padding:52px 10px 10px}
body.mv .sr-in input{font-size:16px}

/* ---------- KUPON ÖNERİLERİ ---------- */
.tips-nav{width:24px;height:24px;display:grid;place-items:center;border-radius:0;background:var(--tile);color:var(--t-3);flex-shrink:0}
.tips-nav.off{opacity:.25;pointer-events:none}
.tips-nav:hover{background:var(--tile-hover);color:var(--gold-t)}
.tips{display:flex;gap:9px;overflow-x:auto;padding:0 14px 9px;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:smooth}
.tips::-webkit-scrollbar{display:none}
/* kart yüksekliği: satırlar iki satırlık (takım üstte, seçim+oran altta) olduğu için
   yükseklik çabuk büyüyor — line-height'lar ve dikey boşluklar bilinçli olarak sıkı */
.tipc{flex:0 0 178px;scroll-snap-align:start;background:var(--s-panel3);border:1px solid var(--b-2);border-radius:0;padding:8px;display:flex;flex-direction:column}
.tipc-h{display:flex;align-items:center;gap:6px;margin-bottom:5px}
.tipc-t{font-size:9px;font-weight:800;letter-spacing:.1em;color:var(--gold-t)}
.tipc-n{margin-left:auto;font-size:8px;font-weight:700;letter-spacing:.05em;color:var(--txt-mute);background:var(--s-tile2);padding:1px 4px;border-radius:0}
.tl{display:flex;flex-direction:column;gap:0;padding:2px 0;border-top:1px solid var(--s-tile3)}
.tl:first-child{border-top:none}
.tl-teams{display:block;font-size:9.5px;line-height:1.25;font-weight:700;color:var(--t-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-pick{display:flex;align-items:baseline;justify-content:space-between;gap:6px;line-height:1.2}
.tl-pick i{font-style:normal;font-size:8px;font-weight:800;letter-spacing:.03em;color:var(--txt-mute)}
.tl-pick b{font-size:9.5px;font-weight:700;color:var(--t-2);font-variant-numeric:tabular-nums}
.tipc-f{display:flex;align-items:center;gap:6px;margin-top:auto;padding-top:6px}
.tipc-f small{display:block;font-size:7.5px;line-height:1.2;letter-spacing:.1em;color:var(--txt-mute);font-weight:700}
.tipc-f .tot{display:block;font-size:12.5px;line-height:1.2;font-weight:800;color:var(--gold-t);font-variant-numeric:tabular-nums}
.tipc-add{width:22px;height:23px;border-radius:0;background:var(--tile);border:1px solid var(--b-3);color:var(--t-2);font-size:12px;font-weight:700;flex-shrink:0;display:grid;place-items:center}
.tipc-add:hover{border-color:var(--gold-t);color:var(--gold-t)}
.tipc-go{padding:0 10px;height:23px;border-radius:0;background:var(--gold-grad);color:#1a1405;font-weight:800;font-size:9px;letter-spacing:.09em;flex-shrink:0}

/* ---------- ÖZEL ORANLI MAÇLAR (banner altı, tek satır dönen yığın) ---------- */
.sox-box{border-color:rgba(var(--goldRGB),.42)}
.sox{display:flex;align-items:center;gap:12px;padding:0 14px 12px;height:56px;
  background:linear-gradient(90deg,rgba(var(--goldRGB),.09),transparent 52%)}
/* yığının kabı: taşan/geri düşen kartları kırpar */
.sox-stack{position:relative;flex:1;min-width:0;height:100%;overflow:hidden}
.sox-item{position:absolute;inset:0;display:flex;align-items:center;gap:10px;
  transform-origin:50% 50%;
  transition:transform .5s cubic-bezier(.32,.06,.24,1),opacity .5s,filter .5s;
  will-change:transform,opacity,filter}
/* öndeki net, arkadakiler küçülüp bulanıklaşıyor, çıkan aşağı düşüyor */
.sox-item.s0  {transform:translateY(0)     scale(1);   opacity:1;   filter:blur(0);     z-index:4}
.sox-item.s1  {transform:translateY(-24%)  scale(.90); opacity:.40; filter:blur(2px);   z-index:3}
.sox-item.s2  {transform:translateY(-40%)  scale(.81); opacity:.16; filter:blur(3.5px); z-index:2}
.sox-item.sout{transform:translateY(118%)  scale(.88); opacity:0;   filter:blur(4px);   z-index:1}
.sox-item.shide{opacity:0;filter:blur(4px);transform:translateY(-52%) scale(.76);z-index:0}
.sox-when{flex-shrink:0;width:112px;display:flex;flex-direction:column;gap:1px;
  font-size:9px;font-weight:700;letter-spacing:.03em;color:var(--t-2);
  white-space:nowrap;overflow:hidden}
.sox-when small{font-size:8.5px;font-weight:600;color:var(--txt-mute)}
.sox-m{flex:1;min-width:0;display:flex;align-items:center;gap:6px}
.sox-m .kit{width:16px;height:16px;flex-shrink:0}
.sox-m b{font-size:11px;font-weight:700;color:var(--t-1);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.sox-m i{flex-shrink:0;font-style:normal;font-size:8px;font-weight:800;
  letter-spacing:.08em;color:var(--txt-mute);margin:0 2px}
/* oranların hangi pazara ait olduğu yazıyor */
.sox-mkt{flex-shrink:0;font-size:8.5px;font-weight:700;letter-spacing:.07em;
  color:var(--txt-mute);text-transform:uppercase}
/* üç oran: kutu yok, sadece basılabilir etiket+değer.
   .odd sınıfını kupon entegrasyonu için taşıyor, o yüzden .odd'un kutu görünümünü
   (zemin/çerçeve/yükseklik ve .picked altın dolgusu) burada geri alıyoruz. */
.sox-os{flex-shrink:0;display:flex;align-items:center;gap:2px}
.sox-o,.sox-o:hover,.sox-o.picked{
  height:auto;padding:6px 10px;border:none;background:none;box-shadow:none}
.sox-o{display:flex;align-items:baseline;justify-content:flex-start;gap:6px;
  transition:color .15s}
.sox-o .oc{font-size:9px;font-weight:700;color:var(--txt-mute)}
.sox-o>b{font-size:12.5px;font-weight:800;color:var(--t-1);font-variant-numeric:tabular-nums}
.sox-o:hover .oc,.sox-o:hover>b{color:var(--gold-t)}
.sox-o.picked .oc{color:var(--gold-t)}
.sox-o.picked>b{color:var(--gold-t);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:2px}
/* .sox ekli: beyaz temadaki body.light .odd.picked gölgesini kesin geçsin */
body.light .sox .sox-o.picked{box-shadow:none}
/* gezinme: 6px noktalar dokunmatikte hedeflenemiyordu — ok düğmeleri + konum
   sayacı. Düğmeler mobilde 40px'e çıkıyor (dokunma hedefi). */
.sox-nav{flex-shrink:0;display:flex;align-items:center;gap:2px}
/* boyut sayfadaki diğer ok düğmeleriyle (.tips-nav 24px) aynı hizada dursun */
.sox-b{width:24px;height:24px;display:grid;place-items:center;border-radius:0;
  background:var(--s-tile);border:1px solid var(--b-3);color:var(--t-2)}
.sox-b svg{width:12px;height:12px}
.sox-b:hover{border-color:var(--gold-t);color:var(--gold-t);background:var(--s-tileh)}
.sox-b:active{transform:scale(.94)}
.sox-ix{min-width:34px;text-align:center;font-family:var(--ui);font-size:10.5px;font-weight:700;
  color:var(--txt-mute);font-variant-numeric:tabular-nums}
.sox-ix b{color:var(--gold-t);font-weight:800}
/* dar ekran: lig/saat satıra sığmıyor, kupa etiketi ve tarih düşüyor */
/* dar ekran: üç oran + takım adları sığsın diye lig/saat ve pazar adı düşüyor
   (pazar adı başlıkta zaten "SPECIAL ODDS" olarak duruyor) */
@media (max-width:900px){
  .sox{gap:7px;padding:0 10px 11px;height:52px}
  .sox-when{display:none}
  .sox-mkt{display:none}
  .sox-m b{font-size:10px}
  .sox-o{padding:6px 6px;gap:4px}
  .sox-o b{font-size:11px}
  /* mobilde biraz daha büyük: dokunma hedefi */
  .sox-b{width:30px;height:30px}
  .sox-b svg{width:13px;height:13px}
  .sox-ix{min-width:30px;font-size:10px}
}

.tipc-go:hover{filter:brightness(1.08)}
.tipc.done{border-color:rgba(93,219,127,.5)}
.tipc.done .tipc-go{background:rgba(93,219,127,.18);color:var(--green)}
body.mv .tipc{flex:0 0 164px}
body.mv .sox{gap:7px;padding:0 10px 11px;height:52px}
body.mv .sox-when{display:none}
body.mv .sox-mkt{display:none}
body.mv .sox-m b{font-size:10px}
/* .sox ekli: yoksa dosyada sonra gelen body.mv .odd (height/padding) bunu eziyor */
body.mv .sox .sox-o{height:auto;padding:6px 6px;gap:4px}
body.mv .sox .sox-o>b{font-size:11px}
body.mv .sox-b{width:30px;height:30px}
body.mv .sox-b svg{width:13px;height:13px}
body.mv .sox-ix{min-width:30px;font-size:10px}

/* ---------- FOOTER ---------- */
.strip{
  margin:0 13px 14px;padding:15px 18px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:15px;
  background:var(--panel);border:1px solid var(--line-soft);border-radius:0;
}
.feat{display:flex;align-items:center;gap:10px}
.feat .fi{width:26px;height:26px;display:grid;place-items:center;color:var(--gold-t);flex-shrink:0}
.feat b{display:block;font-size:12px;font-weight:700}
.feat small{display:block;font-size:9.5px;letter-spacing:.1em;color:var(--txt-mute);margin-top:1px}
.rg{text-align:center;padding:0 13px 22px;font-size:10px;color:var(--t-5);line-height:1.7}

/* ---------- MOBILE VIEW (.mv = gerçek mobil veya önizleme) ---------- */
body.mv{background:var(--s-out)}
body.mv #viewport{
  width:390px;max-width:100%;margin:14px auto 0;background:var(--bg);
  border:1px solid var(--b-2);border-radius:0;overflow:hidden;
  box-shadow:0 24px 70px var(--sh-1);
}
/* mobil önizlemede position:fixed kaplamalar pencereye göre konumlanıp tüm ekranı
   kaplıyordu; gerçek telefon hissi için 390px'lik çerçeveye hizalanıyorlar */
body.mv #search,
body.mv #drawer,
body.mv #pickDrawer{
  left:50%;right:auto;transform:translateX(-50%);width:390px;max-width:100%;
  /* dikeyde de çerçeveye hizalanmalı: önizleme çubuğunun altından başlar,
     yoksa tüm pencere yüksekliğini kaplayıp çubuğun üstüne biniyordu */
  top:calc(var(--phead,42px) + 14px);bottom:0;
}
body.mv .stickhead{position:static}
body.mv header{position:relative;height:50px;gap:8px;padding:0 12px}
body.mv .shell{grid-template-columns:minmax(0,1fr);gap:10px;padding:10px}
body.mv .sb-banners{display:flex;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth}
body.mv .sb-banners::-webkit-scrollbar{display:none}
body.mv .sb-banner{flex:0 0 80%}
body.mv .sb-bnav{display:grid}
/* tek kolonda yan panel maç listesinin altına iner; hızlı bağlantılar mobilde gizli kalır */
body.mv .side{order:2}
body.mv .side .side-pad{display:none}
body.mv .sec-head{padding:11px 11px 9px;gap:7px}
body.mv .selects{margin-left:0;width:100%;gap:7px}
body.mv .selects>*{flex:0 1 auto;min-width:0}
body.mv .selects .select{min-width:150px}
body.mv .select{min-width:0;width:100%;gap:8px;padding:8px 10px}
body.mv .dd{left:0;right:auto;min-width:100%;max-width:calc(100% + 120px)}
body.mv .rowhead,body.mv .match{grid-template-columns:repeat(3,minmax(0,1fr)) auto;grid-template-areas:"a a a a" "b c d e";padding:9px 11px}
body.mv .rowhead{padding-bottom:6px}
body.mv .rowhead>*:nth-child(1),body.mv .match>*:nth-child(1){grid-area:a}
body.mv .rowhead>*:nth-child(2),body.mv .match>*:nth-child(2){grid-area:b}
body.mv .rowhead>*:nth-child(3),body.mv .match>*:nth-child(3){grid-area:c}
body.mv .rowhead>*:nth-child(4),body.mv .match>*:nth-child(4){grid-area:d}
body.mv .rowhead>*:nth-child(5),body.mv .match>*:nth-child(5){grid-area:e}
body.mv .mkt2 .rowhead,body.mv .mkt2 .match{grid-template-columns:repeat(2,minmax(0,1fr)) auto;grid-template-areas:"a a a" "b c e"}
body.mv .mkt2 .rowhead>*:nth-child(4),body.mv .mkt2 .match>*:nth-child(4){grid-area:e}
.mkit{width:13px;height:13px;flex-shrink:0;display:block}
.mkit .kit{width:13px;height:13px;filter:none}
body.mv .lg-head{padding:8px 11px}
body.mv .st-btn{width:26px;height:26px}
body.mv .rowend{gap:6px}
body.mv .lg-name{font-size:11px}
body.mv .kit{width:18px;height:18px}
body.mv .mleft{margin-bottom:8px;grid-template-columns:38px 16px 1fr}
body.mv .odd{height:32px;margin:0;padding:0 6px}
body.mv .odd .oc{font-size:9px}
body.mv .odd>b{font-size:11.5px}
body.mv .more{justify-content:flex-end;font-size:10px}
body.mv .strip{grid-template-columns:1fr 1fr;margin:0 10px 12px;padding:13px;gap:12px}
body.mv .rg{padding-bottom:18px}
body.mv .preview{border-bottom-color:var(--s-panel)}

/* ---------- MAÇ SAYFASI ---------- */
#pageMatch{padding:13px}
.mp-top{display:flex;align-items:center;gap:10px;padding:0 2px 12px;flex-wrap:wrap}
.crumbs{display:flex;align-items:center;gap:5px;min-width:0;flex-wrap:wrap}
.cr{position:relative}
.cr-b{display:flex;align-items:center;gap:6px;max-width:180px;padding:5px 9px;border-radius:0;
  background:var(--s-tile);border:1px solid var(--b-2);font-size:10px;font-weight:800;letter-spacing:.06em;
  color:var(--t-2);white-space:nowrap}
.cr-b em{font-style:normal;overflow:hidden;text-overflow:ellipsis}
.cr-b svg{flex-shrink:0;transition:transform .2s}
.cr-b:hover{border-color:var(--gold);color:var(--gold-t)}
.cr-b.on{border-color:var(--gold);color:var(--gold-t)}
.cr-b.on svg{transform:rotate(180deg)}
.cr .dd{left:0;right:auto;min-width:210px;max-height:270px}
.cr-sep{color:var(--t-5);font-size:11px;font-weight:700}
body.mv .cr-b{max-width:120px;font-size:9.5px;padding:5px 7px}
.mp-close{display:none;width:28px;height:28px;place-items:center;border-radius:0;color:var(--txt-dim);flex-shrink:0}
.mp-close:hover{background:var(--s-tile2);color:var(--t-hi)}
.mp-back{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--txt-dim)}
.mp-back:hover{color:var(--gold-t)}

/* masaüstü: sağdan açılan panel, liste yerinde kalır */
body:not(.mv) #pageMatch{
  position:fixed;right:0;z-index:45;
  top:calc(var(--phead,37px) + var(--shead,96px));bottom:62px;
  width:min(520px,44vw);
  background:var(--s-head2);border-left:1px solid var(--b-2);border-top:1px solid var(--b-2);
  border-top-left-radius:12px;overflow-y:auto;overscroll-behavior:contain;
  padding:14px 16px 20px;box-shadow:-26px 0 64px var(--sh-1);
  animation:mpIn .24s ease;
}
@keyframes mpIn{from{transform:translateX(26px);opacity:0}to{transform:none;opacity:1}}
body:not(.mv) #pageMatch .mp-top{
  position:sticky;top:-14px;z-index:3;background:var(--s-head2);
  margin:-14px -16px 12px;padding:14px 16px 12px;border-bottom:1px solid var(--line-soft);
}
body:not(.mv) #pageMatch .mp-close{display:grid}
body:not(.mv) #pageMatch .mp-back{display:none}
body:not(.mv) #pageMatch .mp-tabs{position:sticky;top:44px;background:var(--s-head2);z-index:2;margin:0 -16px;padding:0 16px 12px}
#pageStats{padding:13px;max-width:1040px;margin:0 auto}
#pageStats .mp-top{padding-bottom:14px;border-bottom:1px solid var(--line-soft);margin-bottom:14px}
body:not(.mv) #stBody{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
body:not(.mv) #stBody .st-card{margin-bottom:0}

/* ---------- İSTATİSTİK ---------- */
.rowend{display:flex;align-items:center;justify-content:flex-end;gap:7px}
.st-btn{width:28px;height:28px;display:grid;place-items:center;border-radius:0;flex-shrink:0;
  background:var(--tile);border:1px solid var(--b-2);color:var(--t-3);transition:border-color .15s,color .15s}
.st-btn:hover{background:var(--tile-hover);border-color:var(--gold-t);color:var(--gold-t)}
.st-card{background:var(--panel);border:1px solid var(--line-soft);border-radius:0;padding:14px;margin-bottom:10px}
.st-title{display:flex;align-items:center;gap:8px;margin:0 0 13px;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--t-1)}
.st-title small{font-size:10.5px;color:var(--txt-mute);font-weight:600;letter-spacing:0}
.st-all{margin-left:auto;display:flex;align-items:center;gap:5px;font-size:10px;font-weight:800;letter-spacing:.11em;color:var(--gold-t)}
.st-all:hover{filter:brightness(1.15)}

.prob{display:flex;gap:8px;margin-bottom:9px}
.prob>div{flex:1;min-width:0;text-align:center}
.prob>div:first-child{text-align:left}
.prob>div:last-child{text-align:right}
.prob .pl{display:block;font-size:10px;color:var(--txt-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prob .pv{display:block;font-size:17px;font-weight:800;margin-top:4px;font-variant-numeric:tabular-nums}
.pbar{display:flex;gap:2px;height:6px}
.pbar i{display:block;border-radius:0}
.pbar i:nth-child(1){background:var(--gold)}
.pbar i:nth-child(2){background:var(--b-4)}
.pbar i:nth-child(3){background:var(--t-3)}

.form-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:13px}
.fb{display:flex;gap:4px}
.fb span{width:19px;height:19px;border-radius:50%;display:grid;place-items:center;font-size:9px;font-weight:800}
.fb .w{background:rgba(93,219,127,.17);color:var(--green)}
.fb .d{background:var(--s-tileh);color:var(--t-3)}
.fb .l{background:rgba(255,77,77,.15);color:var(--live)}

.perf{display:grid;gap:11px}
.pr{display:grid;grid-template-columns:48px 1fr 48px;align-items:center;gap:8px}
.pr .v{font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--t-1)}
.pr .v.a{text-align:right}
.pr .lb{text-align:center;font-size:10.5px;color:var(--txt-dim)}
.pr .bars{grid-column:1/-1;display:flex;gap:3px;height:4px;margin-top:-4px}
.pr .bt{flex:1;background:var(--s-tile2);border-radius:0;display:flex;overflow:hidden}
.pr .bt.l{justify-content:flex-end}
.pr .bt i{display:block;height:100%;border-radius:0}
.pr .bt.l i{background:var(--gold)}
.pr .bt.r i{background:var(--t-3)}

.h2h-sum{display:flex;gap:8px;margin-bottom:11px}
.h2h-sum>div{flex:1;text-align:center}
.h2h-sum .pl{display:block;font-size:10px;color:var(--txt-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h2h-sum .pv{display:block;font-size:20px;font-weight:800;margin-top:3px}
.rows{display:grid}
.rows .r{display:grid;grid-template-columns:56px 1fr 46px 1fr 21px;gap:8px;align-items:center;padding:8px 0;border-top:1px solid var(--line-soft);font-size:11px}
.rows .r .dt{color:var(--txt-mute);font-size:10px;font-variant-numeric:tabular-nums}
.rows .r .hm{text-align:right;color:var(--t-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rows .r .aw{color:var(--t-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rows .r .sc{text-align:center;font-weight:800;color:var(--gold-t);font-variant-numeric:tabular-nums}
.rows .r .me{font-weight:700;color:var(--t-hi)}
.rows .r .bd{width:19px;height:19px;border-radius:50%;display:grid;place-items:center;font-size:9px;font-weight:800}
.st-tabs{display:flex;gap:16px;border-bottom:1px solid var(--line-soft);margin:-2px 0 12px}
.st-tab{padding-bottom:9px;margin-bottom:-1px;font-size:11px;font-weight:700;color:var(--txt-dim);border-bottom:2px solid transparent}
.st-tab:hover{color:var(--txt)}
.st-tab.on{color:var(--gold-t);border-bottom-color:var(--gold-t)}
.tbl{display:grid;grid-template-columns:48px 1fr 48px;gap:8px;align-items:center;padding:9px 0;border-top:1px solid var(--line-soft);font-size:11.5px}
.tbl .v{font-weight:800;color:var(--t-1);font-variant-numeric:tabular-nums}
.tbl .v.a{text-align:right}
.tbl .lb{text-align:center;font-size:10.5px;color:var(--txt-dim)}

body.mv #pageStats{padding:10px}
body.mv .rows .r{grid-template-columns:50px 1fr 42px 1fr 19px;gap:6px;font-size:10.5px}
body.mv .prob .pv{font-size:15px}
.mp-league{font-size:11.5px;font-weight:600;color:var(--t-2)}
.mp-state{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:9.5px;font-weight:800;letter-spacing:.11em;padding:4px 9px;border-radius:0;color:var(--live);background:rgba(255,77,77,.12)}
.mp-state.soon{color:var(--t-3);background:var(--s-tile2)}

.mp-hero{
  position:relative;overflow:hidden;display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center;
  padding:26px 22px;background:var(--panel);border:1px solid var(--line-soft);border-radius:0;margin-bottom:13px;
}
.mp-glow{position:absolute;left:50%;top:-120px;transform:translateX(-50%);width:420px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(230,193,105,.11),transparent 65%);pointer-events:none}
.mp-side{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center}
.mp-side .kit{width:44px;height:44px}
.mp-side .nm{font-size:14.5px;font-weight:700;line-height:1.3}
.mp-side .tag{font-size:9.5px;letter-spacing:.13em;color:var(--txt-mute);font-weight:700}
.mp-score{position:relative;text-align:center;min-width:96px}
.mp-score .sc{font-size:34px;font-weight:800;letter-spacing:.02em;line-height:1;font-variant-numeric:tabular-nums}
.mp-score .sc.pre{font-size:22px;color:var(--t-2)}
.mp-score .mn{margin-top:7px;font-size:11px;font-weight:700;color:var(--green)}
.mp-score .mn.pre{color:var(--txt-mute);font-weight:600}

.mp-tabs{display:flex;gap:6px;overflow-x:auto;padding:0 2px 12px;scrollbar-width:none}
.mp-tabs::-webkit-scrollbar{display:none}
.mp-tab{padding:7px 14px;border-radius:0;background:var(--tile);font-size:10.5px;font-weight:700;letter-spacing:.09em;color:var(--t-3);white-space:nowrap;flex-shrink:0}
.mp-tab:hover{background:var(--tile-hover);color:var(--t-hi)}
.mp-tab.on{background:var(--gold-grad);color:#1a1405}

.mkt-card{background:var(--panel);border:1px solid var(--line-soft);border-radius:0;margin-bottom:8px;overflow:hidden}
.mkt-head{display:flex;align-items:center;gap:10px;width:100%;padding:11px 14px;text-align:left}
.mkt-head .t{font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--t-1)}
.mkt-head .n{font-size:10px;color:var(--txt-mute)}
.mkt-head .cv{margin-left:auto;color:var(--txt-mute);display:flex;transition:transform .22s}
.mkt-head:hover .t{color:var(--gold-t)}
.mkt-card.shut .mkt-head .cv{transform:rotate(-90deg)}
.mkt-card.shut .mkt-body{display:none}
.mkt-body{display:grid;gap:5px;padding:0 14px 13px;justify-content:start}
.mkt-body.c2{grid-template-columns:repeat(2,minmax(110px,164px))}
.mkt-body.c3{grid-template-columns:repeat(3,minmax(96px,150px))}
.bet{
  display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;
  border-radius:0;background:var(--tile);border:1px solid var(--s-tile3);
  font-size:10.5px;color:var(--t-3);transition:background .15s,border-color .15s;min-width:0;
}
.bet .bn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bet .bn strong{font-weight:800;color:var(--t-1)}
.bet .bn i{font-style:normal;font-weight:500;color:var(--t-3)}
.bet.picked .bn strong{color:#1a1405}
.bet.picked .bn i{color:rgba(26,20,5,.68)}
.bet>b{font-size:11.5px;font-weight:700;color:var(--t-1);flex-shrink:0;font-variant-numeric:tabular-nums}
.bet:hover{background:var(--tile-hover);border-color:var(--b-4)}
.bet.picked{background:var(--gold-grad);border-color:var(--gold-2);color:rgba(26,20,5,.72)}
.bet.picked>b{color:#1a1405}

body.mv #pageMatch{padding:10px}
body.mv .mp-hero{padding:20px 12px;gap:8px}
body.mv .mp-side .kit{width:34px;height:34px}
body.mv .mp-side .nm{font-size:12.5px}
body.mv .mp-score .sc{font-size:26px}
body.mv .mp-score{min-width:70px}
body.mv .mkt-body{justify-content:stretch}
body.mv .mkt-body.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
body.mv .mkt-body.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
body.mv .bet{padding:9px 8px;font-size:10px}
[hidden]{display:none!important}
#pageMobile{padding:13px}
.app-hero{
  position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) 300px;
  gap:34px;align-items:center;padding:40px 34px;
  background:var(--panel);border:1px solid var(--line-soft);border-radius:0;
}
.app-hero .glow{position:absolute;right:-90px;top:-140px;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(230,193,105,.15),transparent 62%);pointer-events:none}
.app-copy{position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:9.5px;font-weight:800;letter-spacing:.2em;color:var(--gold-t)}
.dot-gold{width:5px;height:5px;border-radius:50%;background:var(--gold);box-shadow:0 0 7px rgba(230,193,105,.9)}
.app-hero h1{margin:13px 0 12px;font-size:36px;line-height:1.08;font-weight:800;letter-spacing:-.015em}
.app-hero h1 em{font-style:normal;color:var(--gold-t)}
.app-lede{margin:0 0 22px;font-size:12.5px;line-height:1.7;color:var(--t-3);max-width:400px}
.store-row{display:flex;gap:9px;flex-wrap:wrap}
.store{display:flex;align-items:center;gap:9px;padding:9px 18px 9px 14px;border-radius:0;background:var(--gold-grad);color:#1a1405;text-align:left}
.store.alt{background:transparent;border:1px solid var(--b-3);color:var(--txt)}
.store:hover{filter:brightness(1.08)}
.store.alt:hover{border-color:var(--gold-t);color:var(--gold-t);filter:none}
.store small{display:block;font-size:8.5px;letter-spacing:.15em;opacity:.72;font-weight:700}
.store b{display:block;font-size:12.5px;font-weight:800;margin-top:1px}
.qr-row{display:flex;align-items:center;gap:14px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line-soft)}
.qr{width:70px;height:70px;background:#fff;border-radius:0;padding:5px;flex-shrink:0}
.qr-txt{font-size:11px;color:var(--txt-mute);line-height:1.6}
.qr-txt b{display:block;color:var(--t-2);font-size:12px;font-weight:700;margin-bottom:2px}
.meta{display:flex;gap:14px;margin-top:7px;flex-wrap:wrap}
.meta span{font-size:10px;color:var(--t-5);letter-spacing:.03em}
.mob-note{display:none;margin-top:20px;padding:13px 14px;border-radius:0;background:var(--s-panel3);border:1px solid var(--line);font-size:11.5px;line-height:1.65;color:var(--t-3)}
.mob-note b{color:var(--gold-t);font-weight:700}

.phone{
  position:relative;width:268px;justify-self:center;border-radius:0;background:var(--s-head2);
  border:1px solid var(--b-3);padding:8px;box-shadow:0 28px 64px var(--sh-1);
}
.phone .notch{position:absolute;top:15px;left:50%;transform:translateX(-50%);width:58px;height:5px;border-radius:0;background:var(--s-tile2);z-index:2}
.screen{border-radius:0;background:var(--bg);overflow:hidden;padding:26px 9px 0}
.s-top{display:flex;align-items:center;gap:5px;padding:0 2px 9px}
.s-top .sb{font-size:10.5px;font-weight:800;letter-spacing:.05em}
.s-chip{margin-left:auto;display:flex;align-items:center;gap:4px;font-size:7px;font-weight:800;letter-spacing:.1em;color:var(--live);background:rgba(255,77,77,.12);padding:3px 6px;border-radius:0}
.s-tabs{display:flex;gap:4px;padding-bottom:7px}
.s-tab{font-size:7px;font-weight:700;letter-spacing:.09em;padding:4px 8px;border-radius:0;background:var(--tile);color:var(--t-3)}
.s-tab.on{background:var(--gold-grad);color:#1a1405}
.s-match{padding:8px 1px;border-top:1px solid var(--line-soft)}
.s-row{display:flex;align-items:center;gap:5px;font-size:8.5px;font-weight:600;color:var(--t-1)}
.s-row .sc{margin-left:auto;color:var(--green);font-weight:700}
.s-odds{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:7px}
.s-odds span{height:21px;border-radius:0;background:var(--tile);display:grid;place-items:center;font-size:8px;font-weight:700;color:var(--t-1)}
.s-odds span.on{background:var(--gold-grad);color:#1a1405}
.s-slip{margin:8px -9px 0;padding:9px 11px;background:linear-gradient(180deg,var(--s-pop),var(--s-panel2));border-top:1px solid var(--b-2);display:flex;align-items:center;gap:8px}
.s-slip .sl{display:block;font-size:7px;font-weight:700;letter-spacing:.12em;color:var(--t-4)}
.s-slip b{font-size:11px}
.s-slip .go{margin-left:auto;background:var(--gold-grad);color:#1a1405;font-size:7.5px;font-weight:800;padding:5px 10px;border-radius:0;letter-spacing:.1em}

.app-feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:13px;margin-top:13px}
.fcard{padding:18px 16px;background:var(--panel);border:1px solid var(--line-soft);border-radius:0}
.fcard .fic{width:30px;height:30px;border-radius:0;display:grid;place-items:center;background:rgba(230,193,105,.09);color:var(--gold-t);margin-bottom:12px}
.fcard b{display:block;font-size:12.5px;margin-bottom:5px}
.fcard p{margin:0;font-size:11px;line-height:1.65;color:var(--t-4)}

/* app page — mobil */
body.mv #pageMobile{padding:10px}
body.mv .app-hero{grid-template-columns:minmax(0,1fr);padding:24px 15px 26px;gap:24px}
body.mv .app-hero .glow{right:-160px;top:-200px}
body.mv .app-hero h1{font-size:25px;margin-bottom:10px}
body.mv .app-lede{font-size:12px;margin-bottom:18px}
body.mv .store-row{gap:8px}
body.mv .store{flex:1 1 100%;justify-content:center;padding:11px 14px}
body.mv .qr-row{display:none}
body.mv .mob-note{display:block}
body.mv .phone{width:216px;order:-1;border-radius:0}
body.mv .screen{border-radius:0}
body.mv .app-feats{grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
body.mv .fcard{padding:14px 12px}
body.mv .fcard p{font-size:10.5px}

/* ---------- ALT GEZİNME + KUPON PANELİ ----------
   alt bar artık kupon değil gezinme: arama / anasayfa / kuponlarım / canlı.
   Kupon yalnızca seçim varken açılan ayrı bir panel. */
body{padding-bottom:60px}
.navbar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:grid;grid-template-columns:repeat(4,1fr);
  padding-bottom:env(safe-area-inset-bottom);
  background:var(--glass-s);border-top:1px solid var(--b-2);
  box-shadow:0 -14px 36px var(--sh-1);
}
@supports (backdrop-filter:blur(1px)){.navbar{background:var(--glass);backdrop-filter:blur(14px)}}
.nv{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  min-height:58px;padding:8px 4px;color:var(--txt-mute);border-radius:0}
.nv svg{width:19px;height:19px}
.nv span{font-size:8.5px;font-weight:800;letter-spacing:.1em}
.nv:hover{color:var(--t-1)}
.nv.on{color:var(--gold-t)}
/* kupon sayısı rozeti */
.nv i{position:absolute;top:6px;right:calc(50% - 22px);min-width:15px;height:15px;padding:0 3px;
  background:var(--gold);color:#1a1405;font-size:9px;font-weight:800;font-style:normal;
  display:grid;place-items:center;font-variant-numeric:tabular-nums}

/* kupon paneli: alt gezinmenin üstünde, sağa yaslı (tam genişlikte satırlar
   masaüstünde aşırı gerilmiş görünüyordu) */
.slipwrap{
  position:fixed;right:0;bottom:58px;z-index:59;width:min(420px,100%);
  margin-bottom:env(safe-area-inset-bottom);
  background:var(--s-panel);border-top:1px solid var(--gold);
  border-left:1px solid var(--gold);
  box-shadow:0 -16px 40px var(--sh-1);
  animation:slipIn .2s ease;
}
@keyframes slipIn{from{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}
.slip-hd{display:flex;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line-soft);
  background:var(--s-head2)}
.slip-t{font-size:9.5px;font-weight:800;letter-spacing:.13em;color:var(--gold-t)}
.slip-t i{font-style:normal;margin-left:6px;background:var(--gold);color:#1a1405;
  min-width:15px;height:15px;padding:0 3px;display:inline-grid;place-items:center;font-size:9px}
.slip-x{margin-left:auto;width:26px;height:26px;display:grid;place-items:center;color:var(--t-3)}
.slip-x:hover{background:var(--s-tile2);color:var(--t-1)}
.slip-body{max-height:min(52vh,400px);overflow-y:auto}
.sb-clear{font-size:9.5px;font-weight:700;letter-spacing:.12em;color:var(--txt-mute)}
.sb-clear:hover{color:var(--live)}
.sb-stakerow{display:flex;align-items:center;padding:12px 16px;font-size:11.5px;color:var(--t-2);border-top:1px solid var(--line-soft)}
.sb-stakerow .stepper{margin-left:auto}
.sb-stakerow b{margin-left:auto;font-size:14px;font-weight:800;color:var(--t-hi);font-variant-numeric:tabular-nums}
.sb-stakerow .win{margin-left:auto;font-size:14px}

/* açık kupon kartı */
.obet{padding:13px 16px;border-bottom:1px solid var(--line-soft)}
.ob-head{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.ob-type{font-size:8px;font-weight:800;letter-spacing:.14em;color:#1a1405;background:var(--gold-grad);padding:3px 7px;border-radius:0}
.ob-id{font-size:10px;color:var(--txt-mute);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.ob-pill{margin-left:auto;display:flex;align-items:center;gap:5px;font-size:8px;font-weight:800;letter-spacing:.11em;padding:3px 8px;border-radius:0}
.ob-pill.live{color:var(--live);background:rgba(255,77,77,.12)}
.ob-pill.soon{color:var(--t-3);background:var(--s-tile2)}
.leg{display:grid;grid-template-columns:15px 1fr auto;gap:10px;align-items:start;padding:5px 0}
.leg .ls{width:15px;height:15px;border-radius:50%;display:grid;place-items:center;font-size:8px;font-weight:800;margin-top:2px}
.ls.won{background:rgba(93,219,127,.16);color:var(--green)}
.ls.pend{background:rgba(230,193,105,.15);color:var(--gold-t)}
.ls.wait{background:var(--s-tile2);color:var(--t-4)}
.ls.lost{background:rgba(255,77,77,.16);color:var(--live)}
.leg .lname{font-size:12px;font-weight:700;color:var(--t-1)}
.leg .lmkt{font-size:10px;color:var(--txt-dim);margin-top:2px}
.leg .levt{font-size:10px;color:var(--txt-mute);margin-top:2px}
.leg .lnote{font-size:10px;margin-top:4px;color:var(--green)}
.leg .lnote.wait{color:var(--t-4)}
.leg .lodd{font-size:12px;font-weight:700;color:var(--t-2);font-variant-numeric:tabular-nums}
.ob-foot{display:flex;align-items:center;gap:20px;margin-top:11px;padding-top:11px;border-top:1px dashed var(--b-1);flex-wrap:wrap}
.ob-f small{display:block;font-size:8px;letter-spacing:.13em;color:var(--txt-mute);font-weight:700}
.ob-f b{display:block;font-size:12.5px;margin-top:3px;font-variant-numeric:tabular-nums}
.ob-f.ret b{color:var(--gold-t)}
.cashout{margin-left:auto;padding:9px 15px;border-radius:0;border:1px solid var(--gold);color:var(--gold-t);font-size:10px;font-weight:800;letter-spacing:.09em;font-variant-numeric:tabular-nums}
.cashout:hover{background:rgba(230,193,105,.1)}
.cashout.confirm{background:var(--gold-grad);color:#1a1405;border-color:var(--gold-2)}
.cashout:disabled{border-color:var(--b-3);color:var(--t-5);cursor:not-allowed;background:none}
.ob-empty{padding:30px 16px;text-align:center;font-size:11.5px;color:var(--txt-mute);line-height:1.7}

.sb-go{padding:10px 20px;border-radius:0;background:var(--gold-grad);color:#1a1405;font-weight:800;font-size:10.5px;letter-spacing:.12em}
.sb-go:hover{filter:brightness(1.08)}
.sb-go:disabled{filter:grayscale(.7) brightness(.55);cursor:not-allowed}

/* My Bets sayfası özet şeridi */
.bt-sum{display:flex;align-items:center;gap:24px;padding:13px 16px;
  background:var(--s-panel2);border-bottom:1px solid var(--line-soft)}
.bt-sum .ob-f.cash b{color:var(--green)}

body.mv{padding-bottom:58px}
body.mv .nv{min-height:54px;gap:3px}
body.mv .nv svg{width:18px;height:18px}
body.mv .nv span{font-size:8px}
body.mv .slipwrap{left:50%;transform:translateX(-50%);width:390px;max-width:100%;
  border-left:1px solid var(--b-2);border-right:1px solid var(--b-2);bottom:54px}
body.mv .navbar{left:50%;transform:translateX(-50%);width:390px;max-width:100%;
  border-left:1px solid var(--b-2);border-right:1px solid var(--b-2)}
body.mv .bt-sum{gap:14px;padding:11px}
body.mv .stepper input{font-size:16px;width:88px;height:36px}
body.mv .stepper button{width:34px;height:36px;font-size:16px}
body.mv .obet,body.mv .sb-stakerow{padding-left:11px;padding-right:11px}
body.mv .ob-foot{gap:14px}
body.mv .cashout{margin-left:0;width:100%;margin-top:4px}

/* beraberliksiz pazar (2 kolon) */
.mkt2 .rowhead,.mkt2 .match{grid-template-columns:1fr repeat(2,var(--owid,68px)) 96px}

/* oran değişimi vurgusu */
.odd{position:relative}
.odd.up,.odd.down{transition:background .5s,border-color .5s,color .5s}
.odd.up{background:rgba(93,219,127,.16);border-color:rgba(93,219,127,.55);color:var(--ok-t)}
.odd.down{background:rgba(255,77,77,.14);border-color:rgba(255,77,77,.5);color:var(--no-t)}
.odd.up::after,.odd.down::after{
  content:"";position:absolute;top:3px;right:3px;width:0;height:0;
  border-left:2.5px solid transparent;border-right:2.5px solid transparent;
}
.odd.up::after{border-bottom:3.5px solid var(--green)}
.odd.down::after{border-top:3.5px solid var(--live)}

/* başlık çubukları: lacivert zemin, beyaz yazı */
body.light .sec-head,body.light .slip-head,body.light .side-title{background:var(--txt)}
body.light .sec-head h2,body.light .slip-head h3,body.light .side-title{color:#fff}
body.light .sec-head .link-more,body.light .slip-head .link-more{color:rgba(255,255,255,.75)}
body.light .sec-head .link-more:hover,body.light .slip-head .link-more:hover{color:var(--gold)}
body.light .sec-head .tips-nav,body.light .slip-head .tips-nav{background:rgba(255,255,255,.12);color:#fff}
body.light .sec-head .tips-nav:hover,body.light .slip-head .tips-nav:hover{background:rgba(255,255,255,.22)}
body.light .dot-live{box-shadow:0 0 5px rgba(217,44,44,.55)}
body.light .odd.picked,body.light .bet.picked{box-shadow:0 1px 3px rgba(234,80,34,.35)}
body.light .kit{filter:drop-shadow(0 1px 1.5px rgba(10,41,68,.22))}
body.light{
  --s-page:#ffffff;
  --s-bar:#f5f5f5;
  --s-out:#ececec;
  --s-head:#ffffff;
  --s-head2:#ffffff;
  --s-panel:#ffffff;
  --s-panel2:#ececec;
  --s-panel3:#f0f0f0;
  --s-pop:#ffffff;
  --s-tile:#f0f0f0;
  --s-tile2:#eaeaea;
  --s-tile3:#e0e0e0;
  --s-tileh:#e4e4e4;
  --b-1:#d3dbe2;
  --b-2:#b9c6d1;
  --b-3:#93a8b8;
  --b-4:#7d97a8;
  --t-1:#0a2944;
  --t-2:#33526b;
  --t-3:#5c7a91;
  --t-4:#8098ac;
  --t-5:#a9bac7;
  --ok-t:#0f7a3d;
  --no-t:#b3261e;
  --sh-1:rgba(10,41,68,.13);
  --sh-2:rgba(10,41,68,.08);
  --ring:rgba(10,41,68,.16);
  /* beyaz temada vurgu rengi altın değil, turuncu-kırmızı */
  --gold:#ea5022;
  --gold-2:#f27c54;
  --gold-deep:#b93916;
  --goldRGB:234,80,34;
  --gold-grad:linear-gradient(175deg,#f27c54,#ea5022 58%,#b93916);
  --gold-t:#b93916;
  --t-hi:#0a2944;
  --glass:rgba(255,255,255,.86);
  --glass-s:rgba(255,255,255,.97);
  --fade0:rgba(255,255,255,0);
  --kit-line:rgba(0,0,0,.22);
  --bg:#ffffff;
  --panel:#ffffff;
  --tile:#f0f0f0;
  --tile-hover:#e4e4e4;
  --line:#d3dbe2;
  --line-soft:#dde5eb;
  --txt:#0a2944;
  --txt-dim:#5c7a91;
  --txt-mute:#8098ac;
  --live:#d92c2c;
  --green:#0e7a40;
}

/* ---------- YAZI TİPİ ---------- */
body.f-disp{font-family:var(--disp)}
body.f-octin{--disp:'Calibri','Carlito',Arial,sans-serif}
body.f-disp button,body.f-disp input{font-family:inherit}
body.f-disp .odd>b,body.f-disp .bet>b,body.f-disp .oc,
body.f-disp .clock,body.f-disp .scores,body.f-disp .more,
body.f-disp .sport .ct,body.f-disp .sp-pill .c,body.f-disp .lg-count,
body.f-disp .dd-item .ct,body.f-disp .mkt-head .n,
body.f-disp .srow b,body.f-disp .win,body.f-disp .stepper input,
body.f-disp .podd,body.f-disp .pick .pmkt,body.f-disp .pick .pevt,
body.f-disp .nv i,body.f-disp .slip-t i,
body.f-disp .ob-id,body.f-disp .ob-f b,body.f-disp .cashout,
body.f-disp .lodd,body.f-disp .leg .levt,body.f-disp .leg .lnote,body.f-disp .lmkt,
body.f-disp .mp-score .sc,body.f-disp .mp-score .mn,
body.f-disp .prob .pv,body.f-disp .pr .v,body.f-disp .h2h-sum .pv,body.f-disp .tbl .v,
body.f-disp .rows .r .dt,body.f-disp .rows .r .sc,body.f-disp .st-title small,
body.f-disp .slip-empty,body.f-disp .ob-empty,body.f-disp .no-rows,
body.f-disp .app-lede,body.f-disp .fcard p,body.f-disp .qr-txt,body.f-disp .meta,
body.f-disp .mob-note,body.f-disp .rg,body.f-disp .vw
{font-family:var(--num)}
/* Octin doğal olarak geniş; büyük harf takibini biraz kısıyoruz */
body.f-disp .sp-pill,body.f-disp .tab,
body.f-disp .mp-tab,body.f-disp .st-tab,
body.f-disp .place,body.f-disp .sb-go,
body.f-disp .sec-head h2,body.f-disp .slip-head h3,body.f-disp .side-title
{letter-spacing:var(--track,.05em)}
body.f-disp .app-hero h1{letter-spacing:.01em}

/* orta genişlikler: merkez kolon daraldığında taşmayı önle */
@media (max-width:1400px){
  .shell{grid-template-columns:264px minmax(0,1fr)}
}
@media (max-width:1120px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .side{order:2}
  .side .side-pad{display:none}
}

/* casino kabuğunun içine gömüldüğünde kendi başlıkları gizlenir */
body.embed .preview,body.embed .topbar,body.embed header{display:none!important}
body.embed .stickhead{top:0}
body.embed.mv #viewport{width:100%;max-width:none;margin:0;border:none;border-radius:0;box-shadow:none}
body.embed.mv .navbar,body.embed.mv .slipwrap{left:0;right:0;transform:none;width:auto;border-left:none;border-right:none}
body.embed.mv .dr-panel{left:0}

/* ---------- YAZI TİPİ SEÇİMİ (üst çubuktaki FONT) ----------
   sınıf gövdeye TK tarafından basılır. Dosyanın sonunda olmalı: body.f-octin de
   --disp tanımlıyor ve aynı özgüllükte, sonra gelen kazanıyor. */
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}}
