:root{ /* Marka renkleri — logodan türetilmiş VARSAYILAN değerler. Admin panel bir değer girdiğinde PHP bunları 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; } .topstrip .wrap{display:flex;flex-wrap:wrap;gap:.3rem 1.5rem;align-items:center;justify-content:space-between;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{ 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} .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{ left:50%; transform:translate(-50%,-8px); width:min(1180px,calc(100vw - 2.5rem)); display:grid; grid-template-columns:236px 1fr 300px; } .nav-item.open .panel-mega{transform:translate(-50%,0)} /* 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; width:min(680px,calc(100vw - 2.5rem)); display:grid; grid-template-columns:1fr 240px; } .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} } @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 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)} .foot-social{display:flex;gap:.45rem;margin-top: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)} @media (max-width:900px){ .foot-main{grid-template-columns:1fr 1fr;gap:1.9rem} .foot-brand{grid-column:1/-1} } @media (max-width:560px){ .foot-main{grid-template-columns:1fr} .foot-bottom .wrap{flex-direction:column;align-items:flex-start} .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-fit,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-fit,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-fit,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} /* ── 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) ── */ .kgrid{display:grid;grid-template-columns:repeat(auto-fit,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-fit,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-fit,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; } .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} }