/* ==========================================================================
   DG CAMP — asosiy uslublar (style.css)
   ========================================================================== */

/* DIQQAT: ranglar, radius va soyalar endi theme.css da (dizayn tizimi).
   Ular bu yerda QAYTA ta'riflanMAYDI — CSS'da keyingi ta'rif g'olib
   bo'lgani uchun, bu yerda takrorlansa theme.css butunlay bekor bo'lib
   qolardi. Quyida faqat shu faylga XOS qiymatlar qoladi. */
:root {
  /* O'zbekiston bayrog'i ranglari. DIQQAT: bular dizayn tizimiga KIRMAYDI
     va interfeys elementlarida ishlatilmaydi (ilgari xabar oynasining
     ikonkasi shulardan olinardi — endi u tizimning success/info
     ranglaridan foydalanadi). Faqat bayroq tasviri kerak bo'lsa qoladi. */
  --color-flag-blue: #0099B5;
  --color-flag-green: #1EB53A;
  --color-flag-red: #CE1126;
  /* Poster (background7) foniining o'z ko'k ranglari — surat qismlari
     orasidagi bo'shliqni aynan shu ranglar to'ldiradi, shu bilan chok
     ko'rinmaydi. Rasmning tepa/o'rta/pastki qatorlaridan o'lchab olingan. */
  --bg-blue-top: #001A73;
  --bg-blue-mid: #002698;
  --bg-blue-bottom: #002590;
  font-size: 16px;
}

/* --------------------------------------------------------------------------
   SARLAVHA SHRIFTI — Montserrat (o'z serverimizdan beriladi)
   --------------------------------------------------------------------------
   Poster va logotipdagi yozuvlar geometrik grotesk — 'Segoe UI' esa unga
   umuman o'xshamaydi, shu sababli sarlavhalar posterdan "ajralib" turardi.
   Montserrat aynan shu oiladan va O'zbek lotin harflarini (o', g', ' ) to'liq
   qoplaydi.

   NEGA CDN EMAS, O'Z FAYLIMIZ: Google Fonts'ga bog'lanish (a) sayt ochilishini
   uchinchi tomon serveriga bog'lab qo'yadi, (b) Caddy'dagi qat'iy CSP'ni
   yumshatishni talab qiladi, (c) ichki tarmoqda/internetsiz sayt "yalang'och"
   ochilardi. Fayl atigi 38 KB (latin) — o'zimiz berganimiz har jihatdan arzon.

   Bitta fayl barcha qalinliklarni qoplaydi (o'zgaruvchan shrift), shu sababli
   font-weight oralig'i 100-900 deb ko'rsatilgan.
   font-display: swap — shrift yuklanguncha matn KO'RINIB turadi (bo'sh joy
   emas), keyin almashadi. */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/montserrat-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Montserrat faqat SARLAVHA va tugmalarga beriladi, butun matnga emas:
   uzun matnlar tizim shriftida (Segoe UI/Inter) tezroq va odatiyroq
   o'qiladi, geometrik grotesk esa aynan qisqa, yirik yozuvlarda yaxshi
   chiqadi — poster bilan bir tilda gapiradi. */
h1, h2, h3,
.btn,
.hero-meta__chip,
.countdown-card__numbers {
  font-family: 'Montserrat', 'Segoe UI', 'Inter', Roboto, Arial, sans-serif;
}
body {
  margin: 0;
  font-family: 'Segoe UI', 'Inter', Roboto, Arial, sans-serif;
  color: var(--color-ink);
  background: var(--bg-blue-top);
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative; /* .page-bg shu elementga nisbatan cho'ziladi */
}

/* --------------------------------------------------------------------------
   SAHIFA FONI (background7 posteri) — bitta uzluksiz surat butun skroll
   bo'yi cho'ziladi: surat TEPASI sahifa tepasi bilan, PASTI sahifa pasti
   bilan, yon tomonlari esa to'liq kenglik bilan tutashadi. Fixed EMAS —
   kontent bilan birga skroll bo'ladi.

   Nega bitta rasmni `100% 100%` qilib cho'zmadim: poster portret (862x1824),
   sahifa esa telefonda ~390x3700 (juda cho'ziq) va kompyuterda ~1440x2000
   (aksincha, yassi) bo'ladi. Bitta rasmni shunday cho'zsa "35" logotipi va
   sarlavha telefonda ~5 barobar tik cho'zilib butunlay buzilardi. Shu sababli
   poster 3 qatlamga bo'lingan: tepadagi SAN'AT qismi ("35" + sarlavha +
   tepa-o'ngdagi naqsh) o'z nisbatini saqlab .hero-banner sifatida oqimda turadi,
   pastdagi NAQSH qatlami sahifa pastiga yopishtiriladi, ular orasidagi
   bo'shliqni esa posterning o'z ko'k rangidan olingan gradient to'ldiradi.
   Ranglar deyarli bir xil bo'lgani uchun (#018DFE..#0993FD) chok ko'rinmaydi,
   ustiga qo'shimcha: har ikkala surat bo'lagining tutashadigan chetlari alfa
   bilan asta so'ndirilgan (WebP + alpha), shu bilan qattiq chegara chizig'i
   umuman paydo bo'lmaydi.
   -------------------------------------------------------------------------- */
.page-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    url('/img/backgrounds/page-bottom.webp'),
    linear-gradient(180deg, var(--bg-blue-top) 0%, var(--bg-blue-mid) 45%, var(--bg-blue-bottom) 100%);
  background-position: bottom center, top center;
  background-size: 100% auto, 100% 100%;
  background-repeat: no-repeat, no-repeat;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
.container {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --------------------------------------------------------------------------
   Posterning tepadagi SAN'AT qismi ("35" + sarlavha + tepa-o'ngdagi naqsh).
   FIXED emas — kontent bilan birga skroll bo'ladi. To'liq kenglikda,
   chekka-chekkagacha, va MUHIM: `height:auto` + kesish YO'Q — shu bilan
   rasmning yon tomonlari sahifa chetlari bilan aynan tutashadi va nisbati
   buzilmaydi. Pastida qolgan hamma joyni .page-bg qatlami davom ettiradi.
   -------------------------------------------------------------------------- */
/* pointer-events:none — banner sof dekorativ. MUHIM: u `position:relative`
   bo'lgani uchun statik elementlardan USTUN turadi, keng ekranda esa
   .register-cta-wrap manfiy margin bilan uning tagiga suriladi
   (§ @media 900px). Suratning pastki qismi alfa bilan so'ndirilgan —
   ko'zga ko'rinmaydi, lekin QUTISI o'sha yerda qoladi va tugmaning
   yuqori yarmidagi bosishlarni o'ziga olib qolardi (tugma faqat pastdan
   bosilardi). Endi bosish suratdan "o'tib" ketadi. */
.hero-media { position: relative; pointer-events: none; }
.hero-pic { display: block; }
.hero-banner {
  width: 100%;
  height: auto;
  display: block;
}
/* --------------------------------------------------------------------------
   SANA / FORMAT belgilari (poster bilan tugma orasida)
   --------------------------------------------------------------------------
   TEPADAGI SARLAVHA OLIB TASHLANDI. Nom posterning o'zida yirik yozilgan;
   uni tepada matn bilan takrorlash ikki yozuvni bir-biri bilan
   bellashtirardi va sahifa boshini shovqinga to'ldirardi. Endi tepada
   faqat san'at — poster — turadi, uning ostida esa faktlar va harakat:
       POSTER -> [sana] [format] -> [Ro'yxatdan o'tish]
   Nom hujjatda .sr-only <h1> sifatida saqlanadi (§ index.html): ko'zdan
   yashirin, qidiruv tizimi va ekran o'quvchilar uchun ochiq.

   Ranglar: oq matn, siyan urg'u (--aqua-400 — posterdagi "35" atrofidagi
   yorug'lik halqasining rangi), shisha karta esa sahifada allaqachon bor
   (§ .countdown-card). Yangi rang ham, yangi uslub tili ham kiritilmadi.
   -------------------------------------------------------------------------- */
/* SANA / FORMAT belgilari — tugmaning ustida, bitta qatorda. */
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 0 14px;
}
.hero-meta__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: clamp(0.78rem, 2vw, 0.88rem);
  font-weight: 700;
  color: #fff;
  /* Shisha karta — sahifadagi countdown bilan bitta til. */
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: var(--shadow-glass);
  white-space: nowrap;
}
.hero-meta__chip svg {
  width: 15px;
  height: 15px;
  flex: none;
  fill: none;
  stroke: var(--aqua-300);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Sana — ikkitasining ichida MUHIMROG'I, shu sababli chegarasi siyan va
   yengil nur beriladi. Koral ishlatilmaydi: u faqat tugmaniki. */
.hero-meta__chip--asosiy {
  border-color: rgba(17, 221, 253, 0.55);
  box-shadow: 0 0 0 1px rgba(17, 221, 253, 0.12), 0 6px 18px rgba(3, 22, 45, 0.28);
}


/* --------------------------------------------------------------------------
   PAST BO'YLI NOUTBUK EKRANLARI (balandligi <= 800px)
   --------------------------------------------------------------------------
   MUAMMO (sinovda topildi): 1366x657 va 1280x600 kabi odatiy noutbuk
   ekranlarida poster butun ekranni egallab, "Ro'yxatdan o'tish" tugmasi
   PASTGA, ko'rinmas joyga tushib qolardi — 1280x600 da hatto sana
   belgilari ham ko'rinmasdi. Odam saytga kirib, birinchi ekranda nima
   qilish kerakligini umuman ko'rmasdi.

   Yechim: bunday ekranlarda poster balandligi bo'yicha cheklanadi
   (kenglik bo'yicha emas), shunda tugma birinchi ekranga sig'adi.
   Nisbati saqlanadi — `width: auto` shu uchun.
   Kenglikka emas, BALANDLIKKA qarab ishlaydi: 1920x1080 li katta
   monitorda hech narsa o'zgarmaydi.
   -------------------------------------------------------------------------- */
@media (min-width: 900px) and (max-height: 800px) {
  .hero-banner {
    max-height: 62vh;
    width: auto;
    max-width: 100%;
  }
  .hero-pic { margin-top: -18px; }
  .register-cta-wrap { padding-top: 10px; }
}
@media (min-width: 900px) and (max-height: 650px) {
  /* Juda past ekran (masalan 1280x600): poster yana kichrayadi va
     bo'shliqlar qisqaradi. */
  .hero-banner { max-height: 54vh; }
  .hero-meta { margin-bottom: 10px; }
  .register-cta { padding: 13px 20px; }
}

/* Keng ekranda suratni to'liq kenglikka yoymaymiz — 887px'lik poster
   1440px'ga cho'zilganda "35" haddan tashqari yiriklashib, ro'yxatdan
   o'tish tugmasini ancha pastga surib yuborardi. Markazda, tor holda
   turadi; yon tomondagi ko'k — .page-bg foni bilan bir xil rang, surat
   cheti esa alfa bilan so'ndirilgan, shu sabab chegara sezilmaydi. */
@media (min-width: 900px) {
  .hero-banner { max-width: 860px; margin: 0 auto; }
}

/* Logotip — sahifa bo'ylab QOTIB (fixed) turadi: tepa-chapda, skroll
   paytida kontent bilan ko'tarilmaydi, doim ko'rinib turadi. To'q rangli
   logo jonli ko'k fon ustida o'qilishi uchun oq halo (drop-shadow) beriladi.
   z-index modaldan (100) past (40) — modal ochilganda uning tagida qoladi.
   pointer-events:none — sof dekorativ, ostidagi elementlarni bosishga
   xalaqit bermaydi. */
.site-logo {
  position: fixed;
  top: 14px;
  left: 18px;
  height: 40px;
  width: auto;
  z-index: 40;
  pointer-events: none;
  filter:
    drop-shadow(0 0 3px rgba(255,255,255,0.95))
    drop-shadow(0 0 3px rgba(255,255,255,0.95))
    drop-shadow(0 2px 6px rgba(15,18,32,0.25));
}
/* Telefonda logo kichrayadi — keng ekrandagi 40px kichik ekranда juda
   yirik ko'rinardi. Ikki bosqich: o'rtacha telefon (≤640) va tor (≤480). */
@media (max-width: 640px) {
  .site-logo { height: 30px; top: 12px; left: 14px; }
}
@media (max-width: 480px) {
  .site-logo { height: 26px; top: 10px; left: 12px; }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  border: none;
  font-weight: 700;
  font-size: 0.95rem;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn:active { transform: scale(0.97); }
.btn-primary {
  /* To'q granat gradient (§ theme.css --color-cta izohi): tepada #C02648,
     pastda #8E1730 — muhr/baxmal effekti. Matn oq: eng ochiq nuqtada ham
     5.81:1, asosiy qismida 7.25:1. Tepa qirradagi ingichka oq chiziq
     (inset highlight) tugmani "ko'tarilgan" qilib ko'rsatadi. */
  background: linear-gradient(180deg, var(--color-cta-light) 0%, var(--color-cta) 55%, var(--color-cta-dark) 100%);
  color: var(--color-cta-ink);
  box-shadow: var(--shadow-glow-cta);
}
.btn-primary:hover {
  background: linear-gradient(180deg, #D02D50 0%, #B01E3E 55%, #9E1B32 100%);
  box-shadow: 0 14px 34px rgba(142,23,48,0.62), inset 0 1px 0 rgba(255,255,255,0.3);
}
.btn-ghost {
  background: rgba(255,255,255,0.5);
  color: var(--color-ink);
  border: 1.5px solid rgba(15,18,32,0.18);
}
.btn-ghost:hover { background: rgba(255,255,255,0.85); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-block { width: 100%; }

/* --------------------------------------------------------------------------
   Ro'yxatdan o'tish tugmasi — banner ostida, alohida (karta ichida emas),
   "uzunroq"/keng ko'rinishda.
   -------------------------------------------------------------------------- */
/* z-index — tugma banner suratidan ustun turishi uchun (§ .hero-media). */
.register-cta-wrap { padding: 22px 0 0; position: relative; z-index: 1; }
.register-cta-wrap .container { max-width: 520px; }
.register-cta { padding: 17px 22px; font-size: 1.05rem; }
/* Kompyuterda posterning tepasidagi bo'sh joy 1440px ekranda haddan
   tashqari kattayib ketadi (surat 1.6 barobar kattaradi, u bilan birga
   bo'shliq ham). Shu sababli keng ekranda banner biroz tepaga suriladi,
   tugma esa undan ham ko'proq — poster bilan tugma orasidagi bo'shliq
   ham qisqaradi. Telefonda tegilmaydi: u yerda surat 1:1 ko'rsatiladi
   va bo'shliq allaqachon me'yorida. */
@media (min-width: 900px) {
  /* Manfiy margin SURATGA beriladi, blokka emas: blokka berilganda endi
     uning tepasida turgan sarlavha ham yuqoriga surilib, ekran chetidan
     chiqib ketardi (yozuvning yuqori qismi qirqilardi). */
  .hero-pic { margin-top: -46px; }
  .register-cta-wrap { padding-top: 0; margin-top: -34px; }
}

/* --------------------------------------------------------------------------
   Bo'limlar — endi tepadagi surat fixed emas (oddiy skroll bo'ladigan
   banner), shu sabab bu bo'limlar ortida .page-bg qatlami (poster foni)
   ko'rinadi — bo'limlarning o'z foni YO'Q, to'liq shaffof.
   -------------------------------------------------------------------------- */
.section {
  position: relative;
  padding: 64px 0;
}
.section-head {
  /* Sodda: faqat markazlashgan, kattaroq sarlavha — panel/karta emas. */
  max-width: 640px;
  margin: 0 auto 36px;
  text-align: center;
}
.section-head h2 {
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 800;
  margin: 0;
  /* Endi orqada doim ko'k fon/surat bor (§ body) — oq matn + to'q soya
     har qanday holatda ham o'qiladigan qiladi. */
  color: #fff;
  text-shadow: 0 2px 8px rgba(6,58,108,0.38), 0 1px 2px rgba(6,58,108,0.28);
}

/* --------------------------------------------------------------------------
   "Deyarli ko'rinmas oyna" kartalari — Yo'nalishlar va Yangiliklar bo'limi
   BIR XIL shaffoflikda: fon deyarli sezilmaydi, atrofida yupqa yorug'lik
   halqasi (glow) aylanib turadi, shu orqali karta chegarasi "bilinadi".
   -------------------------------------------------------------------------- */
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes rotate-glow {
  to { --angle: 360deg; }
}
.glass-card {
  position: relative;
  isolation: isolate;
  /* Fon endi ShAFFOF (haqiqiy "shisha") — orqadagi doimiy ko'k fon/surat
     (§ body) ustida suzib turadi, atrofida yorug' oq halo (glow) bilan
     chegarasi "bilinadi". */
  background: rgba(255, 255, 255, 0.32);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 16px;
  /* Yupqa + yumshoq soyaning qatlamlanishi (elevation), tepa qirrada
     shishaga tushgan yorug'lik chizig'i (inset highlight) va atrofida
     yumshoq oq porlash (glow) — "bo'lim orqasidagi band suratdan"
     ajralib chiqishi uchun. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.3),
    0 0 22px 2px rgba(255, 255, 255, 0.25),
    0 14px 32px rgba(15, 18, 32, 0.22);
  transition: transform .18s ease, box-shadow .18s ease, background .2s ease;
}
.glass-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.4px;
  background: conic-gradient(from var(--angle), transparent 0 66%, var(--glow, var(--color-primary)) 84%, transparent 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.85;
  z-index: -1;
  pointer-events: none;
  /* Doimiy (infinite) emas — faqat hover/focus paytida aylanadi. Ko'p
     (7-10 ta) karta bir vaqtda to'xtovsiz conic-gradient animatsiyasini
     aylantirishi zaif/integratsiyalashgan videokartalarda skrollni
     "qotirib" qo'yayotgan edi (asosiy sabab shu bo'lgan). */
  animation: rotate-glow 2.2s linear infinite;
  animation-play-state: paused;
}
.glass-card:hover,
.glass-card:focus-visible {
  background: rgba(255, 255, 255, 0.42);
  transform: translateY(-5px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.4),
    0 0 34px 4px rgba(255, 255, 255, 0.4),
    0 20px 40px rgba(15, 18, 32, 0.25);
}
.glass-card:hover::before,
.glass-card:focus-visible::before {
  animation-play-state: running;
}
@media (prefers-reduced-motion: reduce) {
  .glass-card::before { animation: none; }
}

/* --------------------------------------------------------------------------
   404 — sahifa topilmadi (public sayt, § web/404.html)
   -------------------------------------------------------------------------- */
.error-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.error-card {
  width: 100%;
  max-width: 480px;
  text-align: center;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  padding: 44px 34px;
  box-shadow: var(--shadow-lg);
}
.error-card img { height: 48px; width: auto; margin: 0 auto 22px; }
.error-card .error-code {
  font-size: 5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--color-primary);
  text-shadow: 0 4px 18px rgba(238,75,98,0.35);
  margin-bottom: 6px;
}
.error-card h1 { font-size: 1.3rem; margin: 0 0 10px; }
.error-card p {
  color: var(--color-ink-soft);
  font-size: 0.95rem;
  margin: 0 0 28px;
  text-shadow: 0 0 10px rgba(255,255,255,0.85), 0 1px 1px rgba(255,255,255,0.6);
}
.error-card .error-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* Ko'rinish maydoniga kirganda navbat bilan "yorishib" chiqadigan animatsiya */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .65s ease, transform .65s ease, background .2s ease;
  transition-delay: calc(var(--i, 0) * 90ms);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Yo'nalishlar */
.directions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}
/* Har bir yo'nalish kartasi bitta qatorni to'liq egallaydi (bittadan,
   eniga cho'zilgan) — ikonka chapda, sarlavha+tavsif o'ngda, gorizontal. */
.directions-grid--single { grid-template-columns: 1fr; }
.directions-grid--single .direction-card {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.directions-grid--single .direction-card .dot { margin-bottom: 0; }
.directions-grid--single .direction-card__body { display: flex; flex-direction: column; }
@media (max-width: 560px) {
  .directions-grid--single .direction-card { flex-direction: column; gap: 14px; }
}
.direction-card {
  padding: 24px;
  text-align: left;
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease, opacity .65s ease;
  /* Rang sxemasi § img/source/yo'nalishlar.jpg maketidan: yo'nalishning
     O'Z rangi faqat ikki joyda to'liq to'yingan holda ko'rinadi — chap
     chekkadagi tasma va ikonka plitasi; kartaning qolgan yuzasi esa shu
     rangning juda ochiq, oqish variantidan iborat (8% rang + oq).
     Shu bilan 7 ta karta bir-biridan ajralib turadi, lekin matn to'q
     rangda, oq qog'ozdagidek o'qiladi. */
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--glow, var(--color-primary)) 5%, white) 0%,
    color-mix(in srgb, var(--glow, var(--color-primary)) 12%, white) 100%
  );
  border-left: 4px solid var(--glow, var(--color-primary));
}
.direction-card:hover,
.direction-card:focus-visible {
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--glow, var(--color-primary)) 9%, white) 0%,
    color-mix(in srgb, var(--glow, var(--color-primary)) 18%, white) 100%
  );
}
/* Ikonka plitasi — to'liq to'yingan rang, ichida OQ belgi (maketdagidek).
   Rang inline style bilan emas, --glow orqali beriladi (§ main.js). */
.direction-card .dot {
  width: 46px; height: 46px;
  border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  flex: none;
  color: #fff;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--glow, var(--color-primary)) 88%, white) 0%,
    var(--glow, var(--color-primary)) 100%
  );
  box-shadow: 0 6px 16px color-mix(in srgb, var(--glow, var(--color-primary)) 38%, transparent);
  transition: transform .18s ease;
}
.direction-card:hover .dot { transform: scale(1.08) rotate(-3deg); }
.direction-card .dot svg { width: 22px; height: 22px; }
/* Sarlavha yo'nalish rangida, lekin oqish fonda o'qilishi uchun to'qroq
   variantida: rang 50% + brend "abyss" (#062544). Shu nisbatda ettala
   rang ham 4.7:1 dan yuqori (AA) — eng ochig'i "AI Agent" (#75C3FF) ham. */
.direction-card h3 {
  margin: 0 0 6px; font-size: 1.05rem; font-weight: 700;
  color: color-mix(in srgb, var(--glow, var(--color-primary)) 50%, #062544);
}
.direction-card p {
  margin: 0; color: var(--color-muted);
  font-size: 0.88rem; line-height: 1.55;
}

/* Yangiliklar */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.news-card {
  padding: 22px;
  transition: transform .15s ease, background .2s ease, opacity .65s ease;
  /* Rang admin panelning "Reklama kartalari" bo'limida har bir karta
     uchun alohida tanlanadi (--glow, § web/js/main.js loadNews).
     Karta o'zi to'qroq, atrofidagi oyna/halo shaffof (§ direction-card
     bilan bir xil mantiq). */
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--glow, var(--color-primary)) 60%, white) 0%,
    color-mix(in srgb, var(--glow, var(--color-primary)) 36%, white) 100%
  );
}
.news-card:hover,
.news-card:focus-visible {
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--glow, var(--color-primary)) 70%, white) 0%,
    color-mix(in srgb, var(--glow, var(--color-primary)) 46%, white) 100%
  );
}
.news-card h3 { margin: 0 0 8px; font-size: 1.05rem; }
.news-card p { margin: 0; color: var(--color-ink); opacity: 0.9; font-size: 0.92rem; }

/* "Bog'lanish uchun" — dumaloqroq, ro'yxatdan o'tish tugmasiga o'xshash
   karta. Endi sahifadagi ENG OXIRGI element (qora footer bar olib
   tashlandi), shu sabab pastdan ham yetarli bo'shliq beriladi. */
.contact-cta-wrap { padding: 46px 0 60px; }
.contact-cta-wrap .container {
  max-width: 520px;
  display: flex;
  justify-content: center;
}
/* Rang sxemasi yo'nalish kartalaridagidek: chap chekkada to'yingan tasma +
   to'yingan ikonka plitasi, qolgan yuza esa shu rangning oqish varianti.
   Rang Instagram'niki — plitada uning haqiqiy gradienti (sariq-to'q sariq ->
   pushti -> siyohrang -> ko'k), tasma va sarlavhada esa shu gradientning
   o'rtasidagi asosiy pushti (#DD2A7B). */
.contact-cta-card {
  --ig: #DD2A7B;
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--ig) 5%, white) 0%,
    color-mix(in srgb, var(--ig) 12%, white) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-left: 4px solid var(--ig);
  border-radius: 16px;
  padding: 16px 26px 16px 18px;
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
}
.contact-cta-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--ig) 9%, white) 0%,
    color-mix(in srgb, var(--ig) 18%, white) 100%
  );
}
.contact-cta-card__icon {
  width: 46px; height: 46px;
  border-radius: 13px;
  background: linear-gradient(135deg, #F58529 0%, #DD2A7B 45%, #8134AF 75%, #515BD4 100%);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--ig) 38%, transparent);
}
.contact-cta-card__icon svg { width: 22px; height: 22px; }
.contact-cta-card__text { display: flex; flex-direction: column; }
/* Yo'nalish sarlavhalari bilan bir xil formula (rang 50% + #062544) —
   oqish fonda kontrast 7.9:1 (AA). */
.contact-cta-card__text strong {
  font-size: 0.98rem;
  color: color-mix(in srgb, var(--ig) 50%, #062544);
}
.contact-cta-card__text span { font-size: 0.85rem; color: var(--color-muted); }

/* --------------------------------------------------------------------------
   Ro'yxatdan o'tish oynasi (MODAL) — yuqoridan tushib chiqadi
   -------------------------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 8, 16, 0.6);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 5vh 16px;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.modal-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.modal-window {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  transform: translateY(-40px);
  opacity: 0;
  transition: transform .28s cubic-bezier(.2,.9,.3,1.2), opacity .22s ease;
  /* backdrop-filter shu qatlamda BIR MARTA hisoblanadi va o'zi
     skroll bo'lmaydi — ichkaridagi .modal-scroll skroll bo'lganda
     qimmat blur qayta-qayta hisoblanmasligi uchun (§ pastda). */
  overflow: hidden;
}
.modal-overlay.is-open .modal-window {
  transform: translateY(0);
  opacity: 1;
}
/* Haqiqiy skroll shu (arzon, blursiz) qatlamda bo'ladi. */
.modal-scroll {
  max-height: 90vh;
  overflow-y: auto;
  padding: 30px 26px 26px;
}
/* Logotip — raqamliavlod.uz ro'yxatdan o'tish sahifasidagi kabi, oyna
   tepasida markazlashgan. */
.modal-brand { display: flex; justify-content: center; margin-bottom: 16px; }
.modal-brand img { height: 52px; width: auto; }
.modal-head { text-align: center; margin-bottom: 18px; }
.modal-head h2 { margin: 0 0 4px; font-size: 1.3rem; }
/* "High contrast" matn — orqada shaffof, band (fon surat ko'rinib
   turadigan) oyna bo'lgani uchun oddiy kulrang matn ba'zan o'chib
   ketardi. Endi to'q rang + ikki qavatli oq soya (halo) qo'shildi —
   matn qanday fon ustida bo'lmasin aniq o'qiladi. */
.modal-head p {
  margin: 0 auto;
  max-width: 360px;
  color: var(--color-ink-soft);
  font-size: 0.88rem;
  text-shadow: 0 0 10px rgba(255,255,255,0.85), 0 1px 1px rgba(255,255,255,0.6);
}
.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(255,255,255,0.6);
  border: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  font-size: 1rem;
  color: var(--color-ink);
  flex-shrink: 0;
  z-index: 1;
}

/* Xabar oynasi (muvaffaqiyat/ro'yxat yopiq) — boshqa modallardan farqli
   ekran markazida chiqadi, yuqoridan tushmaydi. */
.modal-overlay--center { align-items: center; }
.modal-overlay--center .modal-window {
  background: rgba(255,255,255,0.96);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.message-modal__icon {
  width: 56px; height: 56px; margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--success-soft);
  color: var(--success-text);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; font-weight: 800;
}
.message-modal__icon.is-info { background: var(--info-soft); color: var(--info-text); }

/* --------------------------------------------------------------------------
   Ro'yxatdan o'tish vaqti — countdown (admin "Ro'yxat vaqti" sahifasida
   belgilaydi, § js/main.js loadCampSettings). Tepadagi qatorda
   (.top-overlay), logo va tugma orasida, markazda. Endi shaffof "glass"
   karta ichida turadi — surat ustida yarim shaffof fon + blur bilan
   ajralib, chiroyli ko'rinadi; matnga oq halo (text-shadow) saqlanib
   qoldi, shunda karta ustida ham aniq o'qiladi.
   -------------------------------------------------------------------------- */
.countdown-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  /* Ro'yxatdan o'tish tugmasi OSTIDA, markazda — kenglikni kontentga
     moslaydi (butun konteyner enini egallamaydi) va o'zini markazga oladi. */
  width: fit-content;
  max-width: 100%;
  margin: 14px auto 0;
  padding: 10px 18px;
  background: rgba(255,255,255,0.12);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glass);
}
.countdown-card__label {
  font-weight: 700;
  font-size: 0.72rem;
  color: #fff;
  text-shadow: 0 1px 3px rgba(6,58,108,0.5);
  white-space: nowrap;
}
.countdown-card__numbers { display: flex; align-items: center; gap: 6px; }
.countdown-unit { display: flex; flex-direction: column; align-items: center; min-width: 30px; }
.countdown-unit strong {
  font-size: 1.15rem; font-weight: 800; line-height: 1;
  color: #fff; font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 3px rgba(6,58,108,0.5);
}
.countdown-unit span {
  font-size: 0.58rem; color: rgba(255,255,255,0.85); margin-top: 1px;
  text-transform: uppercase; letter-spacing: 0.3px;
  text-shadow: 0 1px 3px rgba(6,58,108,0.45);
}
.countdown-sep {
  font-size: 1rem; font-weight: 800; color: #fff; opacity: 0.7; margin-top: -12px;
  text-shadow: 0 1px 3px rgba(6,58,108,0.5);
}
@media (max-width: 640px) {
  .countdown-card { padding: 8px 12px; }
  .countdown-card__label { font-size: 0.66rem; }
  .countdown-unit strong { font-size: 1rem; }
  .countdown-unit { min-width: 26px; }
}

/* Honeypot maydoni — ekrandan tashqarida joylashtiriladi (display:none
   emas), shu bilan ko'zga ko'rinmaydi va tab bilan ham o'tib bo'lmaydi,
   lekin oddiy bot skriptlar uchun DOM'da to'liq "ko'rinadigan" maydon
   bo'lib qoladi va ko'pincha to'ldirib yuboriladi. */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-row { margin-bottom: 14px; }
.form-row label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--color-ink-soft);
}
/* raqamliavlod.uz ro'yxatdan o'tish sahifasidagi kabi — oddiy, aniq
   chizilgan (outlined) maydonlar, DG CAMP aksent rangida. */
.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 13px 16px;
  border-radius: 10px;
  border: 1.5px solid rgba(238, 75, 98, 0.35);
  font-size: 0.95rem;
  font-family: inherit;
  background: rgba(255,255,255,0.75);
  color: var(--color-ink);
  resize: vertical;
}
.form-row input::placeholder,
.form-row textarea::placeholder { color: var(--input-placeholder); }
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  /* Fokus chegarasi qizil emas, ko'k (§ --focus-ring): qizil "xato"
     signali sifatida o'qiladi, holbuki foydalanuvchi shunchaki maydonni
     tanlagan. Ko'k saytning asosiy rang oilasidan. */
  border-color: var(--focus-ring);
  background: #fff;
}
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
/* Yoshi + Jinsi — yosh maydoni butun enni egallashi shart emas (ikki
   xonali son), shu sababli u tor qoladi va yonida Jinsi tanlovi turadi.
   1fr o'rniga aniq nisbat: yoshga kamroq, jinsga ko'proq joy. */
.form-grid-yosh-jins {
  display: grid;
  grid-template-columns: minmax(90px, 0.55fr) 1fr;
  gap: 14px;
}
.form-hint { font-size: 0.78rem; color: var(--color-muted); margin-top: 4px; }

.form-alert {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 16px;
  display: none;
}
.form-alert.show { display: block; }
.form-alert.error { background: var(--error-soft); color: var(--error-text); }
.form-alert.success { background: var(--success-soft); color: var(--success-text); }

@media (max-width: 900px) {
  .form-grid-2 { grid-template-columns: 1fr; }
  /* Yoshi + Jinsi juftligi tor ekranda ham yonma-yon qoladi —
     ikkalasi ham qisqa maydon, alohida qatorga tushirish shart emas. */
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
}

/* --------------------------------------------------------------------------
   SERTIFIKAT SAHIFALARI — /sert/<token> (ishtirokchi yuklab oladi) va
   /sert/tekshir/<raqam> (QR ochadigan ommaviy tekshiruv).
   Ikkalasi ham bitta markazlashgan oq karta: sahifaning qolgan qismi
   bosh sahifadagi ko'k fon (§ .page-bg).
   -------------------------------------------------------------------------- */
.sert-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
}
.sert-card {
  width: 100%;
  max-width: 480px;
  background: var(--color-card);
  border-radius: 20px;
  padding: 34px 30px 30px;
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.sert-logo { height: 42px; width: auto; margin: 0 auto 20px; }
.sert-kicker {
  margin: 0 0 6px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.sert-card h1 {
  margin: 0 0 10px;
  font-size: 1.45rem;
  line-height: 1.25;
  color: var(--color-ink);
}
.sert-sub { margin: 0 0 20px; color: var(--color-muted); font-size: 0.92rem; line-height: 1.55; }

/* Raqam/sana juftligi — ikki ustun, telefonda ham sig'adi. */
.sert-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 22px;
  text-align: left;
}
.sert-meta > div {
  background: var(--color-bg);
  border-radius: 12px;
  padding: 11px 13px;
}
.sert-meta span {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
  margin-bottom: 3px;
}
.sert-meta strong { font-size: 0.9rem; color: var(--color-ink); }
@media (max-width: 380px) {
  .sert-meta { grid-template-columns: 1fr; }
}

.sert-hint { margin: 12px 0 0; font-size: 0.78rem; color: var(--color-muted); }

/* Tekshiruv natijasi — yashil "haqiqiy" yoki qizil "topilmadi/bekor". */
.sert-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.88rem;
  margin-bottom: 16px;
}
.sert-badge--ok {
  background: color-mix(in srgb, var(--success) 12%, white);
  color: var(--success-text);
}
.sert-badge--bad {
  background: color-mix(in srgb, var(--color-cta) 12%, white);
  color: var(--color-cta-dark);
}
.sert-card--error h1 { color: var(--color-cta-dark); }