/* ============================================================================
   BÖLMƏLƏR — ROOKSOFT şirkət saytı. Hamısı ağ şüşə lövhələr üzərində
   qurulub, arxada sakit pastel fon dayanır. Bünövrə site.css-dədir.
   ========================================================================== */

/* ================================================================= ŞİRKƏT
   Saytın birinci məzmun bölməsi: biz kimik, nə vaxtdan bu işdəyik, necə
   təhvil veririk. Məhsul adları burada qəsdən yoxdur — onlar aşağıda öz
   bölməsindədir. */
.about { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 1px; overflow: hidden; }
@media (max-width: 920px) { .about { grid-template-columns: 1fr; } }
.about__main { padding: clamp(26px, 3.4vw, 46px); display: grid; gap: 18px; align-content: start; }
.about__main p { color: var(--tx-2); font-size: clamp(.98rem, 1.1vw, 1.08rem); }
.about__main strong { color: var(--tx); font-weight: 600; }
.about__side {
  padding: clamp(26px, 3.4vw, 40px);
  border-inline-start: 1px solid var(--line);
  background: linear-gradient(180deg, var(--acc-soft), rgba(255, 255, 255, .35));
  display: grid; gap: 16px; align-content: start;
}
@media (max-width: 920px) { .about__side { border-inline-start: 0; border-top: 1px solid var(--line); } }
.about__side h4 {
  font-family: var(--f-mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--tx-3);
}
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.ticks li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; font-size: .92rem; color: var(--tx-2); line-height: 1.5; }
.ticks svg { width: 20px; height: 20px; color: var(--acc-2); margin-top: 2px; }

/* Rəqəmlər sətiri */
.nums { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 18px; overflow: hidden; }
.nums > div { padding: 20px 22px; border-inline-end: 1px solid var(--line); }
.nums > div:last-child { border-inline-end: 0; }
.nums b {
  display: block; font-family: var(--f-disp); font-weight: 600;
  font-size: clamp(1.5rem, 2.6vw, 2.3rem); letter-spacing: -.045em; line-height: 1;
  color: var(--acc-2); margin-bottom: 7px;
}
.nums span { font-size: .84rem; color: var(--tx-3); }
@media (max-width: 760px) {
  .nums { grid-template-columns: repeat(2, 1fr); }
  .nums > div:nth-child(2) { border-inline-end: 0; }
  .nums > div:nth-child(3), .nums > div:nth-child(4) { border-top: 1px solid var(--line); }
}

/* ============================================================== XİDMƏTLƏR */
.svc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 980px) { .svc { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .svc { grid-template-columns: 1fr; } }
.card {
  padding: 26px 24px 28px; display: grid; gap: 12px; align-content: start;
  transition: transform var(--fast), border-color var(--fast), background var(--fast);
}
.card:hover { transform: translateY(-4px); border-color: var(--acc); background: var(--glass-2); }
.card__ico {
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 12px; border: 1px solid var(--acc-line);
  background: var(--acc-soft); color: var(--acc-2); margin-bottom: 4px;
}
.card__ico svg { width: 20px; height: 20px; }
.card p { font-size: .91rem; color: var(--tx-2); line-height: 1.6; }

/* ================================================================== PROSES
   Dörd addım — şirkətin iş üsulu: kəşf, dizayn, qurma, təhvil və dəstək. */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 980px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step { padding: 24px 22px 26px; display: grid; gap: 10px; align-content: start; position: relative; }
.step__n {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: 6px;
  border: 1px solid var(--acc-line); background: var(--acc-soft);
  font-family: var(--f-mono); font-size: .76rem; color: var(--acc-2);
}
.step p { font-size: .89rem; color: var(--tx-2); line-height: 1.6; }
.step__t {
  margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line);
  font-family: var(--f-mono); font-size: .66rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tx-3);
}

/* ================================================================ MƏHSULLAR
   Üç sistem: BEAVER 3D, EliaCRM, LarkHR. İkisi istismarda, LarkHR isə
   hazırlanır — ona görə onun kartı sakitləşdirilib və «tezliklə» nişanı
   şaftalı rəngdədir (brendin rəngi, UI vurğusu deyil). */
.prods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
@media (max-width: 1000px) { .prods { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .prods { grid-template-columns: 1fr; } }
.prod {
  padding: 28px 26px 30px; display: grid; gap: 14px; align-content: start;
  transition: transform var(--fast), border-color var(--fast), background var(--fast);
}
.prod:hover { transform: translateY(-4px); border-color: var(--acc); background: var(--glass-2); }
.prod__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.prod__name { font-family: var(--f-disp); font-size: 1.32rem; font-weight: 600; letter-spacing: -.035em; }
.prod__role {
  font-family: var(--f-mono); font-size: .64rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--acc-2);
}
.prod p { font-size: .91rem; color: var(--tx-2); line-height: 1.6; }
.prod__st {
  font-family: var(--f-mono); font-size: .6rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px; white-space: nowrap;
  border: 1px solid currentColor;
}
.prod__st--live { color: var(--st-free); background: rgba(46, 158, 121, .10); }
.prod__st--soon { color: var(--brand-text); background: var(--brand-soft); }

/* «Nə var içində» — hər məhsul üçün üç qısa sətir. Nümunələr qəsdən azdır:
   bu sayt şirkət haqqındadır, məhsulun kataloqu deyil. */
.prod__in { list-style: none; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--line); display: grid; gap: 9px; }
.prod__in li {
  display: grid; grid-template-columns: 14px 1fr; gap: 10px; align-items: start;
  font-size: .86rem; color: var(--tx-2); line-height: 1.5;
}
.prod__in li::before {
  content: ""; width: 6px; height: 6px; margin-block-start: 7px; margin-inline-start: 4px; border-radius: 50%;
  background: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft);
}
.prod--soon .prod__in li::before { background: var(--brand-deep); box-shadow: 0 0 0 3px var(--brand-soft); }
.prod--soon .prod__role { color: var(--brand-text); }
.prod--soon:hover { border-color: var(--brand); }
.prod__soon {
  margin-top: 2px; padding: 11px 14px; border-radius: var(--r-sm);
  border: 1px dashed var(--brand-line); background: var(--brand-soft);
  font-size: .84rem; color: var(--tx-2); line-height: 1.5;
}

/* Məhsulun öz saytına keçid — kartın sonundaki sətir. Oxunu və onun RTL
   davranışını `.lnk`-dən alır (`site.css` → düymələr), burada yalnız
   sətrin çərçivəsi və ünvanın yazısı var.

   Ünvan sətrin digər kənarına dayanır: fel və ox soldan oxunur, ünvan isə
   monospace ilə sağda — ziyarətçi hara getdiyini klikdən əvvəl görür.
   Ünvanın mətni `site.js`-də `config.js`-dəki URL-dən qurulur.

   Dar kartda (iki sütunlu düzülüşün ən sıx yeri) ünvan öz sətrinə keçir və
   orada kənara dayanır. Fel ilə ox ayrılmır: fel qırılmır, ox isə sıxılmır
   — belə olanda sətir qırılsa da ox felin yanında qalır. Ünvan ən son
   çarə kimi üç nöqtə ilə kəsilir. */
.prod__link {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  margin-top: 2px; padding: 11px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--acc-line); background: var(--acc-soft);
  font-size: .88rem;
  transition: border-color var(--fast), background var(--fast);
}
.prod__link:hover { border-color: var(--acc); background: var(--glass-2); }
.prod__go { white-space: nowrap; }
.prod__link svg { flex: 0 0 auto; }
.prod__host {
  margin-inline-start: auto; min-width: 0;
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: .02em;
  color: var(--tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ======================================================= MƏHSUL ANİMASİYALARI
   Hər məhsul kartında bir xırda səhnə var və o, məhz həmin məhsulun işini
   göstərir:

     BEAVER 3D  qüllə izometrik şəkildə mərtəbə-mərtəbə yığılır, sonra bir
                mənzil seçilir və yanında plan + qiymət lövhəsi açılır
     EliaCRM    mərkəzdə müştəri; ondan üç təmas nöqtəsinə xətt çəkilir,
                hamısı yığılandan sonra sövdələşmənin təsdiqi çıxır
     LarkHR     namizəd sağdan sürüşüb boş ştata oturur, kəsik çərçivə
                bərkiyir, təsdiq çıxır, ştat zolağı dolur

   Hamısı inline SVG + CSS-dir: nə kitabxana, nə JS, nə şəkil sorğusu.
   Animasiya kart ekrana GİRƏNDƏ başlayır — açılış animasiyasının `.is-in`
   sinfinə bağlanıb, yəni görünməyən kartlar boş yerə kadr yandırmır.

   NİYƏ HƏR ADDIMIN ÖZ KEYFRAME-İ VAR: səhnələr «yığılan»dır — birinci
   mərtəbə ikinci qalxanda da yerində qalmalı, üç təmas nöqtəsi isə sonda
   bir yerdə görünməlidir. Tək keyframe + `animation-delay` bunu vermir:
   gecikmə sönməni də sürüşdürür, sonuncu element növbəti dövrə keçir.
   Ona görə hamısı eyni 86–94% aralığında birlikdə sönür, yalnız açılma
   vaxtları fərqlidir. Dövr müddətləri azca fərqlidir (6.4 / 6.8 / 7.2 s)
   ki, üç kart eyni anda döyünməsin. */
.prod__anim {
  height: 82px; overflow: hidden;
  border-radius: var(--r-sm); border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, .62), var(--acc-soft));
}
.prod--soon .prod__anim { background: linear-gradient(180deg, rgba(255, 255, 255, .62), var(--brand-soft)); }
.pa { width: 100%; height: 100%; display: block; }
/* SVG-də transform öz çərçivəsindən getsin: olmasa miqyas və sürüşmə bütün
   kətanın başlanğıcına görə hesablanır və element ekrandan çıxır. */
.pa [class^="pa-"], .pa [class*=" pa-"] { transform-box: fill-box; transform-origin: center; }

/* ---- ortaq hissələr ---- */
.pa-sheet   { fill: rgba(255, 255, 255, .94); stroke: var(--line-2); stroke-width: 1; }
.pa-l       { fill: var(--tx-3); opacity: .5; }
.pa-l--thin { opacity: .3; }
.pa-chip    { fill: var(--acc); opacity: .9; }
.pa-badge   { opacity: 0; }
.pa-badge circle { fill: var(--st-free); }
.pa-badge path   { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---- BEAVER 3D: izometrik qüllə ---- */
.pa-slab  { opacity: 0; }
.pa-top   { fill: var(--acc); fill-opacity: .34; stroke: var(--acc-2); stroke-width: 1; stroke-opacity: .5; }
.pa-side  { fill: var(--acc-2); fill-opacity: .3; }
.pa-sel   { fill: var(--acc-2); stroke: #fff; stroke-width: 1.2; opacity: 0; }
.pa-link  { fill: none; stroke: var(--acc-3); stroke-width: 1.1; stroke-dasharray: 3 3; opacity: 0; }
.pa-panel { opacity: 0; }

/* ---- EliaCRM: müştəri və təmas nöqtələri ---- */
.pa-ring   { fill: rgba(255, 255, 255, .7); stroke: var(--acc-2); stroke-width: 1.4; stroke-opacity: .65; }
.pa-person { fill: var(--acc-2); opacity: .7; }
.pa-touch  { opacity: 0; }
.pa-wire   { fill: none; stroke: var(--acc-3); stroke-width: 1.3; stroke-opacity: .75; }
.pa-node   { fill: var(--acc); }

/* ---- LarkHR: ştat dolur ---- */
.pa-team    { fill: var(--brand-deep); opacity: .5; }
.pa-slot    { fill: none; stroke: var(--brand-deep); stroke-width: 1.2; stroke-dasharray: 4 4; opacity: .7; }
.pa-slot-on { fill: var(--brand-soft); stroke: var(--brand-deep); stroke-width: 1.4; opacity: 0; }
.pa-hire    { fill: var(--brand-deep); opacity: 0; }
.pa-track   { fill: var(--brand-deep); opacity: .18; }
/* Zolağın soldan dolması üçün transform-origin yuxarıdaki ümumi qaydadan
   (center) güclü olmalıdır — ona görə seçici iki sinifdən ibarətdir. */
.pa .pa-fill { fill: var(--brand-deep); opacity: .75; transform-origin: left center; transform: scaleX(.72); }

/* ---- hərəkət: yalnız kart ekrana girəndən sonra ---- */
.prod.is-in .pa-slab--1 { animation: pa-rise1 6.4s var(--ease) infinite; }
.prod.is-in .pa-slab--2 { animation: pa-rise2 6.4s var(--ease) infinite; }
.prod.is-in .pa-slab--3 { animation: pa-rise3 6.4s var(--ease) infinite; }
.prod.is-in .pa-slab--4 { animation: pa-rise4 6.4s var(--ease) infinite; }
.prod.is-in .pa-sel     { animation: pa-pop   6.4s var(--ease) infinite; }
.prod.is-in .pa-link    { animation: pa-fade  6.4s var(--ease) infinite; }
.prod.is-in .pa-panel   { animation: pa-sheet-in 6.4s var(--ease) infinite; }

.prod.is-in .pa-touch--1 { animation: pa-step1 6.8s var(--ease) infinite; }
.prod.is-in .pa-touch--2 { animation: pa-step2 6.8s var(--ease) infinite; }
.prod.is-in .pa-touch--3 { animation: pa-step3 6.8s var(--ease) infinite; }
.prod.is-in .pa-badge--crm { animation: pa-pop 6.8s var(--ease) infinite; }

.prod--soon.is-in .pa-hire    { animation: pa-slide 7.2s var(--ease) infinite; }
.prod--soon.is-in .pa-slot-on { animation: pa-on    7.2s var(--ease) infinite; }
.prod--soon.is-in .pa-badge--hr { animation: pa-pop 7.2s var(--ease) infinite; }
.prod--soon.is-in .pa-fill    { animation: pa-bar   7.2s var(--ease) infinite; }

/* Mərtəbələr: hər biri öz vaxtında qalxır, hamısı birlikdə sönür. */
@keyframes pa-rise1 {
  0%, 1%    { opacity: 0; transform: translateY(10px); }
  11%, 86%  { opacity: 1; transform: translateY(0); }
  94%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes pa-rise2 {
  0%, 7%    { opacity: 0; transform: translateY(10px); }
  17%, 86%  { opacity: 1; transform: translateY(0); }
  94%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes pa-rise3 {
  0%, 13%   { opacity: 0; transform: translateY(10px); }
  23%, 86%  { opacity: 1; transform: translateY(0); }
  94%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes pa-rise4 {
  0%, 19%   { opacity: 0; transform: translateY(10px); }
  29%, 86%  { opacity: 1; transform: translateY(0); }
  94%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes pa-pop {
  0%, 38%   { opacity: 0; transform: scale(.5); }
  46%, 86%  { opacity: 1; transform: scale(1); }
  94%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes pa-fade {
  0%, 46%   { opacity: 0; }
  55%, 86%  { opacity: .85; }
  94%, 100% { opacity: 0; }
}
@keyframes pa-sheet-in {
  0%, 50%   { opacity: 0; transform: translateY(5px); }
  60%, 86%  { opacity: 1; transform: translateY(0); }
  94%, 100% { opacity: 0; transform: translateY(0); }
}

/* Təmas nöqtələri: biri-birinin ardınca gəlir, sonda üçü də yerindədir. */
@keyframes pa-step1 {
  0%, 4%    { opacity: 0; transform: translateX(-7px); }
  14%, 86%  { opacity: 1; transform: translateX(0); }
  94%, 100% { opacity: 0; transform: translateX(0); }
}
@keyframes pa-step2 {
  0%, 16%   { opacity: 0; transform: translateX(-7px); }
  26%, 86%  { opacity: 1; transform: translateX(0); }
  94%, 100% { opacity: 0; transform: translateX(0); }
}
@keyframes pa-step3 {
  0%, 28%   { opacity: 0; transform: translateX(-7px); }
  38%, 86%  { opacity: 1; transform: translateX(0); }
  94%, 100% { opacity: 0; transform: translateX(0); }
}

/* Namizəd sağdan sürüşür, ştat zolağı dolur. */
@keyframes pa-slide {
  0%, 14%   { opacity: 0; transform: translateX(24px); }
  30%, 86%  { opacity: .85; transform: translateX(0); }
  94%, 100% { opacity: 0; transform: translateX(0); }
}
@keyframes pa-on {
  0%, 26%   { opacity: 0; }
  36%, 86%  { opacity: 1; }
  94%, 100% { opacity: 0; }
}
@keyframes pa-bar {
  0%, 34%   { transform: scaleX(.72); }
  48%, 86%  { transform: scaleX(1); }
  94%, 100% { transform: scaleX(.72); }
}

/* Hərəkət azaldılıbsa səhnələr DAYANIR, amma boş qalmır: hər biri öz son
   kadrında donur — qüllə yığılmış və mənzil seçilmiş, müştərinin üç təması
   da yerində, ştat dolmuş halda. */
@media (prefers-reduced-motion: reduce) {
  .prod.is-in [class*="pa-"] { animation: none !important; }
  .pa-slab, .pa-sel, .pa-panel, .pa-touch, .pa-badge, .pa-slot-on { opacity: 1; transform: none; }
  .pa-link { opacity: .85; }
  .pa-hire { opacity: .85; transform: none; }
  .pa .pa-fill { transform: scaleX(1); }
}

/* =================================================================== QİYMƏT */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
@media (max-width: 980px) { .plans { grid-template-columns: 1fr; } }
.plan { position: relative; padding: 28px 26px 30px; display: grid; gap: 15px; align-content: start;
        transition: transform var(--fast), border-color var(--fast); }
.plan:hover { transform: translateY(-4px); }
.plan--best { border-color: var(--acc); background: linear-gradient(180deg, var(--acc-soft), var(--glass-2)); }
.plan__best {
  position: absolute; inset-block-start: -11px; inset-inline-start: 26px; padding: 4px 12px; border-radius: 999px;
  background: var(--acc); color: var(--acc-ink);
  font-family: var(--f-mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
}
.plan__name { font-family: var(--f-disp); font-size: 1.45rem; font-weight: 600; letter-spacing: -.04em; }
.plan__price {
  font-family: var(--f-mono); font-size: .82rem; letter-spacing: .08em; color: var(--acc-2);
  padding-bottom: 15px; border-bottom: 1px solid var(--line);
}
.plan__note { font-size: .89rem; color: var(--tx-2); }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.plan li { display: grid; grid-template-columns: 17px 1fr; gap: 11px; font-size: .89rem; color: var(--tx-2); line-height: 1.5; }
.plan li svg { width: 17px; height: 17px; color: var(--acc-2); margin-top: 2px; }
.plan li small {
  font-family: var(--f-mono); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--brand-text); border: 1px solid var(--brand-line); border-radius: 999px;
  padding: 1px 7px; margin-inline-start: 6px; white-space: nowrap;
}
.plan .btn { margin-top: 6px; justify-content: center; }

/* ==================================================================== ƏLAQƏ */
.cta { overflow: hidden; }
.cta__in {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(290px, .85fr);
  gap: clamp(24px, 3.4vw, 50px); align-items: start; padding: clamp(28px, 4vw, 56px);
}
@media (max-width: 920px) { .cta__in { grid-template-columns: 1fr; } }
.cta__txt { display: grid; gap: 18px; justify-items: start; align-content: start; }
.contacts { display: grid; gap: 10px; }
.crow {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px;
  padding: 15px 17px; border-radius: var(--r); border: 1px solid var(--line);
  background: rgba(255, 255, 255, .72);
  transition: border-color var(--fast);
}
.crow:hover { border-color: var(--acc); }
.crow small { display: block; font-family: var(--f-mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tx-3); margin-bottom: 3px; }
.crow b { font-size: .96rem; font-weight: 600; word-break: break-word; }
/* Nömrənin yanındaki kanal nişanları: WhatsApp həm keçid, həm etiketdir. */
.crow__ch { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.crow__ch a, .crow__ch span {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-2);
  font-family: var(--f-mono); font-size: .58rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tx-3);
  transition: color var(--fast), border-color var(--fast), background var(--fast);
}
.crow__ch a:hover { color: var(--st-free); border-color: var(--st-free); background: rgba(46, 158, 121, .08); }
.copy {
  border: 1px solid var(--line-2); border-radius: 999px; background: transparent; cursor: pointer;
  padding: 7px 13px; font-family: var(--f-mono); font-size: .62rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tx-2);
  transition: color var(--fast), border-color var(--fast);
}
.copy:hover { color: var(--acc-2); border-color: var(--acc); }
.copy.is-done { color: var(--st-free); border-color: var(--st-free); }

/* İş saatları — əlaqə kartının altında ayrıca lövhə. Bazar günü qəsdən
   saat deyil, bir sətir zarafatdır. */
.hours {
  margin-top: 4px; padding: 17px 19px; border-radius: var(--r);
  border: 1px solid var(--line); background: linear-gradient(180deg, var(--mist), rgba(255, 255, 255, .6));
  display: grid; gap: 11px;
}
.hours h4 {
  font-family: var(--f-mono); font-size: .6rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--tx-3);
}
.hours dl { margin: 0; display: grid; gap: 9px; }
.hours div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.hours dt { font-size: .88rem; color: var(--tx-2); }
.hours dd { margin: 0; font-family: var(--f-mono); font-size: .8rem; font-weight: 500; color: var(--tx); white-space: nowrap; }
.hours div.hours--off { align-items: start; }
.hours div.hours--off dt { color: var(--tx-3); }
.hours div.hours--off dd { font-family: var(--f-body); font-size: .84rem; font-weight: 500; color: var(--brand-text); white-space: normal; text-align: end; }
.hours__note { font-size: .82rem; color: var(--tx-3); line-height: 1.5; }

/* =================================================================== ALTLIQ */
.foot { position: relative; z-index: 1; border-top: 1px solid var(--line); background: rgba(255, 255, 255, .62);
        -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); padding-block: 46px 30px; }
.foot__in { display: grid; gap: 28px; grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(0, .7fr)); }
@media (max-width: 820px) { .foot__in { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot__in { grid-template-columns: 1fr; } }
.foot h4 { font-family: var(--f-mono); font-size: .64rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--tx-3); margin-bottom: 15px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot a { font-size: .9rem; color: var(--tx-2); transition: color var(--fast); }
.foot a:hover { color: var(--acc-2); }
.foot li span { font-size: .9rem; color: var(--tx-3); }
/* İş saatları altlıqda alt-alta durur — bir sətirdə nöqtə ilə yazılanda
   dar sütunda yöndəmsiz qırılırdı. */
.foot__hours { display: grid; gap: 3px; }
/* Altlıqda brend bir az böyükdür — səhifənin imzasıdır. */
.foot .brand { font-size: 1.3rem; }
.foot .brand__tile { width: 40px; height: 40px; border-radius: 11px; }
.foot .brand__mark { width: 25px; height: 30px; }
.foot__note { font-size: .88rem; color: var(--tx-3); max-width: 46ch; margin-top: 14px; }
.foot__bar {
  display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center;
  margin-top: 38px; padding-top: 20px; border-top: 1px solid var(--line);
  font-family: var(--f-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3);
}

/* Altlıqdaki məhsul adları. Əvvəl bircə sətir yazı idi, indi ünvanı olan
   ad keçiddir — ona görə ayırıcı «·» mətnin içindən çıxarılıb pseudo-
   elementə verilib: adların sayı və keçid olub-olmaması dəyişsə də ayırıcı
   yerində qalır. Ölçü bardan miras qalır (`.foot a` öz ölçüsünü verməsin). */
.foot__prods { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 9px; }
.foot__prods a, .foot__prods span { font-size: inherit; color: inherit; }
.foot__prods a:hover { color: var(--acc-2); }
.foot__prods > * + *::before {
  content: "·"; margin-inline-end: 9px; color: var(--tx-3);
  pointer-events: none;                  /* ayırıcı keçidin içindədir — klik tutmasın */
}

/* ==================================================================== MODAL */
.modal {
  width: min(560px, calc(100vw - 24px)); padding: 0; border-radius: var(--r-lg);
  border: 1px solid var(--line); background: rgba(255, 255, 255, .97);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  color: var(--tx); box-shadow: var(--sh-3);
}
.modal::backdrop { background: rgba(32, 42, 66, .34); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal__x {
  position: absolute; inset-block-start: 14px; inset-inline-end: 14px; width: 34px; height: 34px;
  display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--glass-2); cursor: pointer; color: var(--tx-2); font-size: 1.3rem; line-height: 1;
}
.modal__x:hover { color: var(--acc-2); border-color: var(--acc); }
.modal__in { padding: clamp(24px, 4vw, 36px); display: grid; gap: 17px; }
.modal h3 { padding-right: 40px; font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
.modal p.lead { font-size: .94rem; }
.field { display: grid; gap: 6px; }
.field > span { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tx-3); }
.field input, .field textarea {
  width: 100%; padding: 12px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: #fff; color: var(--tx);
  font-family: var(--f-body); font-size: .95rem; transition: border-color var(--fast);
}
.field input:focus, .field textarea:focus { outline: 0; border-color: var(--acc-2); }
.field textarea { resize: vertical; min-height: 84px; }
.row2 { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .row2 { grid-template-columns: 1fr; } }
.check { display: grid; grid-template-columns: 18px 1fr; gap: 11px; align-items: start; }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--acc-2); }
.check span { font-size: .84rem; color: var(--tx-2); line-height: 1.5; }
.modal__ok { padding: 15px 17px; border-radius: var(--r-sm); border: 1px solid var(--st-free); color: #1F7357; background: rgba(46, 158, 121, .10); font-size: .92rem; }
.modal__fine { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tx-3); text-align: center; }

/* ============================================================== ÇƏRƏZ XƏBƏRİ */
.cookie {
  position: fixed; inset-block-end: 16px; inset-inline-end: 16px; z-index: 95;
  width: min(370px, calc(100vw - 32px)); padding: 17px 19px;
  border-radius: var(--r); border: 1px solid var(--line);
  background: rgba(255, 255, 255, .95); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: var(--sh-3); display: grid; gap: 12px;
  transform: translateY(150%); transition: transform var(--slow);
}
.cookie.is-in { transform: none; }
.cookie p { font-size: .85rem; color: var(--tx-2); line-height: 1.55; }
.cookie div { display: flex; gap: 9px; }