:root{
    /* Marka renkleri — logodan türetilmiş VARSAYILAN değerler.
       Admin panel bir değer girdiğinde PHP bunları <html style="..."> ile
       ezer (inline style her zaman üstün). Buradaki değerler güvenlik ağı:
       DB boş/bozuk olsa bile site renklerini kaybetmez.
       Daha önce bunlar SADECE inline style'da vardı; DB'siz bir bağlamda
       --brand tanımsız kalınca ikonlar beyaz, CTA butonu görünmez oluyordu. */
    --brand:#07244F;
    --brand-hover:#0E489F;
    --brand-mid:#0A3779;
    --brand-tint:#E2EDFC;
    --brand-tint-2:#C6DBFA;

    --ink:#111111;            /* yazılar siyah */
    --ink-2:#5A6068;
    --ink-3:#8A9099;
    --white:#FFFFFF;
    --ground:#FFFFFF;
    --hairline:#E6E9EC;
    --hairline-2:#F1F3F5;

    --hdr-h:82px;
    --hdr-h-sticky:64px;
    --wrap:1280px;
  }

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

  body{
    margin:0;
    background:var(--ground);
    color:var(--ink);
    font-family:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
    font-size:15px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  img{display:block;max-width:100%}
  a{color:inherit;text-decoration:none}
  button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

  .wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(1rem,3vw,2rem)}

  /* ═══════════════ ÜST İNCE ŞERİT ═══════════════ */
  .topstrip{
    background:var(--brand);
    color:rgba(255,255,255,.82);
    font-size:.76rem;
    letter-spacing:.02em;
  }
  /* telefon/e-poçt və sənəd linkləri ORTADA — əvvəl sol/sağ kənarlara
     dağılırdı (justify-content:space-between) */
  .topstrip .wrap{display:flex;flex-wrap:wrap;gap:.3rem 1.5rem;align-items:center;justify-content:center;min-height:36px}
  .topstrip .left{display:flex;flex-wrap:wrap;gap:.3rem 1.4rem}
  .topstrip a{display:inline-flex;align-items:center;gap:.4rem;transition:color .2s}
  .topstrip a:hover,.topstrip a:focus-visible{color:#fff}
  .topstrip svg{width:13px;height:13px;flex:none;opacity:.75}

  /* ═══════════════ YAPIŞKAN BAŞLIK ═══════════════ */
  .site-header{
    position:sticky;
    top:0;
    z-index:900;
    background:var(--white);
    border-bottom:1px solid var(--hairline);
    transition:box-shadow .25s ease, border-color .25s ease;
  }
  .site-header.stuck{
    box-shadow:0 4px 24px -8px rgba(7,36,79,.22);
    border-bottom-color:transparent;
  }
  .hdr-inner{
    /* 2026-09-22: mega menyu paneli artıq öz nav maddəsinə görə deyil,
       başlığın MƏZMUN QUTUSUNA görə yerləşir (logo → Qiymət təklifi).
       Bunun üçün istinad qutusu burada açılır; `.nav-item.has-mega`
       isə static edilir ki, panel ondan "qaçsın". Digər (std) panellər
       əvvəlki kimi öz maddəsinə bağlı qalır. */
    position:relative;
    display:flex;
    align-items:center;
    gap:1.5rem;
    height:var(--hdr-h);
    transition:height .25s ease;
  }
  .site-header.stuck .hdr-inner{height:var(--hdr-h-sticky)}

  /* logo */
  .brand{flex:none;display:flex;align-items:center}
  .brand img{
    height:38px;width:auto;
    transition:height .25s ease;
  }
  .site-header.stuck .brand img{height:30px}
  .brand::after{
    content:"";
    width:1px;height:34px;
    background:var(--hairline);
    margin-left:1.4rem;
  }
  .brand-note{
    flex:none;
    margin-left:-.4rem;
    font-size:.7rem;
    line-height:1.25;
    letter-spacing:.09em;
    text-transform:uppercase;
    color:var(--ink-3);
    max-width:96px;
  }

  /* ana menü */
  .mainnav{
    flex:1;
    display:flex;
    justify-content:center;
    gap:.35rem;
    align-self:stretch;
  }
  .nav-item{position:relative;display:flex;align-items:center}
  /* Yalnız mega panelli maddə: panel .hdr-inner-ə bağlansın deyə static.
     Sinif PHP-də verilir (header.php) — :has() selektoruna güvənilmir. */
  .nav-item.has-mega{position:static}
  .nav-link{
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    padding:.55rem .9rem;
    font-size:.9rem;
    font-weight:600;
    letter-spacing:.005em;
    color:var(--ink);                /* SİYAH */
    white-space:nowrap;
    border-radius:4px;
    transition:color .18s ease, background .18s ease;
  }
  .nav-link .caret{
    width:9px;height:9px;flex:none;
    transition:transform .22s ease, color .18s ease;
    color:var(--ink-3);
  }
  .nav-link:hover,
  .nav-link:focus-visible,
  .nav-item.open > .nav-link{
    color:var(--brand-hover);        /* HOVER: logo rengi */
  }
  .nav-item.open > .nav-link{background:var(--brand-tint)}
  .nav-item.open > .nav-link .caret{transform:rotate(180deg);color:var(--brand-hover)}
  .nav-link:focus-visible{outline:2px solid var(--brand-hover);outline-offset:2px}
  /* açılır menyu tetikleyicisi: link deyil, amma interaktiv görünür */
  .nav-link.is-trigger{cursor:pointer;-webkit-user-select:none;user-select:none}

  /* aktif menü altındaki ince marka çizgisi */
  .nav-item.open > .nav-link::after{
    content:"";
    position:absolute;
    left:.9rem;right:.9rem;bottom:-1px;
    height:2px;
    background:var(--brand-hover);
  }

  /* sağ kontroller */
  .hdr-tools{flex:none;display:flex;align-items:center;gap:.5rem}
  .icon-btn{
    width:38px;height:38px;
    display:grid;place-items:center;
    border-radius:50%;
    color:var(--ink);
    transition:color .18s ease, background .18s ease;
  }
  .icon-btn svg{width:18px;height:18px}
  .icon-btn:hover,.icon-btn:focus-visible{color:var(--brand-hover);background:var(--brand-tint)}
  .icon-btn:focus-visible{outline:2px solid var(--brand-hover);outline-offset:2px}

  .quote-btn{
    display:inline-flex;align-items:center;gap:.45rem;
    padding:.62rem 1.25rem;
    background:var(--brand);
    color:#fff;
    font-size:.83rem;font-weight:600;letter-spacing:.02em;
    border-radius:999px;          /* oval / kapsül kenar */
    white-space:nowrap;
    transition:background .2s ease;
  }
  .quote-btn:hover,.quote-btn:focus-visible{background:var(--brand-hover)}
  .quote-btn:focus-visible{outline:2px solid var(--brand-hover);outline-offset:2px}
  .quote-btn svg{width:15px;height:15px}

  /* ── dil seçici: yuvarlak bayrak + qlobus ─────── */
  .lang{position:relative;display:flex;align-items:center}
  .lang-trigger{
    display:inline-flex;align-items:center;gap:.42rem;
    padding:.3rem .55rem .3rem .34rem;
    border:1px solid var(--hairline);
    border-radius:999px;
    transition:border-color .18s ease, color .18s ease;
    color:var(--ink);
  }
  .lang-trigger:hover,.lang-trigger:focus-visible,.lang.open .lang-trigger{
    border-color:var(--brand-hover);
    color:var(--brand-hover);
  }
  .lang-trigger:focus-visible{outline:2px solid var(--brand-hover);outline-offset:2px}
  .flag{
    width:26px;height:26px;flex:none;
    border-radius:50%;
    display:block;
    box-shadow:0 0 0 1px rgba(7,36,79,.14) inset;
  }
  .lang-code{font-size:.78rem;font-weight:600;letter-spacing:.06em}
  .lang-globe{width:14px;height:14px;flex:none;opacity:.8}

  .lang-panel{
    position:absolute;
    top:calc(100% + 10px);
    right:0;
    min-width:196px;
    background:#fff;
    border:1px solid var(--hairline);
    border-radius:6px;
    box-shadow:0 18px 42px -14px rgba(7,36,79,.3);
    padding:.4rem;
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .lang.open .lang-panel{opacity:1;visibility:visible;transform:none}
  .lang-opt{
    display:flex;align-items:center;gap:.6rem;
    width:100%;
    padding:.5rem .6rem;
    border-radius:4px;
    font-size:.85rem;font-weight:500;
    transition:background .16s ease,color .16s ease;
  }
  .lang-opt .flag{width:22px;height:22px}
  .lang-opt:hover{background:var(--brand-tint);color:var(--brand-hover)}
  .lang-opt[aria-current="true"]{background:var(--brand-tint);color:var(--brand)}
  .lang-opt .tick{margin-left:auto;width:14px;height:14px;color:var(--brand)}
  .lang-soon{
    margin:.3rem .6rem .25rem;
    padding-top:.45rem;
    border-top:1px solid var(--hairline-2);
    font-size:.7rem;
    line-height:1.4;
    color:var(--ink-3);
  }

  /* ═══════════════ AÇILIR MENÜLER ═══════════════ */
  .panel{
    position:absolute;
    top:calc(100% + 1px);
    background:#fff;
    border:1px solid var(--hairline);
    border-top:2px solid var(--brand);
    border-radius:0 0 8px 8px;
    box-shadow:0 26px 60px -20px rgba(7,36,79,.32);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .22s ease, transform .22s ease, visibility .22s;
    white-space:normal;
  }
  .nav-item.open .panel{opacity:1;visibility:visible;transform:none}

  /* — Məhsullar: geniş mega panel — */
  .panel-mega{
    /* Başlığın məzmun qutusunun iç kənarlarına yapışır — .wrap-ın
       padding-i ilə eyni clamp() dəyəri, ona görə sol kənar logonun
       başlanğıcı, sağ kənar "Qiymət təklifi" düyməsinin sonu ilə
       dəqiq üst-üstə düşür, ekran enindən asılı olmayaraq. */
    left:clamp(1rem,3vw,2rem);
    right:clamp(1rem,3vw,2rem);
    width:auto;
    transform:translateY(-8px);
    /* Panel öz nav maddəsinin MƏRKƏZİNƏ görə yerləşir; ona görə eni
       maddənin mərkəzindən ekran kənarına olan məsafədən böyük olsa
       viewport-dan çıxır. Ölçüldü: 1180px 1280-də sola 4px, 980-də
       63px çıxırdı — səhifə üfüqi sürüşürdü, panel açılanda sol
       kənarı kəsilirdi. Enlər ölçmə ilə seçildi. */
    display:grid;
    grid-template-columns:236px 1fr 300px;
  }
  @media (max-width:1200px){
    .panel-mega{grid-template-columns:200px 1fr 240px}
  }
  .nav-item.open .panel-mega{transform:none}

  /* sütun 1: ana kategoriya raylı */
  .cat-rail{
    background:linear-gradient(180deg,#F7F9FB,#F2F5F8);
    border-right:1px solid var(--hairline);
    padding:.7rem;
    border-radius:0 0 0 7px;
  }
  .rail-label{
    font-family:"IBM Plex Mono",monospace;
    font-size:.63rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink-3);
    padding:.5rem .6rem .6rem;
  }
  .rail-btn{
    display:flex;align-items:center;gap:.7rem;
    width:100%;
    padding:.85rem .7rem;
    border-radius:5px;
    text-align:left;
    transition:background .16s ease,color .16s ease;
    color:var(--ink);
  }
  .rail-btn .ic{
    width:34px;height:34px;flex:none;
    display:grid;place-items:center;
    border-radius:5px;
    background:#fff;
    border:1px solid var(--hairline);
    color:var(--brand);
    transition:background .16s,border-color .16s,color .16s;
  }
  .rail-btn .ic svg{width:18px;height:18px}
  .rail-btn .tx{min-width:0;flex:1}
  .rail-btn .nm{display:block;font-size:.9rem;font-weight:600;line-height:1.3}
  .rail-btn .ct{
    display:block;
    font-family:"IBM Plex Mono",monospace;
    font-size:.66rem;letter-spacing:.06em;color:var(--ink-3);margin-top:.12rem;
  }
  .rail-btn .arw{width:14px;height:14px;flex:none;color:var(--ink-3);opacity:0;transform:translateX(-4px);transition:.18s}
  .rail-btn:hover,.rail-btn:focus-visible{color:var(--brand-hover);background:#fff}
  .rail-btn:focus-visible{outline:2px solid var(--brand-hover);outline-offset:-2px}
  .rail-btn[aria-selected="true"]{background:#fff;color:var(--brand);box-shadow:0 2px 10px -4px rgba(7,36,79,.2)}
  .rail-btn[aria-selected="true"] .ic{background:var(--brand);border-color:var(--brand);color:#fff}
  .rail-btn[aria-selected="true"] .arw,.rail-btn:hover .arw{opacity:1;transform:none}

  /* sütun 2: alt kategoriyalar */
  .sub-wrap{padding:1.15rem 1.4rem 1.25rem}
  .sub-head{
    display:flex;align-items:baseline;gap:.7rem;
    padding-bottom:.7rem;margin-bottom:.85rem;
    border-bottom:1px solid var(--hairline-2);
  }
  .sub-head h3{
    margin:0;font-size:1rem;font-weight:700;letter-spacing:-.01em;color:var(--ink);
  }
  .sub-head .all{
    margin-left:auto;
    font-size:.77rem;font-weight:600;color:var(--brand-hover);
    display:inline-flex;align-items:center;gap:.3rem;
    transition:gap .18s ease;
  }
  .sub-head .all:hover{gap:.55rem}
  .sub-head .all svg{width:12px;height:12px}

  .sub-list{display:none;grid-template-columns:1fr 1fr;gap:.05rem 1.6rem}
  .sub-list.active{display:grid}
  .sub-list.one-col{grid-template-columns:1fr}
  .sub-list a{
    display:flex;align-items:center;gap:.5rem;
    padding:.36rem .45rem .36rem .1rem;
    font-size:.845rem;
    line-height:1.35;
    color:var(--ink);                 /* SİYAH */
    border-radius:4px;
    transition:color .16s ease,background .16s ease;
  }
  .sub-list a::before{
    content:"";
    width:5px;height:5px;flex:none;
    border-radius:1px;
    background:var(--hairline);
    transition:background .16s ease,transform .16s ease;
  }
  .sub-list a:hover,.sub-list a:focus-visible{
    color:var(--brand-hover);         /* HOVER: logo rengi */
    background:var(--brand-tint);
  }
  .sub-list a:hover::before{background:var(--brand-hover);transform:scale(1.35)}
  .sub-list a:focus-visible{outline:2px solid var(--brand-hover);outline-offset:-2px}

  /* sütun 3: sağdaki İKİ DİKDÖRTGEN görsel */
  .promo{
    padding:1.15rem 1.25rem 1.25rem 0;
    display:grid;
    grid-template-rows:1fr 1fr;
    gap:.7rem;
  }
  .promo-card{
    position:relative;
    display:block;
    min-height:152px;
    border-radius:6px;
    overflow:hidden;
    background:var(--brand);
    isolation:isolate;
  }
  .promo-card .art{position:absolute;inset:0;z-index:0;opacity:.9}
  .promo-card::after{
    content:"";
    position:absolute;inset:0;z-index:1;
    background:linear-gradient(200deg,rgba(7,36,79,.15) 0%,rgba(7,36,79,.86) 72%);
  }
  /* üzerinde başlık olmayan kart: karartma yalnız alt şeritte —
     teknik çizim net görünsün, "Kəşf et" yine okunur kalsın */
  .promo-card.is-bare::after{
    background:linear-gradient(180deg,rgba(7,36,79,0) 46%,rgba(7,36,79,.30) 68%,rgba(7,36,79,.78) 100%);
  }
  .promo-card.is-bare .cap{padding-bottom:.85rem}
  .promo-card.is-bare .go{margin-top:0;font-size:.78rem;letter-spacing:.03em}
  .promo-card .cap{
    position:relative;z-index:2;
    height:100%;
    display:flex;flex-direction:column;justify-content:flex-end;
    padding:.95rem 1rem;
    color:#fff;
  }
  .promo-card .kt{
    font-family:"IBM Plex Mono",monospace;
    font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;
    color:rgba(255,255,255,.72);margin-bottom:.3rem;
  }
  .promo-card .tl{font-size:.95rem;font-weight:700;line-height:1.2;letter-spacing:-.01em}
  .promo-card .go{
    margin-top:.5rem;
    display:inline-flex;align-items:center;gap:.35rem;
    font-size:.74rem;font-weight:600;color:#fff;
    transition:gap .2s ease;
  }
  .promo-card .go svg{width:12px;height:12px}
  .promo-card:hover .go{gap:.6rem}
  .promo-card:hover .art{transform:scale(1.06)}
  .promo-card .art{transition:transform .6s cubic-bezier(.2,.7,.3,1)}
  .promo-card:focus-visible{outline:2px solid var(--brand-hover);outline-offset:3px}

  /* — Korporativ / Həllər: tek görselli panel — */
  .panel-std{
    left:0;
    /* Maddənin SOL kənarından açılır: en, maddədən sağ ekran kənarına
       olan boşluqdan böyük olmamalıdır. Ölçüldü: 680px "Həllər"
       maddəsində hər enin hamısında sağa çıxırdı (1280-də +47,
       1024-də +139, 980-də +174). */
    width:min(560px,calc(100vw - 2.5rem));
    display:grid;
    grid-template-columns:1fr 200px;
  }
  @media (max-width:1100px){
    .panel-std{width:min(430px,calc(100vw - 2.5rem));grid-template-columns:1fr 150px}
  }
  /* 941–1000px: naviqasiya təzə açılıb, "Həllər" maddəsi sağa yaxın
     durur (ölçüldü: 941px-də sol kənarı 519 → boş yer 402px) */
  @media (max-width:1000px){
    .panel-std{width:min(390px,calc(100vw - 2.5rem))}
  }
  .panel-std.right{left:auto;right:0}
  .std-list{padding:1.05rem 1.1rem}
  .std-list a{
    display:flex;gap:.75rem;align-items:flex-start;
    padding:.6rem .65rem;
    border-radius:5px;
    color:var(--ink);
    transition:background .16s ease,color .16s ease;
  }
  .std-list a .ic{
    width:32px;height:32px;flex:none;
    display:grid;place-items:center;
    border-radius:5px;
    background:var(--brand-tint);
    color:var(--brand);
    transition:background .16s,color .16s;
  }
  .std-list a .ic svg{width:16px;height:16px}
  .std-list a .nm{display:block;font-size:.87rem;font-weight:600;line-height:1.3}
  .std-list a .ds{display:block;font-size:.755rem;line-height:1.4;color:var(--ink-2);margin-top:.12rem}
  .std-list a:hover,.std-list a:focus-visible{background:var(--brand-tint);color:var(--brand-hover)}
  .std-list a:hover .ic{background:var(--brand);color:#fff}
  .std-list a:hover .ds{color:var(--brand-mid)}
  .std-list a:focus-visible{outline:2px solid var(--brand-hover);outline-offset:-2px}

  .std-figure{
    position:relative;
    overflow:hidden;
    border-radius:0 0 7px 0;
    background:var(--brand);
    isolation:isolate;
  }
  .panel-std.right .std-figure{border-radius:0 0 0 0}
  .std-figure .art{position:absolute;inset:0;z-index:0}
  .std-figure::after{
    content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(180deg,rgba(7,36,79,.2),rgba(7,36,79,.9));
  }
  .std-figure .cap{
    position:relative;z-index:2;height:100%;
    display:flex;flex-direction:column;justify-content:flex-end;
    padding:1rem;color:#fff;
  }
  .std-figure .kt{
    font-family:"IBM Plex Mono",monospace;
    font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;
    color:rgba(255,255,255,.72);margin-bottom:.28rem;
  }
  .std-figure .tl{font-size:.9rem;font-weight:700;line-height:1.22}

  /* ═══════════════ SLAYDER ═══════════════ */
  .hero{
    position:relative;
    background:var(--brand);
    overflow:hidden;
    isolation:isolate;
  }
  .slide{
    position:absolute;inset:0;
    opacity:0;
    visibility:hidden;
    transition:opacity .9s ease, visibility .9s;
  }
  .slide.on{opacity:1;visibility:visible;position:relative}
  .slide-art{position:absolute;inset:0;z-index:0;animation:kb 22s ease-in-out infinite alternate}
  @keyframes kb{from{transform:scale(1)}to{transform:scale(1.09)}}
  .slide::after{
    content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(100deg,rgba(4,22,48,.94) 0%,rgba(6,30,64,.8) 46%,rgba(7,36,79,.42) 100%);
  }
  .slide-inner{
    position:relative;z-index:2;
    min-height:clamp(430px,58vh,560px);
    display:flex;flex-direction:column;justify-content:center;
    padding:clamp(2.5rem,6vw,4.5rem) 0;
    max-width:640px;
  }
  .slide .eyebrow{
    display:inline-flex;align-items:center;gap:.55rem;
    align-self:flex-start;
    font-family:"IBM Plex Mono",monospace;
    font-size:.68rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
    color:#fff;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.24);
    padding:.36rem .8rem;
    border-radius:999px;
    margin-bottom:1.15rem;
  }
  .slide .eyebrow i{width:7px;height:7px;border-radius:50%;background:#7FD1F0;flex:none;display:block}
  .slide h2{
    margin:0;
    font-size:clamp(1.85rem,1.1rem + 3vw,3.15rem);
    font-weight:700;
    line-height:1.06;
    letter-spacing:-.026em;
    color:#fff;
    text-wrap:balance;
  }
  .slide p{
    margin:1rem 0 0;
    max-width:50ch;
    font-size:clamp(.95rem,.9rem + .22vw,1.1rem);
    line-height:1.6;
    color:rgba(255,255,255,.85);
    text-wrap:pretty;
  }
  .slide .spec{
    display:flex;flex-wrap:wrap;gap:.45rem .5rem;
    margin-top:1.35rem;
  }
  .slide .spec span{
    font-family:"IBM Plex Mono",monospace;
    font-size:.72rem;letter-spacing:.05em;
    color:#fff;
    background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.18);
    padding:.3rem .6rem;border-radius:3px;
    font-variant-numeric:tabular-nums;
  }
  .slide .cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.9rem}
  .btn-1,.btn-2{
    display:inline-flex;align-items:center;gap:.5rem;
    padding:.78rem 1.35rem;
    font-size:.87rem;font-weight:600;letter-spacing:.01em;
    border-radius:4px;
    transition:background .2s ease,color .2s ease,border-color .2s ease,gap .2s ease;
  }
  .btn-1{background:#fff;color:var(--brand)}
  .btn-1:hover,.btn-1:focus-visible{background:var(--brand-tint);gap:.75rem}
  .btn-2{border:1px solid rgba(255,255,255,.42);color:#fff}
  .btn-2:hover,.btn-2:focus-visible{border-color:#fff;background:rgba(255,255,255,.1);gap:.75rem}
  .btn-1:focus-visible,.btn-2:focus-visible{outline:2px solid #fff;outline-offset:3px}
  .btn-1 svg,.btn-2 svg{width:14px;height:14px}

  /* slayder kontrolleri */
  .hero-ctrl{
    position:absolute;z-index:5;
    right:clamp(1rem,3vw,2rem);
    bottom:clamp(1.2rem,3vw,2rem);
    display:flex;align-items:center;gap:.5rem;
  }
  .arw-btn{
    width:42px;height:42px;
    display:grid;place-items:center;
    border:1px solid rgba(255,255,255,.34);
    border-radius:50%;
    color:#fff;
    transition:background .2s,border-color .2s;
  }
  .arw-btn svg{width:16px;height:16px}
  .arw-btn:hover,.arw-btn:focus-visible{background:rgba(255,255,255,.16);border-color:#fff}
  .arw-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}

  .dots{
    position:absolute;z-index:5;
    left:clamp(1rem,3vw,2rem);
    bottom:clamp(1.2rem,3vw,2rem);
    display:flex;align-items:center;gap:.55rem;
  }
  .dot{
    width:34px;height:3px;
    background:rgba(255,255,255,.3);
    border-radius:2px;
    position:relative;
    overflow:hidden;
    transition:background .2s;
  }
  .dot:hover{background:rgba(255,255,255,.5)}
  .dot[aria-current="true"]{background:rgba(255,255,255,.32)}
  .dot[aria-current="true"]::after{
    content:"";position:absolute;inset:0;
    background:#fff;
    transform-origin:left;
    animation:fill 6.5s linear forwards;
  }
  @keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  .dot:focus-visible{outline:2px solid #fff;outline-offset:4px}
  /* ── görsel kutuları: DB'de resim yoksa da tasarlanmış görünür ── */
  .art,
  .slide-art{
    background-color:var(--brand);
    background-image:
      linear-gradient(160deg,var(--brand-mid) 0%,#04162F 100%),
      repeating-linear-gradient(0deg,rgba(156,200,240,.10) 0 1px,transparent 1px 44px),
      repeating-linear-gradient(90deg,rgba(156,200,240,.10) 0 1px,transparent 1px 44px);
    background-repeat:no-repeat,repeat,repeat;
    background-position:center;
    background-size:cover,auto,auto;
  }


  /* ═══════════════ MOBİL ═══════════════ */
  .burger{display:none}
  .mobile{display:none}

  @media (max-width:1080px){
    .brand-note{display:none}
    .nav-link{padding:.5rem .62rem;font-size:.85rem}
    /* 941–1080px aralığında naviqasiya AÇILIR (mobil menyu 940-da bitir),
       amma bu düymə də yerində qalırdı: ölçüldü, başlıq sətri 941px-də
       viewport-dan +35px çıxırdı və səhifə üfüqi sürüşürdü. Bu aralıqda
       düymə gizlənir — əlaqə üst zolaqda və CTA bölməsində onsuz da var. */
    .quote-btn{display:none}
  }
  @media (max-width:940px){
    .mainnav,.quote-btn{display:none}
    .burger{display:grid}
    .mobile{
      display:block;
      max-height:0;overflow:hidden;
      background:#fff;border-top:1px solid var(--hairline);
      transition:max-height .35s ease;
    }
    .mobile.open{max-height:min(76vh,660px);overflow-y:auto}
    .m-row{border-bottom:1px solid var(--hairline-2)}
    .m-top{
      display:flex;align-items:center;justify-content:space-between;
      width:100%;padding:.95rem clamp(1rem,3vw,2rem);
      font-size:.92rem;font-weight:600;color:var(--ink);
    }
    .m-top:hover{color:var(--brand-hover)}
    .m-top svg{width:13px;height:13px;color:var(--ink-3);transition:transform .25s}
    .m-row.open .m-top{color:var(--brand-hover)}
    .m-row.open .m-top svg{transform:rotate(180deg);color:var(--brand-hover)}
    .m-body{max-height:0;overflow:hidden;transition:max-height .3s ease;background:#F8FAFB}
    .m-row.open .m-body{max-height:1400px}
    .m-body a{
      display:block;padding:.6rem clamp(1.6rem,5vw,2.6rem);
      font-size:.845rem;color:var(--ink);
      border-bottom:1px solid rgba(0,0,0,.04);
    }
    .m-body a:hover{color:var(--brand-hover);background:var(--brand-tint)}
    .m-body .m-cat{
      padding:.7rem clamp(1.3rem,4vw,2.2rem) .35rem;
      font-family:"IBM Plex Mono",monospace;
      font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;color:var(--brand);
      background:var(--brand-tint);
    }
    .m-quote{margin:1rem clamp(1rem,3vw,2rem) 1.3rem}
    .slide-inner{min-height:400px}
  }

  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
    .slide-art{animation:none}
  }

  /* demo notu */
  .demo-note{
    background:#FFF9E8;
    border-top:1px solid #F0DFAE;
    border-bottom:1px solid #F0DFAE;
    padding:1rem 0;
    font-size:.8rem;line-height:1.55;color:#6B551A;
  }
  .demo-note b{color:#4E3D0B}
  .demo-note .wrap{display:flex;gap:.7rem;align-items:flex-start}
  .demo-note svg{width:16px;height:16px;flex:none;margin-top:.15rem}
  /* ═══════════════════════════════════════════════════════
     ANA SAYFA BÖLMƏLƏRİ — foto əsaslı, oval künclü, animasyonlu
     ═══════════════════════════════════════════════════════ */

  /* ── scroll ilə görünmə: yüngül "zıplama" (overshoot) ──
     ÖNEMLİ: gizleme yalnız <html class="js-rv"> varsa uygulanır. O sınıfı
     head'deki küçük satır içi script, IntersectionObserver desteği VE
     reduced-motion kapalı olduğunda ekliyor. JS bloke olsa / hata verse /
     hiç çalışmasa içerik olduğu gibi GÖRÜNÜR kalır — animasyon bir
     iyileştirme, görünürlük şartı değil. */
  .js-rv [data-rv]{
    opacity:0;
    transform:translateY(30px) scale(.975);
    transition:opacity .55s ease, transform .75s cubic-bezier(.18,1.42,.32,1);
    transition-delay:calc(var(--i,0) * 80ms);
    will-change:opacity,transform;
  }
  .js-rv [data-rv].in{opacity:1;transform:none}
  .js-rv [data-rv="left"]{transform:translateX(-34px)}
  .js-rv [data-rv="right"]{transform:translateX(34px)}
  .js-rv [data-rv="pop"]{transform:translateY(18px) scale(.9)}
  .js-rv [data-rv="pop"].in{transform:none}

  .sec{padding:clamp(3.6rem,6.5vw,6rem) 0;overflow:hidden}
  .sec--surface{background:#F4F6F8;border-block:1px solid var(--hairline)}

  .sec-head{max-width:64ch;margin:0 0 clamp(2rem,3.8vw,2.9rem)}
  .sec-head .rule{width:56px;height:3px;background:var(--brand);border-radius:2px;margin:0 0 1.15rem;transition:width .8s cubic-bezier(.2,.9,.3,1) .1s}
  .js-rv .sec-head .rule{width:0}
  .js-rv .sec-head .rule.in{width:56px}
  .sec-head h2{
    margin:0;font-size:clamp(1.6rem,1.15rem + 1.7vw,2.35rem);font-weight:700;
    line-height:1.1;letter-spacing:-.024em;color:var(--ink);text-wrap:balance;
  }
  .sec-head p{margin:.75rem 0 0;font-size:1.03rem;line-height:1.6;color:var(--ink-2);text-wrap:pretty}

  /* ═══ MƏHSUL QRUPLARI — foto dolu, dikey, oval künc ═══ */
  .kat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.35rem}
  .kat-card{
    position:relative;display:block;overflow:hidden;
    aspect-ratio:4/5;
    border-radius:22px;
    background:var(--brand);
    isolation:isolate;
    box-shadow:0 4px 18px -10px rgba(7,36,79,.3);
    transition:box-shadow .4s ease, transform .4s cubic-bezier(.2,.8,.3,1);
  }
  .kat-card:hover,.kat-card:focus-visible{
    transform:translateY(-6px);
    box-shadow:0 30px 60px -26px rgba(7,36,79,.55);
  }
  .kat-card:focus-visible{outline:2px solid var(--brand-hover);outline-offset:4px}
  .kat-card .ph{
    position:absolute;inset:0;z-index:0;
    background-size:cover;background-position:center;
    transform:scale(1.04);
    transition:transform 1.1s cubic-bezier(.2,.7,.3,1), filter .5s ease;
  }
  .kat-card:hover .ph{transform:scale(1.13)}
  .kat-card::after{
    content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(178deg,rgba(4,18,40,.10) 0%,rgba(5,24,52,.42) 42%,rgba(6,30,64,.88) 100%);
    transition:background .4s ease;
  }
  .kat-card:hover::after{background:linear-gradient(178deg,rgba(4,18,40,.18) 0%,rgba(5,24,52,.52) 42%,rgba(6,30,64,.93) 100%)}
  .kat-card .inner{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;padding:1.4rem}
  .kat-card .badge{
    width:50px;height:50px;flex:none;display:grid;place-items:center;
    border-radius:14px;color:#fff;
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.26);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    transition:background .3s ease,transform .45s cubic-bezier(.2,1.3,.3,1);
  }
  .kat-card:hover .badge{background:rgba(255,255,255,.24);transform:scale(1.08) rotate(-4deg)}
  .kat-card .badge svg{width:25px;height:25px}
  .kat-card .foot{margin-top:auto}
  .kat-card h3{
    margin:0 0 .5rem;font-size:1.32rem;font-weight:700;line-height:1.16;
    letter-spacing:-.016em;color:#fff;text-wrap:balance;
  }
  .kat-card p{
    margin:0 0 .9rem;font-size:.855rem;line-height:1.52;color:rgba(255,255,255,.8);
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  }
  .kat-card .tags{display:flex;flex-wrap:wrap;gap:.34rem;margin:0 0 1rem}
  .kat-card .tags span{
    font-size:.7rem;line-height:1.3;color:#fff;
    background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);
    border-radius:999px;padding:.24rem .6rem;
  }
  .kat-card .go{
    display:inline-flex;align-items:center;gap:.5rem;
    font-size:.83rem;font-weight:600;color:#fff;
  }
  .kat-card .go i{
    width:30px;height:30px;display:grid;place-items:center;border-radius:50%;
    background:#fff;color:var(--brand);
    transition:transform .4s cubic-bezier(.2,1.3,.3,1);
  }
  .kat-card:hover .go i{transform:translateX(5px)}
  .kat-card .go svg{width:13px;height:13px}

  /* ═══ HƏLLƏR — fotolu, oval künc ═══ */
  /* masaüstünde tam 3 sütun (yan-yana), sonra 2, en darda 1 */
  .sol-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
  @media (max-width:940px){.sol-grid{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:600px){.sol-grid{grid-template-columns:1fr}}
  .sol-card{
    display:flex;flex-direction:column;overflow:hidden;
    background:#fff;border:1px solid var(--hairline);border-radius:18px;
    transition:border-color .25s ease,box-shadow .3s ease,transform .35s cubic-bezier(.2,.8,.3,1);
  }
  .sol-card:hover{border-color:var(--brand-hover);box-shadow:0 24px 50px -28px rgba(7,36,79,.45);transform:translateY(-5px)}
  .sol-card .ph{
    position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:17px 17px 0 0;
    background-size:cover;background-position:center;
    transition:transform .9s cubic-bezier(.2,.7,.3,1);
  }
  .sol-card .phwrap{overflow:hidden;border-radius:17px 17px 0 0}
  .sol-card:hover .ph{transform:scale(1.07)}
  .sol-card .ph::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(7,36,79,.06),rgba(7,36,79,.42));
  }
  .sol-card .ic{
    position:absolute;left:.85rem;bottom:.85rem;z-index:2;
    width:38px;height:38px;display:grid;place-items:center;border-radius:11px;
    background:rgba(255,255,255,.9);color:var(--brand);
    backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
    transition:background .25s,color .25s,transform .4s cubic-bezier(.2,1.3,.3,1);
  }
  .sol-card:hover .ic{background:var(--brand);color:#fff;transform:scale(1.1)}
  .sol-card .ic svg{width:19px;height:19px}
  .sol-card .body{padding:1.05rem 1.2rem 1.2rem}
  .sol-card h3{margin:0 0 .34rem;font-size:1rem;font-weight:600;line-height:1.28;color:var(--ink)}
  .sol-card p{margin:0;font-size:.855rem;line-height:1.52;color:var(--ink-2)}

  /* ═══ CTA BANDI — fotolu, Ken Burns ═══ */
  .cta-band{
    position:relative;overflow:hidden;isolation:isolate;
    background:var(--brand);color:#fff;
    padding:clamp(2.8rem,5vw,4rem) 0;
  }
  .cta-band .ph{
    position:absolute;inset:-4%;z-index:0;
    background-size:cover;background-position:center;
    animation:cta-kb 26s ease-in-out infinite alternate;
  }
  @keyframes cta-kb{from{transform:scale(1) translateY(0)}to{transform:scale(1.12) translateY(-2%)}}
  .cta-band::after{
    content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(100deg,rgba(4,20,44,.95) 0%,rgba(7,36,79,.86) 55%,rgba(10,55,121,.7) 100%);
  }
  .cta-band .wrap{position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.7rem 2.6rem}
  .cta-band h2{margin:0 0 .55rem;font-size:clamp(1.35rem,1rem + 1.3vw,1.95rem);font-weight:700;line-height:1.13;letter-spacing:-.02em;text-wrap:balance}
  .cta-band p{margin:0;font-size:1rem;line-height:1.55;color:rgba(255,255,255,.85);max-width:54ch}
  .cta-band .acts{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
  .cta-band .b1,.cta-band .b2{
    display:inline-flex;align-items:center;gap:.5rem;padding:.82rem 1.5rem;
    font-size:.89rem;font-weight:600;border-radius:999px;
    transition:background .25s,color .25s,border-color .25s,gap .25s,transform .3s cubic-bezier(.2,1.3,.3,1);
  }
  /* renk değişkeni herhangi bir sebeple düşerse buton beyaz-üstü-beyaz kalmasın:
     metin rengi sabit hex, arka plan beyaz. */
  .cta-band .b1{background:#fff;color:#07244F;box-shadow:0 10px 26px -12px rgba(0,0,0,.5)}
  .cta-band .b1:hover{background:#E2EDFC;color:#07244F;gap:.78rem;transform:translateY(-2px)}
  .cta-band .b1 svg{color:#07244F}
  .cta-band .b2{border:1px solid rgba(255,255,255,.46);color:#fff}
  .cta-band .b2:hover{border-color:#fff;background:rgba(255,255,255,.12);gap:.78rem;transform:translateY(-2px)}
  .cta-band .b1 svg,.cta-band .b2 svg{width:15px;height:15px}

  /* ═══════════════ FOOTER ═══════════════ */
  .site-footer{background:#F4F6F8;border-top:1px solid var(--hairline);color:var(--ink)}
  .foot-main{
    display:grid;
    grid-template-columns:minmax(232px,1.3fr) repeat(3,minmax(140px,1fr)) minmax(190px,1.05fr);
    gap:2rem 2.2rem;
    padding:clamp(2.8rem,5vw,3.8rem) 0 clamp(2rem,4vw,2.8rem);
  }
  .foot-brand img{height:34px;width:auto;margin-bottom:1rem}
  .foot-brand p{margin:0 0 1.15rem;font-size:.86rem;line-height:1.6;color:var(--ink-2);max-width:34ch}
  .foot-contact{display:flex;flex-direction:column;gap:.45rem}
  .foot-contact a{
    display:inline-flex;align-items:center;gap:.5rem;
    font-size:.88rem;font-weight:600;color:var(--ink);transition:color .18s ease,gap .2s ease;
  }
  .foot-contact a:hover{color:var(--brand-hover);gap:.65rem}
  .foot-contact svg{width:15px;height:15px;flex:none;color:var(--brand)}
  .foot-col h3{
    margin:0 0 .9rem;padding-bottom:.55rem;
    font-size:.755rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--brand);
    border-bottom:1px solid var(--hairline);
  }
  .foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.42rem}
  .foot-col a{
    display:inline-block;font-size:.855rem;line-height:1.45;color:var(--ink);
    transition:color .18s ease,transform .18s ease;
  }
  .foot-col a:hover{color:var(--brand-hover);transform:translateX(3px)}
  /* tanıtım mətninin ALTINDA, əlaqə linklərindən əvvəl (istifadəçi istəyi) */
  .foot-social{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 1.15rem}
  .foot-social a{
    width:36px;height:36px;display:grid;place-items:center;border-radius:50%;
    border:1px solid var(--hairline);color:var(--ink-2);background:#fff;
    transition:border-color .2s,color .2s,transform .35s cubic-bezier(.2,1.35,.3,1);
  }
  .foot-social a:hover{border-color:var(--brand-hover);color:var(--brand-hover);transform:translateY(-3px)}
  .foot-social svg{width:16px;height:16px}

  /* alt şerit: SOLDA copyright · SAĞDA FalconX */
  .foot-bottom{border-top:1px solid var(--hairline);background:#fff}
  .foot-bottom .wrap{
    display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
    gap:.7rem 1.5rem;padding-top:1.1rem;padding-bottom:1.1rem;
  }
  .foot-copy{margin:0;font-size:.8rem;color:var(--ink-2)}
  .falcon{margin:0}
  .falcon p{
    margin:0;display:inline-flex;align-items:center;flex-wrap:wrap;gap:.44rem;
    font-size:.8rem;line-height:1.5;color:var(--ink-2);
  }
  .falcon a{display:inline-flex;align-items:center;line-height:0}
  .falcon img{height:19px;width:auto;display:block;opacity:.9;transition:opacity .2s ease,transform .3s ease}
  .falcon a:hover img{opacity:1;transform:translateY(-1px)}

  /* 1020px: 5 sütunlu şəbəkənin öz minimum eni 983px + kənarlar
     (232 + 3×140 + 190 + 4×2.2rem gap) — 900px-lik köhnə breakpoint
     901–1015 aralığında daşmaya icazə verirdi. */
  @media (max-width:1020px){
    .foot-main{grid-template-columns:1fr 1fr;gap:1.9rem}
    .foot-brand{grid-column:1/-1}
  }
  @media (max-width:560px){
    /* .foot-main burada TƏK SÜTUNA salınmır — mobil blokdaki 2×2
       qaydası (aşağıda, "MOBİL DÜZƏLİŞLƏR") bunu əvəz edir. */
    .cta-band .wrap{flex-direction:column;align-items:flex-start}
    .kat-card{aspect-ratio:3/4}
  }

  @media (prefers-reduced-motion:reduce){
    .js-rv [data-rv]{opacity:1!important;transform:none!important;transition:none!important}
    .sec-head .rule,.js-rv .sec-head .rule{width:56px!important;transition:none}
    .cta-band .ph{animation:none}
    .kat-card .ph,.sol-card .ph{transition:none}
  }

  /* ═══════════════════════════════════════════════════════
     HAQQIMIZDA — üst-üstə binən fotolar, sayğaclar
     ═══════════════════════════════════════════════════════ */
  .about{padding:clamp(3.6rem,6.5vw,6rem) 0;overflow:hidden}
  .about-inner{
    display:grid;grid-template-columns:1.02fr 1fr;
    gap:clamp(2rem,5vw,4.5rem);align-items:center;
  }
  .about-tx .eyebrow{
    display:inline-flex;align-items:center;gap:.5rem;
    font-family:"IBM Plex Mono",ui-monospace,monospace;
    font-size:.68rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
    color:var(--brand);background:var(--brand-tint);
    border-radius:999px;padding:.36rem .8rem;margin:0 0 1.1rem;
  }
  .about-tx .eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--brand);display:block;flex:none}
  .about-tx h2{
    margin:0 0 1rem;font-size:clamp(1.7rem,1.2rem + 2vw,2.6rem);font-weight:700;
    line-height:1.08;letter-spacing:-.026em;color:var(--ink);text-wrap:balance;
  }
  .about-tx h2 em{font-style:normal;color:var(--brand-hover)}
  .about-tx p{margin:0 0 .95rem;font-size:1rem;line-height:1.68;color:var(--ink-2);max-width:52ch;text-wrap:pretty}

  .about-cta{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1.7rem}
  .about-cta .a1,.about-cta .a2{
    display:inline-flex;align-items:center;gap:.5rem;padding:.78rem 1.4rem;
    font-size:.87rem;font-weight:600;border-radius:999px;
    transition:background .25s,color .25s,border-color .25s,gap .25s,transform .3s cubic-bezier(.2,1.3,.3,1);
  }
  .about-cta .a1{background:var(--brand);color:#fff}
  .about-cta .a1:hover{background:var(--brand-hover);gap:.75rem;transform:translateY(-2px)}
  .about-cta .a2{border:1px solid var(--hairline);color:var(--ink)}
  .about-cta .a2:hover{border-color:var(--brand-hover);color:var(--brand-hover);gap:.75rem}
  .about-cta svg{width:15px;height:15px}

  /* foto kompozisyonu */
  .about-art{position:relative;padding:0 0 3.4rem 3rem}
  .about-art .big{
    position:relative;overflow:hidden;border-radius:26px;aspect-ratio:4/3;
    box-shadow:0 34px 70px -34px rgba(7,36,79,.55);
  }
  .about-art .big .ph{
    position:absolute;inset:-3%;
    background-size:cover;background-position:center;
    animation:about-kb 30s ease-in-out infinite alternate;
  }
  @keyframes about-kb{from{transform:scale(1)}to{transform:scale(1.1)}}
  .about-art .small{
    position:absolute;left:0;bottom:0;width:47%;
    overflow:hidden;border-radius:20px;aspect-ratio:1/1;
    border:5px solid #fff;
    box-shadow:0 26px 50px -26px rgba(7,36,79,.55);
    transition:transform .5s cubic-bezier(.2,.9,.3,1);
  }
  .about-art .small:hover{transform:translateY(-6px) rotate(-1.5deg)}
  .about-art .small .ph{position:absolute;inset:0;background-size:cover;background-position:center}
  .about-art .ring{
    position:absolute;right:8%;bottom:6%;z-index:0;
    width:11rem;height:11rem;border-radius:50%;
    border:1.5px dashed rgba(7,36,79,.16);
    animation:ring-spin 34s linear infinite;
  }
  @keyframes ring-spin{to{transform:rotate(360deg)}}

  @media (max-width:900px){
    .about-inner{grid-template-columns:1fr;gap:2.2rem}
    .about-art{padding:0 0 2.6rem 2rem}
  }
  /* ═══════════════════════════════════════════════════════
     ÜZƏN ƏLAQƏ DÜYMƏLƏRİ (WhatsApp)
     ═══════════════════════════════════════════════════════ */
  .fab{
    position:fixed;right:clamp(.9rem,2.2vw,1.5rem);bottom:clamp(.9rem,2.2vw,1.5rem);
    z-index:800;display:flex;flex-direction:column;gap:.6rem;align-items:flex-end;
  }
  .fab-btn{
    position:relative;display:flex;align-items:center;gap:0;
    height:54px;width:54px;
    border-radius:999px;
    background:#25D366;color:#fff;
    box-shadow:0 12px 30px -10px rgba(37,211,102,.7);
    overflow:hidden;
    transition:width .38s cubic-bezier(.2,.85,.3,1), gap .38s ease, box-shadow .3s ease, transform .3s cubic-bezier(.2,1.3,.3,1);
  }
  .fab-btn svg{width:28px;height:28px;flex:none;margin:0 13px}
  .fab-btn .lbl{
    white-space:nowrap;font-size:.86rem;font-weight:600;letter-spacing:.01em;
    opacity:0;transform:translateX(-6px);
    transition:opacity .28s ease .06s, transform .32s ease .06s;
    padding-right:1.15rem;
  }
  .fab-btn:hover,.fab-btn:focus-visible{width:206px;transform:translateY(-3px);box-shadow:0 18px 40px -12px rgba(37,211,102,.8)}
  .fab-btn:hover .lbl,.fab-btn:focus-visible .lbl{opacity:1;transform:none}
  .fab-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
  .fab-btn::after{                            /* dikkat çeken nabız halkası */
    content:"";position:absolute;inset:0;border-radius:999px;
    border:2px solid #25D366;
    animation:fab-ping 2.8s ease-out infinite;
    pointer-events:none;
  }
  @keyframes fab-ping{0%{transform:scale(1);opacity:.65}70%,100%{transform:scale(1.45);opacity:0}}
  .fab-btn:hover::after{animation:none}

  @media (prefers-reduced-motion:reduce){
    .about-art .big .ph,.about-art .ring,.fab-btn::after{animation:none}
    .fab-btn{transition:none}
  }

  /* ── DB'de foto yoksa: kutu boş/bozuk görünmesin ── */
  .kat-card .ph,.sol-card .ph,.about-art .ph{background-color:var(--brand)}
  .kat-card .ph.art,.sol-card .ph.art{background-size:cover,auto,auto}
  /* ═══════════════════════════════════════════════════════
     KORPORATİV SƏHİFƏLƏR — paylaşılan qabıq
     ═══════════════════════════════════════════════════════ */
  .page-hero{
    position:relative;overflow:hidden;isolation:isolate;
    background:var(--brand);color:#fff;
    padding:clamp(2.8rem,6vw,4.6rem) 0 clamp(2.6rem,5vw,4rem);
    border-radius:0 0 30px 30px;
  }
  .page-hero .ph{
    position:absolute;inset:-4%;z-index:0;
    background-size:cover;background-position:center;
    animation:ph-kb 34s ease-in-out infinite alternate;
  }
  @keyframes ph-kb{from{transform:scale(1)}to{transform:scale(1.09)}}
  .page-hero::after{
    content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(105deg,rgba(4,18,40,.94) 0%,rgba(7,36,79,.86) 52%,rgba(10,55,121,.62) 100%);
  }
  .page-hero .wrap{position:relative;z-index:2}
  .crumb{
    display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;
    font-family:"IBM Plex Mono",ui-monospace,monospace;
    font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
    color:rgba(255,255,255,.6);margin:0 0 1.1rem;
  }
  .crumb a{color:rgba(255,255,255,.78);transition:color .2s}
  .crumb a:hover{color:#fff}
  .crumb svg{width:11px;height:11px;opacity:.5}
  .page-hero h1{
    margin:0;font-size:clamp(1.9rem,1.3rem + 2.4vw,3.05rem);font-weight:700;
    line-height:1.06;letter-spacing:-.026em;text-wrap:balance;max-width:24ch;
  }
  .page-hero .lead{
    margin:1rem 0 0;max-width:56ch;font-size:clamp(.98rem,.92rem + .3vw,1.12rem);
    line-height:1.6;color:rgba(255,255,255,.82);text-wrap:pretty;
  }
  .page-hero .metas{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.5rem}
  .page-hero .metas span{
    font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.71rem;letter-spacing:.05em;
    color:#fff;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.2);
    border-radius:999px;padding:.32rem .72rem;
  }

  .prose{max-width:66ch}
  .prose p{margin:0 0 1.05rem;font-size:1.02rem;line-height:1.72;color:var(--ink-2);text-wrap:pretty}
  .prose p strong{color:var(--ink);font-weight:600}
  .pull{
    margin:2rem 0;padding:1.3rem 1.5rem;
    border-left:3px solid var(--brand);border-radius:0 16px 16px 0;
    background:var(--brand-tint);
    font-size:1.05rem;line-height:1.6;color:var(--brand-mid);font-weight:500;
  }

  /* ── 4 addımlı proses ── */
  .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.1rem;counter-reset:st}
  .step{
    position:relative;background:#fff;border:1px solid var(--hairline);border-radius:18px;
    padding:1.5rem 1.4rem 1.4rem;overflow:hidden;
    transition:border-color .25s,box-shadow .3s,transform .35s cubic-bezier(.2,.8,.3,1);
  }
  .step:hover{border-color:var(--brand-hover);box-shadow:0 22px 46px -26px rgba(7,36,79,.42);transform:translateY(-4px)}
  .step .n{
    position:absolute;right:.9rem;top:.4rem;
    font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:2.9rem;font-weight:500;
    line-height:1;letter-spacing:-.05em;color:var(--brand-tint);pointer-events:none;
    transition:color .3s,transform .45s cubic-bezier(.2,1.2,.3,1);
  }
  .step:hover .n{color:var(--brand-tint-2);transform:translateY(-3px)}
  .step .ic{
    width:44px;height:44px;display:grid;place-items:center;border-radius:13px;
    background:var(--brand-tint);color:var(--brand);margin-bottom:.95rem;
    transition:background .25s,color .25s,transform .45s cubic-bezier(.2,1.35,.3,1);
  }
  .step:hover .ic{background:var(--brand);color:#fff;transform:rotate(-6deg) scale(1.06)}
  .step .ic svg{width:22px;height:22px}
  .step h3{margin:0 0 .4rem;font-size:1.03rem;font-weight:600;letter-spacing:-.008em;color:var(--ink);position:relative}
  .step p{margin:0;font-size:.87rem;line-height:1.55;color:var(--ink-2);position:relative}

  /* ── standart / sertifikat kartları ── */
  .std-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:1.1rem}
  .std-card{
    background:#fff;border:1px solid var(--hairline);border-radius:18px;padding:1.45rem 1.4rem;
    transition:border-color .25s,box-shadow .3s,transform .35s cubic-bezier(.2,.8,.3,1);
  }
  .std-card:hover{border-color:var(--brand-hover);box-shadow:0 22px 46px -26px rgba(7,36,79,.42);transform:translateY(-4px)}
  .std-card .tag{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:66px;height:38px;padding:0 .7rem;margin-bottom:1rem;
    border-radius:10px;background:var(--brand);color:#fff;
    font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:1rem;font-weight:500;letter-spacing:.06em;
  }
  .std-card h3{margin:0 0 .35rem;font-size:.98rem;font-weight:600;color:var(--ink)}
  .std-card p{margin:0;font-size:.86rem;line-height:1.55;color:var(--ink-2)}

  /* ── boş vəziyyət (məzmun hələ yoxdur) ── */
  .empty{
    display:flex;flex-direction:column;align-items:center;text-align:center;gap:.85rem;
    border:1.5px dashed var(--hairline);border-radius:20px;
    background:#fff;padding:clamp(2rem,4vw,3rem) 1.5rem;
  }
  .empty .ic{
    width:54px;height:54px;display:grid;place-items:center;border-radius:16px;
    background:var(--brand-tint);color:var(--brand);
  }
  .empty .ic svg{width:26px;height:26px}
  .empty h3{margin:0;font-size:1.06rem;font-weight:600;color:var(--ink)}
  .empty p{margin:0;max-width:52ch;font-size:.9rem;line-height:1.6;color:var(--ink-2)}
  .empty .btn{
    margin-top:.35rem;display:inline-flex;align-items:center;gap:.5rem;
    padding:.72rem 1.35rem;border-radius:999px;background:var(--brand);color:#fff;
    font-size:.86rem;font-weight:600;
    transition:background .25s,gap .25s,transform .3s cubic-bezier(.2,1.3,.3,1);
  }
  .empty .btn:hover{background:var(--brand-hover);gap:.72rem;transform:translateY(-2px)}
  .empty .btn svg{width:14px;height:14px}

  /* ── nümunə nişanı ── */
  .demo-chip{
    position:absolute;left:.8rem;top:.8rem;z-index:3;
    font-family:"IBM Plex Mono",ui-monospace,monospace;
    font-size:.6rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
    background:#8A6410;color:#fff;border-radius:999px;padding:.24rem .6rem;
  }

  /* ── sektor çipləri ── */
  .chips{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 1.9rem}
  .chips a,.chips span{
    font-size:.83rem;font-weight:500;
    border:1px solid var(--hairline);border-radius:999px;padding:.45rem .95rem;
    color:var(--ink);background:#fff;
    transition:border-color .2s,color .2s,background .2s,transform .25s;
  }
  .chips a:hover{border-color:var(--brand-hover);color:var(--brand-hover);background:var(--brand-tint);transform:translateY(-2px)}
  .chips .on{border-color:var(--brand);background:var(--brand);color:#fff}

  /* ── referans kartı ── */
  .ref-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:1.2rem}
  .ref-card{
    position:relative;overflow:hidden;border-radius:20px;aspect-ratio:4/3;
    background:var(--brand);isolation:isolate;
    transition:transform .4s cubic-bezier(.2,.8,.3,1),box-shadow .35s;
  }
  .ref-card:hover{transform:translateY(-5px);box-shadow:0 28px 56px -28px rgba(7,36,79,.5)}
  .ref-card .ph{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;
    transform:scale(1.03);transition:transform 1s cubic-bezier(.2,.7,.3,1)}
  .ref-card:hover .ph{transform:scale(1.11)}
  .ref-card::after{content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(178deg,rgba(4,18,40,.06) 0%,rgba(5,24,52,.4) 46%,rgba(6,30,64,.9) 100%)}
  .ref-card .cap{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:1.25rem}
  .ref-card .kt{
    font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.63rem;letter-spacing:.14em;
    text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:.32rem;
  }
  .ref-card h3{margin:0;font-size:1.08rem;font-weight:700;line-height:1.2;color:#fff;text-wrap:balance}
  .ref-card .meta{margin-top:.5rem;display:flex;flex-wrap:wrap;gap:.3rem}
  .ref-card .meta span{
    font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.63rem;letter-spacing:.04em;
    color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);
    border-radius:999px;padding:.2rem .55rem;
  }

  /* ── xəbər kartı ── */
  .news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(262px,1fr));gap:1.2rem}
  .news-card{
    position:relative;display:flex;flex-direction:column;overflow:hidden;
    background:#fff;border:1px solid var(--hairline);border-radius:18px;
    transition:border-color .25s,box-shadow .3s,transform .35s cubic-bezier(.2,.8,.3,1);
  }
  .news-card:hover{border-color:var(--brand-hover);box-shadow:0 22px 46px -26px rgba(7,36,79,.42);transform:translateY(-4px)}
  .news-card .ph{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:17px 17px 0 0;
    background-size:cover;background-position:center;background-color:var(--brand);
    transition:transform .9s cubic-bezier(.2,.7,.3,1)}
  .news-card:hover .ph{transform:scale(1.06)}
  .news-card .body{display:flex;flex-direction:column;flex:1;padding:1.1rem 1.2rem 1.2rem}
  .news-card time{
    font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.68rem;letter-spacing:.08em;
    color:var(--ink-3);margin-bottom:.45rem;
  }
  .news-card h3{margin:0 0 .5rem;font-size:1rem;font-weight:600;line-height:1.32;color:var(--ink);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .news-card p{margin:0 0 1rem;font-size:.86rem;line-height:1.55;color:var(--ink-2);
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .news-card .more{margin-top:auto;display:inline-flex;align-items:center;gap:.4rem;
    font-size:.82rem;font-weight:600;color:var(--brand-hover);transition:gap .25s}
  .news-card:hover .more{gap:.66rem}
  .news-card .more svg{width:12px;height:12px}

  /* ── vakansiya sətri ── */
  .jobs{display:flex;flex-direction:column;gap:.7rem}
  .job{
    position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.4rem;
    background:#fff;border:1px solid var(--hairline);border-radius:16px;
    padding:1.15rem 1.3rem;
    transition:border-color .25s,box-shadow .3s,transform .3s cubic-bezier(.2,.8,.3,1);
  }
  .job:hover{border-color:var(--brand-hover);box-shadow:0 18px 40px -24px rgba(7,36,79,.4);transform:translateY(-3px)}
  .job .tx{flex:1;min-width:200px}
  .job h3{margin:0 0 .3rem;font-size:1.02rem;font-weight:600;color:var(--ink)}
  .job .facts{display:flex;flex-wrap:wrap;gap:.3rem}
  .job .facts span{
    font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.66rem;letter-spacing:.05em;
    color:var(--brand-mid);background:var(--brand-tint);border-radius:999px;padding:.22rem .58rem;
  }
  .job .apply{
    flex:none;display:inline-flex;align-items:center;gap:.45rem;
    padding:.66rem 1.2rem;border-radius:999px;border:1px solid var(--hairline);
    font-size:.83rem;font-weight:600;color:var(--ink);
    transition:border-color .2s,color .2s,background .2s,gap .2s;
  }
  .job:hover .apply{border-color:var(--brand);background:var(--brand);color:#fff;gap:.65rem}
  .job .apply svg{width:13px;height:13px}

  /* vakansiya kartında qısa təsvir və qatlanan tələblər */
  .job .sum{
    display:block;margin:0 0 .4rem;font-size:.86rem;line-height:1.5;color:var(--ink-2);
  }
  .job-more{
    flex-basis:100%;order:3;margin-top:.15rem;
    border-top:1px solid var(--hairline);padding-top:.7rem;
  }
  .job-more>summary{
    cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:.4rem;
    font-size:.8rem;font-weight:600;color:var(--brand-mid);
  }
  .job-more>summary::-webkit-details-marker{display:none}
  .job-more>summary::after{
    content:"";width:7px;height:7px;border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-1px);
    transition:transform .2s;
  }
  .job-more[open]>summary::after{transform:rotate(-135deg) translateY(-1px)}
  .job-more>summary:hover{color:var(--brand-hover)}
  .job-more .prose{max-width:none;margin-top:.7rem}
  .job-more .prose p,.job-more .prose li{font-size:.9rem}

  /* ── nativ lazy şəkil (cover_img helper-i) ──────────────────
     Kart şəkilləri artıq CSS background deyil, real <img loading="lazy">-dir:
     brauzer onları yalnız ekrana yaxınlaşanda yükləyir. Element valideynin
     sahəsini tam doldurur; valideyndəki hover transform-u uşağa da təsir
     edir, ona görə əvvəlki "yaxınlaşma" effekti qorunur. */
  .lz{
    position:absolute;inset:0;display:block;
    width:100%;height:100%;object-fit:cover;
  }
  /* şəkil yüklənənə qədər boş qalmasın: qabın öz fon rəngi görünür */
  .ph,.im{background-color:#EEF1F4}
  /* fayl diskdə yoxsa (site.js işarələyir) qırıq nişan/alt mətni gizlənir */
  .lz.is-missing{display:none}

  /* ══ axtarış paneli (başlığın altında) ══════════════════════
     Panel `position:absolute` ilə başlığın altına düşür; başlıq yapışqan
     olduğu üçün panel də onunla birlikdə görünür. Kartlar kataloqdaki
     kalıbı təkrarlamır — burada SIRA görünüşü lazımdır (kiçik şəkil +
     ad + qrup), çünki məqsəd baxmaq deyil, tez seçmək. */
  .srch{
    position:absolute;left:0;right:0;top:100%;z-index:60;
    background:#fff;border-bottom:1px solid var(--hairline);
    box-shadow:0 26px 50px -30px rgba(7,36,79,.45);
    animation:srchIn .18s ease both;
  }
  @keyframes srchIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){ .srch{animation:none} }
  .srch>.wrap{padding-top:1rem;padding-bottom:1rem}

  .srch-bar{
    display:flex;align-items:center;gap:.6rem;
    border:1px solid var(--hairline);border-radius:14px;
    padding:.55rem .7rem;background:#fff;
    transition:border-color .2s,box-shadow .2s;
  }
  .srch-bar:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
  .srch-bar .ic{display:flex;color:var(--ink-3)}
  .srch-bar .ic svg{width:19px;height:19px}
  .srch-bar input{
    flex:1;min-width:0;border:0;outline:none;background:none;
    font:inherit;font-size:1rem;color:var(--ink);padding:.25rem 0;
  }
  .srch-bar input::-webkit-search-cancel-button{display:none}
  .srch-x{
    flex:none;display:grid;place-items:center;width:30px;height:30px;
    border:0;border-radius:999px;background:transparent;color:var(--ink-2);cursor:pointer;
  }
  .srch-x:hover{background:var(--brand-tint);color:var(--brand)}
  .srch-x svg{width:15px;height:15px}

  .srch-body{margin-top:.55rem;max-height:min(60vh,420px);overflow-y:auto}
  .srch-hint{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;padding:.5rem .2rem}
  /* ⚠️ `display:flex` HTML-in `hidden` atributunu əzir (sinif seçicisi
     brauzerin `[hidden]` qaydasından güclüdür) — JS ipucu sətrini
     gizlədəndə o, təkliflərin üstündə görünməyə davam edirdi. Yerli
     ekran görüntüsündə tapıldı. */
  .srch [hidden]{display:none !important}
  .srch-hint>span{font-size:.82rem;color:var(--ink-3);margin-right:.3rem}
  .srch-hint>a{
    font-size:.78rem;padding:.3rem .7rem;border-radius:999px;
    border:1px solid var(--hairline);color:var(--ink-2);
  }
  .srch-hint>a:hover{border-color:var(--brand);color:var(--brand)}

  .srch-item{
    display:flex;align-items:center;gap:.8rem;
    padding:.5rem .55rem;border-radius:12px;
    transition:background .15s;
  }
  .srch-item:hover,.srch-item.on{background:var(--brand-tint)}
  .srch-item .im{
    flex:none;width:46px;height:46px;border-radius:9px;
    background:#f2f5f9 center/cover no-repeat;border:1px solid var(--hairline);
  }
  .srch-item .tx{min-width:0;flex:1}
  .srch-item b{
    display:block;font-size:.9rem;font-weight:600;color:var(--ink);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .srch-item b mark{background:var(--brand-tint);color:var(--brand);padding:0 .1em;border-radius:3px}
  .srch-item small{
    display:block;font-size:.74rem;color:var(--ink-3);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .srch-item .go{flex:none;color:var(--ink-3)}
  .srch-item .go svg{width:14px;height:14px}
  .srch-item:hover .go{color:var(--brand)}
  .srch-none{padding:.9rem .3rem;font-size:.88rem;color:var(--ink-2)}

  .srch-all{
    display:inline-flex;align-items:center;gap:.45rem;margin-top:.6rem;
    padding:.6rem 1.05rem;border-radius:999px;background:var(--brand);color:#fff;
    font-size:.85rem;font-weight:600;
  }
  .srch-all:hover{background:var(--brand-hover)}
  .srch-all svg{width:13px;height:13px}
  .srch-all span{opacity:.85;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.78rem}

  /* nəticə səhifəsindəki axtarış qutusu */
  .srch-page{
    display:flex;align-items:center;gap:.6rem;max-width:620px;
    border:1px solid var(--hairline);border-radius:14px;padding:.55rem .7rem;background:#fff;
  }
  .srch-page:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
  .srch-page .ic{display:flex;color:var(--ink-3)}
  .srch-page .ic svg{width:18px;height:18px}
  .srch-page input{flex:1;min-width:0;border:0;outline:none;background:none;font:inherit;font-size:.98rem}
  .srch-page input::-webkit-search-cancel-button{display:none}
  .srch-page button{
    flex:none;border:0;border-radius:999px;background:var(--brand);color:#fff;
    padding:.5rem 1.05rem;font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;
  }
  .srch-page button:hover{background:var(--brand-hover)}
  .srch-note{margin:1rem 0 1.4rem;font-size:.95rem;color:var(--ink-2)}
  .srch-note a{color:var(--brand);text-decoration:underline}

  @media (max-width:560px){
    .srch-item .im{width:40px;height:40px}
    .srch-page{flex-wrap:wrap}
    .srch-page button{width:100%}
  }

  /* referans detalı: böyük şəkil + statik teq çipləri */
  .ref-hero{
    border-radius:20px;overflow:hidden;border:1px solid var(--hairline);
    margin-bottom:1.6rem;background:#f2f5f9;
  }
  .ref-hero img{display:block;width:100%;height:auto}
  .chips.is-static span{
    display:inline-block;font-size:.76rem;padding:.32rem .75rem;border-radius:999px;
    border:1px solid var(--hairline);color:var(--ink-2);margin:.2rem .3rem 0 0;
  }

  /* ── forma ── */
  .form-card{
    background:#fff;border:1px solid var(--hairline);border-radius:22px;
    padding:clamp(1.5rem,3.5vw,2.4rem);
  }
  .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.1rem}
  .field{display:flex;flex-direction:column;gap:.4rem}
  .field.full{grid-column:1/-1}
  .field label{
    font-size:.78rem;font-weight:600;letter-spacing:.02em;color:var(--ink);
  }
  .field label .req{color:#BE3B2E}
  .field input,.field select,.field textarea{
    font:inherit;font-size:.92rem;color:var(--ink);
    background:#FBFCFD;border:1px solid var(--hairline);border-radius:12px;
    padding:.72rem .9rem;width:100%;
    transition:border-color .2s,background .2s,box-shadow .2s;
  }
  .field textarea{min-height:118px;resize:vertical}
  .field input:focus,.field select:focus,.field textarea:focus{
    outline:none;border-color:var(--brand-hover);background:#fff;
    box-shadow:0 0 0 3px var(--brand-tint);
  }
  .field .hint{font-size:.74rem;color:var(--ink-3);line-height:1.45}
  .drop{
    display:flex;align-items:center;gap:.85rem;
    border:1.5px dashed var(--hairline);border-radius:14px;
    padding:.95rem 1.05rem;background:#FBFCFD;cursor:pointer;
    transition:border-color .2s,background .2s;
  }
  .drop:hover{border-color:var(--brand-hover);background:var(--brand-tint)}
  .drop .ic{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:11px;
    background:var(--brand-tint);color:var(--brand)}
  .drop .ic svg{width:19px;height:19px}
  .drop b{display:block;font-size:.86rem;font-weight:600;color:var(--ink)}
  .drop span{display:block;font-size:.74rem;color:var(--ink-3)}
  .form-card .submit{
    margin-top:1.4rem;display:inline-flex;align-items:center;gap:.55rem;
    padding:.85rem 1.6rem;border-radius:999px;background:var(--brand);color:#fff;
    font-size:.9rem;font-weight:600;
    transition:background .25s,gap .25s,transform .3s cubic-bezier(.2,1.3,.3,1);
  }
  .form-card .submit:hover{background:var(--brand-hover);gap:.75rem;transform:translateY(-2px)}
  .form-card .submit svg{width:15px;height:15px}
  @media (max-width:640px){ .form-grid{grid-template-columns:1fr} }

  /* ── iki sütunlu içerik ── */
  .two-col{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.8rem,4vw,3.6rem);align-items:start}
  @media (max-width:900px){ .two-col{grid-template-columns:1fr} }
  .side-photo{position:relative;overflow:hidden;border-radius:24px;aspect-ratio:4/5;
    box-shadow:0 30px 62px -34px rgba(7,36,79,.5)}
  .side-photo .ph{position:absolute;inset:-3%;background-size:cover;background-position:center;
    animation:ph-kb 30s ease-in-out infinite alternate}

  /* ═══════════════════════════════════════════════════════
     SERTİFİKAT ARXİVİ — sənədləri GÖSTƏRƏN görünüş
     ═══════════════════════════════════════════════════════ */
  .cert-bar{
    display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.2rem;
    background:#fff;border:1px solid var(--hairline);border-radius:16px;
    padding:.9rem 1.1rem;margin:0 0 1.6rem;
  }
  .cert-bar .grp{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
  .cert-bar .lbl{
    font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.63rem;letter-spacing:.13em;
    text-transform:uppercase;color:var(--ink-3);margin-right:.2rem;
  }
  .cert-bar button{
    font-size:.8rem;font-weight:600;color:var(--ink);
    border:1px solid var(--hairline);border-radius:999px;padding:.4rem .85rem;
    transition:border-color .2s,color .2s,background .2s;
  }
  .cert-bar button:hover{border-color:var(--brand-hover);color:var(--brand-hover);background:var(--brand-tint)}
  .cert-bar button.on{border-color:var(--brand);background:var(--brand);color:#fff}
  .cert-bar .find{
    margin-left:auto;display:flex;align-items:center;gap:.5rem;flex:1;min-width:210px;max-width:300px;
    border:1px solid var(--hairline);border-radius:999px;padding:.42rem .9rem;background:#FBFCFD;
  }
  .cert-bar .find svg{width:15px;height:15px;color:var(--ink-3);flex:none}
  .cert-bar .find input{font:inherit;font-size:.85rem;border:0;background:none;outline:none;width:100%;color:var(--ink)}

  .cert-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:1.3rem}
  .cert-card{
    position:relative;display:flex;flex-direction:column;
    background:#fff;border:1px solid var(--hairline);border-radius:18px;overflow:hidden;
    transition:border-color .25s,box-shadow .3s,transform .35s cubic-bezier(.2,.8,.3,1);
  }
  .cert-card:hover{border-color:var(--brand-hover);box-shadow:0 26px 52px -28px rgba(7,36,79,.45);transform:translateY(-5px)}
  /* sənəd önizləməsi — kağıt hissi */
  .cert-card .paper{
    position:relative;aspect-ratio:3/3.6;overflow:hidden;
    background:linear-gradient(160deg,#EEF1F4,#E3E8ED);
    display:grid;place-items:center;padding:.9rem .9rem 0;
  }
  .cert-card .paper img{
    width:100%;height:auto;display:block;border-radius:3px;
    box-shadow:0 10px 26px -10px rgba(7,36,79,.4),0 2px 6px -2px rgba(7,36,79,.3);
    transform:translateY(6px);
    transition:transform .5s cubic-bezier(.2,.9,.3,1),box-shadow .4s;
  }
  .cert-card:hover .paper img{transform:translateY(0) scale(1.02);box-shadow:0 18px 40px -12px rgba(7,36,79,.5)}
  .cert-card .paper::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,transparent 62%,rgba(7,36,79,.16) 100%);
    pointer-events:none;
  }
  .cert-card .issuer{
    position:absolute;left:.7rem;top:.7rem;z-index:2;
    font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.66rem;font-weight:500;
    letter-spacing:.1em;color:#fff;background:var(--brand);
    border-radius:7px;padding:.26rem .55rem;
    box-shadow:0 4px 12px -4px rgba(7,36,79,.6);
  }
  .cert-card .issuer.ul{background:#1A3A6B}
  .cert-card .issuer.fm{background:#0E489F}
  .cert-card .issuer.tse{background:#B02A24}
  .cert-card .issuer.ce{background:#0A3779}
  .cert-card .zoom{
    position:absolute;right:.7rem;bottom:.7rem;z-index:2;
    width:34px;height:34px;display:grid;place-items:center;border-radius:10px;
    background:rgba(255,255,255,.92);color:var(--brand);
    opacity:0;transform:translateY(6px);
    transition:opacity .25s,transform .35s cubic-bezier(.2,1.3,.3,1);
  }
  .cert-card:hover .zoom{opacity:1;transform:none}
  .cert-card .zoom svg{width:17px;height:17px}
  .cert-card .body{display:flex;flex-direction:column;flex:1;padding:.95rem 1rem 1rem}
  .cert-card h3{
    margin:0 0 .35rem;font-size:.9rem;font-weight:600;line-height:1.34;color:var(--ink);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  .cert-card .for{
    font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.63rem;letter-spacing:.06em;
    color:var(--ink-3);line-height:1.4;margin-bottom:.7rem;
    display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
  }
  .cert-card .acts{margin-top:auto;display:flex;gap:.4rem}
  .cert-card .acts a{
    flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.35rem;
    font-size:.76rem;font-weight:600;border-radius:9px;padding:.5rem .5rem;
    transition:background .2s,color .2s,border-color .2s;
  }
  .cert-card .acts .view{background:var(--brand-tint);color:var(--brand)}
  .cert-card .acts .view:hover{background:var(--brand);color:#fff}
  .cert-card .acts .dl{border:1px solid var(--hairline);color:var(--ink)}
  .cert-card .acts .dl:hover{border-color:var(--brand);color:var(--brand)}
  .cert-card .acts svg{width:13px;height:13px}

  /* sənəd görüntüləyici (lightbox) */
  .doc-view{
    position:fixed;inset:0;z-index:1000;display:none;
    background:rgba(4,16,34,.92);
    align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem);
  }
  .doc-view.open{display:flex}
  .doc-view .sheet{
    position:relative;max-width:min(760px,92vw);max-height:88vh;overflow:auto;
    border-radius:10px;background:#fff;box-shadow:0 40px 90px -30px rgba(0,0,0,.7);
  }
  .doc-view .sheet img{display:block;width:100%;height:auto}
  .doc-view .bar{
    position:absolute;right:clamp(1rem,4vw,3rem);top:clamp(1rem,4vw,3rem);
    display:flex;gap:.5rem;
  }
  .doc-view .bar button{
    width:42px;height:42px;display:grid;place-items:center;border-radius:50%;
    border:1px solid rgba(255,255,255,.35);color:#fff;
    transition:background .2s,border-color .2s;
  }
  .doc-view .bar button:hover{background:rgba(255,255,255,.16);border-color:#fff}
  .doc-view .bar svg{width:18px;height:18px}
  .doc-view .caption{
    position:absolute;left:clamp(1rem,4vw,3rem);bottom:clamp(1rem,4vw,3rem);
    color:#fff;font-size:.86rem;max-width:60ch;
  }
  .doc-view .caption b{display:block;font-size:1rem;font-weight:600;margin-bottom:.2rem}
  .doc-view .caption span{color:rgba(255,255,255,.7);font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.06em}

  /* ── forma nəticə mesajı ── */
  .form-msg{
    margin:1.1rem 0 0;padding:.85rem 1.1rem;border-radius:12px;
    font-size:.87rem;line-height:1.5;
  }
  .form-msg.ok{background:#E8F4EC;border:1px solid #B7DCC4;color:#1E5B33}
  .form-msg.err{background:#FAEAE7;border:1px solid #EBC2BB;color:#8C2F24}

  /* ── faylı hələ yüklənməmiş sertifikat: boş vərəq göstərmirik ── */
  .cert-note{
    margin:0 0 1.4rem;padding:.9rem 1.1rem;
    background:#FFF9E8;border:1px solid #F0DFAE;border-radius:14px;
    font-size:.84rem;line-height:1.55;color:#6B551A;max-width:78ch;
  }
  .cert-card .paper.pending{
    display:grid;place-items:center;padding:1rem;
    background:linear-gradient(160deg,#F2F5F8,#E6EBF0);
  }
  .cert-card .paper.pending::after{display:none}
  .cert-card .ph-doc{
    display:flex;flex-direction:column;align-items:center;gap:.6rem;
    color:var(--ink-3);text-align:center;
  }
  .cert-card .ph-doc svg{width:38px;height:38px;opacity:.55}
  .cert-card .ph-doc b{
    font-family:"IBM Plex Mono",ui-monospace,monospace;
    font-size:.66rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  }
  .cert-card .acts .dl.ask{border-color:var(--brand-tint-2);color:var(--brand-mid)}
  .cert-card .acts .dl.ask:hover{border-color:var(--brand);background:var(--brand-tint);color:var(--brand)}
  .cert-card .acts a{min-width:0}
  .cert-card .acts a svg{flex:none}

  /* ═══════════ BLOQ ═══════════ */
  .post-lead{
    display:grid;grid-template-columns:1.15fr 1fr;
    background:#fff;border:1px solid var(--hairline);border-radius:22px;overflow:hidden;
    transition:border-color .25s,box-shadow .3s,transform .35s cubic-bezier(.2,.8,.3,1);
  }
  .post-lead:hover{border-color:var(--brand-hover);box-shadow:0 26px 52px -30px rgba(7,36,79,.45);transform:translateY(-4px)}
  .post-lead .ph{
    position:relative;min-height:280px;overflow:hidden;
    background-size:cover;background-position:center;background-color:var(--brand);
    transition:transform .9s cubic-bezier(.2,.7,.3,1);
  }
  .post-lead:hover .ph{transform:scale(1.05)}
  .post-lead .body{display:flex;flex-direction:column;justify-content:center;padding:clamp(1.4rem,3vw,2.4rem)}
  .post-lead time{
    font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.7rem;letter-spacing:.09em;
    color:var(--ink-3);margin-bottom:.6rem;
  }
  .post-lead h3{margin:0 0 .7rem;font-size:clamp(1.2rem,1rem + .9vw,1.6rem);font-weight:700;
    line-height:1.2;letter-spacing:-.018em;color:var(--ink);text-wrap:balance}
  .post-lead p{margin:0 0 1.15rem;font-size:.95rem;line-height:1.6;color:var(--ink-2);max-width:52ch}
  .post-lead .more{display:inline-flex;align-items:center;gap:.45rem;font-size:.86rem;font-weight:600;
    color:var(--brand-hover);transition:gap .25s}
  .post-lead:hover .more{gap:.7rem}
  .post-lead .more svg{width:13px;height:13px}
  @media (max-width:820px){ .post-lead{grid-template-columns:1fr} .post-lead .ph{min-height:210px} }

  /* məqalə mətni */
  .prose.article{max-width:70ch}
  .prose.article p{font-size:1.05rem;line-height:1.78}
  .prose.article p em{font-style:normal;color:var(--brand-mid);font-weight:500}
  .back-link{
    display:inline-flex;align-items:center;gap:.5rem;margin-top:1.8rem;
    font-size:.87rem;font-weight:600;color:var(--brand-hover);
    transition:gap .25s ease;
  }
  .back-link:hover{gap:.75rem}
  .back-link svg{width:14px;height:14px}

  /* ═══════════ ƏLAQƏ ═══════════ */
  .ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:1.1rem}
  .way{
    display:flex;align-items:center;gap:1rem;
    background:#fff;border:1px solid var(--hairline);border-radius:18px;padding:1.3rem 1.35rem;
    transition:border-color .25s,box-shadow .3s,transform .35s cubic-bezier(.2,.8,.3,1);
  }
  .way:hover{border-color:var(--brand-hover);box-shadow:0 22px 46px -26px rgba(7,36,79,.42);transform:translateY(-4px)}
  .way .ic{
    width:48px;height:48px;flex:none;display:grid;place-items:center;border-radius:14px;
    background:var(--brand-tint);color:var(--brand);
    transition:background .25s,color .25s,transform .45s cubic-bezier(.2,1.35,.3,1);
  }
  .way:hover .ic{background:var(--brand);color:#fff;transform:rotate(-6deg) scale(1.06)}
  .way .ic svg{width:23px;height:23px}
  .way .tx{flex:1;min-width:0}
  .way .lbl{
    display:block;font-family:"IBM Plex Mono",ui-monospace,monospace;
    font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.2rem;
  }
  .way .tx b{display:block;font-size:1rem;font-weight:600;color:var(--ink);letter-spacing:-.004em;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .way .note{display:block;font-size:.78rem;line-height:1.4;color:var(--ink-2);margin-top:.22rem}
  .way > svg{width:15px;height:15px;flex:none;color:var(--ink-3);transition:transform .3s,color .25s}
  .way:hover > svg{transform:translateX(4px);color:var(--brand-hover)}

  /* ── xəritə ── */
  .map-sec{padding-bottom:0}
  .map-box,.map-live{
    position:relative;margin-top:clamp(1.2rem,2.5vw,1.8rem);
    height:clamp(300px,42vw,460px);overflow:hidden;
    border-top:1px solid var(--hairline);
  }
  .map-box .map-img{
    position:absolute;inset:0;
    background-size:cover;background-position:center;
    filter:saturate(.85);
  }
  /* xəritə HƏLƏ yoxdur — bunu gizlətmirik, açıq yazırıq */
  .map-box::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(255,255,255,0) 40%,rgba(244,246,248,.85) 100%);
    pointer-events:none;
  }
  .map-badge{
    position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);
    display:flex;align-items:center;gap:.7rem;max-width:min(440px,88vw);
    background:rgba(255,255,255,.95);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    border:1px solid rgba(7,36,79,.12);border-radius:16px;
    padding:.95rem 1.15rem;
    box-shadow:0 22px 46px -22px rgba(7,36,79,.45);
  }
  .map-badge svg{width:22px;height:22px;flex:none;color:var(--brand)}
  .map-badge span{font-size:.84rem;line-height:1.5;color:var(--ink-2)}
  .map-live iframe{width:100%;height:100%;border:0;display:block}
  /* ═══════════════════════════════════════════════════════
     MƏHSULLAR — kataloq indeksi + tək böyük texniki rəsm
     Niyə kart ızgarası deyil: 4 mavi baskı rəsmi yan-yana
     duranda hamısı eyni tonda "mavi düzbucaqlı divarı"na
     çevrilirdi. Burada bir anda YALNIZ BİR rəsm görünür —
     böyük, təsirli və seçim hərəkətin özü olur.
     ═══════════════════════════════════════════════════════ */
  .pcat{padding:clamp(3.8rem,7vw,6.5rem) 0;overflow:hidden}
  .pcat-inner{
    display:grid;grid-template-columns:minmax(268px,.72fr) 1.28fr;
    gap:clamp(1.6rem,3.5vw,3rem);align-items:start;
  }

  /* ── sol: kataloq indeksi ── */
  .pcat-list{position:relative;border-top:1px solid var(--hairline)}
  .pcat-item{
    position:relative;display:block;width:100%;text-align:left;
    padding:1.05rem 1.6rem 1.05rem .95rem;
    border-bottom:1px solid var(--hairline);
    transition:background .28s ease, padding-left .32s cubic-bezier(.2,.9,.3,1);
  }
  .pcat-item::before{                      /* sol vurğu zolağı */
    content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
    background:var(--brand);
    transform:scaleY(0);transform-origin:center;
    transition:transform .38s cubic-bezier(.2,.9,.3,1);
  }
  .pcat-item:hover{background:#FAFBFC;padding-left:1.25rem}
  .pcat-item[aria-selected="true"]{background:var(--brand-tint);padding-left:1.35rem}
  .pcat-item[aria-selected="true"]::before{transform:scaleY(1)}
  .pcat-item:focus-visible{outline:2px solid var(--brand-hover);outline-offset:-2px}
  .pcat-item .n{
    display:block;font-family:"IBM Plex Mono",ui-monospace,monospace;
    font-size:.66rem;font-weight:500;letter-spacing:.14em;color:var(--ink-3);
    margin-bottom:.28rem;transition:color .25s ease;
  }
  .pcat-item[aria-selected="true"] .n{color:var(--brand)}
  .pcat-item .nm{
    display:block;font-size:.98rem;font-weight:600;line-height:1.32;
    letter-spacing:-.01em;color:var(--ink);transition:color .25s ease;
  }
  .pcat-item[aria-selected="true"] .nm,.pcat-item:hover .nm{color:var(--brand-hover)}
  .pcat-item .gr{
    display:block;margin-top:.22rem;font-family:"IBM Plex Mono",ui-monospace,monospace;
    font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  }
  .pcat-item .arw{
    position:absolute;right:.9rem;top:50%;width:14px;height:14px;
    margin-top:-7px;color:var(--brand);
    opacity:0;transform:translateX(-6px);transition:.3s cubic-bezier(.2,1.3,.3,1);
  }
  .pcat-item[aria-selected="true"] .arw,.pcat-item:hover .arw{opacity:1;transform:none}
  /* aktiv sətirdə avtomatik keçid taymeri */
  .pcat-item .bar{
    position:absolute;left:0;right:0;bottom:-1px;height:2px;
    background:var(--brand);transform-origin:left;transform:scaleX(0);
  }
  .pcat-item[aria-selected="true"] .bar{animation:pbar var(--dur,6000ms) linear forwards}
  @keyframes pbar{to{transform:scaleX(1)}}

  /* ── sağ: səhnə ── */
  .pcat-stage{
    position:relative;border-radius:26px;overflow:hidden;
    background:var(--brand);
    aspect-ratio:16/11;
    box-shadow:0 34px 70px -34px rgba(7,36,79,.55);
  }
  .pcat-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .55s ease,visibility .55s}
  .pcat-slide.on{opacity:1;visibility:visible}
  .pcat-slide .art{
    position:absolute;inset:0;
    background-size:cover;background-position:center;background-repeat:no-repeat;
  }
  /* rəsm plotter kimi çəkilir — hər keçiddə yenidən */
  .pcat-slide.on .art{animation:draw 1.05s cubic-bezier(.35,.85,.25,1) both}
  @keyframes draw{
    from{clip-path:inset(0 100% 0 0);transform:scale(1.07)}
    to{clip-path:inset(0 0 0 0);transform:scale(1)}
  }
  .pcat-slide .pen{
    position:absolute;top:0;bottom:0;left:0;width:2px;z-index:2;pointer-events:none;
    background:linear-gradient(180deg,transparent,#9CC8F0 18%,#E6F2FF 50%,#9CC8F0 82%,transparent);
    box-shadow:0 0 16px 4px rgba(127,209,240,.6);opacity:0;
  }
  .pcat-slide.on .pen{animation:pen 1.05s cubic-bezier(.35,.85,.25,1) both}
  @keyframes pen{
    0%{opacity:0;left:0}8%{opacity:1}92%{opacity:1}100%{opacity:0;left:100%}
  }
  /* ölçü ızgarası */
  .pcat-stage::after{
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:
      repeating-linear-gradient(0deg,rgba(156,200,240,.10) 0 1px,transparent 1px 38px),
      repeating-linear-gradient(90deg,rgba(156,200,240,.10) 0 1px,transparent 1px 38px);
  }

  /* şüşə məlumat kartı — rəsmin altına oturur */
  .pcat-info{
    position:absolute;z-index:3;left:clamp(.9rem,2vw,1.5rem);right:clamp(.9rem,2vw,1.5rem);
    bottom:clamp(.9rem,2vw,1.5rem);
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.6);border-radius:18px;
    padding:clamp(1rem,2vw,1.35rem);
    box-shadow:0 20px 44px -20px rgba(4,16,34,.55);
  }
  .pcat-slide .pcat-info{opacity:0;transform:translateY(16px)}
  .pcat-slide.on .pcat-info{
    opacity:1;transform:none;
    transition:opacity .5s ease .34s, transform .62s cubic-bezier(.2,1.3,.3,1) .34s;
  }
  .pcat-info .gr{
    font-family:"IBM Plex Mono",ui-monospace,monospace;
    font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);
  }
  .pcat-info h3{
    margin:.3rem 0 .7rem;font-size:clamp(1.05rem,.95rem + .6vw,1.35rem);font-weight:700;
    line-height:1.22;letter-spacing:-.016em;color:var(--ink);
  }
  .pcat-info .sp{display:flex;flex-wrap:wrap;gap:.32rem;margin:0 0 .9rem}
  .pcat-info .sp span{
    font-family:"IBM Plex Mono",ui-monospace,monospace;
    font-size:.69rem;letter-spacing:.02em;font-variant-numeric:tabular-nums;
    color:var(--brand-mid);background:var(--brand-tint);border-radius:999px;padding:.26rem .6rem;
    opacity:0;transform:translateY(8px) scale(.94);
  }
  .pcat-slide.on .pcat-info .sp span{
    opacity:1;transform:none;
    transition:opacity .34s ease, transform .46s cubic-bezier(.2,1.45,.3,1);
    transition-delay:calc(520ms + var(--s,0) * 75ms);
  }
  .pcat-info .btn{
    display:inline-flex;align-items:center;gap:.5rem;
    padding:.7rem 1.25rem;border-radius:999px;background:var(--brand);color:#fff;
    font-size:.85rem;font-weight:600;
    transition:background .25s,gap .25s,transform .3s cubic-bezier(.2,1.3,.3,1);
  }
  .pcat-info .btn:hover{background:var(--brand-hover);gap:.75rem;transform:translateY(-2px)}
  .pcat-info .btn svg{width:14px;height:14px}

  /* ── mobil: indeks üstdə yatay lentə çevrilir ── */
  @media (max-width:880px){
    .pcat-inner{grid-template-columns:1fr;gap:1.3rem}
    .pcat-list{
      display:flex;gap:.5rem;overflow-x:auto;border-top:0;
      padding-bottom:.4rem;scroll-snap-type:x mandatory;
      -webkit-overflow-scrolling:touch;
    }
    .pcat-list::-webkit-scrollbar{height:4px}
    .pcat-list::-webkit-scrollbar-thumb{background:var(--hairline);border-radius:4px}
    .pcat-item{
      flex:0 0 auto;min-width:190px;scroll-snap-align:start;
      border:1px solid var(--hairline);border-radius:14px;padding:.8rem .9rem;
    }
    .pcat-item:hover,.pcat-item[aria-selected="true"]{padding-left:.9rem}
    .pcat-item::before{width:100%;height:3px;top:auto;bottom:0;transform:scaleX(0);transform-origin:left}
    .pcat-item[aria-selected="true"]::before{transform:scaleX(1)}
    .pcat-item .arw,.pcat-item .bar{display:none}
    .pcat-stage{aspect-ratio:4/3}
  }
  @media (max-width:520px){
    .pcat-info{position:static;margin:0;border-radius:0 0 25px 25px;background:#fff;backdrop-filter:none}
    .pcat-stage{aspect-ratio:auto;display:grid;grid-template-rows:220px auto}
    .pcat-slide{position:relative;inset:auto}
    .pcat-slide:not(.on){display:none}
    .pcat-slide .art{position:absolute;inset:0;height:220px}
  }

  @media (prefers-reduced-motion:reduce){
    .pcat-slide.on .art,.pcat-slide.on .pen{animation:none}
    .pcat-slide .art{clip-path:none;transform:none}
    .pcat-slide .pcat-info,.pcat-slide.on .pcat-info{opacity:1;transform:none;transition:none}
    .pcat-slide.on .pcat-info .sp span{opacity:1;transform:none;transition:none}
    .pcat-item[aria-selected="true"] .bar{animation:none}
  }

  /* ═══════════════════════════════════════════════════════
     NİYƏ HİDRON — açıq zəmin, sürüşdükcə çəkilən ray
     Tünd panel və arxa fon rəngi TAMAMİLƏ silindi.
     ═══════════════════════════════════════════════════════ */
  .why2{padding:clamp(3.8rem,7vw,6.5rem) 0;overflow:hidden}
  .why2-inner{
    display:grid;grid-template-columns:minmax(280px,.82fr) 1.18fr;
    gap:clamp(2rem,5vw,5rem);align-items:start;
  }

  /* ── sol: başlıq bloku ── */
  .why2-lead .eyebrow{
    display:inline-flex;align-items:center;gap:.5rem;
    font-family:"IBM Plex Mono",ui-monospace,monospace;
    font-size:.67rem;font-weight:500;letter-spacing:.17em;text-transform:uppercase;
    color:var(--brand);background:var(--brand-tint);
    border-radius:999px;padding:.36rem .82rem;margin:0 0 1.15rem;
  }
  .why2-lead .eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--brand);flex:none;display:block}
  .why2-lead h2{
    margin:0 0 1.05rem;
    font-size:clamp(1.75rem,1.2rem + 2.2vw,2.85rem);font-weight:700;
    line-height:1.06;letter-spacing:-.028em;color:var(--ink);text-wrap:balance;
  }
  /* söz-söz gəliş: hər söz öz gecikməsi ilə aşağıdan qalxır */
  .why2-lead h2 .w{display:inline-block;white-space:pre}
  .js-rv .why2-lead h2 .w{
    opacity:0;transform:translateY(18px) rotate(1.5deg);
    transition:opacity .5s ease, transform .62s cubic-bezier(.2,1.35,.32,1);
    transition-delay:calc(var(--w,0) * 55ms);
  }
  .js-rv .why2-lead h2.in .w{opacity:1;transform:none}
  .why2-lead p{margin:0;font-size:1.02rem;line-height:1.68;color:var(--ink-2);max-width:44ch;text-wrap:pretty}
  .why2-lead .go{
    margin-top:1.5rem;display:inline-flex;align-items:center;gap:.55rem;
    font-size:.88rem;font-weight:600;color:var(--brand);
    padding-bottom:.3rem;
    background-image:linear-gradient(var(--brand),var(--brand));
    background-repeat:no-repeat;background-position:0 100%;background-size:100% 1px;
    transition:background-size .35s cubic-bezier(.2,.7,.3,1), gap .28s ease, color .2s;
  }
  .why2-lead .go:hover{color:var(--brand-hover);background-size:100% 2px;gap:.8rem}
  .why2-lead .go svg{width:13px;height:13px}

  /* ── sağ: ray üzərində sıralanan maddələr ── */
  .why2-list{position:relative;padding-left:clamp(2.6rem,4vw,3.4rem)}
  /* rayın özü: görünəndə yuxarıdan aşağı çəkilir */
  .why2-list::before{
    content:"";position:absolute;left:15px;top:14px;bottom:14px;width:2px;
    background:linear-gradient(180deg,var(--brand) 0%,var(--brand-tint-2) 88%,transparent 100%);
    transform-origin:top;
  }
  .js-rv .why2-list::before{transform:scaleY(0);transition:transform 1.25s cubic-bezier(.25,.8,.3,1) .15s}
  .js-rv .why2-list.in::before{transform:scaleY(1)}

  /* Sətrin ÖZÜ yerindən tərpənmir — içindəki hər element ayrı-ayrı,
     gecikmə ilə "zıplayaraq" gəlir. Ona görə data-rv="stagger":
     yalnız tetikleyici rolunu oynayır, öz transformu yoxdur. */
  .js-rv [data-rv="stagger"]{opacity:1;transform:none;transition:none}

  .why2-row{position:relative;padding:0 0 clamp(1.9rem,3.2vw,2.6rem)}
  .why2-row:last-child{padding-bottom:0}

  /* ── sıra ilə zıplayan giriş ── */
  .js-rv .why2-row .dot,
  .js-rv .why2-row .n,
  .js-rv .why2-row h3,
  .js-rv .why2-row p,
  .js-rv .why2-row .badge{
    opacity:0;
    transition:opacity .42s ease, transform .68s cubic-bezier(.18,1.62,.3,1);
    transition-delay:calc(var(--i,0) * 130ms + var(--e,0) * 80ms);
  }
  .js-rv .why2-row .dot   {--e:0; transform:scale(.4) rotate(-30deg)}
  .js-rv .why2-row .n     {--e:1; transform:translateX(20px)}
  .js-rv .why2-row h3     {--e:2; transform:translateX(26px)}
  .js-rv .why2-row p      {--e:3; transform:translateX(22px)}
  .js-rv .why2-row .badge {--e:4; transform:translateY(14px) scale(.86)}
  .js-rv .why2-row.in .dot,
  .js-rv .why2-row.in .n,
  .js-rv .why2-row.in h3,
  .js-rv .why2-row.in p,
  .js-rv .why2-row.in .badge{opacity:1;transform:none}

  /* dairə görünəndə bir dəfə nəbz atır */
  .why2-row .dot::after{
    content:"";position:absolute;inset:-6px;border-radius:50%;
    border:2px solid var(--brand);opacity:0;pointer-events:none;
  }
  .js-rv .why2-row.in .dot::after{
    animation:dot-pop .85s cubic-bezier(.2,.9,.3,1) calc(var(--i,0) * 130ms) 1 both;
  }
  @keyframes dot-pop{0%{transform:scale(.55);opacity:.75}100%{transform:scale(1.6);opacity:0}}
  /* ray üzərindəki ikon dairəsi */
  .why2-row .dot{
    position:absolute;left:calc(-1 * clamp(2.6rem,4vw,3.4rem));top:2px;
    width:32px;height:32px;display:grid;place-items:center;
    border-radius:50%;
    background:#fff;border:2px solid var(--brand-tint-2);color:var(--brand);
    transition:border-color .3s ease,background .3s ease,color .3s ease,transform .45s cubic-bezier(.2,1.4,.3,1);
  }
  .why2-row .dot svg{width:16px;height:16px;transition:transform .5s cubic-bezier(.2,1.5,.3,1)}
  /* ── hover: bütöv sətir canlanır ── */
  .why2-row{transition:transform .42s cubic-bezier(.2,1.15,.3,1)}
  .why2-row:hover{transform:translateX(9px)}
  .why2-row:hover .dot{
    background:var(--brand);border-color:var(--brand);color:#fff;
    transform:scale(1.16) rotate(-8deg);
    box-shadow:0 8px 20px -6px rgba(7,36,79,.55);
  }
  .why2-row:hover .dot svg{transform:scale(1.1) rotate(8deg)}
  .why2-row:hover .n{color:var(--brand)}
  .why2-row .n{transition:color .25s ease}
  .why2-row .n{
    display:block;font-family:"IBM Plex Mono",ui-monospace,monospace;
    font-size:.66rem;font-weight:500;letter-spacing:.15em;color:var(--ink-3);
    margin-bottom:.35rem;
  }
  .why2-row h3{
    margin:0 0 .42rem;font-size:1.12rem;font-weight:600;
    line-height:1.28;letter-spacing:-.012em;color:var(--ink);
    display:inline-block;padding-bottom:.12rem;
    background-image:linear-gradient(var(--brand-hover),var(--brand-hover));
    background-repeat:no-repeat;background-position:0 100%;background-size:0 2px;
    transition:color .22s ease, background-size .42s cubic-bezier(.2,.8,.3,1);
  }
  .why2-row:hover h3{color:var(--brand-hover);background-size:100% 2px}
  .why2-row p{margin:0;font-size:.92rem;line-height:1.62;color:var(--ink-2);max-width:56ch}
  .why2-row .badge{
    display:inline-block;margin-top:.6rem;
    font-family:"IBM Plex Mono",ui-monospace,monospace;
    font-size:.68rem;letter-spacing:.1em;color:var(--brand-mid);
    background:var(--brand-tint);border-radius:999px;padding:.24rem .62rem;
  }
  .why2-row:hover .badge{
    background:var(--brand);color:#fff;
    transform:translateY(-2px);
    box-shadow:0 6px 16px -6px rgba(7,36,79,.5);
  }
  .why2-row .badge{transition:background .25s,color .25s,transform .38s cubic-bezier(.2,1.4,.3,1),box-shadow .3s}
  /* incə ayırıcı — maddələri boğmayan */
  .why2-row:not(:last-child)::after{
    content:"";position:absolute;left:0;right:0;bottom:clamp(.9rem,1.6vw,1.3rem);
    height:1px;background:var(--hairline-2);
  }

  @media (max-width:900px){
    .why2-inner{grid-template-columns:1fr;gap:2.2rem}
    .why2-list{padding-left:2.6rem}
  }

  /* ═══════════ ÜZƏN DÜYMƏLƏR: yuxarı çıx + WhatsApp ═══════════ */
  /* Ağ zəmində ağ düymə görünmürdü — dolğun lacivert edildi və
     WhatsApp düyməsindən bir az böyükdür ki gözə dəysin. */
  .fab-top{
    width:62px;height:62px;display:grid;place-items:center;
    border-radius:999px;
    background:var(--brand);color:#fff;
    border:2px solid #fff;
    box-shadow:0 14px 32px -10px rgba(7,36,79,.62);
    opacity:0;visibility:hidden;transform:translateY(14px) scale(.86);
    transition:opacity .3s ease, transform .42s cubic-bezier(.2,1.35,.3,1), visibility .3s,
               background .22s ease, color .22s ease, box-shadow .3s ease;
  }
  .fab-top.show{opacity:1;visibility:visible;transform:none}
  .fab-top:hover{
    background:var(--brand-hover);
    transform:translateY(-4px) scale(1.05);
    box-shadow:0 20px 42px -12px rgba(14,72,159,.7);
  }
  .fab-top:focus-visible{outline:3px solid var(--brand-hover);outline-offset:3px}
  .fab-top svg{width:27px;height:27px;transition:transform .35s cubic-bezier(.2,1.5,.3,1)}
  .fab-top:hover svg{transform:translateY(-2px)}

  @media (prefers-reduced-motion:reduce){
    .js-rv .why2-lead h2 .w{opacity:1;transform:none;transition:none}
    .js-rv .why2-list::before{transform:scaleY(1);transition:none}
    .js-rv .why2-row .dot,.js-rv .why2-row .n,.js-rv .why2-row h3,
    .js-rv .why2-row p,.js-rv .why2-row .badge{opacity:1;transform:none;transition:none}
    .js-rv .why2-row.in .dot::after{animation:none}
    .why2-row,.why2-row:hover{transform:none}
    .fab-top{transition:none}
  }

  /* ═══════════════════════════════════════════════════════
     QİYMƏT TƏKLİFİ POPUP
     Bağlanma: sağ üstdəki X, fon kliki, Esc.
     Göndər düyməsi TAM EN DEYİL — tam en olanda nəhəng bir
     zolağa çevrilirdi; indi alt sətirdə, sağda, öz ölçüsündə.
     ═══════════════════════════════════════════════════════ */
  .qm{
    position:fixed;inset:0;z-index:1100;
    display:flex;align-items:center;justify-content:center;
    padding:clamp(.9rem,3vw,2rem);
    opacity:0;visibility:hidden;
    transition:opacity .26s ease, visibility .26s;
  }
  .qm.open{opacity:1;visibility:visible}
  .qm-back{
    position:absolute;inset:0;
    background:rgba(4,16,34,.7);
    backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  }
  .qm-card{
    position:relative;z-index:1;
    width:min(540px,100%);max-height:90vh;overflow-y:auto;
    background:#fff;border-radius:22px;
    box-shadow:0 40px 90px -30px rgba(4,16,34,.7);
    transform:translateY(20px) scale(.965);
    transition:transform .36s cubic-bezier(.2,1.22,.3,1);
  }
  .qm.open .qm-card{transform:none}

  /* ── başlıq ── */
  .qm-head{
    position:relative;
    padding:clamp(1.3rem,3vw,1.7rem) clamp(1.25rem,3vw,1.7rem) .1rem;
    padding-right:clamp(3.6rem,7vw,4.4rem);   /* X düyməsinə yer */
  }
  .qm-head .kicker{
    display:inline-flex;align-items:center;gap:.4rem;
    font-family:"IBM Plex Mono",ui-monospace,monospace;
    font-size:.6rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
    color:var(--brand);background:var(--brand-tint);
    border-radius:999px;padding:.26rem .62rem;margin-bottom:.6rem;
  }
  .qm-head h2{
    margin:0 0 .3rem;font-size:clamp(1.1rem,1rem + .55vw,1.32rem);font-weight:700;
    line-height:1.22;letter-spacing:-.018em;color:var(--ink);
  }
  .qm-head p{margin:0;font-size:.845rem;line-height:1.52;color:var(--ink-2);max-width:44ch}

  /* ── BELİRGİN X ── */
  .qm-x{
    position:absolute;top:clamp(.9rem,2.2vw,1.15rem);right:clamp(.9rem,2.2vw,1.15rem);
    width:38px;height:38px;display:grid;place-items:center;
    border-radius:50%;
    background:var(--ink);color:#fff;
    box-shadow:0 6px 16px -6px rgba(7,36,79,.5);
    transition:background .2s ease, transform .32s cubic-bezier(.2,1.4,.3,1);
  }
  .qm-x:hover{background:#BE3B2E;transform:rotate(90deg)}
  .qm-x:focus-visible{outline:3px solid var(--brand-hover);outline-offset:2px}
  .qm-x svg{width:18px;height:18px}

  /* ── forma ── */
  .qm-body{padding:1rem clamp(1.25rem,3vw,1.7rem) clamp(1.25rem,3vw,1.7rem)}
  .qm-body .form-grid{grid-template-columns:1fr 1fr;gap:.85rem .9rem}
  @media (max-width:520px){ .qm-body .form-grid{grid-template-columns:1fr} }
  .qm-body .field label{font-size:.75rem}
  .qm-body .field input,.qm-body .field textarea{
    font-size:.9rem;padding:.62rem .8rem;border-radius:10px;
  }
  .qm-body .field textarea{min-height:92px}

  /* ── alt sətir: qeyd solda, düymə sağda ── */
  .qm-actions{
    display:flex;align-items:center;justify-content:space-between;
    gap:1rem;margin-top:1.15rem;
    padding-top:1rem;border-top:1px solid var(--hairline-2);
  }
  .qm-note{
    margin:0;display:flex;align-items:center;gap:.42rem;
    font-size:.73rem;line-height:1.45;color:var(--ink-3);max-width:30ch;
  }
  .qm-note svg{width:13px;height:13px;flex:none;color:var(--brand)}
  .qm-send{
    flex:none;display:inline-flex;align-items:center;gap:.5rem;
    padding:.68rem 1.35rem;border-radius:999px;
    background:var(--brand);color:#fff;
    font-size:.85rem;font-weight:600;letter-spacing:.01em;
    box-shadow:0 8px 20px -8px rgba(7,36,79,.5);
    transition:background .22s ease, gap .22s ease, transform .3s cubic-bezier(.2,1.3,.3,1),
               box-shadow .25s ease;
  }
  .qm-send:hover{background:var(--brand-hover);gap:.72rem;transform:translateY(-2px);
    box-shadow:0 14px 28px -10px rgba(14,72,159,.6)}
  .qm-send:focus-visible{outline:3px solid var(--brand-hover);outline-offset:3px}
  .qm-send[disabled]{opacity:.6;pointer-events:none}
  .qm-send svg{width:14px;height:14px}
  @media (max-width:460px){
    .qm-actions{flex-direction:column;align-items:stretch;gap:.85rem}
    .qm-note{max-width:none;order:2}
    .qm-send{justify-content:center;order:1}
  }
  .qm-body .form-msg{margin-top:.9rem;font-size:.84rem}

  @media (prefers-reduced-motion:reduce){
    .qm,.qm-card,.qm-x,.qm-send{transition:none}
    .qm-card{transform:none}
  }

  /* ═══════════════════════════════════════════════════════
     MƏHSUL KATALOQU — kateqoriya / alt kateqoriya / məhsul
     ═══════════════════════════════════════════════════════ */

  /* ── nümunə şəkil nişanı: real foto gələnə qədər dürüst qalır ── */
  .demo-tag{
    position:absolute;left:.7rem;top:.7rem;z-index:3;
    font-family:"IBM Plex Mono",ui-monospace,monospace;
    font-size:.58rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
    background:rgba(138,100,16,.92);color:#fff;border-radius:999px;padding:.22rem .55rem;
    backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  }

  /* ── yan panel: kateqoriya ağacı ── */
  .cat-layout{display:grid;grid-template-columns:minmax(232px,.62fr) 1.38fr;gap:clamp(1.6rem,3.5vw,3rem);align-items:start}
  @media (max-width:900px){ .cat-layout{grid-template-columns:1fr} }
  .cat-side{position:sticky;top:calc(var(--hdr-h-sticky) + 1.1rem)}
  @media (max-width:900px){ .cat-side{position:static} }
  .cat-side h3{
    margin:0 0 .8rem;font-family:"IBM Plex Mono",ui-monospace,monospace;
    font-size:.66rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  }
  .cat-tree{border-top:1px solid var(--hairline)}
  .cat-tree > li{list-style:none}
  .cat-tree ul{list-style:none;margin:0;padding:0}
  .cat-tree a{
    position:relative;display:block;padding:.66rem .9rem .66rem .8rem;
    border-bottom:1px solid var(--hairline);
    font-size:.87rem;line-height:1.35;color:var(--ink);
    transition:background .22s,color .22s,padding-left .28s cubic-bezier(.2,.9,.3,1);
  }
  .cat-tree a:hover{background:#FAFBFC;color:var(--brand-hover);padding-left:1.05rem}
  .cat-tree a[aria-current="true"]{background:var(--brand-tint);color:var(--brand);font-weight:600}
  .cat-tree a[aria-current="true"]::before{
    content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brand);
  }
  .cat-tree .lvl0 > a{font-weight:600;font-size:.92rem}
  .cat-tree .sub a{padding-left:1.7rem;font-size:.83rem;color:var(--ink-2)}
  .cat-tree .sub a:hover{padding-left:1.9rem;color:var(--brand-hover)}
  .cat-tree .sub a[aria-current="true"]{color:var(--brand)}
  .cat-tree .cnt{
    float:right;font-family:"IBM Plex Mono",ui-monospace,monospace;
    font-size:.66rem;color:var(--ink-3);
  }

  /* ── kateqoriya kartları (foto dolu, dikey) ── */
  /* ⚠️ auto-fill, auto-fit DEYİL — TƏK element olanda fərq həlledicidir:
     `auto-fit` boş sütunları çökdürür, ona görə bir kart bütün sətri
     doldurub nəhəng görünürdü (bir məhsullu alt kateqoriya, bir nəticəli
     axtarış, bir xəbər/bloq yazısı, bir alt kateqoriyalı qrup).
     `auto-fill` boş sütunları saxlayır: kart normal ölçüsündə qalır.
     Ölçüldü (1080px konteyner): auto-fit 1035px -> auto-fill 243px. */
  .kgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:1.2rem}
  .kcard{
    position:relative;display:block;overflow:hidden;aspect-ratio:4/5;
    border-radius:20px;background:var(--brand);isolation:isolate;
    transition:transform .4s cubic-bezier(.2,.8,.3,1),box-shadow .35s;
  }
  .kcard:hover{transform:translateY(-5px);box-shadow:0 28px 56px -28px rgba(7,36,79,.5)}
  .kcard .ph{position:absolute;inset:0;background-size:cover;background-position:center;
    transform:scale(1.04);transition:transform 1s cubic-bezier(.2,.7,.3,1)}
  .kcard:hover .ph{transform:scale(1.12)}
  .kcard::after{content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(178deg,rgba(4,18,40,.08) 0%,rgba(5,24,52,.44) 45%,rgba(6,30,64,.9) 100%)}
  .kcard .cap{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:1.2rem}
  .kcard h3{margin:0 0 .35rem;font-size:1.16rem;font-weight:700;line-height:1.2;color:#fff;text-wrap:balance}
  .kcard .meta{
    font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.65rem;letter-spacing:.11em;
    text-transform:uppercase;color:rgba(255,255,255,.72);
  }
  .kcard .go{margin-top:.75rem;display:inline-flex;align-items:center;gap:.4rem;
    font-size:.8rem;font-weight:600;color:#fff;transition:gap .25s}
  .kcard:hover .go{gap:.7rem}
  .kcard .go svg{width:12px;height:12px}

  /* ── məhsul kartları ── */
  .mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:1.15rem}
  .mcard{
    display:flex;flex-direction:column;overflow:hidden;
    background:#fff;border:1px solid var(--hairline);border-radius:18px;
    transition:border-color .25s,box-shadow .32s,transform .36s cubic-bezier(.2,.8,.3,1);
  }
  .mcard:hover{border-color:var(--brand-hover);box-shadow:0 24px 50px -28px rgba(7,36,79,.45);transform:translateY(-4px)}
  .mcard .ph{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:17px 17px 0 0;background:#EEF1F4}
  .mcard .ph .im{position:absolute;inset:0;background-size:cover;background-position:center;
    transition:transform .9s cubic-bezier(.2,.7,.3,1)}
  .mcard:hover .ph .im{transform:scale(1.07)}
  .mcard .body{display:flex;flex-direction:column;flex:1;padding:.95rem 1.05rem 1.05rem}
  .mcard .grp{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.62rem;letter-spacing:.11em;
    text-transform:uppercase;color:var(--ink-3);margin-bottom:.35rem}
  .mcard h3{margin:0 0 .65rem;font-size:.94rem;font-weight:600;line-height:1.32;color:var(--ink);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .mcard .sp{display:flex;flex-wrap:wrap;gap:.28rem;margin:0 0 .9rem}
  .mcard .sp span{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.66rem;
    color:var(--brand-mid);background:var(--brand-tint);border-radius:999px;padding:.22rem .5rem;
    font-variant-numeric:tabular-nums}
  .mcard .more{margin-top:auto;display:inline-flex;align-items:center;gap:.4rem;
    font-size:.8rem;font-weight:600;color:var(--brand-hover);transition:gap .25s}
  .mcard:hover .more{gap:.65rem}
  .mcard .more svg{width:12px;height:12px}

  /* ── alt kateqoriya kartları (fotolu) ── */
  .sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:1.1rem}
  .sgcard{
    display:flex;flex-direction:column;overflow:hidden;
    background:#fff;border:1px solid var(--hairline);border-radius:18px;
    transition:border-color .25s,box-shadow .32s,transform .36s cubic-bezier(.2,.8,.3,1);
  }
  .sgcard:hover{border-color:var(--brand-hover);box-shadow:0 22px 46px -26px rgba(7,36,79,.42);transform:translateY(-4px)}
  .sgcard .ph{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:17px 17px 0 0;background:#EEF1F4}
  .sgcard .ph .im{position:absolute;inset:0;background-size:cover;background-position:center;
    transition:transform .9s cubic-bezier(.2,.7,.3,1)}
  .sgcard:hover .ph .im{transform:scale(1.07)}
  .sgcard .ph::after{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(7,36,79,.02),rgba(7,36,79,.28))}
  .sgcard .num{
    position:absolute;left:.7rem;bottom:.7rem;z-index:2;
    font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.66rem;font-weight:500;
    letter-spacing:.1em;color:#fff;background:rgba(7,36,79,.72);
    border-radius:999px;padding:.22rem .55rem;
    backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  }
  .sgcard .body{display:flex;align-items:center;gap:.7rem;padding:.85rem 1rem .95rem}
  .sgcard .tx{flex:1;min-width:0}
  .sgcard b{display:block;font-size:.92rem;font-weight:600;line-height:1.32;color:var(--ink);
    transition:color .22s ease}
  .sgcard:hover b{color:var(--brand-hover)}
  .sgcard .c{display:block;margin-top:.18rem;font-family:"IBM Plex Mono",ui-monospace,monospace;
    font-size:.63rem;letter-spacing:.09em;color:var(--ink-3)}
  .sgcard > .body > svg{width:14px;height:14px;flex:none;color:var(--ink-3);transition:transform .3s,color .25s}
  .sgcard:hover > .body > svg{transform:translateX(4px);color:var(--brand-hover)}

  /* ═══════════════════════════════════════════════════════
     MƏHSUL DETALI — yenidən
     ═══════════════════════════════════════════════════════ */
  .pd2{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(1.6rem,3.5vw,3.2rem);align-items:start}
  @media (max-width:920px){ .pd2{grid-template-columns:1fr} }

  /* qalereya */
  .pg-main{
    position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:22px;
    background:#EEF1F4;cursor:zoom-in;
    box-shadow:0 28px 56px -30px rgba(7,36,79,.42);
  }
  .pg-main .im{position:absolute;inset:0;background-size:cover;background-position:center;
    opacity:0;transform:scale(1.02);transition:opacity .45s ease, transform .8s cubic-bezier(.2,.7,.3,1)}
  .pg-main .im.on{opacity:1;transform:none}
  .pg-main:hover .im.on{transform:scale(1.03)}
  .pg-hint{
    position:absolute;right:.85rem;bottom:.85rem;z-index:3;
    display:inline-flex;align-items:center;gap:.4rem;
    background:rgba(255,255,255,.94);color:var(--brand);
    border-radius:999px;padding:.4rem .75rem;
    font-size:.73rem;font-weight:600;
    box-shadow:0 8px 20px -8px rgba(7,36,79,.4);
    opacity:0;transform:translateY(6px);transition:.3s cubic-bezier(.2,1.2,.3,1);
  }
  .pg-main:hover .pg-hint{opacity:1;transform:none}
  .pg-hint svg{width:14px;height:14px}
  .pg-thumbs{display:flex;gap:.55rem;margin-top:.65rem}
  .pg-thumbs button{
    position:relative;flex:1;aspect-ratio:4/3;border-radius:12px;overflow:hidden;
    background:#EEF1F4;border:2px solid transparent;
    transition:border-color .25s,transform .3s cubic-bezier(.2,1.25,.3,1);
  }
  .pg-thumbs button .im{position:absolute;inset:0;background-size:cover;background-position:center}
  .pg-thumbs button:hover{transform:translateY(-2px)}
  .pg-thumbs button[aria-selected="true"]{border-color:var(--brand)}
  .pg-thumbs button:focus-visible{outline:2px solid var(--brand-hover);outline-offset:2px}

  /* məlumat sütunu */
  .pi-crumb{
    display:inline-flex;align-items:center;gap:.4rem;
    font-family:"IBM Plex Mono",ui-monospace,monospace;
    font-size:.63rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
    color:var(--brand);background:var(--brand-tint);border-radius:999px;padding:.3rem .7rem;
  }
  .pi-title{
    margin:.85rem 0 1.15rem;font-size:clamp(1.42rem,1.1rem + 1.5vw,2.1rem);font-weight:700;
    line-height:1.12;letter-spacing:-.024em;color:var(--ink);text-wrap:balance;
  }
  /* əsas göstəricilər — datasheet hissi verən vurğu zolağı */
  .pi-key{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:1px;
    background:var(--hairline);border:1px solid var(--hairline);border-radius:16px;overflow:hidden;
    margin:0 0 1.35rem;
  }
  .pi-key div{background:#fff;padding:.85rem .9rem}
  .pi-key dt{
    font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.6rem;font-weight:500;
    letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.3rem;
  }
  .pi-key dd{
    margin:0;font-size:1rem;font-weight:700;line-height:1.2;letter-spacing:-.014em;
    color:var(--brand);font-variant-numeric:tabular-nums;
  }
  .pi-cta{display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 1.5rem}
  .pi-b1,.pi-b2{
    display:inline-flex;align-items:center;gap:.55rem;padding:.8rem 1.4rem;border-radius:999px;
    font-size:.87rem;font-weight:600;
    transition:background .22s,color .22s,border-color .22s,gap .22s,transform .3s cubic-bezier(.2,1.3,.3,1);
  }
  .pi-b1{background:var(--brand);color:#fff;box-shadow:0 10px 24px -10px rgba(7,36,79,.5)}
  .pi-b1:hover{background:var(--brand-hover);gap:.8rem;transform:translateY(-2px)}
  .pi-b2{border:1px solid var(--hairline);color:var(--ink)}
  .pi-b2:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-tint);gap:.8rem}
  .pi-b1 svg,.pi-b2 svg{width:15px;height:15px}
  .pi-b2 .pdf{
    font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.58rem;font-weight:500;
    letter-spacing:.1em;background:#BE3B2E;color:#fff;border-radius:4px;padding:.1rem .3rem;
  }
  .pi-b2 .ext{width:12px;height:12px;opacity:.6}

  /* texniki cədvəl */
  .pi-tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:.88rem;
    border:1px solid var(--hairline);border-radius:16px;overflow:hidden}
  .pi-tbl caption{
    caption-side:top;text-align:left;padding:0 0 .6rem;
    font-size:.95rem;font-weight:700;color:var(--ink);letter-spacing:-.01em;
  }
  .pi-tbl th,.pi-tbl td{padding:.62rem .9rem;text-align:left;vertical-align:top;
    border-bottom:1px solid var(--hairline-2)}
  .pi-tbl tr:last-child th,.pi-tbl tr:last-child td{border-bottom:0}
  .pi-tbl tbody tr:nth-child(odd) th,.pi-tbl tbody tr:nth-child(odd) td{background:#FAFBFC}
  .pi-tbl th{width:44%;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.7rem;
    font-weight:500;letter-spacing:.04em;color:var(--ink-2)}
  .pi-tbl td{color:var(--ink);font-variant-numeric:tabular-nums}

  /* aşağı bölmələr */
  .pd-block{margin-top:clamp(2.2rem,4.5vw,3.4rem)}
  .pd-block > h2{
    margin:0 0 1rem;font-size:1.14rem;font-weight:700;letter-spacing:-.014em;color:var(--ink);
    padding-bottom:.6rem;border-bottom:2px solid var(--brand-tint-2);display:inline-block;
  }
  /* ── Zəngin mətn (admin panelindəki editordan gələn HTML) ──────────
     Editor h2/h3/siyahı/sitat/keçid qaytara bilər. Qlobal `ul` sıfırlaması
     nişanları silib flex sıraya çevirdiyi üçün burada məzmun mətni olaraq
     geri qaytarılır — yoxsa maddələr nişansız, yan-yana görünərdi. */
  .prose h2,.pd-desc h2{font-size:1.32rem;line-height:1.3;margin:1.8rem 0 .7rem;color:var(--ink)}
  .prose h3,.pd-desc h3{font-size:1.12rem;line-height:1.35;margin:1.5rem 0 .6rem;color:var(--ink)}
  .prose h4,.pd-desc h4{font-size:1rem;margin:1.3rem 0 .5rem;color:var(--ink)}
  .prose h2:first-child,.pd-desc h2:first-child,
  .prose h3:first-child,.pd-desc h3:first-child{margin-top:0}
  .prose ul,.prose ol,.pd-desc ul,.pd-desc ol{
    display:block;list-style-position:outside;
    margin:0 0 1.05rem;padding-left:1.35rem;gap:0;
  }
  .prose ul,.pd-desc ul{list-style:disc}
  .prose ol,.pd-desc ol{list-style:decimal}
  .prose li,.pd-desc li{
    margin:0 0 .38rem;font-size:1rem;line-height:1.7;color:var(--ink-2);
  }
  .prose blockquote,.pd-desc blockquote{
    margin:1.4rem 0;padding:.15rem 0 .15rem 1.1rem;
    border-left:3px solid var(--brand);color:var(--ink);font-size:1.04rem;
  }
  .prose a,.pd-desc a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
  .prose a:hover,.pd-desc a:hover{color:var(--brand-hover)}
  .prose strong,.pd-desc strong,.prose b,.pd-desc b{color:var(--ink);font-weight:600}
  .prose em,.pd-desc em{font-style:italic}

  .pd-desc{max-width:70ch}
  .pd-desc p{margin:0 0 1rem;font-size:1rem;line-height:1.72;color:var(--ink-2)}
  .apps{list-style:none;margin:0;padding:0;display:grid;
    grid-template-columns:repeat(auto-fit,minmax(266px,1fr));gap:.55rem .95rem}
  .apps li{
    position:relative;padding:.6rem .8rem .6rem 2.1rem;
    background:#FAFBFC;border:1px solid var(--hairline);border-radius:11px;
    font-size:.89rem;line-height:1.5;color:var(--ink-2);
    transition:border-color .22s,background .22s;
  }
  .apps li:hover{border-color:var(--brand-tint-2);background:var(--brand-tint)}
  .apps li::before{
    content:"";position:absolute;left:.8rem;top:1.02em;width:8px;height:8px;
    border-radius:2px;background:var(--brand);opacity:.55;
  }
  /* sertifikat nişanları */
  .pcerts{display:flex;flex-wrap:wrap;gap:.5rem}
  .pcert{
    display:inline-flex;align-items:center;gap:.5rem;
    background:#fff;border:1px solid var(--hairline);border-radius:12px;padding:.55rem .85rem;
    font-size:.83rem;font-weight:600;color:var(--ink);
    transition:border-color .22s,transform .28s cubic-bezier(.2,1.3,.3,1);
  }
  .pcert:hover{border-color:var(--brand);transform:translateY(-2px)}
  .pcert i{
    font-family:"IBM Plex Mono",ui-monospace,monospace;font-style:normal;
    font-size:.65rem;letter-spacing:.08em;color:#fff;background:var(--brand);
    border-radius:5px;padding:.16rem .38rem;
  }
  .pcert svg{width:13px;height:13px;color:var(--ink-3)}


  /* qısa təqdimat sətri (short_description varsa) */
  .pi-lead{margin:-.35rem 0 1.15rem;font-size:.98rem;line-height:1.65;color:var(--ink-2);max-width:52ch}
  /* fayl hələ yüklənməyib: keçid VERİLMİR, dürüst "hazırlanır" halı */
  .pi-b2.is-soon{
    cursor:default;color:var(--ink-3);border-color:var(--hairline-2);background:#FAFBFC;
  }
  .pi-b2.is-soon .pdf{background:#B9C0C8}
  .pi-b2.is-soon em{
    font-family:"IBM Plex Mono",ui-monospace,monospace;font-style:normal;
    font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  }
  /* lightbox açılana qədər hidden — JS yoxdursa səhifədə heç görünmür */
  .plb[hidden]{display:none}

  /* ═══════════ ŞƏKİL LIGHTBOX ═══════════ */
  .plb{
    position:fixed;inset:0;z-index:1200;display:none;
    align-items:center;justify-content:center;
    background:rgba(4,14,30,.94);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  }
  .plb.open{display:flex}
  .plb-img{
    max-width:min(1080px,92vw);max-height:84vh;
    border-radius:12px;box-shadow:0 40px 90px -30px rgba(0,0,0,.8);
    display:block;
  }
  /* sağ üstdə BELİRGİN X */
  .plb-x{
    position:absolute;top:clamp(.9rem,2.5vw,1.6rem);right:clamp(.9rem,2.5vw,1.6rem);
    width:52px;height:52px;display:grid;place-items:center;border-radius:50%;
    background:#fff;color:var(--ink);
    box-shadow:0 12px 30px -10px rgba(0,0,0,.6);
    transition:background .2s,color .2s,transform .32s cubic-bezier(.2,1.4,.3,1);
  }
  .plb-x:hover{background:#BE3B2E;color:#fff;transform:rotate(90deg)}
  .plb-x:focus-visible{outline:3px solid #fff;outline-offset:3px}
  .plb-x svg{width:22px;height:22px}
  /* yanlarda, tam ortada irəli/geri */
  .plb-nav{
    position:absolute;top:50%;margin-top:-27px;
    width:54px;height:54px;display:grid;place-items:center;border-radius:50%;
    background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.34);
    transition:background .2s,border-color .2s,transform .3s cubic-bezier(.2,1.3,.3,1);
  }
  .plb-nav:hover{background:rgba(255,255,255,.26);border-color:#fff}
  .plb-nav:focus-visible{outline:3px solid #fff;outline-offset:3px}
  .plb-nav svg{width:24px;height:24px}
  .plb-prev{left:clamp(.6rem,2.5vw,1.8rem)}
  .plb-next{right:clamp(.6rem,2.5vw,1.8rem)}
  .plb-prev:hover{transform:translateX(-3px)}
  .plb-next:hover{transform:translateX(3px)}
  .plb-count{
    position:absolute;bottom:clamp(.9rem,2.5vw,1.6rem);left:50%;transform:translateX(-50%);
    font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.78rem;letter-spacing:.1em;
    color:rgba(255,255,255,.78);
    background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
    border-radius:999px;padding:.34rem .85rem;
  }
  @media (prefers-reduced-motion:reduce){
    .pg-main .im,.plb-x,.plb-nav{transition:none}
  }

  /* ═══════════════════════════════════════════════════════
     MOBİL DÜZƏLİŞLƏR (2026-09-10)
     Kataloq səhifələri masaüstü üçün qurulmuşdu; footer telefonda
     tək sütuna düşürdü. Burada sıralama, hizalanma, cədvəl və
     lightbox davranışı düzəlir + üfüqi sürüşmə qapadılır.
     ═══════════════════════════════════════════════════════ */

  /* ── üfüqi sürüşmə qoruyucusu ──
     'clip' seçilib, 'hidden' DEYİL: hidden sürüşmə konteyneri yaradır
     və yapışqan başlığı (position:sticky) sındırır. clip isə yalnız
     kəsir, sticky işləməyə davam edir. */
  html{overflow-x:clip}
  /* uzun kəsilməz sözlər (uzun e-poçt, model kodu) qutunu daşıtmasın */
  .pi-tbl td,.pd-desc p,.apps li,.mcard h3,.sgcard b,
  .foot-contact a,.topstrip a{overflow-wrap:break-word}

  /* ── başlıq telefonda viewport-a SIĞMALIDIR ──
     Səbəb ölçüldü (390px ekran, headless Chrome): kənar 16 + loqo 187
     + ayırıcı 23 + gap 24 + alətlər ~162 + kənar 16 ≈ 428px. Səhifə bu
     enə uzanırdı: bütün mətn sağdan kəsilirdi və burger düyməsi
     görünmürdü. Loqo kiçildilib, ayırıcı və artıq boşluqlar götürülüb. */
  @media (max-width:560px){
    .hdr-inner{gap:.5rem}
    .brand img{height:28px}
    .site-header.stuck .brand img{height:25px}
    .brand::after{display:none}
    .hdr-tools{gap:.25rem}
    .icon-btn{width:38px;height:38px}
    .lang-trigger{padding:.3rem .45rem;gap:.32rem}
    :root{--hdr-h:64px;--hdr-h-sticky:56px}
  }
  /* ≤380px: dil düyməsindən qlobus ikonu düşür, loqo bir az daha kiçilir */
  @media (max-width:380px){
    .brand img{height:25px}
    .lang-globe{display:none}
  }

  /* ── müdafiə qatı: naməlum şrift/ölçü hallarında da mətn qutudan çıxmasın ──
     Ölçmələrimiz təmiz çıxsa da (255 nöqtə + şriftsiz hal), real cihazda
     fərqli şrift metrikası uzun bir sözü qutudan çıxara bilər. Bu qayda
     mətnin həmişə sətrə keçməsini təmin edir. */
  @media (max-width:760px){
    h1,h2,h3,h4,p,li,dd,dt,th,td,b,strong,em,figcaption,label{overflow-wrap:break-word}
    /* inline-flex içində ikon+mətn defolt olaraq SƏTRƏ KEÇMİR — açılır */
    .topstrip a,.foot-contact a,.crumb a,.metas span{flex-wrap:wrap}
  }

  /* ── üst incə zolaq: telefonda ortalı, yığcam ── */
  @media (max-width:560px){
    .topstrip{font-size:.7rem}
    /* ortalama artıq qlobaldır — burada yalnız yığcamlaşdırma */
    .topstrip .wrap{gap:.15rem 1rem;padding-top:.35rem;padding-bottom:.35rem}
    .topstrip .left{justify-content:center;gap:.15rem 1rem}
  }

  /* ── FOOTER (telefon) ──
     Sütunlar yan-yana (2×2) VƏ məzmun ortalı: əvvəl hər şey sol
     kənara sıxılırdı, dar ekranda səliqəsiz görünürdü. */
  @media (max-width:560px){
    .site-footer .wrap{padding-left:1.25rem;padding-right:1.25rem}
    /* sütunlar yan-yana, yazılar SOLA hizalı — yalnız ən alt zolaq ortalı */
    .foot-main{
      grid-template-columns:1fr 1fr;
      gap:1.6rem 1.1rem;
    }
    .foot-brand{grid-column:1/-1}
    .foot-brand p{max-width:none;margin-bottom:1rem}
    .foot-contact{gap:.5rem}
    .foot-social{margin-top:1rem}

    .foot-col h3{
      font-size:.67rem;letter-spacing:.1em;
      margin-bottom:.7rem;padding-bottom:.5rem;
    }
    .foot-col ul{gap:.55rem}
    .foot-col a{display:block;font-size:.8rem;line-height:1.35}

    /* ən alt zolaq: copyright + FalconX ortada */
    .foot-bottom .wrap{
      flex-direction:column;align-items:center;justify-content:center;
      text-align:center;gap:.8rem;
    }
    .foot-copy{text-align:center}
    /* FalconX sətri TƏK SIRA qalır: 390px-də sığması üçün şrift
       viewport-a görə kiçilir (clamp) və sətir keçidi bağlanır. */
    .falcon p{
      justify-content:center;text-align:center;
      flex-wrap:nowrap;white-space:nowrap;
      /* 2.15vw: 390px-də ≈8.4px — 62 hərf + 12px loqo tam sığır.
         Hesab: 62×8.4×0.52 + 12×3.29 + boşluq ≈ 322px < 350px sahə. */
      font-size:clamp(.5rem,2.15vw,.8rem);
      letter-spacing:-.005em;
      gap:.28rem;
    }
    .falcon img{height:12px}
  }
  /* ≤340px: tək sıra artıq kəsilə bilər — sətir keçidi geri açılır
     ki mətn itməsin (kəsilmiş yazı oxunmayan yazıdan pisdir) */
  @media (max-width:340px){
    .falcon p{flex-wrap:wrap;white-space:normal;font-size:.62rem}
  }
  /* çox dar ekran (≤380px): yazı bir az kiçilir, sütun sayı DƏYİŞMİR */
  @media (max-width:380px){
    .foot-col a{font-size:.765rem}
    .foot-main{gap:1.4rem .8rem}
  }

  /* ── kataloq: telefonda əvvəl MƏHSULLAR, kateqoriya ağacı ALTDA ──
     Əvvəl ağac məzmunun ÜSTÜNDƏ qalırdı: HVAC-da 21 alt kateqoriya
     linkindən sonra ancaq ilk kart görünürdü. */
  @media (max-width:900px){
    .cat-layout{gap:2rem}
    .cat-layout > div:not(.cat-side){order:1}
    .cat-side{order:2;border-top:1px solid var(--hairline);padding-top:1.4rem}
    .cat-side h3{margin-bottom:.5rem}
    .cat-tree > .lvl0 > a{padding:.62rem .9rem}   /* daha rahat toxunma sahəsi */
  }

  /* ── breadcrumb: son halqa gizlənir (başlıq onsuz da təkrarlayır) ── */
  @media (max-width:560px){
    .crumb{font-size:.62rem;gap:.32rem;margin-bottom:.9rem}
    .crumb > span:last-child,
    .crumb > svg:last-of-type{display:none}
    .page-hero{border-radius:0 0 22px 22px}
  }

  /* ── məhsul detalı ── */
  @media (max-width:560px){
    .pi-key{grid-template-columns:1fr 1fr;margin-bottom:1.15rem}
    .pi-key div{padding:.7rem .75rem}
    /* 3 göstərici 2 sütuna düşəndə axırıncı boş xana qalırdı —
       tək saydakı son element bütün sətri tutur */
    .pi-key div:last-child:nth-child(odd){grid-column:1/-1}
    .pi-key dt{font-size:.56rem}
    .pi-key dd{font-size:.92rem}
    .pi-cta{flex-direction:column;align-items:stretch;gap:.55rem}
    .pi-b1,.pi-b2{justify-content:center;padding:.85rem 1rem}
    /* texniki cədvəl sətir-sətir yığılır: 390px-də iki sütun çox dardır */
    .pi-tbl{display:block;border:0;border-radius:0}
    .pi-tbl caption{padding-bottom:.5rem}
    .pi-tbl tbody{display:block;border:1px solid var(--hairline);border-radius:14px;overflow:hidden}
    .pi-tbl tr{display:block;padding:.6rem .85rem;border-bottom:1px solid var(--hairline-2)}
    .pi-tbl tr:last-child{border-bottom:0}
    .pi-tbl tbody tr:nth-child(odd){background:#FAFBFC}
    .pi-tbl th,.pi-tbl td{display:block;width:auto;padding:0;border:0;background:none!important}
    .pi-tbl th{margin-bottom:.15rem}
    .pi-tbl td{font-size:.9rem;font-weight:600}
    .pg-thumbs{gap:.4rem}
    .pd-block{margin-top:2rem}
    .pd-block > h2{font-size:1.05rem}
    .apps li{font-size:.86rem}
  }

  /* ── şəkil lightbox: oxlar şəkilin ÜZƏRİNİ örtmür ──
     Əvvəl 54px-lik dairələr kənardan ~10px-də dururdu, 390px ekranda
     şəkilin üstünə düşürdü. Markup dəyişmir — yalnız mövqe. */
  @media (max-width:560px){
    .plb{padding:3.4rem .6rem 4.8rem}
    .plb-img{max-width:100%;max-height:100%}
    .plb-x{top:.7rem;right:.7rem;width:44px;height:44px}
    .plb-x svg{width:19px;height:19px}
    .plb-nav{top:auto;bottom:.9rem;margin-top:0;width:46px;height:46px}
    .plb-nav svg{width:21px;height:21px}
    .plb-prev{left:1rem}
    .plb-next{right:1rem}
    .plb-prev:hover,.plb-next:hover{transform:none}
    .plb-count{bottom:calc(.9rem + 11px)}
  }

  /* ── ana səhifə "Məhsullar" indeksi: telefonda ARTIQ yana sürüşmür ──
     Əvvəl yatay lentə (overflow-x:auto, scroll-snap) çevrilirdi —
     istifadəçi bunu "səhifə sağa-sola gedir" kimi görürdü. İndi
     sadəcə sətrə bölünən şəbəkədir, heç bir yatay hərəkət yoxdur. */
  @media (max-width:560px){
    .pcat-list{
      display:grid;grid-template-columns:1fr 1fr;gap:.5rem;
      overflow:visible;scroll-snap-type:none;
    }
    .pcat-item{flex:none;min-width:0;scroll-snap-align:none}
    .pcat-item .nm{font-size:.83rem;line-height:1.3}
  }

  /* ── kart şəbəkələri: tək sütun, boşluqlar yığcam ── */
  @media (max-width:560px){
    .sgrid,.mgrid,.kgrid{gap:.9rem}
    .sgcard .body{padding:.75rem .85rem .85rem}
    .mcard .body{padding:.85rem .9rem .95rem}
    .kcard{min-height:230px}
  }

  /* ══ 404 səhifəsi ═══════════════════════════════════════════
     Öz başına duran, yığcam bir ekran: loqo → 404 → izah → düymələr →
     geri sayım. Başlıq/footer yoxdur (səhifə bir neçə saniyə sonra ana
     səhifəyə keçir), ona görə menyudan gələn qısayollar altda verilir. */
  .e404{
    /* flex + max-width: grid `place-items:center` ilə sütun trek-i məzmuna
       görə ölçüldüyü üçün kartın `100%`-i telefonda ekrandan kənara çıxırdı */
    min-height:100svh;display:flex;align-items:center;justify-content:center;
    padding:clamp(1.6rem,5vw,3rem) 1.15rem;
    background:
      radial-gradient(1200px 520px at 50% -8%, var(--brand-tint) 0%, transparent 70%),
      var(--hairline-2);
  }
  .e404-card{
    width:100%;max-width:640px;text-align:center;
    background:var(--white);border:1px solid var(--hairline);border-radius:26px;
    padding:clamp(1.9rem,4vw,3rem) clamp(1.25rem,4vw,3rem) clamp(1.5rem,3vw,2.2rem);
    box-shadow:0 40px 80px -48px rgba(7,36,79,.4);
  }
  .e404-logo{display:inline-block;line-height:0}
  .e404-logo img{width:clamp(150px,42vw,196px);height:auto}
  .e404-logo:focus-visible{outline:2px solid var(--brand-hover);outline-offset:4px;border-radius:6px}
  .e404-code{
    display:block;margin:clamp(1.1rem,3vw,1.7rem) 0 .35rem;
    font-family:"IBM Plex Mono",ui-monospace,monospace;
    font-size:clamp(3.4rem,14vw,5.4rem);font-weight:500;line-height:.92;
    letter-spacing:-.04em;
    /* rəqəm "boş" görünməsin: marka gradientiylə yazı kimi doldurulur */
    background:linear-gradient(150deg,var(--brand) 12%,var(--brand-hover) 88%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .e404-card h1{
    margin:0 0 .55rem;color:var(--ink);
    font-size:clamp(1.25rem,1rem + 1.1vw,1.7rem);font-weight:700;
    line-height:1.18;letter-spacing:-.02em;text-wrap:balance;
  }
  .e404-card p{margin:0;color:var(--ink-2);font-size:.98rem;line-height:1.6;max-width:44ch;margin-inline:auto}
  .e404-acts{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin:1.5rem 0 0}
  /* .btn-1/.btn-2 tünd fon üçün qurulub — burada fon ağdır, ona görə
     eyni forma saxlanılıb rənglər yerli olaraq çevrilir. */
  .e404-acts .btn-1{background:var(--brand);color:#fff;box-shadow:0 14px 30px -16px rgba(7,36,79,.6)}
  .e404-acts .btn-1:hover,.e404-acts .btn-1:focus-visible{background:var(--brand-hover);color:#fff}
  .e404-acts .btn-2{border-color:var(--hairline);color:var(--brand)}
  .e404-acts .btn-2:hover,.e404-acts .btn-2:focus-visible{border-color:var(--brand);background:var(--brand-tint)}
  .e404-acts .btn-1:focus-visible,.e404-acts .btn-2:focus-visible{outline-color:var(--brand-hover)}
  .e404-timer{
    display:flex;flex-wrap:wrap;gap:.2rem .6rem;align-items:center;justify-content:center;
    margin-top:1.3rem !important;font-size:.85rem;color:var(--ink-3)
  }
  .e404-cancel{
    appearance:none;background:none;border:0;padding:0;cursor:pointer;
    font:inherit;color:var(--brand-hover);text-decoration:underline;
    text-underline-offset:3px;
  }
  .e404-cancel:hover{color:var(--brand)}
  .e404-links{
    display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;justify-content:center;
    margin-top:1.4rem;padding-top:1.15rem;border-top:1px solid var(--hairline-2);
  }
  .e404-links a{
    color:var(--ink-2);text-decoration:none;font-size:.85rem;font-weight:500;
    letter-spacing:.01em;
  }
  .e404-links a:hover{color:var(--brand-hover)}


  /* ── reCAPTCHA v2 qutusu (formalarda göndər düyməsinin üstündə) ──
     Widget sabit 304px genişdir; dar ekranda formadan daşmasın deyə
     miqyaslanır. Xəbərdarlıq mətni yalnız qutu işarələnmədən göndərməyə
     cəhd ediləndə görünür (bax lib/Recaptcha.php). */
  .rc-box{margin:.35rem 0 .15rem}
  .rc-box .g-recaptcha{display:inline-block;max-width:100%}
  .rc-err{
    margin:.45rem 0 0;font-size:.82rem;line-height:1.35;color:#c0392b;font-weight:600;
  }
  @media (max-width:360px){
    .rc-box .g-recaptcha{transform:scale(.86);transform-origin:0 0;height:65px}
  }