/* ═══════════════════════════════════════════════════════════
   CVH Mühəndislik — Design System
   Tək tipoqrafiya: Barlow. Mürəkkəb-qara + marka yaşılı vurğu.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* Statistika lövhəsinin hero üzərinə qalxma məsafəsi.
     Hero-nun alt boşluğu bu dəyərdən hesablanır — ikisi ayrı-ayrı
     yazılsaydı, biri dəyişəndə düymələr yenidən lövhənin altında qalardı. */
  --hstats-lift:clamp(56px,6vw,88px);

  /* Colour */
  --ink:#052D20;
  --ink-2:#073B28;
  --ink-3:#0D4A33;
  --brand:#0F5B34;
  --brand-d:#083F24;
  --brand-tint:#EDF6F0;
  --fg:#17201C;
  --fg-2:#68736E;
  --fg-3:#7C8681;
  --bg:#FFFFFF;
  --bg-2:#F5F7F6;
  --bg-3:#EAEFEC;
  --line:#DDE8E1;
  --line-2:#C6D5CB;
  --brand-l:#238B45;
  --danger:#C42B2B;
  --on-dark:#FFFFFF;
  --on-dark-2:rgba(255,255,255,.72);
  --on-dark-3:rgba(255,255,255,.66);
  --hair-dark:rgba(255,255,255,.14);

  /* Space (density 5 / standard) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  --sec:clamp(56px,7vw,104px);
  --gut:clamp(18px,4vw,40px);
  --maxw:1280px;
  --r:4px;
  --r-lg:6px;

  --t:180ms cubic-bezier(.4,0,.2,1);
  --t-s:280ms cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:"Barlow","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit}
h1,h2,h3,h4{margin:0; font-weight:600; line-height:1.1; letter-spacing:-.018em}
p{margin:0}
ul{margin:0; padding:0; list-style:none}

/* SVG icon defaults — stroke-based, tək stil */
svg{fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.ico{width:20px; height:20px; flex:0 0 auto}

:focus-visible{outline:2px solid var(--brand); outline-offset:3px; border-radius:2px}
.skip-link{
  position:fixed; left:16px; top:-60px; z-index:200;
  background:var(--ink); color:#fff; padding:10px 18px; border-radius:var(--r);
  transition:top var(--t);
}
.skip-link:focus{top:16px}

.wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut)}

/* ── Typography helpers ───────────────────────────────── */
.h2{font-size:clamp(26px,3.1vw,40px); line-height:1.12; max-width:19ch}
.eyebrow{
  margin:0 0 var(--s4);
  font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brand); display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--brand); flex:0 0 auto}
.eyebrow--light{color:#fff}
.eyebrow--light::before{background:var(--brand)}

.lead{font-size:clamp(16px,1.35vw,19px); line-height:1.6; color:var(--fg-2); max-width:56ch}

.sec-head{
  display:flex; flex-wrap:wrap; gap:var(--s5) var(--s7);
  align-items:flex-end; justify-content:space-between;
  padding-bottom:var(--s6); margin-bottom:var(--s7);
  border-bottom:1px solid var(--line);
}
.sec-head__note{max-width:42ch; color:var(--fg-2); font-size:16px}
.sec-head--light{border-bottom-color:var(--hair-dark); color:#fff}
.sec-head--light .h2{color:#fff}

.link-arrow{
  display:inline-flex; align-items:center; gap:8px; min-height:44px;
  font-weight:600; font-size:15px; letter-spacing:.01em; color:var(--fg);
  border-bottom:2px solid var(--brand); align-self:flex-end; padding-bottom:2px;
  transition:gap var(--t), color var(--t);
}
.link-arrow:hover{gap:14px; color:var(--brand)}
.link-arrow .ico{width:17px; height:17px}

/* ── Buttons ──────────────────────────────────────────── */
.btn{
  --bh:48px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:var(--bh); padding:0 22px;
  border:1px solid transparent; border-radius:var(--r);
  font-size:15px; font-weight:600; letter-spacing:.02em;
  cursor:pointer; position:relative;
  transition:background var(--t), color var(--t), border-color var(--t), transform var(--t);
}
.btn--lg{--bh:54px; padding:0 28px; font-size:16px}
.btn--block{width:100%}
.btn--ink{background:var(--ink); color:#fff}
.btn--ink:hover{background:var(--brand-d)}
.btn--ink:active{transform:translateY(1px)}
.btn--brand{background:var(--brand); color:#fff}
.btn--brand:hover{background:var(--brand-d)}
.btn--brand:active{transform:translateY(1px)}
.btn--light{background:#fff; color:var(--ink)}
.btn--light:hover{background:var(--brand); color:#fff}

/* ── Hero-dakı ikinci düymə ───────────────────────────────
   Əvvəl hover-də yanındakı əsas düymə ilə eyni yaşıla dönürdü,
   yəni fərqlənmirdi. İndi əks istiqamətə gedir: dolğu şüşəyə
   çevrilir, ətrafında qum rəngli (#C9B688) nazik cizgi yanır.
   Qum tonu saytda lüks aksenti kimi işlənir (satış kartı ilə eyni dil). */
.hero__cta .btn--light{
  background:rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  color:#fff;
  border-color:#C9B688;
  box-shadow:0 0 0 1px rgba(201,182,136,.12);
  transition:background var(--t), color var(--t), border-color var(--t),
             box-shadow var(--t), transform var(--t);
}
.hero__cta .btn--light:hover,
.hero__cta .btn--light:focus-visible{
  background:rgba(255,255,255,.16);
  color:#fff;
  border-color:#E4D6B4;
  box-shadow:0 0 0 3px rgba(201,182,136,.2), 0 12px 30px rgba(6,14,9,.34);
}
.btn--ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.42)}
.btn--ghost:hover{background:rgba(255,255,255,.12); border-color:#fff}
.btn[disabled]{opacity:.55; cursor:not-allowed}

/* ── Utility bar (marquee) ────────────────────────────── */
.topbar{position:relative; background:var(--ink); color:rgba(255,255,255,.9); font-size:13.5px; overflow:hidden}
.topbar__track{display:flex; width:max-content; animation:tb-scroll 48s linear infinite}
.topbar:hover .topbar__track{animation-play-state:paused}
.topbar__seq{display:flex; align-items:center; flex:0 0 auto; min-height:42px}
.tb-item{display:inline-flex; align-items:center; gap:8px; padding-inline:var(--s4); white-space:nowrap; transition:color var(--t)}
a.tb-item:hover{color:#fff}
.tb-item .ico{width:16px; height:16px; color:#fff; stroke-width:1.7; flex:0 0 auto}
.tb-sep{color:rgba(255,255,255,.32); font-size:12px}
/* fixed social block (does not scroll) */
.topbar__soc-fixed{
  position:absolute; top:0; right:0; height:100%; z-index:2;
  display:flex; align-items:center; gap:6px;
  padding-left:24px; padding-right:var(--gut);
  background:linear-gradient(90deg, transparent, var(--ink) 22px, var(--ink) 100%);
}
.topbar__soc{display:inline-flex; align-items:center; justify-content:center; width:32px; min-height:36px; transition:color var(--t)}
.topbar__soc:hover{color:#fff}
.topbar__soc svg{width:17px; height:17px}
@media (prefers-reduced-motion:reduce){ .topbar__track{animation:none} }
@keyframes tb-scroll{from{transform:translateX(-50%)} to{transform:translateX(0)}}

/* ── Header ───────────────────────────────────────────── */
.hdr{
  position:sticky; top:0; z-index:100;
  background:#fff; border-bottom:1px solid var(--line);
  transition:box-shadow var(--t);
}
.hdr.is-stuck{box-shadow:0 1px 0 var(--line),0 10px 30px -18px rgba(12,17,20,.28)}
.hdr__in{display:flex; align-items:center; justify-content:space-between; gap:var(--s5); min-height:78px; max-width:none}
.hdr__logo{display:inline-flex; align-items:center; min-height:46px}
.hdr__logo img{width:auto; height:62px}
.nav{margin-inline:auto}
.nav>ul{display:flex; align-items:center; gap:2px}
.nav>ul a{
  display:inline-flex; align-items:center; min-height:44px; padding:0 13px;
  font-size:15px; font-weight:500; color:var(--fg-2);
  position:relative; transition:color var(--t);
}
.nav>ul a::after{
  content:""; position:absolute; left:13px; right:13px; bottom:-1px; height:2px;
  background:var(--brand); transform:scaleX(0); transform-origin:left;
  transition:transform var(--t-s);
}
.nav>ul a:hover{color:var(--ink)}
.nav>ul a:hover::after,.nav>ul a.is-active::after{transform:scaleX(1)}
.nav>ul a.is-active{color:var(--ink); font-weight:600}
.nav__foot{display:none}

.hdr__act{display:flex; align-items:center; gap:var(--s4); margin-left:var(--s2)}
.hdr__tel{
  display:inline-flex; align-items:center; gap:9px; min-height:44px;
  font-weight:600; font-size:15.5px; white-space:nowrap;
  padding-left:var(--s5); border-left:1px solid var(--line);
}
.hdr__tel .ico{color:var(--brand)}
.hdr__tel:hover{color:var(--brand)}

.burger{
  display:none; width:46px; height:46px; border:1px solid var(--line);
  background:#fff; border-radius:var(--r); cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.burger span{width:20px; height:2px; background:var(--ink); transition:transform var(--t),opacity var(--t)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:1150px){
  .hdr__tel span{display:none}
  .hdr__tel{padding-left:var(--s4)}
}
@media (max-width:1023px){
  .burger{display:flex}
  .hdr__tel,.hdr__act .btn{display:none}
  .hdr__in{min-height:66px}
  .hdr__logo img{height:50px}
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(340px,86vw);
    background:#fff; padding:calc(66px + var(--s6)) var(--s5) var(--s6);
    border-left:1px solid var(--line);
    transform:translateX(100%); transition:transform var(--t-s);
    display:flex; flex-direction:column; overflow-y:auto;
  }
  .nav.is-open{transform:none}
  .nav>ul{flex-direction:column; align-items:stretch; gap:0}
  .nav>ul li+li{border-top:1px solid var(--line)}
  .nav>ul a{min-height:54px; font-size:17px; padding-inline:0; color:var(--ink)}
  .nav>ul a::after{left:0; right:0; bottom:0}
  .nav__foot{display:block; margin-top:var(--s6); padding-top:var(--s5); border-top:1px solid var(--line)}
  .nav__tel{display:block; margin-top:var(--s4); text-align:center; font-weight:600; min-height:44px; line-height:44px}
  .scrim{position:fixed; inset:0; background:rgba(12,17,20,.5); z-index:99; opacity:0; pointer-events:none; transition:opacity var(--t-s)}
  .scrim.is-on{opacity:1; pointer-events:auto}
  /* Filtr paneli açılanda ekran qaralmasın — pərdə görünmür,
     yalnız kənara toxunuşu tutub paneli bağlayır */
  .scrim.is-clear{background:transparent}
  /* Yan panel açıq olanda WhatsApp düyməsi siyahının üstünü örtməsin */
  body:has(.scrim.is-on) .wa{opacity:0; pointer-events:none}
}

/* ── Hero ─────────────────────────────────────────────── */
:root{ --h-orange:#E8833A }

.hero{position:relative; background:var(--ink); color:#fff; isolation:isolate}
.hero__stage{position:absolute; inset:0; overflow:hidden; z-index:-1}
.hero__slide{position:absolute; inset:0; opacity:0; transition:opacity 700ms ease}
.hero__slide.is-on{opacity:1}
.hero__slide img{width:100%; height:100%; object-fit:cover; object-position:center}

/* ── Hero videosu ──────────────────────────────────────────
   max-width:1920px — videonun öz ölçüsü. Daha geniş ekranda
   böyüdülmür (yumşalmasın), kənarları aşağıdaki maska örtür. */
.hero__video{
  position:absolute; inset:0; margin:auto;
  width:100%; max-width:1920px; height:100%;
  object-fit:cover; object-position:center 42%;
  background:var(--ink);
}
@media (min-width:1921px){
  .hero__stage::after{
    content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
    background:linear-gradient(90deg,
      var(--ink) 0,
      rgba(12,17,20,0) calc(50% - 940px),
      rgba(12,17,20,0) calc(50% + 940px),
      var(--ink) 100%);
  }
}
/* Video öndədir — scrim yalnız yazının arxasını qaraldır,
   videonun ortası və sağı açıq qalır. */
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(100deg,rgba(8,26,16,.84) 0%,rgba(9,29,18,.60) 18%,rgba(10,26,17,.20) 29%,rgba(8,20,13,0) 36%,rgba(8,20,13,0) 100%),
    /* yazı yuxarıda olduğu üçün qaraltma da yuxarıdadır; aşağı hissə açıq qalır */
    linear-gradient(to bottom,rgba(7,18,12,.34) 0%,rgba(7,18,12,.08) 40%,transparent 60%);
}
/* Yazı bloku yuxarıda; hero alçaldılıb ki, statistika lövhəsi yuxarı qalxsın */
.hero__body{
  display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s6);
  min-height:min(68vh,624px); padding-top:clamp(104px,17vh,190px);
  /* Statistika lövhəsi hero-nun üstünə --hstats-lift qədər qalxır; buradakı
     boşluq həmin qalxmadan böyük olmalıdır, yoxsa CTA düymələri lövhənin
     altında qalır (uzun tərcümələrdə xüsusilə nəzərə çarpırdı). */
  padding-bottom:calc(var(--hstats-lift) + clamp(28px,3vw,44px));
}
.hero__copy{max-width:540px}
/* Bütün slayd mətnləri eyni grid xanasındadır: konteynerin hündürlüyü ən uzun
   mətnə görə sabitlənir, ona görə slayd dəyişəndə heç nə yerindən tərpənmir. */
.hero__texts{display:grid}
.hero__text{
  grid-area:1 / 1;
  visibility:hidden; opacity:0;
  pointer-events:none;
}
.hero__text.is-on{
  visibility:visible; opacity:1;
  pointer-events:auto;
  animation:rise 560ms cubic-bezier(.2,.7,.2,1) both;
}
@keyframes rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
/* Yazılar kiçildilib ki, video daha çox görünsün */
.hero h1,.hero__h{
  font-size:clamp(28px,3.6vw,46px); line-height:1.06; letter-spacing:-.026em;
  font-weight:700; margin:0 0 var(--s4);
  text-shadow:0 2px 18px rgba(6,14,9,.5);
}
.hero h1 em,.hero__h em{font-style:normal; color:#fff; position:relative; padding-bottom:2px; box-shadow:inset 0 -3px 0 var(--brand)}
.eyebrow--sand{color:#C9B688}
.eyebrow--sand::before{background:#C9B688}
.hero .lead{
  color:var(--on-dark-2); max-width:44ch;
  font-size:clamp(14px,1.15vw,15.5px); line-height:1.6;
  text-shadow:0 1px 12px rgba(6,14,9,.55);
}
.hero__cta{display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:clamp(20px,2.2vw,28px)}

/* Hero slayd idarəetməsi (nöqtələr + oxlar) silindi — mətnlər özü dəyişir. */

/* ═══════════════════════════════════════════════════════════
   ƏLAQƏ — sol tərəfdə form kartı, sağda xəritə + məlumat kartı
   ═══════════════════════════════════════════════════════════ */
.ctc{padding-block:var(--sec); background:var(--bg-2); border-top:1px solid var(--line)}
.ctc__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(18px,2.4vw,30px); align-items:start;
}
.ctc__card{
  background:#fff; border:1px solid var(--line); border-radius:10px;
  box-shadow:0 24px 48px -34px rgba(12,17,20,.28);
}
.ctc__form{padding:clamp(20px,2.4vw,34px)}
.ctc__h{font-size:clamp(21px,2.1vw,27px); font-weight:700; letter-spacing:-.02em; margin:0 0 var(--s3)}
.ctc__lead{margin:0 0 var(--s6); color:var(--fg-2); font-size:14.5px; line-height:1.6; max-width:52ch}
.ctc__row{display:grid; grid-template-columns:1fr 1fr; gap:var(--s4)}
.ctc__form .fld{margin-bottom:var(--s4)}

/* fayl + göndər sətri */
.ctc__send{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s4);
  align-items:stretch; margin-top:var(--s5);
}
.ctc__file{
  display:flex; align-items:center; gap:var(--s3); cursor:pointer;
  border:1px dashed var(--line-2); border-radius:8px; padding:12px 14px;
  transition:border-color var(--t), background var(--t);
}
.ctc__file:hover{border-color:var(--brand); background:var(--brand-tint)}
.ctc__file input{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.ctc__file .ico{width:20px; height:20px; flex:0 0 auto; color:var(--fg-3); fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.ctc__file-txt{display:flex; flex-direction:column; gap:2px; min-width:0}
.ctc__file-txt b{font-size:13.5px; font-weight:600; color:var(--fg)}
.ctc__file-txt i{font-style:normal; font-size:11.5px; color:var(--fg-3)}
.ctc__send .btn{min-width:190px; justify-content:center}

.ctc__priv{
  display:flex; align-items:center; gap:8px; margin:var(--s4) 0 0;
  font-size:12px; color:var(--fg-3);
}
.ctc__priv .ico{width:15px; height:15px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.6}

/* ── sağ sütun ── */
.ctc__side{position:relative; display:flex; flex-direction:column}
.ctc__map{
  border-radius:10px; overflow:hidden; border:1px solid var(--line);
  height:clamp(220px,26vw,330px); background:var(--bg-3);
}
.ctc__map iframe{width:100%; height:100%; border:0; display:block; filter:grayscale(.15)}
.ctc__info{margin:-48px clamp(0px,1.4vw,22px) 0; padding:clamp(14px,1.5vw,20px); position:relative; z-index:2}
.ctc__h3{font-size:clamp(15px,1.25vw,17px); font-weight:700; letter-spacing:-.015em; margin:0 0 var(--s4)}
.ctc__info-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:var(--s4) var(--s3);
}
.ctc__info-grid li{display:flex; gap:10px; min-width:0}
.ctc__ico{
  width:30px; height:30px; flex:0 0 auto; border-radius:50%;
  border:1px solid var(--line-2); display:grid; place-items:center; color:var(--brand);
}
.ctc__ico svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.ctc__info-grid b{display:block; font-size:12px; font-weight:700; margin-bottom:2px}
.ctc__info-grid a,.ctc__info-grid > li > div > span{
  display:block; font-size:11.5px; line-height:1.45; color:var(--fg-2); word-break:break-word;
}
.ctc__info-grid a{color:var(--fg-2); text-decoration:none; transition:color var(--t)}
.ctc__info-grid a:hover{color:var(--brand)}
.ctc__soc{display:flex !important; gap:5px; margin-top:4px}
.ctc__soc a{
  width:24px; height:24px; border-radius:5px; display:grid !important; place-items:center;
  border:1px solid var(--line-2); color:var(--fg-2);
  transition:border-color var(--t), color var(--t), background var(--t);
}
.ctc__soc a:hover{border-color:var(--brand); color:#fff; background:var(--brand)}
.ctc__soc svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.6}

/* ── alt üstünlük zolağı ── */
.ctc__perks{
  list-style:none; margin:clamp(18px,2.4vw,30px) 0 0; padding:clamp(16px,2vw,26px);
  background:#fff; border:1px solid var(--line); border-radius:10px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
}
.ctc__perks li{display:flex; gap:var(--s3); align-items:flex-start; padding-inline:clamp(12px,1.6vw,22px)}
.ctc__perks li + li{border-left:1px solid var(--line)}
.ctc__perks .ico{width:30px; height:30px; flex:0 0 auto; color:var(--brand); fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round}
.ctc__perks b{display:block; font-size:14px; font-weight:600; margin-bottom:3px}
.ctc__perks span{display:block; font-size:12.5px; color:var(--fg-3); line-height:1.5}

@media (max-width:1023px){
  .ctc__grid{grid-template-columns:1fr}
  .ctc__perks{grid-template-columns:repeat(2,1fr); gap:var(--s5) 0}
  .ctc__perks li:nth-child(odd){border-left:0}
}
@media (max-width:639px){
  .ctc__row{grid-template-columns:1fr}
  .ctc__info-grid{grid-template-columns:1fr}
  .ctc__info{margin-inline:0}
  .ctc__send{grid-template-columns:1fr}
  .ctc__send .btn{min-width:0}
  .ctc__perks{grid-template-columns:1fr}
  .ctc__perks li{border-left:0 !important}
}

/* ═══════════════════════════════════════════════════════════
   MƏHSUL VİTRİNİ — «Kateqoriyalar» bölməsinin öz hero-su
   Fon rəngi hər məhsulda dəyişir (--c-mid / --c-deep).
   ═══════════════════════════════════════════════════════════ */
.vitrin{
  position:relative; overflow:hidden; color:#fff;
  background:var(--ink);
  padding:clamp(38px,5.5vw,74px) 0;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.vitrin__bg{
  position:absolute; inset:0;
  /* Müştəri istəyi: tək rəngli yaşıl fon — məhsula görə dəyişmir */
  background:#073B28;
}
.vitrin__grain{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:3px 3px;
}
.vitrin__in{
  position:relative; z-index:3; width:100%; max-width:var(--maxw); margin:0 auto;
  padding-inline:var(--gut);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,.74fr);
  gap:clamp(18px,3vw,44px); align-items:center;
}

/* ── sol sütun ── */
.vitrin__left{display:flex; flex-direction:column; align-items:flex-start; min-width:0}
.vitrin__nav{display:flex; align-items:center; gap:var(--s2); margin-bottom:var(--s5)}
.vbtn{
  width:42px; height:42px; border-radius:50%; background:transparent; cursor:pointer;
  border:1px solid rgba(255,255,255,.28); color:#fff;
  display:grid; place-items:center; transition:border-color var(--t), background var(--t);
}
.vbtn svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.vbtn:hover{border-color:#fff; background:rgba(255,255,255,.1)}
.vitrin__count{font-size:12.5px; letter-spacing:.18em; color:rgba(255,255,255,.5); margin-left:var(--s2); font-variant-numeric:tabular-nums}
.vitrin__count b{color:#fff; font-weight:600}
.vitrin__count i{font-style:normal}

.vitrin__eyebrow{
  position:relative; padding-top:18px; margin:0;
  font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:#C9D3CC;
}
.vitrin__eyebrow::before{content:""; position:absolute; left:0; top:0; width:40px; height:1px; background:var(--brand)}
.vitrin__title{
  margin:var(--s3) 0 var(--s3);
  font-size:clamp(28px,3.4vw,46px); font-weight:700; line-height:1.04; letter-spacing:-.03em;
}
.vitrin__text{margin:0; max-width:34ch; font-size:clamp(14px,1.05vw,15.5px); color:var(--on-dark-2); line-height:1.6}
.vitrin__cta{display:flex; gap:var(--s3); flex-wrap:wrap; margin-top:var(--s5)}
.btn--ghost-light{
  background:transparent; color:#fff; border:1px solid rgba(255,255,255,.34);
}
.btn--ghost-light:hover{background:rgba(255,255,255,.1); border-color:#fff}

.vitrin__stats{
  list-style:none; display:flex; gap:clamp(18px,2.6vw,38px); margin:clamp(26px,4vw,40px) 0 0;
  padding:var(--s4) 0 0; border-top:1px solid rgba(255,255,255,.15); width:100%;
}
.vitrin__stats li{display:flex; flex-direction:column; gap:2px}
.vitrin__stats strong{font-size:22px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.vitrin__stats span{font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.5)}

/* ── orta səhnə ── */
.vstage{position:relative; height:min(52vh,440px); display:grid; place-items:center}
.vstage__glow{
  position:absolute; width:74%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.17), transparent 62%); filter:blur(12px);
}
.vstage__wm{ display:none; }   /* məhsulun arxasında yazı olmasın */
.vstage__shadow{
  position:absolute; bottom:4%; width:40%; height:24px; border-radius:50%;
  background:rgba(0,0,0,.55); filter:blur(19px);
}
.vshot{
  position:absolute; max-height:100%; max-width:88%; width:auto;
  filter:drop-shadow(0 32px 44px rgba(0,0,0,.55));
  will-change:transform,opacity,filter;
}
.vshot:not([src]){display:none}
.vshot.is-out{animation:vshotOut 740ms cubic-bezier(.55,0,.9,.35) forwards; z-index:1}
.vshot.is-in{animation:vshotIn 1200ms cubic-bezier(.18,.85,.28,1) 320ms backwards; z-index:2}
@keyframes vshotOut{
  0%{opacity:1; transform:none; filter:blur(0)}
  55%{opacity:.35}
  100%{opacity:0; transform:translate(-10%,-26%) scale(.78) rotate(-7deg); filter:blur(7px)}
}
@keyframes vshotIn{
  0%{opacity:0; transform:translate(24%,44%) scale(.46) rotate(9deg); filter:blur(6px)}
  45%{opacity:1; filter:blur(0)}
  100%{opacity:1; transform:none; filter:blur(0)}
}

/* ── sağ texniki panel ── */
.vitrin__right{
  border-left:1px solid rgba(255,255,255,.16); padding-left:clamp(14px,1.6vw,24px);
  align-self:center; min-width:0; overflow:hidden;
}
.vspec__label{font-size:11px; text-transform:uppercase; letter-spacing:.18em; color:rgba(255,255,255,.45); margin:0 0 var(--s2)}
.vspec__name{font-size:20px; font-weight:700; letter-spacing:-.02em; margin:0 0 var(--s5); line-height:1.2}
.vspec__row{display:flex; gap:var(--s5); margin-bottom:var(--s4)}
.vspec__row div,.vspec__single{display:flex; flex-direction:column; gap:3px; min-width:0}
.vspec__row span,.vspec__single span{font-size:10.5px; text-transform:uppercase; letter-spacing:.13em; color:rgba(255,255,255,.45)}
.vspec__row strong,.vspec__single strong{font-size:14px; font-weight:700; letter-spacing:-.01em}
.vspec__single{margin-bottom:var(--s5)}
.vspec__single strong{font-size:13.5px; line-height:1.45; font-weight:600}

.vthumbs{list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0}
.vthumbs button{
  width:52px; height:52px; padding:5px; cursor:pointer; border-radius:var(--r);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
  transition:background var(--t), border-color var(--t), transform var(--t);
}
.vthumbs button:hover{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.5); transform:translateY(-2px)}
.vthumbs img{width:100%; height:100%; object-fit:contain}

/* ── sürüşərək giriş ── */
.v-inl{animation:vInLeft 1100ms cubic-bezier(.16,.86,.26,1) both}
.v-inr{animation:vInRight 1100ms cubic-bezier(.16,.86,.26,1) both}
@keyframes vInLeft{0%{opacity:0; transform:translateX(calc(var(--from,200px) * -1))} 100%{opacity:1; transform:none}}
@keyframes vInRight{0%{opacity:0; transform:translateX(var(--from,200px))} 100%{opacity:1; transform:none}}

@media (max-width:1023px){
  .vitrin__in{grid-template-columns:1fr; gap:var(--s6)}
  .vstage{order:-1; height:min(40vh,320px)}
  .vitrin__right{border-left:0; border-top:1px solid rgba(255,255,255,.16); padding-left:0; padding-top:var(--s5)}
}
@media (prefers-reduced-motion:reduce){
  .vshot.is-in,.vshot.is-out,.v-inl,.v-inr{animation:none}
  .vshot.is-out{opacity:0}
  .vitrin__bg{transition:none}
}

/* ── Hero altındakı ağ statistika lövhəsi ─────────────── */
.hstats{position:relative; z-index:3; margin-top:calc(-1 * var(--hstats-lift))}
.hstats__in{
  background:#fff; border:1px solid var(--line);
  box-shadow:0 30px 60px -34px rgba(8,26,16,.45);
  display:grid;
  /* Bənd sayı dəyişəndə boş xana qalmasın deyə sütunlar məzmuna görə
     ölçülür; zolaq da tam eni tutmur, məzmun qədər qısalıb ortalanır. */
  grid-template-columns:repeat(auto-fit,minmax(150px,max-content));
  width:fit-content; max-width:100%; margin-inline:auto;
  justify-content:center;
}
.fact{display:flex; align-items:center; gap:var(--s3); padding:clamp(18px,2vw,26px) clamp(14px,1.6vw,22px)}
.hstats__in .fact+.fact{border-left:1px solid var(--line)}
.fact .ico{width:30px; height:30px; color:var(--brand); stroke-width:1.4; flex:0 0 auto}
.fact strong{display:block; font-size:clamp(19px,1.9vw,24px); font-weight:700; letter-spacing:-.02em; line-height:1.1; font-variant-numeric:tabular-nums}
.fact span{display:block; margin-top:2px; font-size:13.5px; color:var(--fg-3); line-height:1.35}
.fact--txt strong{font-size:16px !important; font-weight:600; letter-spacing:-.01em}
@media (max-width:1099px){
  .hstats__in{grid-template-columns:repeat(3,1fr)}
  .hstats__in .fact:nth-child(3n+1){border-left:0}
  .hstats__in .fact:nth-child(n+4){border-top:1px solid var(--line)}
}
@media (max-width:1023px){
  .hero__body{flex-direction:column; align-items:stretch; min-height:auto}
}
@media (max-width:639px){
  :root{--hstats-lift:40px}
  .hstats__in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hstats__in .fact{border-left:0 !important}
  .hstats__in .fact:nth-child(2n){border-left:1px solid var(--line) !important}
  .hstats__in .fact:nth-child(n+3){border-top:1px solid var(--line)}
}
/* çox dar ekranlarda (≈320px) rəqəm + ikon sütuna sığmırdı */
@media (max-width:400px){
  .fact{padding:16px 10px; gap:8px}
  .fact .ico{width:24px; height:24px}
  .fact strong{font-size:18px}
  .fact span{font-size:12.5px}
  .fact--txt strong{font-size:14px !important}
}

/* ── Partners ─────────────────────────────────────────── */
.partners{padding-block:var(--s7); border-bottom:1px solid var(--line)}
.partners__head{display:flex; flex-wrap:wrap; gap:var(--s4) var(--s6); align-items:center; justify-content:space-between; margin-bottom:var(--s6)}
.partners__title{
  font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-3);
}
.partners__grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:1px; background:var(--line)}
.partners__grid li{background:#fff}
.partners__grid a{
  display:flex; align-items:center; justify-content:center;
  height:88px; padding:var(--s4);
  filter:grayscale(1); opacity:.62;
  transition:filter var(--t-s), opacity var(--t-s), background var(--t);
}
.partners__grid a:hover{filter:none; opacity:1; background:var(--bg-2)}
.partners__grid img{max-height:34px; width:auto; object-fit:contain}
@media (max-width:1023px){ .partners__grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:479px){ .partners__grid{grid-template-columns:repeat(2,1fr)} }

/* ── About ────────────────────────────────────────────── */
.about{padding-block:var(--sec)}
/* Sütunlar arası boşluq daraldılıb — sağdakı blok səhifənin
   mərkəzinə yaxınlaşır, kompozisiya iki kənara dağılmır. */
.about__grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,3.2vw,56px); align-items:start}
.about__copy .h2{margin-bottom:var(--s5)}
.about__copy p{color:var(--fg-2); margin-bottom:var(--s4); max-width:58ch}
.about__list{margin:var(--s6) 0; border-top:1px solid var(--line)}
.about__list li{
  display:flex; align-items:flex-start; gap:var(--s3);
  padding:var(--s4) 0; border-bottom:1px solid var(--line);
  font-weight:500; font-size:16px;
}
.about__list .ico{color:var(--brand); margin-top:3px; stroke-width:2.1}
.about__stats{display:flex; flex-wrap:wrap; gap:var(--s6); margin-bottom:var(--s6)}
.about__stats strong{
  display:block; font-size:clamp(34px,4vw,46px); font-weight:600;
  line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.about__stats span{display:block; margin-top:6px; font-size:14px; color:var(--fg-3); letter-spacing:.02em}

.about__media{display:grid; grid-template-columns:1fr; gap:var(--s4); position:relative}
.about__video{margin:0; overflow:hidden; border-radius:var(--r-lg); background:var(--ink); aspect-ratio:16/10}
.about__video video{width:100%; height:100%; object-fit:cover; object-position:center; display:block}
/* ── Satış şöbəsi kartı ───────────────────────────────────
   Fon düz qara deyil — loqonun yaşılından törədilmiş dərin
   "lak" tonu: diaqonal keçid + sağ yuxarıda markanın yaşılı ilə
   yumşaq işıq. Tək bəzək qum rəngli (#C9B688) nazik xətdir. */
.about__card{
  position:relative; overflow:hidden; isolation:isolate;
  color:#fff; border-radius:var(--r-lg);
  padding:clamp(18px,1.6vw,22px);
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  background:
    radial-gradient(118% 88% at 88% -8%, rgba(47,125,60,.34) 0%, rgba(47,125,60,0) 58%),
    linear-gradient(152deg, #17351F 0%, #102718 54%, #0B1E12 100%);
  box-shadow:inset 0 0 0 1px rgba(201,182,136,.15);
}
/* Seçicilər kartın öz adı ilə gücləndirilib: `.prose p` kimi səhifəyə xas
   qaydalar əks halda kartın rənglərini əzir (haqqimizda.html-də belə olurdu). */
.about__card .about__card-k{
  font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
  color:#C9B688; font-weight:600; width:100%; margin:0;
}
/* Eyebrow-un altındakı qum xətti — sağa doğru əriyir */
.about__card .about__card-k::after{
  content:""; display:block; height:1px; margin-top:9px;
  background:linear-gradient(90deg, rgba(201,182,136,.55) 0%, rgba(201,182,136,.06) 62%, transparent 100%);
}
.about__card .about__card-tel{
  display:inline-flex; align-items:center; min-height:44px; margin-top:2px;
  font-size:clamp(19px,1.8vw,22px); font-weight:600; letter-spacing:-.015em;
  font-variant-numeric:tabular-nums; color:#fff;
  transition:color var(--t);
}
.about__card .about__card-tel:hover{color:#C9B688}
.about__card .about__card-h{font-size:13.5px; color:rgba(233,240,234,.62); line-height:1.55; margin:0}
.about__card .link-arrow{
  color:#fff; margin-top:var(--s3); font-size:14px; font-weight:600; align-self:flex-start;
  padding-bottom:3px; border-bottom:1px solid rgba(201,182,136,.42);
  transition:color var(--t), border-color var(--t), gap var(--t);
}
.about__card .link-arrow:hover{color:#C9B688; border-bottom-color:#C9B688}

/* Video, "Dəyərlərimiz" və əlaqə kartı ayrı-ayrı bloklardır — ana səhifə ilə
   Haqqımızda səhifəsi eyni görünsün deyə hər üçü tam yumru künclə düzülür. */
[dir="rtl"] .about__card-k::after{
  background:linear-gradient(270deg, rgba(201,182,136,.55) 0%, rgba(201,182,136,.06) 62%, transparent 100%);
}
@media (max-width:1023px){
  .about__grid{grid-template-columns:1fr}
  .about__media{order:-1}
}
@media (max-width:559px){
  .about__video{aspect-ratio:4/3}
}

/* ── Services ─────────────────────────────────────────── */
.svc{padding-block:var(--sec); background:var(--bg-2); border-top:1px solid var(--line)}
.svc__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line)}
.svc__card{
  background:#fff; padding:clamp(24px,2.6vw,36px);
  position:relative; transition:background var(--t);
}
.svc__card::before{
  content:""; position:absolute; left:0; top:0; width:3px; height:0; background:var(--brand);
  transition:height var(--t-s);
}
.svc__card:hover{background:#fff}
.svc__card:hover::before{height:100%}
.svc__num{
  position:absolute; right:clamp(20px,2.4vw,32px); top:clamp(22px,2.4vw,32px);
  font-size:13px; font-weight:600; letter-spacing:.1em; color:var(--fg-3);
  font-variant-numeric:tabular-nums; opacity:.75;
}
.svc__ico{width:34px; height:34px; color:var(--brand); stroke-width:1.5; margin-bottom:var(--s5)}
.svc__card h3{font-size:20px; margin-bottom:10px}
.svc__card p{color:var(--fg-2); font-size:15.5px; max-width:34ch}
@media (max-width:1023px){ .svc__grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:559px){ .svc__grid{grid-template-columns:1fr} }

/* ── Catalog ──────────────────────────────────────────── */
.cat{padding-block:var(--sec); background:var(--ink); color:#fff}
.cat__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4)}
.cat__item{
  position:relative; overflow:hidden; border-radius:var(--r-lg);
  min-height:260px; display:flex; align-items:flex-end;
  background:var(--ink-2); isolation:isolate;
}
.cat__item--lg{grid-column:span 2; grid-row:span 2; min-height:400px}
.cat__item img{
  position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover;
  transition:transform 700ms cubic-bezier(.2,.7,.2,1);
}
.cat__item::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top,rgba(12,17,20,.92) 0%,rgba(12,17,20,.5) 46%,rgba(12,17,20,.15) 100%);
  transition:background var(--t-s);
}
.cat__item:hover img{transform:scale(1.05)}
.cat__item:hover::after{background:linear-gradient(to top,rgba(19,64,30,.94) 0%,rgba(12,17,20,.55) 52%,rgba(12,17,20,.2) 100%)}
.cat__body{padding:clamp(20px,2.4vw,32px); width:100%}
.cat__k{font-size:11.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--on-dark-3); margin-bottom:8px}
.cat__item h3{font-size:clamp(19px,1.9vw,26px); margin-bottom:8px; max-width:22ch}
.cat__meta{font-size:14px; color:var(--on-dark-2)}
@media (max-width:1023px){
  .cat__grid{grid-template-columns:repeat(2,1fr)}
  .cat__item--lg{grid-column:span 2; grid-row:auto; min-height:300px}
}
@media (max-width:559px){
  .cat__grid{grid-template-columns:1fr}
  .cat__item--lg{grid-column:auto}
}

/* ── Why ──────────────────────────────────────────────── */
.why{padding-block:var(--sec)}
.why__grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line)}
.why__item{background:#fff; padding:clamp(26px,3vw,44px); display:flex; flex-direction:column}
.why__n{
  font-size:13px; font-weight:600; letter-spacing:.12em; color:var(--brand);
  margin-bottom:var(--s5); font-variant-numeric:tabular-nums;
}
.why__item h3{font-size:clamp(19px,1.7vw,23px); margin-bottom:var(--s3); max-width:24ch}
.why__item p{color:var(--fg-2); font-size:16px; max-width:48ch}
@media (max-width:659px){ .why__grid{grid-template-columns:1fr} }

/* ── News ─────────────────────────────────────────────── */
.news{padding-block:var(--sec); background:var(--bg-2); border-top:1px solid var(--line)}
.news__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5)}
.post{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; transition:border-color var(--t)}
.post:hover{border-color:var(--line-2)}
.post__img{display:block; aspect-ratio:16/10; overflow:hidden; background:var(--bg-3)}
.post__img img{width:100%; height:100%; object-fit:cover; transition:transform 600ms cubic-bezier(.2,.7,.2,1)}
.post:hover .post__img img{transform:scale(1.04)}
.post__body{padding:var(--s5); display:flex; flex-direction:column; gap:10px}
.post__k{font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--brand)}
.post h3{font-size:19px; line-height:1.28}
.post h3 a{transition:color var(--t)}
.post h3 a:hover{color:var(--brand)}
.post__x{font-size:15.5px; color:var(--fg-2)}
@media (max-width:959px){ .news__grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:619px){ .news__grid{grid-template-columns:1fr} }

/* ── Contact ──────────────────────────────────────────── */
/* ── Sorğu bölməsi ────────────────────────────────────────
   Fon qara deyil — kataloq hero-sundakı açıq CVH studiya şəkli.
   Şəkil ağa yaxın olduğu üçün bütün mətnlər tünd rəngdədir. */
.cta{
  position:relative; isolation:isolate; overflow:hidden;
  padding-block:var(--sec);
  background:#EEF1EE url("assets/img/phero-cvh-light.webp") center/cover no-repeat;
  color:var(--fg);
}
/* Mətnin arxasını bir az ağardırıq ki, kontrast hər ekranda saxlansın */
.cta::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg,rgba(255,255,255,.86) 0%,rgba(255,255,255,.66) 46%,rgba(255,255,255,.34) 100%);
}
.cta__grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,3.4vw,56px); align-items:start}
.cta .h2{color:var(--ink); margin-bottom:var(--s4)}
.cta .eyebrow--light{color:var(--brand-d)}
.cta .eyebrow--light::before{background:var(--brand-d)}
.cta__lead{color:var(--fg-2); max-width:50ch; font-size:16px}
.cta__list{margin-top:var(--s5); border-top:1px solid var(--line)}
.cta__list li{display:flex; align-items:center; gap:var(--s4); padding:var(--s3) 0; border-bottom:1px solid var(--line); min-height:56px}
.cta__list .ico{color:var(--brand); width:22px; height:22px; flex:0 0 auto}
.cta__list span{display:block; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-3); margin-bottom:2px}
.cta__list a{display:inline-flex; align-items:center; min-height:30px; font-size:16.5px; font-weight:600; color:var(--ink); transition:color var(--t)}
.cta__list a:hover{color:var(--brand)}

.formcard{
  background:#fff; color:var(--fg); border-radius:var(--r-lg);
  padding:clamp(20px,2vw,28px);
  border-top:2px solid #C9B688;                       /* qum aksenti — kartın başlığı */
  box-shadow:0 1px 2px rgba(12,17,20,.06), 0 18px 46px rgba(6,14,9,.24);
}
.fld{margin-bottom:10px}
.fld-row{display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); align-items:start}
.fld label,.label-like{
  display:block; font-size:12.5px; font-weight:600; margin-bottom:4px;
  letter-spacing:.02em; color:var(--fg-2);
}
/* Ulduz sadəcə "məcburi"dir — qırmızı olanda forma xəta doluymuş kimi görünür */
.req{color:var(--fg-3); font-weight:400}
.fld input[type=text],.fld input[type=tel],.fld input[type=email],.fld textarea,.sel select{
  width:100%; min-height:42px; padding:8px 12px;
  border:1px solid var(--line-2); border-radius:var(--r); background:#fff;
  font:inherit; font-size:14.5px; color:var(--fg);
  transition:border-color var(--t), box-shadow var(--t);
}
.fld textarea{min-height:58px; resize:vertical; line-height:1.5}
.fld input::placeholder,.fld textarea::placeholder{color:var(--fg-3)}
.fld input:focus,.fld textarea:focus,.sel select:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(47,125,60,.16);
}
.fld.is-bad input,.fld.is-bad textarea{border-color:var(--danger)}
.fld.is-bad input:focus,.fld.is-bad textarea:focus{box-shadow:0 0 0 3px rgba(196,43,43,.15)}
.hint{font-size:12px; color:var(--fg-3); margin-top:4px; line-height:1.4}
.err{display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--danger); margin-top:4px; font-weight:500}
/* Xəta ipucunun ALTINA yığılmır, onu əvəz edir — əks halda sətir aşağı
   itələnir və qonşu sütunla düzülüş pozulurdu. */
.fld.is-bad .hint{display:none}
.err::before{content:"!"; display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; border-radius:50%; background:var(--danger); color:#fff; font-size:11px; font-weight:700; flex:0 0 auto}

.sel{position:relative}
.sel select{appearance:none; padding-right:44px; cursor:pointer}
.sel .ico{position:absolute; right:14px; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--fg-2)}

.file{
  display:flex; align-items:center; gap:10px; min-height:42px; padding:8px 12px;
  border:1px dashed var(--line-2); border-radius:var(--r); cursor:pointer;
  font-size:14.5px; color:var(--fg-2); font-weight:400; margin:0;
  white-space:nowrap; overflow:hidden;
  transition:border-color var(--t), background var(--t);
}
.file span{overflow:hidden; text-overflow:ellipsis}
.file:hover{border-color:var(--brand); background:var(--brand-tint)}
.file .ico{color:var(--brand)}
.file input{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}

.fld--check{display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start; margin-top:var(--s3); margin-bottom:var(--s3)}
.fld--check input{width:18px; height:18px; margin:2px 0 0; accent-color:var(--brand); cursor:pointer}
.fld--check label{font-weight:400; font-size:13.5px; color:var(--fg-2); margin:0; line-height:1.5}
.fld--check .err{grid-column:1/-1}

.spin{display:none; width:17px; height:17px; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.btn.is-loading .spin{display:block}
.formcard__note{font-size:12px; color:var(--fg-3); margin-top:10px; line-height:1.45}
.ok{
  display:flex; align-items:center; gap:10px; margin-top:var(--s4);
  padding:14px 16px; border-radius:var(--r);
  background:var(--brand-tint); border:1px solid #C9E0CD; color:var(--brand-d);
  font-size:15px; font-weight:500;
}
.ok .ico{color:var(--brand); stroke-width:2.2}
@media (max-width:1023px){
  .cta__grid{grid-template-columns:1fr}
  .cta__list a,.ftr__contact a{min-height:44px}
  .cta__list li{padding-block:var(--s3)}
}
@media (max-width:559px){ .fld-row{grid-template-columns:1fr} }

/* ── Footer ───────────────────────────────────────────── */
.ftr{background:var(--ink-2); color:var(--on-dark-2); font-size:15px}
.ftr__grid{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1.3fr;
  gap:var(--s7) var(--s6); padding-block:var(--s8) var(--s7);
}
.ftr__brand img{height:64px; width:auto; margin-bottom:var(--s4)}
.ftr__brand p{max-width:34ch; line-height:1.6; font-size:14.5px}
.ftr__soc{display:flex; gap:var(--s2); margin-top:var(--s5)}
.ftr__soc a{
  display:flex; align-items:center; justify-content:center; width:44px; height:44px;
  border:1px solid var(--hair-dark); border-radius:var(--r); color:var(--on-dark-2);
  transition:background var(--t), color var(--t), border-color var(--t);
}
.ftr__soc a:hover{background:var(--brand); border-color:var(--brand); color:#fff}
.ftr__soc svg{width:19px; height:19px}
.ftr__col h3{
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#fff;
  margin-bottom:var(--s4); font-weight:600;
}
.ftr__col ul li{margin-bottom:2px}
.ftr__col ul a{display:inline-flex; align-items:center; min-height:40px; transition:color var(--t)}
.ftr__col ul a:hover{color:#fff}
.ftr__contact li{display:flex; flex-direction:column; margin-bottom:var(--s4)}
.ftr__contact a{min-height:32px}
@media (max-width:1023px){ .ftr__col ul a{min-height:46px} }
.ftr__contact span{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--on-dark-3); margin-bottom:3px}
.ftr__contact p{font-size:14.5px; line-height:1.6; margin:0}
.ftr__btm{border-top:1px solid var(--hair-dark)}
.ftr__btm-in{display:flex; flex-wrap:wrap; gap:var(--s3) var(--s6); justify-content:space-between; padding-block:var(--s5); font-size:13.5px; color:var(--on-dark-3)}
.ftr__legal{max-width:62ch}
.ftr__credit{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.ftr__credit-badge{
  display:flex; flex:none; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:7px; overflow:hidden; background:#F1F2F4;
}
.ftr__credit-badge img{width:100%; height:100%; object-fit:cover}
.ftr__credit strong{color:var(--on-dark-2); font-weight:600}
.ftr__credit a{color:inherit; text-decoration:none; transition:color var(--t)}
.ftr__credit a:hover{color:var(--on-dark)}
@media (max-width:959px){ .ftr__grid{grid-template-columns:1fr 1fr} }
@media (max-width:559px){ .ftr__grid{grid-template-columns:1fr; padding-block:var(--s7) var(--s6)} }

/* ── WhatsApp float ───────────────────────────────────── */
.wa{
  position:fixed; right:clamp(16px,2vw,26px); bottom:clamp(16px,2vw,26px); z-index:90;
  width:54px; height:54px; border-radius:50%;
  background:var(--brand); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px -8px rgba(12,17,20,.5);
  transition:background var(--t), transform var(--t);
}
.wa:hover{background:var(--brand-d); transform:translateY(-2px)}
.wa svg{width:28px; height:28px; fill:currentColor; stroke:none}

/* ═══════════════════════════════════════════════════════
   ALT SƏHİFƏLƏR
   ═══════════════════════════════════════════════════════ */

/* ── Page hero (daxili səhifə başlığı) ────────────────── */
.phero{position:relative; background:var(--ink); color:#fff; isolation:isolate; overflow:hidden}
.phero__bg{position:absolute; inset:0; z-index:-1}
.phero__bg img{width:100%; height:100%; object-fit:cover}
.phero__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,rgba(12,17,20,.95) 0%,rgba(12,17,20,.82) 46%,rgba(12,17,20,.5) 100%);
}
.phero--plain{background:var(--ink)}

/* ── Yığcam (slim) hero: başlıq solda, üç rəqəm sağda ─────── */
.phero--slim{background:var(--ink)}
.phero--slim .phero__bg img{opacity:.5}
.phero--slim .phero__bg::after{
  background:linear-gradient(100deg,rgba(9,26,17,.96) 0%,rgba(10,30,19,.9) 44%,rgba(12,40,25,.72) 100%);
}
.phero--slim .phero__in{
  display:flex; align-items:center; justify-content:space-between; gap:clamp(20px,4vw,56px);
  padding-block:clamp(22px,3vw,38px);
  min-height:0;
}
.phero--slim .phero__copy{flex:1 1 auto; min-width:0}
.phero--slim h1{
  font-size:clamp(26px,3.4vw,42px); line-height:1.06; margin:var(--s2) 0 0; max-width:none;
}
.phero--slim .phero__lead{
  margin-top:10px; font-size:clamp(13.5px,1.05vw,15px); max-width:52ch; color:var(--on-dark-2);
}
.phero__facts{
  list-style:none; margin:0; padding:0; flex:0 0 auto;
  display:flex; align-items:center; gap:clamp(16px,2.4vw,38px);
}
.phero__facts li{display:flex; align-items:center; gap:var(--s3); min-width:0}
.phero__facts-ico{
  width:42px; height:42px; flex:0 0 auto; border-radius:8px;
  border:1px solid rgba(255,255,255,.28); display:grid; place-items:center; color:#fff;
}
.phero__facts-ico svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.phero__facts b{display:block; font-size:19px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.1}
/* Yalnız mətn etiketi — `span` seçicisi ikon qutusunu da tuturdu və onun
   display:grid-ini block-a çevirib ikonu sol-yuxarı küncə itələyirdi */
.phero__facts div span{display:block; margin-top:2px; font-size:11.5px; color:rgba(255,255,255,.62); line-height:1.3}

@media (max-width:1023px){
  .phero--slim .phero__in{flex-direction:column; align-items:flex-start; gap:var(--s5)}
  .phero__facts{flex-wrap:wrap; gap:var(--s5)}
}
@media (max-width:559px){
  .phero__facts{gap:var(--s4)}
  .phero__facts-ico{width:36px; height:36px}
  .phero__facts b{font-size:16.5px}
}

/* ── Açıq (ağ) fonlu hero variantı ─────────────────────────
   Fon şəkli demək olar ağdır, ona görə bütün mətn və düymələr
   tünd rəngə çevrilir — əks halda yazılar görünməz olur. */
.phero--light{background:#F2F5F1; color:var(--ink)}
.phero--light .phero__bg::after{
  /* Sol tərəfdə mətnin arxasını bir az ağardırıq ki, kontrast qalsın */
  background:linear-gradient(100deg,rgba(255,255,255,.82) 0%,rgba(255,255,255,.55) 42%,rgba(255,255,255,0) 76%);
}
.phero--light .crumb a{color:var(--fg-2)}
.phero--light .crumb a:hover{color:var(--brand)}
.phero--light .crumb span{color:var(--fg-3)}
.phero--light .crumb svg{stroke:var(--fg-3)}
.phero--light h1{color:var(--ink)}
.phero--light .phero__lead{color:var(--fg-2)}
.phero--light .pmeta{border-top-color:var(--line-2)}
.phero--light .pmeta__brand{color:var(--brand)}
.phero--light .pmeta__name{color:var(--ink)}
.phero--light .pmeta__txt{color:var(--fg-2)}
.phero--light .pmeta__link{color:var(--ink); border-bottom-color:rgba(12,17,20,.28)}
.phero--light .pmeta__link:hover{border-bottom-color:var(--brand); color:var(--brand)}
.phero--light .pnav__b{border-color:rgba(12,17,20,.22); background:rgba(255,255,255,.7); color:var(--ink)}
.phero--light .pnav__b:hover{background:var(--ink); border-color:var(--ink); color:#fff}
.phero--light .pnav__n{color:var(--fg-3)}
.phero--light .pnav__n b{color:var(--ink)}
/* Açıq fonda yaşıl parıltı və tünd kölgə yersizdir */
.phero--light .phero__glow{
  background:radial-gradient(circle at 50% 50%, rgba(47,125,60,.16) 0%, rgba(47,125,60,.06) 48%, transparent 72%);
}
.phero--light .phero__prod{filter:drop-shadow(0 16px 24px rgba(12,17,20,.18))}
/* Solğun CVH yazılı qrafit fon — şəkil özü tünddür, ona görə pərdə yüngüldür */
.phero__bg--cvh::after{
  background:linear-gradient(100deg,rgba(8,12,14,.72) 0%,rgba(8,12,14,.42) 44%,rgba(8,12,14,.06) 78%,rgba(8,12,14,0) 100%);
}
.phero__in{
  padding-block:clamp(38px,5vw,74px) clamp(34px,4.4vw,62px);
  display:flex; align-items:center; justify-content:space-between; gap:clamp(24px,4vw,64px);
}
.phero__copy{min-width:0; flex:1 1 auto}
.phero h1{font-size:clamp(30px,4.2vw,52px); line-height:1.06; letter-spacing:-.026em; max-width:20ch}
.phero__lead{margin-top:var(--s4); color:var(--on-dark-2); max-width:56ch; font-size:clamp(15.5px,1.3vw,18px)}

/* ── Məhsul karuseli (kataloq başlığının sağında) ─────── */
.phero__show{
  position:relative; flex:0 0 auto;
  width:clamp(280px,33vw,480px); height:clamp(250px,28vw,410px);
}
.phero__glow{
  position:absolute; inset:0; margin:auto; pointer-events:none;
  width:86%; height:86%; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(47,125,60,.42) 0%, rgba(47,125,60,.14) 46%, transparent 72%);
  filter:blur(6px);
}
/* şəkil dəyişəndə işıq bir anlıq güclənir */
.phero__glow.is-pulse{animation:pglow 1.05s cubic-bezier(.2,.7,.2,1)}
@keyframes pglow{
  0%{transform:scale(.94); opacity:.7}
  38%{transform:scale(1.06); opacity:1}
  100%{transform:scale(1); opacity:1}
}
.phero__prod{
  position:absolute; inset:0; margin:auto;
  max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain;
  opacity:0;
  filter:drop-shadow(0 18px 26px rgba(4,10,7,.55));
  will-change:transform,opacity,filter;
}
.phero__prod.is-on{opacity:1}

/* ── Karuseldəki məhsulun məlumatı (solda) ────────────── */
/* Sətir sayı sabit saxlanılır — yoxsa hər şəkildə hero-nun hündürlüyü oynayır */
.pmeta{
  margin-top:clamp(18px,2.4vw,28px); padding-top:clamp(16px,2vw,22px);
  border-top:1px solid rgba(255,255,255,.16);
  max-width:44ch;
}
.pmeta__brand{
  display:block; font-size:12px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:#8ed49a;
}
.pmeta__brand[hidden]{display:none}
.pmeta__name{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
  margin-top:6px; height:calc(2 * 1.25em);
  font-size:clamp(17px,1.5vw,21px); font-weight:600; line-height:1.25; letter-spacing:-.012em;
}
.pmeta__txt{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
  margin-top:6px; height:calc(2 * 1.5em);
  font-size:14.5px; line-height:1.5; color:var(--on-dark-2);
}
.pmeta__link{
  display:inline-flex; align-items:center; gap:7px; margin-top:12px;
  font-size:14px; font-weight:600; color:#fff;
  border-bottom:1px solid rgba(255,255,255,.3); padding-bottom:2px;
  transition:border-color var(--t), gap var(--t);
}
.pmeta__link:hover{border-color:#fff; gap:11px}
.pmeta__link svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8}
/* şəkillə eyni anda soldan sürüşərək gəlir */
.pmeta.is-in>*{animation:pmetaIn .58s cubic-bezier(.16,.86,.26,1) both}
.pmeta.is-in>:nth-child(2){animation-delay:.05s}
.pmeta.is-in>:nth-child(3){animation-delay:.1s}
.pmeta.is-in>:nth-child(4){animation-delay:.15s}

/* ── Əl ilə keçid düymələri ── */
.pnav{display:flex; align-items:center; gap:10px; margin-top:clamp(16px,2vw,22px)}
.pnav__b{
  width:40px; height:40px; flex:0 0 auto; border-radius:50%;
  border:1px solid rgba(255,255,255,.34); background:rgba(255,255,255,.07); color:#fff;
  display:grid; place-items:center; cursor:pointer;
  transition:background var(--t), border-color var(--t), color var(--t);
}
.pnav__b:hover{background:#fff; border-color:#fff; color:var(--ink)}
.pnav__b svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.pnav__n{margin-left:4px; font-size:13px; color:var(--on-dark-3); font-variant-numeric:tabular-nums}
.pnav__n b{color:#fff; font-weight:600}
@keyframes pmetaIn{
  0%{opacity:0; transform:translateX(-26px)}
  100%{opacity:1; transform:none}
}
/* köhnə şəkil sola-yuxarı çəkilib əriyir, yenisi sağ-aşağıdan qalxır */
.phero__prod.is-out{animation:pshotOut .52s cubic-bezier(.55,0,.9,.35) forwards; z-index:1}
.phero__prod.is-in{animation:pshotIn .82s cubic-bezier(.18,.85,.28,1) .2s backwards; z-index:2}
@keyframes pshotOut{
  0%{opacity:1; transform:none; filter:drop-shadow(0 18px 26px rgba(4,10,7,.55))}
  55%{opacity:.34}
  100%{opacity:0; transform:translate(-9%,-22%) scale(.8); filter:blur(7px) drop-shadow(0 18px 26px rgba(4,10,7,.35))}
}
@keyframes pshotIn{
  0%{opacity:0; transform:translate(20%,38%) scale(.5); filter:blur(6px) drop-shadow(0 18px 26px rgba(4,10,7,.3))}
  45%{opacity:1; filter:blur(0) drop-shadow(0 18px 26px rgba(4,10,7,.5))}
  100%{opacity:1; transform:none; filter:drop-shadow(0 18px 26px rgba(4,10,7,.55))}
}

@media (max-width:900px){
  .phero__in{flex-direction:column; align-items:flex-start}
  .phero__show{
    width:min(100%,380px); height:250px;
    align-self:center; margin-top:var(--s5);
  }
  .pmeta{max-width:none}
  .pmeta__txt{-webkit-line-clamp:3; height:calc(3 * 1.5em)}
}
@media (prefers-reduced-motion:reduce){
  .phero__prod,.phero__glow,.pmeta.is-in>*{animation:none !important; transform:none}
}
.crumb{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:var(--s4); font-size:13.5px; color:var(--on-dark-3)}
.crumb a{transition:color var(--t)}
.crumb a:hover{color:#fff}
.crumb svg{width:14px; height:14px; opacity:.6}

/* ── Filtr paneli ─────────────────────────────────────── */
.shop{padding-block:var(--s7) var(--sec)}
.shop__bar{
  position:sticky; top:78px; z-index:40;
  background:#fff; border-bottom:1px solid var(--line);
  padding-block:var(--s4); margin-bottom:var(--s6);
}
@media (max-width:1023px){ .shop__bar{top:66px} }
.shop__row{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3)}
.chips{display:flex; flex-wrap:wrap; gap:6px; flex:1 1 auto}
.chip{
  display:inline-flex; align-items:center; gap:7px; min-height:40px; padding:0 15px;
  border:1px solid var(--line-2); border-radius:var(--r); background:#fff;
  font-size:14.5px; font-weight:500; color:var(--fg-2); cursor:pointer; white-space:nowrap;
  transition:background var(--t), color var(--t), border-color var(--t);
}
.chip:hover{border-color:var(--ink); color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:#fff}
.chip__n{font-size:12.5px; opacity:.6; font-variant-numeric:tabular-nums}
.shop__tools{display:flex; gap:var(--s2); flex:0 0 auto}
.search{position:relative; flex:0 0 auto}
.search input{
  width:230px; min-height:40px; padding:8px 14px 8px 38px;
  border:1px solid var(--line-2); border-radius:var(--r); font:inherit; font-size:14.5px;
  transition:border-color var(--t), box-shadow var(--t);
}
.search input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(47,125,60,.16)}
.search .ico{position:absolute; left:12px; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--fg-3); pointer-events:none}
.shop__tools .sel select{min-height:40px; padding-block:8px; font-size:14.5px; width:190px}
.shop__count{font-size:14px; color:var(--fg-3); margin-bottom:var(--s5)}
.shop__count b{color:var(--fg); font-weight:600; font-variant-numeric:tabular-nums}
@media (max-width:719px){
  .search input{width:100%}
  .search{flex:1 1 100%}
  .shop__tools{flex:1 1 100%}
  .shop__tools .sel{flex:1 1 auto}
  .shop__tools .sel select{width:100%}
}

/* ── Məhsul grid ──────────────────────────────────────── */
.pgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
.pgrid--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:1099px){ .pgrid,.pgrid--3{grid-template-columns:repeat(3,1fr)} }
@media (max-width:839px){ .pgrid,.pgrid--3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:479px){ .pgrid,.pgrid--3{grid-template-columns:1fr} }

.pcard{
  background:#fff; padding:var(--s4) var(--s4) var(--s5);
  display:flex; flex-direction:column; position:relative;
  transition:background var(--t);
}
.pcard:hover{background:var(--bg-2)}
.pcard__fig{
  position:relative; margin:0 0 var(--s4);
  aspect-ratio:1/1; background:#fff; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; padding:var(--s4); overflow:hidden;
}

/* Fotosu hələ əlavə olunmamış mövqelər — sınıq şəkil ikonu əvəzinə səliqəli
   boş nişan. Şəkil yüklənən kimi bu blok göstərilmir. */
.pfig-ph{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; color:var(--fg-3);
}
.pfig-ph svg{
  width:34%; max-width:56px; height:auto; aspect-ratio:1/1;
  fill:none; stroke:currentColor; stroke-width:1.2;
  stroke-linecap:round; stroke-linejoin:round; opacity:.42;
}
.pcard__fig img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; transition:transform 500ms cubic-bezier(.2,.7,.2,1)}
.pcard:hover .pcard__fig img{transform:scale(1.04)}
.pcard__fig--logo img{max-height:56px; opacity:.9}
.pcard__tag{
  position:absolute; left:0; top:0; z-index:2;
  background:var(--ink); color:#fff; font-size:11px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; padding:5px 10px;
}
.pcard__brand{font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--brand); margin-bottom:7px}
.pcard__name{font-size:16px; font-weight:600; line-height:1.3; letter-spacing:-.01em; margin-bottom:6px}
.pcard__spec{font-size:13.5px; color:var(--fg-3); line-height:1.45; margin-bottom:var(--s4)}
.pcard__foot{margin-top:auto; display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s3)}
.pcard__price{display:flex; flex-direction:column; line-height:1.15}
.pcard__price span{font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-3); margin-bottom:4px}
.pcard__price b{font-size:20px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.pcard__price em{font-style:normal; font-size:16px; font-weight:600; color:var(--fg-2)}
.pcard__add{
  --bh:42px; padding:0 16px; font-size:14px; background:var(--brand); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--bh); border:1px solid var(--brand); border-radius:var(--r);
  font-weight:600; cursor:pointer; flex:0 0 auto;
  transition:background var(--t), border-color var(--t);
}
.pcard__add:hover{background:var(--brand-d); border-color:var(--brand-d)}
.pcard__add .ico{width:17px; height:17px; stroke-width:1.9}
.pcard__add.is-in{background:var(--ink); border-color:var(--ink)}
.pcard__add.is-in:hover{background:var(--ink-3); border-color:var(--ink-3)}
.pempty{padding:var(--s8) var(--s5); text-align:center; border:1px solid var(--line); background:var(--bg-2)}
.pempty h3{font-size:20px; margin-bottom:8px}
.pempty p{color:var(--fg-2); font-size:15.5px; margin-bottom:var(--s5)}

/* ── Təklif səbəti (drawer) ───────────────────────────── */
.basket-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:44px; padding:0 15px; border:1px solid var(--line-2); background:#fff;
  border-radius:var(--r); font-size:14.5px; font-weight:600; cursor:pointer; white-space:nowrap;
  transition:border-color var(--t), background var(--t);
}
.basket-btn:hover{border-color:var(--ink)}
.basket-btn .ico{width:19px; height:19px}
.basket-btn__n{
  position:absolute; top:-7px; right:-7px; min-width:21px; height:21px; padding:0 5px;
  background:var(--brand); color:#fff; border-radius:11px;
  font-size:12px; font-weight:700; line-height:21px; text-align:center;
  font-variant-numeric:tabular-nums;
}
.basket-btn__n[hidden]{display:none}
@media (max-width:1023px){ .basket-btn__txt{display:none} .basket-btn{padding:0 12px} }

.drawer{
  position:fixed; inset:0 0 0 auto; width:min(460px,100vw); z-index:120;
  background:#fff; display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform var(--t-s);
  box-shadow:-24px 0 60px -30px rgba(12,17,20,.5);
}
.drawer.is-open{transform:none}
.drawer__head{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  padding:var(--s5) var(--s5) var(--s4); border-bottom:1px solid var(--line);
}
.drawer__head h2{font-size:20px}
.drawer__head p{font-size:13px; color:var(--fg-3); margin-top:3px}
.drawer__x{
  width:42px; height:42px; border:1px solid var(--line); background:#fff; border-radius:var(--r);
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex:0 0 auto;
  transition:background var(--t), border-color var(--t);
}
.drawer__x:hover{background:var(--bg-2); border-color:var(--line-2)}
.drawer__x svg{width:18px; height:18px}
.drawer__body{flex:1 1 auto; overflow-y:auto; padding:var(--s4) var(--s5)}
.drawer__foot{border-top:1px solid var(--line); padding:var(--s5); background:var(--bg-2)}
.drawer__sum{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:var(--s3); font-size:15px}
.drawer__sum b{font-size:22px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.drawer__note{font-size:12.5px; color:var(--fg-3); line-height:1.5; margin-top:var(--s3)}
.drawer__empty{text-align:center; padding:var(--s8) var(--s4); color:var(--fg-2)}
.drawer__empty .ico{width:40px; height:40px; color:var(--line-2); margin:0 auto var(--s4)}
.drawer__empty p{font-size:15px; margin-bottom:var(--s5)}

.bitem{display:grid; grid-template-columns:64px 1fr; gap:var(--s3); padding:var(--s4) 0; border-bottom:1px solid var(--line)}
.bitem__fig{width:64px; height:64px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; padding:6px; background:#fff}
.bitem__fig img{max-width:100%; max-height:100%; width:auto; object-fit:contain}
.bitem__brand{font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--brand)}
.bitem__name{font-size:14.5px; font-weight:600; line-height:1.32; margin:3px 0 8px}
.bitem__row{display:flex; align-items:center; justify-content:space-between; gap:var(--s3)}
.qty{display:inline-flex; align-items:center; border:1px solid var(--line-2); border-radius:var(--r); overflow:hidden}
.qty button{
  width:34px; height:34px; background:#fff; border:0; cursor:pointer; color:var(--fg-2);
  display:flex; align-items:center; justify-content:center; transition:background var(--t), color var(--t);
}
.qty button:hover{background:var(--bg-3); color:var(--ink)}
.qty svg{width:15px; height:15px; stroke-width:2}
.qty input{
  width:44px; height:34px; border:0; border-inline:1px solid var(--line-2);
  text-align:center; font:inherit; font-size:14.5px; font-weight:600;
  font-variant-numeric:tabular-nums; -moz-appearance:textfield;
}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.qty input:focus{outline:none; background:var(--brand-tint)}
.bitem__end{display:flex; align-items:center; gap:var(--s3)}
.bitem__price{font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap}
.bitem__price--ask{font-size:13.5px; font-weight:500; color:var(--fg-3)}
.bitem__rm{
  width:34px; height:34px; border:1px solid transparent; background:none; border-radius:var(--r);
  cursor:pointer; color:var(--fg-3); display:flex; align-items:center; justify-content:center;
  transition:color var(--t), background var(--t);
}
.bitem__rm:hover{color:var(--danger); background:#FBEDED}
.bitem__rm svg{width:16px; height:16px}

.toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px); z-index:130;
  background:var(--ink); color:#fff; padding:13px 20px; border-radius:var(--r);
  font-size:14.5px; font-weight:500; display:flex; align-items:center; gap:10px;
  opacity:0; pointer-events:none; transition:opacity var(--t-s), transform var(--t-s);
  box-shadow:0 18px 40px -18px rgba(5,45,32,.6); max-width:calc(100vw - 32px);
}
.toast.is-on{opacity:1; transform:translate(-50%,0)}
.toast .ico{color:#7FD08C; stroke-width:2.2; width:18px; height:18px}

/* ── Kataloq kartları ─────────────────────────────────── */
.cats{padding-block:var(--sec)}
.cgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
@media (max-width:939px){ .cgrid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:559px){ .cgrid{grid-template-columns:1fr} }
.ccard{background:#fff; padding:clamp(22px,2.4vw,32px); display:flex; flex-direction:column; transition:background var(--t)}
.ccard:hover{background:var(--bg-2)}
.ccard__logo{height:44px; display:flex; align-items:center; margin-bottom:var(--s5)}
.ccard__logo img{max-height:38px; width:auto; object-fit:contain}
.ccard h3{font-size:19px; margin-bottom:8px}
.ccard p{font-size:14.5px; color:var(--fg-2); margin-bottom:var(--s5); max-width:36ch}
.ccard__meta{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:var(--s5)}
.ccard__meta span{
  font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--fg-3); background:var(--bg-3); padding:5px 9px; border-radius:2px;
}
.ccard__act{margin-top:auto; display:flex; flex-wrap:wrap; gap:var(--s2)}
.ccard__act .btn{--bh:42px; font-size:14px; padding:0 16px}

/* ── Kateqoriya lövhələri (ana səhifə) ────────────────── */
.catrow{padding-block:var(--sec); background:var(--bg-2); border-top:1px solid var(--line)}
.catrow__grid{display:grid; grid-template-columns:repeat(6,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
@media (max-width:1023px){ .catrow__grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:559px){ .catrow__grid{grid-template-columns:repeat(2,1fr)} }
.ctile{
  background:#fff; padding:var(--s5) var(--s4);
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--s3);
  transition:background var(--t);
}
.ctile:hover{background:var(--brand-tint)}
.ctile__fig{height:88px; display:flex; align-items:center; justify-content:center; width:100%}
.ctile__fig img{max-height:88px; max-width:100%; width:auto; object-fit:contain; transition:transform 500ms cubic-bezier(.2,.7,.2,1)}
.ctile:hover .ctile__fig img{transform:scale(1.06)}
.ctile b{font-size:15px; font-weight:600; line-height:1.3; letter-spacing:-.01em}
.ctile span{font-size:12.5px; color:var(--fg-3); font-variant-numeric:tabular-nums}

/* ── Referans grid ────────────────────────────────────── */
.refs{padding-block:var(--sec)}
.rgrid{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
@media (max-width:1023px){ .rgrid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:559px){ .rgrid{grid-template-columns:repeat(2,1fr)} }
.rgrid li{background:#fff; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; padding:var(--s5); transition:background var(--t)}
.rgrid li:hover{background:var(--bg-2)}
.rgrid img{max-width:100%; max-height:74px; width:auto; object-fit:contain; filter:grayscale(1); opacity:.66; transition:filter var(--t-s), opacity var(--t-s)}
.rgrid li:hover img{filter:none; opacity:1}

/* ── Sadə mətn blokları (haqqımızda / əlaqə) ──────────── */
.prose{padding-block:var(--sec)}
.prose__grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,80px); align-items:start}
@media (max-width:939px){ .prose__grid{grid-template-columns:1fr} }
.prose p{color:var(--fg-2); margin-bottom:var(--s4); max-width:60ch}
.prose h3{font-size:21px; margin:var(--s6) 0 var(--s3)}
.prose__aside{background:var(--bg-2); border:1px solid var(--line); padding:clamp(22px,2.4vw,32px)}
/* Blok ana səhifədə də işlədilir — orada `.prose` qaydaları düşmür, ona görə
   başlıq və bənd aralığı burada, blokun öz adına bağlanıb. */
.prose__aside h3{margin:0 0 var(--s3); font-size:21px}
.prose__aside p{color:var(--fg-2); margin-bottom:var(--s4); max-width:60ch}
.prose__aside p:last-child{margin-bottom:0}
.mapwrap{border:1px solid var(--line); aspect-ratio:16/10; overflow:hidden; background:var(--bg-3)}
.mapwrap iframe{width:100%; height:100%; border:0; display:block; filter:grayscale(1) contrast(1.05)}

/* ── Scroll reveal ────────────────────────────────────── */
.rv{opacity:0; transform:translateY(20px)}
.rv.in{opacity:1; transform:none; transition:opacity 620ms cubic-bezier(.2,.7,.2,1), transform 620ms cubic-bezier(.2,.7,.2,1)}

/* ── Reduced motion ───────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .rv{opacity:1; transform:none}
  .hero__slide{transition:none}
}

/* ══ Language switcher (AZ / EN / TR / AR) ══════════════ */
.langsel{position:relative}
.langsel__btn{
  display:inline-flex; align-items:center; gap:6px; height:42px; padding:0 11px;
  background:none; border:1px solid var(--line); border-radius:var(--r);
  cursor:pointer; font:inherit; font-size:14px; font-weight:600; color:var(--ink);
  transition:border-color var(--t), background var(--t);
}
.langsel__btn:hover{border-color:var(--brand)}
.langsel__btn .ico{width:18px; height:18px; color:var(--brand); flex:0 0 auto}
.langsel__cur{letter-spacing:.04em}
.langsel__chev{width:15px; height:15px; transition:transform var(--t-s)}
.langsel.is-open .langsel__chev{transform:rotate(180deg)}
.langsel__menu{
  position:absolute; top:calc(100% + 8px); right:0; min-width:158px;
  margin:0; padding:6px; list-style:none; background:#fff;
  border:1px solid var(--line); border-radius:var(--r);
  box-shadow:0 16px 36px -14px rgba(12,17,20,.34);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity var(--t-s), transform var(--t-s), visibility var(--t-s); z-index:120;
}
.langsel.is-open .langsel__menu{opacity:1; visibility:visible; transform:none}
.langsel__opt{
  display:flex; align-items:center; min-height:40px; padding:0 12px;
  border-radius:8px; font-size:14.5px; color:var(--fg); cursor:pointer;
  transition:background var(--t), color var(--t);
}
.langsel__opt:hover{background:var(--bg-2)}
.langsel__opt[aria-selected="true"]{color:var(--brand); font-weight:600; background:var(--brand-tint)}
@media (max-width:1023px){ .langsel__btn{height:40px; padding:0 9px} }

/* ══ RTL (Arabic) ══════════════════════════════════════ */
[dir="rtl"]{text-align:right}
[dir="rtl"] .langsel__menu{right:auto; left:0}
[dir="rtl"] .link-arrow .ico,[dir="rtl"] .btn .ico,[dir="rtl"] .about__card .ico{transform:scaleX(-1)}
[dir="rtl"] .fld.is-bad input,[dir="rtl"] .err{direction:rtl}
[dir="rtl"] .form,[dir="rtl"] input,[dir="rtl"] textarea,[dir="rtl"] select{text-align:right}
/* Menyu çekmecesi yalnız mobil ölçüdə mövcuddur — bu qaydalar da yalnız orada
   işləməlidir, yoxsa masaüstündə naviqasiya ekrandan kənara sürüşür. */
@media (max-width:1023px){
  [dir="rtl"] .nav{inset:0 auto 0 0; border-left:0; border-right:1px solid var(--line); transform:translateX(-100%)}
  [dir="rtl"] .nav.is-open{transform:none}
}

/* ══ Certificates page ═════════════════════════════════ */
.pagehero{background:var(--ink); color:#fff; padding-block:clamp(44px,6vw,84px)}
.pagehero .h2{color:#fff; margin:8px 0 14px; max-width:22ch}
.pagehero .lead{color:var(--on-dark-2); max-width:60ch}
.certs{padding-block:var(--sec)}
.certs__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s5)}
.certcard{
  display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  transition:box-shadow var(--t), transform var(--t), border-color var(--t);
}
.certcard:hover{transform:translateY(-3px); border-color:var(--line-2); box-shadow:0 18px 36px -20px rgba(12,17,20,.34)}
.certcard__fig{aspect-ratio:3/4; background:var(--bg-2); display:flex; align-items:center; justify-content:center; padding:16px}
.certcard__fig img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; box-shadow:0 3px 14px -6px rgba(12,17,20,.4)}
.certcard__cap{padding:12px 14px; font-size:13px; font-weight:600; color:var(--fg-2); border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:8px}
.certcard__cap .ico{width:15px; height:15px; color:var(--brand); opacity:0; transition:opacity var(--t)}
.certcard:hover .certcard__cap .ico{opacity:1}
@media (max-width:1023px){ .certs__grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:719px){ .certs__grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:439px){ .certs__grid{grid-template-columns:1fr} }
/* Qeyd: bu blokların hamısı sadə `display:flex` (row) idi — `dir=rtl` sırasını
   onsuz da çevirir. Əvvəl əlavə edilmiş `flex-direction:row-reverse` qaydaları
   düzümü ikinci dəfə çevirib LTR-ə qaytarırdı, ona görə silinib. */

/* ═══════════════════════════════════════════════════════════
   MƏHSUL SƏHİFƏSİ (mehsul.html)
   ═══════════════════════════════════════════════════════════ */
.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 üzərində ətraflı keçidi */
.pcard__hit{position:absolute; inset:0; z-index:1}
.pcard__fig,.pcard__brand,.pcard__name,.pcard__spec,.pcard__more,.pcard__foot{position:relative}
.pcard__foot{z-index:2}
.pcard__more{
  font-size:12.5px; font-weight:600; letter-spacing:.02em; color:var(--brand);
  display:flex; align-items:center; gap:7px; margin-bottom:var(--s4);
  opacity:0; transform:translateY(-4px); transition:opacity var(--t), transform var(--t);
}
.pcard__more svg{width:15px; height:15px; stroke-width:2}
.pcard:hover .pcard__more,.pcard:focus-within .pcard__more{opacity:1; transform:none}
@media (hover:none){ .pcard__more{opacity:1; transform:none} }
.pcard__hit:focus-visible{outline:2px solid var(--brand); outline-offset:-4px}

.pdp__load{padding-block:var(--s9)}
.pdp__load>p{color:var(--fg-3)}

/* ── Baş hissə ── */
.pdp__head{background:var(--bg-2); border-bottom:1px solid var(--line); padding-block:var(--s5) clamp(38px,5vw,64px)}
.crumb--ink{color:var(--fg-3)}
.crumb--ink a:hover{color:var(--brand)}
.crumb--ink svg{opacity:.45}
.crumb--ink span{color:var(--fg)}

.pdp__top{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); gap:clamp(24px,3.6vw,56px); align-items:start}
.pdp__fig{
  position:relative; margin:0; background:#fff; border:1px solid var(--line);
  aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  padding:clamp(20px,3vw,46px); overflow:hidden;
}
.pdp__fig img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain}
.pdp__fig--logo img{max-height:120px}
.pdp__fignote{margin-top:var(--s3); font-size:12.5px; color:var(--fg-3)}

.pdp__brand{font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--brand); margin-bottom:10px}
.pdp__title{font-size:clamp(25px,3vw,38px); line-height:1.1; letter-spacing:-.022em}
.pdp__lead{margin-top:12px; color:var(--fg-2); font-size:16.5px}

.pdp__pricebox{margin-top:var(--s5); padding:var(--s4) var(--s5); background:#fff; border:1px solid var(--line)}
.pdp__price{display:flex; flex-direction:column; line-height:1.1}
.pdp__price span{font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-3); margin-bottom:6px}
.pdp__price b{font-size:32px; font-weight:600; letter-spacing:-.028em; font-variant-numeric:tabular-nums}
.pdp__price em{font-style:normal; font-size:24px; font-weight:600; color:var(--fg-2)}
.pdp__pricenote{margin-top:10px; font-size:13.5px; color:var(--fg-3); line-height:1.5; max-width:52ch}

.pdp__buy{display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s5)}
.pdp__buy--alt{margin-top:var(--s3)}
.pdp__buy .btn{flex:1 1 auto}
.qty--lg button{width:44px; height:54px}
.qty--lg input{width:56px; height:54px; font-size:16px}
.pdp__add .ico{width:19px; height:19px; stroke-width:1.9}
.pdp__outline{background:#fff; color:var(--ink); border-color:var(--line-2)}
.pdp__outline:hover{border-color:var(--ink); background:var(--bg-3)}

.pdp__meta{margin-top:var(--s5); border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(2,1fr)}
.pdp__meta li{padding:12px 0; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:2px; padding-right:var(--s4)}
.pdp__meta span{font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-3)}
.pdp__meta b{font-size:14.5px; font-weight:600}
.pdp__meta a:hover{color:var(--brand)}

.pdp__feat{margin-top:var(--s5); display:grid; gap:10px}
.pdp__feat li{display:flex; gap:10px; align-items:flex-start; font-size:15px; color:var(--fg-2)}
.pdp__feat .ico{width:19px; height:19px; color:var(--brand); stroke-width:2.2; margin-top:3px}

/* ── Tablar ── */
.pdp__detail{padding-block:clamp(38px,4.6vw,72px)}
.pdp__tabs{display:flex; gap:2px; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none}
.pdp__tabs::-webkit-scrollbar{display:none}
.pdp__tab{
  background:none; border:0; border-bottom:2px solid transparent; cursor:pointer;
  padding:14px 20px; font-size:15px; font-weight:600; color:var(--fg-3); white-space:nowrap;
  transition:color var(--t), border-color var(--t);
}
.pdp__tab:hover{color:var(--ink)}
.pdp__tab.is-on{color:var(--ink); border-bottom-color:var(--brand)}

.pdp__panel{display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:clamp(24px,3.4vw,52px); padding-top:clamp(26px,3.2vw,44px)}
.pdp__panel[hidden]{display:none}
.pdp__prose h2{font-size:clamp(21px,2.2vw,28px); margin-bottom:var(--s4)}
.pdp__prose p{color:var(--fg-2); font-size:16px; margin-bottom:var(--s4)}
.pdp__prose p:last-child{margin-bottom:0}
.pdp__prose b{color:var(--fg); font-weight:600}

.pdp__aside{background:var(--bg-2); border:1px solid var(--line); padding:var(--s5); align-self:start}
.pdp__aside h3{font-size:17px; margin-bottom:var(--s4)}
.pdp__aside p{font-size:14.5px; color:var(--fg-2); margin-bottom:var(--s4)}
.pdp__aside ul{margin-bottom:var(--s5)}
.pdp__aside ul li{padding:10px 0; border-bottom:1px solid var(--line); font-size:14.5px; display:flex; flex-direction:column; gap:2px}
.pdp__aside ul li span{font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-3)}

.pdp__tablewrap{overflow-x:auto}
.ptable{width:100%; border-collapse:collapse; font-size:15px}
.ptable th,.ptable td{text-align:left; padding:13px var(--s4); border-bottom:1px solid var(--line); vertical-align:top}
.ptable th{width:38%; font-weight:600; color:var(--fg); background:var(--bg-2); white-space:nowrap}
.ptable td{color:var(--fg-2)}
.ptable tr:first-child th,.ptable tr:first-child td{border-top:1px solid var(--line)}
.pdp__note{margin-top:var(--s4); font-size:13.5px; color:var(--fg-3); line-height:1.55; border-left:2px solid var(--brand); padding-left:14px}
.pdp__cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:var(--s5)}
.pdp__minicard{background:#fff; padding:var(--s4)}
.pdp__minicard h4{font-size:15px; margin-bottom:6px}
.pdp__minicard p{font-size:13.5px; color:var(--fg-3); line-height:1.5}

.pdp__uses{display:grid; gap:10px; margin-bottom:var(--s5)}
.pdp__uses li{display:flex; gap:10px; align-items:flex-start; font-size:15.5px; color:var(--fg-2)}
.pdp__uses .ico{width:19px; height:19px; color:var(--brand); stroke-width:2.2; margin-top:3px}

.pdp__docs{margin-bottom:var(--s5); border-top:1px solid var(--line)}
.pdp__docs li{display:flex; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); font-size:15px}
.pdp__docs .ico{color:var(--brand)}
.pdp__docs span{flex:1 1 auto}
.pdp__docs a{font-size:13.5px; font-weight:600; color:var(--brand); border-bottom:1px solid currentColor; padding-bottom:1px}
.pdp__docs a:hover{color:var(--ink)}

.pdp__rel{padding-block:0 clamp(48px,6vw,96px)}
.pdp__rel .sec-head{margin-bottom:var(--s5)}

@media (max-width:959px){
  .pdp__top{grid-template-columns:1fr}
  .pdp__panel{grid-template-columns:1fr}
  .pdp__cards{grid-template-columns:1fr}
}
@media (max-width:559px){
  .pdp__meta{grid-template-columns:1fr}
  .pdp__buy .btn{flex:1 1 100%}
  .pdp__price b{font-size:27px}
}
[dir="rtl"] .pdp__meta li{padding-right:0; padding-left:var(--s4)}
[dir="rtl"] .ptable th,[dir="rtl"] .ptable td{text-align:right}
[dir="rtl"] .pdp__note{border-left:0; border-right:2px solid var(--brand); padding-left:0; padding-right:14px}
.pdp__panel--full{grid-template-columns:minmax(0,1fr)}
.pdp__panel--full .pdp__tablewrap{max-width:900px}

/* ═══════════════════════════════════════════════════════════
   KATALOQ — sol filtr paneli + alət sətri (mehsullar.html)
   ═══════════════════════════════════════════════════════════ */
.shop{padding-block:clamp(28px,3.4vw,48px) clamp(48px,6vw,90px)}
.shop__layout{display:grid; grid-template-columns:264px minmax(0,1fr); gap:clamp(20px,2.4vw,34px); align-items:start}

.fbtn{
  display:none; align-items:center; gap:9px; min-height:46px; padding:0 18px;
  border:1px solid var(--line-2); background:#fff; border-radius:var(--r);
  font-size:15px; font-weight:600; cursor:pointer;
}
.fbtn__n{
  min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:var(--brand); color:#fff;
  font-size:12px; font-weight:600; display:inline-flex; align-items:center; justify-content:center;
}

.fside{position:sticky; top:92px; border:1px solid var(--line); background:#fff}
.fside__head{display:none; align-items:center; justify-content:space-between; padding:var(--s4) var(--s5); border-bottom:1px solid var(--line)}
.fside__head h2{font-size:19px}
.fside__x{width:40px; height:40px; border:1px solid var(--line); background:#fff; border-radius:var(--r); cursor:pointer; display:flex; align-items:center; justify-content:center}
.fside__x svg{width:18px; height:18px}

.fgrp{padding:var(--s5) var(--s4); border-bottom:1px solid var(--line)}
.fgrp__t{font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-3); margin-bottom:var(--s3)}

.fcat{display:grid; gap:2px}
.fcat__b{
  width:100%; display:flex; align-items:center; gap:10px; padding:9px 11px;
  border:0; background:none; border-radius:var(--r); cursor:pointer; text-align:left;
  font-size:14.5px; color:var(--fg-2); transition:background var(--t), color var(--t);
}
.fcat__b .ico{width:18px; height:18px; color:var(--fg-3); stroke-width:1.5; transition:color var(--t)}
.fcat__b span{flex:1 1 auto; line-height:1.3}
.fcat__b b{font-size:12.5px; font-weight:600; color:var(--fg-3); font-variant-numeric:tabular-nums}
.fcat__b:hover{background:var(--bg-2); color:var(--ink)}
.fcat__b.is-on{background:var(--brand-tint); color:var(--ink); font-weight:600}
.fcat__b.is-on .ico{color:var(--brand)}
.fcat__b.is-on b{color:var(--brand-d)}

.fbox{display:grid; gap:1px}
.fbox li.is-extra{display:none}
.fbox.is-open li.is-extra{display:block}
.fchk{display:flex; align-items:center; gap:10px; padding:7px 11px; border-radius:var(--r); cursor:pointer; font-size:14.5px; color:var(--fg-2); transition:background var(--t)}
.fchk:hover{background:var(--bg-2)}
.fchk input{width:17px; height:17px; margin:0; accent-color:var(--brand); cursor:pointer; flex:0 0 auto}
.fchk span{flex:1 1 auto; line-height:1.3}
.fchk b{font-size:12.5px; font-weight:600; color:var(--fg-3); font-variant-numeric:tabular-nums}
.fchk input:checked + span{color:var(--ink); font-weight:600}

.fmore{
  display:inline-flex; align-items:center; gap:6px; margin:10px 0 0 11px; padding:0;
  border:0; background:none; cursor:pointer; font-size:13.5px; font-weight:600; color:var(--brand-d);
}
.fmore svg{width:15px; height:15px; stroke-width:2; transition:transform var(--t)}
.fmore.is-open svg{transform:rotate(180deg)}
.fmore:hover{color:var(--ink)}

.fclear{
  width:100%; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:14px; border:0; background:none; cursor:pointer;
  font-size:14px; font-weight:600; color:var(--fg-2); transition:color var(--t), background var(--t);
}
.fclear .ico{width:15px; height:15px; stroke-width:2}
.fclear:hover{color:var(--danger); background:var(--bg-2)}

/* ── Alət sətri ── */
.shop__tools{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2);
  padding-bottom:var(--s4); border-bottom:1px solid var(--line);
}
.viewsw{display:flex; border:1px solid var(--line-2); border-radius:var(--r); overflow:hidden; flex:0 0 auto}
.viewsw__b{
  width:44px; height:44px; border:0; background:#fff; cursor:pointer; color:var(--fg-3);
  display:flex; align-items:center; justify-content:center; transition:background var(--t), color var(--t);
}
.viewsw__b + .viewsw__b{border-left:1px solid var(--line-2)}
.viewsw__b svg{width:18px; height:18px}
.viewsw__b:hover{background:var(--bg-2); color:var(--ink)}
/* Aktiv görünüş düyməsi «Sorğu göndər» düyməsinin hover rəngindədir */
.viewsw__b.is-on{background:var(--brand-d); color:#fff}
.viewsw__b.is-on:hover{background:var(--brand-d); color:#fff}
.shop__tools .search{flex:1 1 260px; min-width:200px}
.sellbl{font-size:13.5px; color:var(--fg-3); margin-left:auto; flex:0 0 auto}
.shop__tools .sel select{min-height:44px; padding-block:9px; font-size:14.5px; width:190px}
.shop__tools .sel--sm select{width:96px}

.shop__meta{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3); padding-block:var(--s4) var(--s5)}
.shop__count{font-size:14px; color:var(--fg-3); margin:0}
.shop__count b{color:var(--fg); font-weight:600; font-variant-numeric:tabular-nums}
.ftags{display:flex; flex-wrap:wrap; gap:8px}
.ftag{
  display:inline-flex; align-items:center; gap:7px; padding:5px 10px;
  border:1px solid var(--line-2); background:var(--bg-2); border-radius:100px;
  font-size:13px; font-weight:600; cursor:pointer; transition:border-color var(--t), color var(--t);
}
.ftag svg{width:13px; height:13px; stroke-width:2.2; color:var(--fg-3)}
.ftag:hover{border-color:var(--ink)}
.ftag:hover svg{color:var(--danger)}

.pmore{display:flex; justify-content:center; padding-top:var(--s6)}

/* ── Kart içi yeniliklər ── */
.pcard{padding:0}
.pcard__body{display:flex; flex-direction:column; flex:1 1 auto; padding:0 var(--s4) var(--s4)}
.pcard__fig{margin:var(--s4) var(--s4) var(--s4); aspect-ratio:4/3}
.pcard__specs{display:grid; gap:5px; margin-bottom:var(--s3)}
.pcard__specs li{display:flex; gap:7px; align-items:flex-start; font-size:13px; color:var(--fg-3); line-height:1.4}
.pcard__specs svg{width:14px; height:14px; stroke-width:2.4; color:var(--brand); margin-top:3px; flex:0 0 auto}
.pcard__specs span{overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical}
.pcard__stock{display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600; margin-bottom:var(--s4)}
.pcard__stock svg{width:15px; height:15px; stroke-width:1.8}
.pcard__stock.is-in{color:var(--brand-d)}
.pcard__stock.is-order{color:#B67209}
.pcard__foot{margin-top:auto; display:grid; grid-template-columns:1fr; gap:10px; align-items:stretch}
.pcard__price{
  flex-direction:row; align-items:baseline; gap:10px; justify-content:space-between;
  padding-top:11px; border-top:1px solid var(--line);
}
.pcard__price span{
  margin-bottom:0; text-transform:none; letter-spacing:0;
  font-size:13px; font-weight:500; color:var(--fg-3);
}
.pcard__price b{font-size:19px; margin-left:auto}
/* 1fr = minmax(auto,1fr): mətni qoruyur, kəsilməyə qoymur */
.pcard__acts{display:grid; grid-template-columns:1fr 1fr; gap:8px; align-items:stretch}
.pcard__acts .ico{display:none}
.pcard__acts>*{white-space:nowrap}
.pcard__tech{
  display:flex; align-items:center; justify-content:center; min-height:40px; padding:0 8px;
  border:1px solid var(--line-2); border-radius:var(--r); background:#fff;
  font-size:12.5px; font-weight:600; color:var(--fg-2); position:relative; z-index:2;
  transition:border-color var(--t), color var(--t);
}
.pcard__tech:hover{border-color:var(--ink); color:var(--ink)}
.pcard__add{width:100%; --bh:40px; padding:0 8px; font-size:12.5px; gap:0; background:var(--brand); border-color:var(--brand)}
.pcard__add:hover{background:var(--brand-d); border-color:var(--brand-d)}

/* manat işarəsi Barlow-da yoxdur — qlif olan şrifti açıq göstər */
.cur{font-family:"Segoe UI",-apple-system,"Noto Sans",Arial,sans-serif; font-weight:600}

/* ── Siyahı görünüşü ── */
.pgrid--list{grid-template-columns:1fr}
.pgrid--list .pcard{display:grid; grid-template-columns:190px minmax(0,1fr); align-items:center}
.pgrid--list .pcard__fig{aspect-ratio:1/1; margin:var(--s4)}
.pgrid--list .pcard__body{padding:var(--s4) var(--s5) var(--s4) 0; display:grid; grid-template-columns:minmax(0,1fr) 240px; grid-template-areas:"brand actions" "name actions" "specs actions" "stock actions"; column-gap:var(--s5); align-content:center}
.pgrid--list .pcard__brand{grid-area:brand; margin-bottom:4px}
.pgrid--list .pcard__name{grid-area:name; font-size:18px}
.pgrid--list .pcard__specs{grid-area:specs; margin-top:8px}
.pgrid--list .pcard__stock{grid-area:stock; margin:10px 0 0}
.pgrid--list .pcard__foot{grid-area:actions; align-self:center; margin:0}
.pgrid--list .pcard__acts{grid-template-columns:1fr}
@media (max-width:719px){
  .pgrid--list .pcard{grid-template-columns:1fr}
  .pgrid--list .pcard__body{grid-template-columns:1fr; grid-template-areas:"brand" "name" "specs" "stock" "actions"; padding:0 var(--s4) var(--s4)}
  .pgrid--list .pcard__foot{margin-top:var(--s4)}
}

/* ── Mobil filtr paneli ── */
@media (max-width:1023px){
  .shop__layout{grid-template-columns:1fr}
  .fbtn{display:inline-flex}
  .fside{
    /* pərdə (99) və başlıq (100) üstündə olmalıdır — aşağı z-index panelin
       üzərinə qaranlıq pərdə salırdı və bütün filtr solğun görünürdü */
    position:fixed; inset:0 auto 0 0; width:min(340px,88vw); z-index:110;
    transform:translateX(-102%); transition:transform var(--t-s); overflow-y:auto; border:0;
    box-shadow:0 0 60px -10px rgba(12,17,20,.4);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .fside.is-open{transform:none}
  .fside__head{display:flex; position:sticky; top:0; background:#fff; z-index:2}
  .sellbl{margin-left:0}
  .shop__tools .search{flex:1 1 100%; order:-1}
}
@media (max-width:559px){
  .shop__tools .sel select,.shop__tools .sel--sm select{width:100%}
  .shop__tools .sel{flex:1 1 auto}
}
@media (max-width:1023px){
  [dir="rtl"] .fside{inset:0 0 0 auto; transform:translateX(102%)}
  [dir="rtl"] .fside.is-open{transform:none}
}
[dir="rtl"] .fcat__b{text-align:right}
@media (max-width:1319px){ .shop__main .pgrid:not(.pgrid--list){grid-template-columns:repeat(3,1fr)} }
@media (max-width:899px){ .shop__main .pgrid:not(.pgrid--list){grid-template-columns:repeat(2,1fr)} }
@media (max-width:479px){ .shop__main .pgrid:not(.pgrid--list){grid-template-columns:1fr} }

/* ═══════════════════════════════════════════════════════════
   OXUNAQLILIQ — kataloqda daha iri yazı, daha geniş sahə
   ═══════════════════════════════════════════════════════════ */
.shop__layout{max-width:1520px; grid-template-columns:304px minmax(0,1fr); gap:clamp(22px,2.6vw,40px)}

/* sol panel */
.fgrp{padding:var(--s5)}
.fgrp__t{font-size:13px; letter-spacing:.16em; margin-bottom:var(--s4)}
.fcat{gap:3px}
.fcat__b{padding:12px 13px; font-size:16px; gap:12px}
.fcat__b .ico{width:21px; height:21px}
.fcat__b b{font-size:14px}
.fchk{padding:10px 13px; font-size:15.5px; gap:12px}
.fchk input{width:19px; height:19px}
.fchk b{font-size:14px}
.fmore{font-size:15px; margin-left:13px}
.fmore svg{width:17px; height:17px}
.fclear{padding:17px; font-size:15px}
.fclear .ico{width:17px; height:17px}
.fside__head h2{font-size:21px}

/* alət sətri */
.shop__tools{gap:var(--s3); padding-bottom:var(--s5)}
.viewsw__b{width:50px; height:50px}
.viewsw__b svg{width:20px; height:20px}
.shop__tools .search input{min-height:50px; font-size:16px}
.shop__tools .search .ico{width:21px; height:21px}
.shop__tools .sel select{min-height:50px; font-size:15.5px; width:210px}
.shop__tools .sel--sm select{width:110px}
.sellbl{font-size:15px}
.shop__count{font-size:15.5px}
.ftag{padding:7px 13px; font-size:14px}

/* kartlar */
.pgrid, .shop__main .pgrid:not(.pgrid--list){grid-template-columns:repeat(3,1fr)}
@media (min-width:1600px){ .shop__main .pgrid:not(.pgrid--list){grid-template-columns:repeat(4,1fr)} }
@media (max-width:899px){ .pgrid, .shop__main .pgrid:not(.pgrid--list){grid-template-columns:repeat(2,1fr)} }
@media (max-width:519px){ .pgrid, .shop__main .pgrid:not(.pgrid--list){grid-template-columns:1fr} }

.pcard__body{padding:0 var(--s5) var(--s5)}
.pcard__fig{margin:var(--s5) var(--s5) var(--s4)}
.pcard__brand{font-size:12.5px; letter-spacing:.15em; margin-bottom:9px}
.pcard__name{font-size:18.5px; line-height:1.28; margin-bottom:12px}
.pcard__specs{gap:7px; margin-bottom:var(--s4)}
.pcard__specs li{font-size:14.5px; line-height:1.45; color:var(--fg-2)}
.pcard__specs svg{width:16px; height:16px; margin-top:4px}
.pcard__specs span{-webkit-line-clamp:2}
.pcard__stock{font-size:14.5px; margin-bottom:var(--s5)}
.pcard__stock svg{width:17px; height:17px}
.pcard__foot{gap:11px}
.pcard__price span{font-size:13.5px}
.pcard__price b{font-size:22px}
.pcard__price em{font-size:17px}
.pcard__tech{min-height:44px; font-size:13px}
.pcard__add{--bh:44px; font-size:13px}

/* siyahı görünüşü də iri */
.pgrid--list .pcard{grid-template-columns:230px minmax(0,1fr)}
.pgrid--list .pcard__name{font-size:20px}
.pgrid--list .pcard__body{grid-template-columns:minmax(0,1fr) 270px}

@media (max-width:1023px){
  .shop__layout{grid-template-columns:1fr}
  .fbtn{min-height:52px; font-size:16px}
}
.fgrp{padding:var(--s5) var(--s4)}
.fcat__b{padding:12px 11px; gap:11px}
.fchk{padding:10px 11px; gap:11px}
.fmore{margin-left:11px}

/* ── Görünüş düzəlişi: sütun qaydaları yalnız kart görünüşünə ── */
.pgrid:not(.pgrid--list){grid-template-columns:repeat(3,1fr)}
@media (min-width:1600px){ .shop__main .pgrid:not(.pgrid--list){grid-template-columns:repeat(4,1fr)} }
@media (max-width:899px){ .pgrid:not(.pgrid--list){grid-template-columns:repeat(2,1fr)} }
@media (max-width:519px){ .pgrid:not(.pgrid--list){grid-template-columns:1fr} }
.pgrid--list{grid-template-columns:minmax(0,1fr)}
.pgrid--list .pcard{grid-template-columns:230px minmax(0,1fr)}
@media (max-width:719px){ .pgrid--list .pcard{grid-template-columns:minmax(0,1fr)} }

/* ── Sol panel: ekrana sığmadıqda öz daxilində sürüşsün ── */
@media (min-width:1024px){
  .fside{max-height:calc(100vh - 116px); overflow-y:auto; overscroll-behavior:contain}
  .fside::-webkit-scrollbar{width:8px}
  .fside::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:8px}
  .fside::-webkit-scrollbar-track{background:transparent}
}

/* ═══════════════════════════════════════════════════════════
   MƏHSUL SƏHİFƏSİ v2 — bandlı struktur (Point tipli)
   ═══════════════════════════════════════════════════════════ */
.pdp__crumbbar{background:var(--bg-2); border-bottom:1px solid var(--line); padding-block:var(--s4)}
.pdp__crumbbar .crumb{margin-bottom:0}

.pdp__hero{padding-block:clamp(30px,3.8vw,58px)}
.pdp__hero-in{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.78fr) minmax(0,1.02fr); gap:clamp(24px,3vw,48px); align-items:start}

.pdp__cinfo .pdp__brand{font-size:12.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--brand); margin-bottom:10px}
.pdp__title{font-size:clamp(26px,3.1vw,40px); line-height:1.08; letter-spacing:-.024em}
.pdp__rule{display:block; width:130px; height:5px; background:var(--line-2); margin:var(--s4) 0 var(--s5)}
.pdp__bullets{display:grid; gap:11px; margin-bottom:var(--s5)}
.pdp__bullets li{position:relative; padding-left:20px; font-size:16px; line-height:1.5; color:var(--fg-2)}
.pdp__bullets li::before{content:""; position:absolute; left:2px; top:10px; width:7px; height:7px; border-radius:50%; background:var(--brand)}
.pdp__certlink{display:inline-flex; align-items:center; gap:9px; font-size:14.5px; font-weight:600; color:var(--fg-2); border-bottom:1px solid var(--line-2); padding-bottom:5px}
.pdp__certlink .ico{color:var(--brand)}
.pdp__certlink:hover{color:var(--ink); border-color:var(--ink)}

/* orta lövhə — enerji etiketinin yerini tutur */
.splate{border:2px solid var(--ink); background:#fff}
.splate__top{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px var(--s4); background:var(--ink); color:#fff}
.splate__brand{font-size:14px; font-weight:600; letter-spacing:.06em; text-transform:uppercase}
.splate__code{font-size:13px; font-weight:600; color:rgba(255,255,255,.72); font-variant-numeric:tabular-nums}
.splate__rows{padding:var(--s3) var(--s4)}
.splate__rows li{padding:11px 0; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:3px}
.splate__rows li:last-child{border-bottom:0}
.splate__rows span{font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-3)}
.splate__rows b{font-size:15px; font-weight:600; line-height:1.35}
.splate__foot{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s3); padding:var(--s4); border-top:2px solid var(--ink); background:var(--bg-2)}
.splate__price{display:flex; flex-direction:column; line-height:1.1}
.splate__price span{font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-3); margin-bottom:5px}
.splate__price b{font-size:27px; font-weight:600; letter-spacing:-.026em; font-variant-numeric:tabular-nums}
.splate__price em{font-style:normal; font-size:19px; font-weight:600; color:var(--fg-2)}
.splate__stock{font-size:13.5px; font-weight:600}
.splate__stock.is-in{color:var(--brand-d)}
.splate__stock.is-order{color:#B67209}

/* sağ sütun */
.pdp__cmedia .pdp__fig{aspect-ratio:4/3}
.pdp__acch{font-size:16px; margin:var(--s5) 0 var(--s3)}
.pdp__acc{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3)}
.pdp__acc a{display:block; text-align:center}
.pdp__acc-fig{display:flex; align-items:center; justify-content:center; aspect-ratio:1/1; border:1px solid var(--line); background:#fff; padding:8px; transition:border-color var(--t)}
.pdp__acc-fig img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain}
.pdp__acc a:hover .pdp__acc-fig{border-color:var(--ink)}
.pdp__acc-c{display:block; margin-top:7px; font-size:11.5px; font-weight:600; letter-spacing:.08em; color:var(--fg-3)}
.pdp__acc a:hover .pdp__acc-c{color:var(--brand-d)}

/* sifariş zolağı */
.pdp__buybar{background:var(--bg-2); border-block:1px solid var(--line); padding-block:var(--s5)}
.pdp__buybar-in{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s4)}
.pdp__buyprice{display:grid; grid-template-columns:auto auto; column-gap:12px; align-items:baseline}
.pdp__buyprice span{font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-3)}
.pdp__buyprice b{font-size:30px; font-weight:600; letter-spacing:-.026em; font-variant-numeric:tabular-nums}
.pdp__buyprice em{font-style:normal; font-size:22px; font-weight:600; color:var(--fg-2)}
.pdp__buyprice p{grid-column:1/-1; margin-top:6px; font-size:13.5px; color:var(--fg-3); max-width:46ch}
.pdp__buyact{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3)}

/* bandlar */
.pband{margin-top:clamp(34px,4vw,64px)}
.pband__h{
  background:var(--ink); color:#fff; text-align:center; padding:14px var(--gut);
  font-size:clamp(17px,1.7vw,21px); font-weight:600; letter-spacing:.01em;
}
.pband__in{padding-block:clamp(26px,3vw,44px)}
.pband__ph{
  border:1px dashed var(--line-2); background:var(--bg-2); padding:clamp(28px,3.4vw,48px);
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--s4);
}
.pband__ph .ico{width:34px; height:34px; color:var(--fg-3); stroke-width:1.3}
.pband__ph p{max-width:62ch; color:var(--fg-2); font-size:15.5px}
.pdp__two{display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:clamp(24px,3.2vw,52px); align-items:start}
.pdp__subh{font-size:18px; margin:var(--s5) 0 var(--s4)}

@media (max-width:1099px){
  .pdp__hero-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .pdp__cinfo{grid-column:1/-1}
}
@media (max-width:719px){
  .pdp__hero-in{grid-template-columns:1fr}
  .pdp__two{grid-template-columns:1fr}
  .pdp__buyact{width:100%}
  .pdp__buyact .btn{flex:1 1 140px}
}

/* ═══════════════════════════════════════════════════════════
   KATALOQ FAYLLARI (kataloqlar.html)
   ═══════════════════════════════════════════════════════════ */
.cats--files{padding-bottom:0}
.kgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2vw,28px)}
.kcard{border:1px solid var(--line); background:#fff; display:flex; flex-direction:column; transition:border-color var(--t), box-shadow var(--t)}
.kcard:hover{border-color:var(--line-2); box-shadow:0 20px 40px -26px rgba(12,17,20,.42)}
.kcard__fig{
  position:relative; display:block; aspect-ratio:3/4; overflow:hidden;
  background:var(--bg-2); border-bottom:1px solid var(--line);
}
.kcard__fig img{width:100%; height:100%; object-fit:cover; transition:transform 600ms cubic-bezier(.2,.7,.2,1)}
.kcard:hover .kcard__fig img{transform:scale(1.04)}
.kcard__tag{
  position:absolute; left:0; top:0; background:var(--ink); color:#fff;
  font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; padding:6px 11px;
}
.kcard__body{padding:var(--s5) var(--s4) var(--s4); display:flex; flex-direction:column; flex:1 1 auto}
.kcard__k{font-size:11.5px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--brand); margin-bottom:8px}
.kcard__body h3{font-size:19px; line-height:1.25; margin-bottom:9px}
.kcard__d{font-size:14.5px; color:var(--fg-3); line-height:1.5; margin-bottom:var(--s5)}
.kcard__act{margin-top:auto; display:grid; gap:9px}
.kcard__act .btn{--bh:46px; width:100%; font-size:15px}
.kcard__dl{background:#fff; color:var(--ink); border-color:var(--line-2); gap:9px}
.kcard__dl .ico{width:18px; height:18px; stroke-width:1.9}
.kcard__dl:hover{border-color:var(--ink); background:var(--bg-3)}

@media (max-width:1099px){ .kgrid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:839px){ .kgrid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:479px){ .kgrid{grid-template-columns:1fr} }

/* ═══════════════════════════════════════════════════════════
   KATEQORİYA KARTLARI v2 — tünd, şəkilli döşəmələr
   ═══════════════════════════════════════════════════════════ */
.catrow__grid{gap:clamp(12px,1.2vw,18px); background:transparent; border:0}
.ctile{
  position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(118deg, #052D20 0%, #073B28 46%, #1B6E36 100%);
  border:0; border-radius:var(--r-lg); padding:var(--s5) var(--s4) var(--s4);
  min-height:212px; display:block; text-align:left; color:#fff;
  transition:transform var(--t), box-shadow var(--t);
}
.ctile:hover{background:linear-gradient(118deg, #052D20 0%, #073B28 46%, #1B6E36 100%); transform:translateY(-3px); box-shadow:0 24px 44px -26px rgba(5,45,32,.6)}

/* məhsul şəkli — sağ tərəfdə, ağ fonu yumşaq işıqla əridilir */
.ctile__fig{
  position:absolute; right:-6%; top:50%; transform:translateY(-50%);
  width:66%; height:74%; z-index:-1;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(closest-side at 52% 50%, rgba(255,255,255,.92) 0%, rgba(255,255,255,.55) 62%, rgba(255,255,255,0) 82%);
}
.ctile__fig img{
  max-width:88%; max-height:88%; width:auto; height:auto; object-fit:contain;
  mix-blend-mode:multiply; transition:transform 600ms cubic-bezier(.2,.7,.2,1);
}
.ctile:hover .ctile__fig img{transform:scale(1.06)}

.ctile__ico{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border:1px solid rgba(255,255,255,.28); border-radius:var(--r);
  background:rgba(255,255,255,.08); backdrop-filter:blur(2px);
}
.ctile__ico svg{width:21px; height:21px; stroke-width:1.5; color:#fff}

.ctile__txt{display:block; margin-top:var(--s5); max-width:11ch}
.ctile b{display:block; font-size:16.5px; font-weight:600; line-height:1.22; letter-spacing:-.012em; color:#fff; text-shadow:0 1px 12px rgba(12,17,20,.55)}
.ctile__txt>span{display:block; margin-top:6px; font-size:12.5px; color:rgba(255,255,255,.72); font-variant-numeric:tabular-nums}

.ctile__go{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; margin-top:var(--s4); border-radius:50%;
  border:1px solid rgba(255,255,255,.38); background:rgba(255,255,255,.06);
  transition:background var(--t), border-color var(--t), transform var(--t);
}
.ctile__go svg{width:18px; height:18px; stroke-width:1.8; color:#fff}
.ctile:hover .ctile__go{background:var(--brand); border-color:var(--brand); transform:translateX(3px)}

@media (max-width:1279px){ .catrow__grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:719px){ .catrow__grid{grid-template-columns:repeat(2,1fr)} .ctile{min-height:186px} .ctile__txt{max-width:13ch} }
@media (max-width:429px){ .catrow__grid{grid-template-columns:1fr} .ctile__txt{max-width:20ch} }
[dir="rtl"] .ctile{text-align:right}
[dir="rtl"] .ctile__fig{right:auto; left:-6%}

/* şəkil kənarlarını tünd fona yumşaq keçir */
.ctile__fig{
  width:70%; height:80%; right:-4%;
  background:radial-gradient(closest-side at 50% 50%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.6) 58%, rgba(255,255,255,0) 100%);
  -webkit-mask-image:radial-gradient(closest-side at 50% 50%, #000 48%, rgba(0,0,0,.5) 72%, transparent 100%);
  mask-image:radial-gradient(closest-side at 50% 50%, #000 48%, rgba(0,0,0,.5) 72%, transparent 100%);
}
.ctile__fig img{max-width:68%; max-height:68%}

.ctile__fig{
  width:62%; height:70%; right:-2%;
  background:radial-gradient(closest-side at 50% 50%, rgba(255,255,255,.86) 0%, rgba(255,255,255,.4) 56%, rgba(255,255,255,0) 100%);
}
.ctile__fig img{max-width:64%; max-height:64%}

/* işıq ləkəsi yalnız şəkil yüklənəndən sonra görünsün */
.ctile__fig{background:none}
.ctile__fig::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(closest-side at 50% 50%, rgba(255,255,255,.86) 0%, rgba(255,255,255,.4) 56%, rgba(255,255,255,0) 100%);
  opacity:0; transition:opacity 320ms ease;
}
.ctile__fig img{opacity:0; transition:opacity 320ms ease, transform 600ms cubic-bezier(.2,.7,.2,1)}
.ctile.is-ready .ctile__fig::before,.ctile.is-ready .ctile__fig img{opacity:1}

/* şəklin öz kənarları da yumşaq sönsün (ağ fonlu JPG-lər üçün) */
.ctile__fig img{
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%, #000 40%, rgba(0,0,0,.6) 62%, transparent 86%);
  mask-image:radial-gradient(ellipse at 50% 50%, #000 40%, rgba(0,0,0,.6) 62%, transparent 86%);
}

/* ── Kateqoriya döşəmələri: arxa fonu silinmiş şəffaf PNG-lər ── */
.ctile__fig{
  width:58%; height:74%; right:2%;
  background:none;
  -webkit-mask-image:none; mask-image:none;
}
.ctile__fig::before{display:none}
.ctile__fig img{
  max-width:100%; max-height:100%;
  mix-blend-mode:normal;
  -webkit-mask-image:none; mask-image:none;
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.5));
}
.ctile::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(12,17,20,.72) 0%, rgba(12,17,20,.34) 42%, rgba(12,17,20,0) 72%);
  pointer-events:none;
}

/* ── Kateqoriya döşəmələri: yazı yuxarıda · şəkil ortada · ox sağ aşağıda ── */
.ctile{
  display:grid; grid-template-rows:auto auto minmax(96px,1fr) auto;
  gap:0; min-height:270px; padding:var(--s5) var(--s4) var(--s4);
}
.ctile::after{display:none}
.ctile__ico{order:1}
.ctile__txt{order:2; margin-top:var(--s4); max-width:none}
.ctile b{font-size:17px; text-shadow:none}
.ctile__txt>span{margin-top:5px}

.ctile__fig{
  order:3; position:static; transform:none; width:100%; height:auto; right:auto;
  display:flex; align-items:center; justify-content:center; padding:var(--s4) 0 var(--s3);
}
.ctile__fig img{max-width:82%; max-height:104px}

.ctile__go{order:4; margin:0 0 0 auto}
.ctile:hover .ctile__go{transform:none; background:var(--brand); border-color:var(--brand)}

@media (max-width:719px){ .ctile{min-height:260px} }
[dir="rtl"] .ctile__go{margin:0 auto 0 0}

.ctile__fig{min-height:112px}
.ctile__fig img{max-width:92%; max-height:112px; object-fit:contain}

/* ═══════════════════════════════════════════════════════════
   Scroll reveal — hero soldan/aşağıdan, scroll zamanı sağdan
   Sinifləri JS əlavə edir: JS işləməsə heç nə gizlənmir.
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:no-preference){
  [data-rv]{
    opacity:0;
    transition:opacity .72s cubic-bezier(.22,.68,.24,1), transform .72s cubic-bezier(.22,.68,.24,1);
    transition-delay:var(--rv-d,0ms);
  }
  [data-rv="left"] {transform:translate3d(-38px,0,0)}
  [data-rv="right"]{transform:translate3d(38px,0,0)}
  [data-rv="up"]   {transform:translate3d(0,30px,0)}
  [data-rv].is-rv{opacity:1; transform:none}
}

/* Boş grid xanaları boz görünməsin — ayırıcı xətləri kartın özü çəkir */
.pgrid{background:var(--bg); border:0}
.pgrid .pcard{box-shadow:0 0 0 1px var(--line)}

/* ── Kateqoriya döşəmələri: enli · qısa · şəkil yanda ── */
.catrow{padding-top:clamp(28px,3vw,44px)}
.catrow .sec-head{margin-bottom:var(--s5)}
.catrow__grid{grid-template-columns:repeat(3,1fr)}
.ctile{
  display:grid; grid-template-columns:1fr 116px auto; grid-template-rows:auto auto;
  align-items:center; column-gap:var(--s4); row-gap:0;
  min-height:0; padding:var(--s5);
}
.ctile__ico{grid-column:1; grid-row:1}
.ctile__txt{grid-column:1; grid-row:2; margin-top:var(--s3); max-width:none}
.ctile b{white-space:normal}
.ctile__fig{
  grid-column:2; grid-row:1/3; position:static; transform:none;
  width:116px; height:116px; right:auto; padding:0; min-height:0;
}
.ctile__fig img{max-width:100%; max-height:100%; object-fit:contain}
.ctile__go{grid-column:3; grid-row:1/3; margin:0}
@media (max-width:719px){
  .catrow__grid{grid-template-columns:repeat(2,1fr)}
  .ctile{grid-template-columns:1fr 88px auto; padding:var(--s4)}
  .ctile__fig{width:88px; height:88px}
}
@media (max-width:429px){
  .catrow__grid{grid-template-columns:1fr}
}
/* çox dar ekranlarda (≈320px) sütunlar sığmırdı — şəkil və boşluqlar kiçilir */
@media (max-width:400px){
  .ctile{grid-template-columns:minmax(0,1fr) 68px auto; column-gap:10px; padding:14px}
  .ctile__fig{width:68px; height:68px}
  .ctile__go{width:34px; height:34px}
}

/* Kart dar olanda iki düymə yan-yana sığmır (mətn kəsilir və ya bərabər olmur).
   Kartın öz eninə görə alt-alta düzülürlər — bərabər və tam enli. */
.pcard{container-type:inline-size}
@container (max-width:255px){
  .pcard__acts{grid-template-columns:1fr}
}


/* ═══════════════════════════════════════════════════════════
   RTL (ərəb dili) — istiqamətə bağlı düzəlişlər
   ═══════════════════════════════════════════════════════════ */
[dir="rtl"] .drawer{
  inset:0 auto 0 0; transform:translateX(-100%);
  box-shadow:24px 0 60px -30px rgba(12,17,20,.5);
}
[dir="rtl"] .drawer.is-open{transform:none}
[dir="rtl"] .wa{right:auto; left:clamp(16px,2vw,26px)}
[dir="rtl"] .crumb svg,
[dir="rtl"] .link-arrow svg,
[dir="rtl"] .pcard__more svg,
[dir="rtl"] .pmeta__link svg,
[dir="rtl"] .side__site svg{transform:scaleX(-1)}
[dir="rtl"] .pnav__b svg{transform:scaleX(-1)}

/* mətn blokları */
[dir="rtl"] .eyebrow::before{order:2}
[dir="rtl"] .pdp__bullets li{padding-left:0; padding-right:20px}
[dir="rtl"] .pdp__bullets li::before{left:auto; right:2px}
[dir="rtl"] .pdp__rule{margin-left:auto; margin-right:0}
[dir="rtl"] .pcard__specs li,
[dir="rtl"] .pdp__uses li,
[dir="rtl"] .cta__list li,
[dir="rtl"] .about__list li,
[dir="rtl"] .fchk,
[dir="rtl"] .fcat__b{text-align:right}
[dir="rtl"] .tbl th,[dir="rtl"] .tbl td{text-align:right}

/* filtr paneli və alət sətri */
[dir="rtl"] .fmore{margin-left:0; margin-right:11px}
[dir="rtl"] .sellbl{margin-left:0; margin-right:auto}
[dir="rtl"] .search .ico{left:auto; right:14px}
[dir="rtl"] .search input{padding-left:14px; padding-right:44px}
[dir="rtl"] .sel .ico{right:auto; left:12px}
[dir="rtl"] .ftag svg{margin-left:0; margin-right:0}

/* səbət və kart daxili */
[dir="rtl"] .bitem{direction:rtl}

/* footer və başlıq */
[dir="rtl"] .hdr__act{margin-left:0; margin-right:var(--s2)}
[dir="rtl"] .ftr__contact li,[dir="rtl"] .ftr__col{text-align:right}

/* ərəb mətni üçün bir az daha hava */
[lang="ar"] body{line-height:1.75}
[lang="ar"] .pcard__name,[lang="ar"] .pdp__title,[lang="ar"] .h2{letter-spacing:0}
[lang="ar"] .eyebrow,[lang="ar"] .pcard__brand,[lang="ar"] .fgrp__t,
[lang="ar"] .splate__brand,[lang="ar"] .pdp__brand{letter-spacing:.02em}

/* Bağlı panellər sürüşmə sahəsi yaratmasın (xüsusilə RTL-də) */
.drawer{visibility:hidden}
.drawer.is-open{visibility:visible}
@media (max-width:1023px){
  .nav{visibility:hidden}
  .nav.is-open{visibility:visible}
  .fside{visibility:hidden}
  .fside.is-open{visibility:visible}
}
/* Kənarda dayanan panellər üfüqi sürüşmə yaratmasın — clip sticky-ni pozmur */
html,body{overflow-x:clip}

/* Kiçik ekranda yandan gələn animasiya üfüqi daşma yaradır — yalnız aşağıdan gəlsin */
@media (max-width:899px){
  [data-rv="left"],[data-rv="right"]{transform:translate3d(0,26px,0)}
}

/* iOS Safari 16px-dən kiçik şriftli sahəyə toxunanda səhifəni avtomatik
   böyüdür və layout sıçrayır. Mobildə bütün mətn sahələri 16px olsun. */
@media (max-width:899px){
  .fld input[type=text],.fld input[type=tel],.fld input[type=email],
  .fld input[type=file],.fld textarea,
  .sel select,.shop__tools .sel select,.search input{
    font-size:16px;
  }
}

/* ═══════════════════════════════════════════════════════════
   Hero oxunaqlığı — mobil/planşet
   Üfüqi scrim yalnız sol tərəfi qaraldırdı; mobildə yazı tam
   eni tutduğu üçün videonun açıq hissəsində oxunmurdu.
   (Bu blok fayl sonundadır ki, sonrakı .hero .lead qaydası
   onu üstələməsin.)
   ═══════════════════════════════════════════════════════════ */
@media (max-width:1023px){
  .hero__scrim{
    background:linear-gradient(to bottom,
      rgba(7,18,12,.82) 0%,
      rgba(7,18,12,.72) 38%,
      rgba(7,18,12,.64) 68%,
      rgba(7,18,12,.52) 100%);
  }
  .hero h1,.hero__h{text-shadow:0 2px 18px rgba(6,14,10,.55)}
  .hero .lead{color:rgba(255,255,255,.94); text-shadow:0 1px 12px rgba(6,14,10,.5)}
}

/* Model/ölçü cədvəli — məhsul səhifəsi */
.ptable--models th[scope="row"]{width:auto; white-space:normal}
.ptable--models thead th{background:var(--ink); color:#fff; font-size:13px; letter-spacing:.04em; text-transform:uppercase}
.ptable--models td.num,.ptable--models th.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.ptable--models tbody tr:nth-child(even){background:var(--bg-2)}
.pcard__price b .cur-from{font-style:normal; font-size:.62em; vertical-align:super; margin-left:1px; color:var(--fg-3)}

/* Kataloqdan gələn texniki şəkillər */
.pfigs{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--s4)}
.pfig{margin:0; border:1px solid var(--line); background:#fff; padding:var(--s3); border-radius:var(--r)}
.pfig img{width:100%; height:auto; object-fit:contain}
.pband__in .pfigs + .pdp__tablewrap{margin-top:var(--s5)}

/* Vitrin: bütün məhsul şəkilləri eyni sahəni tutsun — yatıq şəkillər də iri görünsün */
.vshot{max-width:none; max-height:none; width:100%; height:100%; object-fit:contain}
@media (max-width:719px){ .vshot{width:92%; left:4%} }

/* Vitrin səhnəsi bir az daha iri */
.vstage{height:min(62vh,520px)}
.vshot{width:112%; height:112%; left:-6%; top:-6%}
@media (max-width:1023px){ .vstage{height:min(46vh,380px)} }
@media (max-width:719px){ .vshot{width:100%; left:0} }

/* Vitrin şəkli bir az kiçildildi */
.vstage{height:min(54vh,450px)}
.vshot{width:96%; height:96%; left:2%; top:2%}
@media (max-width:1023px){ .vstage{height:min(42vh,340px)} }
@media (max-width:719px){ .vshot{width:94%; left:3%} }

/* ═══════════════════════════════════════════════════════════
   SORĞU BÖLMƏSİ — Çelsan tipli sadə, açıq dizayn (#sorgu, #elaqe)
   ═══════════════════════════════════════════════════════════ */
#sorgu, #elaqe.cta,#elaqe.cta{background:var(--bg-2); color:var(--fg); border-top:1px solid var(--line)}
#sorgu, #elaqe .,#elaqe .cta__grid{grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,80px); align-items:start}
#sorgu, #elaqe .,#elaqe .eyebrow{color:var(--brand)}
#sorgu, #elaqe .,#elaqe .eyebrow::before{background:var(--brand)}
#sorgu, #elaqe .,#elaqe .h2{color:var(--fg); font-size:clamp(30px,4.4vw,54px); line-height:1.04; max-width:12ch}
#sorgu, #elaqe .,#elaqe .cta__lead{color:var(--fg-2); max-width:52ch; margin-top:var(--s4)}

/* sol sütun — nazik ayırıcılı məlumat sətirləri */
#sorgu, #elaqe .,#elaqe .cta__list{margin-top:var(--s7); border-top:1px solid var(--line-2); display:block}
#sorgu, #elaqe .,#elaqe .cta__list li{
  display:grid; grid-template-columns:150px 1fr; gap:var(--s4);
  padding:17px 0; border-bottom:1px solid var(--line-2); align-items:baseline;
}
#sorgu, #elaqe .,#elaqe .cta__list .ico{display:none}
#sorgu, #elaqe .,#elaqe .cta__list span{
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-3);
}
#sorgu, #elaqe .,#elaqe .cta__list a,#sorgu, #elaqe .,#elaqe .cta__list b{font-size:16.5px; font-weight:500; color:var(--fg); line-height:1.5}
#sorgu, #elaqe .,#elaqe .cta__list a{border-bottom:1px solid transparent; width:fit-content; transition:border-color var(--t)}
#sorgu, #elaqe .,#elaqe .cta__list a:hover{border-bottom-color:var(--ink); color:var(--ink)}

/* sağ sütun — kart + alt xətli sahələr */
#sorgu, #elaqe .,#elaqe .formcard{
  background:#fff; border:1px solid var(--line); border-radius:0;
  padding:clamp(22px,3vw,40px); box-shadow:none;
}
#sorgu, #elaqe .,#elaqe .formcard .fld-row{display:grid; grid-template-columns:1fr 1fr; gap:var(--s4) var(--s5)}
#sorgu, #elaqe .,#elaqe .fld{margin-bottom:var(--s5)}
#sorgu, #elaqe .,#elaqe .fld > label,#sorgu, #elaqe .,#elaqe .fld .label-like{
  display:block; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg-3); font-weight:600; margin-bottom:2px;
}
#sorgu, #elaqe .,#elaqe .fld input[type=text],#sorgu, #elaqe .,#elaqe .fld input[type=tel],#sorgu, #elaqe .,#elaqe .fld input[type=email],
#sorgu, #elaqe .,#elaqe .fld textarea,#sorgu, #elaqe .,#elaqe .fld select{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--line-2);
  border-radius:0; padding:10px 0 9px; font-size:16px; box-shadow:none;
  transition:border-color var(--t);
}
#sorgu, #elaqe .,#elaqe .fld input:focus,#sorgu, #elaqe .,#elaqe .fld textarea:focus,#sorgu, #elaqe .,#elaqe .fld select:focus{
  outline:none; border-bottom-color:var(--brand); box-shadow:none;
}
#sorgu, #elaqe .,#elaqe .fld textarea{resize:vertical; min-height:96px}
#sorgu, #elaqe .,#elaqe .sel .ico{right:0}
#sorgu, #elaqe .,#elaqe .fld .req{color:var(--brand)}
#sorgu, #elaqe .,#elaqe .file{
  border:0; border-bottom:1px dashed var(--line-2); border-radius:0;
  padding:10px 0; background:transparent;
}
#sorgu, #elaqe .,#elaqe .file:hover{border-bottom-color:var(--ink); background:transparent}
#sorgu, #elaqe .,#elaqe .fld--check{display:flex; align-items:flex-start; gap:10px; margin-top:var(--s3)}
#sorgu, #elaqe .,#elaqe .fld--check label{text-transform:none; letter-spacing:0; font-size:14.5px; font-weight:400; color:var(--fg-2)}
#sorgu, #elaqe .,#elaqe .formcard .btn--block{--bh:56px; margin-top:var(--s4); border-radius:0; font-size:16px; letter-spacing:.02em}
#sorgu, #elaqe .,#elaqe .formcard__note{margin-top:var(--s4); font-size:13px; color:var(--fg-3)}
#sorgu, #elaqe .,#elaqe .hint{color:var(--fg-3)}

@media (max-width:899px){
  #sorgu, #elaqe .,#elaqe .cta__grid{grid-template-columns:1fr}
  #sorgu, #elaqe .,#elaqe .formcard .fld-row{grid-template-columns:1fr}
  #sorgu, #elaqe .,#elaqe .cta__list li{grid-template-columns:120px 1fr}
}

/* ── Xəritə zolağı (zərif) ── */
.mapstrip{position:relative; border-top:1px solid var(--line); background:var(--bg-2)}
.mapstrip__frame{height:clamp(220px,26vh,320px); overflow:hidden}
.mapstrip iframe{width:100%; height:100%; border:0; display:block;
  filter:grayscale(1) contrast(.92) brightness(1.04); opacity:.85; transition:filter var(--t-s), opacity var(--t-s)}
.mapstrip:hover iframe{filter:grayscale(.15) contrast(1); opacity:1}
.mapstrip__pin{
  position:absolute; left:clamp(16px,4vw,56px); bottom:clamp(16px,3vw,28px);
  display:flex; align-items:center; gap:12px; padding:14px 20px;
  background:#fff; border:1px solid var(--line); box-shadow:0 18px 40px -26px rgba(12,17,20,.5);
  transition:border-color var(--t), transform var(--t);
}
.mapstrip__pin:hover{border-color:var(--ink); transform:translateY(-2px)}
.mapstrip__pin svg{width:22px; height:22px; color:var(--brand); flex:0 0 auto}
.mapstrip__pin b{display:block; font-size:15px; font-weight:600}
.mapstrip__pin em{display:block; font-style:normal; font-size:13px; color:var(--fg-3); max-width:34ch}
@media (max-width:559px){ .mapstrip__pin{left:12px; right:12px; bottom:12px; padding:12px 14px} }

/* Yeniliklər səhifəsi — alt qeyd bloku */
.newsnote{
  margin-top:clamp(28px,3.4vw,48px); padding:clamp(20px,2.6vw,34px);
  background:var(--bg-2); border:1px solid var(--line);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s4);
}
.newsnote p{color:var(--fg-2); max-width:62ch; font-size:15.5px}

/* ══════════════════════════════════════════════════════════
   404 — səhifə tapılmadı
   ══════════════════════════════════════════════════════════ */
.e404 { padding: clamp(72px, 12vw, 140px) 0 clamp(64px, 9vw, 110px); }
.e404__in { max-width: 760px; }
.e404__code {
  font-size: clamp(56px, 11vw, 104px); line-height: .9; font-weight: 700;
  letter-spacing: -.03em; color: var(--brand, #238B45); margin: 0 0 14px;
}
.e404__ttl { font-size: clamp(26px, 4.2vw, 40px); line-height: 1.12; margin: 0 0 14px; }
.e404__txt { font-size: clamp(15px, 1.6vw, 17px); line-height: 1.65; opacity: .78; margin: 0 0 30px; max-width: 52ch; }
.e404__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 48px; }

.e404__links { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(12,17,20,.12); }
.e404__links li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px;
  padding: 16px 2px; border-bottom: 1px solid rgba(12,17,20,.12);
}
.e404__links a { font-weight: 600; font-size: 16px; text-decoration: none; }
.e404__links a:hover { color: var(--brand, #238B45); }
.e404__links span { font-size: 14px; opacity: .62; }
@media (max-width: 560px) { .e404__links span { flex-basis: 100%; } }
/* açıq fonda ikinci düymə */
.e404 .btn--ghost { color: #17201C; border-color: rgba(23,32,28,.28); }
.e404 .btn--ghost:hover { border-color: #17201C; background: rgba(23,32,28,.05); }

/* Naviqasiya loqodan aralı, sağa doğru sürüşdürülür */
@media (min-width: 993px) {
  .nav { margin-inline: auto 0; padding-inline-end: clamp(16px, 3vw, 56px); }
  .nav > ul > li > a { white-space: nowrap; }   /* «Ana səhifə» iki sətrə düşməsin */
}

/* Yeni dairəvi loqo — tünd altlıqda kənarı itməsin */
.ftr__brand img { border-radius: 2px; }


/* ══════════════════════════════════════════════════════════
   Hero header-in altından başlayır
   Beləliklə şüşə effekti səhifə açılan andan görünür — sürüşdürmək
   lazım gəlmir. Hero-nun öz məzmunu header hündürlüyü qədər aşağı
   salınır ki, başlıq menyunun altında qalmasın.
   ══════════════════════════════════════════════════════════ */
:root { --hdr-h: 78px; }
@media (max-width: 992px) { :root { --hdr-h: 66px; } }

.hero,
.phero {
  margin-top: calc(-1 * var(--hdr-h));
  padding-top: var(--hdr-h);
}

/* ── Hero üzərində tünd şüşə ───────────────────────────────
   Səhifə yuxarıda dayandıqda header tünd hero-nun üstündədir:
   ağ şüşə mətn kontrastını zəiflədir, ona görə tünd şüşəyə keçir.
   Sürüşdürəndə yenidən açıq şüşə olur. */



/* üst kənarda qum-yaşıl işıq zolağı */
.hstats__in::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(201, 182, 136, .55) 18%,
    var(--brand-l) 50%,
    rgba(201, 182, 136, .55) 82%,
    transparent 100%);
}

.fact { position: relative; transition: background var(--t); }
.fact:hover { background: rgba(15, 91, 52, .035); }

/* ikonlar dairəvi medalyon içində */
.fact .ico {
  width: 42px; height: 42px; padding: 10px;
  border-radius: 50%;
  background: linear-gradient(150deg, rgba(15, 91, 52, .1), rgba(201, 182, 136, .16));
  box-shadow: 0 0 0 1px rgba(15, 91, 52, .1);
  color: var(--brand);
  stroke-width: 1.5;
}

/* rəqəmlər zərif qradiyentlə */
.fact strong {
  background: linear-gradient(160deg, var(--ink) 0%, var(--brand) 130%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.fact span {
  font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--fg-3);
}

/* ayırıcılar tam hündürlük yerinə mərkəzdə solan xətt olsun */
.hstats__in .fact + .fact { border-left: 0; }
.hstats__in .fact + .fact::before {
  content: ''; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(201, 182, 136, .5), transparent);
}
@media (max-width: 1099px) {
  .hstats__in .fact:nth-child(3n+1)::before { display: none; }
}

/* Şüşə lövhədə mətnlər — arxa fon dəyişkən olduğu üçün kontrast gücləndirilir */
.hstats__in .fact strong {
  background: none;
  -webkit-text-fill-color: #0A2B1B;
  color: #0A2B1B;
  text-shadow: none;
}
.hstats__in .fact span {
  color: #24312B;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .03em;
  text-transform: none;
}
.hstats__in .fact .ico {
  background: linear-gradient(150deg, rgba(255, 255, 255, .55), rgba(201, 182, 136, .3));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .5);
  color: #06341F;
}
.hstats__in .fact:hover { background: rgba(255, 255, 255, .22); }


/* ══════════════════════════════════════════════════════════
   Əsas düymə — lüks icra
   Düz yaşıl fon əvəzinə dərinlikli qradiyent, içəridən qum rəngli
   nazik halqa, yaşıl çalarlı yumşaq kölgə və üzərinə gələndə
   sağa doğru keçən işıq zolağı.
   ══════════════════════════════════════════════════════════ */
.btn--brand {
  background: linear-gradient(160deg, #17703F 0%, var(--brand) 42%, #0A4527 100%);
  color: #fff;
  border: 1px solid rgba(201, 182, 136, .34);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .16) inset,
    0 -1px 0 rgba(0, 0, 0, .18) inset,
    0 14px 28px -16px rgba(5, 45, 32, .7);
  overflow: hidden;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t), filter var(--t);
}

/* üzərinə gələndə keçən işıq */
.btn--brand::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg,
    transparent 32%,
    rgba(255, 255, 255, .16) 48%,
    rgba(201, 182, 136, .22) 54%,
    transparent 68%);
  transform: translateX(-120%);
  transition: transform 620ms cubic-bezier(.22, .61, .36, 1);
  pointer-events: none;
}

.btn--brand:hover {
  transform: translateY(-2px);
  border-color: rgba(201, 182, 136, .6);
  filter: saturate(1.08) brightness(1.06);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .2) inset,
    0 -1px 0 rgba(0, 0, 0, .2) inset,
    0 20px 38px -18px rgba(5, 45, 32, .78),
    0 0 0 3px rgba(201, 182, 136, .14);
}
.btn--brand:hover::after { transform: translateX(120%); }

.btn--brand:active {
  transform: translateY(0);
  box-shadow:
    0 2px 6px rgba(5, 45, 32, .4) inset,
    0 6px 16px -10px rgba(5, 45, 32, .6);
}

.btn--brand:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(201, 182, 136, .45),
    0 14px 28px -16px rgba(5, 45, 32, .7);
}

/* oxun sağa sürüşməsi */
.btn--brand svg { transition: transform var(--t); }
.btn--brand:hover svg { transform: translateX(3px); }

/* ══════════════════════════════════════════════════════════
   Əlaqə səhifəsindəki kompakt xəritə
   Sol sütunda, əlaqə siyahısının altındakı boşluqda dayanır.
   ══════════════════════════════════════════════════════════ */
.ctmap {
  position: relative;
  margin: clamp(22px, 3vw, 34px) 0 0;
  height: clamp(200px, 24vw, 260px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 2px;
  box-shadow: 0 22px 46px -30px rgba(5, 45, 32, .8);
}
.ctmap iframe {
  width: 100%; height: 100%; border: 0; display: block;
  filter: grayscale(.35) saturate(1.05) contrast(.98);   /* bir qədər rəngli */
  opacity: .95;
  transition: filter var(--t-s), opacity var(--t-s);
}
.ctmap:hover iframe { filter: none; opacity: 1; }

.ctmap__open {
  position: absolute; left: 12px; bottom: 12px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(201, 182, 136, .4);
  border-radius: 2px;
  font-size: 13.5px; font-weight: 600; color: #17201C;
  text-decoration: none;
  transition: background var(--t), border-color var(--t), transform var(--t);
}
.ctmap__open svg { width: 17px; height: 17px; color: var(--brand); flex: 0 0 auto; }
.ctmap__open:hover {
  background: #fff; border-color: var(--brand-l); transform: translateY(-1px);
}

/* Menyu açıq olanda header-in dil və səbət düymələri gizlənir —
   çəkməcənin üstündə görünüb qarışıqlıq yaradırdılar. Yalnız
   bağlama düyməsi qalır. */
@media (max-width: 992px) {
  .hdr .langsel,
  .hdr .basket-btn {
    transition: opacity var(--t), visibility var(--t);
  }
  .hdr:has(.nav.is-open) .hdr__act .langsel,
  .hdr:has(.nav.is-open) .hdr__act .basket-btn,
  .hdr:has(.nav.is-open) .hdr__act > .btn--brand {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

/* ══════════════════════════════════════════════════════════
   Qiymətin altındakı «ƏDV daxil» qeydi
   Kartda, məhsul səhifəsində və səbətdə eyni görünür —
   müştəri qiymətin son məbləğ olduğunu ayrıca soruşmasın.
   ══════════════════════════════════════════════════════════ */
.vatnote{
  display:block; margin-top:2px;
  font-size:11.5px; font-style:normal; font-weight:500;
  letter-spacing:.02em; color:var(--fg-3); white-space:nowrap;
}
.pdp__buyprice .vatnote,
.splate__price .vatnote{ color:rgba(255,255,255,.62) }
.bitem__price .vatnote{ font-size:10.5px; margin-top:1px }

/* ══════════════════════════════════════════════════════════
   Header — daimi CVH yaşılı
   Müştəri istəyi: yuxarı zolaq heç vaxt ağa keçmir, həmişə
   marka yaşılında qalır. Şüşə effekti ayrıca ::before qatındadır
   ki, mobil menyunun position:fixed mövqeyini pozmasın.
   ══════════════════════════════════════════════════════════ */
.hdr {
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  box-shadow: none;
  transition: box-shadow var(--t), border-color var(--t);
}
.hdr::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(7, 59, 40, .94) 0%, rgba(5, 45, 32, .88) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
}
.hdr.is-stuck {
  box-shadow: 0 14px 40px -24px rgba(5, 45, 32, .65);
  border-bottom-color: rgba(255, 255, 255, .2);
}
.hdr.is-stuck::after { opacity: 1; }

/* mətn və ikonlar həmişə ağ */
.hdr .nav > ul > li > a,
.hdr .langsel__cur,
.hdr .basket-btn,
.hdr .burger { color: #fff; }
.hdr .nav > ul > li > a:hover,
.hdr .nav > ul > li > a.is-active { color: #fff; }
.hdr .langsel__btn .ico,
.hdr .langsel__chev,
.hdr .basket-btn .ico,
.hdr .basket-btn svg { color: #fff; }

.hdr .langsel__btn,
.hdr .basket-btn {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .24);
  color: #fff;
}
.hdr .langsel__btn:hover,
.hdr .basket-btn:hover { background: rgba(255, 255, 255, .18); }
.hdr .hdr__logo img { box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); }

/* blur dəstəklənmirsə tam dolğun yaşıl */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hdr::before { background: #073B28; }
}

/* Mobil çəkməcə açıq fonludur — orada mətnlər tünd qalır */
@media (max-width: 992px) {
  .hdr .nav > ul > li > a { color: #17201C; }
  .hdr .nav > ul > li > a:hover,
  .hdr .nav > ul > li > a.is-active { color: var(--brand); }
  .nav__foot .nav__tel { color: #17201C; }
}

/* İkinci nömrə (WhatsApp) — birinci nömrə ilə eyni görünür,
   sadəcə öz sətrindədir */
.cta__list .ct__wa,
.ct__wa {
  display: flex;
  width: fit-content;
  margin-top: 2px;
}

/* ══════════════════════════════════════════════════════════
   Marka kartının fonunda kataloqun üz qabığı
   Solğun və qara-ağ verilir ki, mətn oxunaqlı qalsın.
   ══════════════════════════════════════════════════════════ */
.ccard--cover { position: relative; overflow: hidden; isolation: isolate; }
.ccard--cover::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background-image: var(--cover);
  background-size: cover;
  background-position: center 18%;
  filter: grayscale(1) contrast(.9);
  opacity: .13;
  transition: opacity var(--t-s), filter var(--t-s);
}
/* üstündən ağdan şəffafa keçən örtük — yazı sahəsi təmiz qalır */
.ccard--cover::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.9) 62%, #fff 100%);
  pointer-events: none;
}
.ccard--cover:hover::before { opacity: .2; filter: grayscale(.6) contrast(1); }

/* ══════════════════════════════════════════════════════════
   Loqo üçün ağ panel — sol kənardan başlayır, sağ tərəfi
   diaqonal kəsilir (referans dizayndakı kimi).
   ══════════════════════════════════════════════════════════ */
.hdr__logo {
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  position: relative;
  padding-inline-end: clamp(18px, 2.4vw, 34px);
}
.hdr__logo::before {
  content: ''; position: absolute; z-index: -1;
  top: 0; bottom: 0;
  left: calc(-1 * var(--gut));
  right: 0;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, calc(100% - 30px) 100%, 0 100%);
  box-shadow: 0 0 30px -12px rgba(5, 45, 32, .35);
}
/* ağ panelin üstündə loqonun ətrafındakı halqa lazım deyil */
.hdr .hdr__logo img { box-shadow: none; }

@media (max-width: 992px) {
  .hdr__logo { padding-inline-end: 16px; }
  .hdr__logo::before { clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%); }
}

/* ══════════════════════════════════════════════════════════
   GİRİŞ HİSSƏSİ — maketdən ölçülmüş dəyərlərlə
   Rənglər maket şəklindən birbaşa götürülüb:
     fon #061915 · header #091C17 · kart #0E231C
     düymə #2D7857 · vurğu yaşılı #35946A
   ══════════════════════════════════════════════════════════ */
:root{
  --h-bg:#061915;
  --h-pill:#091C17;
  --h-card:#0E231C;
  --h-btn:#2D7857;
  --h-btn-h:#35946A;
  --h-acc:#35946A;
  --h-line:rgba(255,255,255,.09);
}

/* ── Üzən header ── */
.hdr{
  position:sticky; top:0; z-index:100;
  background:transparent; border:0; box-shadow:none;
  padding:14px clamp(14px,1.7vw,26px) 0;
}
.hdr::before{ display:none }
.hdr .hdr__in{
  max-width:none; margin:0;
  padding-inline:18px 12px; min-height:76px;
  border-radius:16px;
  background:rgba(9,28,23,.78);
  border:1px solid rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  backdrop-filter:blur(18px) saturate(1.3);
  transition:background var(--t), border-color var(--t);
}
.hdr.is-stuck .hdr__in{
  background:rgba(6,25,21,.94);
  border-color:rgba(255,255,255,.14);
}
.hdr__logo::before{ display:none }
.hdr__logo{ padding-inline-end:0; align-self:center; min-height:0 }
.hdr__logo img{ height:44px; box-shadow:none }
.hdr .hdr__logo img{ box-shadow:none }
.hdr .nav>ul{ gap:6px }

/* ── Hero ── */
.hero{
  position:relative; background:var(--h-bg); overflow:hidden;
  margin-top:calc(-1 * (76px + 14px));
}
/* Səhnə bütün eni tutur — əvvəl 66%-dən başladığı üçün videonun sol kənarı
   kəskin sərhəd kimi görünürdü. İndi keçidi yalnız duman qradiyenti qurur. */
.hero__stage{ position:absolute; inset:0; width:auto }
.hero__video{ width:100%; height:100%; object-fit:cover }
.hero__scrim{
  position:absolute; inset:0;
  background:
    /* Keçid smoothstep əyrisi ilə gedir: nə başlanğıcda, nə də sonda
       kəskin sərhəd yaranmır; quyruq uzun və çox zəifdir. */
    linear-gradient(90deg,
      rgba(6,25,21,.94) 0%,
      rgba(6,25,21,.93) 7%,
      rgba(6,25,21,.90) 12%,
      rgba(6,25,21,.84) 16%,
      rgba(6,25,21,.74) 20%,
      rgba(6,25,21,.61) 24%,
      rgba(6,25,21,.47) 28%,
      rgba(6,25,21,.34) 32%,
      rgba(6,25,21,.22) 36%,
      rgba(6,25,21,.13) 41%,
      rgba(6,25,21,.06) 46%,
      rgba(6,25,21,.02) 52%,
      rgba(6,25,21,0) 60%),
    /* şaquli örtük də yumşaldılıb */
    linear-gradient(180deg,
      rgba(6,25,21,.26) 0%,
      rgba(6,25,21,.12) 14%,
      rgba(6,25,21,.03) 26%,
      rgba(6,25,21,0) 40%,
      rgba(6,25,21,.10) 72%,
      rgba(6,25,21,.30) 100%);
}
.hero__body{
  position:relative; z-index:2;
  padding-block:calc(76px + 14px + clamp(46px,6vw,86px)) clamp(34px,4.4vw,58px);
}
.hero__copy{ max-width:min(600px, 50%) }
/* Müştəri istəyi: hero-dakı «CVH Mühəndislik» yazısı turuncu */
.hero .eyebrow{ color:var(--h-orange) }
.hero .eyebrow::before{ background:var(--h-orange) }
.hero h1, .hero .hero__h{ color:#fff; letter-spacing:-.02em; line-height:1.06 }
.hero h1 em, .hero .hero__h em{ color:var(--h-acc); font-style:normal }
.hero .lead{ color:rgba(236,251,248,.82) }

.hero .btn--brand{ background:var(--h-btn); border-color:var(--h-btn) }
.hero .btn--brand:hover{ background:var(--h-btn-h); border-color:var(--h-btn-h) }
.hero .btn--light{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.34) }
.hero .btn--light:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.55) }

/* ── Tanıtım videosu sətri ── */
.hero__play{
  display:inline-flex; align-items:center; gap:15px;
  margin-top:clamp(26px,3.2vw,42px);
  color:#fff; background:none; border:0; cursor:pointer; padding:0; text-align:start;
}
.hero__play__btn{
  flex:0 0 auto; width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.06);
  transition:background var(--t), border-color var(--t), transform var(--t-s);
}
.hero__play:hover .hero__play__btn{
  background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.5); transform:scale(1.06);
}
.hero__play__btn svg{ width:15px; height:15px; fill:#fff; margin-left:3px }
.hero__play b{ display:block; font-size:15.5px; font-weight:600; line-height:1.3 }
.hero__play span{ display:block; font-size:13.5px; color:rgba(236,251,248,.6); margin-top:3px }

/* ── Statistika kartı ── */
/* Zəmanət sətri silindi — statistika lövhəsi tünd bloğun sonunu tamamlayır */
.hstats{ background:var(--h-bg); padding-bottom:clamp(20px,2.6vw,34px) }
.hstats .hstats__in{
  width:auto; margin:0;
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  border-radius:16px;
  background:var(--h-card);
  border:1px solid var(--h-line);
  padding:clamp(18px,2.1vw,26px) clamp(10px,1.4vw,18px);
}
.hstats .fact{
  display:flex; align-items:center; gap:16px;
  padding-inline:clamp(12px,1.8vw,26px);
  border-inline-end:1px solid var(--h-line);
}
.hstats .fact:last-child{ border-inline-end:0 }
.hstats .fact .ico{
  flex:0 0 auto; width:52px; height:52px; padding:13px; border-radius:50%;
  background:rgba(53,148,106,.14); color:var(--h-acc);
  border:1px solid rgba(53,148,106,.26);
}
.hstats .fact strong{
  display:block; font-size:clamp(22px,2.2vw,30px); font-weight:700;
  line-height:1.1; color:#fff; letter-spacing:-.01em;
}
.hstats .fact span{ display:block; font-size:13.5px; color:rgba(236,251,248,.62); margin-top:3px }

/* ── Zəmanət sətri ── */
.htrust{ background:var(--h-bg); padding-bottom:clamp(30px,4vw,54px) }
.htrust__in{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(16px,2.2vw,30px);
  margin-top:clamp(22px,2.8vw,34px);
  padding-top:clamp(20px,2.6vw,30px);
  border-top:1px solid var(--h-line);
}
.htrust__i{ display:flex; align-items:flex-start; gap:13px }
.htrust__i .ico{ flex:0 0 auto; width:28px; height:28px; color:var(--h-acc); margin-top:1px }
.htrust__i b{ display:block; font-size:14.5px; font-weight:600; color:#fff; line-height:1.35 }
.htrust__i span{ display:block; font-size:13px; color:rgba(236,251,248,.58); margin-top:3px }

/* ── Dar ekranlar ── */
@media (max-width:1100px){
  .hero__copy{ max-width:none }
  .hero__stage{ width:100%; inset:0 }
  .hero__scrim{
    background:linear-gradient(180deg, rgba(6,25,21,.9) 0%, rgba(6,25,21,.74) 45%, rgba(6,25,21,.95) 100%);
  }
  .hstats .hstats__in{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 0 }
  .hstats .fact:nth-child(2n){ border-inline-end:0 }
  .htrust__in{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:640px){
  .hdr{ padding:10px 12px 0 }
  .hdr .hdr__in{ border-radius:14px; min-height:62px; padding-inline:12px 8px }
  .hdr__logo img{ height:34px }
  .hero{ margin-top:calc(-1 * (62px + 10px)) }
  .hero__body{ padding-block:calc(62px + 10px + 42px) 34px }
  .hstats .hstats__in{ grid-template-columns:1fr; gap:16px }
  .hstats .fact{ border-inline-end:0 }
  .htrust__in{ grid-template-columns:1fr; gap:16px }
}

/* ── Hero video modalı ── */
.vmodal{
  position:fixed; inset:0; z-index:300;
  display:grid; place-items:center; padding:clamp(16px,4vw,48px);
  background:rgba(3,14,11,.9);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  animation:vmIn .18s ease-out;
}
@keyframes vmIn{ from{opacity:0} to{opacity:1} }
.vmodal__box{
  width:min(1100px,100%); border-radius:16px; overflow:hidden; background:#000;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9);
}
.vmodal__box video{ display:block; width:100%; height:auto; max-height:82vh }
.vmodal__x{
  position:absolute; top:clamp(12px,2.4vw,26px); right:clamp(12px,2.4vw,26px);
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28);
  transition:background var(--t);
}
.vmodal__x:hover{ background:rgba(255,255,255,.22) }
.vmodal__x svg{ width:20px; height:20px; fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:round }
@media (prefers-reduced-motion:reduce){ .vmodal{ animation:none } }

/* ══════════════════════════════════════════════════════════
   Statistika və zəmanət zolağı — tünd fona uyğunlaşdırma
   Köhnə dizayn açıq fon üçün idi: rəqəmlər tünd qradiyentlə
   boyanırdı (-webkit-text-fill-color:transparent) və tünd
   kartda görünmürdü. Burada sıfırlanır, blok yığcamlaşdırılır.
   ══════════════════════════════════════════════════════════ */

/* rəqəmlər — qradiyent ləğv, təmiz ağ */
.hstats .fact strong{
  background:none;
  -webkit-background-clip:border-box; background-clip:border-box;
  -webkit-text-fill-color:#fff; color:#fff;
  font-size:clamp(21px,1.9vw,27px); font-weight:700;
  letter-spacing:-.015em; line-height:1.05;
  font-variant-numeric:tabular-nums;
}
/* etiketlər — incə, aralıqlı, kiçik */
.hstats .fact span{
  margin-top:5px; font-size:11.5px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  color:rgba(214,238,228,.55); line-height:1.3;
}

/* kart daha alçaq və zərif */
.hstats .hstats__in{
  padding:clamp(14px,1.5vw,19px) clamp(8px,1vw,14px);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(19,44,35,.9), rgba(11,29,23,.9));
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 24px 60px -40px rgba(0,0,0,.9);
}
.hstats .fact{
  gap:14px; padding:2px clamp(12px,1.6vw,24px);
  background:none; transition:none;
}
.hstats .fact:hover{ background:none }
.hstats .fact .ico{
  width:44px; height:44px; padding:11px; border-radius:50%;
  background:rgba(53,148,106,.12);
  border:1px solid rgba(53,148,106,.22);
  box-shadow:none; color:var(--h-acc); stroke-width:1.5;
}

/* ayırıcılar — mərkəzdə solan nazik xətt */
.hstats .hstats__in .fact{ border-inline-end:0; position:relative }
.hstats .hstats__in .fact + .fact::before{
  content:''; position:absolute; inset-inline-start:0; top:18%; bottom:18%;
  width:1px;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.16), transparent);
}

/* zəmanət zolağı — alçaldılmış, sakit */
/* Altdakı boş yaşıl zolaq ləğv edildi — sıra bloğun sonunu tamamlayır */
.htrust{ background:var(--h-bg); padding-top:clamp(14px,1.8vw,22px); padding-bottom:clamp(6px,0.9vw,12px) }
.htrust__in{
  margin-top:0;
  padding-top:clamp(15px,1.9vw,22px);
  gap:clamp(14px,2vw,26px);
  border-top:1px solid rgba(255,255,255,.07);
}
.htrust__i{ gap:12px }
.htrust__i .ico{ width:24px; height:24px; stroke-width:1.5 }
.htrust__i b{ font-size:13.5px; font-weight:600; letter-spacing:.005em }
.htrust__i span{ font-size:12.5px; color:rgba(214,238,228,.5); margin-top:2px }

/* hero-nun alt boşluğu — kart yuxarı çəkilsin */
.hero__body{ padding-block-end:clamp(26px,3.4vw,44px) }

@media (max-width:1100px){
  .hstats .hstats__in .fact + .fact::before{ display:none }
  .hstats .hstats__in .fact:nth-child(2n)::before{
    content:''; display:block; position:absolute; inset-inline-start:0; top:18%; bottom:18%;
    width:1px; background:linear-gradient(180deg, transparent, rgba(255,255,255,.16), transparent);
  }
}
@media (max-width:640px){
  .hstats .hstats__in .fact::before{ display:none !important }
  .hstats .fact{ padding-inline:8px }
}

/* ══════════════════════════════════════════════════════════
   Hero mətn bloku və statistika lövhəsinin yerləşməsi
   Əvvəl CTA düymələri lövhənin altında gizlənirdi: mətn bloku
   yuxarı qaldırıldı, lövhə isə bir qədər aşağı endirildi.
   ══════════════════════════════════════════════════════════ */
@media (min-width: 993px) {
  .hero__body {
    padding-block: calc(76px + 14px + clamp(24px, 3.2vw, 46px)) clamp(58px, 6vw, 86px);
  }
  /* mətn bloku bir az sola */
  .hero__copy { margin-inline-start: clamp(-30px, -1.6vw, -12px); }

  /* lövhə daha az qalxır — düymələrin altını örtmür */
  :root { --hstats-lift: clamp(38px, 4vw, 56px); }
  .hstats { margin-top: calc(-1 * var(--hstats-lift)); }
}

/* ══════════════════════════════════════════════════════════
   Statistika zolağı — ağ fon
   Müştəri istəyi: hero-dan sonra yaşıl həddən artıq çox idi.
   Lövhənin altındakı sahə ağdır, kartın özü də ağ vərəqə çevrilir.
   ══════════════════════════════════════════════════════════ */
.hstats { background: var(--bg); }

.hstats .hstats__in {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 26px 56px -34px rgba(5, 45, 32, .42);
}
.hstats .fact { border-inline-end: 0; }
.hstats .hstats__in .fact + .fact::before {
  background: linear-gradient(180deg, transparent, var(--line-2), transparent);
}
.hstats .fact .ico {
  background: rgba(15, 91, 52, .08);
  color: var(--brand);
  border-color: rgba(15, 91, 52, .18);
}
.hstats .fact strong {
  color: var(--fg);
  -webkit-text-fill-color: var(--fg);   /* köhnə ağ fill dəyərini sıfırlayır */
  background: none;
  text-shadow: none;
}
.hstats .fact span { color: var(--fg-2); }

/* ══════════════════════════════════════════════════════════
   Header — üç düzəliş
   1) .hdr__in-dəki backdrop-filter içindəki position:fixed
      elementləri (mobil menyu) öz sərhədinə həbs edirdi →
      şüşə ayrıca ::before qatına köçürüldü.
   2) Hero header-in altından başlayır — yuxarıda ağ zolaq qalmır.
   3) Kiçik ekranlarda zolaq kənarlardan kəsilmir.
   ══════════════════════════════════════════════════════════ */

/* 1 — şüşə ayrıca qatda */
.hdr .hdr__in {
  position: relative;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.hdr .hdr__in::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: rgba(9, 28, 23, .78);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  transition: background var(--t);
}
.hdr.is-stuck .hdr__in { background: transparent; }
.hdr.is-stuck .hdr__in::before { background: rgba(6, 25, 21, .94); }

/* 2 — hero header-in altına çəkilir, üstdə ağ zolaq qalmır */
.hero { margin-top: calc(-1 * (76px + 14px)); }
@media (max-width: 1023px) { .hero { margin-top: calc(-1 * (62px + 12px)); } }
@media (max-width: 640px)  { .hero { margin-top: calc(-1 * (62px + 10px)); } }

/* 3 — kiçik ekranda zolaq tam otursun, kənarları kəsilməsin */
.hdr, .hdr .hdr__in { box-sizing: border-box; max-width: 100%; }
@media (max-width: 640px) {
  .hdr .hdr__in { padding-inline: 10px 6px; gap: 8px; }
  .hdr__logo { flex: 0 1 auto; min-width: 0; }
  .hdr__logo img { max-width: 100%; height: auto; max-height: 34px; }
  .hdr__act { gap: 6px; flex: 0 0 auto; }
  .hdr .langsel__btn, .hdr .basket-btn { padding-inline: 8px; }
}

/* ══════════════════════════════════════════════════════════
   Son düzəlişlər
   1. Duman çox geniş idi (60%-ə qədər gedirdi) — işarələnən
      nöqtəyə, təxminən 34%-ə qədər sıxılıb. Əyri eynidir,
      sadəcə miqyası kiçildilib ki, kəskin sərhəd yaranmasın.
   2. Statistika lövhəsi köhnə dizayndan qalan mənfi kənar
      boşluqla hero-nun üstünə qalxırdı və «Tanıtım videoya
      baxın» sətrini örtürdü — qalxma ləğv edilir.
   ══════════════════════════════════════════════════════════ */
.hero__scrim{
  background:
    linear-gradient(90deg,
      rgba(6,25,21,.94) 0%,
      rgba(6,25,21,.93) 4%,
      rgba(6,25,21,.90) 7%,
      rgba(6,25,21,.84) 9%,
      rgba(6,25,21,.74) 11%,
      rgba(6,25,21,.61) 14%,
      rgba(6,25,21,.47) 16%,
      rgba(6,25,21,.34) 18%,
      rgba(6,25,21,.22) 21%,
      rgba(6,25,21,.13) 24%,
      rgba(6,25,21,.06) 27%,
      rgba(6,25,21,.02) 30%,
      rgba(6,25,21,0)   34%),
    linear-gradient(180deg,
      rgba(6,25,21,.26) 0%,
      rgba(6,25,21,.12) 14%,
      rgba(6,25,21,.03) 26%,
      rgba(6,25,21,0)   40%,
      rgba(6,25,21,.10) 72%,
      rgba(6,25,21,.30) 100%);
}

/* lövhə artıq hero-nun üstünə qalxmır */
.hstats{ margin-top:0 }

@media (max-width:1100px){
  /* dar ekranda şəkil tam eni tutur — duman şaquli olur */
  .hero__scrim{
    background:linear-gradient(180deg,
      rgba(6,25,21,.9) 0%, rgba(6,25,21,.74) 45%, rgba(6,25,21,.95) 100%);
  }
}

/* ══════════════════════════════════════════════════════════
   Yuxarıdakı ağ zolağın aradan qaldırılması
   Header üzən panelə çevriləndə hündürlüyü 78 → 90 piksel oldu
   (14 px kənar boşluq + 76 px panel), amma səhifələri yuxarı
   çəkən --hdr-h dəyişəni 78-də qalmışdı. Aradakı 12 piksel
   daxili səhifələrdə ağ zolaq kimi görünürdü (mobildə 6 piksel).
   Dəyişən indi həqiqi hündürlüyə bərabərdir və bütün bloklar
   ondan qidalanır — bir daha fərqlənə bilməz.
   ══════════════════════════════════════════════════════════ */
:root{ --hdr-h:90px }                                  /* 14 + 76 */
@media (max-width:992px){ :root{ --hdr-h:90px } }
@media (max-width:640px){ :root{ --hdr-h:72px } }      /* 10 + 62 */

.hero,
.phero{
  margin-top:calc(-1 * var(--hdr-h));
  padding-top:var(--hdr-h);
}

/* köhnə sabit rəqəmlər ləğv — hamısı dəyişəndən gəlsin */
@media (max-width:1023px){ .hero{ margin-top:calc(-1 * var(--hdr-h)) } }
@media (max-width:640px) { .hero{ margin-top:calc(-1 * var(--hdr-h)) } }

/* hero-nun öz məzmun boşluğu da dəyişənə bağlanır */
.hero__body{
  padding-block:calc(var(--hdr-h) + clamp(46px,6vw,86px)) clamp(26px,3.4vw,44px);
}
@media (max-width:640px){
  .hero__body{ padding-block:calc(var(--hdr-h) + 34px) 28px }
}

/* Hero başlığındakı vurğu sözü — müştəri istəyi: yaşıl yox, ağ.
   Altındakı nazik yaşıl xətt vurğunu saxlayır. */
.hero h1 em,
.hero .hero__h em{
  color:#fff;
  box-shadow:inset 0 -3px 0 var(--h-acc);
}