/* =========================================================
   BO'LIMLAR: kartalar, qadamlar, savol-javob, aloqa
   ========================================================= */

/* ---- Imkoniyat kartalari ---- */
.kartalar{display:grid;gap:clamp(14px,1.6vw,20px);grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.karta{
  position:relative;overflow:hidden;
  background:var(--srf-raised);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(22px,2.2vw,30px);
  box-shadow:var(--sh-xs);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
             transform var(--dur) var(--ease);
}
.karta::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;opacity:0;
  background:linear-gradient(90deg,var(--accent),var(--law-brass-300) 45%,transparent);
  transition:opacity var(--dur) var(--ease);
}
.karta:hover{border-color:var(--line-accent);box-shadow:var(--sh-lg);transform:translateY(-3px)}
.karta:hover::before{opacity:1}

.karta-ico{
  width:46px;height:46px;margin-bottom:18px;
  border-radius:var(--r-md);display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent-on-soft);
  border:1px solid var(--accent-soft-bd);
}
.karta h3{margin-bottom:9px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.karta p{font-size:.93rem;color:var(--txt-secondary);line-height:1.66}

/* Kartadagi misol — "bu amalda nima degani" */
.karta-misol{
  margin-top:16px;padding-top:14px;
  border-top:1px solid var(--line-soft);
  font-size:.85rem;line-height:1.6;color:var(--txt-muted);
}
.karta-misol b{
  display:block;font-size:.68rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--txt-accent);margin-bottom:5px;
}

.yangi{
  padding:3px 9px;border-radius:var(--r-full);
  background:var(--ok-soft);color:var(--ok-on-soft);
  font-size:.63rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
}

/* To'q tasma ichidagi kartalar */
.tasma--togq .karta{background:rgba(255,255,255,.04);border-color:rgba(221,188,133,.18);box-shadow:none}
.tasma--togq .karta:hover{border-color:rgba(221,188,133,.42);background:rgba(255,255,255,.06)}
.tasma--togq .karta p{color:var(--law-navy-200)}
.tasma--togq .karta-ico{background:rgba(221,188,133,.14);color:var(--law-brass-300);border-color:rgba(221,188,133,.28)}
.tasma--togq .karta-misol{border-top-color:rgba(221,188,133,.16);color:var(--law-navy-300)}
.tasma--togq .karta-misol b{color:var(--law-brass-300)}

/* ---- Qadamlar ----
   Raqam bezak emas: qadamlar haqiqatan ketma-ket bajariladi. */
.qadamlar{counter-reset:q;display:grid;gap:clamp(18px,2vw,26px);grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.qadam{counter-increment:q;position:relative;padding-top:52px}
.qadam::before{
  content:counter(q,decimal-leading-zero);
  position:absolute;left:0;top:0;
  font-family:var(--font-display);font-size:2rem;font-weight:600;
  color:var(--accent);opacity:.85;line-height:1;
}
.qadam::after{content:"";position:absolute;left:0;top:42px;width:26px;height:2px;background:var(--accent);border-radius:2px}
.qadam h3{margin-bottom:8px}
.qadam p{font-size:.92rem;color:var(--txt-secondary);line-height:1.66}
.tasma--togq .qadam p{color:var(--law-navy-200)}
.tasma--togq .qadam::before{color:var(--law-brass-300)}
.tasma--togq .qadam::after{background:var(--law-brass-400)}

/* ---- Kimga kerak: HOLATLAR REYESTRI ----

   Ilgari dumaloq "pill" teglar edi. O'n beshta dumaloq shakl bir
   joyda to'planganda ular bezakdek ko'rinardi va sahifaning
   qolgan qismidagi hujjat tilidan ajralib turardi.

   Endi reyestr: uch ustun, hoshiyalar bilan bo'lingan. Odam o'z
   holatini ro'yxatdan qidiradi — reyestr aynan shu ish uchun.  */
/* O'n besh qatorlik yagona ro'yxat SOHALARGA bo'lindi — sabab
   _kimga.html boshidagi izohda. Bu yerda tuzilma: beshta guruh
   kartasi, har birida sarlavha va uchtadan band.

   TO'R: olti ustunli tayanch. Birinchi uch karta ikkitadan
   ustun oladi (qatorda uchta), oxirgi ikkitasi uchtadan
   (qatorda ikkita). Natijada beshta karta ikki qatorga
   BO'SHLIQSIZ joylashadi.

   Oddiy `repeat(3,1fr)` bilan oxirgi qatorda bitta bo'sh
   katak qolardi — bu "gridni noto'g'ri rejalashtirgan"
   degani va ko'zga darhol tashlanadi. */
.holatlar{
  display:grid;
  grid-template-columns:repeat(6, minmax(0,1fr));
  gap:clamp(12px, 1.4vw, 20px);
}
.holat-guruh{grid-column:span 2}
.holat-guruh:nth-child(4),
.holat-guruh:nth-child(5){grid-column:span 3}

/* Karta emas, VARAQA: fon yo'q, faqat tepada jez qirra.
   Sabab — bo'lim pergament tasmada turadi va beshta oq karta
   qo'yilsa ular "boshqa joydan olib kelingan" bo'lib ko'rinardi.
   Tepadagi qirra esa sahifaning qolgan qismidagi hujjat tili
   bilan bir xil gapiradi. */
.holat-guruh{
  padding:16px 0 6px;
  border-top:2px solid var(--accent);
}
.holat-guruh h3{
  display:flex;align-items:baseline;gap:10px;
  font-family:var(--font-ui);
  font-size:.95rem;font-weight:700;letter-spacing:-.005em;
  color:var(--txt-primary);
  margin-bottom:10px;
}
.guruh-raqam{
  font-family:var(--font-mono);font-size:.68rem;font-weight:700;
  color:var(--accent);flex-shrink:0;
}
.holat-guruh ul{list-style:none;margin:0;padding:0}

/* Bandlar tagida hoshiya YO'Q.

   Ilgari har qatorda `border-bottom` bor edi. O'n beshta bir xil
   chiziq ro'yxatni naqshga aylantiradi va bandlarni bir-biridan
   ajratish o'rniga, aksincha, bir xil qilib qo'yadi. Guruhlar
   ajratilgach ular kerak ham emas — bo'shliq yetarli. */
.holatlar li{
  padding:6px 0;
  font-size:.93rem;line-height:1.45;color:var(--txt-secondary);
  transition:color var(--dur) var(--ease);
}

/* Namoyish: jez belgi bandlar bo'ylab yuradi (05-namoyish.js).
   Fon bo'yash o'rniga MATNNING O'ZI yonadi — fon dog'i hoshiyasiz
   ro'yxatda osilib turgandek ko'rinardi. */
.holatlar li.yonik{color:var(--accent-on-soft);font-weight:600}

/* ---- Savol-javob ----

   Ilgari har savol alohida dumaloq karta edi: olti karta, olti
   hoshiya, olti soya. Endi ular BITTA ro'yxat — qatorlar orasida
   ingichka hoshiya. Sahifadagi qolgan ro'yxatlar bilan bir xil.

   Keng ekranda ikki ustun: bitta tor ustunda olti savol juda
   uzun tasma bo'lib cho'zilardi.  */
.savollar{
  display:grid;
  counter-reset:sav;
  border-top:1px solid var(--line);
}
@media (min-width:900px){
  .savollar{grid-template-columns:1fr 1fr;column-gap:clamp(24px,3vw,48px);align-items:start}
}
@media (max-width:899px){
  .savollar{max-width:var(--sayt-tor)}
}

.savol{
  counter-increment:sav;
  border-bottom:1px solid var(--line-soft);
}
.savol summary{
  display:flex;align-items:baseline;gap:12px;
  padding:16px 34px 16px 0;position:relative;
  font-size:.97rem;font-weight:650;cursor:pointer;
  list-style:none;
  transition:color var(--dur) var(--ease);
}
.savol summary::-webkit-details-marker{display:none}
/* Tartib raqami — sahifadagi qolgan ro'yxatlar bilan bir xil til */
.savol summary::before{
  content:counter(sav, decimal-leading-zero);
  font-family:var(--font-mono);font-size:.68rem;font-weight:600;
  color:var(--txt-muted);flex-shrink:0;min-width:2ch;
  padding-top:.15em;
  transition:color var(--dur) var(--ease);
}
/* Ochish belgisi: shevron emas, PLYUS — u ochiq/yopiq holatni
   aniqroq aytadi va burchakli tilga mos tushadi. */
.savol summary::after{
  content:"";position:absolute;right:6px;top:50%;
  width:11px;height:11px;margin-top:-5.5px;flex-shrink:0;
  background:
    linear-gradient(var(--txt-secondary),var(--txt-secondary)) center/11px 1px no-repeat,
    linear-gradient(var(--txt-secondary),var(--txt-secondary)) center/1px 11px no-repeat;
  transition:transform var(--dur) var(--ease),background-image var(--dur) var(--ease);
}
.savol:hover summary{color:var(--txt-accent)}
.savol[open] summary{color:var(--txt-accent)}
.savol[open] summary::before{color:var(--accent)}
/* Ochilganda faqat GORIZONTAL chiziq qoladi — "minus".
   Diqqat: bu yerda rotate ISHLATILMAYDI. Gorizontal chiziqni
   90 gradusga burish uni TIK qilib qo'yadi va "minus" o'rniga
   tayoqcha chiqadi — bir marta shunga uchradik. */
.savol[open] summary::after{
  background:linear-gradient(var(--accent),var(--accent)) center/11px 1px no-repeat;
}
.savol .javob{
  padding:0 34px 18px 26px;
  font-size:.92rem;line-height:1.72;color:var(--txt-secondary);
}
.savol .javob p + p{margin-top:11px}

/* ---- Ogohlantirish ---- */
.ogoh{
  padding:20px 24px;border-radius:0 var(--r-md) var(--r-md) 0;
  background:var(--warn-soft);border:1px solid var(--warn-soft);
  border-left:3px solid var(--warn);
  font-size:.92rem;line-height:1.7;color:var(--warn-on-soft);
  max-width:var(--sayt-tor);
}
.ogoh b{color:var(--txt-primary)}

/* ---- Aloqa: hoshiyali qatorlar ----
   Ilgari uchta dumaloq karta edi. Endi ular ro'yxat qatorlari:
   chapda nom, o'ngda o'q. Ikonka olib tashlandi — dumaloq
   ikonka qutisi sahifadagi burchakli tildan ajralib turardi.  */
.aloqa{
  display:grid;grid-template-columns:repeat(3, minmax(0,1fr));
  border-top:1px solid rgba(221,188,133,.20);
  max-width:var(--sayt-eni);
}
.aloqa a{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  text-decoration:none;
  padding:18px clamp(14px,1.6vw,24px) 18px 0;
  border-bottom:1px solid rgba(221,188,133,.10);
  transition:background var(--dur) var(--ease);
}
.aloqa a + a{border-left:1px solid rgba(221,188,133,.10);padding-left:clamp(14px,1.6vw,24px)}
.aloqa a:hover{background:rgba(221,188,133,.07)}
.aloqa b{display:block;font-size:.97rem;font-weight:700;color:var(--law-parch-50)}
.aloqa em{
  display:block;font-style:normal;margin-top:3px;
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--law-navy-300);
}
.aloqa-oq{flex-shrink:0;color:var(--law-brass-300);transition:transform var(--dur) var(--ease)}
.aloqa a:hover .aloqa-oq{transform:translateX(3px)}

/* ---- Bazadan keladigan sonlar: REYESTR TASMASI ----
   Uch ustun, orasida tik hoshiya — peshtoqning pastki tasmasi
   bilan bir xil til. Raqamlar bu yerda gap, shuning uchun ular
   katta va tabular-nums bilan ustunda tekis turadi. */
.reyestr{
  display:grid;grid-template-columns:repeat(3, minmax(0,1fr));
  border-top:1px solid var(--line);
}
.reyestr-band{
  padding:clamp(20px,2.2vw,30px) clamp(16px,2vw,32px) clamp(20px,2.2vw,30px) 0;
}
.reyestr-band + .reyestr-band{
  border-left:1px solid var(--line-soft);
  padding-left:clamp(16px,2vw,32px);
}
.reyestr-son{
  font-family:var(--font-display);
  font-size:clamp(2.4rem, 1.6rem + 2.8vw, 3.6rem);
  font-weight:600;line-height:1;letter-spacing:-.02em;
  color:var(--txt-accent);margin-bottom:12px;
  font-variant-numeric:tabular-nums;
}
.reyestr-band h3{margin-bottom:5px}
.reyestr-izoh{font-size:.87rem;line-height:1.5;color:var(--txt-secondary)}

/* .karta .raqam qoidasi olib tashlandi: _raqamlar.html endi
   kartalardan emas, .reyestr tasmasidan foydalanadi. */