/* ==========================================================================
   FF/04-XIZMAT-JARVIS.CSS — FlexFolio skin: #xizmatlar + #jarvis
   Otabek, 2026-08-07.

   Qamrov:
     · #xizmatlar — .svc-panel / .svc-grid / .svc-card / .svc-ico /
       .svc-stage / .svc-meta
     · butun MINI-DEMO maketlari (.mini, .ai-*, .mb-*, .tg-*, .vm-*,
       .lang-*, .sk, .chk, .mini-chip, .voice-msg, .msg-time)
     · #jarvis — .jv-head / .jv-highlight / .jvh-* / .jf-*

   REFERENS: ref/ref-02.jpg — FlexFolio'ning "Features" bo'limi aynan shu
   naqsh: och-kulrang karta ustida SUZUVCHI OQ "ekran" maketi. Maketning
   ichi butunlay NEYTRAL kulrang, apelsin esa maketda BITTA joyda — asosiy
   harakat tugmasida ("Genetrate"). Biz ham shu mantiqni tutamiz.

   00/01/02/08 da hal qilingan narsa bu yerda TAKRORLANMAYDI (tugma, badge,
   karta poydevori, plita fon/soyasi, input, tipografika shkalasi, punktir).
   Bu yerda faqat shu ikki bo'limga XOS detallar bor.
   ========================================================================== */


/* ==========================================================================
   0. MAKET PALITRASI — faqat mini-demolar ichida ishlatiladi
   Mini-demo "skrinshot" imitatsiyasi: unda brend rangi emas, neytral
   interfeys kulranglari bo'lishi kerak. Eski kodda bu joylar `--blue-lo`,
   `--line` va qotib qolgan binafshadan (`rgba(129,75,238,.18)`) rang olardi.
   Iliq neytral shkala #1E0D01 siyohidan olingan — sahifaning iliqligi
   maketning ichida ham saqlanadi.
   ========================================================================== */
#xizmatlar .mini{
  --mock-face:  #FFFFFF;                  /* maketning yuzasi */
  --mock-soft:  #F7F5F4;                  /* pufakcha, qator, panel */
  --mock-fill:  #EFECEA;                  /* skelet chiziq, rasm o'rni */
  --mock-edge:  #E4E0DC;                  /* eng quyuq neytral (ajratkich) */
}


/* ==========================================================================
   1. BO'LIM: #xizmatlar
   ========================================================================== */

/* O'ram paneli — kartalar tarmog'ini o'rab turgan yarim shaffof oq quti.
   O'lchangan: o'ram radius 24px, padding 24px (SPEC §8.4). Poydevori
   ff/01 dagi `.aw-panel` dan keladi; bu yerda faqat ichki ritm. */
.svc-panel{
  /* sarlavha bloki → kartalar tarmog'i oralig'i.
     Referensda (ref-02) sub-sarlavha pastidan birinchi kartagacha ≈56px. */
  gap:clamp(32px, 3.9vw, 56px);
}

#xizmatlar .sec-head{
  gap:18px;
}

/* Sarlavha eni — referensda H2 ikki qatorga siqiladi, cho'zilib ketmaydi */
#xizmatlar .sec-head h2{
  max-width:16ch;
}

#xizmatlar .sec-sub{
  max-width:600px;                        /* SPEC §2.6: lead maxi 600px */
}

.svc-grid{
  gap:var(--gap);                         /* 31px — o'lchangan hukmron gap */
}


/* --------------------------------------------------------------------------
   1.1 Karta
   Poydevor (fon #FAFAFA, radius 20, padding 30, soyasiz) ff/01 `.aw-card`
   dan keladi. Bu yerda faqat ichki vertikal ritm va tipografika.
   -------------------------------------------------------------------------- */
.svc-card{
  gap:14px;
}

/* Ikonka plitasi — SPEC §6.5: ~56px, radius 16px.
   ⚠️ `--r-sm` endi 100px; ff/01 plitani `border-radius:16px !important`
   bilan allaqachon qutqargan, bu yerda faqat O'LCHAM 40→56 ga o'sadi. */
.svc-ico{
  width:56px;
  height:56px;
}

.svc-ico svg{
  width:24px;
  height:24px;
}

/* KARTA SARLAVHASI — Geist EMAS, Inter.
   FlexFolio'da faqat bo'lim sarlavhalari (H1/H2/H3) Geist; karta ichidagi
   sarlavha Inter 20/500, ls -0.3px (SPEC §2). Bu ikkalasini bir-biridan
   ajratib turadigan asosiy tipografik qoida. */
.svc-card h3{
  font-family:var(--body);
  font-size:20px;
  font-weight:500;
  line-height:1.3;
  letter-spacing:-0.3px;
  color:var(--ink);
  margin-top:2px;
}

.svc-promise{
  font-family:var(--body);
  font-size:16px;
  font-weight:400;
  line-height:1.6;
  color:var(--ink-mut);
}

/* Pastki izoh qatori — ajratkich chizig'isiz (SPEC §4: ko'rinadigan
   chegara yo'q), faqat bo'sh joy bilan ajraladi */
.svc-meta{
  padding-top:18px;
  font-size:14px;
  line-height:1.6;
  color:var(--ink-mut);
}


/* --------------------------------------------------------------------------
   1.2 Demo sahnasi — kartada SUZUVCHI oq "ekran"
   Referensda (ref-02) maket kartaning fonidan ochroq, yumshoq soyali va
   16px radiusli. Eski kodda bu yer binafshaga moyil gradient edi
   (`linear-gradient(180deg,#faf6fb,#fffdff)` — depth.css:190) va ichkariga
   botiq soya olardi. FlexFolio'da aksincha: maket YUQORIGA suzadi.

   `box-shadow` elementning O'Z `overflow:hidden` iga bo'ysunmaydi, shuning
   uchun sahna kesuvchi bo'lib qolaveradi-yu, soyasi ham ko'rinadi.
   -------------------------------------------------------------------------- */
.svc-stage{
  background-color:#FFFFFF;
  background-image:none;
  border:0;
  border-radius:16px;
  box-shadow:var(--sh-1);
  margin-top:4px;
}

/* `.mini` sahnani to'liq qoplaydi — yuzani ikki marta bo'yamaymiz */
.svc-stage .mini{
  background:transparent;
  border-radius:16px;
  padding:16px;
}


/* ==========================================================================
   2. MINI-DEMOLAR — umumiy qatlam
   ========================================================================== */

/* Oyna tepasidagi "chrome" qatori — ajratkich chiziqsiz.
   Referensdagi brauzer maketida ham chrome ostida chiziq yo'q; ajralish
   faqat bo'sh joydan. */
.svc-stage .mb-bar,
.svc-stage .mini-chrome,
.svc-stage .ai-head{
  border-bottom:0;
  padding-bottom:0;
  margin-bottom:12px;
}

/* Traffic-light nuqtalari — neytral (brend rangi maketga kirmaydi).
   `--mock-fill` oq yuzada deyarli ko'rinmay qolgani uchun bir pog'ona
   quyuqroq `--mock-edge` olinadi. */
.svc-stage .mb-bar > i,
.svc-stage .mini-chrome > i{
  background:var(--mock-edge);
}

/* Tasdiq chipi — oq pill, chegarasiz (ff/01 `border:0` bergan) */
.svc-stage .mini-chip{
  padding:7px 12px;
  background:#FFFFFF;
  box-shadow:var(--sh-1);
  font-size:12px;
  color:var(--ink-mut);
}

/* Yashil emas, apelsin tasdiq belgisi — 14px doira ichida oq "✓" */
.mini-chip .chk,
.lang-meta .chk{
  background:var(--blue);
}

/* Telegram pufakchasi — 16px radius, bir burchagi "quyruq" uchun o'tkir */
.svc-stage .tg-bubble{
  border-radius:16px;
  font-size:13px;
  line-height:1.5;
}

.svc-stage .tg-bubble.left{
  background:var(--mock-soft);
  border-top-left-radius:6px;
}

.msg-time{
  color:rgba(30,13,1,.45);
}

.svc-stage .status-dot{
  background:var(--blue);
}


/* --------------------------------------------------------------------------
   2.1 MINI-AI (1-karta) — Jarvis suhbati
   -------------------------------------------------------------------------- */

.ai-head{
  font-family:var(--body);                /* maket ichidagi UI matni — Inter */
  font-size:14px;
  font-weight:500;
  letter-spacing:normal;
}

.ai-orb{
  width:20px;
  height:20px;
  background:linear-gradient(160deg, var(--blue-2) 0%, var(--blue) 100%);
}

.ai-on{
  font-size:12px;
  color:var(--ink-mut);
}

/* "24/7" belgisi — ff/01 uning chegarasini oldi, o'rniga och apelsin pill.
   Matn kichik (11px), shuning uchun rang `--blue-ink` (oq fonda 4.66:1). */
.ai-badge{
  padding:4px 9px;
  border-radius:100px;
  background:var(--blue-lo);
  color:var(--blue-ink);
  font-size:11px;
  font-weight:500;
}

/* Ovozli xabar — mijoz tomoni. Eski kodda chegarasi QOTIB QOLGAN
   binafsha edi: `rgba(129, 75, 238,.18)`. Endi chegarasiz och apelsin. */
.voice-msg{
  border:0;
  border-radius:16px;
  border-top-right-radius:6px;
  background:var(--blue-lo);
  padding:9px 13px;
}

.vm-play{
  background:var(--blue);
}

.vm-wave i{
  background:var(--blue);
}

.vm-len{
  font-size:11px;
  color:var(--blue-ink);
}

/* "Yozmoqda" nuqtalari */
.ai-typing{
  border-radius:16px;
  border-top-left-radius:6px;
  background:var(--mock-soft);
}

.ai-typing i{
  background:rgba(30,13,1,.35);
}


/* --------------------------------------------------------------------------
   2.2 MINI-BROWSER (2-karta) — referensdagi eng aniq mos keladigan maket
   ref-02 da: kulrang skeletlar, kulrang rasm o'rinlari va BITTA apelsin
   tugma. Eski kodda rasm o'rinlari `--blue-lo` (endi shaftoli) edi —
   maket "apelsin dog'lar" ga aylanardi. Neytralga qaytarildi.
   -------------------------------------------------------------------------- */

/* Manzil qatori — pill, chegarasiz */
.mb-url{
  padding:5px 12px;
  border-radius:100px;
  background:var(--mock-soft);
  border:0;
  font-size:12px;
  color:var(--ink-mut);
}

/* Skelet chiziqlar */
.sk{
  height:10px;
  border-radius:100px;
  background:var(--mock-fill);
}

/* Mahsulot kartachalari.
   ⚠️ `--r-sm` endi 100px — plita KAPSULA bo'lib qolardi. Ichki element
   uchun SPEC §3 dagi 12px qaytariladi. */
.mb-cards i{
  height:60px;
  border-radius:12px;
  background:var(--mock-soft);
  border:0;
}

.mb-cards i::before{
  border-radius:8px;
  background:var(--mock-fill);            /* rasm o'rni — neytral */
}

.mb-cards i::after{
  background:var(--mock-edge);
}

/* Yagona apelsin element — asosiy harakat tugmasi (ref-02 "Genetrate") */
.mb-cta{
  padding:10px 16px;
  border-radius:100px;
  background-color:var(--blue);
  background-image:radial-gradient(55% 50% at 50% 46.2%, rgba(230,95,0,0) 0%, rgb(230,95,0) 100%);
  color:#fff;
  font-family:var(--body);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:normal;
  box-shadow:inset 0 3px 3px #F97518, 0 6px 14px rgba(215,89,0,.22);
}

.mb-graph i{
  background:var(--blue);
  opacity:.85;
}

.mb-cursor{
  background:var(--ink);
  box-shadow:0 0 0 3px rgba(30,13,1,.08);
}

/* Xabarnoma — oq pill, chegarasiz, uch qatlamli yumshoq soya */
.mb-toast{
  border:0;
  border-radius:100px;
  background:#FFFFFF;
  box-shadow:var(--sh-1);
  font-size:12px;
  color:var(--ink);
}


/* --------------------------------------------------------------------------
   2.3 MINI-TG (3-karta) — katalog → to'lov
   -------------------------------------------------------------------------- */

.tg-product{
  border:0;
  border-radius:16px;
  border-top-right-radius:6px;
  background:var(--mock-soft);
  padding:9px 13px 9px 9px;
}

/* ⚠️ `--r-sm`=100px tufayli mahsulot rasmi TO'LIQ DOIRA bo'lib qolgan edi
   (brauzerda o'lchandi). Ichki element radiusi 12px. */
.tp-img{
  width:38px;
  height:38px;
  border-radius:12px;
  background:linear-gradient(160deg, var(--blue-2) 0%, var(--blue) 100%);
}

.tp-info b{
  font-family:var(--body);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:normal;
}

.tp-info em{
  font-size:11px;
  color:var(--ink-mut);
}

/* "1×" belgisi — chegara o'rniga neytral pill */
.tp-badge{
  padding:4px 9px;
  border-radius:100px;
  background:var(--mock-fill);
  color:var(--ink-mut);
  font-size:11px;
}

/* Klaviatura tugmalari — pill (SPEC §3: interaktiv element = 100px) */
.tg-kb span{
  padding:11px 10px;
  border-radius:100px;
  background:var(--mock-soft);
  border:0;
  font-family:var(--body);
  font-size:12.5px;
  font-weight:500;
  letter-spacing:normal;
  color:var(--ink-mut);
}

.tg-kb .kb-pay{
  background-color:var(--blue);
  background-image:radial-gradient(55% 50% at 50% 46.2%, rgba(230,95,0,0) 0%, rgb(230,95,0) 100%);
  color:#fff;
  font-weight:600;
  box-shadow:inset 0 3px 3px #F97518, 0 6px 14px rgba(215,89,0,.22);
}


/* --------------------------------------------------------------------------
   2.4 MINI-LANG (4-karta) — uch tilda javob
   -------------------------------------------------------------------------- */

/* ⚠️ `.lang-row` ham `--r-sm` dan radius olardi → qatorlar TO'LIQ KAPSULA
   bo'lib chiqqan edi. Panel-qator uchun 16px. */
.lang-row{
  padding:12px 14px;
  border-radius:16px;
  background:var(--mock-soft);
  border:0;
}

/* Til kodi — apelsin, LEKIN mayda matn (12px) uchun quyuqroq ohang:
   `--blue-ink` (#C2510A) oq-kulrang fonda 4.66:1 (AA), `--blue` esa 2.6:1. */
.lang-row b{
  font-family:var(--body);
  width:26px;
  font-size:12px;
  font-weight:600;
  letter-spacing:normal;
  color:var(--blue-ink);
}

.lang-row .msg{
  font-size:13px;
  color:var(--ink);
}

.lang-dots i{
  background:rgba(30,13,1,.35);
}

.lang-meta{
  font-size:12px;
  color:var(--ink-mut);
}


/* --------------------------------------------------------------------------
   2.5 Kartadagi ortiqcha bezaklar
   `[data-spot]::before` — kursor ortidan yuradigan nur. Uning gradienti
   depth.css:252 da QOTIB QOLGAN binafsha (`rgba(129,75,238,.10)`) va
   tokenga bog'lanmagan, ya'ni 00-tokens uni to'g'rilay olmaydi.
   FlexFolio yuzalari sokin — o'lchovda bunday effekt topilmadi.
   -------------------------------------------------------------------------- */
#xizmatlar [data-spot]::before,
#jarvis [data-spot]::before{
  display:none !important;
}

/* Kartaning hover'da ko'tarilishi ham FlexFolio'da yo'q — u yerda hover
   faqat yuzani ochartiradi. depth.css:230 `!important` bilan yozgan. */
#xizmatlar [data-tilt][data-reveal].in:hover,
#xizmatlar [data-tilt]:not([data-reveal]):hover,
#jarvis [data-tilt][data-reveal].in:hover,
#jarvis [data-tilt]:not([data-reveal]):hover{
  transform:none !important;
}


/* ==========================================================================
   3. BO'LIM: #jarvis
   ========================================================================== */

#jarvis .jv-head{
  gap:0;                                  /* .jv-orbit HTML dan olib
                                             tashlangan — gap egasiz qolgan */
}

#jarvis .jv-head .sec-head{
  gap:18px;
  max-width:780px;
}

#jarvis .jv-head .sec-sub{
  max-width:640px;                        /* markazlashgan lead — SPEC §8.7 */
}


/* --------------------------------------------------------------------------
   3.1 `.jv-highlight` — "Chatbot vs Jarvis"

   QAROR: bu blok TO'Q (#1E0D01) EMAS, OQ panel bo'lib qoladi.
   Sabab: referens skrinshotlarning birortasida (ref-00…ref-04) to'q blok
   yo'q — SPEC §1 da ham `#1E0D01` "kam ishlatiladi" deb belgilangan.
   FlexFolio urg'uni to'q fon bilan emas, SHAFTOLI TINT + APELSIN HALQA
   bilan beradi (ref-03, "Pro" tarif kartasi: krem fon + ingichka amber
   kontur, qo'shnilari esa neytral). Aynan shu naqsh bu yerga bir-bir
   tushadi: `.jvh-no` = neytral, `.jvh-yes` = shaftoli + apelsin halqa.
   -------------------------------------------------------------------------- */
#jarvis .jv-highlight{
  margin-top:clamp(48px, 5.8vw, 84px);
  background:#FFFFFF;                     /* .aw-panel ning .55 shaffofidan
                                             to'liq oq panelga — ustidagi
                                             #FAFAFA ustunlar ko'rinsin */
  background-image:none;
  border:0;
  border-radius:var(--r-xl);              /* 24px — katta panel */
  padding:clamp(24px, 3.2vw, 40px);
  box-shadow:none;
}

#jarvis .jvh-lead{
  font-family:var(--display);             /* panel ichidagi yagona Geist */
  font-size:clamp(20px, 1.8vw, 26px);
  font-weight:400;                        /* FlexFolio imzosi: yengil vazn */
  line-height:1.3;
  letter-spacing:-0.03em;
  color:var(--ink);
  max-width:26ch;
}

/* Ta'kid. `--acc-head` (#F2690D) oq fonda 3.09:1 — bu FAQAT "katta matn"
   uchun yetarli (≥24px/400). `.jvh-lead` esa clamp(20px,1.8vw,26px), ya'ni
   24px ga faqat ~1333px dan keng ekranda yetadi; undan tor joyda (planshet,
   mobil 19px) matn KICHIK hisoblanadi va 3.09:1 AA dan yiqiladi.
   Shuning uchun poydevor rang — `--blue-ink` (#C2510A, 4.66:1), yorqin
   `--acc-head` esa faqat shrift 24px dan oshadigan kenglikda yoqiladi. */
#jarvis .jvh-lead b{
  font-weight:400;
  color:var(--blue-ink);
}

@media (min-width:1340px){          /* 1.8vw ≥ 24.12px → AA large kuchga kiradi */
  #jarvis .jvh-lead b{ color:var(--acc-head); }
}

#jarvis .jvh-vs{
  margin-top:clamp(24px, 2.6vw, 36px);
  gap:var(--gap);
}

/* Ikkala ustun ham chegarasiz — SPEC §4 */
#jarvis .jvh-col{
  padding:26px;
  border:0;
  border-radius:var(--r-lg);              /* 20px — karta */
}

#jarvis .jvh-no{
  background:var(--panel-2);              /* #FAFAFA — neytral qo'shni */
}

/* Urg'u: shaftoli tint + ingichka apelsin halqa (ref-03 "Pro" kartasi).
   Halqa `box-shadow: inset` orqali — chegara maketni 1px surib yubormaydi. */
#jarvis .jvh-yes{
  background:var(--blue-50);              /* #FFF4EC */
  border:0;
  box-shadow:inset 0 0 0 1px rgba(249,117,24,.38);
}

/* Yorliq pill — neytral tomonda oq, urg'uli tomonda oq (shaftoli fonda
   oq pill kuchliroq ajraladi), matni quyuq apelsin (AA) */
#jarvis .jvh-tag{
  padding:6px 14px;
  margin-bottom:16px;
  border-radius:100px;
  background:#FFFFFF;
  border:0;
  box-shadow:var(--sh-1);
  font-size:13px;
  font-weight:500;
  color:var(--ink-mut);
}

#jarvis .jvh-yes .jvh-tag{
  background:#FFFFFF;
  color:var(--blue-ink);                  /* #C2510A — 13px matn uchun AA */
}

#jarvis .jvh-col p{
  font-family:var(--body);
  font-size:16px;
  font-weight:400;
  line-height:1.6;
  color:var(--ink-mut);
}


/* --------------------------------------------------------------------------
   3.2 `.jf-grid` — 4 ta xususiyat kartasi
   Poydevor ff/01 `.aw-card` dan (fon #FAFAFA, radius 20, padding 30).
   -------------------------------------------------------------------------- */

#jarvis .jf-grid{
  margin-top:var(--gap);
  gap:var(--gap);
}

#jarvis .jf-card{
  gap:10px;
}

#jarvis .jf-top{
  margin-bottom:8px;
}

/* Ikonka plitasi — SPEC §6.5: 56px. Radius/fon/soya ff/01 dan (`!important`
   bilan, chunki depth.css:281 ham `!important` yozgan). */
#jarvis .ib{
  width:56px;
  height:56px;
}

#jarvis .ib svg{
  /* 1-1-1 zanjiri parts/04-jarvis-bosh.css:301 da — aynan takrorlanadi */
  width:24px;
  height:24px;
}

/* Tartib raqami — Geist emas, Inter meta shkalasi */
#jarvis .jf-n{
  font-family:var(--body);
  font-size:14px;
  font-weight:500;
  letter-spacing:normal;
  color:rgba(30,13,1,.45);
}

/* Karta sarlavhasi — Inter (SPEC §2). 4 ustunli tor kartada 20px o'rniga
   18px: 277px kenglikda 20px sarlavha uch qatorga chiqib ketardi. */
#jarvis .jf-card h3{
  font-family:var(--body);
  font-size:18px;
  font-weight:500;
  line-height:1.3;
  letter-spacing:-0.27px;
  color:var(--ink);
}

#jarvis .jf-card p{
  font-family:var(--body);
  font-size:15px;
  font-weight:400;
  line-height:1.6;
  color:var(--ink-mut);
}


/* ==========================================================================
   4. RESPONSIV
   ========================================================================== */

@media (max-width:1079px){
  .svc-ico{ width:52px; height:52px; }
  #jarvis .ib{ width:52px; height:52px; }

  /* Planshet oynasi (768–1079px) — bu yerda tarmoq HAMON 2 ustunli, lekin
     karta 321px gacha torayadi va parts/03 sahnani 250px ga tushiradi.
     Brauzerda o'lchandi: 768–790px oralig'ida mini-ai ning tasdiq chipi
     sahnadan 9px pastga chiqib KESILADI (iPad portret aynan 768px).
     Sahnani 266px ga ko'tarish shu oynani yopadi; kengroq joyda esa
     faqat bir oz ko'proq bo'sh joy qoladi. */
  .svc-stage{ height:266px; }
}

@media (max-width:767px){
  /* Mobil kartada plita kichrayadi, aks holda sarlavhani pastga siqadi */
  .svc-ico{ width:48px; height:48px; }
  .svc-ico svg{ width:22px; height:22px; }
  #jarvis .ib{ width:48px; height:48px; }
  #jarvis .ib svg{ width:22px; height:22px; }

  /* 390px ekranda karta eni 302px — ff/01 dagi 30px padding ichki maydonni
     242px ga tushiradi va mini-demo siqilib qoladi. Mobilda 20px. */
  .svc-card{ gap:12px; padding:20px; }
  .svc-card h3{ font-size:19px; }
  .svc-promise{ font-size:15px; }

  /* Brauzerda o'lchandi: mobilda 1-kartaning sahnasi (mini-ai) 240px ga
     sig'may, tasdiq chipi 30px kesilib qolardi. Sahna balandligi va
     pufakcha zichligi shu farqni yopadi. */
  .svc-stage{ height:274px; }
  .svc-stage .mini{ padding:14px; }
  .svc-stage .tg-bubble{ font-size:12.5px; line-height:1.45; }

  #jarvis .jv-highlight{ padding:20px; border-radius:var(--r-xl-m); }
  #jarvis .jvh-lead{ font-size:19px; max-width:none; }
  #jarvis .jvh-col{ padding:20px; }
  #jarvis .jvh-tag{ margin-bottom:12px; }
  #jarvis .jf-card{ padding:22px; }
  #jarvis .jf-card h3{ font-size:19px; }
}