/* ==========================================================================
   Mostbet UZ — grbs.uz
   Raskladka: "UCH BOSQICH" — matn tajriba lestnitsasi sifatida uch darajaga
   guruhlangan, har bir darajaning o'z bosh-panel (sarlavha)si bor; vizual
   zinapoya — chapdan o'sib boruvchi otstup va qalinlashuvchi chegara.
   Signatura fича: daraja-panel — o'qish paytida foydalanuvchi qaysi
   bosqichda ekanini ko'rsatadi (IntersectionObserver, ish.js).
   Sinflar faqat o'zbekcha: bosqich-, daraja-, bosh-panel, oyoq, knopka,
   jadval-quti, savol-royxat, oyinlar-panel, tolov-belgi, provayder.
   ========================================================================== */

/* ---------- 1. Tokenlar ---------- */
:root{
  --kok-tim:#003266;
  --kok:#094B95;
  --kok-och:#428CDC;
  --kok-och2:#509AEA;
  --zarg:#FA4D00;
  --zarg-2:#FA5E00;
  --oltin:#FFBA00;
  --kul-och:#DDE4EC;
  --kul:#E8ECF1;
  --tim:#02101F;
  --oq:#ffffff;

  --matn: #0c1d33;
  --matn-yumshoq: #3c5876;
  --matn-teskari: #eaf1fb;
  --chiziq: rgba(2,16,31,.12);
  --chiziq-tim: rgba(255,255,255,.16);

  --shrift: 'Roboto', system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --radius-karta: 15px;
  --radius-tugma: 50px;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px;

  --wrap: 1180px;

  --z-dropdown:100; --z-sticky:200; --z-overlay:900; --z-modal:1000; --z-toast:1100;

  --soya-zarg: 0 10px 30px rgba(250,65,0,.35);
  --soya-karta: 0 12px 30px rgba(2,16,31,.14);
}

/* ---------- 2. Reset / asos ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
body{
  margin:0;
  font-family:var(--shrift);
  color:var(--matn);
  background:var(--oq);
  line-height:1.6;
  font-size:16px;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,p,table,caption{margin:0}
h1,h2,h3{color:var(--kok-tim);font-weight:700;line-height:1.25}
h1{font-size:clamp(1.7rem, 3.6vw + 1rem, 2.7rem)}
h2{font-size:clamp(1.35rem, 1.6vw + 1rem, 1.9rem)}
h3{font-size:clamp(1.1rem, .8vw + 1rem, 1.35rem)}
p{max-width:70ch}
:focus-visible{outline:3px solid var(--zarg-2);outline-offset:2px}

.otish-havola{
  position:absolute;left:-999px;top:0;background:var(--kok-tim);color:var(--oq);
  padding:var(--space-2) var(--space-4);z-index:var(--z-toast);border-radius:0 0 8px 0;
}
.otish-havola:focus{left:0}

/* ---------- 3. Umumiy komponentlar ---------- */
.panel-sarlavha{
  margin:0 0 var(--space-2);
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--kok);
}

.knopka{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  border:0;border-radius:var(--radius-tugma);
  color:var(--oq);font-weight:600;text-transform:uppercase;letter-spacing:.02em;
  font-size:.95rem;padding:14px 30px;cursor:pointer;
  background:linear-gradient(0deg,var(--zarg),var(--zarg-2));
  box-shadow:var(--soya-zarg);
  transition:transform .15s ease, box-shadow .15s ease;
  min-height:44px;
}
.knopka:hover,.knopka:focus-visible{transform:translateY(-2px);box-shadow:0 14px 34px rgba(250,65,0,.45)}
.knopka-katta{font-size:1.05rem;padding:16px 36px}
.knopka-kichik{font-size:.85rem;padding:10px 20px}
.knopka-shaffof{
  background:transparent;box-shadow:none;color:var(--kok-tim);
  border:2px solid var(--kok-och);padding:10px 22px;
}
.knopka-shaffof:hover,.knopka-shaffof:focus-visible{background:var(--kok-och);color:var(--oq);transform:none;box-shadow:none}

.davom-qatori{margin:var(--space-4) 0}

/* Jadvallar */
.jadval-quti{
  overflow-x:auto;margin:var(--space-4) 0;
  border-radius:var(--radius-karta);
  border:1px solid var(--chiziq);
  -webkit-overflow-scrolling:touch;}
.jadval{width:100%;min-width:520px;border-collapse:collapse;background:var(--oq)}
.jadval-izoh{
  caption-side:top;text-align:left;padding:var(--space-3) var(--space-4);
  font-size:.85rem;font-weight:700;color:var(--kok-tim);background:var(--kul);
}
.jadval thead th{
  background:var(--kok-tim);color:var(--oq);text-align:left;
  padding:var(--space-3) var(--space-4);font-size:.9rem;font-weight:700;
}
.jadval tbody td{
  padding:var(--space-3) var(--space-4);border-top:1px solid var(--chiziq);
  font-size:.95rem;vertical-align:top;
}
.jadval tbody td:first-child{font-weight:700;color:var(--kok-tim);white-space:nowrap}
.jadval tbody tr:nth-child(even){background:var(--kul)}

@media (max-width:640px){
  .jadval, .jadval thead, .jadval tbody, .jadval tr, .jadval td{display:block}
  .jadval thead{display:none}
  .jadval-quti{min-width:0}
  .jadval{min-width:0}
  .jadval tbody tr{margin:0;border-top:1px solid var(--chiziq);padding:var(--space-3) var(--space-4)}
  .jadval tbody tr:first-child{border-top:0}
  .jadval tbody td{display:flex;gap:var(--space-3);padding:var(--space-1) 0;border:0}
  .jadval tbody td:first-child{white-space:normal;flex:0 0 46%}
  .jadval tbody td[data-jadval-yorliq]::before{
    content:attr(data-jadval-yorliq);font-weight:700;color:var(--matn-yumshoq);
  }
}

/* ---------- 4. Shapka (bosh-panel) ---------- */
.bosh-panel{
  border-bottom:1px solid var(--chiziq);
  background:var(--oq);
}
.bosh-panel-qatlam{
  max-width:var(--wrap);margin:0 auto;padding:var(--space-3) var(--space-4);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
}
.bosh-panel-belgi img{height:26px;width:auto}
.bosh-panel-menyu-tugma{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;border:0;background:transparent;cursor:pointer;
  border-radius:8px;
}
.bosh-panel-menyu-tugma span{display:block;width:22px;height:2px;background:var(--kok-tim);margin:0 auto}
.bosh-panel-nav{
  display:flex;align-items:center;gap:var(--space-6);
}
.bosh-panel-havolalar{display:flex;gap:var(--space-4)}
.bosh-panel-havolalar a{
  font-size:.9rem;font-weight:600;color:var(--matn-yumshoq);padding:var(--space-2) 0;
}
.bosh-panel-havolalar a:hover{color:var(--kok-tim)}

@media (max-width:900px){
  .bosh-panel-menyu-tugma{display:flex}
  .bosh-panel-nav{
    position:absolute;left:0;right:0;top:100%;
    background:var(--oq);border-bottom:1px solid var(--chiziq);
    flex-direction:column;align-items:stretch;gap:var(--space-4);
    padding:var(--space-4);display:none;
  }
  .bosh-panel-qatlam{position:relative}
  .bosh-panel-nav.ochiq{display:flex}
  .bosh-panel-havolalar{flex-direction:column;gap:var(--space-1)}
  .bosh-panel-havolalar a{display:block;padding:var(--space-2) 0}
  .knopka-shaffof{align-self:flex-start}
}
@media (min-width:901px){
  .bosh-panel-menyu-tugma{display:none}
}

/* ---------- 5. Daraja-panel — signatura fича (bosqich ko'rsatkichi) ---------- */
.daraja-panel{
  position:sticky;top:0;z-index:var(--z-sticky);
  background:var(--kok-tim);
  display:flex;align-items:center;gap:var(--space-4);
  padding:var(--space-2) var(--space-4);
  overflow-x:auto;
}
.daraja-sarlavha{
  color:var(--kul-och);font-size:.75rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;flex:none;
}
.daraja-royxat{display:flex;gap:var(--space-4);flex:1;min-width:0}
.daraja-band{flex:none}
.daraja-band a{
  display:flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-2);
  border-radius:999px;transition:background-color .2s ease;
}
.daraja-nuqta{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;
  background:rgba(255,255,255,.16);color:var(--kul-och);
  font-size:.75rem;font-weight:700;flex:none;
}
.daraja-nom{color:var(--kul-och);font-size:.82rem;font-weight:600;white-space:nowrap}
.daraja-chiziq{display:none}

.daraja-band.faol a{background:rgba(255,186,0,.16)}
.daraja-band.faol .daraja-nuqta{background:var(--oltin);color:var(--kok-tim)}
.daraja-band.faol .daraja-nom{color:var(--oq)}

@media (min-width:768px){
  .daraja-panel{
    position:fixed;top:50%;right:var(--space-4);
    transform:translateY(-50%);
    flex-direction:column;align-items:flex-start;gap:var(--space-3);
    padding:var(--space-4) var(--space-4) var(--space-4) var(--space-3);
    border-radius:var(--radius-karta);
    box-shadow:var(--soya-karta);
    overflow:visible;max-width:190px;
  }
  .daraja-sarlavha{padding-left:var(--space-2)}
  .daraja-royxat{flex-direction:column;gap:var(--space-3);position:relative;padding-left:var(--space-2)}
  .daraja-chiziq{
    display:block;position:absolute;left:calc(var(--space-2) + 11px);top:11px;bottom:11px;
    width:2px;background:rgba(255,255,255,.16);z-index:-1;
  }
  .daraja-nom{white-space:normal}
}

/* ---------- 6. Asosiy tana ---------- */
main{display:block}
section{padding:var(--space-12) var(--space-4)}
.kirish-qism,.umumiy-qism,.savollar-qism{max-width:var(--wrap);margin:0 auto}
.kirish-ichki{max-width:var(--wrap);margin:0 auto}

/* Kirish (hero) */
.kirish-qism{
  background:linear-gradient(180deg, var(--kul) 0%, var(--oq) 100%);
  padding-top:var(--space-16);
}
.kirish-ichki h1{margin-bottom:var(--space-4)}
.kirish-ichki p{margin-bottom:var(--space-4);color:var(--matn-yumshoq)}
.kirish-statistika{
  display:flex;flex-wrap:wrap;gap:var(--space-6);
  margin:var(--space-6) 0;padding:var(--space-4) 0;
  border-top:1px solid var(--chiziq);border-bottom:1px solid var(--chiziq);
}
.kirish-statistika li{display:flex;flex-direction:column;gap:2px}
.kirish-son{font-size:1.5rem;font-weight:700;color:var(--kok-tim);font-variant-numeric:tabular-nums}
.kirish-izoh{font-size:.82rem;color:var(--matn-yumshoq)}
.kirish-eslatma{font-size:.78rem;color:var(--matn-yumshoq);max-width:60ch}

/* Umumiy (overview, ladder oldidan) */
.umumiy-qism{padding-top:var(--space-8)}
.umumiy-qism h2{margin-bottom:var(--space-4)}

/* ---------- 7. Bosqich — uch ступень zinapoya ---------- */
.bosqich{
  padding-top:var(--space-8);padding-bottom:var(--space-8);
  border-top:1px solid var(--chiziq);
}
.bosqich-sarlavha{
  max-width:var(--wrap);margin:0 auto var(--space-6);
  display:flex;align-items:flex-start;gap:var(--space-4);
}
.bosqich-raqam{
  flex:none;
  display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;
  font-size:1.4rem;font-weight:700;color:var(--oq);
}
.bosqich-tana{max-width:var(--wrap);margin:0 auto}
.bosqich-tana p{color:var(--matn);margin-bottom:var(--space-4)}
.bosqich-tana h3{margin:var(--space-6) 0 var(--space-3)}

/* Zinapoya effekti: har keyingi bosqichda otstup va chegara o'sadi.
   Mobile-first: bazada kichik siljish (asosiy signal — chegara qalinligi),
   min-width bilan kattaroq ekranlarda siljish kuchayadi. */
.bosqich-1{
  margin-left:0;
  border-left:4px solid var(--kok-och);
  background:var(--oq);
}
.bosqich-2{
  margin-left:var(--space-2);
  border-left:8px solid var(--kok);
  background:var(--kul);
}
.bosqich-3{
  margin-left:var(--space-4);
  border-left:14px solid var(--zarg);
  background:var(--oq);
}
.bosqich-1 .bosqich-raqam{background:var(--kok-och)}
.bosqich-2 .bosqich-raqam{background:var(--kok)}
.bosqich-3 .bosqich-raqam{background:var(--zarg)}

@media (min-width:600px){
  .bosqich-2{margin-left:var(--space-4)}
  .bosqich-3{margin-left:var(--space-8)}
}
@media (min-width:768px){
  .bosqich-1{margin-left:0;padding-left:var(--space-6)}
  .bosqich-2{margin-left:var(--space-8);padding-left:var(--space-8)}
  .bosqich-3{margin-left:var(--space-16);padding-left:var(--space-12)}
}

/* To'lov qatori (bosqich-2) */
.tolov-qatori{margin:var(--space-6) 0}
.tolov-royxat{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4)}
.tolov-belgi{
  display:flex;align-items:center;justify-content:center;
  padding:var(--space-2) var(--space-3);background:var(--oq);
  border:1px solid var(--chiziq);border-radius:10px;min-height:44px;
}

/* Oyinlar panel (bosqich-3) */
.oyinlar-panel{margin:var(--space-6) 0}
.oyinlar-royxat{
  display:grid;gap:var(--space-4);
  grid-template-columns:repeat(auto-fit, minmax(min(160px,100%), 1fr));
  margin-bottom:var(--space-6);
}
.oyin-korinish{
  position:relative;overflow:hidden;border-radius:var(--radius-karta);
  aspect-ratio:3/4;background:var(--kok-tim);
}
.oyin-korinish img{width:100%;height:100%;object-fit:cover}
.oyin-qoplama{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(2,16,31,.55);opacity:0;transition:opacity .2s ease;
}
.oyin-korinish:hover .oyin-qoplama,
.oyin-korinish:focus-within .oyin-qoplama,
.oyin-korinish.faol .oyin-qoplama{opacity:1}
.oyin-tugma{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 22px;border-radius:var(--radius-tugma);
  background:linear-gradient(0deg,var(--zarg),var(--zarg-2));
  color:var(--oq);font-weight:700;text-transform:uppercase;font-size:.85rem;
  box-shadow:var(--soya-zarg);
}
.provayder-royxat{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-6)}
.provayder{
  display:flex;align-items:center;justify-content:center;
  padding:var(--space-2) var(--space-3);background:var(--oq);
  border:1px solid var(--chiziq);border-radius:10px;min-height:48px;
}

/* ---------- 8. Savollar (FAQ) ---------- */
.savollar-qism{padding-top:var(--space-8)}
.savollar-qism h2{margin-bottom:var(--space-6)}
.savol-royxat{display:flex;flex-direction:column;gap:var(--space-3)}
.savol{
  border:1px solid var(--chiziq);border-radius:var(--radius-karta);
  background:var(--oq);padding:0;overflow:hidden;
}
.savol-sarlavha{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  padding:var(--space-4) var(--space-6);cursor:pointer;list-style:none;
}
.savol-sarlavha::-webkit-details-marker{display:none}
.savol-sarlavha h3{font-size:1.05rem;color:var(--kok-tim)}
.savol-belgi{
  flex:none;width:12px;height:12px;border-right:2px solid var(--kok);border-bottom:2px solid var(--kok);
  transform:rotate(45deg);transition:transform .2s ease;
}
.savol[open] .savol-belgi{transform:rotate(225deg)}
.savol-javob{padding:0 var(--space-6) var(--space-4)}
.savol-javob p{color:var(--matn-yumshoq);margin:0}

/* ---------- 9. Footer (oyoq) ---------- */
.oyoq{background:var(--kok-tim);color:var(--kul-och);padding:var(--space-12) var(--space-4) var(--space-8)}
.oyoq-ichki{
  max-width:var(--wrap);margin:0 auto;
  display:grid;gap:var(--space-8);
  grid-template-columns:repeat(auto-fit, minmax(min(220px,100%), 1fr));
}
.oyoq-belgi img{height:22px;width:auto;filter:brightness(0) invert(1)}
.oyoq-yosh{margin-top:var(--space-3);font-size:.85rem;color:var(--kul-och)}
.oyoq-nav ul{display:flex;flex-direction:column;gap:var(--space-2)}
.oyoq-nav a{font-size:.9rem;color:var(--kul-och)}
.oyoq-nav a:hover{color:var(--oq)}
.oyoq-nav .panel-sarlavha{color:var(--kok-och2)}
.oyoq-huquqiy{grid-column:1/-1;border-top:1px solid var(--chiziq-tim);padding-top:var(--space-6)}
.oyoq-huquqiy p{font-size:.78rem;color:rgba(234,241,251,.72);max-width:90ch;margin-bottom:var(--space-2)}

/* ---------- 10. Cookie banner va tepaga tugmasi ---------- */
.cookie-banner{
  position:fixed;left:var(--space-4);right:var(--space-4);bottom:var(--space-4);
  z-index:var(--z-toast);
  background:var(--kok-tim);color:var(--kul-och);
  border-radius:var(--radius-karta);
  padding:var(--space-4) var(--space-6);
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4);
  box-shadow:var(--soya-karta);
  max-width:560px;margin:0 auto;
}
.cookie-banner[hidden]{display:none}
.cookie-banner p{margin:0;font-size:.85rem;flex:1;min-width:200px}

.tepaga-tugma{
  position:fixed;left:var(--space-4);bottom:var(--space-4);
  z-index:var(--z-sticky);
  width:46px;height:46px;border-radius:50%;border:0;
  background:var(--kok-tim);color:var(--oq);font-size:1.1rem;cursor:pointer;
  box-shadow:var(--soya-karta);
  display:flex;align-items:center;justify-content:center;
}
.tepaga-tugma[hidden]{display:none}
body.cookie-korinadi .tepaga-tugma{bottom:calc(var(--space-4) + 76px)}

@media (max-width:480px){
  .cookie-banner{flex-direction:column;align-items:stretch;text-align:center}
}