/* ==========================================================================
   FF/06-TAMOYIL-USTUN-FIKR.CSS — FlexFolio skin: #tamoyillar · #ustunliklar · #fikrlar
   Otabek, 2026-08-07.

   00 (tokenlar), 01 (tugma/badge/karta/plita/input) va 08 (punktir+blur)
   allaqachon poydevorni qo'ygan. Bu fayl faqat SHU UCH BO'LIMGA XOS
   detallarni FlexFolio tiliga o'tkazadi:

     · #tamoyillar — «suzuvchi panel» o'rniga markazlashgan bo'lim boshi +
       bitta oq ro'yxat kartasi (FlexFolio narx kartasidagi "What's Included"
       ro'yxati bilan bir xil mantiq: nozik hairline, quyuq gorizontal ritm)
     · #ustunliklar — oq TASMA olib tashlanadi: FlexFolio'da kartalar sahifa
       fonidan YORUG'roq turadi, aksincha emas (ref-01)
     · #fikrlar — oq, chegarasiz, soyasiz kartalar; kursiv yo'q; yulduzchalar
       yagona aksent rangida

   Kaskad eslatmasi: bu bo'limlarni `parts/07`, `depth.css` va `harakat.css`
   ID zanjirlari bilan yozgan — quyida o'sha zanjirlar AYNAN takrorlanadi,
   aks holda kech yuklanish yolg'iz yetmaydi.
   ========================================================================== */


/* ==========================================================================
   0. UMUMIY — bo'lim boshi FlexFolio ritmida
   O'lchangan (SPEC §8.7): eyebrow → H2 → sub, keyin ~84px oraliq.
   `parts/07` uchala bo'limda ham 32–56px bergan — kengaytiriladi.
   ========================================================================== */
#tamoyillar .sec-head,
#ustunliklar .sec-head,
#fikrlar .sec-head{
  margin-bottom:clamp(40px, 5.8vw, 84px);
}


/* ==========================================================================
   1. TAMOYILLAR
   ========================================================================== */

/* --- 1.1 Bo'lim boshi MARKAZDA -------------------------------------------
   FlexFolio'ning imzo tartibi (SPEC §6.3) — barcha bo'lim boshlari markazda.
   `parts/07:22` uni panel ichida CHAPGA surgan; bu yerda qaytariladi. */
#tamoyillar .sec-head{
  align-items:center;
  text-align:center;
}

#tamoyillar .sec-head h2{
  max-width:20ch;
  margin-inline:auto;
}

/* --- 1.2 Panel — o'ram bo'lib qoladi, YUZA emas ---------------------------
   FlexFolio'da bo'lim boshi HAR DOIM sahifa fonida turadi, karta ichida emas.
   Shuning uchun `.pr-panel` shaffof o'ramga aylanadi, yuza esa ro'yxatning
   o'ziga beriladi (quyida). `.aw-panel` ni ff/01 yozgan — teng zanjir kerak. */
#tamoyillar .aw-panel.pr-panel{
  background:none;
  background-image:none;
  border:0;
  border-radius:0;
  padding:0;
  box-shadow:none;
  overflow:visible;                       /* ro'yxat kartasi soyasi kesilmasin */
}

/* --- 1.3 Ledger — bitta oq karta ------------------------------------------
   O'lchangan: oq (#FFFFFF — SPEC §1 da 54× uchraydigan asosiy yuza),
   katta panel radiusi 24px, ichki padding 30px atrofida.

   KENGLIK: ref-03 dagi "What's Included" ro'yxati 363px li TOR kartada
   turadi — matn qatorni TO'LDIRADI. 1200px o'ramda esa `.pr-row p` ning
   `--measure` (60ch ≈ 619px) chegarasi tufayli kartaning o'ng yarmi bo'm-bo'sh
   qolar edi. Shuning uchun karta markazlashtirilib 820px ga toraytiriladi:
   qator matn ustuni 696px bo'ladi va o'lchov chizig'i deyarli to'la ishlaydi. */
#tamoyillar .pr-ledger{
  max-width:820px;
  margin-inline:auto;
  background:var(--panel);
  border-radius:var(--r-xl);
  padding:clamp(20px, 2.4vw, 30px) clamp(20px, 2.6vw, 34px);
  box-shadow:var(--sh-1);
}

/* --- 1.4 Qator ------------------------------------------------------------
   `parts/07` grid ustunini 44px qilgan; raqam endi PILL bo'lgani uchun
   ustun kengayadi. Hairline `--line-soft` (rgba(30,13,1,.06)) — ref-03 dagi
   "What's Included" ajratgichi bilan bir xil zichlik. */
#tamoyillar .pr-row{
  grid-template-columns:56px minmax(0, 1fr);
  row-gap:8px;
  padding:24px 14px;
  border-bottom:1px solid var(--line-soft);
  border-radius:var(--r-md);
}

#tamoyillar .pr-row:first-child{ padding-top:18px; }
#tamoyillar .pr-row:last-child{ padding-bottom:18px; }

/* Chap apelsin chizig'i `harakat.css:42` da gradient bilan chizilgan —
   FlexFolio'da gradient chiziq yo'q, tekis aksent qoldiriladi. */
#tamoyillar .pr-row::before{
  width:2px;
  background:var(--blue);
  background-image:none;
}

/* ⚠️ `harakat.css:57` hover foniga BINAFSHA rgba(129,75,238,.08) ni QATTIQ
   yozgan (tokendan emas) — aynan shu zanjir takrorlanmasa binafsha qoladi. */
#tamoyillar .pr-row:hover{
  background:var(--panel-2);
  background-image:none;
}

/* --- 1.5 Raqam — mayda apelsin pill ---------------------------------------
   O'lchangan shakl tili: hamma mayda belgi to'liq pill (radius 100px).
   Fon `--blue-lo` (o'lchangan badge foni), matn `--blue-ink` (oq fonda 4.66:1). */
#tamoyillar .pr-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  justify-self:start;                      /* grid katagi 56px — pill cho'zilmasin */
  width:auto;
  min-width:34px;
  height:26px;
  padding:0 9px;
  border-radius:var(--r-pill);
  background:var(--blue-lo);
  color:var(--blue-ink);
  font-family:var(--body);
  font-size:13px;
  font-weight:600;
  line-height:1;
  letter-spacing:normal;
  margin-top:1px;                          /* h3 ning optik markazi bilan tenglashadi */
}

/* --- 1.6 Qator tipografikasi ----------------------------------------------
   MUHIM: FlexFolio'da karta/qator sarlavhalari Geist EMAS — Inter 20/500,
   ls -0.3px (SPEC §2). Geist faqat H1–H3 bo'lim sarlavhalarida. */
#tamoyillar .pr-row h3{
  font-family:var(--body);
  font-size:20px;
  font-weight:500;
  line-height:1.3;
  letter-spacing:-0.3px;
  color:var(--ink);
}

#tamoyillar .pr-row p{
  font-family:var(--body);
  font-size:16px;
  font-weight:500;
  line-height:1.55;
  letter-spacing:normal;
  color:var(--ink-mut);
}

@media (max-width:600px){
  #tamoyillar .pr-row{
    grid-template-columns:46px minmax(0, 1fr);
    padding:20px 10px;
  }
  #tamoyillar .pr-row h3{ font-size:18px; }
  #tamoyillar .pr-row p{ font-size:15px; }
}


/* ==========================================================================
   2. USTUNLIKLAR
   ========================================================================== */

/* --- 2.1 Oq TASMA olib tashlanadi -----------------------------------------
   `parts/07:113` bo'limga `background:var(--panel)` bergan — natijada oq
   tasma ustida #FAFAFA kartalar, ya'ni kartalar fondan QUYUQROQ chiqadi.
   FlexFolio'da (ref-01) aksincha: kulrang sahifa + undan yorug' kartalar.
   Bonus: punktir yo'naltiruvchilar (ff/08) uzilmasdan davom etadi. */
#ustunliklar{
  background:var(--page);
}

/* --- 2.2 Tarmoq ----------------------------------------------------------- */
#ustunliklar .adv-spine{
  gap:var(--gap);                          /* o'lchangan hukmron gap — 31px */
}

#ustunliklar .adv-card{
  gap:12px;
}

/* --- 2.3 Raqamli jeton — to'ldirilgan apelsin doira ------------------------
   `depth.css:389` uni `!important` bilan och gradient jetonga aylantirgan.
   FlexFolio kartasida bu o'rinda APELSIN belgi turadi (ref-01 dagi ikonka),
   shuning uchun jeton to'liq aksent rangida, tugma retsepti bilan.
   Doira = pill (radius 100px) — o'lchangan shakl tili. */
#ustunliklar .adv-dot{
  width:44px;
  height:44px;
  border-radius:var(--r-pill);
  background-color:var(--blue) !important;
  background-image:radial-gradient(55% 50% at 50% 46.2%, rgba(230,95,0,0) 0%, rgb(230,95,0) 100%) !important;
  color:#fff !important;
  /* `--sh-blue` haloi 44px jeton uchun juda kuchli — o'lchangan CTA tugmasi
     uchun mo'ljallangan. Ichki yorug'lik saqlanadi, halo kichraytiriladi. */
  box-shadow:inset 0 4px 4px #F97518, 0 4px 10px rgba(215,89,0,.22);
  font-family:var(--body);
  font-size:16px;
  font-weight:600;
  line-height:1;
  letter-spacing:normal;
  margin-bottom:20px;                      /* ref-01: plita → sarlavha oralig'i */
}

/* Karta hover'ida jeton sakramaydi — FlexFolio yuzalari sokin
   (`depth.css:400` translateY(-2px) + kuchli halo beradi) */
#ustunliklar .aw-card:hover .adv-dot{
  transform:none;
  box-shadow:inset 0 4px 4px #F97518, 0 4px 10px rgba(215,89,0,.22);
}

/* --- 2.4 Karta tipografikasi — Inter, Geist emas -------------------------- */
#ustunliklar .adv-card h3{
  font-family:var(--body);
  font-size:20px;
  font-weight:500;
  line-height:1.3;
  letter-spacing:-0.3px;
  color:var(--ink);
}

#ustunliklar .adv-card p{
  font-family:var(--body);
  font-size:16px;
  font-weight:500;
  line-height:1.55;
  letter-spacing:normal;
  color:var(--ink-mut);
}

/* Kursor «projektori» — o'lchovda FlexFolio yuzalarida topilmadi.
   Faqat SHU bo'limlarda o'chiriladi (global qoida boshqa agent qamrovida). */
#ustunliklar [data-spot]::before,
#fikrlar [data-spot]::before{
  display:none !important;
}

@media (max-width:600px){
  #ustunliklar .adv-card h3{ font-size:18px; }
  #ustunliklar .adv-card p{ font-size:15px; }
  #ustunliklar .adv-dot{ width:40px; height:40px; font-size:15px; margin-bottom:16px; }
}


/* ==========================================================================
   3. FIKRLAR
   ========================================================================== */

/* --- 3.1 Lenta ------------------------------------------------------------
   Harakat (`fk-scroll`) `parts/07` da — tegilmaydi. Faqat oraliq va
   chetlardagi so'nish FlexFolio konteyner ritmiga moslanadi. */
#fikrlar .fk-track{
  gap:var(--gap);
  padding-right:var(--gap);
  padding-block:0;                         /* soya yo'q — bo'sh joyga hojat yo'q */
}

/* --- 3.2 Karta ------------------------------------------------------------
   O'lchangan: oq yuza, karta radiusi 20px, CHEGARA YO'Q, SOYA YO'Q
   (SPEC §4 — o'lchovda ko'rinadigan chegarali element topilmadi;
   chuqurlik faqat yuza farqidan: #FFFFFF karta / #F5F5F5 sahifa).
   Kenglik 363px — o'lchangan 3-ustunli karta kengligi (SPEC §8.4),
   shuning uchun lentada aynan 3 ta karta konteyner tarmog'iga tushadi. */
#fikrlar .fk-card{
  width:363px;
  padding:30px;
  gap:16px;
  background:var(--panel);
  background-image:none;
  border:0;
  border-radius:var(--r-lg);
  box-shadow:none;
}

/* `depth.css:1037` va `:1041` hairline+soyani token orqali qaytaradi —
   hover holati ham tekislanadi, aks holda lenta ustida ko'z tortadi. */
#fikrlar .fk-card:hover{
  box-shadow:none;
}

/* Katta qo'shtirnoq — FlexFolio'da bunday tipografik bezak yo'q
   (`parts/07` allaqachon yashirgan; bu yerda faqat mustahkamlanadi). */
#fikrlar .fk-qmark{
  display:none !important;
}

/* --- 3.3 Avatar — to'liq dumaloq, iliq apelsin tint ------------------------
   O'lchangan: avatar radiusi 100px (pill oilasi). Fon `--blue-lo`, matn
   `--blue-ink` — oq fonda 4.66:1 (AA). */
#fikrlar .fk-ava{
  width:56px;
  height:56px;
  border-radius:var(--r-pill);
  background:var(--blue-lo);
  color:var(--blue-ink);
  font-family:var(--body);
  font-size:16px;
  font-weight:600;
  line-height:1;
  letter-spacing:normal;
  box-shadow:none;                         /* depth.css jeton soyasini tekislaydi */
}

/* --- 3.4 Ism va rol ------------------------------------------------------- */
#fikrlar .fk-who b{
  font-family:var(--body);
  font-size:16px;
  font-weight:500;
  line-height:1.4;
  letter-spacing:-0.3px;
  color:var(--ink);
}

#fikrlar .fk-who em{
  font-family:var(--body);
  font-style:normal;
  font-size:14px;
  font-weight:500;
  line-height:1.7;
  color:var(--ink-mut);
}

/* --- 3.5 Yulduzchalar ------------------------------------------------------
   QAROR: `--amber` (#f5b800) tokeni SAQLANADI (boshqa joyda reyting uchun
   kerak), lekin bu yerda aksent rangi qo'llanadi. Sabab: FlexFolio bitta
   aksentli tizim — o'lchovda #F97518 dan boshqa «diqqat» rangi topilmadi,
   sariq esa iliq-apelsin gammadan chiqib ketadi. */
#fikrlar .fk-stars{
  gap:5px;
}

#fikrlar .fk-stars i{
  width:15px;
  height:15px;
  background:var(--blue);
}

/* --- 3.6 Sitata ------------------------------------------------------------
   Kursiv olib tashlanadi: o'lchovda FlexFolio'da `font-style:italic`
   ishlatilgan matn topilmadi — hammasi tik Inter. */
#fikrlar .fk-card blockquote{
  font-family:var(--body);
  font-style:normal;
  font-size:16px;
  font-weight:500;
  line-height:1.55;
  letter-spacing:normal;
  color:var(--ink-mut);
}

@media (max-width:767px){
  #fikrlar .fk-card{
    width:82vw;
    max-width:363px;
    padding:24px;
  }
  #fikrlar .fk-card blockquote{ font-size:15px; }
}