/* ===========================================================================
   QİYMƏT MATRİSİ — yalnız `/pricing` səhifəsində yüklənir.

   NİYƏ AYRI FAYL: `public.css` bütün saytın atmosferidir və hər səhifədə
   gedir; bu qaydalar isə TƏK bir səhifənin cədvəlinə aiddir. Ora yığsaq,
   landing-i ziyarət edən hər kəs işlətmədiyi 6 KB-ı endirərdi.

   MƏSƏLƏ NƏ İDİ. Əvvəl müqayisə adi `<table>` idi: 16 sətir başlıqsız
   axırdı, "daxil deyil" halı tirə (—) ilə göstərilirdi və mobil ekranda
   cədvəl yana sürüşürdü. Üç ayrı qüsur, hamısı eyni nəticə verirdi —
   müştəri hansı paketdə nə olduğunu OXUYA BİLMİRDİ.

   ÜÇ QƏRAR (səbəbləri ilə):
   1. QRUPLAR. Sətirlər üç bölməyə ayrılır (limitlər → kanallar → imkanlar).
      Göz tutacaq nöqtə qazanır; "WhatsApp var?" sualı ilə gələn adam
      birbaşa "Where it answers" bölməsinə baxır.
   2. ✓ / ✕ AÇIQ NİŞANLAR. Tirə "məlumat yoxdur" deməkdir, "yoxdur" yox.
      Nişanlar rənglə YANAŞI formaya da güvənir (dairə + işarə), çünki
      rəng tək başına daltonik müştəri üçün heç nə demir.
   3. MOBİLDƏ CƏDVƏL YOXDUR. 620px-dən aşağı eyni məlumat paket-paket
      kartlara çevrilir. Yan sürüşən cədvəl telefonda oxunmur — ölçdük.
   =========================================================================== */

/* --------------------------------------------------------- 1. Çərçivə --- */
.matrix {
  --mx-col: minmax(9rem, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, .028), transparent 42%);
  overflow: hidden;
}

/* Sütun başlığı YAPIŞQANDIR: 16 sətir sürüşəndə hansı sütuna baxdığını
   unutmaq asandır. Üst zolağın hündürlüyü qədər ofset verilir. */
.matrix__head {
  position: sticky;
  /* Sayt naviqasiyası `position: fixed`-dir (bax: public.css → `.nav`).
     `top: 0` yazsaydıq, yapışan sətir onun ALTINA gizlənərdi — və məhz
     kimin altında olduğu bilinməzdi, çünki nav yarımşəffafdır. Ofset nav
     hündürlüyündən bir az çoxdur ki, aralarında nəfəs qalsın. */
  top: 82px;   /* .nav__in min-height 74px + 8px nəfəs */
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(11rem, 1.55fr) repeat(var(--mx-n, 3), var(--mx-col));
  gap: .5rem;
  padding: 1rem 1.15rem;
  background: rgba(11, 13, 18, .92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-2);
}
.matrix__legend {
  font: 500 .68rem/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grey-2);
  align-self: center;
}
.matrix__plan { display: grid; gap: .18rem; justify-items: center; text-align: center; }
.matrix__plan b {
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--white);
}
/* RƏQƏMLƏR MONO DEYİL. IBM Plex Mono etiket səsimizdir (FEATURE, ALLOWANCES) —
   orada dar, texniki görünüş DOĞRUDUR. Amma "5,000" və "$15" oxunacaq
   DƏYƏRLƏRDİR: monoda onlar cədvəldən çıxıb terminal çıxışına oxşayır və
   saytın qalanına yad düşür. Sans + `tabular-nums` isə hər ikisini verir —
   yumşaq forma, amma sütunda düzgün düzülən rəqəmlər. */
.matrix__plan span {
  font: 500 .8rem/1 var(--sans);
  font-variant-numeric: tabular-nums;
  color: var(--grey-2);
}

/* İKİ AYRI İŞARƏ, QARIŞDIRILMAMALIDIR:
   • `--hot`  = «ən çox seçilən» (Start). Lime — saytın öz vurğu rəngi.
   • `--top`  = «ən güclu paket» (Pro).   Spektr — lime-dan YUXARI pillə.

   ƏVVƏL yalnız `--hot` vardı və cədvəl başlığında TƏK rəngli ad Start idi.
   Göz rəngli olanı «ən yaxşı» kimi oxuyur, yəni səhifə üst paketi deyil,
   orta paketi zirvə kimi göstərirdi — birbaşa gəlir itkisi.

   Pro-da niyə spektr: lime artıq işğal olunub. Eyni rəngin daha parlaq tonu
   «bir az daha yaxşı» deyərdi; başqa CİNS rəng isə «başqa pillə» deyir. */
.matrix__plan--hot b { color: var(--lime); }

.matrix__plan--top b {
  background: linear-gradient(96deg, #cdf556 0%, #62e8c6 34%, #7db8ff 62%, #d59bff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Qradiyent mətn bəzi köhnə brauzerlərdə şəffaf qalır — ehtiyat rəng
     `color`-dan ƏVVƏL verilə bilmir, ona görə kölgə ilə oxunuş qorunur. */
  text-shadow: 0 0 22px rgba(160, 200, 255, .28);
}
.matrix__plan--top span { color: var(--grey); }

/* --------------------------------------------------------- 2. Bölmə --- */
.matrix__group { border-bottom: 1px solid var(--line); }
.matrix__group:last-child { border-bottom: 0; }
.matrix__grouphead {
  padding: 1.25rem 1.15rem .55rem;
  display: grid;
  gap: .3rem;
}
.matrix__grouphead h3 {
  margin: 0;
  font: 600 .7rem/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lime);
}
.matrix__grouphead p {
  margin: 0;
  font-size: .84rem;
  color: var(--grey-2);
  max-width: 62ch;
}

/* --------------------------------------------------------- 3. Sətir --- */
.matrix__row {
  display: grid;
  grid-template-columns: minmax(11rem, 1.55fr) repeat(var(--mx-n, 3), var(--mx-col));
  gap: .5rem;
  align-items: center;
  padding: .8rem 1.15rem;
  border-top: 1px solid rgba(255, 255, 255, .05);
}
.matrix__group .matrix__row:first-of-type { border-top: 0; }
.matrix__row:hover { background: rgba(255, 255, 255, .022); }

.matrix__label { display: grid; gap: .22rem; min-width: 0; }
.matrix__label b { font-size: .93rem; font-weight: 600; color: var(--white); }
.matrix__label span { font-size: .8rem; line-height: 1.45; color: var(--grey-2); }

.matrix__cell {
  display: grid;
  justify-items: center;
  gap: .3rem;
  text-align: center;
  font-size: .86rem;
  color: var(--grey);
}
.matrix__cell--value {
  font: 500 .95rem/1.35 var(--sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.005em;
  color: var(--white);
}

/* Nişan. Forma + rəng birlikdə işləyir (bax fayl başlığı, qərar 3). */
.matrix__mark {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  flex: none;
}
.matrix__mark svg { width: 12px; height: 12px; }
.matrix__mark--yes {
  background: rgba(205, 245, 86, .14);
  border: 1px solid rgba(205, 245, 86, .32);
  color: var(--lime);
}
.matrix__mark--no {
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--line);
  color: var(--grey-2);
}
.matrix__cell--yes .matrix__note { color: var(--white); }
.matrix__note { font-size: .78rem; line-height: 1.3; }
.matrix__cell--no .matrix__note { color: var(--grey-2); }

/* ------------------------------------------------ 4. Mobil: kartlar --- */
/* Cədvəl 620px-dən aşağıda tamamilə söndürülür və eyni məlumat paket-paket
   yığılır. `.matrix__cards` HTML-də onsuz da var — burada yalnız hansının
   görünəcəyi qərarlaşır, yəni ekran oxuyucu təkrar məzmun almır (biri
   `hidden`, o birisi yox). */
.matrix__cards { display: none; }

@media (max-width: 620px) {
  .matrix { border: 0; border-radius: 0; background: none; overflow: visible; }
  .matrix__head, .matrix__group { display: none; }
  .matrix__cards { display: grid; gap: 1rem; }

  .mx-card {
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 1.1rem;
    background: rgba(255, 255, 255, .022);
  }
  .mx-card--hot { border-color: rgba(205, 245, 86, .34); }
  .mx-card > h3 {
    margin: 0 0 .15rem;
    font-family: var(--display);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -.03em;
  }
  .mx-card__price {
    font: 500 .86rem/1 var(--sans);
    font-variant-numeric: tabular-nums;
    color: var(--grey-2);
  }
  .mx-card__grouph {
    margin: 1.1rem 0 .5rem;
    font: 600 .66rem/1 var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lime);
  }
  .mx-card__row {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    padding: .5rem 0;
    border-top: 1px solid rgba(255, 255, 255, .055);
  }
  .mx-card__row b { font-size: .88rem; font-weight: 500; color: var(--white); flex: 1; }
  .mx-card__row.is-off b { color: var(--grey-2); }
  .mx-card__row i {
    font-style: normal;
    font: 500 .86rem/1.4 var(--sans);
    font-variant-numeric: tabular-nums;
    color: var(--grey);
    text-align: right;
  }
}

/* ---------------------------------------------- 5. Hərəkət azaldılıb --- */
@media (prefers-reduced-motion: reduce) {
  .matrix__row { transition: none; }
}