/* =========================================================
   PESHTOQ (hero) — hujjat arxitekturasi

   DIZAYN QARORI, qisqacha
   Ilgari bu yerda "yumshoq SaaS" to'plami bor edi: shishasimon
   karta, uning ortida ikkita suzuvchi qatlam, ikkita radial
   yorug'lik dog'i, pulsli nuqtali pill-nishon, tugma ustidan
   o'tuvchi yaltirash va pastga ishora. Har biri alohida yomon
   emas, lekin BIRGA turganda sahifa tayyor shablonga o'xshaydi.

   Endi tuzilma ko'rsatiladi:
       - konteynerning tik hoshiyalari (sahifa marjasi)
       - o'ng varaqa: to'q, tekis, keskin burchakli "blanka"
       - monoshrift yorliqlar va 01/02/03 tartib raqamlari
       - jez faqat URG'U uchun, bezak uchun emas

   HARAKAT QOIDASI
   Tsikl bo'lib takrorlanadigan YAGONA harakat — o'ng varaqadagi
   namoyish (u mahsulotni tushuntiradi). Qolgani bir marta
   ochilishda o'ynaydi va to'xtaydi. Fon umuman qimirlamaydi.

   TUZOQ: clamp/calc ichida + va - atrofida BO'SH JOY shart
   (01-tokens.css dagi izohga qarang).
   ========================================================= */

.peshtoq{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--tasma-togq);
  color:var(--law-parch-50);
  padding:clamp(40px, 4.5vw, 76px) var(--bolim-x) clamp(56px, 6vw, 92px);
  display:flex;align-items:center;
  /* Birinchi ekran deyarli to'la balandlikni oladi, lekin TO'LIQ
     emas: pastdan keyingi bo'lim ko'rinib turadi. */
  min-height:min(84vh, 860px);
}
@supports (height:100svh){
  .peshtoq{min-height:min(84svh, 860px)}
}

/* ---------------------------------------------------------
   TO'R — sahifaning ko'rinib turgan tuzilmasi

   Bu bezak emas, o'lchov: chiziqlar mazmun konteyneri bilan
   AYNI joyda turadi, shuning uchun sarlavha, tugma va varaqa
   ularga tekislanadi. Odam buni ongli sezmaydi, lekin sahifa
   "yig'ilgan" bo'lib ko'rinadi.
   --------------------------------------------------------- */
.peshtoq-tur{
  position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:min(100% - 2 * var(--bolim-x), var(--sayt-eni));
  border-left:1px solid rgba(221,188,133,.10);
  border-right:1px solid rgba(221,188,133,.10);
  pointer-events:none;z-index:0;
}
/* Ilgari bu yerda ustunlar orasida yana bitta tik chiziq bor edi.
   U OLIB TASHLANDI: chiziq gridning chokiga, ya'ni ikki ustun
   oralig'idagi BO'SH joyga tushardi — hech narsani chegaralamay,
   osilib turgandek ko'rinardi. Ikkita chekka hoshiya yetarli:
   ular sahifaning hoshiyasini belgilaydi va mazmun ularga
   tekislanadi. Sinf markupda qoldi, lekin ko'rinmaydi. */
.tur-tik{display:none}

/* Tagdagi hoshiya: ingichka chiziq + chapda qisqa to'q jez
   bo'lak. Chap chekka konteyner hoshiyasi bilan bir tekisda. */
.peshtoq-chiziq{
  position:absolute;left:0;right:0;bottom:0;height:1px;z-index:2;
  background:rgba(221,188,133,.22);
}
.peshtoq-chiziq::after{
  content:"";position:absolute;bottom:0;height:2px;width:96px;
  left:max(var(--bolim-x), calc(50% - var(--sayt-eni) / 2));
  background:var(--law-brass-500);
}

/* ---------------------------------------------------------
   IKKI USTUN
   --------------------------------------------------------- */
.peshtoq .peshtoq-tor{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:minmax(0,53fr) minmax(0,47fr);
  gap:clamp(28px, 3vw, 52px);
  /* Markazlash EMAS, tepaga tekislash: varaqaning yuqori qirrasi
     chapdagi bosh satr hoshiyasi bilan bir chiziqda turadi va
     sahifada ko'rinmas gorizontal o'q paydo bo'ladi. Markazlansa
     varaqa "suzib yurgandek" bo'lib qolardi. */
  align-items:start;
}
.peshtoq-matn{min-width:0;padding-right:clamp(0px, 2vw, 28px)}

/* ---------------------------------------------------------
   BOSH SATR — belgi + brend nomi + tavsif

   Nomsiz logotip "adashgan ilova ikonkasi" bo'lib ko'rinadi.
   Shu sabab belgi va nom BIRGA, bitta satrda turadi.
   --------------------------------------------------------- */
.bosh-satr{
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  padding-bottom:16px;margin-bottom:clamp(22px, 2.4vw, 34px);
  border-bottom:1px solid rgba(221,188,133,.16);
}
.bosh-belgi{box-shadow:none}
.bosh-nom{
  font-family:var(--font-display);font-size:1.12rem;font-weight:600;
  letter-spacing:-.01em;color:var(--law-parch-50);
}
.bosh-ajratgich{width:1px;height:15px;background:rgba(221,188,133,.30)}
.bosh-izoh{
  font-family:var(--font-mono);
  font-size:.68rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  color:var(--law-brass-300);
}

/* ---------------------------------------------------------
   SARLAVHA — so'zma-so'z ochiladi

   Har so'z .soz konteynerida, ichida <i> pastdan ko'tariladi.
   Konteynerda overflow:hidden — so'z "pardadan" chiqqandek
   bo'ladi. Ilgari urg'uli so'zlar tagida gradient chiziq
   chizilardi; u olib tashlandi — rang o'zi yetarli urg'u,
   ikkitasi birga qichqiradi.
   --------------------------------------------------------- */
/* Lede olib tashlangach sarlavha peshtoqning YAGONA gapi bo'lib
   qoldi — shuning uchun u kattaroq. O'lcham global --h1 dan emas,
   shu yerdan beriladi: qolgan bo'limlarning sarlavhalari
   o'zgarmasligi kerak. */
.peshtoq h1{
  color:var(--law-parch-50);max-width:13ch;
  font-size:clamp(2.4rem, 1.3rem + 4.9vw, 4.5rem);
  margin-bottom:clamp(26px, 2.8vw, 40px);
}
.peshtoq-sarlavha .soz{display:inline-block;overflow:hidden;vertical-align:bottom}
.peshtoq-sarlavha .soz > i{
  display:inline-block;font-style:normal;
  transform:translateY(112%);
  animation:sozKotaril .8s cubic-bezier(.16,1,.3,1) both;
  animation-delay:calc(.16s + var(--k) * .065s);
}
@keyframes sozKotaril{from{transform:translateY(112%)}to{transform:translateY(0)}}
.peshtoq-sarlavha .soz--urgu > i{color:var(--law-brass-300)}

.peshtoq .lede{
  color:var(--law-navy-200);max-width:50ch;
  margin-bottom:clamp(26px, 2.6vw, 36px);
}

/* ---------------------------------------------------------
   HARAKATLAR — bitta tugma, bitta havola

   Ikki bir xil og'irlikdagi tugma yonma-yon turganda odam
   qaysi biri asosiy ekanini bilmaydi. Shuning uchun ikkinchisi
   matn havolaga aylantirildi.
   --------------------------------------------------------- */
.peshtoq-tugmalar{display:flex;align-items:center;gap:8px 26px;flex-wrap:wrap}
.peshtoq .tugma{
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
}

.matn-havola{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 0;
  font-size:.94rem;font-weight:650;text-decoration:none;
  color:var(--law-parch-50);
  border-bottom:1px solid rgba(221,188,133,.34);
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.matn-havola svg{transition:transform var(--dur) var(--ease)}
.matn-havola:hover{color:var(--law-brass-300);border-bottom-color:var(--law-brass-400)}
.matn-havola:hover svg{transform:translateX(3px)}

/* ---------------------------------------------------------
   RO'YXAT — RAQAM EMAS, imkoniyat nomlari.
   01/02/03 statistika emas, tartib. Statistika o'ylab
   topilmaydi (haqiqiy qiymatlar loyihada yo'q).
   --------------------------------------------------------- */
/* Ro'yxat ikkala ustun ostida, to'liq kenglikda — peshtoqning
   pastki tasmasi. Uch ustun, orasida tik hoshiya: shu bilan u
   "ro'yxat" emas, "jadval satri" bo'lib o'qiladi va sahifaning
   to'riga qo'shiladi. */
.peshtoq-royxat{
  grid-column:1 / -1;
  list-style:none;
  display:grid;grid-template-columns:repeat(3, minmax(0,1fr));
  margin-top:clamp(34px, 3.4vw, 52px);
  border-top:1px solid rgba(221,188,133,.16);
}
.peshtoq-royxat li{
  display:flex;align-items:baseline;gap:12px;
  padding:16px clamp(14px, 1.6vw, 26px) 0 0;
  font-size:.92rem;color:var(--law-navy-100);
}
/* Ustunlar orasidagi hoshiya. Birinchisida yo'q — chap chekka
   konteyner hoshiyasi bilan qo'shilib ketardi. */
.peshtoq-royxat li + li{
  border-left:1px solid rgba(221,188,133,.12);
  padding-left:clamp(14px, 1.6vw, 26px);
}
.royxat-raqam{
  font-family:var(--font-mono);font-size:.7rem;font-weight:600;
  letter-spacing:.06em;color:var(--law-brass-400);
  flex-shrink:0;min-width:2ch;
}

/* =========================================================
   O'NG USTUN — NAMUNA VARAQASI

   To'q, TEKIS yuza. Shaffoflik, blur va suzuvchi soya yo'q:
   ular "shisha kartochka" ohangini beradi, biz esa hujjat
   ohangini xohlaymiz. Burchak radiusi ham kichik (4px) —
   varaqa dumaloq bo'lmaydi.

   MUHIM: tayyor holat ASOSIY. JS ishlamasa varaqa to'liq
   ko'rinadi. JS ishga tushsa .peshtoq-korgazma ga "jonli"
   sinfi qo'shiladi va faqat SHUNDAN keyin matn bosqichma-
   bosqich to'ladi. TUZILMA esa hech qachon yashirilmaydi —
   yorliqlar, hoshiyalar va 01/02/03 doim joyida.
   ========================================================= */
/* Bosh satr olib tashlangach varaqa tekislanadigan hoshiya ham
   yo'qoldi. Endi u sarlavhaning BOSH HARFI bilan bir chiziqda
   turadi: serif sarlavhaning em-qutisi harfning o'zidan balandroq,
   shuning uchun kichik ijobiy siljish kerak. Qiymat brauzerda
   o'lchab tanlangan. */
.peshtoq-korgazma{position:relative;min-width:0;margin-top:11px}

.hujjat{
  background:rgba(7,15,28,.46);
  border:1px solid rgba(221,188,133,.18);
  border-radius:4px;
  /* Chapdagi qalin jez hoshiya — "papkaga tikilgan varaq" */
  border-left:2px solid var(--law-brass-500);
}

.hujjat-bosh{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 18px;
  border-bottom:1px solid rgba(221,188,133,.16);
}
.hujjat-yorliq,.hujjat-manba{
  font-family:var(--font-mono);font-size:.66rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
}
.hujjat-yorliq{color:var(--law-brass-300)}
.hujjat-manba{color:var(--law-navy-300)}

/* ---- Varaqaning qatorlari ---- */
.hujjat-qator{
  padding:14px 18px 16px;
  border-bottom:1px solid rgba(221,188,133,.09);
}
.hujjat-qator:last-child{border-bottom:0}

.qator-yorliq{
  display:block;margin-bottom:8px;
  font-family:var(--font-mono);font-size:.62rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--law-navy-300);
}
.qator-matn{
  font-size:.88rem;line-height:1.6;color:var(--law-parch-50);
  /* Ikki qatorlik joy oldindan band: matn yozilganda varaqa
     bo'yi o'zgarmaydi va sahifa sakramaydi. */
  min-height:2.8em;
}
.qator-matn--kichik{font-size:.82rem;color:var(--law-navy-200);min-height:1.6em}

/* Yozuv kursori — faqat yozilayotganda */
.kursor{
  display:none;width:2px;height:1em;margin-left:2px;vertical-align:-.15em;
  background:var(--law-brass-300);
  animation:kursorLip 1s steps(1) infinite;
}
.hujjat-qator.yozmoqda .kursor{display:inline-block}
@keyframes kursorLip{0%,50%{opacity:1}51%,100%{opacity:0}}

/* Qidiruv chizig'i — o'lchov shkalasi kabi tekis to'ladi */
.qidiruv-chiziq{
  display:block;height:2px;margin-top:12px;
  background:rgba(221,188,133,.14);overflow:hidden;
}
.qidiruv-chiziq > i{
  display:block;height:100%;width:100%;
  background:var(--law-brass-500);
}
.peshtoq-korgazma.jonli .qidiruv-chiziq > i{width:0}
/* 1.6s — JS dagi kutish bilan AYNI. Ikkalasini birga
   o'zgartiring, aks holda chiziq to'lib bo'lmasdan
   "topildi" yozuvi chiqadi. */
.peshtoq-korgazma.jonli .hujjat-qator.qidirmoqda .qidiruv-chiziq > i{
  animation:chiziqTol 1.6s cubic-bezier(.4,0,.2,1) forwards;
}
.peshtoq-korgazma.jonli .hujjat-qator.topildi .qidiruv-chiziq > i{
  width:100%;animation:none;background:var(--law-verd-500);
}
@keyframes chiziqTol{from{width:0}to{width:100%}}
.hujjat-qator.topildi #kor-holat-matn{color:var(--law-verd-300)}

/* ---- Natija ro'yxati ----
   Raqamlar va hoshiyalar DOIM ko'rinadi — bu blanka.
   Faqat matn keyin to'ladi. Shu sabab varaqada "bo'sh kutish
   joyi" degan narsa yo'q. */
.natija{list-style:none;margin-top:2px}
.natija li{
  display:flex;align-items:baseline;gap:12px;
  padding:9px 0;
  border-bottom:1px solid rgba(221,188,133,.07);
}
.natija li:last-child{border-bottom:0}
.natija-raqam{
  font-family:var(--font-mono);font-size:.68rem;font-weight:600;
  letter-spacing:.06em;color:var(--law-brass-400);
  flex-shrink:0;min-width:2ch;
}
.natija-matn{font-size:.85rem;line-height:1.45;color:var(--law-navy-100)}
.natija-matn b{color:var(--law-parch-50);font-weight:700}

/* Matn navbatma-navbat to'ladi (faqat JS bilan) */
.peshtoq-korgazma.jonli .natija-matn{opacity:0}
.peshtoq-korgazma.jonli .hujjat-qator--natija.chiqdi .natija-matn{
  opacity:1;
  transition:opacity .4s var(--ease);
  transition-delay:calc(var(--n) * .12s);
}

/* Savol va qidiruv qatorlarining MATNI ham shunday: yorliq
   turadi, matn chiqadi. */
.peshtoq-korgazma.jonli [data-bosqich="qidiruv"] .qator-matn,
.peshtoq-korgazma.jonli [data-bosqich="qidiruv"] .qidiruv-chiziq{
  opacity:0;transition:opacity .35s var(--ease);
}
.peshtoq-korgazma.jonli [data-bosqich="qidiruv"].chiqdi .qator-matn,
.peshtoq-korgazma.jonli [data-bosqich="qidiruv"].chiqdi .qidiruv-chiziq{
  opacity:1;
}