/* ==========================================================================
   FF/02-CHROME.CSS — FlexFolio skin: SARLAVHA · NAV · MOBIL MENYU · CHAT
   Otabek, 2026-08-07.

   Eng ko'zga tashlanadigan farq: FlexFolio'da sarlavha paneli SHAFFOF.
   Saazi'dagi suzuvchi oq pill qobiq (`.nav-shell`) olib tashlanadi —
   logotip, nav va bitta OQ PILL tugma to'g'ridan-to'g'ri fon ustida turadi.
   ========================================================================== */


/* ==========================================================================
   1. SARLAVHA — shaffof
   `depth.css:826` `#site-header.scrolled .nav-shell` ni kech yozadi —
   shuning uchun bu yerda AYNAN o'sha zanjir takrorlanadi.
   ========================================================================== */
#site-header{
  top:20px;                               /* referensda panel yuqoridan 24px */
  background:transparent;
  border:0;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.nav-shell{
  height:60px;
  padding:0;
  border-radius:0;
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

#site-header.scrolled .nav-shell{
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  border:0 !important;
}


/* ==========================================================================
   2. LOGOTIP
   ========================================================================== */
.logo-name{
  font-family:var(--display);
  font-weight:500;
  letter-spacing:-0.03em;
  color:var(--ink);
}
.logo-tag{
  font-family:var(--body);
  font-weight:500;
  color:var(--ink-mut);
}
.logo-mark,
.logo-plate{
  border-radius:12px;
  background:var(--blue);
  border:0;
  box-shadow:none;
}
.logo-mark svg{ fill:#fff; color:#fff; }


/* ==========================================================================
   3. NAV HAVOLALARI — o'lchangan: Inter 16/500, pill hover
   ========================================================================== */
.nav-links{
  background:transparent;
  border:0;
  box-shadow:none;
  padding:0;
  gap:clamp(8px, 1.4vw, 20px);
}

.nav-links a{
  font-family:var(--body);
  font-size:16px;
  font-weight:500;
  letter-spacing:normal;
  color:var(--ink);
  border-radius:100px;
  padding:9px 14px;
}
.nav-links a:hover{
  color:var(--ink);
  background:rgba(30,13,1,.05);
}
.nav-links a.active{
  color:var(--blue-ink);
  background:transparent;
}
/* saazi'ning tagidagi chiziqcha indikatori — FlexFolio'da yo'q */
.nav-links a::after{ display:none !important; }


/* ==========================================================================
   4. NAV'DAGI TELEFON TUGMASI → referensdagi OQ PILL "Get Started"
   O'lchangan: [1141, 24, 159, 51] — balandlik 51px, radius 100px, oq fon
   ========================================================================== */
.nav-phone{
  height:51px;
  min-height:51px;
  padding:0 21px;
  border-radius:100px !important;
  background:#FFFFFF !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:var(--sh-1) !important;
  color:var(--ink) !important;
  font-family:var(--body);
  font-size:16px;
  font-weight:600;
  letter-spacing:normal;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.nav-phone span{ color:var(--ink); }
.nav-phone svg{
  color:var(--blue) !important;
  fill:var(--blue) !important;
}
.nav-phone:hover{
  background:#FFFFFF !important;
  color:var(--ink) !important;
  box-shadow:var(--sh-3) !important;
  transform:none;
}


/* ==========================================================================
   5. GAMBURGER — oq pill
   ========================================================================== */
#hamburger{
  border-radius:100px !important;
  background:#FFFFFF !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:var(--sh-1) !important;
}
#hamburger span{ background:var(--ink) !important; }
#hamburger:hover{ background:#FFFFFF !important; box-shadow:var(--sh-3) !important; }


/* ==========================================================================
   6. MOBIL MENYU
   ========================================================================== */
#mobile-menu{
  background:var(--page);
}
#mobile-menu nav a{
  font-family:var(--display);
  font-weight:400;
  letter-spacing:-0.03em;
  color:var(--ink);
}
#mobile-menu nav a:hover{ color:var(--blue-ink); }


/* ==========================================================================
   7. PRELOADER
   DIQQAT: `scroll.js` `#preloader` ga inline `transform` yozadi —
   bu yerda `transform` YOZILMAYDI, aks holda chiqish animatsiyasi buziladi.
   ========================================================================== */
#preloader{ background:var(--page); }
#pl-num, #preloader small{ color:var(--ink-mut); font-family:var(--body); }
.pl-bar{ background:rgba(30,13,1,.08); border-radius:100px; }
#pl-fill{ background:linear-gradient(90deg, #F97518, #FF4D00); border-radius:100px; }


/* ==========================================================================
   8. CHAT FAB VA PANEL
   DIQQAT: `#chat-fab` ikonkasi `data:` URI sifatida `background-image` da
   turadi — shuning uchun bu yerda FAQAT `background-color` yoziladi.
   `background` shorthand ishlatilsa ikonka yo'qoladi.
   ========================================================================== */
#chat-fab{
  background-color:var(--blue);
  border:0;
  box-shadow:var(--sh-blue);
}
#chat-fab:hover{
  background-color:#FF8531;
  box-shadow:var(--sh-blue-hi);
}

.chat-root,
.chat-panel{
  border:0;
  border-radius:var(--r-xl);
  background:#FFFFFF;
  box-shadow:var(--sh-4);
}
.chat-head{
  border:0;
  box-shadow:inset 0 -1px 0 rgba(30,13,1,.06);
  background:#FFFFFF;
}
.chat-head b,
.chat-head strong{ font-family:var(--body); font-weight:600; color:var(--ink); }

.msg-user,
.tg-bubble.right{
  background-color:var(--blue);
  background-image:none;
  color:#fff;
  border-radius:18px;
}
.msg-bot,
.tg-bubble.left{
  background:var(--panel-2);
  color:var(--ink);
  border:0;
  border-radius:18px;
}

.chat-input,
.chat-form input,
.chat-form textarea{
  border-radius:100px;
  border:0;
  background:var(--panel-2);
  box-shadow:inset 0 0 0 1px var(--line);
  font-family:var(--body);
  color:var(--ink);
}
.chat-send{
  border-radius:100px;
  background-color:var(--blue);
  background-image:none;
  color:#fff;
  border:0;
  box-shadow:var(--sh-blue);
}


/* ==========================================================================
   9. FOOTER'GA QAYTISH TUGMASI VA BOSHQA MIKRO-ELEMENTLAR
   ========================================================================== */
.footer-up,
.to-top{
  border-radius:100px;
  background:#FFFFFF;
  border:0;
  box-shadow:var(--sh-1);
  color:var(--ink);
}

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