/* ═══════════════════════════════════════════════════════════════════
   Kirish sahifasi
   ═══════════════════════════════════════════════════════════════════

   OQ, RAMKASIZ, MARKAZLASHGAN. Karta, chegara va soya YO'Q — barcha
   element sahifa fonida to'g'ridan-to'g'ri turadi.

   Nega: kirish sahifasida ko'rsatiladigan narsa oz (logotip, ikkita
   maydon, ikkita tugma). Ularni qutiga solish sun'iy chegara yaratadi
   va sahifani "forma" ga aylantiradi. Ramkasiz variant sokinroq va
   Payme, Uzum kabi to'lov ilovalarining kirish ekranlariga yaqin.

   ⚠️ Bo'yoq FAQAT asosiy tugmada. Fon, chegara va soya bilan e'tibor
   tortishga urinish bu yerda ortiqcha.
   ═══════════════════════════════════════════════════════════════════ */

.au {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--c-page);
}

/* Yuqori tasma — faqat tema tugmasi */
.au__bar {
  display: flex;
  align-items: center;
  height: var(--topbar-h);
  padding: 0 var(--sp-7);
  flex: none;
}
.au__bar-gap { flex: 1; }

.au__icon-btn {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: var(--r-full);
  color: var(--c-text-3);
  transition: background var(--t-fast), color var(--t-fast);
}
.au__icon-btn:hover { background: var(--c-surface-3); color: var(--c-text); }

/* ── Markaz ────────────────────────────────────────────────── */

.au__body {
  flex: 1;
  display: grid;
  place-items: center;
  padding: var(--sp-6) var(--sp-6) var(--sp-11);
}

/* ⚠️ Fon, chegara, soya YO'Q — ataylab. */
.au__panel { width: min(360px, 100%); }

/* ── Brend ─────────────────────────────────────────────────── */

.au__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
  margin-bottom: var(--sp-8);
}
.au__mark { border-radius: var(--r-xl); }
.au__wm { display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.au__wm b {
  font-size: var(--fs-18);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-tight);
}
.au__wm span { font-size: var(--fs-12); color: var(--c-text-3); }

.au__h {
  font-size: var(--fs-24);
  text-align: center;
  margin-bottom: var(--sp-8);
}

/* ── Forma ─────────────────────────────────────────────────── */

.au__form .ap-field { margin-bottom: var(--sp-5); }
.au__form .ap-btn--block { margin-top: var(--sp-7); }

.au__forgot {
  display: block;
  margin-top: var(--sp-6);
  text-align: center;
  font-size: var(--fs-13);
}

/* ── Pastdagi ishonch qatori ───────────────────────────────── */

.au__secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  margin: var(--sp-9) 0 0;
  font-size: var(--fs-12);
  color: var(--c-text-3);
}

@media (max-width: 559.98px) {
  .au__bar { padding: 0 var(--sp-5); }
  .au__body { padding: var(--sp-5) var(--sp-6) var(--sp-10); }
}

/* ═══════════════════════════════════════════════════════════════════
   Kirish sahifasi
   ═══════════════════════════════════════════════════════════════════

   Bu sahifa mahsulot bilan BIRINCHI uchrashuv. U «boshqaruv paneli
   formasi» emas, TO'LOV XIZMATIning kirish eshigi bo'lib ko'rinishi
   kerak — odam bu yerda pul bilan bog'liq hisobga kirmoqda.

   Yechim: to'q navy zamin (brend rangi) + oltin nur, ustida ko'tarilgan
   oq karta. Bitta bo'yoqli moment, qolgani jim. Ortiqcha element yo'q —
   faqat logotip, sarlavha, ikkita kirish yo'li.

   ⚠️ Zamin QORONG'I TEMADA ham to'q qoladi: karta esa tema surfacesiga
   o'tadi. Shuning uchun zamin ranglari `--c-navy` dan olinadi, sahifa
   foni (`--c-page`) dan emas.
   ═══════════════════════════════════════════════════════════════════ */

/* Yuqori tasma — faqat tema tugmasi */
/* ── Karta ─────────────────────────────────────────────────── */

/* ── Brend ─────────────────────────────────────────────────── */

/* ── Pastdagi ishonch qatori ───────────────────────────────── */

@media (max-width: 559.98px) {
  .au__bar { padding: 0 var(--sp-5); }
  .au__body { padding: var(--sp-5) var(--sp-5) var(--sp-9); }
  .au__panel { padding: var(--sp-8) var(--sp-6) var(--sp-7); }
}

/* ═══════════════════════════════════════════════════════════════════
   Mehmon sahifalari — kirish, parol, bosh sahifa (landing)
   ═══════════════════════════════════════════════════════════════════

   Bu uch sahifani bir odam ketma-ket ko'radi: landing → kirish →
   parol. Shuning uchun ular BITTA faylda va bitta o'lchov to'rida
   turadi — sarlavha kattaligi, chekka bo'shlig'i va chiziqlar
   sahifadan sahifaga sakramaydi.

   Prefikslar:  au-  kirish/parol 

   ⚠️ Bu yerda deyarli hech narsa yo'q: tugma `.ap-btn`, maydon
   `.ap-field`/`.ap-input`, bo'lim sarlavhasi `.ap-section`, jadval
   `.ap-table` — hammasi components.css dan. Faqat SHU sahifalarga
   xos joylashuv qoladi.

   ⚠️ Rang/o'lcham qattiq yozilmaydi — faqat tokens.css var() lari.
   ⚠️ KATTA HARFLI yorliq yo'q (`text-transform` ishlatilmagan).
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   UMUMIY: mehmon qobig'i (yuqori tasma + oyoq)
   ═══════════════════════════════════════════════════════════════ */

/* ⚠️ VAQTINCHALIK — eski `app.css` ustidan.
   U `body{background:#f6f7f9}` ni QATTIQ yozadi va head.php da
   eng OXIRIDA yuklanadi, ya'ni base.css dagi `var(--c-page)` ni
   bosib ketadi. Natijada qorong'i temada sahifa ostida yorug' tasma
   qolardi. `html body` — bir daraja kuchliroq tanlagich, boshqa
   hech narsani o'zgartirmaydi.
   app.css o'chirilgach BU BLOK ham o'chiriladi. */
html body { background: var(--c-page); }

/* Logo — belgi + ikki qatorli so'z belgisi. Rasm oltin kvadrat
   bo'lgani uchun uning yonida boshqa rangli element YO'Q. */
/* Tasmadagi bo'sh joy — o'ng tomondagi amallarni chetga suradi */
/* Tema tugmasi: qobiqdagi `[data-theme-toggle]` bilan bir xil
   belgilanish, lekin bu yerda foydalanuvchi menyusi yo'q —
   shuning uchun yalang'och ikona tugmasi. */
/* ═══════════════════════════════════════════════════════════════
   KIRISH SAHIFASI
   ═══════════════════════════════════════════════════════════════
   Ikki ustun: chapda NIMA taklif qilinayotgani, o'ngda forma.
   Ilgari o'ng tomonda DOM'da qurilgan soxta panel mokapi turardi —
   u ~250 qator CSS yeb, hech qanday ma'lumot bermasdi. O'rniga
   uchta tekshirib bo'ladigan fakt.
   ═══════════════════════════════════════════════════════════════ */

/* ── O'ng ustun: forma qutisi ───────────────────────────────── */

.au__sub {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-13);
  color: var(--c-text-2);
  line-height: var(--lh-snug);
}

/* Asosiy yo'l — AvtoPay ID. Sahifadagi yagona to'ldirilgan tugma.
   `is-busy` ni auth.js popup ochilganda qo'yadi: ikkinchi bosish
   ikkinchi popup ochib yubormasin. */
/* Qurilmada eslab qolingan hisob. Bu yerda avatar + ism + niqoblangan
   raqam turadi; hech qanday kirish huquqi bermaydi — bosilganda
   baribir ID orqali tasdiqdan o'tiladi. */
/* Parolni ko'rsatish tugmasi maydon ICHIDA turadi */
/* Ochiq holat — ko'z "yopiq" belgisiga almashadi (auth.js `hidden` bilan) */
/* Sarlavha izohi bilan birinchi maydon orasidagi nafas.
   ⚠️ `pages.css` dagi `.u-mt-6` bu yerda ISHLAMAYDI — u fayl mehmon
   sahifalarida yuklanmaydi. */
.au__form { margin-top: var(--sp-8); }

/* Parolni tiklash paneli */
.au__steps {
  margin: var(--sp-7) 0 var(--sp-8);
  padding: 0;
  list-style: none;
  counter-reset: au-step;
  border-top: 1px solid var(--c-line-soft);
}
.au__steps li {
  counter-increment: au-step;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: baseline;
  margin: 0;
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--c-line-soft);
  font-size: var(--fs-13);
  color: var(--c-text-2);
}
.au__steps li::before {
  content: counter(au-step);
  font-family: var(--font-num);
  font-size: var(--fs-12);
  color: var(--c-text-3);
}

/* ── Parol sahifasi (kirgan foydalanuvchi) ──────────────────── */

/* Bitta ustun: chap ustundagi qiymat taklifi bu yerda ortiqcha —
   odam allaqachon ichkarida. */
/* ── Mobil ─────────────────────────────────────────────────────
   Qiymat taklifi YO'QOLMAYDI — formadan PASTGA tushadi. Uni
   `display:none` bilan yashirish sahifani "yalang'och forma"
   qilib qo'yadi va telefonda birinchi marta kirgan odam mahsulot
   nima ekanini bilmay qoladi. */

@media (max-width: 899.98px) {
  .au__body {
    grid-template-columns: minmax(0, 1fr);
    max-width: 460px;
    gap: var(--sp-9);
    align-items: start;
    padding: var(--sp-7) var(--sp-6) var(--sp-10);
  }
  .au__panel { order: 1; }
  .au__pitch { order: 2; max-width: none; }
  .au__pitch h1 { font-size: var(--fs-20); }
  .au__lead { margin-top: var(--sp-5); font-size: var(--fs-14); }
  .au__facts { margin-top: var(--sp-7); }
  .au__bar, .au__foot { padding-left: var(--sp-6); padding-right: var(--sp-6); }
}

@media (max-width: 559.98px) {
  .au__panel { padding: var(--sp-8) var(--sp-6); }
  .au__fact { grid-template-columns: 72px minmax(0, 1fr); gap: var(--sp-5); }
  .au__fact-k { font-size: var(--fs-18); }
  .au__row { flex-direction: column-reverse; align-items: stretch; gap: var(--sp-6); }
  .au__row .ap-btn { width: 100%; }
  .au__row .link { text-align: center; }
}

/* ── Komissiyalar jadvali ───────────────────────────────────── */

/* O'ngga tekislangan ustunlar.
   ⚠️ `.ap-table__num` ISHLATILMAYDI: u katakni MONO qiladi, mono esa
   faqat summa va identifikator uchun — "Bepul", "Yoʻq" va ustun
   sarlavhalari mono bo'lib chiqib ketardi.
   Tanlagichda `.ap-table` bor, chunki `.ap-table th{text-align:left}`
   dan kuchsizroq qolmasligi kerak. */

@media (max-width: 719.98px) {

  /* Jadval tor ekranda: «Ulash» va «Oylik» ustunlari OLIB TASHLANADI.
     Ikkalasi ham hozir "Bepul"/"Yoʻq" va jadval ostidagi izohda
     baribir aytilgan — ular uchun gorizontal surish qildirish
     savdogarga eng muhim ustunni (holat) yashirib qo'yardi.
     Nom ostidagi izoh ham ketadi: 430px da u to'rt qatorga sinadi. */

}

/* ═══════════════════════════════════════════════════════════════════
   Kirish — bitta markazlashgan karta
   ═══════════════════════════════════════════════════════════════════
   ⚠️ Chapdagi marketing ustuni olib tashlangandan keyin `au__body`
   ikki ustunli bo'lishi shart emas. Kirish sahifasining bitta vazifasi
   bor: ichkariga kiritish. Mahsulot matni tanishtiruv sahifasida.
   ═══════════════════════════════════════════════════════════════════ */

/* Sarlavha va tugma orasidagi bo'shliq — matn olib tashlangach
   sarlavha tugmaga yopishib qolmasin. */

/* ═══ Parol maydoni va ko'z tugmasi ═══════════════════════════
   ⚠️ O'ram `position: relative` bo'lishi SHART — tugma input ustiga
   mutlaq joylashadi. Busiz u inputdan pastga tushib qoladi. */

/* Matn tugma ostiga kirib ketmasin */
/* Forma qatori: «Parolni unutdingizmi?» va tugma yonma-yon */
/* ⚠️ `body` foni ham to'q bo'lsin. `.au` viewport balandligini qoplaydi,
   lekin ortiqcha surishda (macOS/iOS "rubber band") yoki brauzer
   masshtabi kichik bo'lganda ostidan sahifa foni ko'rinib qoladi —
   och kulrang tasma. Kirish sahifasida bu darhol ko'zga tashlanadi. */

/* ═══ Parol maydoni va ko'z tugmasi ═══════════════════════════
   ⚠️ O'ram `position: relative` bo'lishi SHART — tugma input ustiga
   mutlaq joylashadi. Busiz u inputdan pastga tushib qoladi.

   ⚠️ Bu qoidalar bir marta tasodifan o'chirilgan edi: tozalash
   regexida `\.au\b` ishlatilgan va `-` so'z chegarasi bo'lgani uchun
   u `.au-pw` va `.au-eye` ni ham tutgan. Sinf nomlari bo'yicha ommaviy
   o'chirishda `\b` emas, aniq chegara ishlatilsin. */

.au-pw { position: relative; display: block; }
.au-pw .ap-input { padding-right: var(--sp-10); }

.au-eye {
  position: absolute;
  right: var(--sp-3);
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: var(--r-sm);
  color: var(--c-text-3);
  transition: color var(--t-fast), background var(--t-fast);
}
.au-eye:hover { color: var(--c-text-2); background: var(--c-surface-3); }
.au-eye.is-on { color: var(--c-gold-hover); }

/* Eslab qolingan hisob kartochkasi */
.au-last {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}
.au-last__who { flex: 1; min-width: 0; }
.au-last__name { display: block; font-weight: var(--fw-medium); }
.au-last__phone { display: block; font-size: var(--fs-12); color: var(--c-text-3); }
.au-forget { display: block; margin-top: var(--sp-4); text-align: center; font-size: var(--fs-12); color: var(--c-text-3); }
.au-id { margin-bottom: var(--sp-2); }