@charset "UTF-8";
/* ==========================================================================
   poeziya.az — dizayn sistemi
   Krem kağız + isti tünd rejim · şeir mətni səhifənin baş qəhrəmanıdır
   Mobil birinci: trafikin ~80%-i telefondur

   ƏSAS MEXANİZM — “misra qırılmasın”
   ------------------------------------------------------------------
   Qəzəl misrası 48–50 simvola çata bilir (Kamil bəhri). Ölçmə göstərdi ki,
   50 simvolu 360px ekranda bir sətrə sığdırmaq üçün şrift ölçüsü sabit
   qala bilməz. Ona görə şeirin şrift ölçüsü SABİT DEYİL — konteynerin
   eninə görə həmin şeirin ən uzun misrasına uyğunlaşır:

       font-size: clamp(min, 100cqw / --uzunluq, max)

   --uzunluq = o şeirdə ən uzun misranın Faustina şriftində em ilə eni.
   Hər şeir HTML-də öz --uzunluq dəyərini gətirir (data/poems.json-dan).

   Nəticə (ölçülmüş, təxmin deyil):
     Nəsimi qəzəli (23.41em)  → 360px:14.7px  390px:16.0px  masaüstü:22px
     Vaqif qoşması (14.63em)  → 360px:22px    (qısa misra, tam ölçü)
   Yəni misra HEÇ BİR ekran enində qırılmır.

   Oxucu mətni böyüdərsə (--oxu > 1) misra artıq sığmaya bilər — o zaman
   `text-wrap: balance` onu aruz vəznindəki sezurada, yəni vergüldə,
   iki bərabər yarımmisraya bölür və `.misra` asma girinti alır.
   Yəni qırılma baş verəndə də şeirin öz ritmi ilə üst-üstə düşür.

   ŞRİFT SEÇİMİ — ölçmə ilə: bax data/SRIFT-QERARI.md
   Faustina azərbaycan hərflərini tam daşıyır (ə Ə ğ Ğ ı İ ö Ö ş Ş ü Ü ç Ç)
   və 50 simvol sığdıqdan sonra ən böyük REAL hərf hündürlüyünü verir.
   DİQQƏT: PT Serif, Figtree, Karla, Rubik-də “ə” hərfi YOXDUR — istifadə etmə.
   ========================================================================== */

/* ── 1. Sıfırlama ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  /* Lövbərə keçəndə hədəf yapışqan başlığın altında qalmasın */
  scroll-padding-top: 5rem;
}
:target, [id] { scroll-margin-top: 5rem; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 3px; border-radius: 2px; }

/* ── 2. Rənglər — krem kağız (işıq) ─────────────────────────────────────
   Bütün mətn rəngləri WCAG AA (4.5:1) üzrə ÖLÇÜLÜB. Hədd ən tünd
   mövcud səth olan --kagiz-2 ilə deyil, ondan da tünd fərziyyəvi səthlə
   götürülüb — yəni real səhifədə ehtiyat payı daha böyükdür.
   İyerarxiya: 13.4:1 (əsas) → 7.0:1 (ikinci) → 4.5:1 (meta).
   Dəyişdirsəniz yenidən ölçün: kiçik mətn üçün 4.5:1 məcburidir.       */
/*  Faustina yüklənənə qədər işləyən ehtiyat şrift.

    --uzunluq Faustina metrikası ilə hesablanır. Ehtiyat şriftlər (Iowan Old
    Style, Georgia, Noto Serif) təxminən 10% DAHA GENİŞDİR — clamp-dəki 0.45em
    ehtiyat isə cəmi ~2%-dir. Nəticədə Faustina gəlməzdən əvvəl misralar
    qırılır, şrift yetişəndə isə yenidən birləşir: səhifənin ən böyük mətn
    bloku sıçrayır (CLS, üstəlik LCP elementində).

    ÖLÇÜLMÜŞ: düzəlişsiz 640 misradan 130-u qırılırdı. 90%-də sıfır, 91%-də
    yenə 6 misra qırılır — ona görə 89% götürülüb (bir addım ehtiyat).
    Times New Roman QƏSDƏN bu siyahıda yoxdur: o, Faustinadan DARDIR,
    ona 89% tətbiq olunsa mətn həddən artıq kiçilərdi. */
@font-face {
  font-family: "Faustina ehtiyat";
  src: local("Iowan Old Style"), local("Palatino Linotype"), local("Palatino"),
       local("Georgia"), local("Noto Serif");
  size-adjust: 89%;
}

:root {
  /* səthlər */
  --kagiz:      #FAF6EE;   /* əsas fon — isti krem, ağ deyil */
  --kagiz-2:    #F3ECDE;   /* qalxmış səth: kart, reklam çərçivəsi */

  /* mətn */
  --murekkeb:   #211C15;   /* əsas mətn — isti qara, #000 deyil */
  --murekkeb-2: #51493F;   /* ikinci dərəcəli mətn, meta */
  --murekkeb-3: #6E6556;   /* ən sakit: tarix, yardımçı yazı */

  /* vurğu — sakit qızılı-qəhvəyi, “yumşaq” tələbinə uyğun */
  --vurgu:      #7E6136;
  --vurgu-2:    #634B28;   /* hover / basılmış */

  --xett:       color-mix(in srgb, var(--murekkeb) 13%, transparent);
  --xett-yum:   color-mix(in srgb, var(--murekkeb) 7%, transparent);


  /* şriftlər */
  --f-seir: "Faustina", "Faustina ehtiyat", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --f-ui:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* ölçü, ritm */
  --oxu: 1;                        /* oxucunun mətn böyütmə əmsalı (JS dəyişir) */
  /*  Qayda sadədir: 18px TAVAN. Misra sığırsa 18px qalır — qısa misraya
      görə şrift BÖYÜMÜR. Sığmırsa, tam sığana qədər kiçilir.
      Alt hədd yalnız absurd kiçilməyə qarşı təhlükəsizlik payıdır;
      13px olanda 320px ekranda uzun qəzəl misrası sığmırdı. */
  --seir-min: 0.625rem;            /* 10px — yalnız təhlükəsizlik həddi */
  --seir-max: 1.125rem;            /* 18px — TAVAN, heç bir halda keçilmir */
  --misra-ara: 1.85;               /* misra sətir aralığı */
  --bend-ara: 1.6em;               /* bəndlər arası boşluq */

  --olcu-metn: 38rem;              /* nəsr üçün oxu ölçüsü */
  --olcu-seir: 41.25rem;           /* 660px — şeir konteyneri */
  --kenar: clamp(0.5rem, -1.5rem + 8vw, 1.5rem);   /* şeir üçün dar kənar */
  --kenar-ui: clamp(1rem, 0.5rem + 2vw, 2rem);     /* interfeys üçün normal kənar */

  --radius: 3px;                   /* kağız hissi: kəskin, yumru deyil */
  --kecid: 180ms cubic-bezier(.4,0,.2,1);

  color-scheme: light;
}

/* ── 3. İsti tünd rejim — çevrilmiş surət DEYİL ───────────────────────── */
/*  Tünd rejimdə kontrast qəsdən aşağı salınır: ağ üstə qara qədər
    “qışqırmır”, uzun oxuda gözü yandırmır. Saf #000 və saf #FFF yoxdur. */
@media (prefers-color-scheme: dark) {
  :root:not([data-rejim="isiq"]) {
    --kagiz:      #15120E;
    --kagiz-2:    #1D1914;
    --murekkeb:   #E8E0D2;
    --murekkeb-2: #B9B1A2;
    --murekkeb-3: #928770;
    --vurgu:      #C9A46A;
    --vurgu-2:    #DEBC86;
    --xett:       color-mix(in srgb, var(--murekkeb) 15%, transparent);
    --xett-yum:   color-mix(in srgb, var(--murekkeb) 8%, transparent);
    color-scheme: dark;
  }
}
:root[data-rejim="tund"] {
  --kagiz:      #15120E;
  --kagiz-2:    #1D1914;
  --murekkeb:   #E8E0D2;
  --murekkeb-2: #B9B1A2;
  --murekkeb-3: #928770;
  --vurgu:      #C9A46A;
  --vurgu-2:    #DEBC86;
  --xett:       color-mix(in srgb, var(--murekkeb) 15%, transparent);
  --xett-yum:   color-mix(in srgb, var(--murekkeb) 8%, transparent);
  color-scheme: dark;
}

/* ── 4. Gövdə ─────────────────────────────────────────────────────────── */
body {
  background: var(--kagiz);
  color: var(--murekkeb);
  font-family: var(--f-ui);
  font-size: 1rem;
  line-height: 1.6;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;            /* üfüqi sürüşmə mütləq olmasın */
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto !important; }
}

/* ── 5. Başlıq — sakit, sticky, aşağı sürüşəndə gizlənir ─────────────── */
.bashliq {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--kagiz) 88%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--xett-yum);
  transition: transform var(--kecid);
}
@supports not (backdrop-filter: blur(1px)) { .bashliq { background: var(--kagiz); } }
.bashliq--gizli { transform: translateY(-100%); }
/*  Sahələr AÇIQ təyin olunub. Avtomatik yerləşdirməyə buraxılsaydı,
    tam enli axtarış sətri rejim düyməsini üçüncü sətrə atırdı.
    Mobildə axtarış öz sətrində tam enlə dayanır — istifadəçi nəyisə
    axtarmaq istəyəndə əvvəlcə axtarış qutusunu axtarmamalıdır. */
/*  Axtarış daimi açıq qalmır — ikona basanda açılır.
    Sahələr açıq təyin olunub, avtomatik yerləşdirmə düymələri
    gözlənilməz sətirlərə atırdı.                                    */
.bashliq__ic {
  max-width: 72rem; margin-inline: auto;
  padding: 0.625rem var(--kenar-ui);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "logo    aletler"
    "axtaris axtaris";
  align-items: center; gap: 0.5rem 0.75rem;
}
.bashliq__logo    { grid-area: logo; }
.naviq            { grid-area: naviq; }
.bashliq__aletler { grid-area: aletler; display: flex; gap: 0.125rem; justify-self: end; }
.bashliq__axtaris { grid-area: axtaris; }
.bashliq__axtaris[hidden] { display: none; }
@media (min-width: 860px) {
  .bashliq__ic {
    grid-template-columns: auto auto 1fr auto;
    grid-template-areas: "logo naviq axtaris aletler";
  }
  .bashliq__axtaris { max-width: 24rem; justify-self: end; }
}
/*  Açılanda yumşaq görünsün — sürüşmə deyil, sadə solma. */
@media (prefers-reduced-motion: no-preference) {
  .bashliq__axtaris:not([hidden]) { animation: axtaris-ac 160ms ease-out; }
  @keyframes axtaris-ac { from { opacity: 0; transform: translateY(-4px); } }
}
.alet[aria-expanded="true"] { color: var(--vurgu); background: var(--xett-yum); }
.bashliq__logo {
  font-family: var(--f-seir);
  font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.01em;
  white-space: nowrap;
}
.bashliq__logo span { color: var(--vurgu); }

/* naviqasiya — mobildə yatay sürüşən, masaüstündə sadə sıra */
.naviq { display: flex; gap: 0.25rem; }
.naviq__link {
  font-size: 0.875rem; color: var(--murekkeb-2);
  padding: 0.4rem 0.6rem; border-radius: var(--radius);
  transition: color var(--kecid), background var(--kecid);
  white-space: nowrap;
}
.naviq__link:hover { color: var(--murekkeb); background: var(--xett-yum); }
.naviq__link[aria-current="page"] { color: var(--vurgu); font-weight: 500; }
@media (max-width: 859px) {
  .naviq { display: none; }              /* mobildə alt naviqasiyaya keçir */
}

/* alət düymələri: rejim + mətn ölçüsü */
.alet {
  display: inline-grid; place-items: center;
  width: 2.125rem; height: 2.125rem;
  border-radius: var(--radius); color: var(--murekkeb-2);
  transition: color var(--kecid), background var(--kecid);
  flex: none;
}
.alet:hover { color: var(--murekkeb); background: var(--xett-yum); }
.alet svg { width: 1.125rem; height: 1.125rem; stroke-width: 1.6; }
.alet__isiq { display: none; }
:root[data-rejim="tund"] .alet__tund { display: none; }
:root[data-rejim="tund"] .alet__isiq { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-rejim="isiq"]) .alet__tund { display: none; }
  :root:not([data-rejim="isiq"]) .alet__isiq { display: block; }
}

/* ── 6. Əsas karkas ───────────────────────────────────────────────────── */
.esas { flex: 1; width: 100%; }
.qab { max-width: 72rem; margin-inline: auto; padding-inline: var(--kenar-ui); }
.qab--dar { max-width: var(--olcu-seir); }
.bolme { padding-block: clamp(2rem, 1rem + 4vw, 3.5rem); }
.bolme__bashliq {
  font-family: var(--f-ui);
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--murekkeb-3);
  display: flex; align-items: center; gap: 0.75rem;
  margin-block-end: 1.5rem;
}
.bolme__bashliq::after { content: ""; flex: 1; height: 1px; background: var(--xett-yum); }

/* ══════════════════════════════════════════════════════════════════════
   7. ŞEİR — səhifənin baş qəhrəmanı
   ══════════════════════════════════════════════════════════════════════ */
.seir {
  container-type: inline-size;        /* cqw-nin mənbəyi budur */
  max-width: var(--olcu-seir);
  margin-inline: auto;
  padding-inline: var(--kenar);       /* mobildə qəsdən dar: hər piksel misraya lazımdır */
}

/*  Mobildə hər piksel misraya lazımdır → dar kənar (--kenar).
    600px-dən yuxarı isə misra onsuz da sığır, ona görə interfeys kənarına
    keçirik və şeir lentlə eyni düzülmə xəttinə düşür.                    */
@media (min-width: 600px) {
  .seir { padding-inline: var(--kenar-ui); }
}

.seir__janr {
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--vurgu);
}
.seir__bashliq {
  font-family: var(--f-seir);
  font-size: clamp(1.5rem, 1.15rem + 1.8vw, 2.25rem);
  font-weight: 600; line-height: 1.2; letter-spacing: -0.015em;
  text-wrap: balance;
  margin-block: 0.5rem 0.375rem;
}
.seir__sair {
  font-family: var(--f-ui);
  font-size: 0.9375rem; color: var(--murekkeb-2);
}
.seir__sair a { border-bottom: 1px solid var(--xett); }
.seir__sair a:hover { color: var(--vurgu); border-color: currentColor; }
.seir__meta {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1rem;
  font-size: 0.8125rem; color: var(--murekkeb-3);
  margin-block-start: 0.75rem;
  padding-block-end: 1.5rem;
  border-bottom: 1px solid var(--xett-yum);
}

/*  MƏTN — uyğunlaşan ölçü.
    --uzunluq HTML-dən gəlir: o şeirdə ən uzun misranın eni (em).
    100cqw = şeir konteynerinin daxili eni.                               */
.seir__metn {
  /*  DİQQƏT: burada `--uzunluq: 24;` ELAN ETMƏ.
      Elementin öz üzərində elan edilən xüsusi dəyişən valideyndən
      irsən gələni kölgələyir — .seir-dəki inline dəyər işləməz və
      bütün şeirlər eyni ölçüdə açılar. Ehtiyat dəyər var() içində. */
  font-family: var(--f-seir);
  font-weight: 400;                                /* metrika da 400-dədir */
  /* +0.45em ehtiyat payı: uyğunlaşma tam sərhəddə işləyəndə yarım piksel
     yuvarlaqlaşma misranı aşıra bilir. Ölçmə göstərdi ki, pay olmadan
     360px-də ən uzun misra qırılırdı. */
  /*  Hər ÜÇ hədd də --oxu əmsalına vurulur.
      Yalnız orta dəyər vurulsaydı, oxucu A− ilə kiçiltmək istəyəndə
      sabit alt hədd qarşısını alardı və düymə müəyyən yerdən sonra
      heç nə etməzdi. Beləcə bütün əyri birlikdə sürüşür. */
  font-size: clamp(
    calc(var(--seir-min) * var(--oxu)),
    calc(100cqw / (var(--uzunluq, 24) + 0.45) * var(--oxu)),
    calc(var(--seir-max) * var(--oxu))
  );
  line-height: var(--misra-ara);
  letter-spacing: 0.002em;
  color: var(--murekkeb);
  margin-block-start: 2rem;
  font-variant-numeric: oldstyle-nums;
  hanging-punctuation: first last;
}
/*  Konteyner sorğuları olmayan köhnə brauzerlər üçün ehtiyat:
    vw ilə eyni hesabı aparırıq (şeir konteyneri ~ ekran eni qədərdir).  */
@supports not (container-type: inline-size) {
  .seir__metn { font-size: clamp(calc(var(--seir-min) * var(--oxu)), calc(94vw / (var(--uzunluq, 24) + 0.45) * var(--oxu)), calc(var(--seir-max) * var(--oxu))); }
}

.bend { margin-block-end: var(--bend-ara); }
.bend:last-child { margin-block-end: 0; }

/*  MİSRA — asma girinti.
    Normal halda misra sığır və bir sətirdir. Oxucu mətni böyüdəndə
    `balance` onu bərabər iki hissəyə bölür, ikinci hissə isə
    text-indent mənfi + padding sayəsində içəri girir — yəni
    “yeni misra” kimi görünmür, davam kimi görünür.                      */
.misra {
  display: block;
  text-wrap: balance;
  padding-inline-start: 1.15em;
  text-indent: -1.15em;
  overflow-wrap: break-word;         /* son çarə: çox uzun söz ekranı aşmasın */
}
/*  Sərbəst şeirdə şairin öz pilləli düzümü (Ramiz Rövşən).
    text-indent: -1.15em irsən qalır, ona görə BİRİNCİ sətir faktiki
    2.9 − 1.15 = 1.75em içəridən başlayır. build.py eni hesablayanda
    məhz 1.75em əlavə etməlidir — 2.9 yazılsaydı şrift lazımsız kiçilərdi. */
.misra--davam { padding-inline-start: 2.9em; }   /* faktiki girinti: 1.75em */

/* Qəzəldə beyt — iki misra bir qrup; beytlər arası nəfəs */
.beyt { margin-block-end: var(--bend-ara); }
.beyt:last-child { margin-block-end: 0; }

/* Rədif/təkrar misra bir az fərqlənsin (qoşmada “durnalar”) */
.misra--redif { color: color-mix(in srgb, var(--murekkeb) 88%, var(--vurgu)); }

.seir__imza {
  font-family: var(--f-ui);
  font-size: 0.8125rem; color: var(--murekkeb-3);
  margin-block-start: 2.5rem; padding-block-start: 1.25rem;
  border-top: 1px solid var(--xett-yum);
  display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: baseline;
}

/* ── 8. Oxu nəzarəti — mətn ölçüsü ────────────────────────────────────── */
.oxu-nezaret {
  display: flex; align-items: center; gap: 0.125rem;
  border: 1px solid var(--xett); border-radius: var(--radius);
  padding: 0.125rem;
}
.oxu-nezaret__duyme {
  display: grid; place-items: center;
  /* 40px + qrupun 4px doldurması ≈ 44px — telefonda rahat toxunma sahəsi */
  width: 2.5rem; height: 2.5rem; border-radius: 2px;
  font-size: 0.8125rem; font-weight: 600; color: var(--murekkeb-2);
  transition: color var(--kecid), background var(--kecid);
}
.oxu-nezaret__duyme:hover:not(:disabled) { color: var(--murekkeb); background: var(--xett-yum); }
.oxu-nezaret__duyme:disabled { opacity: .35; cursor: default; }
/*  `display: grid` brauzerin [hidden]{display:none} qaydasını üstələyir —
    ona görə gizlətməni açıq şəkildə yazırıq, yoxsa ↺ düyməsi standart
    ölçüdə də görünür. */
.oxu-nezaret__duyme[hidden] { display: none; }
.oxu-nezaret__sifirla { font-size: 1rem; }

/* ── 9. Şeir siyahısı — kart deyil, sadə sıra ─────────────────────────
   Kart formatı hər şeirə 5–6 sətir yer tuturdu; 300 şeirdə siyahı
   oxunmaz olurdu. Wikisource üslubu: bir şeir = bir sətir.          */
.siyahi { display: grid; margin-block: 0.5rem 0; }
.siyahi__setir {
  display: flex; align-items: baseline; gap: 0.75rem;
  /*  min-width:0 olmasa flex elementləri məzmun eninə görə şişir və
      dar ekranda sətir ekranı aşır (320px-də axtarış nəticəsində oldu). */
  min-width: 0; max-width: 100%;
  padding: 0.6875rem 0.5rem;
  border-bottom: 1px solid var(--xett-yum);
  transition: background var(--kecid);
  border-radius: var(--radius);
}
.siyahi__setir:last-child { border-bottom: 0; }
.siyahi__setir:hover { background: var(--kagiz-2); }
.siyahi__nomre {
  flex: none; min-width: 1.5rem;
  font-size: 0.75rem; color: var(--murekkeb-3);
  font-variant-numeric: tabular-nums oldstyle-nums;
}
.siyahi__ad {
  flex: 1; min-width: 0; max-width: 100%;
  overflow-wrap: anywhere;
  font-family: var(--f-seir);
  font-size: 1.0625rem; font-weight: 500; line-height: 1.35;
  text-wrap: pretty;
}
.siyahi__setir:hover .siyahi__ad { color: var(--vurgu-2); }
.siyahi__sair {
  font-size: 0.8125rem; color: var(--murekkeb-2);
  white-space: nowrap; min-width: 0;
  overflow: hidden; text-overflow: ellipsis;
}
.siyahi__meta {
  flex: none; font-size: 0.75rem; color: var(--murekkeb-3);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
@media (max-width: 519px) {
  /* Telefonda şair adı aşağı sətrə düşür ki, başlıq tam görünsün */
  .siyahi__setir { flex-wrap: wrap; gap: 0.125rem 0.625rem; }
  .siyahi__ad { flex-basis: calc(100% - 2.25rem); }
  .siyahi__sair, .siyahi__meta { margin-inline-start: 2.25rem; }
  .siyahi__sair + .siyahi__meta { margin-inline-start: 0; }
}

/* ── Süzgəc — janr və qrup ────────────────────────────────────────────── */
.suzgec {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem;
  margin-block-end: 0.75rem;
}
.suzgec__etiket {
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--murekkeb-3);
  margin-inline-end: 0.375rem;
}
.suzgec + .suzgec { margin-block-end: 1.5rem; }
.suzgec__duyme {
  font-size: 0.8125rem; color: var(--murekkeb-2);
  padding: 0.3125rem 0.75rem;
  border: 1px solid var(--xett); border-radius: 100px;
  background: transparent;
  transition: all var(--kecid);
  white-space: nowrap;
}
.suzgec__duyme:hover { color: var(--murekkeb); border-color: var(--murekkeb-3); }
.suzgec__duyme[aria-pressed="true"],
.suzgec__duyme.is-aktiv {
  background: var(--vurgu); border-color: var(--vurgu);
  color: var(--kagiz); font-weight: 500;
}
.suzgec__bosh {
  padding: 2rem 0.5rem; color: var(--murekkeb-3); font-size: 0.9375rem;
}

/* ── Əlifba zolağı — şairlər səhifəsi ─────────────────────────────────── */
.elifba {
  display: flex; flex-wrap: wrap; gap: 0.25rem;
  margin-block-end: 1.75rem;
}
.elifba__herf {
  min-width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  font-size: 0.875rem; font-weight: 500; color: var(--murekkeb-2);
  border: 1px solid var(--xett); border-radius: var(--radius);
  transition: all var(--kecid);
}
.elifba__herf:hover:not(.elifba__herf--bosh) { color: var(--murekkeb); border-color: var(--murekkeb-3); }
.elifba__herf.is-aktiv {
  background: var(--vurgu); border-color: var(--vurgu);
  color: var(--kagiz);
}
.elifba__herf--bosh { opacity: 0.28; pointer-events: none; }

/* ── Səhifələmə ───────────────────────────────────────────────────────── */
.sehifeleme {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem;
  margin-block-start: 2rem; padding-block-start: 1.25rem;
  border-top: 1px solid var(--xett-yum);
}
.sehifeleme__link {
  min-width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center; padding-inline: 0.625rem;
  font-size: 0.875rem; color: var(--murekkeb-2);
  border: 1px solid var(--xett); border-radius: var(--radius);
  font-variant-numeric: tabular-nums;
  transition: all var(--kecid);
}
.sehifeleme__link:hover { color: var(--murekkeb); border-color: var(--murekkeb-3); }
.sehifeleme__link[aria-current="page"] {
  background: var(--vurgu); border-color: var(--vurgu); color: var(--kagiz);
}
.sehifeleme__say { margin-inline-start: auto; font-size: 0.8125rem; color: var(--murekkeb-3); }

/* ── 10. Teqlər, düymələr ─────────────────────────────────────────────── */
.teq {
  display: inline-block;
  font-size: 0.75rem; color: var(--murekkeb-2);
  background: var(--kagiz-2);
  border: 1px solid var(--xett-yum);
  padding: 0.1875rem 0.5rem; border-radius: 100px;
  transition: color var(--kecid), border-color var(--kecid);
}
.teq:hover { color: var(--vurgu); border-color: var(--vurgu); }
.duyme {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.875rem; font-weight: 500;
  padding: 0.5rem 1rem; border-radius: var(--radius);
  border: 1px solid var(--xett); color: var(--murekkeb-2);
  transition: all var(--kecid);
}
.duyme:hover { color: var(--murekkeb); border-color: var(--murekkeb-3); background: var(--kagiz-2); }

/* ── 11. Şair ─────────────────────────────────────────────────────────── */
.sair-profil {
  display: grid; gap: 1.25rem;
  padding-block: clamp(1.5rem, 1rem + 3vw, 3rem);
  border-bottom: 1px solid var(--xett-yum);
}
.sair-profil__ad {
  font-family: var(--f-seir);
  font-size: clamp(1.75rem, 1.3rem + 2.2vw, 2.75rem);
  font-weight: 600; line-height: 1.15; letter-spacing: -0.02em;
  text-wrap: balance;
}
.sair-profil__iller { font-size: 0.875rem; color: var(--murekkeb-3); font-variant-numeric: oldstyle-nums; }
.sair-profil__bio { max-width: var(--olcu-metn); color: var(--murekkeb-2); text-wrap: pretty; }
.sair-kart {
  display: flex; align-items: baseline; gap: 0.625rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--xett-yum);
}
.sair-kart__ad { font-family: var(--f-seir); font-size: 1.0625rem; font-weight: 600; }
.sair-kart__iller { font-size: 0.8125rem; color: var(--murekkeb-3); font-variant-numeric: oldstyle-nums; }
.sair-kart__say { margin-inline-start: auto; font-size: 0.8125rem; color: var(--murekkeb-3); }

/* ══════════════════════════════════════════════════════════════════════
   12. REKLAM — 4 yer
   Qaydalar:
     · yer əvvəlcədən ayrılır (min-height) → CLS ~0
     · dolmayanda tamamilə yığılır, boş çuxur qalmır
     · hər blokda görünən “Reklam” etiketi var (təsadüfi kliki azaldır)
     · şeir mətninin İÇİNDƏ və bitdiyi yerdən dərhal sonra reklam YOXDUR
   ══════════════════════════════════════════════════════════════════════ */
/*  DİQQƏT: burada `margin-inline: auto` YOXDUR.
    Grid elementinə auto kənar verilsə, brauzer `stretch`-i söndürür və
    blok məzmun eninə yığılır — lent içindəki reklam nazik dilimə dönürdü.
    Mərkəzləmə lazım olan variantlar onu özləri əlavə edir.               */
.reklam {
  width: 100%;
  text-align: center;
  container-type: inline-size;
}
.reklam__etiket {
  display: block;
  font-family: var(--f-ui);
  font-size: 0.625rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--murekkeb-3);
  margin-block-end: 0.5rem;
}
.reklam__yuva {
  display: grid; place-items: center;
  background: var(--kagiz-2);
  border: 1px solid var(--xett-yum);
  border-radius: var(--radius);
  overflow: hidden;
}
/*  Yerləşdirici yazısı yalnız yuva BOŞ olanda görünür. Real AdSense
    <ins> elementi gələndə yuva dolur, :empty pozulur və yazı yox olur.
    (Ona görə HTML-də yuvanın içində boşluq/sətir keçidi olmamalıdır.) */
.reklam__yuva:empty::after {
  content: attr(data-olcu);
  font-family: var(--f-ui);
  font-size: 0.6875rem; letter-spacing: .06em;
  color: var(--murekkeb-3);
}
/* Dolmayan blok tamamilə yığılsın (AdSense data-ad-status="unfilled" verir) */
.reklam:has(.adsbygoogle[data-ad-status="unfilled"]) { display: none; }

/* 1 — ana səhifə: qəhrəman blokdan sonra */
.reklam--ust { max-width: 45.5rem; margin: 0 auto clamp(2rem, 1rem + 4vw, 3.5rem); }
.reklam--ust .reklam__yuva { min-height: 100px; }
@media (min-width: 728px) { .reklam--ust .reklam__yuva { min-height: 90px; } }

/* 2 — ana səhifə: lentin arasında (in-feed) */
.reklam--lent { padding: 1.5rem var(--kenar-ui); border-bottom: 1px solid var(--xett-yum); }
.reklam--lent .reklam__yuva { min-height: 250px; max-width: 36rem; margin-inline: auto; width: 100%; }

/* 3 — şeir səhifəsi: mətn bitdikdən SONRA, qəsdən böyük boşluqla */
.reklam--seir {
  max-width: var(--olcu-seir);
  margin: 4rem auto 0;               /* təsadüfi klik üçün qəsdən uzaq */
  padding-inline: var(--kenar-ui);
}
.reklam--seir .reklam__yuva { min-height: 250px; }

/* 4 — masaüstü yan sütun: sticky; mobildə məzmun içinə düşür */
.reklam--yan { margin: 2.5rem auto 0; padding-inline: var(--kenar-ui); }
.reklam--yan .reklam__yuva { min-height: 250px; max-width: 20rem; margin-inline: auto; }
@media (min-width: 1080px) {
  .reklam--yan { margin-block: 0; padding-inline: 0; }
  .reklam--yan .reklam__yuva { min-height: 600px; width: 300px; max-width: none; }
}

/* ── 13. İki sütunlu masaüstü karkas (şeir + şair səhifələri) ─────────── */
.karkas {
  display: grid; gap: 0;
  padding-block-start: clamp(1.25rem, 0.75rem + 2.5vw, 2.75rem);   /* yapışqan başlıqdan sonra nəfəs */
}
@media (min-width: 1080px) {
  .karkas {
    grid-template-columns: minmax(0,1fr) 300px;
    gap: 3.5rem;
    align-items: start;
    max-width: 72rem; margin-inline: auto; padding-inline: var(--kenar-ui);
  }
  .karkas__yan { position: sticky; top: 5.5rem; }
  /* Yalnız iki sütunlu karkasın içində kənarı sıfırlayırıq — ana səhifədəki
     qəhrəman şeir blokuna toxunmuruq, yoxsa o, lentdən 32px sürüşür. */
  .karkas .seir { padding-inline: 0; }
  .karkas .reklam--seir { padding-inline: 0; }
}

/* ── 14. Mobil alt naviqasiya ─────────────────────────────────────────── */
.alt-panel {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 60;
}
@media (min-width: 600px) { .alt-panel { display: none; } }

.alt-naviq {
  display: flex;
  background: color-mix(in srgb, var(--kagiz) 92%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--xett);
  padding-bottom: env(safe-area-inset-bottom);
}
@supports not (backdrop-filter: blur(1px)) { .alt-naviq { background: var(--kagiz); } }
.alt-naviq__link {
  flex: 1;
  display: grid; place-items: center; gap: 0.125rem;
  padding: 0.5rem 0.25rem;
  font-size: 0.625rem; color: var(--murekkeb-3);
  transition: color var(--kecid);
}
.alt-naviq__link svg { width: 1.25rem; height: 1.25rem; stroke-width: 1.6; }
.alt-naviq__link[aria-current="page"] { color: var(--vurgu); }
@media (min-width: 600px) { .alt-naviq { display: none; } }
/* Panel env(safe-area-inset-bottom) qədər böyüyür — gövdənin altdan
   boşluğu da onunla birlikdə böyüməlidir, yoxsa altlıq linkləri
   panelin altında gizlənir. */
@media (max-width: 599px) {
  /* alt naviqasiya (60px) + anchor reklam (60px) + təhlükəsiz sahə */
  body { padding-bottom: calc(7.5rem + env(safe-area-inset-bottom)); }
  body.reklamsiz { padding-bottom: calc(3.75rem + env(safe-area-inset-bottom)); }
}

/* ── Axtarış — həmişə göz önündə, mobildə də ─────────────────────────── */
.axtaris { position: relative; display: flex; }
.axtaris__input {
  width: 100%; height: 2.75rem;
  padding: 0 2.75rem 0 2.625rem;
  border: 1px solid var(--xett); border-radius: 100px;
  background: var(--kagiz-2); color: var(--murekkeb);
  font-family: var(--f-ui);
  /* 16px-dən kiçik olsa iOS Safari fokusda səhifəni zoom edir */
  font-size: 1rem;
  transition: border-color var(--kecid), background var(--kecid);
}
.axtaris__input::placeholder { color: var(--murekkeb-3); }
/*  type="search" brauzerin öz «×» düyməsini gətirir — bizimki ilə
    yan-yana iki təmizləmə düyməsi görünürdü. */
.axtaris__input::-webkit-search-cancel-button,
.axtaris__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.axtaris__input:focus {
  outline: none; border-color: var(--vurgu);
  background: var(--kagiz);
}
.axtaris__ikon {
  position: absolute; inset-inline-start: 0.875rem; top: 50%;
  transform: translateY(-50%);
  width: 1.0625rem; height: 1.0625rem; color: var(--murekkeb-3);
  pointer-events: none;
}
.axtaris__temizle {
  position: absolute; inset-inline-end: 0.5rem; top: 50%;
  transform: translateY(-50%);
  width: 1.875rem; height: 1.875rem; display: grid; place-items: center;
  border-radius: 50%; color: var(--murekkeb-3);
}
.axtaris__temizle:hover { color: var(--murekkeb); background: var(--xett-yum); }

/* Axtarış nəticələri */
.netice__basliq { font-size: 0.875rem; color: var(--murekkeb-2); margin-block-end: 1rem; }
/*  Uyğunluğun tapıldığı misra — nəticənin altında, şeir şrifti ilə */
.netice__misra {
  flex: 1 1 100%; min-width: 0; max-width: 100%;
  font-family: var(--f-seir);
  font-size: 0.9375rem; color: var(--murekkeb-2);
  margin-block-start: 0.125rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.netice__vurgu { background: var(--vurgu); color: var(--kagiz); border-radius: 2px; padding: 0 0.125rem; }

/* ── Şair başlığı ─────────────────────────────────────────────────────── */
.sair-bash {
  display: grid; gap: 1.25rem;
  grid-template-columns: auto 1fr;
  align-items: start;
  padding-block: clamp(1.25rem, 0.75rem + 2.5vw, 2.5rem);
}
.sair-bash__sekil, .sair-bash__monoqram {
  width: clamp(4.5rem, 3rem + 7vw, 7.5rem);
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  object-fit: cover;
  background: var(--kagiz-2);
  border: 1px solid var(--xett-yum);
}
/*  Şəkil yoxdursa baş hərflərdən monoqram — uydurma portret qoymuruq */
.sair-bash__monoqram {
  display: grid; place-items: center;
  font-family: var(--f-seir);
  font-size: clamp(1.5rem, 1rem + 2.5vw, 2.5rem);
  font-weight: 600; color: var(--murekkeb-3);
}
.sair-bash__ad {
  font-family: var(--f-seir);
  font-size: clamp(1.5rem, 1.15rem + 1.9vw, 2.375rem);
  font-weight: 600; line-height: 1.15; letter-spacing: -0.02em;
  text-wrap: balance;
}
.sair-bash__setirler { display: grid; gap: 0.25rem; margin-block-start: 0.625rem; }
.sair-bash__setir {
  display: flex; gap: 0.5rem; flex-wrap: wrap;
  font-size: 0.875rem; color: var(--murekkeb-2);
}
.sair-bash__etiket { color: var(--murekkeb-3); min-width: 6.5rem; }
.sair-bash__bio {
  grid-column: 1 / -1;
  max-width: var(--olcu-metn); color: var(--murekkeb-2);
  text-wrap: pretty;
}
@media (min-width: 720px) {
  .sair-bash__bio { grid-column: 2; }
}

/* ── Mobil anchor reklam — sabit alt banner ───────────────────────────
   Alt naviqasiyanın ÜSTÜNDƏ dayanır. Mobildə ən yüksək görünürlüyə
   malik yuvadır və şeir mətninə toxunmur.                           */
/*  Anchor reklam və alt naviqasiya TƏK sabit paneldədir (.alt-panel).
    Ayrı-ayrı sabitlənsəydilər, aralarındakı məsafəni piksellə təxmin
    etmək lazım gələrdi və naviqasiyanın hündürlüyü dəyişəndə boşluq
    açılırdı (ölçmədə 5px boşluq görünürdü). */
.reklam--anchor {
  position: relative;
  background: var(--kagiz);
  border-top: 1px solid var(--xett);
  padding: 0.25rem 2rem 0.25rem 0.5rem;
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.5rem;
}
.reklam--anchor .reklam__etiket {
  margin: 0; writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 0.5rem; letter-spacing: 0.1em;
}
.reklam--anchor .reklam__yuva {
  min-height: 50px; border: 0; background: var(--kagiz-2);
  border-radius: 2px;
}
.reklam__bagla {
  position: absolute; inset-inline-end: 0.125rem; top: 50%;
  transform: translateY(-50%);
  width: 1.75rem; height: 1.75rem; display: grid; place-items: center;
  color: var(--murekkeb-3); border-radius: 50%;
}
.reklam__bagla:hover { color: var(--murekkeb); background: var(--xett-yum); }
.reklam--anchor[hidden] { display: none; }
@media (min-width: 600px) { .reklam--anchor { display: none; } }

/* ── 15. Altlıq ───────────────────────────────────────────────────────── */
.altliq {
  border-top: 1px solid var(--xett-yum);
  margin-block-start: clamp(3rem, 2rem + 4vw, 5rem);
  padding-block: 2.5rem;
  font-size: 0.8125rem; color: var(--murekkeb-3);
}
.altliq__ic { display: grid; gap: 1.5rem; }
.altliq__logo { font-family: var(--f-seir); font-size: 1.0625rem; font-weight: 600; color: var(--murekkeb-2); }
.altliq a:hover { color: var(--vurgu); }
.altliq__sira { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
@media (min-width: 600px) {
  .altliq__ic { grid-template-columns: 1fr auto; align-items: center; }
}

/* ── Sayt haqqında bölməsi ────────────────────────────────────────────── */
.melumat { display: grid; gap: 1.75rem; max-width: var(--olcu-metn); }
.melumat h3 {
  font-family: var(--f-ui);
  font-size: 0.9375rem; font-weight: 600;
  margin-block-end: 0.375rem;
}
.melumat p { color: var(--murekkeb-2); font-size: 0.9375rem; text-wrap: pretty; }
.melumat a { color: var(--vurgu); border-bottom: 1px solid currentColor; }

/* ── 16. Köməkçi ──────────────────────────────────────────────────────── */
.gizli {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.atla {
  position: absolute; inset-inline-start: 0; top: 0; z-index: 100;
  background: var(--kagiz); color: var(--murekkeb);
  padding: 0.625rem 1rem; border: 1px solid var(--xett);
  transform: translateY(-120%);
}
.atla:focus { transform: none; }

/* ══════════════════════════════════════════════════════════════════════
   17. Oxunma · bəyənmə · şərhlər
   ══════════════════════════════════════════════════════════════════════ */
.olcu {
  display: inline-flex; align-items: center; gap: 0.3125rem;
  font-variant-numeric: tabular-nums;
}
.olcu svg { width: 0.9375rem; height: 0.9375rem; stroke-width: 1.7; opacity: .8; }

/* ── Bəyənmə zolağı ───────────────────────────────────────────────────── */
.rey {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin-block-start: 2rem; padding-block-start: 1.5rem;
  border-top: 1px solid var(--xett-yum);
}
.rey__duyme {
  display: inline-flex; align-items: center; gap: 0.4375rem;
  min-height: 2.5rem; padding: 0.4375rem 0.875rem;
  border: 1px solid var(--xett); border-radius: 100px;
  font-size: 0.875rem; color: var(--murekkeb-2);
  font-variant-numeric: tabular-nums;
  transition: all var(--kecid);
}
.rey__duyme svg { width: 1.0625rem; height: 1.0625rem; stroke-width: 1.7; }
.rey__duyme:hover { color: var(--murekkeb); border-color: var(--murekkeb-3); background: var(--kagiz-2); }
.rey__duyme.is-aktiv {
  color: var(--vurgu); border-color: var(--vurgu);
  background: color-mix(in srgb, var(--vurgu) 10%, transparent);
}
.rey__duyme--sade { margin-inline-start: auto; }

/* ── Şərhlər ──────────────────────────────────────────────────────────── */
.serhler { display: grid; gap: 1.25rem; margin-block-end: 2.5rem; }
.serhler__bosh { color: var(--murekkeb-3); font-size: 0.9375rem; margin-block-end: 2rem; }
.serh { padding-block-end: 1.25rem; border-bottom: 1px solid var(--xett-yum); }
.serh:last-child { border-bottom: 0; padding-block-end: 0; }
.serh__bash { display: flex; align-items: center; gap: 0.625rem; margin-block-end: 0.5rem; }
.serh__avatar {
  display: grid; place-items: center;
  width: 1.875rem; height: 1.875rem; border-radius: 50%;
  background: var(--kagiz-2); border: 1px solid var(--xett-yum);
  font-family: var(--f-seir); font-size: 0.875rem; font-weight: 600;
  color: var(--murekkeb-2); flex: none;
}
.serh__ad { font-size: 0.9375rem; font-weight: 500; }
.serh__tarix { margin-inline-start: auto; font-size: 0.75rem; color: var(--murekkeb-3); }
.serh__metn {
  color: var(--murekkeb-2); font-size: 0.9375rem; line-height: 1.7;
  white-space: pre-line; text-wrap: pretty;
}

/* ── Forma ────────────────────────────────────────────────────────────── */
.forma {
  background: var(--kagiz-2);
  border: 1px solid var(--xett-yum); border-radius: var(--radius);
  padding: clamp(1rem, 0.75rem + 1.5vw, 1.75rem);
  display: grid; gap: 1rem;
}
.forma__bashliq { font-size: 1rem; font-weight: 600; }
.forma__sira { display: grid; gap: 1rem; }
@media (min-width: 560px) { .forma__sira { grid-template-columns: 1fr 1fr; } }
.forma__sahe { display: grid; gap: 0.375rem; }
.forma__etiket { font-size: 0.8125rem; font-weight: 500; color: var(--murekkeb-2); }
.forma__etiket b { color: var(--vurgu); font-weight: 600; }
.forma__input {
  width: 100%; min-height: 2.75rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--xett); border-radius: var(--radius);
  background: var(--kagiz); color: var(--murekkeb);
  font-family: var(--f-ui);
  font-size: 1rem;                 /* 16px — iOS fokusda zoom etməsin */
  transition: border-color var(--kecid);
}
.forma__input:focus { outline: none; border-color: var(--vurgu); }
.forma__input--xeta { border-color: #B3261E; }
:root[data-rejim="tund"] .forma__input--xeta { border-color: #F2B8B5; }
.forma__saha { min-height: 7rem; resize: vertical; line-height: 1.6; }
.forma__kicik { font-size: 0.75rem; color: var(--murekkeb-3); }
.forma__alt { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.duyme--esas {
  background: var(--vurgu); border-color: var(--vurgu); color: var(--kagiz);
  font-weight: 500; min-height: 2.75rem; padding-inline: 1.5rem;
}
.duyme--esas:hover { background: var(--vurgu-2); border-color: var(--vurgu-2); color: var(--kagiz); }

/* Honeypot — insan görmür, ekran oxuyucusundan da gizlidir */
.tələ { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Bildiriş ─────────────────────────────────────────────────────────── */
.bildiris {
  padding: 0.75rem 1rem; border-radius: var(--radius);
  font-size: 0.875rem; margin-block-end: 1.25rem;
  border: 1px solid var(--xett);
}
.bildiris--ugur { background: color-mix(in srgb, var(--vurgu) 12%, var(--kagiz)); border-color: var(--vurgu); }
.bildiris--xeta { background: color-mix(in srgb, #B3261E 10%, var(--kagiz)); border-color: #B3261E; }

/* ══ OXU AXINI ═══════════════════════════════════════════════════════
   Qısa formalar (bayatı, rübai, dördlük) janr səhifəsində siyahı kimi
   yox, ardıcıl OXUNUR. Hər şeirin öz `.seir` qabı var ki, şrift ölçüsü
   hərəsinə ayrıca uyğunlaşsın.                                        */
.axin__seir {
  max-width: var(--olcu-seir);
  margin-inline: auto;
  padding-block: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
  border-block-end: 1px solid var(--xett-yum);
}
.axin__seir:last-of-type { border-block-end: 0; }

.axin__alt {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin-block-start: 1.5rem;
  padding-inline: var(--kenar);
}

.axin__kecid {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .4375rem .6875rem; border-radius: 999px;
  font-family: var(--f-ui); font-size: .8125rem; line-height: 1;
  color: var(--murekkeb-3); text-decoration: none;
  border: 1px solid var(--xett-yum); background: transparent;
  transition: color .15s, border-color .15s;
}
.axin__kecid:hover { color: var(--murekkeb); border-color: var(--xett); }
.axin__kecid svg { width: 1rem; height: 1rem; }

/* Axındakı rəy düymələri şeirin özündən kiçik görünsün.
   .rey-in üst xətti və boşluğu burada ləğv olunur: axında o, flex elementi
   olduğu üçün xətt yalnız düymələrin eni qədər uzanır və qırıq görünür —
   ayırıcı onsuz da .axin__seir-in alt xəttidir. */
.rey--axin {
  gap: .375rem;
  margin-block-start: 0;
  padding-block-start: 0;
  border-top: 0;
}
.rey--axin .rey__duyme { padding: .4375rem .6875rem; font-size: .8125rem; }
.rey--axin .rey__duyme svg { width: 1rem; height: 1rem; }