/* ==========================================================
   sportsbook2.css — sportsbook.html'in ikinci tasarimi
   sportsbook.html ile AYNI JS ve AYNI VERIYI kullanir
   (js/sportsbook.js); ayrim gövdedeki p-sb2 sinifi.
   Bu dosya sportsbook.css'ten SONRA yuklenir, o yuzden ayni
   ozgullukteki token'lari ezer. Sabit bir gorunum: tema
   dugmeleri bu sayfada gorunumu degistirmez (bilincli).
   ========================================================== */

/* ---------- TOKEN: koyu lacivert + turuncu vurgu ---------- */
/* Renkler burada DEGIL: bu paletin tamami "arena" temasina tasindi
   (landing.css + sportsbook.css icindeki body.arena). Boylece sayfa
   secili temayi takip ediyor ve ayni palet diger sayfalarda da
   kullanilabiliyor. Burada yalnizca sayfaya ozel BICIM kaliyor. */
body.p-sb2{--rad:7px}

/* ---------- KARTLAR: belirgin cerceve, daha yuvarlak ---------- */
body.p-sb2 .card{border:1px solid var(--b-2);box-shadow:0 1px 0 rgba(255,255,255,.02) inset}

/* ---------- YAN CUBUK ----------
   Referansta her bolum ayri bir kutu; basliklar kucuk, harf araligi genis. */
body.p-sb2 .side-title{background:none;color:var(--t-4);font-size:10px;letter-spacing:.16em;
  padding:12px 14px 8px;border-bottom:1px solid var(--b-1)}
body.p-sb2 .slip-head h3{font-size:10px;letter-spacing:.16em;color:var(--t-4)}
body.p-sb2 .side .slip-head{background:none;border-bottom:1px solid var(--b-1)}
body.p-sb2 .quick{padding:10px 14px;border-top:1px solid var(--b-1);font-size:12.5px}
body.p-sb2 .quick:first-of-type{border-top:none}
body.p-sb2 .quick .ct{color:var(--txt-mute)}
body.p-sb2 .pop{border-top:1px solid var(--b-1)}
body.p-sb2 .pop .ct{font-weight:700}
body.p-sb2 .pop.on .ct{color:var(--gold-t)}

/* ---------- BET SUGGESTIONS ----------
   Baslik rozeti yuvarlak ve kuponun kendi renginde; "N MATCHES" sagda gri
   etiket; ADD TO SLIP turuncu hap, sagda arti isareti. */
body.p-sb2 .tipc{background:var(--s-panel);border:1px solid var(--b-2);padding:11px 12px}
body.p-sb2 .tipc-h{gap:8px;margin-bottom:8px;align-items:center}
body.p-sb2 .tipc-t{font-size:11px;letter-spacing:.09em;color:var(--tc,var(--gold-t))}
/* baslik ikonu: kuponun kendi renginde, ARKA PLAN YOK */
body.p-sb2 .tipc-ic{display:flex;flex-shrink:0;align-items:center;
  color:var(--tc,var(--gold-t))}
body.p-sb2 .tipc-ic svg{width:16px;height:16px;display:block}
body.p-sb2 .tipc-n{background:var(--s-tile3);color:var(--txt-mute);font-size:8.5px;
  letter-spacing:.09em;padding:3px 7px;border-radius:20px}
body.p-sb2 .tl{border-top:1px solid var(--b-1);padding:5px 0}
body.p-sb2 .tl-teams{font-size:11.5px}
body.p-sb2 .tl-pick b{color:var(--t-1);font-size:11.5px}
/* margin-top:auto SART: taban kuralda vardi, buradaki margin-top:6px onu
   eziyordu ve ADD TO SLIP maç sayisina gore yukari kayiyordu (2 bacakli
   kartta 569px, 3 bacaklida 614px). Ust bosluk padding ile veriliyor. */
body.p-sb2 .tipc-f{padding-top:15px;border-top:1px solid var(--b-1);margin-top:auto}
body.p-sb2 .tipc-f small{letter-spacing:.12em;font-size:8px}
body.p-sb2 .tipc-f .tot{font-size:15px;color:var(--gold-t)}
body.p-sb2 .tipc-add{height:27px;padding:0 12px;border-radius:20px;font-size:9px;
  letter-spacing:.09em;gap:6px;display:flex;align-items:center}
/* sagdaki arti: referanstaki gibi dugmenin icinde daire */
body.p-sb2 .tipc-add::after{content:"+";width:15px;height:15px;border-radius:50%;
  display:grid;place-items:center;background:rgba(0,0,0,.2);
  font-size:12px;font-weight:800;line-height:1}

/* kupon basligi renkleri: her oneri kendi rengini tasisin */
body.p-sb2 .tipc:nth-child(5n+1){--tc:#ff8a3d}
body.p-sb2 .tipc:nth-child(5n+2){--tc:#a78bfa}
body.p-sb2 .tipc:nth-child(5n+3){--tc:#3ddc84}
body.p-sb2 .tipc:nth-child(5n+4){--tc:#38bdf8}
body.p-sb2 .tipc:nth-child(5n+5){--tc:#fb7185}

/* ---------- MAC LISTESI: daha belirgin ayraclar ---------- */
body.p-sb2 .day-head{background:var(--s-panel2);border-top:1px solid var(--b-2);
  border-bottom:1px solid var(--b-1)}
body.p-sb2 .day-head span{font-size:11px;letter-spacing:.14em;color:var(--t-2)}
body.p-sb2 .match{border-top:1px solid var(--b-1)}
body.p-sb2 .lg-head{background:var(--s-panel2);border-top:1px solid var(--b-2)}
body.p-sb2 .odd{background:var(--s-tile);border:1px solid var(--b-2);height:34px}
body.p-sb2 .odd:hover{border-color:var(--gold-t);background:var(--s-tileh)}
body.p-sb2 .odd.picked{background:var(--gold-grad);border-color:var(--gold-2)}
body.p-sb2 .m-sport{color:var(--t-3)}
body.p-sb2 .more{color:var(--gold-t)}
body.p-sb2 .more:hover{color:var(--gold-2)}

/* ---------- SPECIAL ODDS / bolum baslıkları ---------- */
body.p-sb2 .sec-head,body.p-sb2 .slip-head{background:none;border-bottom:1px solid var(--b-2)}
body.p-sb2 .sec-head h2{font-size:12px;letter-spacing:.14em;color:var(--t-1)}
body.p-sb2 .sox-box{border-color:var(--b-2)}

/* ---------- KUPON ---------- */
body.p-sb2 .slipwrap,body.p-sb2 .slipmini{border-color:var(--b-2)}

/* ==========================================================
   SPECIAL ODDS — gonderilen tasarim: tam genislikte afis
   Markup degismedi; ayni ogeler (lig/saat, takimlar, pazar adi,
   uc oran, 3/4 sayaci) afis duzenine yerlestirildi.
   ZEMIN: verilen stadyum fotografi (assets/sox-stadium.jpg).
   Kaynak 2.4MB PNG idi, JPEG'e cevrildi (324KB) — banner icin PNG gereksiz
   agirdi. Degistirmek icin yalnizca --sox-bg satiri yeterli.
   ========================================================== */
body.p-sb2 .sox-box{
  --sox-bg:url(../assets/sox-stadium.jpg);
  position:relative;height:129px;padding:0;overflow:hidden;
  background:var(--sox-bg) center/cover no-repeat;
  border:1px solid var(--b-2)}
/* afisin uzerindeki yaziyi okunur tutan karartma */
body.p-sb2 .sox-box::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(4,8,14,.86) 0%,rgba(4,8,14,.55) 38%,rgba(4,8,14,.18) 62%,rgba(4,8,14,.72) 100%)}

/* baslik cubugu: "SPECIAL ODDS" yazisi gizli, sayac+oklar sag ustte */
body.p-sb2 .sox-box .slip-head{position:absolute;top:0;right:0;left:0;z-index:3;
  background:none;border:none;padding:6px 10px;justify-content:flex-end}
body.p-sb2 .sox-box .slip-head h3{display:none}
body.p-sb2 .sox-box .sox-nav{background:rgba(4,8,14,.55);border-radius:20px;padding:1px 4px}

body.p-sb2 .sox{position:absolute;inset:0;padding:0;height:auto;background:none}
body.p-sb2 .sox-stack{height:100%}
/* Bu tasarimda yigin yok: yalnizca ondeki kart gorunur. Gorunmeyenler
   AYNI KUTUYU kapliyor (donusumleri kaldirildi) ve asagidaki kural
   .sox-item.s0'in z-index'ini de eziyor; pointer-events kapatilmazsa
   tiklamayi DOM'daki son kart yakaliyor ve hep ayni mac aciliyordu. */
body.p-sb2 .sox-item.s1,body.p-sb2 .sox-item.s2,
body.p-sb2 .sox-item.sout,body.p-sb2 .sox-item.shide{
  opacity:0;filter:none;transform:none;pointer-events:none}
body.p-sb2 .sox-item.s0{transform:none;filter:none;pointer-events:auto}
body.p-sb2 .sox-item{
  display:grid;gap:0 18px;padding:32px 14px 10px 20px;z-index:2;
  grid-template-columns:minmax(0,1fr) 320px;
  grid-template-rows:auto 1fr;
  grid-template-areas:"when mkt" "teams odds";
  align-items:center}

/* sol ust: lig + saat */
body.p-sb2 .sox-when{grid-area:when;width:auto;align-self:start;
  font-size:12.5px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7)}
body.p-sb2 .sox-when small{font-size:10.5px;color:rgba(255,255,255,.72)}

/* orta: takimlar */
body.p-sb2 .sox-m{grid-area:teams;gap:12px}
body.p-sb2 .sox-m .kit{width:26px;height:26px}
body.p-sb2 .sox-m b{font-size:17px;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.75)}
body.p-sb2 .sox-m i{font-size:13px;font-weight:800;letter-spacing:.06em;
  color:rgba(255,255,255,.85);margin:0 10px}

/* sag: koyu panel — pazar adi ve uc oran birlikte tek kutu gibi durur */
body.p-sb2 .sox-mkt{grid-area:mkt;align-self:stretch;display:flex;align-items:center;
  background:rgba(6,10,16,.82);border:1px solid rgba(255,255,255,.09);border-bottom:none;
  border-radius:8px 8px 0 0;padding:11px 14px 8px;
  font-size:10.5px;letter-spacing:.1em;color:#fff}
body.p-sb2 .sox-os{grid-area:odds;align-self:stretch;display:grid;
  grid-template-columns:repeat(3,1fr);gap:6px;
  background:rgba(6,10,16,.82);border:1px solid rgba(255,255,255,.09);border-top:none;
  border-radius:0 0 8px 8px;padding:5px 8px 6px}
/* Uc oran ayri kutular. Yukaridaki 'body.p-sb2 .odd' kurali bunlari da
   yakaliyor (sinif listesi 'odd sox-o'), o yuzden kutu gorunumu burada
   yeniden yaziliyor — yoksa 34px sabit yukseklik ve bitisik duruyorlar. */
body.p-sb2 .sox-o{flex-direction:column;align-items:center;justify-content:center;
  gap:2px;height:auto;padding:5px 4px;border-radius:6px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10)}
body.p-sb2 .sox-o:hover{background:rgba(255,255,255,.09);border-color:var(--gold-2)}
body.p-sb2 .sox-o.picked{background:var(--gold-grad);border-color:var(--gold-2)}
body.p-sb2 .sox-o.picked .oc,body.p-sb2 .sox-o.picked>b{color:var(--onAcc)}
body.p-sb2 .sox-o .oc{font-size:10.5px;color:rgba(255,255,255,.6)}
body.p-sb2 .sox-o>b{font-size:15px;color:#fff}
body.p-sb2 .sox-o:hover .oc,body.p-sb2 .sox-o:hover>b{color:var(--gold-2)}

/* Mobil. Dikkat: sportsbook.css lig/saati mobilde gizliyor (.sox-when
   display:none) — dar seritte yer yoktu. Afis duzeninde yer var ve
   tasarimda da yaziyor, o yuzden geri aciliyor. */
@media (max-width:900px){
  /* Yukseklik icerige gore olculdu: ust serit + lig/saat + takimlar +
     oranlar bos alan birakmadan oturuyor. 196 -> 176 -> 150px (%15 daha). */
  body.p-sb2 .sox-box{height:150px}
  body.p-sb2 .sox-item{grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto auto;
    grid-template-areas:"when" "teams" "odds";gap:5px;padding:30px 12px 8px;
    align-content:center}
  body.p-sb2 .sox-when{display:flex;font-size:11.5px}
  body.p-sb2 .sox-when small{font-size:10px}
  body.p-sb2 .sox-mkt{display:none}
  body.p-sb2 .sox-m{gap:9px}
  body.p-sb2 .sox-m .kit{width:24px;height:24px}
  body.p-sb2 .sox-m b{font-size:15px}
  body.p-sb2 .sox-os{border-radius:8px;border-top:1px solid rgba(255,255,255,.09);padding:4px 6px 4px}
  body.p-sb2 .sox-o{padding:3px 4px;gap:1px}
  body.p-sb2 .sox-o .oc{font-size:10px}
  body.p-sb2 .sox-o>b{font-size:14px}
}
body.mv.p-sb2 .sox-box{height:150px}
body.mv.p-sb2 .sox-item{grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto auto auto;
  grid-template-areas:"when" "teams" "odds";gap:5px;padding:30px 12px 8px;
  align-content:center}
body.mv.p-sb2 .sox-when{display:flex;font-size:11.5px}
body.mv.p-sb2 .sox-when small{font-size:10px}
body.mv.p-sb2 .sox-mkt{display:none}
body.mv.p-sb2 .sox-m{gap:9px}
body.mv.p-sb2 .sox-m .kit{width:24px;height:24px}
body.mv.p-sb2 .sox-m b{font-size:15px}
body.mv.p-sb2 .sox-os{border-radius:8px;border-top:1px solid rgba(255,255,255,.09);padding:4px 6px 4px}
body.mv.p-sb2 .sox-o{padding:3px 4px;gap:1px}
body.mv.p-sb2 .sox-o .oc{font-size:10px}
body.mv.p-sb2 .sox-o>b{font-size:14px}