/* ==========================================================================
   06 — JARAYON (#jarayon) + ISHLAR (#ishlar)
   AIwork naqshi: "How it's work" 4 ustunli raqamli kartalar +
   "Integrations" uslubidagi tab'lar va 3 ustunli portfolio tarmog'i.
   Faqat css/aiwork.css tokenlaridan foydalaniladi.
   ========================================================================== */


/* ==========================================================================
   1. JARAYON — kulrang to'rli fon, markazlashgan sarlavha
   ========================================================================== */

#jarayon{
  background:var(--page);
}

#jarayon .sec-head{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:18px;
  max-width:var(--head-w);
  margin:0 auto clamp(36px, 4.4vw, 56px);
}

#jarayon .sec-head h2{
  margin:0;
  max-width:22ch;
}

/* Ko'k ta'kid — <em class="h2-accent"> */
#jarayon .sec-head .h2-accent,
#ishlar .sec-head .h2-accent{
  font-style:normal;
  color:var(--blue);
}

/* Ta'kid bo'lagi qator oxirida bo'linib ketmasin */
#jarayon .sec-head .h2-accent{
  white-space:nowrap;
}


/* --- 1.1 Bosqichlar tarmog'i ------------------------------------------- */

.steps{
  position:relative;
  padding-top:30px;                 /* proc-rail uchun joy */
}

/* Kartalar ustidan o'tuvchi nozik reyl (faqat desktop) */
.proc-rail{
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:2px;
  border-radius:2px;
  background:var(--line);
  overflow:hidden;
  pointer-events:none;
  z-index:2;
}

.proc-rail > i,
#proc-fill{
  display:block;
  width:100%;
  height:100%;
  border-radius:2px;
  background:var(--blue);
  transform:scaleX(0);              /* JS scaleX(0→1) yozadi */
  transform-origin:left center;
}


/* --- 1.2 Bosqich kartasi ------------------------------------------------ */

.step{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
}

/* 32px dumaloq raqam plitasi */
.step-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  flex:none;
  border-radius:var(--r-pill);
  background:var(--blue-lo);
  color:var(--blue-ink);
  font-family:var(--display);
  font-size:14px;
  font-weight:600;
  line-height:1;
  letter-spacing:-0.01em;
  transition:background .3s var(--ease), color .3s var(--ease);
}

/* JS scroll-narrativi: yoqilgan bosqich */
.step.lit .step-num{
  background:var(--blue);
  color:#fff;
}

.step h3{
  margin:0;
  font-family:var(--display);
  font-size:19px;
  line-height:1.35;
  font-weight:500;
  letter-spacing:-0.018em;
  color:var(--ink);
}

/* Kun-pill — h3 ichidagi <em class="step-day"> */
.step-day{
  display:inline-flex;
  align-items:center;
  margin-left:8px;
  padding:3px 10px;
  border-radius:var(--r-pill);
  background:var(--panel-2);
  border:1px solid var(--line);
  font-family:var(--body);
  font-size:11px;
  line-height:1.4;
  font-weight:500;
  font-style:normal;
  letter-spacing:0;
  color:var(--ink-dim);
  white-space:nowrap;
  vertical-align:middle;
}

.step p{
  margin:0;
  font-family:var(--body);
  font-size:15px;
  line-height:1.7;
  color:var(--ink-mut);
}

/* Guruh ichida bosqichma-bosqich kirish (JS --ri indeksini beradi) */
.steps .step[data-reveal]{
  transition-delay:calc(var(--ri, 0) * 70ms);
}


/* ==========================================================================
   2. ISHLAR — oq tasma
   ========================================================================== */

#ishlar{
  background:var(--panel);
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
}

#ishlar .sec-head{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
  gap:16px;
  margin:0 0 clamp(28px, 3.2vw, 40px);
}

#ishlar .sec-head h2{
  margin:0;
  max-width:20ch;
}

#ishlar .sec-sub{
  margin:0;
  max-width:var(--measure);
}


/* --- 2.1 Tab'lar (pill tugmalar qatori) -------------------------------- */

.wk-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:clamp(24px, 3vw, 36px);
}

.wk-tab{
  display:inline-flex;
  align-items:center;
  padding:11px 16px;
  border-radius:var(--r-pill);
  background:var(--panel);
  border:1px solid var(--line);
  font-family:var(--body);
  font-size:14px;
  line-height:1.5;
  font-weight:500;
  color:var(--ink);
  cursor:pointer;
  white-space:nowrap;
  transition:background .2s var(--ease),
             color .2s var(--ease),
             border-color .2s var(--ease);
}

.wk-tab:hover{ background:var(--panel-2); }

.wk-tab.active,
.wk-tab[aria-pressed="true"]{
  background:var(--ink);
  border-color:var(--ink);
  color:#fff;
}


/* --- 2.2 Portfolio tarmog'i -------------------------------------------- */

.works-grid{
  align-items:stretch;
}

.work-card{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.work-card .work-info{
  flex:1 1 auto;
}

/* Media maydon — 180px, ichida katta och raqam */
.work-visual{
  display:flex;
  align-items:center;
  justify-content:center;
  height:180px;
  border-radius:var(--r-md);
  background:var(--panel-2);
  border:1px solid var(--line-soft);
  overflow:hidden;
}

.wv-num{
  font-family:var(--display);
  font-size:40px;
  line-height:1;
  font-weight:500;
  letter-spacing:-0.03em;
  color:var(--line);
}

/* Juda nozik, rangsiz gradientlar (#faf7fb ↔ var(--page) doirasida) */
.wv-1{ background:linear-gradient(180deg, #faf7fb 0%, var(--page) 100%); }
.wv-2{ background:linear-gradient(135deg, #faf7fb 0%, var(--page) 100%); }
.wv-3{ background:linear-gradient(180deg, var(--page) 0%, #faf7fb 100%); }
.wv-4{ background:linear-gradient(135deg, var(--page) 0%, #faf7fb 60%, var(--page) 100%); }


/* --- 2.3 Karta matni ---------------------------------------------------- */

.work-info{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
}

.work-info h3{
  margin:0;
  font-family:var(--display);
  font-size:19px;
  line-height:1.35;
  font-weight:500;
  letter-spacing:-0.018em;
  color:var(--ink);
}

.work-tag{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:var(--r-xs);
  background:var(--blue-lo);
  color:var(--blue-ink);
  font-family:var(--body);
  font-size:12px;
  line-height:1.5;
  font-weight:500;
  letter-spacing:0;
}

.work-info p{
  margin:0;
  font-family:var(--body);
  font-size:15px;
  line-height:1.7;
  color:var(--ink-mut);
}

/* Guruh staggeri */
.works-grid .work-card[data-reveal]{
  transition-delay:calc(var(--ri, 0) * 70ms);
}


/* --- 2.4 Filtr holatlari (JS: .wk-hide / .wk-pop) ---------------------- */

.wk-hide{ display:none !important; }

.wk-pop{
  animation:wkPop .45s var(--ease) both;
}

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

/* Statik rejimda animatsiya kerak emas */
.works-static .wk-pop,
.no-anim .wk-pop,
.qa-flat .wk-pop{ animation:none; }


/* --- 2.5 Bo'sh holat va "yana" tugmasi --------------------------------- */

.wk-empty{
  grid-column:1 / -1;
  text-align:center;
  padding:48px 16px;
}

.wk-empty[hidden]{ display:none; }

.wk-empty p{
  margin:0;
  font-family:var(--body);
  font-size:15px;
  line-height:1.7;
  color:var(--ink-dim);
}

.works-more{
  display:flex;
  justify-content:center;
  margin-top:clamp(28px, 3.4vw, 44px);
}


/* ==========================================================================
   3. RESPONSIV
   ========================================================================== */

@media (max-width:1079px){
  .steps{ padding-top:26px; }
}

@media (max-width:767px){
  /* Reyl faqat desktopda mantiqiy */
  .proc-rail{ display:none; }

  .steps{ padding-top:0; }

  .step-day{ margin-left:6px; }

  #jarayon .sec-head h2,
  #ishlar .sec-head h2{ max-width:none; }

  .work-visual{ height:160px; }

  .wv-num{ font-size:34px; }

  .wk-tabs{
    gap:8px;
    margin-bottom:24px;
  }

  .wk-tab{
    padding:11px 14px;
    font-size:13px;
  }

  .works-more .btn{ width:100%; }
}


/* ==========================================================================
   4. HARAKATNI KAMAYTIRISH
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  .wk-pop{ animation:none; }

  .steps .step[data-reveal],
  .works-grid .work-card[data-reveal]{ transition-delay:0s; }

  .step-num{ transition:none; }
}