/* ==========================================================================
   07 — TAMOYILLAR (#tamoyillar) · USTUNLIKLAR (#ustunliklar) · FIKRLAR (#fikrlar)
   AIwork naqshi: kulrang to'rli fon → katta oq panel (ledger),
   oq tasma → 3×2 karta tarmog'i, kulrang to'rli fon → testimonial marquee.
   Faqat css/aiwork.css tokenlaridan foydalaniladi.
   ========================================================================== */


/* ==========================================================================
   1. TAMOYILLAR — kulrang to'rli fon + katta oq panelda ledger
   ========================================================================== */

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

/* --- Bo'lim sarlavhasi: panel ichida, CHAPDA ------------------------------ */
#tamoyillar .sec-head{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:16px;
  text-align:left;
  margin-bottom:clamp(28px, 3.2vw, 44px);
}

#tamoyillar .sec-head h2{
  max-width:18ch;
}

/* --- Panel --------------------------------------------------------------- */
#tamoyillar .pr-panel{
  overflow:hidden;
}

/* --- Ledger ro'yxati ----------------------------------------------------- */
#tamoyillar .pr-ledger{
  display:block;
}

#tamoyillar .pr-row{
  display:grid;
  grid-template-columns:44px minmax(0, 1fr);
  align-items:start;
  column-gap:0;
  row-gap:6px;
  padding:22px 14px;
  margin-inline:-14px;
  border-bottom:1px solid var(--line-soft);
  border-radius:var(--r-md);
  transition:background .2s var(--ease);
}

#tamoyillar .pr-row:last-child{
  border-bottom:0;
  padding-bottom:0;
}

#tamoyillar .pr-row:first-child{
  padding-top:0;
}

#tamoyillar .pr-row:hover{
  background:var(--panel-2);
}

#tamoyillar .pr-num{
  display:block;
  grid-column:1;
  grid-row:1;
  width:44px;
  font-family:var(--display);
  font-weight:500;
  font-size:14px;
  line-height:27px;      /* h3 (19px × 1.4 ≈ 26.6px) bilan bir chiziqda turadi */
  letter-spacing:0;
  color:var(--blue);
}

#tamoyillar .pr-row h3{
  grid-column:2;
  grid-row:1;
  font-family:var(--display);
  font-weight:500;
  font-size:19px;
  line-height:1.4;
  letter-spacing:-0.018em;
  color:var(--ink);
}

#tamoyillar .pr-row p{
  grid-column:2;
  grid-row:2;
  font-family:var(--body);
  font-size:15px;
  line-height:1.7;
  color:var(--ink-mut);
  max-width:var(--measure);
}

@media (max-width:600px){
  #tamoyillar .pr-row{
    grid-template-columns:34px minmax(0, 1fr);
    padding:18px 10px;
    margin-inline:-10px;
  }
  #tamoyillar .pr-num{ width:34px; }
}


/* ==========================================================================
   2. USTUNLIKLAR — OQ tasma, 3×2 karta tarmog'i (umurtqa chizig'i YO'Q)
   ========================================================================== */

#ustunliklar{
  background:var(--panel);
}

/* --- Markazlashgan sarlavha ---------------------------------------------- */
#ustunliklar .sec-head{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  text-align:center;
  margin-bottom:clamp(32px, 4vw, 56px);
}

#ustunliklar .sec-head h2{
  max-width:20ch;
}

#ustunliklar .h2-accent{
  color:var(--blue);
  font-style:normal;
}

/* --- Vertikal "umurtqa" chizig'i referensda YO'Q -------------------------- */
#ustunliklar .adv-line,
#ustunliklar .adv-pulse{
  display:none !important;
}

/* --- Tarmoq: 3 ustun → 2 → 1 --------------------------------------------- */
#ustunliklar .adv-spine{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:var(--gap);
  position:relative;
}

#ustunliklar .adv-item{
  display:flex;
  min-width:0;
}

/* data-side referensda ta'sir qilmaydi (JS ilmog'i sifatida saqlanadi) */
#ustunliklar .adv-item[data-side="l"],
#ustunliklar .adv-item[data-side="r"]{
  margin:0;
  justify-content:stretch;
  text-align:left;
}

#ustunliklar .adv-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  width:100%;
}

/* Raqamli plita — kartaning tepasida */
#ustunliklar .adv-dot{
  display: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-weight:600;
  font-size:14px;
  line-height:1;
  letter-spacing:0;
  margin-bottom:6px;
}

#ustunliklar .adv-card h3{
  font-family:var(--display);
  font-weight:500;
  font-size:19px;
  line-height:1.4;
  letter-spacing:-0.018em;
  color:var(--ink);
}

#ustunliklar .adv-card p{
  font-family:var(--body);
  font-size:15px;
  line-height:1.7;
  color:var(--ink-mut);
}

@media (max-width:1079px){
  #ustunliklar .adv-spine{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (max-width:767px){
  #ustunliklar .adv-spine{ grid-template-columns:1fr; }
}


/* ==========================================================================
   3. FIKRLAR — kulrang to'rli fon + cheksiz testimonial lenta
   ========================================================================== */

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

/* --- Markazlashgan sarlavha ---------------------------------------------- */
#fikrlar .sec-head{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  text-align:center;
  margin-bottom:clamp(32px, 4vw, 56px);
}

#fikrlar .sec-head h2{
  max-width:20ch;
}

/* --- Lenta konteyneri: chetlarda yumshoq so'nish ------------------------- */
#fikrlar .fk-marquee{
  display:flex;
  width:100%;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
}

#fikrlar .fk-track{
  display:flex;
  flex:none;
  gap:var(--gap);
  padding-right:var(--gap);
  padding-block:6px;                       /* karta soyasi kesilmasin */
  animation:fk-scroll 68s linear infinite;
  will-change:transform;
}

@keyframes fk-scroll{
  from{ transform:translateX(0); }
  to{   transform:translateX(-100%); }
}

/* Hoverda lenta to'xtaydi */
#fikrlar .fk-marquee:hover .fk-track,
#fikrlar .fk-marquee:focus-within .fk-track{
  animation-play-state:paused;
}

/* --- Testimonial karta --------------------------------------------------- */
#fikrlar .fk-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  flex:none;
  width:380px;
  padding:24px;
  background:var(--panel);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-2);
  text-align:center;
  transition:box-shadow .25s var(--ease);
}

#fikrlar .fk-card:hover{
  box-shadow:0 8px 24px rgba(0,0,0,.07);
}

/* Katta qo'shtirnoq referensda yo'q */
#fikrlar .fk-qmark{
  display:none !important;
}

/* Kompozitsiya: avatar → ism → yulduzlar → sitata */
#fikrlar .fk-card figcaption{
  order:-1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  width:100%;
}

#fikrlar .fk-ava{
  display:flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  flex:none;
  border-radius:var(--r-pill);
  background:var(--blue-lo);
  color:var(--blue-ink);
  font-family:var(--display);
  font-weight:600;
  font-size:16px;
  line-height:1;
  letter-spacing:0;
}

#fikrlar .fk-who{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
}

#fikrlar .fk-who b{
  font-family:var(--display);
  font-weight:500;
  font-size:16px;
  line-height:1.4;
  letter-spacing:-0.012em;
  color:var(--ink);
}

#fikrlar .fk-who em{
  font-family:var(--body);
  font-style:normal;
  font-weight:400;
  font-size:13px;
  line-height:1.5;
  color:var(--ink-dim);
}

/* Amber yulduzlar (clip-path bilan chizilgan, tashqi rasm yo'q) */
#fikrlar .fk-stars{
  display:inline-flex;
  align-items:center;
  gap:4px;
}

#fikrlar .fk-stars i{
  display:block;
  width:14px;
  height:14px;
  background:var(--amber);
  clip-path:polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

#fikrlar .fk-card blockquote{
  font-family:var(--body);
  font-style:italic;
  font-weight:400;
  font-size:15px;
  line-height:1.65;
  color:var(--ink);
}

@media (max-width:767px){
  #fikrlar .fk-card{
    width:84vw;
    max-width:380px;
    padding:20px;
  }
  #fikrlar .fk-marquee{
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
            mask-image:linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  }
}


/* ==========================================================================
   4. QA / harakatsiz rejimlar — lenta to'xtaydi, hammasi ko'rinadi
   ========================================================================== */

.no-anim #fikrlar .fk-track,
.qa-flat #fikrlar .fk-track,
.qa-show #fikrlar .fk-track,
.works-static #fikrlar .fk-track{
  animation:none !important;
  transform:none !important;
}

@media (prefers-reduced-motion:reduce){
  #fikrlar .fk-track{
    animation:none !important;
    transform:none !important;
  }
  #fikrlar .fk-marquee{
    overflow-x:auto;
    -webkit-mask-image:none;
            mask-image:none;
  }
  #tamoyillar .pr-row{ transition:none; }
}