/* ==========================================================================
   FF/05-LANES-JARAYON-ISHLAR.CSS — FlexFolio skin
   Qamrov: gorizontal lenta (.lanes) · isbot ro'yxati (.jv-proof) ·
           apelsin CTA banneri (.jv-cta) · #jarayon · #ishlar
   Otabek, 2026-08-07.

   00-tokens ranglarni, 01-primitives esa tugma/badge/karta/plita/input
   poydevorini allaqachon hal qildi. Bu fayl faqat SHU BO'LIMLARGA XOS
   detallarni yozadi va parts/05 + parts/06 + depth.css + harakat.css
   qoldirgan binafsha izlarni tozalaydi.

   Uch tamoyil (o'lchangan spec §1, §4, §6):
     · FlexFolio'da TO'LIQ KENGLIKDAGI KONTRAST TASMA yo'q — sahifa bitta
       tekis #F5F5F5, chuqurlik faqat karta yuzasi va iliq nurdan keladi.
       Shuning uchun `.lanes` va `#ishlar` ning oq tasmalari olib tashlanadi.
     · Ko'rinadigan chegara yo'q — chegara o'rniga inset halqa.
     · Karta sarlavhasi Geist EMAS, Inter 20/500 (spec §2).
   ========================================================================== */


/* ==========================================================================
   1. `.lanes` — OQ TASMA OLIB TASHLANADI
   parts/05:14 blokni `--panel` bilan bo'yab, ustiga ikkita 1px chegara
   qo'ygan. FlexFolio'da bunday tasma yo'q: lenta bevosita sahifa foni
   ustida suzadi, kartalar esa #FAFAFA bilan ajralib turadi.
   `margin-top:var(--band) !important` (parts/05:29) — JS pin matematikasi
   unga bog'liq, TEGILMAYDI.
   ========================================================================== */
.lanes{
  background:transparent;
  border-top:0;
  border-bottom:0;
}

/* Sarlavha bloki: eyebrow → h3. Referensda eyebrow bilan sarlavha orasi
   ~24px, sarlavha esa YENGIL vaznda va zich tracking bilan (spec §2 H3). */
.lanes-head{ gap:22px; }

.lanes-head .jv-sub{
  font-family:var(--display);
  font-weight:400;                        /* qalin sarlavha FlexFolio'da yo'q */
  font-size:clamp(28px, 2.9vw, 36px);
  line-height:1.2;
  letter-spacing:-0.03em;                 /* o'lchangan H3: -1.08px @36px */
  color:var(--ink);
  max-width:20ch;
}


/* --- 1.1 Lenta kartasi -------------------------------------------------- */
.ls-card{
  width:340px;                            /* 320 → 340: padding 30px bo'lgach
                                             matn qatori juda tor qolardi */
  border-radius:var(--r-lg);              /* 20px — o'lchangan karta radiusi */
  padding:30px;
}

.ls-top{ margin-bottom:22px; }

/* Ikonka plitasi: shakl/rang 01-primitives `.ib` dan, O'LCHAM esa
   ff/04 dagi `#jarvis .ib` (56px, spec §6.5) dan keladi — `.lanes` va
   `.jv-proof` ikkalasi ham `#jarvis` ichida, ya'ni 1-1-0 zanjir bu yerdagi
   har qanday 0-2-0 ni yengadi. Shuning uchun bu faylda o'lcham YOZILMAYDI:
   ikki xil qiymat bo'lsa, biri jim o'lik qoida bo'lib qolardi. */

/* Tartib raqami — Geist emas, mayda muted Inter meta (spec §2).
   DIQQAT: rangi TOKENDAN olinadi. Qo'lda yozilgan rgba(30,13,1,.35) bu yerda
   sinovdan o'tmadi: #FAFAFA karta ustida u atigi 2.25:1 beradi (parts/05 dagi
   `--ink-dim` esa 4.9:1 edi) — ya'ni uslub almashuvi kontrastni AA dan
   pastga tushirardi. `--ink-dim` (rgba(30,13,1,.60)) FlexFolio'ning o'z
   meta rangi bilan ayni va ierarxiyani 13px o'lcham saqlab turadi. */
.ls-num{
  font-family:var(--body);
  font-size:13px;
  font-weight:500;
  letter-spacing:normal;
  color:var(--ink-dim);
}

/* KARTA SARLAVHASI — spec §2: Inter 20/500, ls -0.3px (Geist EMAS) */
.ls-title{
  font-family:var(--body);
  font-size:20px;
  font-weight:500;
  line-height:1.25;
  letter-spacing:-0.3px;
  color:var(--ink);
}

.ls-body{
  font-size:15px;
  font-weight:500;                        /* Inter'ning bazaviy vazni 500 */
  line-height:1.55;
  color:var(--ink-mut);
}

/* Ajratgich — referensdagi narx kartasi ro'yxatidagi hairline bilan bir xil */
.ls-rule{
  background:rgba(30,13,1,.08);
  margin:20px 0 18px;
}

.ls-list li{
  font-size:14px;
  font-weight:500;
  line-height:1.6;
  padding-left:18px;
  color:var(--ink-mut);
}

.ls-list li::before{
  top:9px;
  width:5px;
  height:5px;
  background:var(--blue);                 /* apelsin nuqta */
}


/* --- 1.2 Progress indikatori — APELSIN ---------------------------------- */
/* JS `transform:scaleX()` yozadi — bu yerda faqat rang/o'lcham. */
.lanes-progress{
  height:4px;
  border-radius:100px;
  background:rgba(30,13,1,.08);
}

.lanes-bar{
  background:linear-gradient(90deg, #F97518 0%, #FF4D00 100%);
  border-radius:100px;
}


/* ==========================================================================
   2. "Jarvis allaqachon ishlayapti" — o'ram + ichki kartalar
   O'lchangan naqsh (spec §8.4): kartalar SHAFFOF-OQ o'ram ichida
   (`rgba(255,255,255,.24)`, radius 24, padding 24), kartalarning o'zi esa
   o'ramdan bir pog'ona TO'QROQ. Chuqurlik shu ikki yuza farqidan.
   ========================================================================== */
.jv-proof{
  background:rgba(255,255,255,.45);
  background-image:none;
  border:0;
  border-radius:var(--r-xl);              /* 24px */
  padding:clamp(28px, 3.6vw, 48px);
  box-shadow:none;
}

/* Bo'lim boshi — H3 shkalasi, yengil vazn */
.jv-proof .jv-sub{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(28px, 2.9vw, 36px);
  line-height:1.2;
  letter-spacing:-0.03em;
  color:var(--ink);
}

/* Sub — o'lchangan lead: Inter 18/500, ls -0.36px */
.jv-proof-intro{
  font-size:18px;
  font-weight:500;
  line-height:1.4;
  letter-spacing:-0.36px;
  color:var(--ink-mut);
  max-width:56ch;
  margin-top:16px;
}

.jv-proof-list{ margin-top:clamp(32px, 3.9vw, 48px); }

.pf-card{
  background:var(--page);                 /* o'ramdan bir pog'ona to'qroq */
  background-image:none;
  border:0;
  border-radius:var(--r-lg);
  padding:20px;
  gap:16px;
  box-shadow:none;
}
.pf-card:hover{
  background:#FFFFFF;
  box-shadow:none;
}

/* Qalin bo'lak — karta sarlavhasi rolida, lekin `.ls-title`/`.step h3` dan
   bir pog'ona kichik (17px): `.pf-card` — 6 tali zich ro'yxat, 20px bu yerda
   ikki qatorga chiqib ketardi. Shrift/vazn/tracking oilasi bir xil. */
.pf-card b{
  font-family:var(--body);
  font-size:17px;
  font-weight:500;
  line-height:1.3;
  letter-spacing:-0.25px;
  color:var(--ink);
  margin-bottom:5px;
}

.pf-card p{
  font-size:14px;
  font-weight:500;
  line-height:1.55;
  color:var(--ink-mut);
}


/* ==========================================================================
   3. `.jv-cta` — APELSIN MESH BANNERI (spec §6.6, referens ref-04)
   --------------------------------------------------------------------------
   MESH FONI BU YERDA YOZILMAYDI. `.jv-cta` — `.aw-cta` ning bir ko'rinishi;
   apelsin mesh va uning kontrast pardasi (`--cta-scrim`) ff/07 da bir marta,
   ikkala banner (`.jv-cta` va `.cta-panel`) uchun umumiy qilib yozilgan.
   Ikki faylda ikki xil mesh bo'lsa, ff/07 kechroq yuklangani uchun bu
   yerdagisi jim o'lik qoida bo'lib qolardi. Bu yerda faqat `.jv-cta` GA
   XOS narsalar: ritm va `.jv-cta-*` matn sinflari (ular `.aw-cta > p`
   selektoriga tushmaydi, chunki `.jv-cta-copy` ichida turadi).
   ========================================================================== */
.jv-cta{
  padding:clamp(56px, 6.4vw, 92px) clamp(24px, 4vw, 64px);
  gap:clamp(28px, 3.2vw, 36px);
}

/* Sarlavha — o'lchangan to'q CTA H2: Geist 44/500, ls -1.32px, lh 1.1 */
.jv-cta .jv-cta-title{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(28px, 3.05vw, 44px);
  line-height:1.1;
  letter-spacing:-0.03em;
  color:#fff;
}

.jv-cta .jv-cta-sub{
  font-family:var(--body);
  font-size:18px;
  font-weight:500;
  line-height:1.5;
  letter-spacing:-0.36px;
  color:#fff;                             /* alfa yo'q — kontrastni yemaydi */
  margin-top:16px;
}

/* Bannerdagi OQ PILL tugma (referensdagi "Build My Site") ham ff/07 da —
   `.aw-cta .btn-*` zanjiri bilan, ikkala banner uchun bir marta.
   parts/05:341 dagi `.jv-cta .btn-primary` yarim shaffof oq + chegara edi;
   u ff/07 ning teng spetsifikli, kechroq yuklangan qoidasi bilan almashadi. */


/* ==========================================================================
   4. #JARAYON
   ========================================================================== */

/* Bo'lim boshi: eyebrow → H2 → 84px oraliq → tarmoq (spec §8.7) */
#jarayon .sec-head{
  gap:20px;
  margin:0 auto clamp(48px, 5.8vw, 84px);
}

/* `.h2-accent` rangi 01-primitives'da `--acc-head` ga sozlangan;
   parts/06:34 dagi `color:var(--blue)` shu yerda tenglashtiriladi. */
#jarayon .sec-head .h2-accent,
#ishlar .sec-head .h2-accent{
  color:var(--acc-head);
  font-style:normal;
}


/* --- 4.1 Reyl ----------------------------------------------------------- */
/* DIQQAT: `.proc-rail` parts/06:53 da `position:absolute` — u `.steps`
   grid'ining birinchi farzandi. Bu yerda `position` YOZILMAYDI, aks holda
   reyl grid katakchasini egallab, 04-kartani keyingi qatorga tushiradi. */
.proc-rail{
  height:2px;
  border-radius:100px;
  background:rgba(30,13,1,.08);
}

.proc-rail > i,
#proc-fill{
  border-radius:100px;
  background:linear-gradient(90deg, #F97518 0%, #FF4D00 100%);
}

/* harakat.css:136 reyl bo'ylab BINAFSHA yugurikni chizadi — apelsinga */
.proc-rail::after{
  background:linear-gradient(90deg, transparent, rgba(249,117,24,.7), transparent);
}


/* --- 4.2 Bosqich kartasi ------------------------------------------------ */
.step{ gap:16px; }

/* Raqam — kichkina PILL (spec §3: interaktiv/belgi elementlar 100px).
   depth.css:390 uni `!important` bilan binafsha jeton qilgan
   (`background`+`color`) — teng kuch bilan qaytariladi. */
.step-num{
  width:auto;
  min-width:38px;
  height:30px;
  padding:0 12px;
  border-radius:100px;
  background:var(--blue-lo) !important;   /* rgba(249,117,24,.10) */
  color:var(--blue-ink) !important;       /* #C2510A — oq fonda 4.66:1 */
  box-shadow:inset 0 0 0 1px rgba(249,117,24,.22);
  font-family:var(--body);
  font-size:13px;
  font-weight:600;
  letter-spacing:normal;
}

/* JS scroll-narrativi: yoqilgan bosqich to'liq apelsin bo'ladi.
   parts/06:107 `!important` siz yozilgan edi — depth uni bosib turardi,
   ya'ni "lit" holati umuman ko'rinmasdi. Endi ishlaydi va ko'rinishi
   01-primitives dagi `.wk-tab.active` bilan AYNI (bir xil radial retsept) —
   saytda "faol pill" bitta shaklga ega bo'lsin. */
.step.lit .step-num{
  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;
  box-shadow:var(--sh-blue);
}

/* Hover'da binafsha halo — iliq neytralga */
.aw-card:hover .step-num,
.step:hover .step-num{
  transform:none;
  box-shadow:inset 0 0 0 1px rgba(249,117,24,.34);
}

/* Karta sarlavhasi — Inter 20/500 */
.step h3{
  font-family:var(--body);
  font-size:20px;
  font-weight:500;
  line-height:1.25;
  letter-spacing:-0.3px;
  color:var(--ink);
}

/* Kun-pill — oq tabletka, chegara emas inset halqa */
.step-day{
  padding:4px 11px;
  border-radius:100px;
  background:#FFFFFF;
  border:0;
  box-shadow:inset 0 0 0 1px rgba(30,13,1,.08);
  font-size:12px;
  font-weight:500;
  line-height:1.4;
  letter-spacing:normal;
  color:var(--ink-mut);
}

.step p{
  font-size:15px;
  font-weight:500;
  line-height:1.6;
  color:var(--ink-mut);
}


/* ==========================================================================
   5. #ISHLAR
   ========================================================================== */

/* Oq tasma va ikki chegara olib tashlanadi — sahifa bitta tekis yuza.
   Bo'limlar orasidagi ajratgichni 08-signature ning punktir chizig'i beradi. */
#ishlar{
  background:transparent;
  border-top:0;
  border-bottom:0;
}

/* FlexFolio'da HAR BIR bo'lim boshi markazlashgan (spec §6.3) —
   parts/06:166 uni chapga tekislagan, o'sha zanjir takrorlanadi. */
#ishlar .sec-head{
  align-items:center;
  text-align:center;
  gap:20px;
  max-width:var(--head-w);
  margin:0 auto clamp(40px, 4.8vw, 64px);
}

#ishlar .sec-head h2{ max-width:22ch; }

#ishlar .sec-sub{
  margin-inline:auto;
  max-width:56ch;
}


/* --- 5.1 Filtr tab'lari ------------------------------------------------- */
/* Pill poydevori 01-primitives'da. Bu yerda faqat qator va o'lcham. */
.wk-tabs{
  justify-content:center;                 /* markazlashgan bo'lim boshi ostida */
  gap:12px;
  margin-bottom:clamp(32px, 3.6vw, 48px);
}

.wk-tab{
  min-height:42px;
  padding:11px 20px;
  font-size:15px;
  line-height:20px;
}


/* --- 5.2 Loyiha kartasi ------------------------------------------------- */
.work-card{
  gap:20px;
  padding:24px;                           /* media maydoniga nafas beradi */
}

.work-visual{
  height:200px;
  border-radius:16px;                     /* o'lchangan: ichki panel 16px */
  border:0;
  box-shadow:inset 0 0 0 1px rgba(30,13,1,.05);
}

/* depth.css:924 dagi oq yaltirash — FlexFolio'da `--gloss:none`,
   shuning uchun juda yumshoq qilib qoldiriladi (butunlay o'chirilsa
   harakat.css hover'i ham ma'nosini yo'qotadi). */
.work-visual::after{
  background:radial-gradient(120% 120% at 12% 0%, rgba(255,255,255,.42), transparent 62%);
}
.work-card:hover .work-visual::after{
  background:radial-gradient(120% 120% at 12% 0%, rgba(255,255,255,.58), transparent 64%);
}

/* Muqovalar BINAFSHA edi (depth.css:933) — apelsin/shaftoli oilaga o'tkazildi.
   To'rttasi bir-biridan farq qiladi: shaftoli · qizg'ish · ambr · marjon. */
.wv-1{ background-image:linear-gradient(150deg, #FFE9D4 0%, #FFF6EC 56%, #FFE3C9 100%); }  /* shaftoli */
.wv-2{ background-image:linear-gradient(150deg, #FFDCC6 0%, #FFEFE3 56%, #FFDCC9 100%); }  /* qizg'ish */
.wv-3{ background-image:linear-gradient(150deg, #FFEFCE 0%, #FFF9EA 56%, #FFEAC2 100%); }  /* ambr */
.wv-4{ background-image:linear-gradient(150deg, #FFDED0 0%, #FFF1EA 56%, #FFDFD3 100%); }  /* marjon */

/* Raqam — depth.css:938 uni gradient-clip bilan shaffof matn qilgan.
   Uch xossani BIRGA qaytarish shart, aks holda matn yo'qoladi. */
.wv-num{
  background:none;
  background-image:none;
  -webkit-background-clip:border-box;
          background-clip:border-box;
  -webkit-text-fill-color:rgba(30,13,1,.16);
  color:rgba(30,13,1,.16);
  font-family:var(--display);
  font-size:44px;
  font-weight:500;                        /* qalin sarlavha yo'q (spec §2) */
  letter-spacing:-0.04em;
}


/* --- 5.3 Karta matni ---------------------------------------------------- */
.work-info{ gap:12px; }

.work-info h3{
  font-family:var(--body);
  font-size:20px;
  font-weight:500;
  line-height:1.25;
  letter-spacing:-0.3px;
  color:var(--ink);
}

/* Kategoriya tegi — och apelsin pill (hero badge bilan bir oilada) */
.work-tag{
  min-height:28px;
  padding:5px 12px;
  border-radius:100px;
  background:var(--blue-lo);
  color:var(--blue-ink);
  font-family:var(--body);
  font-size:13px;
  font-weight:500;
  line-height:1.4;
  letter-spacing:normal;
}

.work-info p{
  font-size:15px;
  font-weight:500;
  line-height:1.6;
  color:var(--ink-mut);
}


/* --- 5.4 Filtr holatlari ------------------------------------------------ */
/* `.wk-pop` — filtr bosilganda karta qaytib chiqadi. FlexFolio yuzalari
   sokin, shuning uchun sakrash qisqartiriladi (8px → 6px, .45s → .38s). */
.wk-pop{ animation-duration:.38s; }

@keyframes wkPop{
  from{ opacity:0; transform:translateY(6px); }
  to{   opacity:1; transform:none; }
}

.wk-empty p{
  font-size:15px;
  font-weight:500;
  color:var(--ink-mut);
}

.works-more{ margin-top:clamp(32px, 3.6vw, 48px); }


/* ==========================================================================
   6. MOBIL
   ========================================================================== */
@media (max-width:767px){
  .lanes-head .jv-sub,
  .jv-proof .jv-sub{ font-size:26px; letter-spacing:-0.02em; }

  .jv-proof{ padding:24px 20px; }
  .jv-proof-intro{ font-size:16px; }

  .jv-cta{ padding:44px 20px; }
  .jv-cta .jv-cta-sub{ font-size:16px; }

  .ls-card{ padding:24px; }
  .ls-title{ font-size:18px; }

  .step h3,
  .work-info h3{ font-size:18px; }

  .work-card{ padding:20px; }
  .work-visual{ height:170px; }
  .wv-num{ font-size:36px; }

  .wk-tabs{ gap:8px; margin-bottom:24px; }
  .wk-tab{ min-height:38px; padding:9px 15px; font-size:14px; }
}

@media (max-width:760px){
  .ls-card{ width:min(340px, 84vw); }
}