/* ==========================================================================
   Mostbet UZ — titli.uz — "ustun.css"
   Raskladka: nazorat nuqtalari ustuni (chap tomonda nuqta-chiziq, o'ngda matn)
   Ranglar — rasmiy Mostbet tokenlari. Shrift — Roboto (tizim stekida).
   ========================================================================== */

:root{
  /* --- brend ranglari (rasmiy tokenlar) --- */
  --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;
  --yashil:#87BC17;
  --qizil:#FA0000;

  /* --- funksional --- */
  --matn: var(--tim);
  --matn-yumshoq:#4b5a6c;
  --chegara:#CBD4DF;
  --fon: var(--oq);
  --fon-ikkinchi: var(--kul);

  /* --- shrift --- */
  --shrift: Roboto, "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;

  /* --- bo'shliq shkalasi --- */
  --b-1:4px; --b-2:8px; --b-3:12px; --b-4:16px; --b-6:24px; --b-8:32px; --b-12:48px; --b-16:64px;

  /* --- radiuslar --- */
  --radius-karta:15px;
  --radius-tugma:50px;

  /* --- z-index shkalasi --- */
  --z-baza:0; --z-yopishqoq:200; --z-menyu:300; --z-tugma:400;

  /* --- gradientlar --- */
  --grad-zarg: linear-gradient(0deg, var(--zarg), var(--zarg-2));
  --grad-kok: linear-gradient(0deg, var(--kok-och), var(--kok-och2));

  color-scheme: light;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  font-family:var(--shrift);
  color:var(--matn);
  background:var(--fon);
  line-height:1.6;
  font-size:16px;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }

h1,h2,h3{ font-weight:700; line-height:1.25; color:var(--kok-tim); margin:0 0 var(--b-4); }
h1{ font-size:clamp(1.6rem, 3.4vw + 1rem, 2.5rem); }
h2{ font-size:clamp(1.3rem, 2vw + 1rem, 1.75rem); padding-top:var(--b-3); border-top:1px solid var(--kul-och); }
h3{ font-size:clamp(1.1rem, 1.2vw + 0.9rem, 1.3rem); color:var(--kok); }

p{ margin:0 0 var(--b-4); max-width:70ch; }

a{ color:var(--kok); }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible{
  outline:3px solid var(--oltin); outline-offset:2px; border-radius:4px;
}

.saha{ max-width:1180px; margin-inline:auto; padding-inline:var(--b-4); }

.korinmas-matn{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.tezkor-havola{
  position:absolute; left:var(--b-3); top:-60px; z-index:var(--z-tugma);
  background:var(--kok-tim); color:var(--oq); padding:var(--b-2) var(--b-4);
  border-radius:var(--b-2); transition:top .2s ease;
}
.tezkor-havola:focus{ top:var(--b-3); }

/* ============================= TUGMALAR ================================ */
.bosish{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--b-2);
  border:none; cursor:pointer; text-decoration:none;
  border-radius:var(--radius-tugma);
  font-family:var(--shrift); font-weight:500; text-transform:uppercase;
  letter-spacing:.02em; font-size:16px; padding:14px 30px;
  background:var(--grad-zarg); color:var(--oq);
  box-shadow:0 10px 30px rgba(250,65,0,.35);
  transition:transform .15s ease, box-shadow .15s ease;
  white-space:nowrap;
}
.bosish:hover{ transform:translateY(-2px); box-shadow:0 14px 34px rgba(250,65,0,.45); color:var(--oq); }
.bosish-ikkinchi{ background:var(--grad-kok); box-shadow:0 10px 26px rgba(9,75,149,.3); }
.bosish-ikkinchi:hover{ box-shadow:0 14px 30px rgba(9,75,149,.4); }
.bosish-kichik{ padding:9px 20px; font-size:13px; }
.bosish-oqim{ margin:0 0 var(--b-4); align-self:flex-start; }

/* ============================== SARLAVHALAR (vidjet) =================== */
.panel-sarlavha{
  font-weight:700; font-size:1.05rem; color:var(--kok-tim); margin-bottom:var(--b-2);
}
.panel-tavsif{ color:var(--matn-yumshoq); font-size:.92rem; max-width:60ch; margin-bottom:var(--b-4); }

/* ================================ SHAPKA ================================ */
.tepa-panel{
  position:sticky; top:0; z-index:var(--z-yopishqoq);
  background:var(--kok-tim); color:var(--oq);
  box-shadow:0 2px 12px rgba(2,16,31,.25);
}
.tepa-ustun{
  display:flex; align-items:center; gap:var(--b-4); padding-block:var(--b-2);
  flex-wrap:wrap;
}
.brend-belgi{ display:flex; align-items:center; gap:var(--b-2); text-decoration:none; color:var(--oq); }
.brend-belgi img{ filter:none; }

.asosiy-yolak{ margin-left:auto; }
.royxat-tugmasi{
  display:inline-flex; flex-direction:column; gap:5px; width:34px; height:34px;
  align-items:center; justify-content:center;
  background:transparent; border:1px solid rgba(255,255,255,.4); border-radius:8px; cursor:pointer;
}
.tugma-chiziq, .royxat-tugmasi::before, .royxat-tugmasi::after{
  content:""; display:block; width:18px; height:2px; background:var(--oq); border-radius:2px;
}
.yolak-royxat{
  list-style:none; margin:0; padding:0;
  display:none;
  flex-direction:column; gap:var(--b-1);
  width:100%;
}
.yolak-royxat.ochiq{ display:flex; }
.yolak-royxat a{
  display:block; color:var(--oq); text-decoration:none; padding:var(--b-2) var(--b-2);
  border-radius:8px; font-size:.95rem;
}
.yolak-royxat a:hover, .yolak-royxat a:focus-visible{ background:rgba(255,255,255,.12); }

@media (min-width:56em){
  .royxat-tugmasi{ display:none; }
  .yolak-royxat{ display:flex !important; flex-direction:row; gap:var(--b-4); width:auto; }
  .yolak-royxat a{ padding:var(--b-1) 0; }
}

/* ================================ HERO =================================== */
.bosh-sahna{
  background:linear-gradient(180deg, var(--kok-tim) 0%, #04255c 60%, var(--fon) 60%);
  padding-block:var(--b-12) var(--b-8);
  color:var(--oq);
}
.bosh-ustun{ display:flex; flex-direction:column; gap:var(--b-4); }
.bosh-sahna h1{ color:var(--oq); max-width:26ch; }
.bosh-sahna p{ color:rgba(255,255,255,.92); }

.belgi-qator{
  list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--b-2);
}
.mini-belgi{
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25);
  color:var(--oq); font-size:.82rem; font-weight:600; padding:6px 14px; border-radius:var(--radius-tugma);
}

.bosh-tugmalar{ display:flex; flex-wrap:wrap; gap:var(--b-3); margin-block:var(--b-2); }
.bosh-tugmalar .bosish-ikkinchi{ color:var(--oq); }

/* umumiy tavsif jadvali darhol birinchi abzatsdan keyin */
.jadval-tasma{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  background:var(--fon); border-radius:var(--radius-karta); border:1px solid var(--chegara);
  box-shadow:0 18px 40px rgba(2,16,31,.12); color:var(--matn);}
.jadval-tasma table{
  width:100%; min-width:520px; border-collapse:collapse; font-size:.94rem;
}
.jadval-tasma th, .jadval-tasma td{
  text-align:left; padding:var(--b-3) var(--b-4); border-bottom:1px solid var(--kul-och);
}
.jadval-tasma th{ background:var(--kok-tim); color:var(--oq); font-weight:700; }
.jadval-tasma tr:nth-child(even) td{ background:var(--kul); }
.jadval-tasma tr:last-child td{ border-bottom:none; }

/* ========================= TEKSHIRUV VARAG'I (signature) ================= */
.tekshiruv-varagi{
  padding-block:var(--b-8);
  background:var(--fon-ikkinchi);
  border-top:1px solid var(--chegara); border-bottom:1px solid var(--chegara);
}
.tekshiruv-tanasi{
  display:grid; gap:var(--b-6);
  grid-template-columns:1fr;
  background:var(--fon); border-radius:var(--radius-karta); border:1px solid var(--chegara);
  padding:var(--b-6); box-shadow:0 14px 34px rgba(2,16,31,.08);
}
@media (min-width:48em){
  .tekshiruv-tanasi{ grid-template-columns:150px 1fr; align-items:start; }
}
.tekshiruv-korsatkich{ display:flex; flex-direction:column; align-items:center; gap:var(--b-2); }
.korsatkich-halqa{ transform:rotate(-90deg); }
.halqa-fon, .halqa-progress{
  fill:none; stroke-width:6; cx:32; cy:32; r:27;
}
.halqa-fon{ stroke:var(--kul-och); }
.halqa-progress{
  stroke:var(--zarg);
  stroke-linecap:round;
  stroke-dasharray:169.6;
  stroke-dashoffset:169.6;
  transition:stroke-dashoffset .3s ease;
}
@media (prefers-reduced-motion: reduce){ .halqa-progress{ transition:none; } }
.korsatkich-matn{ font-weight:700; font-size:1.1rem; color:var(--kok-tim); font-variant-numeric:tabular-nums; }

.tekshiruv-royxat{ display:flex; flex-direction:column; gap:var(--b-2); }
.guruh-nomi{
  font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--kok); margin-top:var(--b-3);
}
.guruh-nomi:first-child{ margin-top:0; }
.tekshiruv-band{ display:flex; align-items:flex-start; gap:var(--b-2); }
.tekshiruv-katak{ width:22px; height:22px; margin-top:2px; accent-color:var(--zarg); flex-shrink:0; cursor:pointer; }
.tekshiruv-band label{ cursor:pointer; }
.tekshiruv-katak:checked ~ label{ color:var(--matn-yumshoq); text-decoration:line-through; }

.tozalash-tugmasi{
  margin-top:var(--b-4); align-self:flex-start;
  background:transparent; border:2px solid var(--chegara); color:var(--matn-yumshoq);
  border-radius:var(--radius-tugma); padding:8px 20px; font-family:var(--shrift);
  font-weight:600; font-size:.85rem; cursor:pointer;
}
.tozalash-tugmasi:hover{ border-color:var(--zarg); color:var(--zarg); }

/* ===================== NAZORAT USTUNI (asosiy raskladka) ================= */
.nazorat-ustuni{
  max-width:1180px; margin-inline:auto; padding:var(--b-8) var(--b-4) var(--b-4);
  display:flex; flex-direction:column;
}
.bosqich-nazorat{
  display:grid;
  grid-template-columns:28px 1fr;
  column-gap:var(--b-3);
  padding-bottom:var(--b-8);
}
.nuqta-ustun{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:var(--b-2);
}
.nuqta-belgi{
  width:14px; height:14px; border-radius:50%;
  background:var(--fon); border:3px solid var(--zarg);
  box-shadow:0 0 0 4px var(--fon);
  position:relative; z-index:1;
  flex-shrink:0;
}
.nuqta-yorliq{
  /* mobil: markerlar ixcham — yorliq faqat skrin-rider uchun, ko'zga ko'rinmaydi */
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
/* nuqta-chiziq — punktir bilan bog'langan chiziq, nuqtadan keyingi bo'shliqni to'ldiradi */
.nuqta-belgi::after{
  content:"";
  position:absolute;
  top:100%; left:50%;
  width:0;
  height:calc(100% + var(--b-8) - 14px);
  border-left:2px dashed var(--kul-och);
  transform:translateX(-50%);
}
.oxirgi-qator .nuqta-belgi::after{ display:none; }

.bosqich-matn{ min-width:0; }
.bosqich-matn h2{ margin-top:0; }
.bosqich-matn h3{ margin-top:var(--b-4); }

@media (min-width:30em){
  .bosqich-nazorat{ grid-template-columns:40px 1fr; column-gap:var(--b-4); }
  .nuqta-belgi{ width:18px; height:18px; }
  .nuqta-yorliq{ font-size:.74rem; }
}
@media (min-width:48em){
  .bosqich-nazorat{ grid-template-columns:150px 1fr; column-gap:var(--b-6); }
  .nuqta-ustun{ align-items:flex-end; padding-right:var(--b-3); }
  .nuqta-yorliq{
    position:static; width:auto; height:auto; padding:0; margin:0; overflow:visible; clip:auto;
    text-align:right; font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
    color:var(--kok); white-space:nowrap;
  }
  .nuqta-belgi::after{ left:auto; right:9px; transform:none; }
}

/* ============================ TO'LOV PANELI =============================== */
.tolov-panel{
  background:var(--fon-ikkinchi); border-radius:var(--radius-karta); border:1px solid var(--chegara);
  padding:var(--b-4); margin-block:var(--b-4);
}
.tolov-royxat{
  list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--b-3); align-items:center;
}
.tolov-royxat li{
  background:var(--fon); border:1px solid var(--chegara); border-radius:10px;
  padding:8px 12px; display:flex; align-items:center; justify-content:center; min-width:64px; height:44px;
}

/* ============================= O'YIN RO'YXATI ============================= */
.oyin-royxat{ margin-block:var(--b-4); }
.oyin-tasma{
  list-style:none; margin:0 0 var(--b-4); padding:0;
  display:grid; gap:var(--b-3);
  grid-template-columns:repeat(auto-fit, minmax(min(140px,100%), 1fr));
}
.oyin-karta{
  position:relative; border-radius:var(--radius-karta); overflow:hidden;
  background:var(--kok-tim); aspect-ratio:290/360;
}
.oyin-karta img{ width:100%; height:100%; object-fit:cover; }
.oyin-play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:2rem; color:var(--oq); background:rgba(2,16,31,.45);
  opacity:0; transition:opacity .2s ease;
}
.oyin-karta:hover .oyin-play, .oyin-karta:focus-within .oyin-play{ opacity:1; }
.oyin-nomi{
  position:absolute; left:0; right:0; bottom:0; padding:8px 10px;
  background:linear-gradient(0deg, rgba(2,16,31,.85), transparent);
  color:var(--oq); font-size:.8rem; font-weight:600;
}
@media (prefers-reduced-motion: reduce){ .oyin-play{ transition:none; } }

.taminot-qatori{
  list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--b-3); align-items:center;
}
.taminot-belgi{
  background:var(--fon); border:1px solid var(--chegara); border-radius:10px;
  padding:8px 14px; display:flex; align-items:center; justify-content:center; opacity:.85;
}

/* =================================== FAQ =================================== */
.savol-qism{ padding-block:var(--b-8); background:var(--fon-ikkinchi); }
.savol-toplam{ display:flex; flex-direction:column; gap:var(--b-3); margin-top:var(--b-4); }
.savol-birligi{
  background:var(--fon); border:1px solid var(--chegara); border-radius:var(--radius-karta);
  padding:var(--b-3) var(--b-4); overflow:hidden;
}
.savol-sarlavha{
  cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between;
  gap:var(--b-3); font-weight:700;
}
.savol-sarlavha::-webkit-details-marker{ display:none; }
.savol-sarlavha h3{ margin:0; font-size:1.02rem; color:var(--matn); }
.savol-strelka{
  flex-shrink:0; width:12px; height:12px; border-right:2px solid var(--zarg); border-bottom:2px solid var(--zarg);
  transform:rotate(45deg); transition:transform .2s ease;
}
.savol-birligi[open] .savol-strelka{ transform:rotate(-135deg); }
.savol-javob{ padding-top:var(--b-3); color:var(--matn-yumshoq); }
.savol-javob p{ margin:0; }
@media (prefers-reduced-motion: reduce){ .savol-strelka{ transition:none; } }

/* ================================= FOOTER =================================== */
.yakun-qism{ background:var(--kok-tim); color:rgba(255,255,255,.85); padding-block:var(--b-8); }
.yakun-ustun{ display:flex; flex-direction:column; gap:var(--b-3); align-items:flex-start; }
.yakun-qism .brend-belgi{ font-weight:700; }
.yakun-yosh{ font-weight:700; color:var(--oltin); margin:0; }
.yakun-matn{ font-size:.86rem; max-width:75ch; margin:0; color:rgba(255,255,255,.75); }
.yakun-huquq{ font-size:.8rem; margin:0; color:rgba(255,255,255,.6); }

/* =============================== NOGORA TUGMASI ============================== */
.tepaga-tugma{
  position:fixed; right:var(--b-4); bottom:var(--b-4); z-index:var(--z-tugma);
  width:46px; height:46px; border-radius:50%; border:none; cursor:pointer;
  background:var(--grad-zarg); color:var(--oq); font-size:1.2rem;
  box-shadow:0 10px 24px rgba(250,65,0,.4);
  opacity:0; pointer-events:none; transform:translateY(10px);
  transition:opacity .2s ease, transform .2s ease;
}
.tepaga-tugma.korinadi{ opacity:1; pointer-events:auto; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){ .tepaga-tugma{ transition:none; } }

/* =============================== KENG EKRAN ================================= */
@media (min-width:64em){
  .bosh-ustun{ max-width:44ch; }
}