/* ===========================================================================
   PRODUCT LAYER — məhsulun ÖZÜNÜ göstərən komponentlər.

   Niyə ayrı fayl: `public.css` ("Nocturne") saytın ATMOSFERİDİR — rəng, şrift,
   ritm, düymələr. Bu fayl isə MƏHSULUN interfeysini marketinq səhifəsinin
   içində təkrar qurur: pəncərə çərçivəsi, yan menyu, söhbət sətirləri, cədvəl,
   ölçən. İkisini bir yerə yığsaq, məhsul UI-ı dəyişəndə hansı qaydanın saytın,
   hansının maketin olduğu bilinməzdi.

   QAYDA: bu maketlər YALNIZ HƏQİQƏTƏN mövcud funksiyaları göstərir. Uydurma
   ekran (olmayan qraf, olmayan hesabat) satış vədidir — müştəri qeydiyyatdan
   keçib onu tapmayanda geri ödəniş istəyir. Hər maketin altında hansı real
   səhifəni təmsil etdiyi şərhdə yazılıb.

   Dizayn qərarları (səbəbləri ilə):
   • ŞÜŞƏ (backdrop-filter) İŞLƏDİLMİR. Saytın qalanında var, amma məhsul
     çərçivəsində şüşə "maket" hissi verir — real proqram opaqdır.
   • KÖLGƏ AZDIR, KƏNAR XƏTTİ VAR. Dərinlik 1px kənar + çox yumşaq kölgə ilə
     qurulur; parlaq halqalar "AI şablonu" siqnalıdır.
   • VURĞU RƏNGİ SEYRƏKDİR. Bir maketdə ən çoxu iki lime element: onlar gözü
     APARMALI olduğu yerə aparır (aktiv sətir, mənbə etiketi).
   =========================================================================== */

/* ------------------------------------------------------- 1. Çərçivə --- */
/* Məhsul pəncərəsi. Üst zolaq + yol etiketi = "bu, işləyən proqramdır". */
.ui {
  background: #0c0f16;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .9);
  font-size: .82rem;
  line-height: 1.5;
  /* İçəridəki mətn saytın başlıq şriftini YOX, interfeys şriftini işlədir. */
  font-family: var(--sans);
  color: var(--white);
}
.ui__bar {
  display: flex; align-items: center; gap: .55rem;
  padding: .6rem .85rem;
  background: #0a0c12;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.ui__dots { display: flex; gap: .3rem; flex: none; }
.ui__dots i {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255, 255, 255, .16);
}
.ui__path {
  font: 500 .72rem/1 var(--mono);
  color: var(--grey-2);
  letter-spacing: .01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ui__tag {
  margin-left: auto; flex: none;
  font: 600 .64rem/1 var(--mono);
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--lime);
  padding: .3rem .5rem;
  border: 1px solid rgba(205, 245, 86, .3);
  border-radius: 5px;
}
.ui__body { padding: .95rem 1rem; display: grid; gap: .75rem; }
.ui__body--flush { padding: 0; }
.ui__body--tight { padding: .7rem 1rem .4rem; }

/* Mətn içi link — `a { color: inherit }` qlobal qaydasını burada ləğv edirik. */
.lede a {
  color: var(--lime); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
  transition: opacity var(--t-fast) var(--e-io);
}
.lede a:hover { opacity: .75; }

/* İki panel — `inbox.html`-in real quruluşu: solda söhbət siyahısı, sağda
   seçilmiş söhbət. Bu ONA görə vacibdir ki, maket olmayan naviqasiya
   göstərməsin: kabinetdə global yan menyu YOXDUR. */
.ui__split { display: grid; grid-template-columns: 152px minmax(0, 1fr); }
.ui__side {
  border-right: 1px solid rgba(255, 255, 255, .08);
  display: grid; align-content: start;
  background: #0a0c12;
}
.ui__conv {
  display: grid; gap: .28rem; padding: .6rem .65rem;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  border-left: 2px solid transparent;
}
.ui__conv b { font: 500 .66rem/1 var(--mono); color: var(--grey-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui__conv i { font-style: normal; font-size: .74rem; color: var(--grey);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui__conv.is-on { background: rgba(255, 255, 255, .04);
  border-left-color: var(--lime); }
.ui__conv.is-on i { color: var(--white); }
.ui__pill {
  justify-self: start; font: 600 .6rem/1 var(--mono);
  padding: .22rem .36rem; border-radius: 4px;
  background: rgba(255, 255, 255, .07); color: var(--grey-2);
}
.ui__pill--wait { background: rgba(255, 176, 32, .15); color: var(--warn); }
@media (max-width: 620px) { .ui__split { grid-template-columns: 1fr; }
  .ui__side { display: none; } }

/* ------------------------------------------------- 2. Söhbət sətirləri --- */
/* Widget-in özü deyil — onun MƏZMUNU. Marketinq səhifəsində baloncuq
   quruluşu sadələşdirilib ki, mətnin özü oxunsun. */
.cv { display: grid; gap: .6rem; }
.cv__row { display: flex; gap: .55rem; align-items: flex-start; }
.cv__row--me { flex-direction: row-reverse; }
.cv__who {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  display: grid; place-items: center;
  font: 700 .62rem/1 var(--mono);
  background: rgba(255, 255, 255, .07); color: var(--grey);
  border: 1px solid rgba(255, 255, 255, .09);
}
.cv__row--bot .cv__who { background: rgba(205, 245, 86, .13); color: var(--lime);
  border-color: rgba(205, 245, 86, .28); }
.cv__msg {
  max-width: 82%; padding: .6rem .8rem; border-radius: 12px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .07);
  color: var(--white); font-size: .84rem; line-height: 1.55;
}
.cv__row--me .cv__msg {
  background: rgba(205, 245, 86, .1);
  border-color: rgba(205, 245, 86, .22);
}
.cv__msg b { font-weight: 650; }

/* Cavabın içindəki link — widget-in ÇƏKDİYİ yeganə zəngin element.
   `mdLite()` markdown linkini adi `<a>`-ya çevirir; kart, şəkil və düymə
   YOXDUR. Əvvəl burada məhsul kartı və mənbə nişanı vardı: ikisi də olmayan
   interfeysi vəd edirdi, yəni maket məhsuldan artıq şey göstərirdi. */
.cv__link {
  color: var(--lime); text-decoration: none;
  border-bottom: 1px solid rgba(205, 245, 86, .35);
}
.cv__link:hover { border-bottom-color: var(--lime); }

/* Rəy sətri — cavab bitəndən sonra widget onu özü əlavə edir. */
.cv__fb {
  display: flex; align-items: center; gap: .45rem;
  padding: .1rem .2rem .1rem 2.1rem;
  font-size: .72rem; color: var(--grey-2);
}
.cv__fbbtn {
  display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, .1);
  color: var(--grey-2);
}
.cv__fbbtn svg { width: 12px; height: 12px; }

/* ------------------------------------------------------ 3. Siyahılar --- */
/* Cədvəl əvəzinə sətir siyahısı: dar ekranda cədvəl sınır, sətir sınmır. */
.ui__list { display: grid; grid-template-columns: minmax(0, 1fr); }
.ui__item {
  display: flex; align-items: center; gap: .7rem;
  padding: .62rem .85rem;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  font-size: .8rem;
  /* Valideyn grid sütununda sıxıla bilsin — yoxsa sətrin min-content eni
     bütün səhifəni genişləndirir (mobildə üfüqi sürüşmə). */
  min-width: 0;
}
.ui__item:last-child { border-bottom: 0; }
.ui__item b { font-weight: 600; }
.ui__item .grow { flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.ui__num {
  font: 600 .72rem/1 var(--mono); color: var(--grey-2);
  flex: none; width: 1.6rem;
}
.ui__count {
  flex: none; font: 600 .72rem/1 var(--mono);
  padding: .28rem .45rem; border-radius: 5px;
  background: rgba(255, 255, 255, .06); color: var(--grey);
}
.ui__count--hot { background: rgba(255, 122, 107, .14); color: #ff9d92; }
/* «Son soruşulma» — `site.html`-dəki cədvəlin üçüncü sütunu. Dar ekranda
   itir: sual mətni və say daha vacibdir. */
.ui__when { flex: none; font: 500 .7rem/1 var(--mono); color: var(--grey-2); }
@media (max-width: 560px) { .ui__when { display: none; } }

/* Vəziyyət nişanı. */
.ui__dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--grey-2);
}
.ui__dot--ok { background: var(--ok); }
.ui__dot--work { background: var(--warn); }

/* --------------------------------------------------------- 4. Ölçən --- */
.ui__meter { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .08);
  overflow: hidden; }
.ui__meter i { display: block; height: 100%; background: var(--lime); border-radius: 3px; }



/* ------------------------------------------------- 5. Sahə (form) --- */
/* "Öz təlimatın" bölməsi — kabinetdəki real sahənin görünüşü. */
.ui__field {
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 9px; padding: .6rem .7rem;
  background: rgba(255, 255, 255, .03);
  font-size: .8rem; color: var(--grey);
}
.ui__label {
  display: flex; align-items: center; justify-content: space-between;
  font: 600 .68rem/1 var(--mono); letter-spacing: .07em;
  text-transform: uppercase; color: var(--grey-2);
  margin-bottom: .4rem;
}

/* =========================================================================
   6. BÖLMƏ PRİMİTİVLƏRİ — səhifənin quruluşu
   ========================================================================= */

/* Nömrələnmiş bölmə etiketi. Saytın tanınma nişanıdır: hər bölmə eyni
   mono damğası ilə başlayır, yəni səhifə "bölmə yığını" yox, ARDICILLIQ
   kimi oxunur. */
.tick {
  display: inline-flex; align-items: center; gap: .5rem;
  font: 600 .7rem/1 var(--mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--grey-2);
}
.tick::before {
  content: ""; width: 18px; height: 1px; background: var(--lime); flex: none;
}
.tick b { color: var(--lime); font-weight: 600; }

/* İki sütunlu "nəticə" bloku: solda mətn, sağda məhsul. Növbələşən
   istiqamət tək qayda ilə idarə olunur — hər bölməyə ayrı stil yazmaq
   səhifəni bir-birindən qopuq edir. */
.split {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.6rem, 4vw, 3.4rem); align-items: center;
}
@media (min-width: 940px) {
  .split { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); }
  .split--flip > *:first-child { order: 2; }
}
.split__text { display: grid; gap: 1rem; align-content: start; }
.split__text h3 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.5rem, 2.9vw, 2.15rem); line-height: 1.08;
  letter-spacing: -.03em; margin: 0;
}
.split__text p { margin: 0; color: var(--grey); line-height: 1.65; max-width: 46ch; }

/* Nəticə sətirləri — "nə qazanıram" cavabı, madde işarəsiz. */
.wins { display: grid; gap: .55rem; margin: .3rem 0 0; padding: 0; list-style: none; }
.wins li {
  display: flex; gap: .6rem; align-items: flex-start;
  font-size: .93rem; color: var(--grey);
}
.wins svg { width: 16px; height: 16px; flex: none; margin-top: .22rem; color: var(--lime); }

/* Addım kartı (necə işləyir) — nömrə böyük, mətn qısa. */
.steps { display: grid; gap: 1rem; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1120px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step {
  position: relative; padding: 1.4rem 1.3rem 1.5rem;
  border: 1px solid var(--line); border-radius: var(--r);
  background: rgba(255, 255, 255, .022);
  display: grid; gap: .55rem; align-content: start;
}
.step__n {
  font: 600 .74rem/1 var(--mono); letter-spacing: .12em; color: var(--lime);
  padding: 0;  /* `signup.html` üçün qoyulmuş .35rem burada lazım deyil */
}
.step h4 { margin: 0; font-size: 1.02rem; font-weight: 650; letter-spacing: -.01em; }
.step p { margin: 0; font-size: .88rem; color: var(--grey-2); line-height: 1.6; }
/* Addımlar arası ox — YALNIZ geniş ekranda və yalnız dekorativ. */
.step + .step::before {
  content: ""; position: absolute; left: -.62rem; top: 50%;
  width: 6px; height: 6px; border-top: 1px solid var(--line-2);
  border-right: 1px solid var(--line-2); transform: translateY(-50%) rotate(45deg);
}
@media (max-width: 1119px) { .step + .step::before { display: none; } }

/* İstifadə halı kartı. */
.cases { display: grid; gap: 1.1rem; }
@media (min-width: 900px) { .cases { grid-template-columns: repeat(3, 1fr); } }
.case {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .022);
  padding: 1.2rem; display: grid; gap: .9rem; align-content: start;
}
.case__head {
  display: flex; align-items: center; gap: .55rem;
  font: 600 .7rem/1 var(--mono); letter-spacing: .11em;
  text-transform: uppercase; color: var(--grey-2);
}
.case__head svg { width: 15px; height: 15px; color: var(--lime); }

/* Fakt kartı (etibar bölməsi) — RƏQƏM UYDURULMUR, yalnız yoxlana bilən
   məhsul faktı yazılır. */
.facts { display: grid; gap: 1rem; }
@media (min-width: 700px) { .facts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .facts { grid-template-columns: repeat(4, 1fr); } }
.fact {
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.15rem 1.15rem 1.25rem; background: rgba(255, 255, 255, .022);
  display: grid; gap: .4rem; align-content: start;
}
.fact b {
  font-family: var(--display); font-size: 1.45rem; font-weight: 600;
  letter-spacing: -.02em; line-height: 1;
}
.fact span { font-size: .84rem; color: var(--grey-2); line-height: 1.55; }

/* Bölmələr arasındakı incə ayırıcı — böyük boşluq əvəzinə struktur hissi. */
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* =========================================================================
   7. HERO
   ========================================================================= */
.ph { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 4rem); }
.ph__grid { display: grid; gap: clamp(2.2rem, 5vw, 3.6rem); align-items: center; }
@media (min-width: 1000px) {
  .ph__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); }
}
.ph__eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .75rem; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: rgba(255, 255, 255, .03);
  font: 500 .76rem/1 var(--sans); color: var(--grey);
}
.ph__eyebrow i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--lime);
  flex: none;
}
.ph h1 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(2.35rem, 5.4vw, 4.05rem);
  line-height: 1.02; letter-spacing: -.042em;
  margin: 1.25rem 0 0;
}
.ph__sub {
  margin: 1.25rem 0 0; max-width: 52ch;
  font-size: clamp(1rem, 1.15vw, 1.1rem); line-height: 1.68; color: var(--grey);
}
.ph__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.ph__note { margin: 1rem 0 0; font-size: .84rem; color: var(--grey-2); }

/* Hero-nun altındakı imkan sətri — marquee əvəzi. Hərəkət YOXDUR: sonsuz
   sürüşən lent diqqəti oğurlayır və "şablon" siqnalıdır. */
.caps {
  display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 2.2rem;
}
.caps span {
  font: 500 .73rem/1 var(--mono); letter-spacing: .01em;
  padding: .42rem .52rem; border-radius: 6px;
  border: 1px solid var(--line); color: var(--grey-2);
}

/* =========================================================================
   8. FON — yuxarıdan gələn tək işıq
   ========================================================================= */
/* Tarixçə: əvvəl üç hərəkət edən aurora ləkəsi (çox), sonra 1px tor (fonda
   kvadrat şəbəkə kimi oxunurdu), indi bu. Qayda: fon NAXIŞ olmamalıdır —
   naxışın kənarı var, göz kənarı sayır. İşığın kənarı yoxdur.

   Üç qat, hamısı HƏRƏKƏTSİZ və hamısı bir qradiyent xüsusiyyətində, yəni bir
   boyama: (1) yuxarıdan enən lime nəfəsi — brendin öz rəngi, (2) sağ çiyində
   nanə çaları ki, işıq simmetrik və «generasiya edilmiş» görünməsin,
   (3) mərkəzdən kənara enən baza — heç bir ekran tam qara qalmır.

   `fixed`: işıq mənbəyi səhifənin YUXARISINDA yox, EKRANIN yuxarısındadır —
   scroll-da yenidən boyanma olmur və hər bölmə eyni işığı alır. Rəqəmlər
   qəsdən kiçikdir: mətn kontrastı fondan asılı olmamalıdır. */
.bg {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(118% 58% at 50% -10%, rgba(205, 245, 86, .085), transparent 56%),
    radial-gradient(64% 44% at 96% 4%,   rgba(98, 232, 198, .06),  transparent 62%),
    radial-gradient(130% 96% at 50% 0%,  #0c1019 0%, #0a0c13 50%, #07080d 100%);
}

/* =========================================================================
   9. HƏRƏKƏT — az və məqsədli
   ========================================================================= */
/* Söhbət sətirləri növbə ilə görünür: MƏHSULUN öz davranışını təkrarlayır,
   yəni bəzək deyil, izahdır. Bir dəfə oynayır. */
@media (prefers-reduced-motion: no-preference) {
  .js .cv--play .cv__row { opacity: 0; animation: cvIn .45s var(--e-out) forwards; }
  .js .cv--play .cv__row:nth-child(1) { animation-delay: .15s; }
  .js .cv--play .cv__row:nth-child(2) { animation-delay: .75s; }
  .js .cv--play .cv__row:nth-child(3) { animation-delay: 1.35s; }
  .js .cv--play .cv__row:nth-child(4) { animation-delay: 1.95s; }
}
@keyframes cvIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Kart üstünə gələndə: yalnız kənar xətti və çox yumşaq qalxma. Miqyas
   dəyişikliyi qonşu kartları sürüşdürür və "canlı" yox, "narahat" görünür. */
.step, .case, .fact { transition: border-color var(--t-mid) var(--e-io),
                                  background var(--t-mid) var(--e-io); }
.step:hover, .case:hover, .fact:hover {
  border-color: var(--line-2); background: rgba(255, 255, 255, .04);
}