/* =====================================================================
   PAYLINE — DİZAYN SİSTEMİ
   =====================================================================
   Tailwind İŞLƏDİLMİR: paylaşılan hostinqə FTP ilə yüklənən layihədə
   build addımı olmaması vacibdir — bu fayl olduğu kimi köçürülür.

   Üslub: ağ və işıqlı, peşəkar. Qara səthlərdən qaçılır.

   ---------------------------------------------------------------------
   QURULUŞ — dəyişiklik edərkən bu ardıcıllığı poza
   ---------------------------------------------------------------------
     1. Tokenlər        rəng, tipografiya, boşluq, radius, kölgə, hərəkət
     2. Baza            reset, tipografik defoltlar
     3. Düzülüş         wrap, grid, stack
     4. Komponentlər    kart, düymə, forma, cədvəl, nişan, bildiriş
     5. Naviqasiya      topbar, nav, istifadəçi menyusu
     6. Səhifəyə xas    landing, qrafik, mərhələlər, timeline

   QAYDA: komponentin içində «çılpaq» rəng və ölçü YAZILMIR — hamısı
   tokendən gəlir. Yeni dəyər lazımdırsa əvvəlcə token əlavə et. Səbəb:
   bir yerdə dəyişiklik bütün ekranlara keçsin, ekranlar bir-birindən
   ayrı düşməsin.
   ===================================================================== */

:root {
  /* ---------------------------------------------------------- rəng
     Səthlər. `--canvas` ilə `--surface` arasındakı fərq QƏSDƏN
     hiss olunandır: əvvəl ikisi arasında 1% fərq vardı və kartlar
     fonun üzərində «üzmürdü», səhifə yastı görünürdü. */
  --canvas:        #f4f6f9;
  --surface:       #ffffff;
  --surface-2:     #fafbfd;   /* kartın içindəki sakit sahə */
  --surface-muted: #eef0f5;   /* söndürülmüş, ikinci dərəcəli */

  --line:        #e3e6ed;
  --line-strong: #cdd2dd;

  /* Mətn. Saf qara DEYİL — işıqlı fonda gözə sərtdir.
     Hər üç ton ağ üzərində ÖLÇÜLÜB: ən açığı da 4.5:1-i keçir.
     `--ink-subtle` əvvəl #858b99 idi və cəmi 3.15:1 verirdi — ayaq
     qeydləri, süzgəc başlıqları və hüquqi mətn oxunmurdu. Solğun boz
     «zərif» görünə bilər, amma oxunmayan mətn dizayn deyil. */
  --ink:        #16181d;   /* ≈ 16.4:1 */
  --ink-muted:  #565c69;   /* ≈  6.7:1 */
  /* Ölçü ağ üzərində yox, `--canvas` üzərində aparılıb: ayaq qeydləri və
     süzgəc başlıqları məhz orada dayanır və orada kontrast bir az aşağıdır. */
  --ink-subtle: #62697a;   /* ≈  4.9:1 canvas üzərində */

  /* Marka — indiqo. Ağ üzərində mətn kontrastı ≥ 4.5:1 yoxlanılıb. */
  --brand-50:  #eff0fe;
  --brand-100: #e2e3fd;
  --brand-200: #c8cafa;
  --brand-300: #a5a8f4;
  --brand-400: #7d7fe6;
  --brand-500: #5b5bd6;
  --brand-600: #4a4ac0;
  --brand-700: #3b3b9c;

  /* Vəziyyət rəngləri. Hər biri üçün ÜÇ ton var: fon, sərhəd, mətn —
     əks halda komponentlərdə çılpaq hex yazmaq lazım gəlirdi. */
  --success-50:  #ecfaf3;
  --success-200: #b6e4cd;
  --success-600: #12805a;

  /* Sarı ən çətin rəngdir: doymuş tonu öz açıq fonunda 4.5:1-i keçmir.
     `--warning-600` əvvəl #a86400 idi və nişanların içində 4.4:1 verirdi. */
  --warning-50:  #fff7ea;
  --warning-200: #f3daa8;
  --warning-600: #96590a;

  --danger-50:   #fef2f2;
  --danger-200:  #f5c6c6;
  --danger-600:  #c02f2f;

  /* --------------------------------------------------- tipografiya
     Şkala 12→48. Aralıq dəyər İŞLƏDİLMİR: «bir az böyük» qərarları
     ekranları bir-birindən ayırır. */
  --fs-2xs: 0.75rem;    /* 12 — nişan, qeyd */
  --fs-xs:  0.8125rem;  /* 13 — köməkçi mətn */
  --fs-sm:  0.875rem;   /* 14 — cədvəl, ikinci dərəcəli */
  --fs-md:  1rem;       /* 16 — əsas mətn */
  --fs-lg:  1.125rem;   /* 18 — giriş cümləsi */
  --fs-xl:  1.375rem;   /* 22 — bölmə başlığı */
  --fs-2xl: 1.75rem;    /* 28 — səhifə başlığı */
  --fs-3xl: 2.25rem;    /* 36 — hero (mobil) */
  --fs-4xl: 3rem;       /* 48 — hero (masaüstü) */

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-body:  1.6;

  /* Sıxlaşdırma yalnız BÖYÜK ölçülərdə: kiçik mətndə oxunuşu pozur. */
  --track-tight:  -0.02em;
  --track-tighter: -0.03em;

  /* ---------------------------------------------------------- boşluq
     4px ritmi. Komponentlərdə ara dəyər yazılmır. */
  --sp-1:  0.25rem;   /*  4 */
  --sp-2:  0.5rem;    /*  8 */
  --sp-3:  0.75rem;   /* 12 */
  --sp-4:  1rem;      /* 16 */
  --sp-5:  1.25rem;   /* 20 */
  --sp-6:  1.5rem;    /* 24 */
  --sp-8:  2rem;      /* 32 */
  --sp-10: 2.5rem;    /* 40 */
  --sp-12: 3rem;      /* 48 */
  --sp-16: 4rem;      /* 64 */
  --sp-20: 5rem;      /* 80 */

  --radius-xs:   6px;
  --radius-sm:  10px;
  --radius:     14px;
  --radius-lg:  20px;
  --radius-full: 999px;

  /* ---------------------------------------------------------- kölgə
     Hər səviyyə İKİ təbəqədən ibarətdir: yaxın və kəskin (forma),
     uzaq və yumşaq (hündürlük). Tək təbəqəli kölgə yapışqan görünür. */
  --shadow-sm:      0 1px 2px rgb(22 24 29 / .05);
  --shadow-soft:    0 1px 3px rgb(22 24 29 / .06), 0 4px 10px -3px rgb(22 24 29 / .06);
  --shadow-raised:  0 2px 4px rgb(22 24 29 / .05), 0 10px 24px -6px rgb(22 24 29 / .10);
  --shadow-overlay: 0 4px 8px rgb(22 24 29 / .06), 0 24px 56px -12px rgb(22 24 29 / .18);
  --ring-brand:     0 0 0 3px var(--brand-100);

  /* -------------------------------------------------------- hərəkət
     150ms — mikro-qarşılıqlı təsir. Çıxış girişdən sürətlidir. */
  --dur-fast: .12s;
  --dur:      .18s;
  --ease:     cubic-bezier(.2, 0, .2, 1);

  /* Sistem şrifti QƏSDƏN seçilib, kənar şrift yox.
     Windows→Segoe UI, Android→Roboto, Apple→SF Pro — hamısı yaxşıdır və
     ŞƏBƏKƏ SORĞUSU TƏLƏB ETMİR. Google Fonts CSP-də kənar mənbə açmaq və
     ödəniş səhifəsində hər ziyarətçinin IP-sini üçüncü tərəfə göndərmək
     demək olardı. Şrift lazım olsa, onu öz serverimizdə saxlamaq lazımdır
     (`font-src 'self'`), kənardan çəkmək yox. */
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --z-sticky: 20;
  --z-menu:   40;
  --z-modal: 100;
}

/* Dark mode qəsdən qurulmayıb — məhsul işıqlı üslubda satılır. */
html { color-scheme: light; }

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  background: var(--canvas);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Rəqəmlər cədvəldə və məbləğlərdə eyni enli olsun — sütunlar oynamasın. */
  font-variant-numeric: tabular-nums;
}

/* Hərəkətə həssas istifadəçilər üçün — sistem ayarına hörmət. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

*:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

a { color: var(--brand-600); text-decoration: none; }
a:hover { color: var(--brand-700); text-decoration: underline; }

h1, h2, h3, h4 {
  margin: 0 0 var(--sp-2);
  line-height: var(--lh-tight);
  font-weight: 640;
  letter-spacing: var(--track-tight);
  color: var(--ink);
  /* Uzun azərbaycan sözləri dar ekranda kəsilməsin. */
  overflow-wrap: break-word;
}
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-md); font-weight: 620; }
h4 { font-size: var(--fs-sm); font-weight: 620; }

p { margin: 0 0 var(--sp-3); }
p:last-child { margin-bottom: 0; }

/* Uzun mətn sətri 65-75 simvoldan uzun olmasın — oxunuş düşür. */
.prose p, .lead { max-width: 68ch; }

/* ================================================================ düzülüş */

.wrap        { max-width: 1120px; margin: 0 auto; padding: 0 var(--sp-5); }
.wrap-mid    { max-width: 760px;  margin: 0 auto; padding: 0 var(--sp-5); }
.wrap-narrow { max-width: 460px;  margin: 0 auto; padding: 0 var(--sp-5); }

.stack    > * + * { margin-top: var(--sp-4); }
.stack-sm > * + * { margin-top: var(--sp-2); }
.stack-lg > * + * { margin-top: var(--sp-8); }

.row         { display: flex; gap: var(--sp-3); align-items: center; }
.row-between { display: flex; gap: var(--sp-3); align-items: center;
               justify-content: space-between; flex-wrap: wrap; }
.row-wrap    { flex-wrap: wrap; }
.grow        { flex: 1; }

.grid   { display: grid; gap: var(--sp-4); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* DETAL SƏHİFƏSİ — solda əsas məzmun, sağda əməliyyat paneli.
   Admin və panelin bütün detal ekranlarında eyni nisbət işlədilir; əvvəl
   hər faylda `grid-template-columns` əl ilə təkrarlanırdı. */
.detail-grid {
  display: grid; gap: var(--sp-6);
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
}
@media (max-width: 900px) {
  .detail-grid { grid-template-columns: 1fr; }
}

/* Boşluq köməkçiləri — YALNIZ şkaladan.
   Bunlar utility «şorbası» deyil: məqsəd inline `margin-top:1.25rem`
   kimi şkaladan kənar dəyərləri aradan qaldırmaqdır. */
.mt-2 { margin-top: var(--sp-2); }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
.mt-10 { margin-top: var(--sp-10); }
.ml-2 { margin-left: var(--sp-2); }
.mb-8 { margin-bottom: var(--sp-8); }
.row-center { justify-content: center; }
.text-left { text-align: left; }
/* Yan-yana iki sahə — şaquli boşluq sahələrin öz `margin`-i ilə gəlir. */
.grid-tight { gap: 0 var(--sp-4); }
/* Bənd siyahısı — `.notice` və kart içində. */
.bullets { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); }
.bullets li + li { margin-top: var(--sp-1); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-6 { margin-bottom: var(--sp-6); }
.m-0  { margin: 0; }

.page      { padding: var(--sp-8) 0 var(--sp-16); }
.page-head { margin-bottom: var(--sp-6); }
.page-head h1 { margin-bottom: var(--sp-1); }

/* ================================================================== mətn */

.muted  { color: var(--ink-muted); }
.subtle { color: var(--ink-subtle); }
.small  { font-size: var(--fs-sm); }
.tiny   { font-size: var(--fs-xs); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

.lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--ink-muted);
}

.mono {
  font-family: var(--font-mono);
  font-size: .86em;
  letter-spacing: -0.01em;
}

.amount {
  font-size: var(--fs-xl);
  font-weight: 660;
  letter-spacing: var(--track-tight);
}

/* Bölmənin üstündəki kiçik başlıq — «göz üçün yol nişanı». */
.eyebrow {
  display: block;
  font-size: var(--fs-2xs); font-weight: 620;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-subtle);
  margin-bottom: var(--sp-2);
}

/* Yalnız ekran oxuyucu üçün — vizual gizli, amma səsləndirilir. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ================================================================== kart */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: var(--sp-5);
}
.card-lg { padding: var(--sp-8); }

/* İnteraktiv kart — üzərinə gələndə bir pillə qalxır. */
.card-link {
  display: block; color: inherit;
  transition: box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.card-link:hover {
  text-decoration: none;
  border-color: var(--line-strong);
  box-shadow: var(--shadow-raised);
  transform: translateY(-2px);
}

.card-head { margin-bottom: var(--sp-4); }
.card-head h2, .card-head h3 { margin-bottom: var(--sp-1); }
.card-head p:last-child { margin-bottom: 0; }

/* GÖSTƏRİCİ KARTI

   Etiket RƏQƏMDƏN ƏVVƏL gəlir və kiçikdir: göz əvvəlcə «nə ölçülür»
   sualına cavab tapır, sonra rəqəmi oxuyur. Əksi olsaydı, rəqəm
   kontekstsiz qalardı. */
.stat { display: flex; flex-direction: column; gap: var(--sp-1); }
.stat-label {
  order: -1;
  font-size: var(--fs-2xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-subtle);
}
.stat-value {
  font-size: var(--fs-2xl); font-weight: 660;
  letter-spacing: var(--track-tighter); line-height: 1.1;
}
/* Rəqəmin altındakı izah — «keçən aya nisbətən», «ödənilib» və s. */
.stat-note { font-size: var(--fs-xs); color: var(--ink-muted); }

/* =============================================================== düymələr */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  min-height: 40px;
  padding: 0 var(--sp-4);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font: inherit; font-size: var(--fs-sm); font-weight: 560;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.btn:hover { text-decoration: none; }
/* Basılma hissi — layout sürüşmür, yalnız kölgə və rəng dəyişir. */
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--brand-500); color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--brand-600); color: #fff; box-shadow: var(--shadow-soft); }
.btn-primary:focus-visible { box-shadow: var(--ring-brand); }

.btn-secondary {
  background: var(--surface); color: var(--ink);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-sm);
}
.btn-secondary:hover { background: var(--surface-2); border-color: var(--ink-subtle); color: var(--ink); }

.btn-ghost { background: transparent; color: var(--ink-muted); }
.btn-ghost:hover { background: var(--surface-muted); color: var(--ink); }

/* Dağıdıcı əməliyyat — semantik rəng + digər düymələrdən ayrı durur. */
.btn-danger { background: var(--surface); color: var(--danger-600); border-color: var(--danger-200); }
.btn-danger:hover { background: var(--danger-50); color: var(--danger-600); }

.btn-block { width: 100%; }
.btn-lg { min-height: 48px; padding: 0 var(--sp-6); font-size: var(--fs-md); }
.btn-sm { min-height: 34px; padding: 0 var(--sp-3); font-size: var(--fs-xs); }

.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .5; cursor: not-allowed; box-shadow: none; transform: none;
}

/* ================================================================ formalar */

.field { display: block; margin-bottom: var(--sp-4); }
.field > label {
  display: block;
  font-size: var(--fs-sm); font-weight: 560;
  margin-bottom: var(--sp-2);
}
.field .hint { font-size: var(--fs-xs); color: var(--ink-subtle); margin-top: var(--sp-2); }

.input, .select, .textarea {
  width: 100%;
  min-height: 44px;              /* toxunma hədəfi — mobil üçün minimum */
  padding: var(--sp-2) var(--sp-3);
  font: inherit;
  /* 16px-dən kiçik olsa iOS fokusda səhifəni yaxınlaşdırır. */
  font-size: var(--fs-md);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-subtle); }

.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-subtle); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: var(--ring-brand);
}
.textarea { min-height: 6rem; resize: vertical; line-height: var(--lh-body); }

.input-error { border-color: var(--danger-600); }
.input-error:focus { box-shadow: 0 0 0 3px var(--danger-50); }
.error { color: var(--danger-600); font-size: var(--fs-xs); margin-top: var(--sp-2); }

.input-prefixed { display: flex; align-items: stretch; }
.input-prefixed .prefix {
  display: flex; align-items: center;
  padding: 0 var(--sp-3);
  background: var(--surface-muted);
  border: 1px solid var(--line-strong); border-right: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  color: var(--ink-muted); font-size: var(--fs-sm); white-space: nowrap;
}
.input-prefixed .input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

/* Cədvəl sətrinin içindəki seçim.
   Eni SABİTDİR, `auto` deyil: brauzer onu ən uzun variantın mətninə görə
   hesablayır və sətirlər bir-birindən sürüşürdü. */
.select-sm {
  width: 11.5rem;
  min-height: 34px;
  padding: var(--sp-1) var(--sp-2);
  font-size: var(--fs-xs);
}

/* ================================================================ nişanlar */

.badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-full);
  font-size: var(--fs-2xs); font-weight: 580;
  line-height: 1.4;
  border: 1px solid;
  white-space: nowrap;
}
.badge-neutral { background: var(--surface-muted); border-color: var(--line);        color: var(--ink-muted); }
.badge-ok      { background: var(--success-50);   border-color: var(--success-200);  color: var(--success-600); }
.badge-warn    { background: var(--warning-50);   border-color: var(--warning-200);  color: var(--warning-600); }
.badge-danger  { background: var(--danger-50);    border-color: var(--danger-200);   color: var(--danger-600); }
.badge-brand   { background: var(--brand-50);     border-color: var(--brand-200);    color: var(--brand-700); }

/* ============================================================== bildirişlər */

.notice {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
  border: 1px solid;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}
.notice p:last-child, .notice ul:last-child { margin-bottom: 0; }
/* Səhifənin başındakı əməliyyat nəticəsi — məzmundan ayrılsın. */
.flash { margin-bottom: var(--sp-6); }

.notice-info   { background: var(--brand-50);   border-color: var(--brand-200);   color: var(--brand-700); }
.notice-ok     { background: var(--success-50); border-color: var(--success-200); color: var(--success-600); }
.notice-warn   { background: var(--warning-50); border-color: var(--warning-200); color: var(--warning-600); }
.notice-danger { background: var(--danger-50);  border-color: var(--danger-200);  color: var(--danger-600); }

/* ================================================================ cədvəllər */

.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table th {
  text-align: left;
  font-size: var(--fs-2xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-subtle);
  padding: var(--sp-3) var(--sp-2);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.table td {
  padding: var(--sp-3) var(--sp-2);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.table tbody tr { transition: background-color var(--dur-fast) var(--ease); }
.table tbody tr:hover { background: var(--surface-2); }
.table tr:last-child td { border-bottom: 0; }

/* Dar ekranda cədvəl ÖZ qutusunda sürüşür — səhifə gövdəsi yox. */
.table-scroll { overflow-x: auto; }

/* İDARƏETMƏ SÜTUNLARI

   `width: 1%` + `nowrap` = «mümkün olan ən dar»: cədvəl 100% olduğuna görə
   qalan eni mətn sütunları bölüşdürür. Üç fərqli element (seçim, düymə,
   nişan) eyni hündürlüyə gətirilir, əks halda sətirlər elementin növünə
   görə bir-birindən hündür görünür. */
.table .col-action { width: 1%; white-space: nowrap; }
.cell-action { display: flex; align-items: center; gap: var(--sp-2); }
.cell-action .select-sm,
.cell-action .btn,
.cell-action .badge { min-height: 34px; }
.cell-action .badge { justify-content: center; }

/* ============================================================== naviqasiya */

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: var(--z-sticky);
}
.topbar-inner {
  display: flex; align-items: center; gap: var(--sp-6);
  height: 60px;
}

/* Platforma admininin qabığı — mağaza panelindən fərqlənsin.
   Admin imitasiya rejimində mağaza panelinə keçir və hansı tərəfdə
   olduğunu bir baxışda bilməlidir. */
.topbar-admin { background: var(--brand-50); border-bottom-color: var(--brand-200); }

.brand {
  font-size: var(--fs-lg); font-weight: 680;
  letter-spacing: var(--track-tight);
  color: var(--ink);
  flex-shrink: 0;
}
.brand:hover { text-decoration: none; color: var(--ink); }
.brand-dot { color: var(--brand-500); }

.nav { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.nav a {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-xs);
  font-size: var(--fs-sm); font-weight: 520;
  color: var(--ink-muted);
  transition: background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.nav a:hover { background: var(--surface-muted); color: var(--ink); text-decoration: none; }
/* Hazırkı yer yalnız rənglə deyil, çəki ilə də bildirilir. */
.nav a[aria-current="page"] {
  background: var(--brand-50); color: var(--brand-700); font-weight: 600;
}

/* İki sıra süzgəc — ödəniş və çatdırılma.
   Başlıqların eni SABİTDİR ki, sıralar eyni sol kənardan başlasın. */
.filters { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.filter-row { display: flex; align-items: center; gap: var(--sp-3); }
.filter-label {
  flex: 0 0 6rem;
  font-size: var(--fs-2xs); font-weight: 600;
  color: var(--ink-subtle);
  text-transform: uppercase; letter-spacing: .06em;
}

/* ---------------------------------------------------------------- banner

   Səhifənin ən üstündəki xəbərdarlıq zolağı: dəstək rejimi, ödənilməmiş
   abunə. `.notice`-dan fərqi — tam enlidir və topbar-a yapışır.
   Əvvəl bu zolaqlar inline stillə yazılırdı və hər birində rəng əl ilə
   təkrarlanırdı. */
.banner { border-bottom: 1px solid; }
.banner-inner {
  display: flex; align-items: center; gap: var(--sp-3);
  justify-content: space-between; flex-wrap: wrap;
  padding: var(--sp-3) 0;
  font-size: var(--fs-sm);
}
.banner-warn   { background: var(--warning-50); border-color: var(--warning-200); color: var(--warning-600); }
.banner-danger { background: var(--danger-50);  border-color: var(--danger-200);  color: var(--danger-600); }

/* Zolağın içindəki düymə fon rəngini təkrarlamır — sadəcə şəffaf qalır. */
.banner .btn-ghost { color: inherit; }
.banner .btn-ghost:hover { background: rgb(255 255 255 / .5); color: inherit; }

/* ---------------------------------------------------- istifadəçi menyusu */

/* `<details>` üzərində qurulub — JavaScript sınsa da açılır/bağlanır. */
.user-menu { position: relative; }

.user-menu > summary {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-1);
  border: 1px solid transparent;   /* açılanda yer sürüşməsin */
  border-radius: var(--radius-full);
  cursor: pointer;
  color: var(--ink-muted);
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
  list-style: none;   /* defolt üçbucaq — hər brauzer üçün ayrı qayda lazımdır */
}
.user-menu > summary::-webkit-details-marker { display: none; }
.user-menu > summary::marker { content: ''; }

.user-menu > summary:hover { background: var(--surface-muted); color: var(--ink); }
.user-menu[open] > summary {
  background: var(--surface-muted);
  border-color: var(--line-strong);
  color: var(--ink);
}
.user-menu > summary:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }

.user-menu-caret { flex-shrink: 0; transition: transform var(--dur) var(--ease); }
.user-menu[open] .user-menu-caret { transform: rotate(180deg); }

.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--brand-500); color: #fff;
  font-size: var(--fs-2xs); font-weight: 660; letter-spacing: .02em;
  line-height: 1;
  user-select: none;
}

.user-menu-name {
  font-size: var(--fs-sm); font-weight: 560;
  max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.user-menu-panel {
  position: absolute; right: 0; top: calc(100% + var(--sp-2));
  min-width: 240px; max-width: min(300px, calc(100vw - 2rem));
  z-index: var(--z-menu);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-overlay);
  padding: var(--sp-1);
}

.user-menu-head {
  padding: var(--sp-3) var(--sp-3) var(--sp-3);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-1);
}
.user-menu-head-name {
  font-size: var(--fs-sm); font-weight: 620; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-menu-head-mail {
  font-size: var(--fs-xs); color: var(--ink-subtle);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.user-menu-panel a,
.user-menu-exit {
  display: flex; align-items: center; gap: var(--sp-2);
  width: 100%; text-align: left;
  min-height: 38px;
  padding: var(--sp-2) var(--sp-3);
  border: 0; background: none;
  border-radius: var(--radius-xs);
  font: inherit; font-size: var(--fs-sm);
  color: var(--ink-muted);
  cursor: pointer;
  text-decoration: none;
}
.user-menu-panel a:hover, .user-menu-exit:hover,
.user-menu-panel a:focus-visible, .user-menu-exit:focus-visible {
  background: var(--surface-muted); color: var(--ink); text-decoration: none;
}

.user-menu-ext { margin-left: auto; opacity: .45; flex-shrink: 0; }
.user-menu-sep { height: 1px; background: var(--line); border: 0; margin: var(--sp-1) 0; }

/* Çıxış — dağıdıcı olmasa da, adi bənd deyil; ayrıca durur. */
.user-menu-exit { color: var(--danger-600); }
.user-menu-exit:hover { background: var(--danger-50); color: var(--danger-600); }

/* ========================================================== giriş səhifəsi */

/* Giriş və qeydiyyat — tək kart, ekranın ortasında.
   `min-height` verilir ki, kart qısa formada da yuxarıya yapışmasın. */
.auth-page {
  display: flex; flex-direction: column; justify-content: center;
  min-height: calc(100vh - var(--sp-16));
  padding: var(--sp-12) var(--sp-5);
}
.auth-brand { text-align: center; margin-bottom: var(--sp-8); }
.auth-foot  { text-align: center; margin-top: var(--sp-6); font-size: var(--fs-sm); }

/* Şərtlərlə razılaşma qutusu — etiket ilə birlikdə tıklanan sahə. */
.checkbox-field {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  font-weight: 400; cursor: pointer;
  font-size: var(--fs-sm);
}
.checkbox-field input { margin-top: 3px; flex-shrink: 0; }

/* Cədvəl başlığının sabit eni — «ad: dəyər» tipli detal cədvəlləri üçün. */
.th-label { width: 42%; }

/* Siyahı başlığındakı axtarış qutusu. */
.search-input { width: 15rem; max-width: 100%; }

/* ================================================================= landing */

/* Hero fonu — çox yumşaq indiqo işıq. Səhifənin başlanğıcını
   bildirir, oxunuşa mane olmur (mətn həmişə tam kontrastlı qalır). */
.hero {
  position: relative;
  padding: var(--sp-16) 0 var(--sp-12);
  text-align: center;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 80% at 50% 0%, var(--brand-50) 0%, transparent 70%),
    radial-gradient(40% 60% at 85% 10%, #eef6ff 0%, transparent 70%);
  z-index: -1;
}
.hero h1 {
  font-size: var(--fs-3xl);
  letter-spacing: var(--track-tighter);
  max-width: 16ch;
  margin-left: auto; margin-right: auto;
}
.hero .lead { margin: var(--sp-4) auto 0; max-width: 52ch; }
.hero-actions {
  display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap;
  margin-top: var(--sp-8);
}
.hero-note { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--ink-subtle); }

.section { padding: var(--sp-12) 0; }
.section-head { text-align: center; margin-bottom: var(--sp-8); }
.section-head h2 { font-size: var(--fs-2xl); }
.section-head p { margin: var(--sp-2) auto 0; max-width: 56ch; color: var(--ink-muted); }

/* Xüsusiyyət kartı — ikon üstdə, dairəvi yumşaq fonda. */
.feature-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  margin-bottom: var(--sp-4);
  border-radius: var(--radius-sm);
  background: var(--brand-50); color: var(--brand-600);
}

/* ADDIMLAR — «necə işləyir» bölməsi.
   Nömrələr `<ol>`-un öz sayğacındandır: markup semantik qalır və
   addım əlavə ediləndə heç nə əl ilə yenilənmir. */
.steps { list-style: none; counter-reset: addim; margin: 0; padding: 0;
         display: grid; gap: var(--sp-6); }
.steps > li { counter-increment: addim; position: relative; padding-left: var(--sp-12); }
.steps > li::before {
  content: counter(addim);
  position: absolute; left: 0; top: 0;
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--brand-500); color: #fff;
  font-size: var(--fs-sm); font-weight: 660;
  font-variant-numeric: normal;
}
/* Addımları birləşdirən şaquli xətt — sonuncudan sonra çəkilmir. */
.steps > li:not(:last-child)::after {
  content: ""; position: absolute;
  left: 16px; top: 42px; bottom: calc(var(--sp-6) * -1 + 4px);
  width: 2px; background: var(--line);
}
.steps h3 { margin-bottom: var(--sp-1); }

@media (min-width: 761px) {
  /* Geniş ekranda addımlar yan-yana — şaquli xətt üfüqiyə çevrilir. */
  .steps { grid-template-columns: repeat(3, 1fr); }
  .steps > li { padding-left: 0; padding-top: var(--sp-12); }
  .steps > li:not(:last-child)::after {
    left: 42px; right: calc(var(--sp-6) * -1 + 4px);
    top: 16px; bottom: auto; width: auto; height: 2px;
  }
}

/* QİYMƏT ZOLAĞI — solda nəyin daxil olduğu, sağda tarif.
   Tək tarifimiz var; onu boş bölmənin ortasında tək qoymaq onu
   kiçik göstərirdi. Yanına məzmun qoyulanda tarif «seçim» kimi yox,
   sadə və şəffaf qiymət kimi oxunur. */
.pricing-band {
  display: grid; gap: var(--sp-8);
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  align-items: center;
  padding: var(--sp-10);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
@media (max-width: 860px) {
  .pricing-band { grid-template-columns: 1fr; padding: var(--sp-6); }
}

/* Qiymət kartı — zolağın içindəki vurğulu hissə. */
.price-card {
  max-width: 420px; margin: 0 auto;
  border-color: var(--brand-200);
  background: var(--brand-50);
  box-shadow: none;
}

/* Abunənin vəziyyət kartı — daxil olmuş istifadəçi üçün.
   Qiymət kartından AYRI sinifdir: onun içindəki nişan qırmızı da ola
   bilər və indiqo fon həmin xəbərdarlığı boğardı. */
.status-card { max-width: 420px; margin: 0 auto; }
.price-value {
  font-size: var(--fs-4xl); font-weight: 680;
  letter-spacing: var(--track-tighter); line-height: 1;
  margin: var(--sp-4) 0 var(--sp-2);
}
.price-list { list-style: none; margin: 0; padding: 0; text-align: left; }
.price-list li {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  padding: var(--sp-2) 0;
  font-size: var(--fs-sm); color: var(--ink-muted);
}
.price-list svg { flex-shrink: 0; margin-top: 2px; color: var(--success-600); }

/* ================================================================== mağaza */

/* Vitrin kartı — qiymət həmişə ən aşağıda, bütün kartlarda eyni oxda.
   Alıcı kartlar arasında məhz qiyməti müqayisə edir; o, sətirdən-sətrə
   sürüşsəydi, göz hər dəfə yenidən axtarmalı olardı. */
.product-card { display: flex; flex-direction: column; }
.product-price { margin: var(--sp-4) 0 0; margin-top: auto; padding-top: var(--sp-4); }

/* Ödəniş səhifəsi: solda məhsul, sağda forma.
   Sağ sütun YAPIŞQANDIR — uzun formada alıcı nə üçün ödədiyini
   gözdən itirməsin. */
.checkout-grid {
  display: grid; gap: var(--sp-6);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: start;
}
.checkout-aside { position: sticky; top: calc(60px + var(--sp-6)); }

@media (max-width: 860px) {
  .checkout-grid { grid-template-columns: 1fr; }
  /* Dar ekranda yapışqanlıq mənasızdır — sütunlar alt-alta düzülür. */
  .checkout-aside { position: static; }
}

/* Ödəniləcək məbləğ — səhifədəki ƏN İRİ elementdir.
   Alıcı «nə qədər ödəyirəm?» sualına heç nə axtarmadan cavab tapmalıdır. */
.checkout-total {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--line);
  margin-top: var(--sp-4);
}
.checkout-total .amount { font-size: var(--fs-2xl); }

/* ================================================================== qrafik */

/* Serverdə SVG kimi qurulur, JavaScript yoxdur. Rəng markanın öz
   indiqosudur: tək seriya olduğu üçün kateqoriya paleti lazım deyil.
   Kontrast fon üzərində yoxlanılıb (≥ 3:1). */
.chart { width: 100%; }
.chart-svg { display: block; width: 100%; height: auto; }

.chart-bar { fill: var(--brand-500); transition: fill var(--dur-fast) var(--ease); }
.chart-bar:hover { fill: var(--brand-600); }

/* Ödənişi olmayan ay — bazada nazik iz; «boşluq» özü məlumatdır. */
.chart-bar-empty { fill: var(--line-strong); }

/* Tor xətləri fonun bir ton fərqindədir — geri planda qalır. */
.chart-grid { stroke: var(--line); stroke-width: 1; }

/* Mətn həmişə mətn rəngindədir, seriya rəngində deyil. */
.chart-label { fill: var(--ink-subtle); font-size: 12px; text-anchor: middle; font-family: var(--font); }
.chart-value { fill: var(--ink); font-size: 12.5px; font-weight: 600; text-anchor: middle; font-family: var(--font); }
.chart-scale { fill: var(--ink-subtle); font-size: 11px; font-family: var(--font); font-variant-numeric: tabular-nums; }

/* ==================================================== sifariş mərhələləri */

/* Alıcının gördüyü şaquli mərhələ xətti. */
.stages { list-style: none; margin: 0; padding: 0; }

.stage {
  position: relative;
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding-bottom: var(--sp-5);
}
/* Nöqtələri birləşdirən xətt — sonuncudan sonra çəkilmir. */
.stage:not(:last-child)::before {
  content: "";
  position: absolute; left: 11px; top: 24px; bottom: 0;
  width: 2px; background: var(--line);
}
.stage-kecdi:not(:last-child)::before { background: var(--success-600); }
.stage:last-child { padding-bottom: 0; }

.stage-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  background: var(--surface);
  color: #fff;
  z-index: 1;
}
.stage-kecdi .stage-dot { background: var(--success-600); border-color: var(--success-600); }
.stage-indi .stage-dot { border-color: var(--brand-500); box-shadow: 0 0 0 4px var(--brand-50); }

.stage-name { font-size: var(--fs-sm); color: var(--ink-subtle); padding-top: 2px; }
.stage-kecdi .stage-name { color: var(--ink-muted); }
.stage-indi  .stage-name { color: var(--ink); font-weight: 600; }

.stage-now {
  display: inline-block; margin-left: var(--sp-2);
  padding: 0 var(--sp-2); border-radius: var(--radius-full);
  background: var(--brand-50); color: var(--brand-700);
  font-size: var(--fs-2xs); font-weight: 600; vertical-align: 1px;
}

/* ================================================================ timeline */

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  position: relative; padding: 0 0 var(--sp-4) var(--sp-5);
  border-left: 2px solid var(--line);
}
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline li::before {
  content: ""; position: absolute; left: -5px; top: 7px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand-500);
}

/* ============================================================ boş vəziyyət */

.empty { padding: var(--sp-12) var(--sp-4); text-align: center; color: var(--ink-muted); }
.empty h3 { color: var(--ink); margin-bottom: var(--sp-2); }

/* ================================================================= rejim */

/* Radio düymələri «kart» kimi — seçim aydın görünsün. */
.mode-option {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.mode-option + .mode-option { margin-top: var(--sp-3); }
.mode-option:hover { background: var(--surface-2); border-color: var(--ink-subtle); }
.mode-option.is-selected {
  border-color: var(--brand-500); background: var(--brand-50);
  box-shadow: var(--ring-brand);
}
.mode-option input { margin-top: var(--sp-1); flex-shrink: 0; }
.mode-option > span { display: flex; flex-direction: column; gap: var(--sp-1); }
.mode-option strong { font-size: var(--fs-sm); }

/* ================================================================ köməkçi */

.copy-row {
  display: flex; gap: var(--sp-2); align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-3);
}
.copy-row code {
  flex: 1; font-family: var(--font-mono); font-size: var(--fs-xs);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.btn-copy {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;                     /* uzun link onu sıxmasın */
  width: 32px; height: 32px; padding: 0;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xs);
  color: var(--ink-muted);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.btn-copy:hover { background: var(--brand-50); color: var(--brand-600); border-color: var(--brand-200); }
.btn-copy:active { transform: translateY(1px); }

/* İki ikon üst-üstə deyil, növbə ilə göstərilir. */
.btn-copy .icon-done { display: none; }
.btn-copy.is-copied {
  background: var(--success-50); border-color: var(--success-200); color: var(--success-600);
}
.btn-copy.is-copied .icon-copy { display: none; }
.btn-copy.is-copied .icon-done { display: block; }

.divider { height: 1px; background: var(--line); border: 0; margin: var(--sp-6) 0; }

.pagination { display: flex; gap: var(--sp-1); flex-wrap: wrap; margin-top: var(--sp-4); }
.pagination a, .pagination span {
  display: inline-flex; align-items: center;
  min-height: 34px; padding: 0 var(--sp-3);
  border-radius: var(--radius-xs);
  font-size: var(--fs-sm);
  border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-muted);
}
.pagination a:hover { background: var(--surface-muted); color: var(--ink); text-decoration: none; }
.pagination .active { background: var(--brand-500); border-color: var(--brand-500); color: #fff; }

/* =============================================================== responsiv */

@media (max-width: 900px) {
  .hero { padding: var(--sp-12) 0 var(--sp-10); }
}

@media (max-width: 640px) {
  .topbar-inner { height: auto; padding: var(--sp-3) 0; flex-wrap: wrap; gap: var(--sp-3); }

  .page { padding: var(--sp-6) 0 var(--sp-12); }
  .card { padding: var(--sp-4); }
  .card-lg { padding: var(--sp-5); }

  h1 { font-size: var(--fs-xl); }
  .hero h1 { font-size: var(--fs-2xl); max-width: none; }
  .hero .lead { font-size: var(--fs-md); }
  .stat-value { font-size: var(--fs-xl); }
  .price-value { font-size: var(--fs-3xl); }

  /* Hero düymələri tam enli — barmaqla rahat vurulsun. */
  .hero-actions { flex-direction: column; align-items: stretch; }

  .user-menu-name { display: none; }
  .user-menu > summary { padding: var(--sp-1); gap: var(--sp-1); }

  /* Dar ekranda süzgəc başlığı öz sətrində qalır. */
  .filter-row { flex-direction: column; align-items: stretch; gap: var(--sp-1); }
  .filter-label { flex: none; }
}

/* Masaüstündə hero daha iri — geniş ekranda kiçik başlıq zəif görünür. */
@media (min-width: 901px) {
  .hero h1 { font-size: var(--fs-4xl); }
}