/* ==========================================================================
   FF/01-PRIMITIVES.CSS — FlexFolio skin: TUGMA · BADGE · KARTA · PLITA · INPUT
   Otabek, 2026-08-07.

   00-tokens.css ranglarni hal qildi. Bu fayl SHAKLni hal qiladi:
     · hamma interaktiv element to'liq pill (radius 100px)
     · chegara YO'Q — chuqurlik yuza farqi va juda yumshoq soyadan
     · sarlavhalardagi gradient-matn zanjiri uziladi
     · saazi'ning yaltirash / spotlight / ripple bezaklari o'chiriladi
       (FlexFolio yuzalari sokin — o'lchovda bunday effekt topilmadi)
   ========================================================================== */


/* ==========================================================================
   1. BEZAK O'CHIRISH RO'YXATI
   Bular saazi'ning "chuqurlik" qatlamidan — FlexFolio'da yo'q.
   ========================================================================== */
.btn::after,
.btn::before,
.btn-ripple,
.aw-card::after,
.svc-card::after,
.work-card::after,
.ls-card::after,
.cp-glow,
.jv-beam,
.svc-dots{
  display:none !important;
}


/* ==========================================================================
   2. TUGMALAR — o'lchangan: balandlik 49–51px, radius 100px,
   padding `12px 16px 12px 21px`, Inter 16/600
   ========================================================================== */
.btn{
  border-radius:100px;
  min-height:49px;
  padding:14px 24px;
  border:0;
  gap:8px;
  font-family:var(--body);
  font-size:16px;
  font-weight:600;
  line-height:20px;
  letter-spacing:normal;                  /* depth.css:423 dagi -0.005em bekor */
  overflow:visible;
  text-shadow:none;
}

.btn-lg{ min-height:51px; padding:16px 28px; border-radius:100px; }
.btn-block{ border-radius:100px; }
.btn > svg{ width:16px; height:16px; opacity:1; }

/* --- 2.1 Asosiy: apelsin pill.
   O'lchangan: radial gradient + ichki yuqori yorug'lik + rangli halo. */
.btn-primary,
.btn-blue{
  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;
  border:0;
  box-shadow:var(--sh-blue);
}
.btn-primary:hover,
.btn-blue:hover{
  background-color:#FF8531;
  background-image:radial-gradient(55% 50% at 50% 46.2%, rgba(214,86,0,0) 0%, rgb(214,86,0) 100%);
  color:#fff;
  box-shadow:var(--sh-blue-hi);
}
.btn-primary:active,
.btn-blue:active{ box-shadow:var(--sh-blue-press); }

/* --- 2.2 Ikkilamchi: oq pill --- */
.btn-secondary,
.btn-light,
.btn-ghost{
  background:#FFFFFF;
  background-image:none;
  color:var(--ink);
  border:0;
  box-shadow:var(--sh-1);
}
.btn-secondary:hover,
.btn-light:hover,
.btn-ghost:hover{
  background:#FFFFFF;
  color:var(--ink);
  box-shadow:var(--sh-3);
}

/* Hero tugmalari ikki faylda ID zanjiri bilan yozilgan (1-2-0) —
   bu yerda AYNAN o'sha zanjir takrorlanadi, aks holda yengib bo'lmaydi. */
#hero .hero-ctas .btn-primary{
  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;
  border:0;
  box-shadow:var(--sh-blue);
}
#hero .hero-ctas .btn-ghost,
#hero .hero-ctas .btn-secondary{
  background:#FFFFFF;
  background-image:none;
  color:var(--ink);
  border:0;
  box-shadow:var(--sh-1);
}

/* Apelsin banner ichidagi oq tugma */
.aw-cta .btn-secondary,
.aw-cta .btn-light,
.aw-cta .btn-ghost{
  background:#FFFFFF;
  color:var(--ink);
  box-shadow:0 10px 30px rgba(0,0,0,.16);
}

/* Mobil menyudagi tugma qattiq yozilgan (1-2-1) — takrorlaymiz */
#mobile-menu nav a.btn{
  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;
  border-radius:100px;
  box-shadow:var(--sh-blue);
}


/* ==========================================================================
   3. EYEBROW / BADGE — o'lchangan: 38px balandlik, radius 100px,
   padding `7px 16px 7px 10px`, oq fon, mayda nuqta
   ========================================================================== */
.eyebrow,
.aw-eyebrow{
  gap:8px;
  min-height:38px;
  padding:7px 16px 7px 10px;
  border-radius:100px;
  background:#FFFFFF;
  background-image:none;
  border:0;
  box-shadow:var(--sh-1);
  font:500 15px/1.4 var(--body);
  letter-spacing:normal;
  color:var(--ink);
}

.eyebrow::before,
.aw-eyebrow::before{
  width:8px;
  height:8px;
  border-radius:100px;
  background:var(--blue);
  background-image:none;
  box-shadow:none;
  /* depth.css:1154 `dp-pulse` keyframe box-shadow ni QAYTA YOZADI —
     statik `box-shadow:none` yolg'iz yetmaydi, animatsiya o'chiriladi */
  animation:none !important;
}


/* ==========================================================================
   4. SARLAVHA TA'KIDI — gradient-matn zanjirini uzish
   `rang.css:19` va `depth.css:1255` uni uch qatlamda yozadi:
   `background-image` + `background-clip:text` + `-webkit-text-fill-color`.
   Uchalasini birga qaytarmasa matn ko'rinmay qoladi.
   Selektorlar AYNAN rang.css dagidek takrorlanadi (spetsifiklik tengligi).
   ========================================================================== */
#hero-h1 .h1-accent,
#jarvis .jv-head .h2-accent,
#jarayon .sec-head .h2-accent,
#ishlar .sec-head .h2-accent,
#ustunliklar .sec-head .h2-accent,
.h1-accent,
.h2-accent{
  background-image:none !important;
  background:none;
  -webkit-background-clip:border-box !important;
          background-clip:border-box !important;
  -webkit-text-fill-color:var(--acc-head) !important;
  color:var(--acc-head);
  font-style:normal;
  font-weight:inherit;
}

/* Statistika raqamlari ham gradient-clip bilan yozilgan (@supports ichida) */
#trust .stat-num,
.stat-num{
  background-image:none !important;
  -webkit-background-clip:border-box !important;
          background-clip:border-box !important;
  -webkit-text-fill-color:var(--ink) !important;
  color:var(--ink);
  font-family:var(--display);
  font-weight:500;
  letter-spacing:-0.04em;
}


/* ==========================================================================
   5. KARTA VA PANEL
   O'lchangan: karta radius 20px, padding 30px, chegara YO'Q, soya YO'Q.
   Chuqurlik faqat yuza farqidan (#FAFAFA karta / #F5F5F5 sahifa + iliq nur).
   ========================================================================== */
/* Karta OQ. Referensda karta `#F5F5F5` — sahifa foni bilan bir xil — va u
   faqat ortidagi kuchli shaftoli nur tufayli ajralib turadi. Bizda nur
   yumshoqroq, shuning uchun teskari yo'l tanlandi: karta neytral-OQ, o'ram
   esa yarim shaffof. Natija bir xil (karta sokin, atrofi rangli), lekin
   nur bo'lmagan bo'limlarda ham karta yo'qolib ketmaydi.
   Qolaversa `#FFFFFF` — referensda eng ko'p uchraydigan yuza (54 marta). */
.aw-card{
  background:#FFFFFF;
  background-image:none;
  border:0;
  border-radius:var(--r-lg);
  padding:30px;
  box-shadow:none;
}
.aw-card:hover{
  background:#FFFFFF;
  box-shadow:var(--sh-1);
}

/* O'ram — o'lchangan `rgba(255,255,255,.24)` */
.aw-panel{
  background:rgba(255,255,255,.24);
  background-image:none;
  border:0;
  border-radius:var(--r-xl);
  padding:24px;
  box-shadow:none;
}

.aw-grid-2,
.aw-grid-3,
.aw-grid-4{ gap:var(--gap); }


/* ==========================================================================
   6. IKONKA PLITASI — o'lchangan: oq, radius 16px, ~56px, yumshoq soya
   `depth.css:279` uni `!important` bilan yozadi — teng kuch kerak.
   ========================================================================== */
.ib,
.svc-ico,
#hero .hc-ico{
  border-radius:16px !important;
  background:#FFFFFF !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:var(--sh-1) !important;
}

.ib svg,
.svc-ico svg,
#hero .hc-ico svg{
  fill:var(--blue) !important;
  color:var(--blue) !important;
}

.aw-card:hover .ib,
.aw-card:hover .svc-ico,
#hero .hero-card:hover .hc-ico{
  transform:none;
  box-shadow:var(--sh-3) !important;
}


/* ==========================================================================
   7. INPUTLAR — pill; `depth.css` ularni IKKI bosqichda yozadi,
   ikkala daraja ham qaytariladi
   ========================================================================== */
input[type="text"],
input[type="tel"],
input[type="email"],
select,
.lead-card .field input,
.lead-card input[type="text"],
.lead-card input[type="tel"],
.lead-card input[type="email"],
.lead-card select{
  border-radius:100px;
  border:0;
  background:var(--panel-2);
  box-shadow:inset 0 0 0 1px var(--line);
  font-family:var(--body);
  font-size:16px;
  font-weight:500;
  color:var(--ink);
  min-height:49px;
}

textarea,
.lead-card textarea{
  border-radius:20px;
  border:0;
  background:var(--panel-2);
  box-shadow:inset 0 0 0 1px var(--line);
  font-family:var(--body);
  font-size:16px;
  font-weight:500;
  color:var(--ink);
}

input:focus,
textarea:focus,
select:focus,
.lead-card .field input:focus,
.lead-card textarea:focus{
  outline:0;
  box-shadow:inset 0 0 0 1px var(--blue), 0 0 0 4px var(--blue-ring);
}

.field-label{
  font-family:var(--body);
  font-size:14px;
  font-weight:500;
  letter-spacing:normal;
  color:var(--ink-mut);
}


/* ==========================================================================
   8. CHEGARALARNI YO'Q QILISH
   O'lchovda FlexFolio'da ko'rinadigan chegarali element TOPILMADI.
   ========================================================================== */
#trust,
#trust .stat,
.site-footer,
.footer-bottom,
.svc-meta,
.mb-bar,
.mini-chrome,
.lang-row,
.tg-product,
.ai-badge,
.mb-url,
.tp-badge,
.mini-chip,
.logo-plate,
.nav-shell,
.nav-div,
.chat-root,
#hamburger{
  border:0;
}

.nav-div{ display:none; }


/* ==========================================================================
   9. CHIP / TEG — ular ham pill
   ========================================================================== */
.chip,
.wk-tab,
.mini-chip,
.ai-badge,
.tp-badge,
.work-tag,
.step-day{
  border-radius:100px;
}

.wk-tab{
  border:0;
  background:#FFFFFF;
  box-shadow:var(--sh-1);
  font-family:var(--body);
  font-size:15px;
  font-weight:500;
  color:var(--ink);
}
.wk-tab.active,
.wk-tab[aria-pressed="true"]{
  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;
  box-shadow:var(--sh-blue);
}


/* ==========================================================================
   10. SCROLL INDIKATORI — apelsin
   ========================================================================== */
#scroll-progress #sp-fill,
#sp-fill{
  background:linear-gradient(90deg, #F97518 0%, #FF4D00 55%, #FFB640 100%) !important;
}