/* ============================================================
Charge.az — main.css v4 | Professional Apple-inspired Theme
White theme · #57a695 · WCAG AAA Accessibility · Premium Design
============================================================ */
:root {
/* ── COLOR SYSTEM: WCAG AAA+ Contrast ── */
--c-bg: #ffffff; /* pure white */
--c-surface: #f5f5f7; /* Apple neutral gray — the iconic section fill */
--c-surface-2: #ececef; /* one step deeper */
--c-surface-3: #e3e4e8; /* medium neutral */
/* Brand green (Apple-like teal) */
--c-brand: #2d9d88; /* primary — improved from #57a695 for better WCAG */
--c-brand-d: #1d7a6f; /* darker — hover state */
--c-brand-dd: #165d5c; /* darker still — active state */
--c-brand-light: #c8e8e0; /* light background */
--c-brand-lighter: #e4f3ef; /* lighter background */
--c-brand-t: #e4f3ef; /* tinted bg (for backwards compat) */
--c-brand-t2: #c8e8e0; /* tinted bg 2 (for backwards compat) */
/* Text & Muted */
--c-text: #1a2620; /* deep dark (was #12211f) — better for WCAG */
--c-text-2: #2d3d39; /* secondary text */
--c-muted: #586f69; /* muted text — WCAG AA tinted fonlarda da */
--c-text-3: #5f746e; /* lighter muted — WCAG AA (4.99:1 ağ, 4.58:1 #f5f5f7) */
/* Borders & Dividers */
--c-border: #dfe8e5; /* light border */
--c-border-2: #c9dcd7; /* stronger border */
--c-border-3: #b3d0c9; /* strong border */
/* Semantic Colors */
--c-danger: #d32f2f; /* error — better contrast */
--c-warning: #b35400; /* warning — WCAG AA (5.02:1) */
--c-success: #2e7d32; /* success — WCAG AA (5.13:1) */
--c-info: #1976d2; /* info */
/* Shadows: Apple-style (subtle, precise) */
--sh-xs: 0 1px 2px rgba(10,20,18,.04), 0 1px 4px rgba(10,20,18,.02);
--sh-sm: 0 2px 8px rgba(10,20,18,.06), 0 2px 12px rgba(10,20,18,.04);
--sh-md: 0 4px 16px rgba(10,20,18,.08), 0 8px 24px rgba(10,20,18,.04);
--sh-lg: 0 8px 32px rgba(10,20,18,.12), 0 16px 48px rgba(10,20,18,.06);
--sh-xl: 0 12px 48px rgba(10,20,18,.16), 0 24px 64px rgba(10,20,18,.08);
/* Border Radius: Consistent Apple hierarchy */
--r: 14px; /* card radius */
--r-sm: 10px; /* small elements */
--r-xs: 6px; /* extra small (badges, small inputs) */
--r-btn: 980px; /* pill buttons */
/* Spacing: 4px baseline (Apple's standard) */
--sp-xs: 4px;
--sp-sm: 8px;
--sp-md: 12px;
--sp-lg: 16px;
--sp-xl: 24px;
--sp-2xl: 32px;
--sp-3xl: 48px;
--sp-4xl: 64px;
/* Layout */
--nav-h: 68px;
--cw: 1160px;
/* Bölmələrin şaquli boşluğu.
Əvvəl clamp(72px,10vw,120px) idi və mobildə sınırdı: `10vw` şərti
yalnız 720px-dən geniş ekranlarda minimumu keçir, ona görə telefon da
72px alırdı. İki bölmə arasında 144px boş sahə qalırdı — telefonun
görünən hündürlüyünün beşdə biri.
İndi telefonda 52px, planşetdə ~61px, masaüstündə 104px-ə qədər
qalxır — kiçik ekranda sıx, geniş ekranda havadar. */
--sp: clamp(52px,8vw,104px); /* section padding */
/* Typography — Apple SF Pro system stack (Inter = cross-platform fallback).
Apple uses ONE family everywhere; --ff-d and --ff-b differ only in optical size/weight. */
--ff-d: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
--ff-b: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
/* Apple's signature display tracking (headlines ride tight & negative) */
--tracking-tight: -.022em;
--tracking-tighter: -.032em;
/* Typography Scale (modular 1.125x) */
--fs-xs: 12px; /* captions, labels */
--fs-sm: 13px; /* small text */
--fs-base: 14px; /* body text */
--fs-lg: 15px; /* larger body */
--fs-xl: 16px; /* larger still */
--fs-2xl: 18px; /* headings */
--fs-3xl: 20px; /* section headings */
--fs-4xl: 24px; /* page headings */
--fs-5xl: 28px; /* hero headings */
--fs-6xl: 32px; /* large hero */
/* Easing Functions: Apple's signature curves */
--ease: cubic-bezier(.16, 1, .3, 1); /* power ease */
--ease-in-out: cubic-bezier(.4, 0, .2, 1); /* smooth */
--ease-out: cubic-bezier(0, 0, .2, 1); /* decelerate */
--ease-in: cubic-bezier(.4, 0, 1, 1); /* accelerate */
/* Transitions: Fast & responsive (Apple standard) */
--t-fast: 100ms;
--t-base: 200ms;
--t-slow: 300ms;
--t-slower: 500ms;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
body{
font-family:var(--ff-b);
font-size:17px; /* Apple's baseline reading size */
background:var(--c-bg);
color:var(--c-text);
line-height:1.6;
letter-spacing:-.011em; /* SF Text optical tightening */
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility;
}
img,svg,picture{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none;transition:color var(--t-fast) var(--ease-out)}
ul,ol{list-style:none}
button{
font:inherit;cursor:pointer;border:none;background:none;
transition:all var(--t-base) var(--ease-out);
-webkit-user-select:none;-moz-user-select:none;user-select:none;
}
input,textarea,select{
font:inherit;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
:focus-visible{
outline:2px solid var(--c-brand);
outline-offset:4px;
border-radius:4px;
}
:disabled{opacity:.5;cursor:not-allowed}
.ambient{display:none!important}
/* ── SMOOTH SCROLL ── */
@supports (scroll-behavior:smooth){
html{scroll-behavior:smooth}
}
/* ── HEADER ── */
.site-header{
position:fixed;top:0;left:0;right:0;z-index:200;
height:var(--nav-h);
transition:background .3s,box-shadow .3s,backdrop-filter .3s;
}
.site-header{background:transparent}
.site-header.scrolled,
body:not(.page-home) .site-header{
background:rgba(255,255,255,.95);
backdrop-filter:blur(20px);
box-shadow:0 1px 0 var(--c-border),var(--sh-xs);
}
.nav-inner{
max-width:var(--cw);margin:0 auto;padding:0 28px;
height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.logo{display:flex;align-items:center;gap:9px;font-family:var(--ff-d);font-size:17px;font-weight:700;color:var(--c-text);flex-shrink:0}
.logo-dot{color:var(--c-brand)}
.site-header:not(.scrolled) .logo,
body.page-home .site-header:not(.scrolled) .logo{color:#fff}
.nav-links{display:flex;align-items:center;gap:2px}
.nav-link{font-size:13px;font-weight:500;padding:7px 12px;border-radius:6px;color:var(--c-muted);transition:color .2s,background .2s}
.nav-link:hover{color:var(--c-brand);background:var(--c-brand-t)}
.nav-link.active{color:var(--c-brand-d);font-weight:600}
body.page-home .site-header:not(.scrolled) .nav-link{color:rgba(255,255,255,.78)}
body.page-home .site-header:not(.scrolled) .nav-link:hover{color:#fff;background:rgba(255,255,255,.12)}
.nav-cta{
margin-left:6px;padding:8px 18px;border-radius:10px;
background:var(--c-brand);color:#fff!important;
font-weight:600;font-size:13px;
transition:background .2s,transform .15s,box-shadow .2s;
box-shadow:0 2px 10px rgba(87,166,149,.3);
}
.nav-cta:hover{background:var(--c-brand-d);transform:translateY(-1px);box-shadow:0 4px 18px rgba(87,166,149,.4)}
.nav-toggle{display:none;flex-direction:column;gap:5px;width:36px;height:36px;align-items:center;justify-content:center;border-radius:6px}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--c-text);border-radius:4px;transition:transform .32s var(--ease),opacity .2s var(--ease)}
body.page-home .site-header:not(.scrolled) .nav-toggle span{background:#fff}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* ── HERO ── */
.hero{
position:relative;width:100%;
min-height:100vh;
display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
overflow:hidden;
}
.hero-seo-h1{
position:absolute;z-index:5;top:calc(var(--nav-h) + 18px);left:50%;transform:translateX(-50%);
max-width:min(640px,88vw);margin:0;text-align:center;
font-family:var(--ff-b);font-size:11px;font-weight:700;letter-spacing:.2px;line-height:1.4;
color:rgba(255,255,255,.88);
background:rgba(10,25,22,.34);border:1px solid rgba(255,255,255,.16);
border-radius:10px;padding:8px 16px;
backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%);
}
@media(max-width:640px){
.hero-seo-h1{font-size:11px;top:calc(var(--nav-h) + 8px);padding:6px 12px;max-width:82vw}
}
.hero-bg{
position:absolute;inset:0;
background-image:url("/assets/img/hero.jpg");
background-size:cover;background-position:center 28%;
transform:scale(1.05);will-change:transform;
animation:heroKenBurns 2.6s cubic-bezier(.16,1,.3,1);
}
@keyframes heroKenBurns{
from{ transform:scale(1.14); filter:saturate(.85) brightness(.92); }
to{ transform:scale(1.05); filter:saturate(1) brightness(1); }
}
@media(prefers-reduced-motion:reduce){ .hero-bg{ animation:none } }
/* WebP dəstəkləyən brauzerlər üçün ~47% daha kiçik fayl (JPEG hələ də universal fallback-dır) */
@supports (background-image:image-set(url("/assets/img/hero.webp") type("image/webp"))){
.hero-bg{ background-image:image-set(url("/assets/img/hero.webp") type("image/webp"), url("/assets/img/hero.jpg") type("image/jpeg")); }
}
.page-hero{
position:relative;overflow:hidden;
padding:calc(var(--nav-h) + 56px) 0 56px;
/* Əvvəl burada köhnə #57a695 hardkod idi — ağ mətnlə kontrastı 2.4:1,
yəni WCAG AA-dan aşağı. İndi marka palətrinin tünd pillələri. */
background:linear-gradient(165deg,#1a7367 0%,#11504c 100%);
color:#fff;
text-align:center;
}
.page-hero .container{position:relative;z-index:1}
.page-hero h1{color:#fff}
/* nişan: açıq fon üstündə ağ mətn oxunmurdu — indi ağ lövhə,
üstündə tünd marka rəngi (kontrast 7:1-dən yuxarı) */
.page-hero .section-label{
color:var(--c-brand-dd,#165d5c);
background:#fff;
border-color:rgba(255,255,255,.75);
}
.page-hero .lead{max-width:62ch;color:#fff;opacity:.94}
.hero-ov{
position:absolute;inset:0;
background:linear-gradient(160deg,rgba(3,10,8,.18) 0%,rgba(3,10,8,.72) 65%,rgba(3,10,8,.9) 100%);
}
#heroCanvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
/* SVG annotation */
.anno-svg{
position:absolute;inset:0;width:100%;height:100%;
pointer-events:none;z-index:2;overflow:visible;
opacity:0;transition:opacity .8s ease;
}
.anno-svg.vis{opacity:1}
@media(prefers-reduced-motion:reduce){ .anno-svg{ transition:opacity .3s linear } }
.aln{
fill:none;stroke:#57a695;stroke-width:2.2;stroke-linecap:round;
stroke-dasharray:12,9;
}
.aln-tip{fill:none;stroke:none;stroke-width:.01;stroke-dasharray:99999}
.al1{animation:ad1 3.4s linear infinite,agl 3.2s ease-in-out infinite}
.al2{animation:ad2 2.2s linear infinite,agl 2.8s .4s ease-in-out infinite}
.al3{animation:ad3 1.6s linear infinite,agl 2.4s .8s ease-in-out infinite}
.apt{fill:#b8ffe8;opacity:0}
.aorigin{fill:#57a695;filter:drop-shadow(0 0 6px rgba(87,166,149,.8))}
.aring{fill:none;stroke:#57a695;stroke-width:2;opacity:0} /* yanıb-sönən halqa çıxarıldı */
.aln, .aln-tip{cursor:pointer;pointer-events:all}
@keyframes ad1{to{stroke-dashoffset:-126}}
@keyframes ad2{to{stroke-dashoffset:-105}}
@keyframes ad3{to{stroke-dashoffset:-84}}
@keyframes agl{
0%,100%{filter:drop-shadow(0 0 3px #57a695) drop-shadow(0 0 8px rgba(87,166,149,.3))}
50%{filter:drop-shadow(0 0 6px #57a695) drop-shadow(0 0 18px rgba(87,166,149,.55))}
}
/* ── HERO BADGES (JS-positioned) ── */
.hbadge{
position:absolute;z-index:3;
opacity:0;
transform:translateY(10px) scale(.94);
filter:blur(5px);
transition:opacity .7s var(--ease),transform .7s var(--ease),filter .7s var(--ease);
pointer-events:auto;
will-change:transform;
}
.hbadge.vis{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
@media(prefers-reduced-motion:reduce){ .hbadge{ transition:opacity .3s linear; filter:none; transform:none } }
.hb-in{
background:linear-gradient(150deg,rgba(6,22,18,.94) 0%,rgba(3,13,10,.9) 100%);
border:1px solid rgba(87,166,149,.36);
border-radius:20px;
padding:16px 18px 16px;
backdrop-filter:blur(22px) saturate(1.7);
box-shadow:
0 0 0 1px rgba(87,166,149,.08),
0 14px 38px rgba(0,0,0,.4),
0 0 32px rgba(87,166,149,.14),
inset 0 1px 0 rgba(255,255,255,.1);
min-width:240px;
padding:18px 20px;
position:relative;
overflow:hidden;
}
.hb-in::before{
content:'';position:absolute;top:0;left:16px;right:16px;height:1px;
background:linear-gradient(90deg,transparent,rgba(127,207,190,.65),transparent);
}
.hb-in::after{
content:'';position:absolute;inset:0;
background:radial-gradient(120% 90% at 50% -30%,rgba(87,166,149,.14),transparent 55%);
pointer-events:none;
}
#hb2 .hb-in{animation-delay:.7s}
#hb3 .hb-in{animation-delay:1.3s}
@keyframes hbFloat{0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)}}
.hb-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;position:relative}
.hb-icon{
width:36px;height:36px;border-radius:10px;flex-shrink:0;
background:linear-gradient(140deg,rgba(127,207,190,.32),rgba(87,166,149,.14));
border:1px solid rgba(127,207,190,.4);
display:flex;align-items:center;justify-content:center;
box-shadow:inset 0 1px 0 rgba(127,207,190,.28),0 4px 14px -4px rgba(0,0,0,.35);
}
.hb-icon svg{width:19px;height:19px}
.hb-title{font-family:var(--ff-d);font-size:13px;font-weight:700;color:#b4f2dd;letter-spacing:.12px}
.hb-sub{font-size:11px;color:rgba(197,235,224,.78);margin-top:2px;letter-spacing:.24px}
.hb-btn{
display:flex;align-items:center;gap:7px;
width:100%;
padding:9px 13px;border-radius:var(--r-btn);
font-size:11px;font-weight:600;letter-spacing:.1px;
color:#fff;
background:var(--c-brand-d);
border:none;cursor:pointer;
position:relative;
transition:background-color .2s var(--ease);
}
.hb-btn:hover{background:var(--c-brand-dd)}
.hb-btn span{flex:1;text-align:left}
.hb-btn-arr{opacity:.7;transition:transform .2s,opacity .2s}
.hb-btn:hover .hb-btn-arr{transform:translateX(3px);opacity:1}
/* ── HERO TEXT ── */
.hero-text{
position:relative;z-index:4;
text-align:center;padding:calc(var(--nav-h) + 120px) 24px 220px;
max-width:760px;
opacity:0;transform:translateY(20px);
transition:opacity .9s var(--ease),transform .9s var(--ease);
}
.hero-text.vis{opacity:1;transform:translateY(0)}
.hero-text-mobile{display:none}
.hero .hero-ctas .lbl-s{display:none} /* qısa etiket yalnız ≤640px-də */
.hero-eyebrow{
display:inline-flex;align-items:center;gap:8px;
font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
color:rgba(87,166,149,.9);
background:rgba(87,166,149,.11);
border:1px solid rgba(87,166,149,.22);
border-radius:20px;padding:5px 14px;margin-bottom:22px;
}
.hero-pulse{
width:7px;height:7px;border-radius:50%;background:#57a695;flex-shrink:0;
}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(87,166,149,.4)} 50%{opacity:.4;box-shadow:0 0 0 5px rgba(87,166,149,0)}}
.hero-h1{
font-family:var(--ff-d);
font-size:clamp(44px,7vw,80px);
font-weight:700;line-height:1.05;letter-spacing:var(--tracking-tighter);
color:#fff;text-shadow:0 6px 32px rgba(0,0,0,.35);
margin-bottom:22px;
}
.hero-h1 em{font-style:normal;color:#57a695}
.hero-p{
font-size:clamp(14px,1.5vw,17px);color:rgba(255,255,255,.75);
line-height:1.78;margin-bottom:38px;
max-width:560px;margin-left:auto;margin-right:auto;
}
.hero-ctas{display:flex;align-items:center;justify-content:center;gap:11px;flex-wrap:wrap}
/* ── HERO STATS ── */
.hero-stats{
position:absolute;bottom:0;left:0;right:0;z-index:4;
display:flex;justify-content:center;
padding:0 28px 28px;
background:linear-gradient(to top,rgba(3,10,8,.9) 0%,transparent 100%);
opacity:0;transform:translateY(8px);
transition:opacity .8s .4s var(--ease),transform .8s .4s var(--ease);
}
.hero-stats.vis{opacity:1;transform:translateY(0)}
.hst-inner{
display:flex;align-items:center;
background:rgba(5,18,14,.78);
border:1px solid rgba(87,166,149,.18);
border-radius:14px;backdrop-filter:blur(18px);
overflow:hidden;max-width:580px;width:100%;
}
.hst{flex:1;text-align:center;padding:15px 10px}
.hst-sep{width:1px;height:36px;background:rgba(87,166,149,.14);flex-shrink:0}
.hst-n{font-family:var(--ff-d);font-size:clamp(18px,2.4vw,26px);font-weight:800;color:#57a695;letter-spacing:-.4px}
.hst-l{font-size:11px;color:rgba(87,166,149,.48);margin-top:3px;font-weight:500;letter-spacing:.5px;text-transform:uppercase}
/* ── BUTTON SYSTEM (Apple-inspired) ────────────────────────────
Principle: One button style = one visual role. Size hierarchy via padding.
No gradients. Color change on hover. Tap-friendly (min 44px touch target).
─────────────────────────────────────────────────────────────────────── */
/* PRIMARY BUTTON — Main CTA (dark green) */
.btn,
.btn-primary,
.hcta-primary{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
padding:13px 28px;
border-radius:var(--r-btn);
font-family:var(--ff-b);
font-size:var(--fs-base);
font-weight:600;
letter-spacing:-.3px;
color:#fff;
border:none;
cursor:pointer;
background:var(--c-brand-d);
box-shadow:0 2px 8px rgba(29,122,111,.15);
transition:background-color var(--t-base) var(--ease-out),
box-shadow var(--t-base) var(--ease-out),
transform var(--t-fast) var(--ease-out);
will-change:background-color,transform;
position:relative;
}
.btn:hover,
.btn-primary:hover,
.hcta-primary:hover{
background:var(--c-brand-dd);
box-shadow:0 4px 12px rgba(29,122,111,.25);
}
.btn:active,
.btn-primary:active,
.hcta-primary:active{
transform:scale(.98);
}
.btn:disabled,
.btn-primary:disabled,
.hcta-primary:disabled{
opacity:.65;
cursor:not-allowed;
}
/* SECONDARY BUTTON — Alternative (outline) */
.btn-secondary,
.btn-ol,
.hcta-ghost{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
padding:13px 28px;
border-radius:var(--r-btn);
font-family:var(--ff-b);
font-size:var(--fs-base);
font-weight:600;
letter-spacing:-.3px;
color:var(--c-brand-d);
border:1.5px solid var(--c-brand-t2);
background:var(--c-brand-t);
cursor:pointer;
transition:all var(--t-base) var(--ease-out);
position:relative;
}
.btn-secondary:hover,
.btn-ol:hover,
.hcta-ghost:hover{
background:var(--c-brand-t2);
border-color:var(--c-brand-d);
transform:translateY(-2px);
box-shadow:0 4px 12px rgba(45,157,136,.12);
}
.btn-secondary:active,
.btn-ol:active,
.hcta-ghost:active{
transform:translateY(0);
}
/* TERTIARY BUTTON — Text-only */
.btn-tertiary{
display:inline-flex;
align-items:center;
justify-content:center;
gap:6px;
padding:10px 16px;
border-radius:var(--r-btn);
font-size:var(--fs-base);
font-weight:600;
color:var(--c-brand-d);
border:none;
background:transparent;
cursor:pointer;
transition:all var(--t-base) var(--ease-out);
}
.btn-tertiary:hover{
background:var(--c-brand-lighter);
color:var(--c-brand-dd);
}
/* SMALL BUTTON (pills, tags) */
.btn-sm,
.btn-small{
padding:8px 16px;
font-size:var(--fs-sm);
font-weight:600;
border-radius:var(--r-btn);
}
/* LARGE BUTTON (full-width on mobile) */
.btn-lg,
.btn-large{
padding:16px 32px;
font-size:var(--fs-lg);
font-weight:600;
min-height:52px;
}
/* FULL WIDTH */
.btn-block,
.btn-full{
width:100%;
display:flex;
align-items:center;
justify-content:center;
}
/* ICON BUTTON */
.btn-icon{
width:40px;
height:40px;
padding:0;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
}
/* BUTTON WITH ICON */
.btn-icon-left{padding-left:12px}
.btn-icon-right{padding-right:12px}
.btn svg{
width:18px;
height:18px;
flex-shrink:0;
}
/* LOADING STATE */
.btn.is-loading{pointer-events:none;opacity:.7}
.btn-spinner{
width:16px;height:16px;
border:2px solid rgba(255,255,255,.3);
border-top-color:#fff;
border-radius:50%;
animation:spin .7s linear infinite;
display:none;
}
.btn.is-loading .btn-spinner{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
/* ── Hero CTA buttons specific refinements ── */
.hero-ctas{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.hcta-icon{
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
width:22px;
height:22px;
border-radius:6px;
background:rgba(10,31,27,.14);
box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}
.hcta-ghost .hcta-icon{
background:linear-gradient(140deg,rgba(45,157,136,.35),rgba(45,157,136,.1));
border:1px solid rgba(76,187,169,.35);
box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
}
/* ── Mobile Button Sizes ── */
@media(max-width:640px){
.btn, .btn-primary, .btn-secondary{
padding:12px 20px;
font-size:var(--fs-sm);
}
.btn-lg, .btn-large{
padding:14px 24px;
}
}
/* ── CONTAINER & SPACING ── */
.container{
max-width:var(--cw);
margin:0 auto;
padding:0 28px;
}
.sec{padding:var(--sp) 0}
/* ── SECTION HEADERS ── */
.section-label{
display:inline-block;
font-size:var(--fs-xs);
font-weight:700;
letter-spacing:1.5px;
text-transform:uppercase;
color:var(--c-brand-d);
background:var(--c-brand-lighter);
border:1px solid var(--c-brand-t2);
border-radius:20px;
padding:6px 14px;
margin-bottom:12px;
animation:fadeInUp .6s var(--ease) both;
}
@keyframes fadeInUp{
from{opacity:0;transform:translateY(8px)}
to{opacity:1;transform:translateY(0)}
}
.section-header{margin-bottom:32px}
.section-header h2{
font-family:var(--ff-d);
font-size:clamp(var(--fs-4xl),3vw,var(--fs-6xl));
font-weight:700;
color:var(--c-text);
letter-spacing:var(--tracking-tight);
line-height:1.14;
}
.section-header h2 em{
font-style:normal;
color:var(--c-brand-d);
}
.section-header p{
font-size:var(--fs-lg);
color:var(--c-muted);
line-height:1.75;
margin-top:12px;
max-width:620px;
}
.sec-hdr{text-align:center;max-width:580px;margin:0 auto 52px}
.sec-tag{
display:inline-block;
font-size:var(--fs-xs);
font-weight:700;
letter-spacing:1.6px;
text-transform:uppercase;
color:var(--c-brand-d);
background:var(--c-brand-lighter);
border:1px solid var(--c-brand-t2);
border-radius:20px;
padding:6px 14px;
margin-bottom:14px;
}
.sec-hdr h2{
font-family:var(--ff-d);
font-size:clamp(24px,3.8vw,40px);
font-weight:700;
letter-spacing:var(--tracking-tight);
line-height:1.12;
color:var(--c-text);
margin-bottom:13px;
}
.sec-hdr p{
font-size:var(--fs-base);
color:var(--c-muted);
line-height:1.7;
}
.sec-foot{text-align:center;margin-top:44px}
/* ── Headings Typography ── */
h1{
font-family:var(--ff-d);
font-size:clamp(var(--fs-5xl),5vw,var(--fs-6xl));
font-weight:700;
color:var(--c-text);
line-height:1.08;
letter-spacing:var(--tracking-tighter);
}
h2{
font-family:var(--ff-d);
font-size:clamp(var(--fs-3xl),3.5vw,var(--fs-5xl));
font-weight:700;
color:var(--c-text);
line-height:1.14;
letter-spacing:var(--tracking-tight);
}
h3{
font-family:var(--ff-d);
font-size:var(--fs-2xl);
font-weight:700;
color:var(--c-text);
line-height:1.3;
letter-spacing:var(--tracking-tight);
}
h4{
font-family:var(--ff-d);
font-size:var(--fs-xl);
font-weight:600;
color:var(--c-text);
line-height:1.4;
}
h5{
font-family:var(--ff-d);
font-size:var(--fs-lg);
font-weight:600;
color:var(--c-text);
line-height:1.4;
}
h6{
font-family:var(--ff-d);
font-size:var(--fs-base);
font-weight:600;
color:var(--c-text);
line-height:1.5;
}
/* ── Body Text ── */
p{
font-size:var(--fs-base);
color:var(--c-text);
line-height:1.7;
margin:0 0 16px 0;
}
small{
font-size:var(--fs-sm);
color:var(--c-muted);
}
strong,
.font-bold{
font-weight:700;
color:var(--c-text);
}
em,
.font-italic{
font-style:italic;
}
/* ── Text Utilities ── */
.text-muted{color:var(--c-muted)}
.text-secondary{color:var(--c-text-2)}
.text-brand{color:var(--c-brand-d)}
.text-success{color:var(--c-success)}
.text-danger{color:var(--c-danger)}
.text-warning{color:var(--c-warning)}
.text-info{color:var(--c-info)}
.text-center{text-align:center}
.text-left{text-align:left}
.text-right{text-align:right}
.text-uppercase{text-transform:uppercase}
.text-lowercase{text-transform:lowercase}
.text-capitalize{text-transform:capitalize}
.text-nowrap{white-space:nowrap}
.text-truncate{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.text-line-clamp-2{
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
/* ── Spacing Utilities ── */
.mt-sm{margin-top:var(--sp-sm)}
.mt-md{margin-top:var(--sp-md)}
.mt-lg{margin-top:var(--sp-lg)}
.mt-xl{margin-top:var(--sp-xl)}
.mt-2xl{margin-top:var(--sp-2xl)}
.mb-sm{margin-bottom:var(--sp-sm)}
.mb-md{margin-bottom:var(--sp-md)}
.mb-lg{margin-bottom:var(--sp-lg)}
.mb-xl{margin-bottom:var(--sp-xl)}
.mb-2xl{margin-bottom:var(--sp-2xl)}
@keyframes pbScroll{
from{ transform:translateX(0); }
to{ transform:translateX(-50%); }
}
.pb-name{font-size:12px;font-weight:700;color:var(--c-text)}
.pb-type{font-size:11px;color:var(--c-muted);margin-top:1px}
/* ── CARD COMPONENTS ── */
.card{
background:var(--c-surface);
border:1px solid var(--c-border);
border-radius:var(--r);
padding:var(--sp-lg);
transition:all var(--t-base) var(--ease-out);
box-shadow:var(--sh-sm);
}
.card:hover{
border-color:var(--c-brand-t2);
box-shadow:var(--sh-md);
transform:translateY(-3px);
}
/* ── Feature Cards ── */
.feat-sec{background:var(--c-surface)}
.feat-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
align-items:start;
}
.feat-grid-4{grid-template-columns:repeat(4,1fr)}
.feat-grid-2{grid-template-columns:repeat(2,1fr)}
/* Kart: sakit dayanır, bir hərəkətlə cavab verir.
------------------------------------------------------------
Əvvəl kursor üzərinə gələndə eyni anda ON şey baş verirdi: sərhəd rəngi,
kölgə, yuxarı sıçrayış, fon çaları, yuxarıdakı qradiyent xətt, diaqonal
parıltı süzülməsi, ikonun fonu, ikonun böyüməsi, 3D əyilmə və kursoru
izləyən işıq. Nəticədə heç biri seçilmirdi — göz bunu «çox çalışan»,
yəni yapmacıq kimi oxuyur.
İndi cavab tək və qətidir: kart bir az qalxır, altında əsl kölgə yaranır,
sərhəd brend rənginə çalır. İkona, mətnə və fona toxunulmur. */
.feat-card{
background:var(--c-bg);
border:1px solid var(--c-border);
border-radius:var(--r);
padding:var(--sp-xl);
position:relative;
/* `transition:all` idi — bu, layout xassələrini də canlandırır və
gözlənilməz sıçrayışlar yaradır. Yalnız lazım olanlar sadalanır. */
transition:transform var(--t-base) var(--ease-out),
box-shadow var(--t-base) var(--ease-out),
border-color var(--t-base) var(--ease-out);
box-shadow:var(--sh-xs);
}
.feat-card:hover{
border-color:var(--c-brand-t2);
box-shadow:var(--sh-md);
transform:translateY(-3px);
}
/* İkon: kartın içində ayrıca çərçivəli qutu idi — çərçivə içində çərçivə
görüntü səs-küyü yaradır. İndi sadəcə yumşaq brend çaları qalır. */
.feat-icon{
width:44px;
height:44px;
border-radius:10px;
background:var(--c-brand-lighter);
display:flex;
align-items:center;
justify-content:center;
margin-bottom:16px;
color:var(--c-brand-d);
font-size:22px;
}
.feat-card h3{
font-size:var(--fs-xl);
font-weight:700;
color:var(--c-text);
margin-bottom:8px;
}
.feat-card p{
font-size:var(--fs-sm);
color:var(--c-muted);
line-height:1.7;
}
/* Qeyd: .feat-grid-in mobil qırılma nöqtələri aşağıdakı ümumi RESPONSIVE
bölməsində .prod-grid ilə birlikdə təyin olunur. Burada eyni qaydalar
təkrarlanırdı — eyni nöqtələr, eyni dəyərlər — yəni ölü çəki idi. */
/* ── Product Cards ── */
.prod-sec{background:var(--c-bg)}
.prod-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;
}
.prod-card{
display:flex;
flex-direction:column;
background:var(--c-surface);
border:1px solid var(--c-border);
border-radius:var(--r);
overflow:hidden;
transition:all var(--t-base) var(--ease-out);
color:inherit;
text-decoration:none;
cursor:pointer;
box-shadow:var(--sh-xs);
}
.prod-card:hover{
border-color:var(--c-brand-t2);
box-shadow:var(--sh-lg);
transform:translateY(-6px);
}
.prod-card .pc-desc{
margin:0 0 18px;
font-size:var(--fs-sm);
line-height:1.65;
color:var(--c-muted);
}
.prod-card .pc-cta{
margin-top:auto;
display:inline-flex;
align-items:center;
gap:8px;
font-weight:700;
color:var(--c-brand-d);
text-decoration:none;
font-size:var(--fs-sm);
transition:all var(--t-fast) var(--ease-out);
}
.prod-card .pc-cta svg{
transform:translateX(0);
transition:transform var(--t-base) var(--ease-out);
width:16px;
height:16px;
}
.prod-card:hover .pc-cta svg{
transform:translateX(4px);
}
.pc-media{
position:relative;
aspect-ratio:4/3;
overflow:hidden;
background:var(--c-surface-2);
}
.pc-media img{
width:100%;
height:100%;
object-fit:cover;
transition:transform var(--t-slow) var(--ease-out);
}
.prod-card:hover .pc-media img{transform:scale(1.06)}
.pc-media-badge{
position:absolute;
bottom:12px;right:12px;
z-index:1;
font-size:var(--fs-xs);
font-weight:700;
letter-spacing:.3px;
padding:6px 12px;
border-radius:20px;
color:#fff;
background:rgba(10,20,18,.6);
backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,.22);
}
.pc-body{
display:flex;
flex-direction:column;
flex:1;
padding:22px 24px 24px;
}
.pc-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
margin-bottom:18px;
}
.pc-tag{
font-size:var(--fs-xs);
font-weight:700;
letter-spacing:.7px;
text-transform:uppercase;
color:var(--c-brand-d);
background:var(--c-brand-lighter);
border:1px solid var(--c-brand-t2);
border-radius:20px;
padding:4px 10px;
}
.pc-icon{
width:40px;
height:40px;
border-radius:10px;
background:var(--c-brand-lighter);
border:1px solid var(--c-brand-t2);
display:flex;
align-items:center;
justify-content:center;
color:var(--c-brand-d);
}
.pc-name{
font-family:var(--ff-d);
font-size:var(--fs-xl);
font-weight:700;
color:var(--c-text);
margin-bottom:13px;
}
.pc-specs{
display:flex;
border:1px solid var(--c-border);
border-radius:10px;
overflow:hidden;
margin-bottom:13px;
background:var(--c-surface-2);
}
.pc-spec{
flex:1;
text-align:center;
padding:10px 8px;
border-right:1px solid var(--c-border);
}
.pc-spec:last-child{border-right:none}
.pc-spec b{
display:block;
font-size:var(--fs-sm);
font-weight:700;
color:var(--c-text);
}
.pc-spec span{
display:block;
font-size:var(--fs-xs);
color:var(--c-muted);
margin-top:3px;
text-transform:uppercase;
letter-spacing:.4px;
}
.prod-filter-bar{
display:flex;
flex-wrap:wrap;
gap:20px 32px;
align-items:center;
padding:18px 22px;
border-radius:var(--r);
margin-bottom:8px;
background:rgba(255,255,255,.7);
backdrop-filter:blur(16px) saturate(160%);
border:1px solid rgba(255,255,255,.7);
box-shadow:0 8px 24px -12px rgba(10,20,18,.14);
}
.prod-filter-group{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:8px;
}
.prod-filter-label{
font-size:var(--fs-xs);
font-weight:700;
letter-spacing:.5px;
text-transform:uppercase;
color:var(--c-muted);
margin-right:4px;
}
.prod-filter-pill{
display:inline-flex;
align-items:center;
font-size:var(--fs-sm);
font-weight:600;
color:var(--c-muted);
padding:8px 16px;
border-radius:20px;
border:1px solid var(--c-border);
background:var(--c-bg);
transition:all var(--t-fast) var(--ease-out);
cursor:pointer;
}
.prod-filter-pill:hover{
border-color:var(--c-brand-t2);
color:var(--c-brand-d);
transform:translateY(-1px);
}
.prod-filter-pill.active{
background:var(--c-brand-d);
border-color:var(--c-brand-d);
color:#fff;
}
@media(max-width:900px){
.prod-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
.prod-grid{grid-template-columns:1fr}
.prod-filter-bar{gap:14px;padding:16px}
.prod-filter-group{width:100%;gap:8px}
.prod-filter-group + .prod-filter-group{padding-top:14px;border-top:1px solid var(--c-border)}
}
@media(max-width:600px){
.prod-filter-bar{gap:14px;padding:16px}
.prod-filter-group{width:100%;gap:8px 8px}
.prod-filter-group + .prod-filter-group{padding-top:14px;border-top:1px solid var(--c-border)}
.prod-filter-label{flex:1 0 100%;margin-right:0;margin-bottom:2px}
.prod-filter-pill{padding:8px 15px;font-size:12px}
}
.prod-empty{
text-align:center;padding:56px 24px;border-radius:var(--r);
background:var(--c-surface);border:1px solid var(--c-border);
color:var(--c-muted);font-size:13px;margin-top:28px;
display:flex;flex-direction:column;align-items:center;gap:16px;
}
.pc-body{display:flex;flex-direction:column;flex:1;padding:22px 24px 24px}
.pc-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px}
.pc-tag{
font-size:11px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;
color:var(--c-brand-dd);background:var(--c-brand-t);border:1px solid var(--c-brand-t2);
border-radius:20px;padding:3px 9px;
}
.pc-icon{
width:38px;height:38px;border-radius:10px;
background:var(--c-brand-t);border:1px solid var(--c-brand-t2);
display:flex;align-items:center;justify-content:center;
}
.pc-name{font-family:var(--ff-d);font-size:15px;font-weight:700;color:var(--c-text);margin-bottom:13px}
.pc-specs{
display:flex;border:1px solid var(--c-border);border-radius:10px;
overflow:hidden;margin-bottom:13px;
}
.pc-spec{flex:1;text-align:center;padding:9px 6px;border-right:1px solid var(--c-border)}
.pc-spec:last-child{border-right:none}
.pc-spec b{display:block;font-size:12px;font-weight:700;color:var(--c-text)}
.pc-spec span{display:block;font-size:11px;color:var(--c-muted);margin-top:2px;text-transform:uppercase;letter-spacing:.4px}
.pc-desc{font-size:12px;color:var(--c-muted);line-height:1.62;flex:1;margin-bottom:16px}
.pc-cta{
display:flex;align-items:center;gap:5px;margin-top:auto;
font-size:12px;font-weight:600;color:var(--c-brand);
transition:gap .2s;
}
.prod-card:hover .pc-cta{gap:9px}
/* ── PRODUCT DETAIL ── */
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:12px;color:rgba(255,255,255,.7)}
.breadcrumb a{color:rgba(255,255,255,.85);transition:color .18s}
.breadcrumb a:hover{color:#fff}
.breadcrumb span:last-child{color:#fff;font-weight:600}
.pd-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:start}
@media(max-width:960px){.pd-grid{grid-template-columns:1fr}}
.pd-media{
position:relative;border-radius:var(--r);overflow:hidden;
border:1px solid var(--c-border);box-shadow:var(--sh-lg);aspect-ratio:4/3;
}
.pd-media img{width:100%;height:100%;object-fit:cover}
.pd-media-badge{
position:absolute;bottom:16px;right:16px;
font-size:11px;font-weight:700;letter-spacing:.3px;color:#fff;
padding:6px 14px;border-radius:20px;
background:rgba(18,33,31,.55);backdrop-filter:blur(8px);
border:1px solid rgba(255,255,255,.22);
}
.pd-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.pd-pill{
display:inline-flex;align-items:center;gap:7px;
font-size:12px;font-weight:600;color:var(--c-text);
background:var(--c-surface);border:1px solid var(--c-border);
padding:8px 14px;border-radius:20px;
}
.pd-pill svg{color:var(--c-brand);flex-shrink:0}
.pd-name{font-family:var(--ff-d);font-size:clamp(28px,4vw,42px);font-weight:600;letter-spacing:var(--tracking-tighter);color:var(--c-text);margin-bottom:14px}
.pd-desc{font-size:17px;line-height:1.65;color:var(--c-muted);margin-bottom:26px}
/* Sürətli göstərici zolağı (info sütununda) */
.pd-quick{
display:grid;grid-template-columns:repeat(3,1fr);gap:0;
background:var(--c-surface);border:1px solid var(--c-border);
border-radius:var(--r);overflow:hidden;margin-bottom:28px;
}
.pd-quick-item{padding:16px 18px;border-left:1px solid var(--c-border)}
.pd-quick-item:first-child{border-left:none}
.pd-quick-item dt{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--c-muted);margin-bottom:5px}
.pd-quick-item dd{font-size:15px;font-weight:600;color:var(--c-text);line-height:1.3}
@media(max-width:520px){
.pd-quick{grid-template-columns:1fr}
.pd-quick-item{border-left:none;border-top:1px solid var(--c-border)}
.pd-quick-item:first-child{border-top:none}
}
.pd-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
/* Əsas xüsusiyyətlər — tam enli bölmə, bərabər hündürlüklü kartlar */
.pd-features{margin-top:clamp(48px,6vw,72px)}
.pd-features-title{
font-family:var(--ff-d);font-size:clamp(21px,2.4vw,28px);font-weight:600;
letter-spacing:var(--tracking-tight);color:var(--c-text);margin-bottom:24px;
}
.pd-features .feat-grid{align-items:stretch}
.pd-features .feat-card{display:flex;flex-direction:column}
.pd-faq{margin-top:clamp(48px,6vw,72px)}
.pd-faq .faq-list{max-width:none;margin:0}
.pd-specs{
margin-top:clamp(48px,6vw,72px);
background:var(--c-surface);border:1px solid var(--c-border);
border-radius:var(--r);padding:clamp(24px,4vw,40px);
}
.pd-specs h2{font-family:var(--ff-d);font-size:clamp(20px,2.2vw,26px);font-weight:700;letter-spacing:var(--tracking-tight);color:var(--c-text);margin-bottom:8px}
.pd-specs-table{
display:grid;grid-template-columns:repeat(2,1fr);gap:0 40px;
}
@media(max-width:640px){.pd-specs-table{grid-template-columns:1fr}}
.pd-specs-row{display:flex;justify-content:space-between;gap:16px;padding:15px 0;border-bottom:1px solid var(--c-border)}
.pd-specs-row dt{font-size:13px;color:var(--c-muted)}
.pd-specs-row dd{font-size:13px;font-weight:600;color:var(--c-text);text-align:right}
/* ── CONTACT ── */
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:32px;align-items:start}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}
.contact-info-card{
background:rgba(255,255,255,.7);backdrop-filter:blur(16px) saturate(160%);
-webkit-backdrop-filter:blur(16px) saturate(160%);
border:1px solid rgba(255,255,255,.7);border-radius:var(--r);
box-shadow:0 8px 24px -12px rgba(18,60,50,.14);
padding:8px;display:flex;flex-direction:column;gap:2px;margin-bottom:20px;
}
.contact-info-item{display:flex;gap:14px;align-items:flex-start;padding:16px 14px;border-radius:10px;transition:background .18s}
.contact-info-item:hover{background:rgba(87,166,149,.08)}
.contact-info-icon{
width:38px;height:38px;border-radius:10px;flex-shrink:0;
background:var(--c-brand-t);border:1px solid var(--c-brand-t2);color:var(--c-brand-d);
display:flex;align-items:center;justify-content:center;
}
.contact-info-label{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--c-muted);margin-bottom:3px}
.contact-info-value{font-size:13px;font-weight:600;color:var(--c-text)}
.contact-info-value a{color:inherit}
.contact-info-value a:hover{color:var(--c-brand-d)}
.contact-form-card{
background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r);
padding:clamp(24px,4vw,40px);box-shadow:var(--sh-md);
}
/* ── FORM ELEMENTS (Apple-inspired, accessible) ──────────────── */
.form-group{
display:flex;
flex-direction:column;
gap:6px;
margin-bottom:16px;
}
.form-label{
font-size:var(--fs-sm);
font-weight:600;
color:var(--c-text);
display:flex;
align-items:center;
gap:4px;
cursor:pointer;
}
.form-label .required,
.form-label .req{
color:var(--c-danger);
font-weight:700;
}
.form-input,
.form-textarea,
.form-select{
width:100%;
font-family:var(--ff-b);
font-size:var(--fs-base);
color:var(--c-text);
background:var(--c-bg);
border:1px solid var(--c-border);
border-radius:var(--r-sm);
padding:11px 14px;
transition:all var(--t-fast) var(--ease-out);
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
}
.form-input:hover,
.form-textarea:hover,
.form-select:hover{
border-color:var(--c-border-2);
background:rgba(45,157,136,.02);
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus{
outline:none;
border-color:var(--c-brand-d);
background:var(--c-bg);
box-shadow:0 0 0 3px var(--c-brand-lighter),
inset 0 1px 3px rgba(10,20,18,.02);
}
.form-input:disabled,
.form-textarea:disabled,
.form-select:disabled{
background:var(--c-surface-2);
color:var(--c-muted);
cursor:not-allowed;
border-color:var(--c-border);
}
.form-input::placeholder{
color:var(--c-text-3);
font-weight:400;
opacity:.8;
}
.form-textarea{
min-height:120px;
resize:vertical;
line-height:1.65;
font-family:inherit;
}
.form-input[type="file"]::file-selector-button{
padding:8px 16px;
margin-right:12px;
background:var(--c-brand-d);
color:#fff;
border:none;
border-radius:var(--r-sm);
font-weight:600;
cursor:pointer;
transition:background-color var(--t-fast) var(--ease-out);
}
.form-input[type="file"]::file-selector-button:hover{
background:var(--c-brand-dd);
}
/* Validation states */
.form-input:invalid:not(:placeholder-shown):not(:focus),
.form-textarea:invalid:not(:placeholder-shown):not(:focus){
border-color:var(--c-danger);
background:rgba(211,47,47,.02);
}
.form-input:valid:not(:placeholder-shown):not(:focus),
.form-textarea:valid:not(:placeholder-shown):not(:focus){
border-color:var(--c-success);
}
/* Form hint & error messages */
.form-hint,
.form-error,
.form-help{
font-size:var(--fs-xs);
margin-top:4px;
display:flex;
align-items:center;
gap:4px;
}
.form-hint{
color:var(--c-muted);
font-weight:400;
}
.form-error{
color:var(--c-danger);
font-weight:500;
}
.form-error::before{
content:'⚠';
flex-shrink:0;
}
/* Checkbox & Radio styling */
.form-checkbox,
.form-radio{
width:18px;
height:18px;
cursor:pointer;
accent-color:var(--c-brand-d);
}
.form-checkbox:focus,
.form-radio:focus{
outline:2px solid var(--c-brand-d);
outline-offset:2px;
}
/* Switch toggle */
.form-switch{
display:inline-block;
position:relative;
width:44px;
height:26px;
cursor:pointer;
}
.form-switch input{
display:none;
}
.form-switch-slider{
position:absolute;
top:0;left:0;right:0;bottom:0;
background:var(--c-border);
border-radius:14px;
transition:background-color var(--t-base) var(--ease-out);
}
.form-switch-slider::before{
content:'';
position:absolute;
width:22px;
height:22px;
border-radius:50%;
background:#fff;
top:2px;left:2px;
transition:transform var(--t-base) var(--ease-out),
box-shadow var(--t-base) var(--ease-out);
box-shadow:0 2px 4px rgba(10,20,18,.15);
}
.form-switch input:checked + .form-switch-slider{
background:var(--c-brand-d);
}
.form-switch input:checked + .form-switch-slider::before{
transform:translateX(18px);
box-shadow:0 2px 6px rgba(29,122,111,.3);
}
/* Honeypot (spam protection) */
.honeypot,
.hidden-field{
position:absolute;
left:-9999px;
width:1px;
height:1px;
overflow:hidden;
visibility:hidden;
}
/* Form layout */
.form-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
}
@media(max-width:640px){
.form-grid{
grid-template-columns:1fr;
}
}
.form-group-full{
grid-column:1 / -1;
}
/* Form submit button */
.form-submit{
width:100%;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
padding:14px;
border:none;
cursor:pointer;
font-family:var(--ff-b);
font-size:var(--fs-base);
font-weight:600;
background:var(--c-brand-d);
color:#fff;
border-radius:var(--r-btn);
transition:all var(--t-base) var(--ease-out);
min-height:48px;
}
.form-submit:hover:not(:disabled){
background:var(--c-brand-dd);
box-shadow:0 4px 12px rgba(29,122,111,.25);
}
.form-submit:disabled{
opacity:.65;
cursor:not-allowed;
}
.form-submit-spinner{
width:16px;
height:16px;
border:2px solid rgba(255,255,255,.3);
border-top-color:#fff;
border-radius:50%;
animation:spin var(--t-base) linear infinite;
display:none;
flex-shrink:0;
}
.form-submit.is-loading{
pointer-events:none;
}
.form-submit.is-loading .form-submit-spinner{
display:inline-block;
}
.form-submit.is-loading .form-submit-label{
opacity:.75;
}
/* ── Əlaqə səhifəsi: ofis xəritəsi ── */
.contact-map-wrap{
position:relative;
border:1px solid rgba(255,255,255,.7);border-radius:var(--r);overflow:hidden;
box-shadow:0 8px 24px -12px rgba(18,60,50,.14);
}
.contact-map{width:100%;height:220px;background:var(--c-surface)}
.contact-map .leaflet-tile-pane{filter:saturate(.68) brightness(1.03) contrast(1.02)}
.contact-map-nav{
position:absolute;right:12px;bottom:12px;z-index:500;
display:inline-flex;align-items:center;gap:6px;
background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
border:1px solid var(--c-border);border-radius:20px;
padding:8px 14px;font-size:12px;font-weight:650;color:var(--c-brand-d);
box-shadow:var(--sh-sm);transition:background .18s,transform .18s;
}
.contact-map-nav:hover{background:var(--c-brand-t);transform:translateY(-1px)}
.alert{
display:none;
align-items:center;
gap:12px;
padding:14px 16px;
border-radius:var(--r-sm);
margin-bottom:20px;
font-size:var(--fs-sm);
font-weight:500;
line-height:1.5;
border-left:4px solid transparent;
animation:slideDown .3s var(--ease-out);
}
.alert.show{display:flex}
.alert-success{
background:rgba(56,142,60,.08);
color:var(--c-success);
border-left-color:var(--c-success);
}
.alert-error,
.alert-danger{
background:rgba(211,47,47,.08);
color:var(--c-danger);
border-left-color:var(--c-danger);
}
.alert-warning{
background:rgba(245,124,0,.08);
color:var(--c-warning);
border-left-color:var(--c-warning);
}
.alert-info{
background:rgba(25,118,210,.08);
color:var(--c-info);
border-left-color:var(--c-info);
}
.alert-icon{
font-size:17px;
flex-shrink:0;
}
.alert-close{
margin-left:auto;
flex-shrink:0;
cursor:pointer;
opacity:.6;
transition:opacity var(--t-fast) var(--ease-out);
}
.alert-close:hover{opacity:1}
@keyframes slideDown{
from{opacity:0;transform:translateY(-8px)}
to{opacity:1;transform:translateY(0)}
}
/* ── Form success state ── */
.form-success-state{
display:none;
flex-direction:column;
align-items:center;
text-align:center;
padding:56px 24px;
background:var(--c-bg);
}
.form-success-state.show{display:flex}
.form-success-icon{
width:64px;
height:64px;
border-radius:50%;
flex-shrink:0;
display:flex;
align-items:center;
justify-content:center;
background:var(--c-brand-lighter);
color:var(--c-brand-d);
border:1px solid var(--c-brand-t2);
margin-bottom:22px;
animation:successPop .5s var(--ease) both;
font-size:26px;
}
@keyframes successPop{
0%{transform:scale(.4);opacity:0}
60%{transform:scale(1.08);opacity:1}
100%{transform:scale(1)}
}
.form-success-state h3{
font-family:var(--ff-d);
font-size:var(--fs-2xl);
font-weight:700;
color:var(--c-text);
margin-bottom:10px;
}
.form-success-state p{
font-size:var(--fs-base);
color:var(--c-muted);
line-height:1.65;
max-width:360px;
margin-bottom:26px;
}
@media(prefers-reduced-motion:reduce){
.form-success-icon{animation:none}
}
/* ── HÜQUQİ / POLICY SƏNƏDLƏRİ ── */
.policy-content{
max-width:800px;margin:0 auto;
background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r);
padding:clamp(28px,5vw,48px);box-shadow:var(--sh-md);
}
.policy-updated{
display:inline-block;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
color:var(--c-brand-d);background:var(--c-brand-t);border:1px solid var(--c-brand-t2);
border-radius:20px;padding:5px 14px;margin-bottom:24px;
}
.policy-content h2{
font-family:var(--ff-d);font-size:19px;font-weight:700;color:var(--c-text);
margin:36px 0 12px;padding-top:20px;border-top:1px solid var(--c-border);
}
.policy-content h2:first-of-type{margin-top:0;padding-top:0;border-top:none}
.policy-content h3{font-family:var(--ff-d);font-size:15px;font-weight:700;color:var(--c-brand-d);margin:22px 0 8px}
.policy-content p{font-size:13px;line-height:1.75;color:var(--c-muted);margin-bottom:12px}
.policy-content ul{margin:0 0 12px;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.policy-content li{font-size:13px;line-height:1.65;color:var(--c-muted)}
.policy-content li::marker{color:var(--c-brand)}
.policy-content strong{color:var(--c-text);font-weight:700}
.policy-content a{color:var(--c-brand-d);text-decoration:underline;text-underline-offset:2px}
.policy-content .policy-intro{
font-size:15px;font-weight:600;color:var(--c-text);
background:var(--c-brand-t);border:1px solid var(--c-brand-t2);border-radius:10px;
padding:16px 18px;margin-bottom:28px;line-height:1.6;
}
.policy-content .policy-meta{font-size:13px;color:var(--c-muted);line-height:1.8}
/* ── FAQ AKKORDEON ── */
.faq-list{display:flex;flex-direction:column;gap:12px;max-width:720px;margin:0 auto}
.faq-item{
background:var(--c-surface);border:1px solid var(--c-border);border-radius:14px;
overflow:hidden;transition:border-color .2s;
}
.faq-item.is-open{border-color:var(--c-brand-t2)}
.faq-q{
width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:18px 22px;background:none;border:none;text-align:left;cursor:pointer;
font-family:var(--ff-d);font-size:15px;font-weight:600;color:var(--c-text);
}
.faq-icon{width:18px;height:18px;flex-shrink:0;color:var(--c-brand);transition:transform .25s ease}
.faq-item.is-open .faq-icon{transform:rotate(45deg)}
.faq-a{
max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease;
padding:0 22px;font-size:15px;line-height:1.75;color:var(--c-text-2);
}
.faq-item.is-open .faq-a{max-height:640px;padding:0 22px 20px}
/* ── MOBIL TƏTBIQ SƏHİFƏSİ ── */
.app-layout{
display:grid;grid-template-columns:280px 1fr;gap:48px;align-items:center;
}
@media(max-width:760px){.app-layout{grid-template-columns:1fr;text-align:center}}
.app-mockup{
background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r);
box-shadow:var(--sh-md);
}
.app-download-btn{
display:inline-flex;align-items:center;gap:14px;
padding:12px 28px 12px 14px;border-radius:var(--r-btn);
background:var(--c-brand-d);
transition:background-color .2s var(--ease);
}
.app-download-btn:hover{background:var(--c-brand-dd)}
.app-download-btn-icon{
flex-shrink:0;width:42px;height:42px;border-radius:10px;
background:rgba(10,31,27,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
display:flex;align-items:center;justify-content:center;color:#0a1f1b;
}
.app-download-btn-text{text-align:left;line-height:1.25}
.app-download-btn-eyebrow{display:block;font-size:11px;font-weight:600;color:rgba(10,31,27,.65);letter-spacing:.3px}
.app-download-btn-title{display:block;font-size:17px;font-weight:700;color:#0a1f1b;font-family:var(--ff-d)}
@media(max-width:760px){.app-download-btn{margin:0 auto}}
/* ── CTA SECTION ── */
/* ── Bölmə etiketi + başlığı ──────────────────────────────────
.section-label / .section-header 9 səhifədə istifadə olunurdu, lakin baza
stili yox idi — yalnız stansiyalar/məhsullar səhifələrində rəng override-ı
vardı. Nəticədə digər səhifələrdə stilsiz, adi mətn kimi görünürdü. */
.section-label{
display:inline-block;font-size:11px;font-weight:700;letter-spacing:1.3px;
text-transform:uppercase;color:var(--c-brand-d);margin-bottom:12px;
}
.section-header{margin-bottom:8px}
.section-header h2{
font-family:var(--ff-d);font-size:clamp(24px,3vw,32px);
font-weight:700;color:var(--c-text);
}
/* Kartlar .feat-grid ilə EYNİ nöqtələrdə qırılır. Əvvəl bu şəbəkə birbaşa
3→1 keçirdi (860px), .feat-grid isə 3→2→1 (900px, 640px). Nəticədə
860–900px arasında bir bölmə alt-alta düzülür, digəri hələ üç sütunda
qalırdı — ziyarətçiyə eyni görünən iki bölmə fərqli davranırdı. */
/* ── Ana səhifə: mobil tətbiq showcase və biznes bölməsi ── */
/* ============================================================
MOBİL TƏTBİQ SƏHİFƏSİ
============================================================
Bu səhifə əvvəl stansiyalar səhifəsinin `.stn-section` sinifini
borc alıb üstünə on sətiriçi stil yamamışdı. Ona görə də «ən sadə
və pis» görünürdü: öz quruluşu yox idi, başqa səhifənin ritmini
geyinmişdi. Aşağıdakılar həmin yamaqları əvəz edir.
------------------------------------------------------------ */
.ma-sec{padding:0 0 var(--sp)}
/* QR solda, mətn sağda. Mobildə mətn əvvələ keçir: kiçik ekranda
izahı oxumadan QR koda baxmağın mənası yoxdur. */
/* Solda real foto, sağda mətn. Foto əvvəl stansiyalar səhifəsində
ayrıca izahatlı blok idi; burada izahat lazım deyil — yanındakı mətn
onsuz da eyni şeyi deyir, foto sadəcə göstərir. */
.ma-get{
display:grid;
grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
gap:clamp(28px,5vw,60px);
align-items:center;
}
.ma-get-copy h2{margin:0 0 14px}
.ma-get-copy>p{color:var(--c-muted);margin:0 0 26px;max-width:52ch}
/* QR kartı: kod ağ fon üzərində qalmalıdır — qaranlıq rejimdə
kameralar tünd fonda kodu oxuya bilmir. */
/* QR ölçüsü zövq məsələsi deyil — FUNKSİYADIR.
88px-ə salınanda kod praktiki olaraq skan olunmurdu: telefon kameraları
ekrandan oxuyanda kodun kifayət qədər böyük olmasını tələb edir.
150px işləyirdi, amma hələ də kiçik görünürdü — 200px rahat həddir. */
.ma-qr{
display:flex;
align-items:center;
gap:20px;
width:max-content;
max-width:100%;
margin-top:26px;
padding:18px 24px 18px 18px;
background:var(--c-surface);
border:1px solid var(--c-border);
border-radius:20px;
}
.ma-qr img{
display:block;
flex:0 0 auto;
width:200px;
height:auto;
background:#fff;
padding:12px;
border-radius:10px;
}
.ma-qr p{
font-size:15px;
font-weight:500;
color:var(--c-text-2);
margin:0;
line-height:1.45;
max-width:16ch;
}
.ma-feat-head{margin-top:var(--sp)}
.ma-feat-grid{margin-top:28px}
.ma-sec .feat-icon{color:var(--c-brand-d)}
@media (max-width:820px){
.ma-get{grid-template-columns:1fr;gap:26px}
.ma-get-copy{order:2}
}
/* Şaquli ritm: bax .hiw-sec — bütün ana səhifə bölmələri --sp işlədir. */
.hm-app-sec{padding:var(--sp) 0;background:var(--c-surface)}
.hm-app-sec h2{font-family:var(--ff-d);font-size:clamp(22px,2.6vw,29px);font-weight:700;color:var(--c-text)}
/* Başlıqdan sonrakı boşluq. Əvvəl bu, home.php-də `style="margin-top:28px"`
kimi sətiriçi yazılmışdı və yalnız bir bölməyə tətbiq olunurdu — nəticədə
«Necə işləyir» (8px) və «Biznes üçün» (28px) bölmələrində başlıqla
kartlar arasındakı məsafə fərqli idi. */
.hm-biz-sec .feat-grid{margin-top:8px}
/* ── SEO təsvir mətni: footer-in üstündə, hero-nu yükləmədən açar-söz mətnini saxlayır ── */
.seo-blurb{padding:0 0 56px}
.seo-blurb p{
max-width:800px;margin:0 auto;text-align:center;
font-size:13px;line-height:1.8;color:var(--c-text-3);
}
.cta-sec{padding:var(--sp) 0;background:var(--c-surface)}
.cta-box{
display:flex;align-items:center;justify-content:space-between;gap:36px;
background:var(--c-bg);border:1px solid var(--c-border);border-radius:20px;
padding:clamp(32px,5vw,56px);box-shadow:var(--sh-sm);
position:relative;overflow:hidden;
}
.cta-box::before{
content:'';position:absolute;top:0;left:0;right:0;height:2px;
background:linear-gradient(90deg,var(--c-brand-t),var(--c-brand),var(--c-brand-t));
}
.cta-l{max-width:460px}
.cta-l h2{
font-family:var(--ff-d);font-size:clamp(20px,3.2vw,32px);
font-weight:700;letter-spacing:-.5px;color:var(--c-text);margin:10px 0 12px;
}
.cta-l p{font-size:13px;color:var(--c-muted);line-height:1.7}
.cta-r{display:flex;flex-direction:column;gap:10px;flex-shrink:0}
/* ── FOOTER ── */
.site-footer{background:var(--c-text);color:rgba(255,255,255,.65);padding:52px 0 0}
.footer-inner{max-width:var(--cw);margin:0 auto;padding:0 28px 44px;display:flex;gap:44px;flex-wrap:wrap}
.footer-brand{flex:1;min-width:180px}
.footer-brand .logo{color:#fff;margin-bottom:12px}
.footer-brand p{font-size:12px;color:rgba(255,255,255,.4);line-height:1.6;max-width:240px}
.footer-nav{display:flex;gap:44px;flex-wrap:wrap}
.footer-col h3{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:14px}
.footer-col ul{display:flex;flex-direction:column;gap:9px}
.footer-col a{font-size:13px;color:rgba(255,255,255,.55);transition:color .2s}
.footer-col a:hover{color:#57a695}
.footer-bottom{border-top:1px solid rgba(255,255,255,.07);padding:18px 28px;text-align:center;font-size:11px;color:rgba(255,255,255,.28)}
/* ── REVEAL ── */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .62s var(--ease),transform .62s var(--ease)}
.reveal.visible{opacity:1;transform:translateY(0)}
.feat-card.reveal{transition-delay:calc(var(--fi,0)*70ms)}
/* ── RESPONSIVE ── */
@media(max-width:900px){
.feat-grid,.prod-grid{grid-template-columns:repeat(2,1fr)}
.cta-box{flex-direction:column}
.cta-r{flex-direction:row;flex-wrap:wrap}
}
@media(max-width:900px){
.nav-toggle{display:flex}
.nav-links{
flex-direction:column;align-items:stretch;
position:fixed;left:12px;right:12px;top:calc(var(--nav-h) + 8px);bottom:auto;
max-height:calc(100vh - var(--nav-h) - 24px);overflow-y:auto;
/* MENYU AĞDIR — şüşə effekti deyil. Əvvəl fon .55 şəffaflıqda idi
və arxadakı şəkil menyunun içindən görünürdü; keçidlər
oxunmurdu. İndi bərk ağ fon var. */
background:#fff;
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
border:1px solid var(--c-border);
border-radius:20px;
box-shadow:0 20px 60px -20px rgba(18,60,50,.28),inset 0 1px 0 rgba(255,255,255,.6);
padding:16px;gap:4px;z-index:199;
opacity:0;visibility:hidden;pointer-events:none;
transform:translateY(-14px) scale(.96);
transform-origin:top center;
transition:opacity .28s var(--ease),transform .28s var(--ease),visibility 0s linear .28s;
}
.nav-links.open{
display:flex;
opacity:1;visibility:visible;pointer-events:auto;
transform:translateY(0) scale(1);
transition:opacity .32s var(--ease),transform .32s var(--ease);
}
.nav-link{padding:13px 16px;font-size:15px;border-radius:10px}
body.page-home .site-header:not(.scrolled) .nav-links.open .nav-link{color:var(--c-muted)}
body.page-home .site-header:not(.scrolled) .nav-links.open .nav-link:hover{color:var(--c-brand);background:var(--c-brand-t)}
body.page-home .site-header:not(.scrolled) .nav-links.open .nav-link.active{color:var(--c-brand)}
.nav-cta{margin-left:0;margin-top:8px;text-align:center;justify-content:center;display:flex}
}
@media(max-width:640px){
.feat-grid,.prod-grid{grid-template-columns:1fr}
#hb2{display:none}
.hb-sub{display:none}
.hero-h1{letter-spacing:-1px}
.hst-inner{gap:0}
}
/* ── LOGO IMAGE ── */
.logo-img{height:34px;width:auto;display:block}
.logo-img-white{display:none}
/* transparent header üzərində ağ logo */
body.page-home .site-header:not(.scrolled) .logo-img-dark{display:none}
body.page-home .site-header:not(.scrolled) .logo-img-white{display:block}
.footer-brand .logo-img{height:28px;filter:brightness(0) invert(1)}
/* CTA ghost on light bg */
.cta-ghost-light{color:var(--c-text)!important;border-color:var(--c-border-2)!important;background:#fff!important}
.cta-ghost-light:hover{background:var(--c-surface)!important;border-color:var(--c-brand-t2)!important}
/* ── NAV HOTLINE / WHATSAPP ── */
.nav-contact-group{display:flex;align-items:center;gap:8px;margin-left:10px}
.nav-hotline{
display:flex;align-items:center;gap:8px;
padding:6px 12px 6px 7px;border-radius:10px;
border:1px solid var(--c-brand-t2);
background:var(--c-brand-t);
transition:background .2s,border-color .2s,transform .15s,box-shadow .2s;
}
.nav-hotline:hover{
background:var(--c-brand-t2);border-color:var(--c-brand);
transform:translateY(-1px);
box-shadow:0 3px 12px rgba(87,166,149,.22);
}
.nh-icon{
width:26px;height:26px;border-radius:6px;flex-shrink:0;
background:var(--c-brand);color:#fff;
display:flex;align-items:center;justify-content:center;
box-shadow:0 2px 8px rgba(87,166,149,.35);
}
.nh-icon-wa{background:#25d366;box-shadow:0 2px 8px rgba(37,211,102,.35)}
.nh-body{display:flex;flex-direction:column;line-height:1.15}
.nh-label{font-size:11px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--c-muted)}
.nh-num{font-size:11px;font-weight:700;color:var(--c-text);letter-spacing:.3px;font-variant-numeric:tabular-nums}
/* transparent header üzərində (yalnız ana səhifə hero-su) */
body.page-home .site-header:not(.scrolled) .nav-hotline{
background:rgba(255,255,255,.08);
border-color:rgba(255,255,255,.16);
backdrop-filter:blur(8px);
}
body.page-home .site-header:not(.scrolled) .nav-hotline:hover{
background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.3);
}
body.page-home .site-header:not(.scrolled) .nh-label{color:rgba(255,255,255,.5)}
body.page-home .site-header:not(.scrolled) .nh-num{color:#fff}
@media(max-width:1080px){
.nh-body{display:none}
.nav-hotline{padding:6px}
}
@media(max-width:900px){
.nav-contact-group{margin-left:0;margin-top:10px;justify-content:stretch}
.nav-hotline{flex:1;justify-content:center}
.nh-body{display:flex}
body.page-home .site-header:not(.scrolled) .nav-links.open .nav-hotline{
background:var(--c-brand-t);border-color:var(--c-brand-t2);backdrop-filter:none;
}
body.page-home .site-header:not(.scrolled) .nav-links.open .nav-hotline:hover{
background:var(--c-brand-t2);border-color:var(--c-brand);
}
body.page-home .site-header:not(.scrolled) .nav-links.open .nh-label{color:var(--c-muted)}
body.page-home .site-header:not(.scrolled) .nav-links.open .nh-num{color:var(--c-text)}
}
/* ═══════════════════════════════════════════════════════════
HERO v8 — 2 label, qısa oxlar (max ~2.2cm), tam yeni tərtibat
App solda (stadionun üzərində), Cihazlar sağda (stansiyanın üzərində)
═══════════════════════════════════════════════════════════ */
.hero-ov{
background:linear-gradient(160deg,
rgba(4,12,10,.10) 0%,
rgba(4,12,10,.46) 60%,
rgba(3,10,8,.8) 100%)!important;
}
.anno-svg{ overflow:visible; }
/* ── Qısa ox: bir az qalın, rahat basıla bilən, yüngül əyri ── */
.aln{ stroke-width:3px; stroke-dasharray:6,7; opacity:.92; }
.aorigin{ r:4px; }
.aring{ r:4px; }
.apt{ r:2.6px; }
/* Görünməz, geniş "toxunma zolağı" — mobil üçün asan basılsın */
.aln-hit{
fill:none; stroke:transparent; stroke-width:26px;
stroke-linecap:round; cursor:pointer; pointer-events:stroke;
}
.aln, .aln-tip{ pointer-events:none; } /* klik məntiqi .aln-hit üzərindən gedir */
.aln.is-active{ stroke-width:3.8px; opacity:1; }
/* ── Badge əsas qutusu: yumşaq, dərinlikli şüşə — "boz qutu" hissi getsin ── */
.hbadge{ width:max-content; }
.hb-in{
min-width:0;
width:330px;
padding:22px 26px 23px;
border-radius:20px;
background:
radial-gradient(120% 140% at 12% 0%, rgba(87,166,149,.22) 0%, transparent 55%),
linear-gradient(155deg, rgba(15,36,31,.88) 0%, rgba(7,20,17,.92) 100%);
border:1px solid rgba(140,215,195,.28);
box-shadow:
0 1px 0 rgba(255,255,255,.09) inset,
0 1px 0 rgba(140,215,195,.06) inset,
0 14px 34px rgba(0,0,0,.34),
0 0 24px rgba(87,166,149,.08);
backdrop-filter:blur(20px) saturate(1.8);
animation:none;
transition:border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.hb-in::after{
content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
background:linear-gradient(180deg, rgba(255,255,255,.05) 0%, transparent 22%);
}
.hbadge:hover .hb-in{
border-color:rgba(160,230,208,.5);
transform:translateY(-2px);
box-shadow:
0 1px 0 rgba(255,255,255,.11) inset,
0 18px 42px rgba(0,0,0,.4),
0 0 30px rgba(87,166,149,.24);
}
.hb-head{gap:15px;margin-bottom:16px}
.hb-icon{
width:48px;height:48px;border-radius:14px;flex-shrink:0;
background:linear-gradient(145deg,rgba(127,207,190,.36),rgba(87,166,149,.12));
border:1px solid rgba(140,225,205,.45);
box-shadow:inset 0 1px 0 rgba(180,242,221,.3),0 6px 16px -4px rgba(0,0,0,.4);
}
.hb-icon svg{width:24px;height:24px}
.hb-title{
font-family:var(--ff-d);font-size:19px;font-weight:700;
color:#c9f5e6;letter-spacing:.02em;line-height:1.22;
}
.hb-sub{
font-size:13px;color:rgba(180,222,208,.66);
margin-top:4px;letter-spacing:.1px;line-height:1.35;
}
.hb-btn{
padding:13px 20px;border-radius:var(--r-btn);
font-size:13px;font-weight:600;letter-spacing:0;
justify-content:center;gap:7px;
background:var(--c-brand-d);
transition:background-color .2s var(--ease);
}
.hb-btn:hover{background:var(--c-brand-dd)}
.hb-btn .hb-btn-arr{transition:transform .2s var(--ease)}
.hb-btn:hover .hb-btn-arr{transform:translateX(2px)}
/* ── Hero statistikası: sakit, dəqiq ── */
.hst{padding:16px 12px}
.hst-n{font-size:clamp(19px,2.5vw,27px)}
.hst-l{font-size:11px;color:rgba(140,205,188,.68)}
.hst-sep{height:38px;background:rgba(87,166,149,.18)}
/* ── Mobil: label-lər kiçilir, ekranı doldurmur ── */
@media(max-width:640px){
.hb-in{width:260px;padding:16px 18px}
.hb-icon{width:36px;height:36px}
.hb-title{font-size:15px}
.hb-sub{font-size:11px}
.hb-btn{font-size:12px;padding:11px 13px}
}
@media(max-width:640px){
.hbadge{display:none}
.anno-svg{display:none}
.hero-text-mobile{
display:block;position:absolute;z-index:4;
text-align:center;opacity:1;transform:none;
left:16px;right:16px;top:calc(var(--nav-h) + 74px);margin:0;
padding:28px 18px 24px;border-radius:20px;
background:
radial-gradient(120% 140% at 12% 0%, rgba(87,166,149,.16) 0%, transparent 55%),
linear-gradient(155deg, rgba(6,18,15,.4) 0%, rgba(4,12,10,.46) 100%);
border:1px solid rgba(255,255,255,.22);
box-shadow:0 14px 34px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.1);
backdrop-filter:blur(18px) saturate(1.6);
-webkit-backdrop-filter:blur(18px) saturate(1.6);
}
.hero-text-mobile .hero-eyebrow{font-size:11px;padding:5px 12px;margin-bottom:18px}
/* Tam enli, yığcam CTA-lar — hər düymə öz sətrində (böyük toxunma sahəsi) */
.hero-text-mobile .hero-ctas{gap:10px;flex-direction:column;align-items:stretch}
.hero-text-mobile .hcta-primary,
.hero-text-mobile .hcta-ghost{width:100%;padding:14px 18px;font-size:13px;justify-content:center}
.hero-text-mobile .hcta-icon{width:22px;height:22px;flex-shrink:0}
/* Ghost düymələr fotoda oxunsun: AĞ mətn + ağ ikon (əvvəl tünd teal idi — görünmürdü) */
.hero-text-mobile .hcta-ghost{
color:#fff;
background:rgba(255,255,255,.14);
border-color:rgba(255,255,255,.45);
}
.hero-text-mobile .hcta-ghost .hcta-icon{
background:rgba(255,255,255,.18);
border-color:rgba(255,255,255,.38);
}
}
/* ── Orta ölçülü ekranlar (planşet və s.): şəklin cover-crop-u annotasiya
nöqtələrindən birini kənara çıxarırsa, JS `.hero-badges-incomplete`
sinifini əlavə edir — bu halda əskik CTA-ları itirmək yerinə, eyni
fallback kartını (mərkəzləşdirilmiş formada) göstəririk. ── */
.hero.hero-badges-incomplete .hbadge{display:none !important}
.hero.hero-badges-incomplete .anno-svg{display:none !important}
.hero.hero-badges-incomplete .hero-text-mobile{
display:block;position:absolute;z-index:4;
text-align:center;opacity:1;transform:translateX(-50%);
left:50%;right:auto;top:calc(var(--nav-h) + 74px);margin:0;
width:min(420px,88vw);
padding:28px 26px 24px;border-radius:20px;
background:
radial-gradient(120% 140% at 12% 0%, rgba(87,166,149,.16) 0%, transparent 55%),
linear-gradient(155deg, rgba(6,18,15,.4) 0%, rgba(4,12,10,.46) 100%);
border:1px solid rgba(255,255,255,.22);
box-shadow:0 14px 34px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.1);
backdrop-filter:blur(18px) saturate(1.6);
-webkit-backdrop-filter:blur(18px) saturate(1.6);
}
.hero.hero-badges-incomplete .hero-text-mobile .hero-eyebrow{font-size:11px;padding:6px 14px;margin-bottom:18px}
.hero.hero-badges-incomplete .hero-text-mobile .hero-ctas{gap:10px;flex-direction:column;align-items:stretch}
.hero.hero-badges-incomplete .hero-text-mobile .hcta-primary,
.hero.hero-badges-incomplete .hero-text-mobile .hcta-ghost{width:100%;padding:14px 20px;font-size:13px;justify-content:center}
.hero.hero-badges-incomplete .hero-text-mobile .hcta-icon{width:22px;height:22px;flex-shrink:0}
.hero.hero-badges-incomplete .hero-text-mobile .hcta-ghost{
color:#fff;
background:rgba(255,255,255,.14);
border-color:rgba(255,255,255,.45);
}
.hero.hero-badges-incomplete .hero-text-mobile .hcta-ghost .hcta-icon{
background:rgba(255,255,255,.18);
border-color:rgba(255,255,255,.38);
}
@media(max-width:640px){
.stn-hero-heading{flex-direction:column;gap:10px;margin-bottom:10px}
.stn-hero-icon{width:36px;height:36px;border-radius:10px}
.stn-hero-icon svg{width:16px;height:16px}
.stn-hero-stat{padding:7px 16px 7px 7px;gap:6px}
.stn-hero-stat-icon{width:22px;height:22px}
.stn-hero-stat-icon svg{width:12px;height:12px}
}
/* ═══════════════════════════════════════════════════════════
DİZAYN TRİKLƏRİ — kiçik, zərif toxunuşlar
═══════════════════════════════════════════════════════════ */
/* 1) «Shine sweep» — ÇIXARILDI.
Kartın üzərindən keçən diaqonal parıltı 2010-cu illərin şablon effekti idi
və kartın öz cavabı (qalxma + kölgə) ilə eyni anda işləyəndə diqqəti
bölürdü. `overflow:hidden` isə saxlanılır — daxildəki şəkillərin künc
radiusunu kəsmək üçün lazımdır. */
.feat-card, .prod-card, .ab-value-card{ position:relative; overflow:hidden; }
/* 3) Hero: siçan hərəkətinə görə çox yüngül parallaks (JS: main.js `initHeroParallax`) */
.hero-bg{ transition:transform .12s linear; }
/* 4) Statistika rəqəmləri: yüngül nəbz — sanki canlı ölçülür.
text-shadow yerinə opacity animasiyası — GPU-compositable, boyama (paint)
tələb etmir, mobil batareya/performansa daha yaxşıdır. */
.hst-n{ }
.hst:nth-child(3) .hst-n{ animation-delay:.8s }
.hst:nth-child(5) .hst-n{ animation-delay:1.6s }
@keyframes hstPulse{
0%,100%{ opacity:1 }
50%{ opacity:.72 }
}
/* 5) Bölmə etiketləri (sec-tag): kiçik canlı nöqtə yanıb-sönür.
Genişlənən box-shadow həlqəsi yerinə ayrıca ::after qatında
transform:scale + opacity ilə eyni "ping" effekti — compositable. */
.sec-tag{ position:relative; padding-left:20px; }
.sec-tag::before{
content:'';position:absolute;left:9px;top:50%;translate:0 -50%;
width:6px;height:6px;border-radius:50%;background:var(--c-brand);
z-index:1;
}
.sec-tag::after{
content:'';position:absolute;left:9px;top:50%;translate:0 -50%;
width:6px;height:6px;border-radius:50%;background:var(--c-brand);
}
@keyframes tagDot{
0%{ transform:scale(1); opacity:.5 }
70%,100%{ transform:scale(2.4); opacity:0 }
}
@media(prefers-reduced-motion:reduce){
.feat-card::after,.prod-card::after,.hst-n,.sec-tag::after{ animation:none;transition:none }
}
/* ── "Damla" effekti — düymələrə basanda yumşaq su damlası kimi yayılan işıq ── */
.ripple-host{ position:relative; overflow:hidden; }
.ripple{
position:absolute; border-radius:50%; pointer-events:none;
background:radial-gradient(circle, rgba(255,255,255,.6) 0%, rgba(255,255,255,.22) 45%, transparent 72%);
transform:scale(0);
opacity:1;
animation:rippleDrop .7s cubic-bezier(.25,.65,.3,1) forwards;
mix-blend-mode:overlay;
}
@keyframes rippleDrop{
to{ transform:scale(1); opacity:0; }
}
@media(prefers-reduced-motion:reduce){
.ripple{ display:none; }
}
/* ═══════════════════════════════════════════════════════════
STANSİYALAR SƏHİFƏSİ — açıq tema, 57a695 aksentli premium görünüş
═══════════════════════════════════════════════════════════ */
body.page-stations .page-hero{ position:relative;overflow:hidden;padding:calc(var(--nav-h) + 56px) 0 56px; }
body.page-stations .page-hero .ab-glow{ opacity:.55; }
body.page-stations .page-hero .container{ position:relative;z-index:1; }
body.page-stations .page-hero .section-label{
display:inline-block;font-size:11px;font-weight:700;letter-spacing:1.3px;
text-transform:uppercase;color:rgba(255,255,255,.78);margin-bottom:14px;
}
body.page-stations .page-hero h1{
font-family:var(--ff-d);font-size:clamp(30px,4.6vw,46px);font-weight:700;
letter-spacing:-.01em;line-height:1.15;margin-bottom:14px;
}
body.page-stations .page-hero .lead{max-width:62ch;
font-size:15px;line-height:1.6;color:rgba(255,255,255,.85);
max-width:640px;margin:0 auto;
}
body.page-stations .page-hero{
background:linear-gradient(135deg,#1a7367 0%,#175f58 45%,#11504c 100%);
}
/* Məhsullar səhifəsi eyni premium hero görünüşünü paylaşır */
body.page-products .page-hero{
position:relative;overflow:hidden;padding:calc(var(--nav-h) + 56px) 0 56px;
background:linear-gradient(135deg,#1a7367 0%,#175f58 45%,#11504c 100%);
}
body.page-products .page-hero .ab-glow{ opacity:.55; }
body.page-products .page-hero .container{ position:relative;z-index:1; }
body.page-products .page-hero .section-label{
display:inline-block;font-size:11px;font-weight:700;letter-spacing:1.3px;
text-transform:uppercase;color:rgba(255,255,255,.78);margin-bottom:14px;
}
body.page-products .page-hero h1{
font-family:var(--ff-d);font-size:clamp(30px,4.6vw,46px);font-weight:700;
letter-spacing:-.01em;line-height:1.15;margin-bottom:14px;
}
body.page-products .page-hero .lead{max-width:62ch;
font-size:15px;line-height:1.6;color:rgba(255,255,255,.85);
max-width:640px;margin:0 auto;
}
/* Zərif nöqtə-şəbəkə toxuması — hero-ya dərinlik qatır */
.stn-hero-grid{
position:absolute;inset:0;z-index:0;pointer-events:none;
background-image:radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px);
background-size:26px 26px;
-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 15%, #000 0%, transparent 75%);
mask-image:radial-gradient(ellipse 80% 70% at 50% 15%, #000 0%, transparent 75%);
}
.stn-hero-heading{
display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:14px;
}
body.page-stations .page-hero h1{margin-bottom:0}
.stn-hero-icon{
display:flex;align-items:center;justify-content:center;flex-shrink:0;
width:46px;height:46px;border-radius:14px;color:#fff;
background:linear-gradient(145deg,rgba(255,255,255,.28),rgba(255,255,255,.08));
border:1px solid rgba(255,255,255,.35);
box-shadow:0 6px 20px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.3);
}
.stn-hero-stats{
display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:26px;
}
.stn-hero-stat{
display:flex;align-items:center;gap:8px;
padding:9px 20px 9px 9px;border-radius:28px;
background:rgba(255,255,255,.12);
backdrop-filter:blur(14px) saturate(160%);
-webkit-backdrop-filter:blur(14px) saturate(160%);
border:1px solid rgba(255,255,255,.22);
box-shadow:0 4px 18px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.15);
transition:transform .2s var(--ease),background .2s;
}
.stn-hero-stat:hover{transform:translateY(-2px);background:rgba(255,255,255,.18)}
.stn-hero-stat-icon{
display:flex;align-items:center;justify-content:center;flex-shrink:0;
width:26px;height:26px;border-radius:50%;color:#fff;
background:rgba(255,255,255,.16);
border:1px solid rgba(255,255,255,.28);
}
.stn-hero-stat-num{font-family:var(--ff-d);font-weight:700;font-size:15px;color:#fff}
.stn-hero-stat-label{font-size:12px;font-weight:500;color:rgba(255,255,255,.82)}
.stn-section{
position:relative;overflow:hidden;
padding-bottom:var(--sp);
background:linear-gradient(180deg,#f4faf8 0%,#eef8f5 45%,#ffffff 100%);
}
.stn-section .container{position:relative;z-index:1}
.ab-glow.stn-glow-1{top:-40px;left:-160px;opacity:.5}
.ab-glow.stn-glow-2{top:220px;right:-180px;bottom:auto;opacity:.35}
/* ── Toolbar: ünvan axtarışı + geolocation düyməsi ── */
.stn-toolbar{
display:flex;flex-wrap:wrap;gap:12px;align-items:stretch;
margin:28px 0 16px;
}
.stn-btn-ghost{
display:inline-flex;align-items:center;gap:8px;flex-shrink:0;
border:1px solid rgba(255,255,255,.7);
background:rgba(255,255,255,.5);
backdrop-filter:blur(16px) saturate(160%);
-webkit-backdrop-filter:blur(16px) saturate(160%);
cursor:pointer;
padding:0 20px;border-radius:var(--r-btn);
font-family:var(--ff-b);font-size:13px;font-weight:600;color:var(--c-brand-d);
transition:background-color .2s var(--ease),border-color .2s var(--ease);
}
.stn-btn-ghost:hover{background:var(--c-brand-t);border-color:var(--c-brand)}
.stn-btn-ghost:disabled{opacity:.5;cursor:default}
@media(max-width:600px){
.stn-btn-ghost{width:100%}
.stn-btn-label{white-space:normal;text-align:center}
}
/* ── Nəticə bandı ── */
.stn-result{
margin-bottom:20px;padding:13px 18px 13px 44px;border-radius:var(--r-sm);
background:rgba(228,243,239,.65);
backdrop-filter:blur(14px) saturate(160%);
-webkit-backdrop-filter:blur(14px) saturate(160%);
border:1px solid rgba(200,232,224,.8);
color:var(--c-text);font-size:13px;position:relative;
}
.stn-result::before{
content:'📍';position:absolute;left:16px;top:50%;transform:translateY(-50%);
font-size:13px;
}
.stn-result-error{background:#fdeeee;border-color:#f3cccc;color:#8a3535}
.stn-result-error::before{content:'⚠';color:#c94f4f}
/* ── Layout: siyahı + xəritə ── */
.stations-layout{
display:grid;grid-template-columns:minmax(300px,380px) 1fr;gap:22px;
align-items:start;
}
/* «Daha çox göstər» — siyahının davamını açır (bax stations-map.js). */
.stn-more-btn{
display:block;width:100%;margin-top:10px;padding:12px 16px;
background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--r-sm);
font:inherit;font-size:13px;font-weight:600;color:var(--c-brand-d);
cursor:pointer;transition:background .18s,border-color .18s;
}
.stn-more-btn:hover{background:var(--c-brand-lighter);border-color:var(--c-brand-t2)}
.stn-more-btn[hidden]{display:none}
@media(max-width:900px){
/* Bir sütuna keçəndə XƏRİTƏ ƏVVƏLƏ qoyulur.
«Stansiya tapmaq» üçün gələn adam ilk növbədə xəritə axtarır;
əvvəl isə 560px-lik siyahı onu aşağı itələyirdi. */
.stations-layout{grid-template-columns:1fr}
.stations-map-panel{order:1}
.station-list-wrap{order:2}
/* Daxili sürüşdürmə söndürülür — mobildə barmaq siyahının üstünə
düşəndə səhifə yox, siyahı sürüşürdü və istifadəçi «ilişirdi».
Siyahı indi səhifə ilə birlikdə təbii axır. */
.station-list{max-height:none;overflow-y:visible}
}
.station-list-wrap{
border:1px solid rgba(255,255,255,.7);border-radius:var(--r);
background:rgba(255,255,255,.55);
backdrop-filter:blur(20px) saturate(160%);
-webkit-backdrop-filter:blur(20px) saturate(160%);
box-shadow:0 20px 60px -18px rgba(18,60,50,.18),inset 0 1px 0 rgba(255,255,255,.6);
overflow:hidden;
display:flex;flex-direction:column;
}
.stn-list-head{
display:flex;align-items:center;gap:8px;
padding:16px 18px 12px;
font-family:var(--ff-d);font-size:13px;font-weight:700;color:var(--c-text);
}
.stn-list-head span:last-child{font-family:var(--ff-b);font-weight:500;color:var(--c-muted);font-size:12px}
.stn-list-head-dot{width:3px;height:3px;border-radius:50%;background:var(--c-border-2);flex-shrink:0}
.station-list{
max-height:560px;overflow-y:auto;
}
.station-item{
position:relative;
padding:16px 18px 16px 21px;border-bottom:1px solid var(--c-border);
cursor:pointer;transition:background .15s;
}
.station-item::before{
content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
background:var(--c-brand);transform:scaleY(0);transition:transform .18s var(--ease);
}
.station-item:last-child{border-bottom:none}
.station-item:hover{background:rgba(87,166,149,.08)}
.station-item.active{background:rgba(87,166,149,.16)}
.station-item.active::before{transform:scaleY(1)}
.si-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:5px}
.station-item .name{font-family:var(--ff-d);font-weight:600;font-size:15px;color:var(--c-text)}
.station-item .addr{font-size:13px;color:var(--c-muted);line-height:1.4;margin-bottom:8px}
.station-badge{
flex-shrink:0;font-size:12px;font-weight:600;letter-spacing:.2px;
padding:2px 8px;border-radius:6px;white-space:nowrap;
}
.badge-active{background:var(--c-brand-t);color:var(--c-brand-d)}
.badge-coming{background:#f4eee0;color:#8a6d1f}
.badge-ac{background:#e8f0fe;color:#1a56c4}
.badge-dc{background:var(--c-brand-t);color:var(--c-brand-d)}
.connectors{display:flex;flex-wrap:wrap;gap:5px}
.conn-tag{
font-size:12px;font-weight:500;color:var(--c-muted);
background:var(--c-surface-2);border:1px solid var(--c-border);
padding:2px 8px;border-radius:6px;
}
.si-specs{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.si-spec{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:var(--c-muted)}
.si-spec svg{flex-shrink:0;color:var(--c-text-3)}
.si-dist{font-size:12px;font-weight:600;color:var(--c-brand-d)}
.si-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}
.si-nav-btn{
display:inline-flex;align-items:center;gap:6px;flex-shrink:0;margin-left:auto;
padding:7px 15px;border-radius:var(--r-btn);
font-size:12px;font-weight:600;color:#fff;
background:var(--c-brand-d);
transition:background-color .2s var(--ease);
}
.si-nav-btn:hover{background:var(--c-brand-dd)}
.station-empty{padding:30px 18px;text-align:center;color:var(--c-muted);font-size:13px}
/* ── Xəritə paneli: toolbar (legend + üslub) + xəritə kartı ── */
.stations-map-panel{ display:flex;flex-direction:column;gap:0; }
.stn-map-toolbar{
display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
padding:14px 18px;
background:rgba(255,255,255,.55);
backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);
border:1px solid rgba(255,255,255,.7);border-bottom:none;
border-radius:var(--r) var(--r) 0 0;
}
.stn-map-legend{ display:flex;align-items:center;gap:18px; }
.stn-legend-item{
display:inline-flex;align-items:center;gap:7px;
font-size:12px;font-weight:600;color:var(--c-muted);
}
.stn-legend-dot{ width:9px;height:9px;border-radius:50%;flex-shrink:0; }
.stn-legend-dc{ background:var(--c-brand); }
.stn-legend-ac{ background:#1a56c4; }
.stn-map-style-btn{
display:inline-flex;align-items:center;gap:7px;cursor:pointer;
border:1px solid var(--c-border);background:rgba(255,255,255,.6);
padding:7px 14px;border-radius:20px;
font-family:var(--ff-b);font-size:12px;font-weight:650;color:var(--c-text-3);
transition:background .18s,border-color .18s,color .18s;
}
.stn-map-style-btn:hover{background:var(--c-brand-t);border-color:var(--c-brand);color:var(--c-brand-d)}
.stn-map-style-btn[aria-pressed="true"]{background:var(--c-brand-d);border-color:var(--c-brand-d);color:#fff}
.stations-map-wrap{
position:relative;
border:1px solid rgba(255,255,255,.7);border-radius:0 0 var(--r) var(--r);
overflow:hidden;
box-shadow:0 20px 54px -20px rgba(18,60,50,.24),inset 0 1px 0 rgba(255,255,255,.5);
}
.stations-map{width:100%;height:560px;background:var(--c-surface);transition:filter .35s ease}
@media(max-width:900px){
/* Xəritə indi yuxarıdadır — ekranın yarısına yaxın yer verilir ki,
ətrafdakı stansiyalar bir baxışda görünsün, amma səhifənin qalanı
da hiss olunsun (aşağıda siyahının olduğu bilinsin). */
.stations-map{height:min(56vh,440px)}
}
/* Xəritə plitələrini brend palitrasına uyğunlaşdırmaq üçün incə rəng harmoniyası */
.stations-map .leaflet-tile-pane{filter:saturate(.68) brightness(1.03) contrast(1.02);transition:filter .35s ease}
.stations-map-wrap.is-dark .leaflet-tile-pane{filter:saturate(.9) brightness(.92) contrast(1.05)}
/* ── Stansiya pin-i: təmiz, sadə marker. Puls animasiyası yalnız aktiv/seçilmiş markerdə ── */
.stn-pin{position:relative;width:26px;height:26px}
.stn-pin-ring{
position:absolute;inset:0;border-radius:50%;
background:radial-gradient(circle,rgba(87,166,149,.45),transparent 72%);
opacity:0;
}
.stn-pin-dot{
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
width:20px;height:20px;border-radius:50%;
background:var(--c-brand);
border:2px solid #fff;color:#fff;
display:flex;align-items:center;justify-content:center;
box-shadow:0 2px 8px rgba(18,33,31,.35);
transition:transform .2s var(--ease),box-shadow .2s,background .2s;
}
.stn-pin:hover .stn-pin-dot{transform:translate(-50%,-50%) scale(1.15);box-shadow:0 4px 14px rgba(18,33,31,.45)}
/* Axtarışla tapılan ən yaxın stansiya — tək dəfəlik, mənalı vurğu */
.stn-pin.is-nearest .stn-pin-ring{opacity:.35;animation:none}
.stn-pin.is-nearest .stn-pin-dot{background:var(--c-brand-d);box-shadow:0 3px 12px rgba(18,33,31,.45),0 0 0 3px rgba(87,166,149,.3)}
@keyframes stnPinPulse{0%{transform:scale(.5);opacity:.85}100%{transform:scale(2.2);opacity:0}}
@media(prefers-reduced-motion:reduce){ .stn-pin.is-nearest .stn-pin-ring{animation:none;opacity:0} }
/* ── İstifadəçi məkanı: radar-sweep effekti ── */
.stn-user-pin{position:relative;width:22px;height:22px}
.stn-user-dot{
position:absolute;inset:0;margin:auto;width:14px;height:14px;border-radius:50%;
background:#3e8677;border:3px solid #fff;box-shadow:0 2px 8px rgba(18,33,31,.45);
}
.stn-user-ring{
position:absolute;inset:0;border-radius:50%;border:2px solid rgba(62,134,119,.35);
animation:none;
}
.stn-user-ring-2{animation-delay:1.2s}
@keyframes stnUserPulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(3.4);opacity:0}}
@media(prefers-reduced-motion:reduce){ .stn-user-ring{animation:none;opacity:.4} }
.stn-route-line{ animation:stnRouteFlow 1s linear infinite; }
@keyframes stnRouteFlow{ to{ stroke-dashoffset:-22px; } }
@media(prefers-reduced-motion:reduce){ .stn-route-line{ animation:none; } }
/* ── Popup: tünd şüşə kart (leaflet default-u əvəz edir) ── */
.leaflet-popup-content-wrapper{border-radius:10px;box-shadow:var(--sh-lg)}
.leaflet-popup-content{font-family:var(--ff-b);font-size:12px;line-height:1.5;color:var(--c-text);margin:10px 14px}
.leaflet-popup-content strong{color:var(--c-brand-d)}
.stn-pop-conn{color:var(--c-muted);font-size:11px}
.leaflet-control-attribution{font-size:11px !important}
.leaflet-popup.stn-popup .leaflet-popup-content-wrapper{
background:linear-gradient(160deg,rgba(20,38,34,.97),rgba(11,24,21,.97));
color:#eaf5f1;border-radius:14px;
box-shadow:0 24px 60px -14px rgba(0,0,0,.55),0 0 0 1px rgba(87,166,149,.28);
}
.leaflet-popup.stn-popup .leaflet-popup-tip{background:rgba(15,30,26,.97)}
.leaflet-popup.stn-popup .leaflet-popup-content{margin:14px 16px}
.leaflet-popup.stn-popup .leaflet-popup-close-button{color:rgba(234,245,241,.55) !important}
.leaflet-popup.stn-popup .leaflet-popup-close-button:hover{color:#fff !important}
.stn-popup-head{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.stn-popup-head strong{font-family:var(--ff-d);font-size:13px;color:#fff;font-weight:700}
.stn-popup-badge{font-size:11px;font-weight:800;letter-spacing:.4px;padding:2px 8px;border-radius:20px;text-transform:uppercase}
.stn-popup-badge.badge-ac{background:rgba(30,90,200,.35);color:#a9c8ff}
.stn-popup-badge.badge-dc{background:rgba(87,166,149,.32);color:#8ee6c9}
.stn-popup-addr{font-size:11px;color:rgba(234,245,241,.65);margin-bottom:10px;line-height:1.4}
.stn-popup-specs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.stn-popup-chip{font-size:11px;font-weight:650;color:rgba(234,245,241,.88);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);padding:2px 8px;border-radius:6px}
.stn-popup-nav{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:#8ee6c9;transition:color .15s}
.stn-popup-nav:hover{color:#fff}
/* ── Eyni ünvanda bir neçə stansiya olan qruplaşdırılmış popup ── */
.stn-popup-group-addr{
display:flex;align-items:center;justify-content:space-between;gap:10px;
margin-bottom:2px;
}
.stn-popup-count{
flex-shrink:0;font-size:11px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;
color:#8ee6c9;background:rgba(87,166,149,.18);border:1px solid rgba(87,166,149,.32);
padding:2px 8px;border-radius:20px;
}
.stn-popup-group-list{
max-height:160px;overflow-y:auto;margin:10px 0 12px;padding-right:10px;
-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 18px),transparent 100%);
mask-image:linear-gradient(to bottom,#000 calc(100% - 18px),transparent 100%);
scrollbar-width:thin;scrollbar-color:rgba(87,166,149,.55) transparent;
}
.stn-popup-group-list::-webkit-scrollbar{width:5px}
.stn-popup-group-list::-webkit-scrollbar-track{background:transparent}
.stn-popup-group-list::-webkit-scrollbar-thumb{background:rgba(87,166,149,.55);border-radius:10px}
.stn-popup-group-list::-webkit-scrollbar-thumb:hover{background:rgba(87,166,149,.8)}
.stn-popup-group-item{padding:10px 0;border-top:1px solid rgba(255,255,255,.1)}
.stn-popup-group-item:first-child{border-top:none;padding-top:0}
.stn-popup-group-item .stn-popup-head{margin-bottom:5px}
.stn-popup-group-item .stn-popup-specs{margin-bottom:0}
/* ── Zoom idarəetməsi: şüşə pill dizaynı ── */
.leaflet-control-zoom{
border:none !important;border-radius:14px !important;overflow:hidden;
background:rgba(255,255,255,.78) !important;
backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
box-shadow:0 10px 28px -8px rgba(18,60,50,.28) !important;
}
.leaflet-control-zoom a{
background:transparent !important;color:var(--c-brand-d) !important;
font-weight:700 !important;border:none !important;transition:background .18s;
}
.leaflet-control-zoom a:hover{background:var(--c-brand-t) !important}
.leaflet-control-zoom-in{border-bottom:1px solid var(--c-border) !important}
/* ═══════════════════════════════════════════════════════════
HAQQIMIZDA — neon/qaranlıq tema (#57a695 aksent)
═══════════════════════════════════════════════════════════ */
.ab-hero{
position:relative;overflow:hidden;text-align:center;
background:linear-gradient(135deg,#1a7367 0%,#175f58 45%,#11504c 100%);
padding:calc(var(--nav-h) + 90px) 0 80px;
}
.ab-glow{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0;transition:transform .4s var(--ease)}
.ab-glow-1{width:520px;height:520px;background:rgba(87,166,149,.35);top:-220px;left:-140px;}
.ab-glow-2{width:420px;height:420px;background:rgba(127,207,190,.2);bottom:-220px;right:-120px;}
@keyframes abDrift1{0%,100%{margin:0}50%{margin:22px -16px 0 0}}
@keyframes abDrift2{0%,100%{margin:0}50%{margin:0 0 18px 20px}}
@media(prefers-reduced-motion:reduce){
.ab-glow-1,.ab-glow-2{animation:none}
}
.ab-hero .container{position:relative;z-index:1}
.ab-eyebrow{
display:inline-flex;align-items:center;gap:8px;
font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
color:#fff;background:rgba(255,255,255,.14);
backdrop-filter:blur(14px) saturate(160%);
-webkit-backdrop-filter:blur(14px) saturate(160%);
border:1px solid rgba(255,255,255,.25);border-radius:20px;
padding:6px 16px;margin-bottom:22px;
box-shadow:0 4px 18px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.15);
}
.ab-eyebrow-dot{width:6px;height:6px;border-radius:50%;background:#57a695;flex-shrink:0;}
.ab-hero h1{
font-family:var(--ff-d);font-size:clamp(32px,5vw,54px);font-weight:700;
color:#fff;line-height:1.16;letter-spacing:-.01em;
max-width:780px;margin:0 auto 20px;
}
.ab-grad{
background:linear-gradient(90deg,#eafbf5,#fff,#c8e8e0);
-webkit-background-clip:text;background-clip:text;color:transparent;
filter:drop-shadow(0 0 18px rgba(255,255,255,.35));
}
.ab-lead{
font-size:15px;line-height:1.7;color:rgba(255,255,255,.85);
max-width:620px;margin:0 auto;
}
/* ── Stats zolağı ── */
.ab-stats{background:#eef8f5;padding:0 0 70px;position:relative;z-index:1}
.ab-stats-grid{
display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.7);
border-radius:20px;padding:8px;max-width:900px;margin:-40px auto 0;
backdrop-filter:blur(20px) saturate(160%);
-webkit-backdrop-filter:blur(20px) saturate(160%);
box-shadow:0 20px 60px -18px rgba(18,60,50,.18),inset 0 1px 0 rgba(255,255,255,.6);
}
.ab-stat{flex:1;text-align:center;padding:20px 14px}
.ab-stat-n{
font-family:var(--ff-d);font-size:clamp(22px,2.6vw,30px);font-weight:800;
color:var(--c-brand-d);
}
.ab-stat-l{font-size:11px;color:var(--c-muted);margin-top:5px;text-transform:uppercase;letter-spacing:.5px}
.ab-stat-sep{width:1px;height:38px;background:var(--c-border-2);flex-shrink:0}
@media(max-width:720px){
.ab-stats-grid{flex-wrap:wrap}
.ab-stat{flex:1 1 40%}
.ab-stat-sep{display:none}
}
/* ── Hekayə / şirkət mətni ── */
.ab-story{background:linear-gradient(180deg,#eef8f5 0%,#f4faf8 100%);padding:90px 0}
.ab-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
@media(max-width:960px){.ab-grid{grid-template-columns:1fr}}
.ab-tag-label{
display:inline-block;font-size:11px;font-weight:700;letter-spacing:1.3px;
text-transform:uppercase;color:var(--c-brand-d);margin-bottom:12px;
}
.ab-copy h2{
font-family:var(--ff-d);font-size:clamp(24px,3vw,32px);font-weight:700;
color:var(--c-text);line-height:1.3;margin-bottom:20px;
}
.ab-copy p{color:var(--c-muted);line-height:1.8;margin-bottom:16px;font-size:15px}
.ab-copy a{color:var(--c-brand-d);text-decoration:underline;text-underline-offset:2px}
.ab-copy strong{color:var(--c-text)}
.ab-conn-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.ab-conn-tag{
font-size:11px;font-weight:650;color:var(--c-brand-d);
background:rgba(255,255,255,.55);
backdrop-filter:blur(12px) saturate(160%);
-webkit-backdrop-filter:blur(12px) saturate(160%);
border:1px solid rgba(255,255,255,.7);
padding:6px 14px;border-radius:20px;
box-shadow:0 4px 14px -4px rgba(18,60,50,.12);
}
.ab-media{display:grid;gap:18px}
.ab-media-main{
border-radius:20px;overflow:hidden;aspect-ratio:16/11;
border:1px solid rgba(255,255,255,.7);
box-shadow:0 20px 60px -18px rgba(18,60,50,.2),inset 0 1px 0 rgba(255,255,255,.6);
}
.ab-media-main img{width:100%;height:100%;object-fit:cover}
.ab-media-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ab-media-row img{
width:100%;height:100%;min-height:150px;object-fit:cover;
border-radius:20px;border:1px solid rgba(255,255,255,.7);
box-shadow:0 12px 40px -14px rgba(18,60,50,.22);
}
@media(max-width:560px){.ab-media-row{grid-template-columns:1fr}}
/* ── Dəyərlər ── */
.ab-values{background:linear-gradient(180deg,#f4faf8 0%,#ffffff 100%);padding:90px 0}
.ab-values-head{text-align:center;margin-bottom:48px}
.ab-values-head h2{font-family:var(--ff-d);font-size:clamp(24px,3vw,32px);font-weight:700;color:var(--c-text)}
.ab-values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:960px){.ab-values-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ab-values-grid{grid-template-columns:1fr}}
.ab-value-card{
background:rgba(255,255,255,.55);
backdrop-filter:blur(20px) saturate(160%);
-webkit-backdrop-filter:blur(20px) saturate(160%);
border:1px solid rgba(255,255,255,.7);border-radius:20px;padding:26px 22px;
box-shadow:0 20px 60px -20px rgba(18,60,50,.16),inset 0 1px 0 rgba(255,255,255,.6);
transition:transform .25s var(--ease),border-color .25s,box-shadow .25s;
}
.ab-value-card:hover{
transform:translateY(-4px);border-color:rgba(87,166,149,.4);
box-shadow:0 24px 60px -16px rgba(18,60,50,.22),inset 0 1px 0 rgba(255,255,255,.6);
}
.ab-value-icon{
width:42px;height:42px;border-radius:10px;
background:linear-gradient(140deg,var(--c-brand-t2),var(--c-brand-t));
border:1px solid rgba(255,255,255,.7);
display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.ab-value-card h3{font-family:var(--ff-d);font-size:15px;font-weight:700;color:var(--c-text);margin-bottom:8px}
.ab-value-card p{font-size:13px;line-height:1.6;color:var(--c-muted)}
/* ── CTA ── */
.ab-cta{background:#ffffff;padding:0 0 100px}
.ab-cta-box{
position:relative;overflow:hidden;text-align:center;
background:linear-gradient(150deg,rgba(228,243,239,.75) 0%,rgba(255,255,255,.55) 100%);
backdrop-filter:blur(20px) saturate(160%);
-webkit-backdrop-filter:blur(20px) saturate(160%);
border:1px solid rgba(255,255,255,.7);border-radius:28px;padding:56px 32px;
box-shadow:0 30px 70px -20px rgba(18,60,50,.2),inset 0 1px 0 rgba(255,255,255,.6);
}
.ab-cta-box::before{
content:'';position:absolute;left:50%;top:50%;width:140%;aspect-ratio:1;
background:conic-gradient(from 0deg,transparent 0deg,rgba(127,207,190,.16) 60deg,transparent 140deg,transparent 220deg,rgba(87,166,149,.12) 280deg,transparent 340deg);
transform:translate(-50%,-50%);pointer-events:none;
}
.ab-cta-box > *{position:relative;z-index:1}
@keyframes ctaSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.ab-cta-box::before{animation:none}}
.ab-cta-box h2{font-family:var(--ff-d);font-size:clamp(24px,3vw,32px);font-weight:700;color:var(--c-text);margin-bottom:12px}
.ab-cta-box p{color:var(--c-muted);margin-bottom:26px;font-size:15px}
.ab-cta-btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
padding:13px 28px;border-radius:var(--r-btn);
font-family:var(--ff-b);font-size:13px;font-weight:600;color:#fff;
background:var(--c-brand-d);
transition:background-color .2s var(--ease);
}
.ab-cta-btn:hover{background:var(--c-brand-dd)}
/* ── Səbət nişanı (bütün səhifələrdə görünür) ───────────────
Səbətin öz üslubları shop.css-dədir; bu iki qayda naviqasiyada
olduğu üçün hər səhifədə lazımdır. */
.nav-cart { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.nav-cart .cart-count {
min-width: 18px; height: 18px; padding: 0 5px;
background: #57a695; color: #fff; border-radius:10px;
font-size:11px; font-weight: 700; line-height: 18px;
text-align: center; display: inline-block;
}
.nav-cart .cart-count[data-count="0"] { display: none; }
/* ── BİZNES TƏKLİFİ ────────────────────────────────────────── */
.hm-offer{padding:var(--sp) 0}
/* SƏHNƏ — sürüşdükcə dəyişən şəkil.
------------------------------------------------------------
Solda yapışqan səhnə, sağda sürüşən mətn. Hansı addım ekranın
mərkəzinə çatırsa, onun kadrı görünür.
Bu, effekt üçün deyil: statik bir foto «avadanlıq seçimi»ni də,
«quraşdırma»nı da, «idarəetmə»ni də eyni dərəcədə zəif təsvir
edirdi. İndi hər sözün öz görüntüsü var. */
/* Solda mövqe, sağda addımlar. Foto blokları saytdan götürüldükdən
sonra sol sütunda yalnız mətn qalır — quruluş yenidən sadədir. */
.hm-offer-in{
display:grid;
grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
gap:clamp(32px,6vw,80px);
align-items:start;
}
/* Addımlar klik olunan düymələrdir. Aktiv olmayan sönük qalır ki,
hansının açıq olduğu bir baxışda görünsün. */
.hm-offer-lead h2{margin:8px 0 14px}
.hm-offer-lead>p{
color:var(--c-muted);
margin:0 0 26px;
max-width:44ch;
line-height:1.65;
}
.hm-offer-acts{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
/* Addımlar kart deyil — yuxarıda artıq loqo şəbəkəsi var, üçüncü
şəbəkə səhifəni yenidən monotonlaşdırardı. Nazik ayırıcı xətt
sıranı kifayət qədər aydın göstərir. */
.hm-offer-steps{
list-style:none;
margin:0;padding:0;
}
.hm-offer-steps li{
display:grid;
grid-template-columns:auto minmax(0,1fr);
gap:20px;
padding:26px 0;
border-top:1px solid var(--c-border);
}
.hm-offer-steps li:first-child{border-top:0;padding-top:0}
.hm-offer-steps li:last-child{padding-bottom:0}
.hm-offer-steps h3{margin:0 0 8px;font-size:17px}
.hm-offer-steps p{margin:0;color:var(--c-muted);line-height:1.65}
.hm-step-n{
font-size:.85rem;
font-weight:600;
color:var(--c-brand-d);
font-variant-numeric:tabular-nums;
padding-top:2px;
}
/* ── SÜRÜCÜLƏR ─────────────────────────────────────────────── */
.hm-drivers{
padding:calc(var(--sp) * .62) 0;
background:var(--c-surface);
border-block:1px solid var(--c-border);
}
.hm-drivers-in{
display:grid;
grid-template-columns:auto minmax(0,1fr) auto;
gap:clamp(24px,4vw,52px);
align-items:center;
}
.hm-drivers-head h2{margin:6px 0 0;font-size:clamp(1.25rem,2.2vw,1.6rem)}
.hm-drivers-steps{
display:flex;
flex-wrap:wrap;
gap:10px 26px;
list-style:none;
margin:0;padding:0;
}
.hm-drivers-steps li{
display:flex;
align-items:center;
gap:9px;
font-size:.95rem;
color:var(--c-text-2);
}
.hm-drivers-steps span{
display:grid;
place-items:center;
width:23px;height:23px;
flex:0 0 23px;
border-radius:50%;
background:var(--c-brand-lighter);
color:var(--c-brand-dd);
font-size:.76rem;
font-weight:600;
}
.hm-drivers-acts{display:flex;gap:20px;flex-wrap:wrap}
/* Səhifədə yeganə güclü düymə CTA-dadır. Qalan keçidlər mətn
keçidi olaraq qalır — əvvəl dörd bölmənin dördündə də eyni
solğun düymə vardı və heç biri əsas addımı göstərmirdi. */
.hm-textlink{
font-size:.95rem;
font-weight:500;
color:var(--c-brand-d);
text-decoration:none;
border-bottom:1px solid transparent;
transition:border-color .18s ease;
}
.hm-textlink:hover{border-bottom-color:currentColor}
@media (max-width:900px){
.hm-offer-in{grid-template-columns:1fr;gap:32px}
.hm-drivers-in{grid-template-columns:1fr;gap:22px}
}
/* ── TƏRƏFDAŞLAR LENTİ ──
Sürüşən karusel qəsdən saxlanılıb: 22 loqo sabit şəbəkədə
səhifədə həddən artıq yer tuturdu. */
/* ── PARTNERS BAND ── */
.partners-band{
background:var(--c-surface);
border-top:1px solid var(--c-border);border-bottom:1px solid var(--c-border);
padding:32px 0;overflow:hidden;
}
.pb-label{
text-align:center;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
color:var(--c-muted);margin-bottom:22px;
}
.pb-track-wrap{
overflow:hidden;position:relative;
}
.pb-track-wrap::before,.pb-track-wrap::after{
content:'';position:absolute;top:0;bottom:0;width:70px;z-index:2;pointer-events:none;
}
.pb-track-wrap::before{left:0;background:linear-gradient(to right,var(--c-surface),transparent)}
.pb-track-wrap::after{right:0;background:linear-gradient(to left,var(--c-surface),transparent)}
.pb-track{
display:flex;gap:0;width:max-content;
animation:pbScroll 26s linear infinite;
will-change:transform;
}
.partners-band:hover .pb-track{ animation-play-state:paused; }
@media(prefers-reduced-motion:reduce){
.pb-track{ animation:none; }
}
a.pb-chip, .pb-chip{
display:flex;align-items:center;gap:18px;flex-shrink:0;
padding:12px 34px;border-right:1px solid var(--c-border);
white-space:nowrap;opacity:.6;transition:opacity .25s;
}
a.pb-chip{color:inherit;text-decoration:none;}
.pb-chip:hover, a.pb-chip:hover{opacity:1}
.pb-logo{
display:block;box-sizing:border-box;
width:88px;height:88px;
object-fit:contain;
flex-shrink:0;
background:#fff;border-radius:14px;padding:11px;
border:1px solid var(--c-border);
box-shadow:0 1px 3px rgba(18,60,50,.06);
}
/* ── Tərəfdaş loqoları: yumşaq hover ── */
.pb-chip{transition:transform .25s var(--ease)}
.pb-chip:hover{transform:translateY(-3px)}
/* Tərəfdaş lenti: PC-də loğolar daha iri, telefonda yığcam */
@media(max-width:900px){
.pb-logo{width:68px;height:68px;border-radius:12px;padding:9px}
a.pb-chip,.pb-chip{padding:11px 24px;gap:14px}
}
@media(max-width:600px){
.pb-logo{width:58px;height:58px;border-radius:11px;padding:8px}
a.pb-chip,.pb-chip{padding:10px 18px}
}
/* ============================================================
STANSİYALAR — axtarış zolağı
============================================================
Səhifədə əvvəl İKİ mətn xanası vardı: biri ünvanı geocode edib ən
yaxın stansiyanı tapırdı, digəri siyahını süzürdü. Görünüşcə eyni
idilər və bir-birinə yaxın dururdular — istifadəçi hansına nə
yazacağını bilmirdi. İndi bir xana hər ikisini edir; fərq yazının
özündədir (yazdıqca süzür, Enter ünvan kimi axtarır).
------------------------------------------------------------ */
.stn-toolbar{
display:flex;
gap:12px;
align-items:stretch;
flex-wrap:wrap;
}
.stn-search{
position:relative;
display:flex;
align-items:center;
flex:1 1 320px;
min-width:0;
background:var(--c-bg);
border:1px solid var(--c-border-2);
border-radius:var(--r-btn);
padding:0 16px;
transition:border-color .18s ease, box-shadow .18s ease;
}
.stn-search:focus-within{
border-color:var(--c-brand);
box-shadow:0 0 0 3px var(--c-brand-lighter);
}
.stn-search-ico{
flex:0 0 auto;
color:var(--c-text-3);
margin-right:10px;
}
.stn-search input{
flex:1 1 auto;
min-width:0;
border:0;
outline:0;
background:transparent;
padding:14px 0;
font:inherit;
font-size:.97rem;
color:var(--c-text);
}
.stn-search input::placeholder{color:var(--c-text-3)}
/* Geocode sorğusu gedərkən — düymə mətnini dəyişmək əvəzinə kiçik
göstərici, çünki xana ilə düymə artıq ayrıdır. */
.stn-search-spin{
flex:0 0 auto;
width:15px;height:15px;
margin-left:10px;
border:2px solid var(--c-border-3);
border-top-color:var(--c-brand);
border-radius:50%;
animation:stnSpin .7s linear infinite;
}
@keyframes stnSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
.stn-search-spin{animation-duration:2.4s}
}
/* Davranışı bir cümlə ilə izah edir. İki xanadan birini silmək
sadələşdirir, amma Enter-in nə etdiyi görünmür — bu sətir onu
göstərir və istifadəçini sınamağa məcbur etmir. */
.stn-hint{
margin:11px 2px 0;
font-size:.84rem;
color:var(--c-text-3);
line-height:1.5;
}
.stn-hint kbd{
font:inherit;
font-size:.79rem;
padding:1px 6px;
border:1px solid var(--c-border-2);
border-bottom-width:2px;
border-radius:4px;
background:var(--c-surface);
color:var(--c-text-2);
}
@media (max-width:560px){
.stn-toolbar{flex-direction:column}
.stn-search{flex:1 1 auto}
}
/* «Sıfırla» — məsafə rejimindən ilkin vəziyyətə qayıdış.
Əvvəl geri dönüş yolu ümumiyyətlə yox idi: bir dəfə məkan axtaran
istifadəçi siyahını ilkin sıraya yalnız səhifəni yeniləməklə
qaytara bilirdi. */
.stn-result-reset{
display:inline-block;
margin-top:8px;
padding:5px 13px;
font:inherit;
font-size:.82rem;
font-weight:500;
color:var(--c-brand-d);
background:var(--c-bg);
border:1px solid var(--c-border-2);
border-radius:var(--r-btn);
cursor:pointer;
transition:border-color .18s ease, color .18s ease;
}
.stn-result-reset:hover{
border-color:var(--c-brand);
color:var(--c-brand-dd);
}
/* Axtarış düyməsi — mobil üçün zəruridir.
------------------------------------------------------------
Əvvəl ünvan axtarışı yalnız Enter ilə işə düşürdü. Telefon
klaviaturasında Enter düyməsi yoxdur: onun yerində «keçid» və ya
işarə olur və istifadəçi onu axtarış kimi tanımır — yəni funksiya
mobil istifadəçi üçün praktiki olaraq gizli qalırdı.
Görünən düymə hər cihazda, klaviaturadan asılı olmadan işləyir. */
.stn-search-go{
flex:0 0 auto;
margin-left:8px;
padding:8px 18px;
font:inherit;
font-size:13px;
font-weight:600;
color:#fff;
background:var(--c-brand-d); /* ağ mətnlə 5.17:1 */
border:0;
border-radius:var(--r-btn);
cursor:pointer;
transition:background .18s ease;
}
.stn-search-go:hover{background:var(--c-brand-dd)}
.stn-search-go:active{background:var(--c-brand-dd)}
/* Brauzerin öz təmizləmə düyməsi saxlanılır — yazılanı silmək üçün
faydalıdır, amma öz ikonumuzla toqquşmasın deyə kiçildilir. */
.stn-search input[type="search"]::-webkit-search-cancel-button{
-webkit-appearance:none;
appearance:none;
width:14px;height:14px;
margin-left:6px;
cursor:pointer;
background:var(--c-text-3);
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
-webkit-mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
.stn-hint strong{color:var(--c-text-2);font-weight:600}
@media (max-width:420px){
.stn-search-go{padding:8px 14px}
}
/* ============================================================
HERO NİŞANLARI — ağ palitra
============================================================
Əvvəl tünd şüşə kartlar idi: iki qradiyent fon, üstündən parıltı
xətti, arxadan işıq ləkəsi, kənarda yaşıl halqa. Şəkil onsuz da
tünddür — tünd kart onun üstündə həm oxunmur, həm də bəzək qatları
ilə birlikdə şablon görüntüsü yaradır.
İndi ağ kart + şirkət yaşılı: fotoda ən yaxşı oxunan birləşmə budur
və palitra şirkətin öz rənglərində qalır.
Bu qaydalar sonda dayanır ki, yuxarıdakı tünd variantı üstələsin.
------------------------------------------------------------ */
.hb-in{
/* Şüşə effekti: fonun görünməsi üçün örtük şəffaf qalmalıdır.
.94 praktiki olaraq qapaq idi — arxadakı şəkil seçilmirdi, yəni
blur boşa işləyirdi. saturate() arxadakı rəngləri canlandırır,
şüşə hissini məhz o verir. */
background:rgba(255,255,255,.72);
border:1px solid rgba(255,255,255,.55);
box-shadow:0 12px 36px rgba(8,28,22,.26),
inset 0 1px 0 rgba(255,255,255,.7);
backdrop-filter:blur(22px) saturate(180%);
-webkit-backdrop-filter:blur(22px) saturate(180%);
}
/* Parıltı xətti və işıq ləkəsi — hər ikisi bəzəkdir, götürülür */
.hb-in::before,
.hb-in::after{content:none}
.hbadge:hover .hb-in{
border-color:rgba(255,255,255,1);
transform:translateY(-2px);
box-shadow:0 18px 44px rgba(10,32,26,.3);
}
/* İkon qutusu: şirkət yaşılı dolu, içindəki simvol ağ.
Şəffaf yaşıl fon ağ kartın üstündə solğun qalırdı. */
.hb-icon{
background:var(--c-brand);
border:0;
box-shadow:none;
color:#fff;
}
/* İkonların rəngi işarə ilə yox, CSS ilə verilir: nişanların içindəki
svg-lərdə açıq yaşıl rəng birbaşa atribut kimi yazılıb, yaşıl qutunun
üstündə isə o rəng itir. CSS atributu üstələyir. */
.hb-icon svg{color:#fff;stroke:#fff}
.hb-title{color:var(--c-text)}
.hb-sub{color:var(--c-muted)}
/* Ağ mətn --c-brand üzərində yalnız 3.34:1 verir — 13px mətn üçün
tələb 4.5-dir. --c-brand-d 5.17:1 verir və palitradan çıxmır. */
.hb-btn{background:var(--c-brand-d);color:#fff}
.hb-btn:hover{background:var(--c-brand-dd)}
/* ── HERO STATİSTİKA ZOLAĞI — nişanlarla eyni şüşə dili ──────────
Zolaq tünd idi (rgba(5,18,14,.78)), üstündə ayrıca tünd qradiyent
örtük vardı. Nişanlar ağa keçdikdən sonra hero-da iki fərqli dil
qalmışdı: yuxarıda ağ kartlar, aşağıda tünd panel. İndi hər ikisi
eyni şüşədir. */
.hero-stats{
/* Tünd qradiyent örtük yumşaldılır: şəklin aşağısını qaraltmaq
əvəzinə yalnız zolağın altına yüngül dayaq verir. */
background:linear-gradient(to top,rgba(6,20,16,.42) 0%,transparent 100%);
}
.hst-inner{
background:rgba(255,255,255,.72);
border:1px solid rgba(255,255,255,.55);
border-radius:14px;
box-shadow:0 12px 36px rgba(8,28,22,.26),
inset 0 1px 0 rgba(255,255,255,.7);
backdrop-filter:blur(22px) saturate(180%);
-webkit-backdrop-filter:blur(22px) saturate(180%);
}
/* Rəqəm ağ şüşənin üstündə tünd yaşıl olmalıdır — açıq yaşıl (#57a695)
ağ fonda kontrastı itirirdi. */
.hst-n{color:var(--c-brand-dd)}
/* Etiketlər 11px böyük hərflidir, yəni kiçik mətn sayılır və WCAG
4.5:1 tələb edir. --c-muted ağ şüşədə 4.41 verirdi — bir pillə
tünd rəng 5.09-a qaldırır. */
.hst-l{color:#556c66}
.hst-sep{background:rgba(10,40,32,.14)}
/* ── MOBİL HERO — masaüstü ilə eyni şüşə dili ────────────────────
≤640px-də nişanlar gizlənir və onların yerinə düymələr çıxır. Amma
düymələr köhnə tünd-şəffaf üslubda qalmışdı: telefonda yuxarıda
tünd düymələr, dərhal altında isə ağ şüşə statistika zolağı
görünürdü — bir ekranda iki fərqli dil.
İndi hər ikisi eyni şüşədir. Masaüstündə ağ kartlar nə deyirsə,
mobildə də o deyilir.
------------------------------------------------------------ */
@media (max-width:640px){
.hero-text-mobile .hcta-ghost{
color:var(--c-text);
background:rgba(255,255,255,.72);
border:1px solid rgba(255,255,255,.55);
box-shadow:0 8px 26px rgba(8,28,22,.22),
inset 0 1px 0 rgba(255,255,255,.7);
backdrop-filter:blur(22px) saturate(180%);
-webkit-backdrop-filter:blur(22px) saturate(180%);
}
/* İkon qutusu: nişanlardakı kimi dolu şirkət yaşılı, simvol ağ */
.hero-text-mobile .hcta-ghost .hcta-icon{
background:var(--c-brand);
border:0;
box-shadow:none;
color:#fff;
}
.hero-text-mobile .hcta-ghost .hcta-icon svg{color:#fff;stroke:#fff}
/* Əsas düymə şüşə deyil, dolu qalır — səhifədə tək güclü addımdır
və şüşə kartlar arasından seçilməlidir. */
.hero-text-mobile .hcta-primary{
width:100%;
padding:14px 18px;
font-size:13px;
justify-content:center;
background:var(--c-brand-d); /* ağ mətnlə 5.17:1 */
color:#fff;
border:0;
}
.hero-text-mobile .hcta-primary .hcta-icon{
background:rgba(255,255,255,.22);
box-shadow:none;
color:#fff;
}
/* Üst etiket də şüşələnir ki, tək qalmasın */
/* Nöqtə açıq yaşıl idi — ağ şüşənin üstündə itirdi */
.hero-text-mobile .hero-pulse{background:var(--c-brand-dd)}
.hero-text-mobile .hero-eyebrow{
color:var(--c-brand-dd);
background:rgba(255,255,255,.72);
border:1px solid rgba(255,255,255,.55);
backdrop-filter:blur(22px) saturate(180%);
-webkit-backdrop-filter:blur(22px) saturate(180%);
}
}
/* ============================================================
YAN ÇEVRİLMİŞ TELEFON
============================================================
Bütün mobil qaydalar yalnız ENƏ baxırdı (max-width:640px). Yan
çevrilmiş telefon isə 844px endədir — yəni masaüstü tərtibatını
alırdı, halbuki hündürlüyü cəmi 390px olurdu.
Nəticə: hero nişanları görünürdü, amma onların yeri fon şəklinin
koordinatlarından hesablanır və 390px-lik sahəyə sığmırdı — üst-üstə
düşür, kənara çıxırdılar.
Ayırıcı en yox, HÜNDÜRLÜKDÜR: problem cihazın nə qədər enli
olmasında deyil, şaquli yerin azlığındadır.
------------------------------------------------------------ */
@media (orientation:landscape) and (max-height:620px){
/* Nişanlar şaquli yer tələb edir — burada o yer yoxdur */
.hbadge{display:none !important}
.anno-svg{display:none}
/* Onların əvəzinə mobil mətn bloku çıxır, amma şaquli yığılmış
halda: yan ekranda üç düymə alt-alta düzülsə, ekranın hamısını
tutar. */
.hero-text-mobile{
display:block;
position:absolute;
z-index:4;
left:24px;right:24px;
top:50%;
transform:translateY(-50%);
text-align:center;
opacity:1;
}
.hero-text-mobile .hero-eyebrow{
font-size:11px;
padding:5px 12px;
margin-bottom:14px;
}
/* Düymələr sətir boyu düzülür — şaquli yığın burada yer qoymur */
.hero-text-mobile .hero-ctas{
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:center;
align-items:center;
gap:10px;
}
.hero-text-mobile .hcta-ghost,
.hero-text-mobile .hcta-primary{
width:auto;
padding:10px 18px;
font-size:13px;
}
/* SEO başlığı yan ekranda naviqasiya ilə toqquşurdu */
.hero-seo-h1{
top:calc(var(--nav-h) + 6px);
font-size:11px;
max-width:min(560px,84vw);
}
/* Statistika zolağı yığcamlaşır ki, mətn blokunun üstünə çıxmasın */
.hero-stats{padding:0 16px 12px}
.hst-inner{max-width:520px}
.hst{padding:9px 0}
.hst-l{font-size:11px}
}
/* Həqiqətən alçaq ekranlar. Hədd ölçmə ilə seçilib: naviqasiya (68) +
SEO başlığı (22) + etiket (42) + düymə sətri (44) + statistika (74)
= 250px. Yəni 390px-lik iPhone-da hər şey rahat sığır və zolağı
gizlətməyə ehtiyac yoxdur. Yalnız 350px-dən aşağıda yer çatmır. */
@media (orientation:landscape) and (max-height:350px){
.hero-stats{display:none}
.hero-seo-h1{display:none}
}
/* ============================================================
YAN ÇEVRİLMİŞ TELEFON
============================================================
Bütün mobil qaydalar yalnız ENƏ baxırdı (max-width:640px). Yan
çevrilmiş telefon isə 844px endədir — yəni masaüstü tərtibatını
alırdı, halbuki hündürlüyü cəmi 390px olurdu.
Nəticə: hero nişanları görünürdü, amma onların yeri fon şəklinin
koordinatlarından hesablanır və 390px-lik sahəyə sığmırdı — üst-üstə
düşür, kənara çıxırdılar.
Ayırıcı en yox, HÜNDÜRLÜKDÜR: problem cihazın nə qədər enli
olmasında deyil, şaquli yerin azlığındadır.
------------------------------------------------------------ */
@media (orientation:landscape) and (max-height:620px){
/* Nişanlar şaquli yer tələb edir — burada o yer yoxdur */
.hbadge{display:none !important}
.anno-svg{display:none}
/* Onların əvəzinə mobil mətn bloku çıxır, amma şaquli yığılmış
halda: yan ekranda üç düymə alt-alta düzülsə, ekranın hamısını
tutar. */
.hero-text-mobile{
display:block;
position:absolute;
z-index:4;
left:24px;right:24px;
top:50%;
transform:translateY(-50%);
text-align:center;
opacity:1;
}
.hero-text-mobile .hero-eyebrow{
font-size:11px;
padding:5px 12px;
margin-bottom:14px;
}
/* Düymələr sətir boyu düzülür — şaquli yığın burada yer qoymur */
.hero-text-mobile .hero-ctas{
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:center;
align-items:center;
gap:10px;
}
.hero-text-mobile .hcta-ghost,
.hero-text-mobile .hcta-primary{
width:auto;
padding:10px 18px;
font-size:13px;
}
/* SEO başlığı yan ekranda naviqasiya ilə toqquşurdu */
.hero-seo-h1{
top:calc(var(--nav-h) + 6px);
font-size:11px;
max-width:min(560px,84vw);
}
/* Statistika zolağı yığcamlaşır ki, mətn blokunun üstünə çıxmasın */
.hero-stats{padding:0 16px 12px}
.hst-inner{max-width:520px}
.hst{padding:9px 0}
.hst-l{font-size:11px}
}
/* Həqiqətən alçaq ekranlar. Hədd ölçmə ilə seçilib: naviqasiya (68) +
SEO başlığı (22) + etiket (42) + düymə sətri (44) + statistika (74)
= 250px. Yəni 390px-lik iPhone-da hər şey rahat sığır və zolağı
gizlətməyə ehtiyac yoxdur. Yalnız 350px-dən aşağıda yer çatmır. */
@media (orientation:landscape) and (max-height:350px){
.hero-stats{display:none}
.hero-seo-h1{display:none}
}
/* ============================================================
QALEREYA — «Şəbəkə həyatda»
============================================================
Dərinlik effekti qəsdən SCROLL-a bağlıdır, kursora yox.
Kursoru izləyən 3D əyilmə əvvəl sınandı və çıxarıldı: o, hər
hərəkətdə diqqəti məzmundan yayındırır və interfeysi yapmacıq
göstərir. Burada isə foto ekrana girərkən bir dəfə yerinə oturur,
sonra tərpənmir — istifadəçi baxmağa gələndə hərəkət bitmiş olur.
------------------------------------------------------------ */
.gal{padding:var(--sp) 0}
/* ============================================================
DİZAYN DİLİ — iri başlıq, yumru künc, şəkil öndə
============================================================
İstinad Spotify-dır. Oradan götürülən üç cizgi:
1. Başlıq İRİ və SIX olur. Zəif, boşluqlu başlıq səhifəni
«sənəd» kimi göstərir; sıx və ağır başlıq isə məhsul kimi.
2. Künclər səxavətli yumrudur — xüsusən şəkillərdə.
3. Şəkil bəzək deyil, blokun özüdür.
Rəng palitrası dəyişmir: Spotify-dan forma götürülür, rəng yox.
------------------------------------------------------------ */
/* Başlıqların hərf aralığı sıxlaşır. Ölçü artdıqca hərflər arası
nisbətən genişlənmiş görünür, ona görə iri başlıqda mənfi aralıq
lazımdır — bu, mətni bir bütöv blok kimi oxudur. */
h1{letter-spacing:-.03em}
h2{letter-spacing:-.025em;line-height:1.15}
h3{letter-spacing:-.015em}
/* ── MOBİL UYĞUNLAŞMA ───────────────────────────────────────────
Spotify-ın mobil davranışı: eyni komponent, amma daha sıx
boşluq və nisbətən daha iri başlıq. Telefonda ekran kiçikdir,
başlıq isə kiçilməməlidir — yoxsa iyerarxiya itir. */
@media (max-width:640px){
h1{letter-spacing:-.025em}
h2{letter-spacing:-.02em}
/* QR kartı telefonda tam en boyu olur və mərkəzlənir: yatay
forma dar ekranda sıxılırdı. */
.ma-qr{
flex-direction:column;
text-align:center;
width:100%;
padding:22px;
gap:14px;
}
.ma-qr img{width:210px}
.ma-qr p{max-width:none}
}
/* ── BLOQ ─────────────────────────────────────────────────── */
body.page-blog .page-hero,
body.page-blog-post .page-hero{
background:linear-gradient(135deg,#1a7367 0%,#175f58 45%,#11504c 100%);
}
.blog-grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
margin:clamp(40px,5vw,56px) 0;
}
@media(max-width:900px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.blog-grid{grid-template-columns:1fr}}
.blog-card{
display:flex;flex-direction:column;
background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--r);
overflow:hidden;box-shadow:var(--sh-xs);
transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out),border-color var(--t-base);
}
.blog-card:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--c-brand-t2)}
.blog-card-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--c-surface)}
.blog-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.blog-card:hover .blog-card-media img{transform:scale(1.05)}
.blog-card-cat{
position:absolute;top:12px;left:12px;
font-size:11px;font-weight:700;letter-spacing:.3px;color:#fff;
padding:5px 12px;border-radius:20px;
background:rgba(18,33,31,.6);backdrop-filter:blur(8px);
border:1px solid rgba(255,255,255,.22);
}
.blog-card-body{display:flex;flex-direction:column;gap:10px;padding:20px 20px 22px;flex:1}
.blog-card-title{
font-family:var(--ff-d);font-size:18px;font-weight:600;letter-spacing:var(--tracking-tight);
line-height:1.3;color:var(--c-text);
}
.blog-card-excerpt{font-size:14.5px;line-height:1.6;color:var(--c-muted);flex:1}
.blog-card-meta{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--c-text-3);margin-top:2px}
/* Məqalə detalı */
.blogpost-hero .breadcrumb{margin-bottom:14px}
.blogpost-hero .breadcrumb a,
.blogpost-hero .breadcrumb span{color:rgba(255,255,255,.85)}
.blogpost-meta{display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;color:rgba(255,255,255,.85);margin-top:14px}
.blogpost{padding:clamp(32px,5vw,52px) 0}
.blogpost .container{max-width:820px}
.blogpost-cover{margin:0 0 clamp(28px,4vw,40px);border-radius:var(--r);overflow:hidden;border:1px solid var(--c-border);box-shadow:var(--sh-md)}
.blogpost-cover img{width:100%;aspect-ratio:16/8;object-fit:cover}
.blogpost-body{font-size:17.5px;line-height:1.8;color:var(--c-text-2)}
.blogpost-body h2{
font-family:var(--ff-d);font-size:clamp(22px,2.6vw,28px);font-weight:600;
letter-spacing:var(--tracking-tight);color:var(--c-text);
margin:36px 0 14px;line-height:1.2;
}
.blogpost-body p{margin-bottom:18px}
.blogpost-body ul{margin:0 0 18px;padding-left:0;display:flex;flex-direction:column;gap:10px}
.blogpost-body li{position:relative;padding-left:28px;line-height:1.7}
.blogpost-body li::before{
content:'';position:absolute;left:6px;top:12px;width:7px;height:7px;border-radius:50%;
background:var(--c-brand);
}
.blogpost-note{
background:var(--c-brand-lighter);border:1px solid var(--c-brand-t2);
border-radius:var(--r-sm);padding:16px 20px;margin:24px 0;
font-size:15.5px;line-height:1.6;color:var(--c-text-2);
}
.blogpost-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(36px,5vw,48px);padding-top:clamp(28px,4vw,36px);border-top:1px solid var(--c-border)}
.blogpost-related{margin-top:clamp(48px,6vw,72px)}
.blogpost-related .blog-grid{margin:24px 0 0}
.pd-specs{
margin-top:clamp(48px,6vw,72px);
background:var(--c-surface);border:1px solid var(--c-border);
border-radius:var(--r);padding:clamp(24px,4vw,40px);
}
.pd-specs h2{font-family:var(--ff-d);font-size:clamp(20px,2.2vw,26px);font-weight:600;letter-spacing:var(--tracking-tight);color:var(--c-text);margin-bottom:8px}
.pd-specs-table{
display:grid;grid-template-columns:repeat(2,1fr);gap:0 40px;
}
@media(max-width:640px){.pd-specs-table{grid-template-columns:1fr}}
.pd-specs-row{display:flex;justify-content:space-between;gap:16px;padding:15px 0;border-bottom:1px solid var(--c-border)}
.pd-specs-row dt{font-size:14px;color:var(--c-muted)}
.pd-specs-row dd{font-size:14px;font-weight:600;color:var(--c-text);text-align:right}
/* ── MOBİL HERO — ŞƏKİL TAM GÖRÜNÜR ──────────────────────────
BU BLOKUN HAMISI @media(max-width:640px) DAXİLİNDƏDİR.
Geniş ekranlarda (PC) heç bir qayda tətbiq olunmur.
Tələb: hero fotosu mobildə TAM görünsün — kəsilmədən.
Əvvəl `cover` şəkli ekran nisbətinə uyğunlaşdırmaq üçün kəsirdi
və mətn onun üstünə düşürdü.
Həll: hero mobildə mütləq yerləşmədən (absolute) adi axına keçir.
Şəkil öz nisbətini (4415:6622) saxlayan bloka çevrilir — yəni
bütöv kadr görünür. Mətn və düymələr şəklin ALTINA düşür, üstünə
yox. Beləliklə foto heç nə ilə örtülmür. */
@media(max-width:640px){
.hero{
min-height:0;
height:auto;
display:block;
overflow:visible;
background:var(--c-surface);
/* padding-top QOYULMUR. Başlıq (.site-header) `position:fixed` və
ana səhifədə şəffafdır — yəni onsuz da şəklin üstündə üzür.
Buraya nav hündürlüyü qədər boşluq versək, şəkil aşağı düşür və
yuxarıda hero-nun tünd fonu zolaq kimi görünür (loqonun altında
qara lent). Şəkil ekranın ən yuxarısından başlamalıdır. */
}
/* Şəkil: tam kadr, kəsilmə yoxdur */
.hero-bg{
position:relative;
inset:auto;
width:100%;
aspect-ratio:4437 / 6656;
/* SA080585 — TAM KADR (kəsim edilməyib, yalnız kiçildilib).
Əvvəlki kadrda (SA080603) adamın gövdəsi MƏNBƏ FOTODA sol
kənarda kəsilirdi; nə qədər "tam ekran" edilsə də olmayan
hissə görünə bilməzdi. Bu kadrda isə adam bütövdür. */
background-image:url("/assets/img/hero-m2.jpg");
background-image:image-set(
url("/assets/img/hero-m2.webp") type("image/webp"),
url("/assets/img/hero-m2.jpg") type("image/jpeg"));
background-size:cover;
background-position:center;
background-repeat:no-repeat;
transform:none;
animation:none;
}
/* Şəkil artıq mətnlə örtülmür — qaralma və effektlər lazımsızdır */
.hero-ov{display:none}
#heroCanvas{display:none}
.anno-svg{display:none}
/* H1 əsl başlığa çevrilir (yalnız mobildə) */
.hero-seo-h1{
position:relative;
inset:auto;
left:auto;
top:auto;
transform:none;
max-width:none;
margin:22px 0 0;
padding:0 20px;
background:none;
border:0;
border-radius:0;
backdrop-filter:none;
-webkit-backdrop-filter:none;
text-align:left;
font-size:inherit;
color:#fff;
}
.hero-seo-h1 .h1a{
display:block;
font-size:clamp(26px,7.2vw,32px);
font-weight:600;
letter-spacing:-.022em;
line-height:1.1;
}
/* Uzun SEO hissəsi alt sətir kimi — tire gizlədilir */
.hero-seo-h1 .h1b{
display:block;
margin-top:8px;
font-size:14px;
font-weight:400;
letter-spacing:0;
line-height:1.45;
color:rgba(255,255,255,.74);
}
/* Mətn bloku: şüşə panel yox, adi axın */
.hero .hero-text.hero-text-mobile,
.hero.hero-badges-incomplete .hero-text.hero-text-mobile{
position:relative;
inset:auto;
left:auto;right:auto;top:auto;bottom:auto;
display:block;
margin:0;
padding:20px 20px 4px;
text-align:left;
background:none;
border:0;
border-radius:0;
box-shadow:none;
backdrop-filter:none;
-webkit-backdrop-filter:none;
opacity:1;
transform:none;
}
.hero .hero-text.hero-text-mobile .hero-eyebrow{margin-bottom:16px}
/* Statistika da axına keçir — mütləq yerləşmə şəklin üstünə düşərdi */
.hero-stats{
position:relative;
bottom:auto;left:auto;right:auto;
background:none;
padding:6px 20px 26px;
opacity:1;
transform:none;
}
.hst-inner{max-width:none}
.hst-l{font-size:11px;letter-spacing:.02em;white-space:nowrap}
}
/* Desktopda başlıq bir sətirdir və tire iki hissəni birləşdirir.
Mobildə isə hissələr ayrı sətirlərdədir — orada tire mənasızdır
və sətirin əvvəlində asılı qalır. Ona görə yalnız mobildə gizlədilir.
Mətn məzmunu dəyişmir: span display:none-dur, HTML-də qalır. */
@media(max-width:640px){
.hero-seo-h1 .h1dash{display:none}
}
/* ── MOBİL HERO — ŞƏKLİN ALTI AÇIQ FON ───────────────────────
YALNIZ ≤640px. PC toxunulmur.
Problem: şəklin altındakı sahəni tünd (#06120f) qoymuşdum.
Nəticədə səhifə belə oxunurdu: foto → sərt xətt → qara ada →
yenidən açıq "Tərəfdaşlarımız" bölməsi. Yarımçıq görünürdü.
Səbəbi ölçdüm: fotonun aşağı kənarının orta rəngi #86796A-dır
(asfalt, isti boz) — qara deyil. Ona görə qaraya keçid sərt
kontrast yaradırdı.
Həll: şəklin altındakı sahə saytın öz açıq fonudur (--c-surface,
#f5f5f7) — dərhal aşağıdakı tərəfdaşlar lenti ilə EYNİ rəng.
Beləliklə tünd ada yox olur və iki bölmə arasında sərhəd görünmür.
Komponentlər buna uyğunlaşdırılır: mobil düymələr və statistika
kartı ağ şüşə (translucent) üslubundadır — onlar fotonun üstündə
dayanmaq üçün nəzərdə tutulub və açıq fonda görünməz olurdu.
Burada onlara bərk fon və sərhəd verilir. */
@media(max-width:640px){
.hero{background:var(--c-surface)}
/* Başlıq artıq açıq fondadır — mətn tünd olmalıdır */
.hero-seo-h1{color:var(--c-text)}
.hero-seo-h1 .h1b{color:var(--c-muted)}
/* Etiket: şüşə deyil, bərk açıq fon */
.hero .hero-text.hero-text-mobile .hero-eyebrow{
background:var(--c-brand-lighter);
border:1px solid var(--c-brand-t2);
color:var(--c-brand-d);
box-shadow:none;
backdrop-filter:none;
-webkit-backdrop-filter:none;
}
.hero .hero-text.hero-text-mobile .hero-pulse{background:var(--c-brand)}
/* Ghost düymələr: ağ şüşə → bərk ağ + sərhəd */
.hero .hero-text.hero-text-mobile .hcta-ghost{
background:#fff;
border:1px solid var(--c-border);
color:var(--c-text);
box-shadow:0 1px 2px rgba(20,40,35,.06);
backdrop-filter:none;
-webkit-backdrop-filter:none;
}
.hero .hero-text.hero-text-mobile .hcta-ghost .hcta-icon{
background:var(--c-brand-lighter);
}
.hero .hero-text.hero-text-mobile .hcta-ghost .hcta-icon svg{
color:var(--c-brand-d);stroke:var(--c-brand-d);
}
/* Statistika kartı: şüşə → bərk ağ */
.hero .hero-stats{background:none;padding:8px 20px 30px}
.hero .hero-stats .hst-inner{
background:#fff;
border:1px solid var(--c-border);
box-shadow:0 1px 2px rgba(20,40,35,.06);
backdrop-filter:none;
-webkit-backdrop-filter:none;
}
.hero .hero-stats .hst-sep{background:var(--c-border)}
}
/* ── FOOTER: GÖRÜNMƏYƏN MƏTN DÜZƏLİŞİ ────────────────────────
`.footer-bottom` özünə açıq rəng (rgba(255,255,255,.28)) verir, lakin
içindəki qlobal `p{color:var(--c-text)}` qaydasını alır. Element
üzərindəki qayda mirasdan güclüdür, ona görə mətn --c-text (#1a2620)
rənginə düşürdü — footer fonu isə MƏHZ həmin rəngdir.
Nəticə: kontrast nisbəti 1.0, yəni mətn tamamilə görünmürdü.
Ölçülüb təsdiqlənib. Həm mobildə, həm desktopda mövcud idi.
.28 opaqlıq WCAG üçün onsuz da zəifdir (kiçik mətn 4.5:1 tələb edir),
ona görə rəng bir az gücləndirilir. */
.footer-bottom p{color:rgba(255,255,255,.55);margin:0}
/* ── KONTRAST DÜZƏLİŞİ ───────────────────────────────────────
`.pb-label` 11px böyük hərfli mətndir — WCAG AA üçün kiçik mətn
sayılır və 4.5:1 tələb edir. Ölçmə 4.49 verirdi, yəni bir zərrə
aşağı. Bir pillə tünd rəng haddi keçir. */
.pb-label{color:#4e6560}
/* ── HERO KARUSELİ ───────────────────────────────────────────
Desktopda TAMAMİLƏ gizlidir — orada .hero-bg + annotasiya kartları
tərtibatı olduğu kimi qalır. Karusel yalnız ≤640px-də açılır.
KEÇİD ÜSULU: slaydlar yan-yana SÜRÜŞMÜR, üst-üstə durur və
yumşaq şəkildə bir-birinə keçir (crossfade). Sürüşmə jesti də
yoxdur — nə lazımdır, nə də şaquli sürüşdürmə ilə toqquşur.
Aktiv şəkil eyni zamanda çox yavaş yaxınlaşır (Ken Burns):
kadr "canlı" görünür, amma hərəkət gözə çarpmır. */
.hcar{display:none}
@media(max-width:640px){
.hero-bg{display:none}
.hcar{
display:block;
position:relative;
width:100%;
/* Şəkil səhifə açılanda ekranı TAM örtür.
`svh` (small viewport height) seçilib, `vh` yox: mobil brauzerdə
ünvan paneli görünəndə `100vh` ekrandan böyük olur və şəkil
aşağıdan kəsilir; `svh` isə panel AÇIQ ikən qalan hündürlükdür,
yəni açılış anında dəqiq oturur və sürüşdürəndə sıçramır.
Köhnə brauzerlər üçün əvvəlcə `vh` verilir. */
height:100vh;
height:100svh;
overflow:hidden;
background:#e6eae9;
}
.hcar-track{position:absolute;inset:0}
/* Kadr nisbəti (1170×2532 ≈ 0.462) telefon ekranına yaxındır,
ona görə `cover` praktiki olaraq kəsmir: 390×844-də tam oturur,
360×800-də cəmi ~10px yandan gedir. */
.hcar-slide{
position:absolute;inset:0;
opacity:0;
transition:opacity 1.1s cubic-bezier(.4,0,.2,1);
will-change:opacity;
pointer-events:none;
}
.hcar-slide.is-on{opacity:1}
.hcar-slide img{
width:100%;height:100%;
object-fit:cover;
display:block;
/* YAXINLAŞMA (Ken Burns) QƏSDƏN YOXDUR.
Əvvəl aktiv kadr yavaş-yavaş böyüyürdü; nəzəri olaraq "canlı"
təsir verməli idi, praktikada isə şəkil sürünürmüş kimi
görünürdü və keyfiyyətsiz təsir bağışlayırdı. Kadr sabit
durur — daha sakit və səliqəli. */
}
/* Aşağıda yüngül qaralma: göstərici oxunsun, şəkil boğulmasın */
.hcar::after{
content:'';position:absolute;left:0;right:0;bottom:0;height:92px;
background:linear-gradient(to top,rgba(0,0,0,.34),rgba(0,0,0,.12) 45%,transparent);
pointer-events:none;z-index:1;
}
/* ── Göstərici ────────────────────────────────────────────
Dolma `transition` ilə YOX, `animation` ilə edilir.
Səbəb: transition-la, slayd bitməmiş başqa nöqtəyə basanda
yarımçıq dolmuş zolaq öz dəyərindən davam edir və ya geri
sürünür — qəribə görünürdü. Animasiya isə sinif silinən kimi
dayanır və yenidən əlavə ediləndə HƏMİŞƏ sıfırdan başlayır. */
.hcar-dots{
position:absolute;left:0;right:0;z-index:2;
bottom:calc(20px + env(safe-area-inset-bottom, 0px));
display:flex;justify-content:center;align-items:center;gap:7px;
}
.hcar-dot{
width:44px;height:40px;padding:0;border:0;background:none;
display:grid;place-items:center;cursor:pointer;
-webkit-tap-highlight-color:transparent;
}
.hcar-dot span{
display:block;position:relative;overflow:hidden;
width:34px;height:3px;border-radius:3px;
background:rgba(255,255,255,.34);
box-shadow:0 1px 3px rgba(0,0,0,.35);
transition:width .34s var(--ease);
}
.hcar-dot span::after{
content:'';position:absolute;left:0;top:0;bottom:0;
width:0;border-radius:3px;
/* Şirkət rəngi — ağ zolaqda firuzəyi dolma. Kənarına yüngül
işıq verilir ki, açıq fotoların üstündə də seçilsin. */
background:var(--c-brand);
box-shadow:0 0 6px rgba(45,157,136,.55);
}
.hcar-dot.is-past span::after{width:100%}
.hcar-dot.is-on span{width:46px;background:rgba(255,255,255,.5)}
.hcar-dot.is-on span::after{animation:hcarFill 6400ms linear forwards}
.hcar-dot:focus-visible{outline:2px solid var(--c-brand);outline-offset:-4px;border-radius:10px}
}
@keyframes hcarFill{ from{width:0} to{width:100%} }
@media(max-width:640px){
/* Hərəkət azaldılıbsa dolma animasiyası olmur — zolaq dərhal dolu */
@media(prefers-reduced-motion:reduce){
.hcar-dot.is-on span::after{animation:none;width:100%}
}
}
/* Hərəkəti azaltmaq istəyən istifadəçi üçün: yaxınlaşma və dolma yoxdur,
yalnız qısa keçid qalır. Avtomatik dəyişmə JS tərəfindən söndürülür. */
@media(prefers-reduced-motion:reduce){
.hcar-slide{transition:opacity .3s linear}
.hcar-dot.is-on span::after{transition:none;width:100%}
}
/* ══════════════════════════════════════════════════════════════
STANSİYA XƏRİTƏSİ
Səhifənin yeganə əsas elementi. Mətn siyahısı götürülüb —
xəritə həm göstərir, həm filtrləyir, həm axtarır.
══════════════════════════════════════════════════════════════ */
.stnmap-section{padding:0 0 clamp(40px,6vw,72px)}
.stnmap-shell{
position:relative;
width:min(1240px, calc(100% - 2 * clamp(16px,4vw,40px)));
margin:0 auto;
/* Xəritə ekranın böyük hissəsini tutur — məqsəd budur.
`svh` mobil brauzerin ünvan paneli ilə hesablaşır. */
height:clamp(460px, calc(100svh - 232px), 760px);
border-radius:var(--r);
overflow:hidden;
border:1px solid var(--c-border);
box-shadow:var(--sh-md);
background:var(--c-surface);
isolation:isolate;
}
@media(max-width:640px){
.stnmap-shell{
width:100%;
margin:0;
border-radius:0;
border-left:0;border-right:0;
height:calc(100svh - var(--nav-h) - 8px);
}
.stnmap-section{padding-bottom:32px}
}
.stnmap-canvas{position:absolute;inset:0;z-index:0}
/* ── Üst panel ────────────────────────────────────────────── */
.stnmap-top{
position:absolute;z-index:400;
top:14px;left:14px;right:14px;
display:flex;flex-direction:column;gap:10px;
pointer-events:none; /* boşluq xəritəyə keçir */
}
.stnmap-top > *{pointer-events:auto}
.stnmap-search{
display:flex;align-items:center;gap:8px;
max-width:440px;width:100%;
padding:0 6px 0 14px;
height:48px;
border-radius:999px;
background:rgba(255,255,255,.94);
border:1px solid rgba(20,45,38,.10);
box-shadow:0 6px 24px rgba(12,32,26,.14), 0 1px 0 rgba(255,255,255,.9) inset;
backdrop-filter:blur(20px) saturate(170%);
-webkit-backdrop-filter:blur(20px) saturate(170%);
}
.stnmap-search-ico{color:var(--c-muted);flex-shrink:0}
.stnmap-search input{
flex:1;min-width:0;border:0;background:none;outline:none;
font-family:inherit;font-size:15px;color:var(--c-text);
}
.stnmap-search input::placeholder{color:var(--c-text-3)}
.stnmap-go{
flex-shrink:0;width:36px;height:36px;border:0;border-radius:50%;
background:var(--c-brand);color:#fff;
display:grid;place-items:center;cursor:pointer;
transition:background .2s var(--ease),transform .2s var(--ease);
}
.stnmap-go:hover{background:var(--c-brand-d)}
.stnmap-go:active{transform:scale(.94)}
.stnmap-spin{
width:15px;height:15px;flex-shrink:0;border-radius:50%;
border:2px solid var(--c-brand-t2);border-top-color:var(--c-brand);
animation:stnSpin .7s linear infinite;
}
@keyframes stnSpin{to{transform:rotate(360deg)}}
/* ── Filtr çipləri ────────────────────────────────────────── */
.stnmap-filters{
display:flex;align-items:center;gap:7px;
overflow-x:auto;
padding:2px 2px 6px;
scrollbar-width:none;
-webkit-overflow-scrolling:touch;
/* Kənarda solma: daha çox filtr olduğunu bildirir */
mask-image:linear-gradient(to right,transparent 0,#000 10px,#000 calc(100% - 22px),transparent 100%);
}
.stnmap-filters::-webkit-scrollbar{display:none}
.stnf{
flex-shrink:0;
height:34px;padding:0 14px;
border-radius:999px;
border:1px solid rgba(20,45,38,.10);
background:rgba(255,255,255,.92);
backdrop-filter:blur(16px) saturate(160%);
-webkit-backdrop-filter:blur(16px) saturate(160%);
box-shadow:0 3px 12px rgba(12,32,26,.10);
font-family:inherit;font-size:13px;font-weight:500;
color:var(--c-text-2);cursor:pointer;white-space:nowrap;
transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.stnf:hover{border-color:var(--c-border-2)}
.stnf.is-on{
background:var(--c-brand);color:#fff;border-color:var(--c-brand);
box-shadow:0 4px 14px rgba(45,157,136,.34);
}
.stnf-sep{
flex-shrink:0;width:1px;height:18px;
background:rgba(20,45,38,.16);margin:0 3px;
}
/* ── Sağ-aşağı idarəetmə ──────────────────────────────────── */
.stnmap-ctrl{
position:absolute;z-index:400;
right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));
display:flex;flex-direction:column;gap:9px;align-items:center;
}
.stnc{
width:44px;height:44px;padding:0;
border:1px solid rgba(20,45,38,.10);
border-radius:14px;
background:rgba(255,255,255,.94);
backdrop-filter:blur(20px) saturate(170%);
-webkit-backdrop-filter:blur(20px) saturate(170%);
box-shadow:0 6px 20px rgba(12,32,26,.16), 0 1px 0 rgba(255,255,255,.9) inset;
color:var(--c-text-2);
display:grid;place-items:center;cursor:pointer;
transition:background .18s var(--ease),color .18s var(--ease),transform .18s var(--ease);
}
.stnc svg{width:19px;height:19px}
.stnc:hover{background:#fff;color:var(--c-brand-d)}
.stnc:active{transform:scale(.93)}
.stnc.is-on{background:var(--c-brand);color:#fff;border-color:var(--c-brand)}
.stnc.is-busy svg{animation:stnSpin .9s linear infinite}
/* Yaxınlaşdır/uzaqlaşdır bitişik qrupdur — bir düymə kimi oxunur */
.stnc-zoom{display:flex;flex-direction:column;border-radius:14px;overflow:hidden;box-shadow:0 6px 20px rgba(12,32,26,.16)}
.stnc-zoom .stnc{border-radius:0;box-shadow:none;width:44px;height:42px}
.stnc-zoom .stnc:first-child{border-bottom:0}
/* ── Sayğac (sol-aşağı) ───────────────────────────────────── */
.stnmap-count{
position:absolute;z-index:400;
left:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));
height:34px;padding:0 14px;
display:inline-flex;align-items:center;gap:7px;
border-radius:999px;
background:rgba(255,255,255,.94);
border:1px solid rgba(20,45,38,.10);
backdrop-filter:blur(20px) saturate(170%);
-webkit-backdrop-filter:blur(20px) saturate(170%);
box-shadow:0 4px 16px rgba(12,32,26,.13);
font-size:12.5px;font-weight:600;color:var(--c-text-2);
white-space:nowrap;
}
.stnmap-count b{color:var(--c-brand-d);font-weight:700}
/* ── Bildiriş ─────────────────────────────────────────────── */
.stnmap-toast{
position:absolute;z-index:401;
left:14px;right:14px;bottom:70px;
margin:0 auto;max-width:420px;
padding:11px 15px;border-radius:14px;
background:rgba(14,32,27,.93);color:#fff;
font-size:13.5px;line-height:1.5;
box-shadow:0 10px 30px rgba(0,0,0,.3);
backdrop-filter:blur(14px);
}
.stnmap-toast.is-err{background:rgba(120,28,28,.94)}
/* ── Nişanlar ─────────────────────────────────────────────── */
/* Google-un standart damcısı əvəzinə öz nişanımız: yuvarlaq
disk + şimşək, gücə görə ölçü və rəng. Eyni ünvandakı bir neçə
cihaz TƏK nişanda birləşir, sayı balaca nişanla göstərilir —
67 cihaz 39 nöqtəyə düşür, üst-üstə yığılma aradan qalxır. */
.stn-pin{background:none;border:0}
.stn-pin-in{
position:relative;
width:100%;height:100%;
border-radius:50%;
display:grid;place-items:center;
color:#fff;
box-shadow:0 4px 14px rgba(10,30,25,.35), 0 0 0 2.5px rgba(255,255,255,.95);
transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.stn-pin-dc .stn-pin-in{background:linear-gradient(150deg,#2fae96,#17796c)}
.stn-pin-ac .stn-pin-in{background:linear-gradient(150deg,#7cc9bb,#3f9d8c)}
.stn-pin-in svg{width:52%;height:52%}
.stn-pin:hover .stn-pin-in,
.stn-pin.is-active .stn-pin-in{
transform:scale(1.14);
box-shadow:0 8px 22px rgba(10,30,25,.42), 0 0 0 3px #fff;
}
.stn-pin-n{
position:absolute;top:-4px;right:-5px;
min-width:17px;height:17px;padding:0 4px;
border-radius:999px;
background:#0f2a24;color:#fff;
font-size:10.5px;font-weight:700;line-height:17px;text-align:center;
box-shadow:0 0 0 2px #fff;
}
/* İstifadəçinin öz mövqeyi */
.stn-me{background:none;border:0}
.stn-me-dot{
width:16px;height:16px;border-radius:50%;
background:#1668d6;box-shadow:0 0 0 3px #fff,0 2px 8px rgba(0,0,0,.3);
}
.stn-me-ring{
position:absolute;inset:-9px;border-radius:50%;
background:rgba(22,104,214,.12);
animation:none;
}
@keyframes stnPulse{0%{transform:scale(.6);opacity:.8}100%{transform:scale(1.5);opacity:0}}
/* ── Popup (brend üslubunda) ──────────────────────────────── */
.leaflet-popup.stn-pop .leaflet-popup-content-wrapper{
border-radius:16px;padding:0;overflow:hidden;
box-shadow:0 14px 40px rgba(10,28,23,.24);
border:1px solid var(--c-border);
}
.leaflet-popup.stn-pop .leaflet-popup-content{margin:0;width:262px !important;font-family:inherit}
.leaflet-popup.stn-pop .leaflet-popup-tip{box-shadow:none}
.leaflet-popup.stn-pop a.leaflet-popup-close-button{color:var(--c-text-3);padding:9px 9px 0 0}
.stnpop-h{padding:14px 15px 10px;background:var(--c-surface)}
.stnpop-name{font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--c-text);line-height:1.25}
.stnpop-addr{font-size:12.5px;color:var(--c-muted);margin-top:4px;line-height:1.45}
.stnpop-body{padding:12px 15px 14px}
.stnpop-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.stnpop-chip{
font-size:11px;font-weight:600;letter-spacing:.02em;
padding:4px 9px;border-radius:999px;
background:var(--c-brand-lighter);color:var(--c-brand-dd);
}
.stnpop-chip.is-pw{background:#0f2a24;color:#fff}
.stnpop-meta{font-size:12.5px;color:var(--c-muted);margin-bottom:12px}
.stnpop-meta b{color:var(--c-text-2);font-weight:600}
.stnpop-btn{
display:flex;align-items:center;justify-content:center;gap:7px;
width:100%;height:40px;border-radius:11px;
background:var(--c-brand);color:#fff;
font-size:13.5px;font-weight:600;text-decoration:none;
transition:background .18s var(--ease);
}
.stnpop-btn:hover{background:var(--c-brand-d)}
/* Leaflet-in öz idarəetməsi və attribution-u sadələşdirilir */
.stnmap-shell .leaflet-control-zoom{display:none}
.stnmap-shell .leaflet-control-attribution{
background:rgba(255,255,255,.82);
font-size:10px;padding:2px 7px;border-radius:8px 0 0 0;
color:var(--c-text-3);
}
.stnmap-shell .leaflet-control-attribution a{color:var(--c-muted)}
/* Tünd rejim */
.stnmap-shell.is-dark{background:#0d1b18}
.stnmap-shell.is-dark .stnmap-search,
.stnmap-shell.is-dark .stnf,
.stnmap-shell.is-dark .stnc,
.stnmap-shell.is-dark .stnmap-count{
background:rgba(18,38,33,.9);
border-color:rgba(255,255,255,.13);
color:#e6f1ee;
box-shadow:0 6px 20px rgba(0,0,0,.36);
}
.stnmap-shell.is-dark .stnmap-search input{color:#e6f1ee}
.stnmap-shell.is-dark .stnmap-search input::placeholder{color:rgba(230,241,238,.45)}
.stnmap-shell.is-dark .stnmap-search-ico{color:rgba(230,241,238,.6)}
.stnmap-shell.is-dark .stnf.is-on,
.stnmap-shell.is-dark .stnc.is-on{background:var(--c-brand);color:#fff;border-color:var(--c-brand)}
.stnmap-shell.is-dark .stnmap-count b{color:#6fd6bd}
.stnmap-shell.is-dark .stnf-sep{background:rgba(255,255,255,.18)}
@media(max-width:640px){
.stnmap-top{top:10px;left:10px;right:10px;gap:8px}
.stnmap-search{height:46px;max-width:none}
.stnmap-ctrl{right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px))}
.stnmap-count{left:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));font-size:12px;height:32px;padding:0 12px}
.stnmap-toast{bottom:66px;left:10px;right:10px}
.leaflet-popup.stn-pop .leaflet-popup-content{width:236px !important}
}
/* Tünd rejim: ayrıca tünd tayl mənbəyi yoxdur (CARTO açar tələb edir),
ona görə eyni tayllar CSS filtri ilə tündləşdirilir. Nəticə tam eyni
deyil, amma açar və ödəniş tələb etmir. */
@media(min-width:1px){
.stnmap-shell.is-dark .leaflet-tile-pane{
filter:invert(1) hue-rotate(185deg) brightness(.92) contrast(.92) saturate(.55);
}
}
/* ── STANSİYALAR — YIĞCAM HERO (yalnız mobil) ────────────────
Səhifənin məqsədi xəritədir. Hero mobildə ekranın yarıdan
çoxunu tuturdu və xəritə ancaq sürüşdürəndən sonra görünürdü.
Başlıq SEO üçün qalır, sadəcə yığcamlaşır: statistika üç
sətirdən bir sətrə düşür. */
@media(max-width:640px){
.stations-page .page-hero{padding-top:calc(var(--nav-h) + 18px);padding-bottom:18px}
.stations-page .stn-hero-heading h1{font-size:clamp(24px,6.4vw,30px);line-height:1.15}
.stations-page .stn-hero-stats{gap:6px;margin-top:14px;flex-wrap:nowrap;justify-content:center}
.stations-page .stn-hero-stat{
padding:6px 10px;gap:5px;border-radius:999px;flex:0 1 auto;min-width:0;
}
.stations-page .stn-hero-stat-icon{width:18px;height:18px;flex-shrink:0}
.stations-page .stn-hero-stat-icon svg{width:11px;height:11px}
.stations-page .stn-hero-stat-num{font-size:13.5px}
.stations-page .stn-hero-stat-label{font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Xəritə qalan hündürlüyün hamısını alır */
.stations-page .stnmap-shell{height:calc(100svh - 196px)}
}
/* ── STANSİYALAR: SƏHİFƏ YALNIZ XƏRİTƏDİR ────────────────────
Başlıq, statistika və SSS götürüldü. Xəritə naviqasiyanın
altındakı bütün hündürlüyü alır. */
.stations-page .stnmap-section{padding:0}
.stations-page .stnmap-shell{
width:100%;border-radius:0;border-left:0;border-right:0;border-top:0;
/* Bu səhifədə başlıq `fixed` yox, `sticky` olur (aşağıdakı qaydaya
bax) — yəni axında yer tutur və xəritə onun ALTINDAN başlayır.
`fixed` ikən sürüşdürəndə xəritənin üst paneli başlığın altına
girirdi; sticky ilə belə üst-üstə düşmə mümkün deyil. */
margin:0;
height:calc(100svh - var(--nav-h));
}
@media(min-width:641px){
.stations-page .stnmap-shell{height:calc(100vh - var(--nav-h));height:calc(100svh - var(--nav-h))}
}
/* Ekran oxuyucuları üçün gizli başlıq */
.sr-only{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* ── STANSİYALAR: BAŞLIQ SABİT DEYİL, YAPIŞQANDIR ────────────
`position:fixed` başlıq səhifənin üstündə üzür və heç bir yer
tutmur — ona görə sürüşdürəndə xəritənin axtarış paneli onun
altına girirdi. `sticky` isə axında yer tutur: xəritə həmişə
başlığın altındadır, üst-üstə düşmə fiziki olaraq mümkün deyil.
Başlıq yenə də sürüşdürərkən yuxarıda qalır. */
.stations-page .site-header{position:sticky;top:0}
/* ── STANSİYA KARTI (bottom sheet) ───────────────────────────
Leaflet popup-u kiçikdir və barmaqla işləməyə uyğun deyil.
Bu kart aşağıdan qalxır: barmağa yaxındır, daha çox məlumat
tutur və marşrut düymələri üçün yer verir. */
.stn-sheet{
position:absolute;z-index:500;
left:0;right:0;bottom:0;
background:#fff;
border-radius:22px 22px 0 0;
box-shadow:0 -12px 44px rgba(10,28,23,.24);
transform:translateY(100%);
transition:transform .34s cubic-bezier(.32,.72,0,1);
padding-bottom:env(safe-area-inset-bottom,0px);
max-height:76%;
display:flex;flex-direction:column;
}
.stn-sheet.is-open{transform:translateY(0)}
.stn-sheet[hidden]{display:flex !important} /* animasiya üçün DOM-da qalır */
.stn-sheet-grip{
flex-shrink:0;width:100%;height:26px;border:0;background:none;
display:grid;place-items:center;cursor:pointer;
}
.stn-sheet-grip::before{
content:'';width:38px;height:4px;border-radius:99px;background:var(--c-surface-3);
}
.stn-sheet-in{padding:2px 18px 18px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.stn-sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.stn-sheet-name{font-size:17px;font-weight:600;letter-spacing:-.015em;color:var(--c-text);line-height:1.22}
.stn-sheet-addr{font-size:13px;color:var(--c-muted);margin-top:4px;line-height:1.45}
.stn-sheet-kw{
flex-shrink:0;padding:6px 11px;border-radius:10px;
background:#0f2a24;color:#fff;font-size:13px;font-weight:700;letter-spacing:-.01em;
}
.stn-sheet-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.stn-sheet-chips span{
font-size:11.5px;font-weight:600;padding:5px 10px;border-radius:999px;
background:var(--c-brand-lighter);color:var(--c-brand-dd);
}
/* Məntəqədə bir neçə cihaz varsa hər biri ayrıca sətirdir */
.stn-sheet-rows{margin-top:12px;display:flex;flex-direction:column;gap:1px;border-radius:12px;overflow:hidden}
.stn-row{
display:flex;align-items:center;gap:10px;
padding:10px 12px;background:var(--c-surface);
font-size:13px;color:var(--c-text-2);
}
.stn-row-t{
flex-shrink:0;font-size:10.5px;font-weight:700;letter-spacing:.03em;
padding:3px 7px;border-radius:6px;
}
.stn-row-dc{background:#0f2a24;color:#fff}
.stn-row-ac{background:var(--c-brand-t2);color:var(--c-brand-dd)}
.stn-row-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stn-row-p{flex-shrink:0;font-weight:600;color:var(--c-text)}
/* Marşrut nəticəsi */
/* `display:flex` sinif qaydasıdır və brauzerin öz `[hidden]` qaydasını
üstələyir — nəticədə panel boş halda da görünürdü. Aşağıdakı sətir
bunu bağlayır. */
.stn-sheet-route[hidden]{display:none}
.stn-sheet-route{
display:flex;align-items:center;gap:14px;
margin-top:14px;padding:12px 14px;
border-radius:14px;background:var(--c-brand-lighter);
}
.stn-rt-num{display:flex;align-items:baseline;gap:4px}
.stn-rt-num b{font-size:20px;font-weight:700;color:var(--c-brand-dd);letter-spacing:-.02em}
.stn-rt-num span{font-size:12px;color:var(--c-brand-d);font-weight:600}
.stn-rt-sep{width:1px;height:22px;background:var(--c-brand-t2)}
.stn-rt-note{margin-left:auto;font-size:11.5px;color:var(--c-brand-d)}
.stn-sheet-actions{display:flex;gap:9px;margin-top:15px}
.stn-act{
flex:1;height:48px;border:0;border-radius:14px;
display:inline-flex;align-items:center;justify-content:center;gap:8px;
font-family:inherit;font-size:14px;font-weight:600;
cursor:pointer;text-decoration:none;
transition:background .18s var(--ease),transform .16s var(--ease);
}
.stn-act svg{width:17px;height:17px;flex-shrink:0}
.stn-act:active{transform:scale(.975)}
.stn-act-main{background:var(--c-brand);color:#fff}
.stn-act-main:hover{background:var(--c-brand-d)}
.stn-act-main[disabled]{opacity:.6;cursor:default}
.stn-act-waze{background:var(--c-surface-2);color:var(--c-text)}
.stn-act-waze:hover{background:var(--c-surface-3)}
/* Marşrut xətti xəritədə */
.stn-route-line{filter:drop-shadow(0 2px 6px rgba(20,90,78,.35))}
@media(min-width:641px){
/* Geniş ekranda kart sol-aşağıda üzən panel kimi görünür */
.stn-sheet{
left:14px;right:auto;bottom:14px;
width:352px;border-radius:20px;max-height:calc(100% - 130px);
box-shadow:0 18px 50px rgba(10,28,23,.26);
transform:translateY(calc(100% + 22px));
}
.stn-sheet.is-open{transform:translateY(0)}
/* Kart açılanda sayğac onun altında qalmasın */
.stn-sheet.is-open ~ .stnmap-count{opacity:0;pointer-events:none}
}
.stnmap-count{transition:opacity .2s var(--ease)}
.stnmap-shell.is-dark .stn-sheet{background:#12261f;color:#e6f1ee}
.stnmap-shell.is-dark .stn-sheet-name{color:#f2fbf8}
.stnmap-shell.is-dark .stn-sheet-addr{color:rgba(230,241,238,.62)}
.stnmap-shell.is-dark .stn-row{background:rgba(255,255,255,.06);color:#dfeeea}
.stnmap-shell.is-dark .stn-row-p{color:#fff}
.stnmap-shell.is-dark .stn-act-waze{background:rgba(255,255,255,.1);color:#e6f1ee}
.stnmap-shell.is-dark .stn-sheet-grip::before{background:rgba(255,255,255,.24)}
/* ── MOBİL: 3 DÜYMƏ ŞƏKLİN İÇİNDƏ, YAN-YANA ──────────────────
YALNIZ ≤640px. Desktop toxunulmur.
Düymələr karuselin içinə, ta aşağıya keçir. Beləliklə istifadəçi
ilk ekranda həm şəkli, həm də üç əsas keçidi görür — aşağı
sürüşdürməyə ehtiyac qalmır.
Mövqe `top: calc(100svh - …)` ilə verilir, `bottom` ilə yox:
.hero konteyneri karuseldən uzundur (altında başlıq, etiket və
statistika var), ona görə `bottom` karuselin altını yox, bütün
bölmənin altını göstərərdi. */
@media(max-width:640px){
.hero .hero-text.hero-text-mobile .hero-ctas{
position:absolute;
left:14px;right:14px;
top:calc(100svh - 104px);
z-index:6;
display:flex;flex-direction:row;align-items:stretch;gap:8px;
margin:0;
}
.hero .hero-text.hero-text-mobile .hcta-primary,
.hero .hero-text.hero-text-mobile .hcta-ghost{
flex:1 1 0;min-width:0;
/* İkon üstdə, mətn altda — üç düymə dar ekranda belə oturur */
flex-direction:column;justify-content:center;gap:5px;
height:64px;padding:0 6px;
border-radius:16px;
font-size:11.5px;font-weight:600;letter-spacing:-.005em;
text-align:center;line-height:1.15;
}
.hero .hero-text.hero-text-mobile .hcta-icon{width:22px;height:22px;flex-shrink:0}
.hero .hero-text.hero-text-mobile .hcta-icon svg{width:14px;height:14px}
/* Uzun etiket gizlənir, qısası görünür */
.hero .hero-ctas .lbl-f{display:none}
.hero .hero-ctas .lbl-s{display:inline}
/* Göstərici zolaqları düymələrin üstünə qalxır */
/* Zolaqlar düymə sətrinin ÜSTÜNDƏ qalmalıdır: düymələr 64px + 22px
aşağı boşluq = 86px, üstünə 26px ara. Ölçülüb yoxlanılıb. */
.hcar-dots{bottom:calc(112px + env(safe-area-inset-bottom,0px))}
/* Aşağıdakı qaralma daha hündür — düymələr də oxunaqlı fonda dursun */
.hcar::after{height:186px}
/* Mətn bloku artıq düymələri saxlamır, ona görə yuxarı boşluq azalır.
`position:static` VACİBDİR: blok `relative` qalsaydı, içindəki
mütləq yerləşdirilmiş düymə sətri məhz ONDAN hesablanardı və
karuselin xeyli aşağısına düşərdi (ölçüldü: y=1685). Static olanda
ən yaxın yerləşdirilmiş valideyn `.hero` olur — karuselin özü. */
.hero .hero-text.hero-text-mobile{padding-top:18px;position:static}
}
/* ── MƏHSUL KARTI: KONNEKTORLAR VƏ FİLTR ─────────────────────
Konnektor adı tək başına («GB/T», «CCS2») alıcıya heç nə demir.
Yanında bazar adı yazılanda seçim dərhal aydın olur. */
.pc-conns{
display:flex;flex-wrap:wrap;gap:6px;
margin:12px 0 0;
}
.pc-conn{
display:inline-flex;align-items:baseline;gap:6px;
padding:5px 10px;border-radius:999px;
background:var(--c-surface);
border:1px solid var(--c-border);
}
.pc-conn b{font-size:12px;font-weight:600;color:var(--c-text);letter-spacing:-.01em}
.pc-conn i{font-size:11px;font-style:normal;color:var(--c-muted);letter-spacing:.01em}
/* Spec cədvəli artıq iki xanadır (Güc, Növ) — konnektorlar aşağıdadır */
.pc-specs{grid-template-columns:repeat(2,1fr)}
/* Filtr həbində bazar adı ikinci sətirdə, daha kiçik */
.prod-filter-pill{display:inline-flex;flex-direction:column;align-items:center;line-height:1.15}
.pf-reg{
font-style:normal;font-size:11px;font-weight:500;
opacity:.82;margin-top:1px;letter-spacing:.02em;
}
.prod-filter-pill.active .pf-reg{opacity:.85}
@media(max-width:640px){
.pc-conn{padding:4px 9px}
.pc-conn b{font-size:11.5px}
.pc-conn i{font-size:11px}
/* Filtr sətirləri yan-yana sürüşən lent olur — üç qrup alt-alta
çox yer tuturdu */
.prod-filter-group{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.prod-filter-group::-webkit-scrollbar{display:none}
}
/* ── MƏHSULLAR: KOMPAKT FİLTR ────────────────────────────────
Filtr paneli əvvəl səhifənin başında açıq dururdu və məhsulları
bir ekran aşağı itələyirdi. Ziyarətçi bura MƏHSULA baxmağa gəlir —
ona görə panel bağlıdır, düymə ilə açılır. */
.pr-bar{
display:flex;align-items:center;gap:10px;
margin:0 0 14px;
}
.pr-bar-count{font-size:14px;color:var(--c-muted)}
.pr-bar-count b{color:var(--c-text);font-weight:700}
.pr-filter-btn{
margin-left:auto;
display:inline-flex;align-items:center;gap:8px;
height:40px;padding:0 15px;
border:1px solid var(--c-border);border-radius:999px;
background:#fff;color:var(--c-text);
font-family:inherit;font-size:13.5px;font-weight:600;
cursor:pointer;
transition:border-color .18s var(--ease),background .18s var(--ease);
}
.pr-filter-btn:hover{border-color:var(--c-border-3)}
.pr-filter-btn.has-active{border-color:var(--c-brand);color:var(--c-brand-dd)}
.pr-filter-btn[aria-expanded="true"]{background:var(--c-brand);color:#fff;border-color:var(--c-brand)}
.pr-badge{
font-style:normal;min-width:18px;height:18px;padding:0 5px;
border-radius:999px;background:var(--c-brand);color:#fff;
font-size:11px;font-weight:700;line-height:18px;text-align:center;
}
.pr-filter-btn[aria-expanded="true"] .pr-badge{background:#fff;color:var(--c-brand-dd)}
.pr-clear{font-size:13px;color:var(--c-muted);text-decoration:none;border-bottom:1px solid var(--c-border-2)}
.pr-clear:hover{color:var(--c-text)}
/* Açılma animasiyası: `grid-template-rows` 0fr → 1fr.
`max-height` ilə etsək, panelin əsl hündürlüyünü təxmin etmək
lazım gələrdi və filtr sayı dəyişəndə sıçrayış olardı. */
.pr-filter-wrap{
display:grid;
grid-template-rows:0fr;
transition:grid-template-rows .34s cubic-bezier(.32,.72,0,1),
opacity .26s var(--ease), margin-bottom .34s var(--ease);
opacity:0;margin-bottom:0;
}
.pr-filter-wrap > *{overflow:hidden;min-height:0}
.pr-filter-wrap.is-open{grid-template-rows:1fr;opacity:1;margin-bottom:20px}
@media(prefers-reduced-motion:reduce){
.pr-filter-wrap{transition:none}
}
/* Panel özü daha yığcamdır */
.prod-filter-bar{margin:0}
@media(max-width:640px){
.pr-bar{margin-bottom:12px}
.pr-filter-btn{height:38px;padding:0 13px;font-size:13px}
}
/* ── Tətbiq düyməsi: Apple + Android loqoları ────────────────
Əvvəl ümumi «aşağı ox» yükləmə ikonu vardı — hansı platformalar
üçün olduğunu bildirmirdi. İki loqo dərhal deyir ki, tətbiq həm
iPhone, həm Android üçün mövcuddur. */
.os-pair{display:inline-flex;align-items:center;gap:4px}
.os-pair .os-ic{width:13px;height:13px;flex-shrink:0}
.os-pair-sm .os-ic{width:11px;height:11px}
.hcta-icon.os-pair{width:auto;min-width:34px;padding:0 6px;border-radius:999px}
@media(max-width:640px){
.hero .hero-text.hero-text-mobile .hcta-icon.os-pair{width:auto;min-width:36px;height:22px;padding:0 7px}
.hero .hero-text.hero-text-mobile .os-pair .os-ic{width:12px;height:12px}
}
/* ── MƏHSULLAR: BAŞLIQ ALTINDA BOŞLUQ ────────────────────────
Başlıq `position:fixed`-dir və axında yer tutmur. Hero götürüləndə
onun yaratdığı boşluq da yox oldu və filtr zolağı başlığın altına
düşdü (ölçüldü: top=0). Bu doldurma həmin boşluğu bərpa edir. */
.page-products .stn-section:first-of-type{padding-top:calc(var(--nav-h) + 22px)}
/* Panel bağlı ikən tam yığılsın */
.pr-filter-wrap{overflow:hidden}
/* Panelin bağlı halda TAM yığılması.
grid-template-rows:0fr tək başına 34px qalıq buraxırdı — fr treki
min-content həddinə oturur. max-height onu sıfıra endirir. */
.pr-filter-wrap:not(.is-open){max-height:0}
.pr-filter-wrap{transition:grid-template-rows .34s cubic-bezier(.32,.72,0,1),
max-height .34s cubic-bezier(.32,.72,0,1),
opacity .26s var(--ease), margin-bottom .34s var(--ease)}
.pr-filter-wrap.is-open{max-height:600px}
/* ── STANSİYA KARTI — YENİDƏN ──────────────────────────────── */
.stn-sheet{
border-radius:26px 26px 0 0;
box-shadow:0 -2px 0 rgba(20,60,50,.05), 0 -18px 60px -12px rgba(10,28,23,.28);
}
.stn-sheet-in{padding:2px 20px 20px}
.stn-sheet-grip{height:28px}
.stn-sheet-grip::before{width:42px;height:4px;background:var(--c-surface-3)}
/* Başlıq: ad böyüyür, güc isə qara qutudan çıxıb incə statistikaya çevrilir */
.stn-sheet-head{align-items:flex-start;gap:14px;padding-bottom:14px;border-bottom:1px solid var(--c-border)}
.stn-sheet-name{font-size:19px;font-weight:600;letter-spacing:-.022em;line-height:1.2}
.stn-sheet-addr{font-size:13px;margin-top:5px}
.stn-sheet-kw{
background:none;color:var(--c-brand-dd);
padding:0;border-radius:0;
display:flex;flex-direction:column;align-items:flex-end;
font-size:21px;font-weight:700;letter-spacing:-.03em;line-height:1;
}
.stn-sheet-kw::after{
content:'maksimum güc';
font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
color:var(--c-text-3);margin-top:5px;
}
/* Təkrarlanan konnektor çipləri götürüldü — eyni məlumat aşağıdakı
cihaz siyahısında onsuz da var idi. */
.stn-sheet-chips{display:none}
/* Cihaz siyahısı: boz bloklar əvəzinə ayırıcılı kart */
.stn-sheet-rows{
margin-top:4px;border-radius:0;gap:0;background:none;
}
.stn-row{
background:none;padding:13px 0;
border-bottom:1px solid var(--c-border);
gap:12px;font-size:14px;
}
.stn-row:last-child{border-bottom:0}
/* AC/DC nişanı — kiçik rəngli nöqtə + hərf, qutu deyil */
.stn-row-t{
padding:0;background:none !important;border-radius:0;
display:inline-flex;align-items:center;gap:6px;
font-size:11px;font-weight:700;letter-spacing:.04em;
min-width:38px;
}
.stn-row-t::before{
content:'';width:7px;height:7px;border-radius:50%;flex-shrink:0;
}
.stn-row-dc{color:var(--c-brand-dd)}
.stn-row-dc::before{background:var(--c-brand);box-shadow:0 0 0 3px var(--c-brand-lighter)}
.stn-row-ac{color:var(--c-muted)}
.stn-row-ac::before{background:var(--c-text-3);box-shadow:0 0 0 3px var(--c-surface-2)}
.stn-row-n{color:var(--c-text-2);font-size:13.5px}
.stn-row-p{font-size:14.5px;font-weight:700;letter-spacing:-.02em;color:var(--c-text)}
/* Marşrut nəticəsi — daha iri rəqəmlər, aydın çərçivə */
.stn-sheet-route{
margin-top:16px;padding:14px 16px;border-radius:16px;
background:var(--c-brand-lighter);
border:1px solid var(--c-brand-t2);
gap:18px;
}
.stn-rt-num b{font-size:24px}
.stn-rt-num span{font-size:12.5px}
.stn-rt-sep{height:26px}
/* Düymələr: hər ikisi aydın şəkildə aktivdir */
.stn-sheet-actions{gap:10px;margin-top:18px}
.stn-act{height:52px;border-radius:15px;font-size:14.5px}
.stn-act-main{box-shadow:0 6px 18px -6px rgba(45,157,136,.6)}
.stn-act-waze{
background:#fff;color:var(--c-text);
border:1.5px solid var(--c-border-2);
box-shadow:0 2px 6px rgba(20,50,42,.05);
}
.stn-act-waze:hover{background:var(--c-surface);border-color:var(--c-border-3)}
.stn-act-waze svg{color:var(--c-brand-d)}
@media(min-width:641px){
.stn-sheet{width:372px;border-radius:22px}
.stn-sheet-in{padding:2px 22px 22px}
}
.stnmap-shell.is-dark .stn-sheet-head{border-color:rgba(255,255,255,.12)}
.stnmap-shell.is-dark .stn-row{border-color:rgba(255,255,255,.1)}
.stnmap-shell.is-dark .stn-sheet-kw{color:#6fd6bd}
.stnmap-shell.is-dark .stn-sheet-kw::after{color:rgba(230,241,238,.5)}
.stnmap-shell.is-dark .stn-row-n{color:rgba(230,241,238,.8)}
.stnmap-shell.is-dark .stn-row-p{color:#fff}
.stnmap-shell.is-dark .stn-act-waze{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#e6f1ee}
/* Ünvanın altındakı ikinci sətir: cihaz sayı və ən aşağı tarif */
.stn-sheet-sub{display:block;margin-top:4px;font-size:12px;color:var(--c-text-3);font-weight:500}
.stnmap-shell.is-dark .stn-sheet-sub{color:rgba(230,241,238,.5)}
/* ══════════════════════════════════════════════════════════════
ŞARJ BƏLƏDÇİSİ (model üzrə səhifələr)
══════════════════════════════════════════════════════════════ */
.ev-hero{
padding:calc(var(--nav-h) + clamp(34px,6vw,64px)) 0 clamp(28px,4vw,44px);
background:linear-gradient(160deg,var(--c-brand-lighter) 0%,var(--c-surface) 70%);
border-bottom:1px solid var(--c-border);
}
.ev-hero .breadcrumb{margin-bottom:16px}
.ev-brand{
display:inline-block;font-size:11px;font-weight:700;letter-spacing:1.6px;
text-transform:uppercase;color:var(--c-brand-d);
background:#fff;border:1px solid var(--c-brand-t2);
padding:6px 13px;border-radius:999px;margin-bottom:14px;
}
.ev-hero h1{font-size:clamp(26px,5.2vw,42px);letter-spacing:-.028em;line-height:1.12;margin:0}
.ev-lead{margin:14px 0 0;max-width:62ch;font-size:clamp(15px,2.4vw,17px);line-height:1.65;color:var(--c-muted)}
.ev-sec{padding:clamp(32px,5vw,56px) 0 clamp(48px,7vw,80px)}
.ev-block{margin-bottom:clamp(34px,5vw,52px)}
.ev-block h2{font-size:clamp(19px,3.2vw,25px);letter-spacing:-.02em;margin:0 0 16px}
.ev-note{font-size:13.5px;line-height:1.6;color:var(--c-text-3);margin:12px 0 0;max-width:64ch}
/* Bazar → konnektor cədvəli */
.ev-table{border:1px solid var(--c-border);border-radius:var(--r);overflow:hidden;background:#fff}
.ev-tr{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:12px;padding:14px 16px;border-bottom:1px solid var(--c-border);font-size:14.5px}
.ev-tr:last-child{border-bottom:0}
.ev-th{background:var(--c-surface);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--c-text-3)}
.ev-mk{font-weight:600;color:var(--c-text)}
.ev-tr b{font-weight:600;color:var(--c-brand-dd)}
.ev-tip{
margin-top:14px;padding:13px 16px;border-radius:14px;
background:var(--c-brand-lighter);border:1px solid var(--c-brand-t2);
font-size:14px;line-height:1.6;color:var(--c-text-2);
}
.ev-tip a{color:var(--c-brand-dd);font-weight:600}
/* Güc statistikası */
.ev-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ev-stat{
background:#fff;border:1px solid var(--c-border);border-radius:16px;
padding:16px;text-align:center;
}
.ev-stat b{display:block;font-size:clamp(17px,3vw,22px);font-weight:700;letter-spacing:-.02em;color:var(--c-brand-dd)}
.ev-stat span{display:block;margin-top:5px;font-size:11.5px;color:var(--c-text-3);font-weight:500}
/* Tövsiyə olunan məhsullar */
.ev-prods{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.ev-prod{
display:flex;flex-direction:column;gap:5px;
padding:16px;border-radius:16px;background:#fff;
border:1px solid var(--c-border);text-decoration:none;
transition:border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease);
}
.ev-prod:hover{border-color:var(--c-brand-t2);transform:translateY(-2px);box-shadow:var(--sh-sm)}
.ev-prod-n{font-size:15.5px;font-weight:600;color:var(--c-text);letter-spacing:-.01em}
.ev-prod-m{font-size:12.5px;color:var(--c-muted);line-height:1.5}
.ev-prod-a{margin-top:6px;font-size:13px;font-weight:600;color:var(--c-brand-d)}
/* CTA */
.ev-cta{
display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
padding:clamp(20px,3vw,28px);border-radius:var(--r);
background:var(--c-surface);border:1px solid var(--c-border);
margin-bottom:clamp(34px,5vw,52px);
}
.ev-cta h3{margin:0;font-size:18px;letter-spacing:-.015em}
.ev-cta p{margin:5px 0 0;font-size:14px;color:var(--c-muted)}
/* Daxili keçidlər */
.ev-links{display:flex;flex-wrap:wrap;gap:8px}
.ev-links a{
font-size:13.5px;padding:8px 14px;border-radius:999px;
background:#fff;border:1px solid var(--c-border);
color:var(--c-text-2);text-decoration:none;
transition:border-color .18s var(--ease),color .18s var(--ease);
}
.ev-links a:hover{border-color:var(--c-brand-t2);color:var(--c-brand-dd)}
.ev-links-all{background:var(--c-brand-lighter) !important;color:var(--c-brand-dd) !important;font-weight:600}
/* İndeks səhifəsi */
.ev-filter{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.ev-filter input{
flex:1;min-width:0;height:48px;padding:0 18px;
border:1px solid var(--c-border);border-radius:999px;background:#fff;
font-family:inherit;font-size:15px;color:var(--c-text);outline:none;
transition:border-color .18s var(--ease);
}
.ev-filter input:focus{border-color:var(--c-brand-t2)}
.ev-filter-n{font-size:13.5px;color:var(--c-muted);white-space:nowrap;font-weight:600}
.ev-group{margin-bottom:30px}
.ev-group-t{font-size:15px;font-weight:700;letter-spacing:.02em;color:var(--c-text-3);
text-transform:uppercase;margin:0 0 12px}
.ev-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:12px}
.ev-card{
display:flex;flex-direction:column;gap:5px;padding:16px;
border-radius:16px;background:#fff;border:1px solid var(--c-border);
text-decoration:none;
transition:border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease);
}
.ev-card:hover{border-color:var(--c-brand-t2);transform:translateY(-2px);box-shadow:var(--sh-sm)}
.ev-card-n{font-size:16px;font-weight:600;color:var(--c-text);letter-spacing:-.015em}
.ev-card-b{font-size:12.5px;color:var(--c-muted)}
.ev-card-c{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.ev-card-c i{
font-style:normal;font-size:10.5px;font-weight:600;
padding:3px 8px;border-radius:999px;
background:var(--c-brand-lighter);color:var(--c-brand-dd);
}
.ev-empty{text-align:center;color:var(--c-muted);padding:30px 0;font-size:15px}
@media(max-width:640px){
.ev-tr{grid-template-columns:1fr;gap:4px;padding:13px 14px}
.ev-th{display:none}
.ev-tr b::before{content:attr(data-l)}
.ev-stats{grid-template-columns:1fr;gap:8px}
.ev-stat{display:flex;align-items:baseline;justify-content:space-between;text-align:left;padding:13px 15px}
.ev-stat span{margin-top:0}
.ev-cta{flex-direction:column;align-items:flex-start}
.ev-grid,.ev-prods{grid-template-columns:1fr}
}
/* Cədvəl mobildə sütunlara bölünür; sütun adı itməsin deyə hər
dəyərin qarşısına kiçik etiket qoyulur. Geniş ekranda başlıq
sətri var, ona görə etiketlər orada gizlədilir. */
.ev-lbl{display:none}
@media(max-width:640px){
.ev-lbl{
display:inline-block;font-style:normal;
font-size:10px;font-weight:700;letter-spacing:.06em;
color:var(--c-text-3);min-width:26px;
}
.ev-tr span{display:flex;align-items:baseline;gap:8px}
.ev-mk{font-size:15px;margin-bottom:2px}
}
/* ── Şarj bələdçisi: indeks səhifəsinin əlavə bölmələri ─────
Konnektor çipləri, konnektor ensiklopediyası, güc cədvəli,
kalkulyator. Yalnız .ev-* sinifləri — başqa səhifəyə toxunmur. */
.ev-toc{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.ev-toc a{
font-size:13px;font-weight:600;padding:8px 14px;border-radius:999px;
background:#fff;border:1px solid var(--c-border);color:var(--c-text-2);text-decoration:none;
transition:border-color .18s var(--ease),color .18s var(--ease);
}
.ev-toc a:hover{border-color:var(--c-brand-t2);color:var(--c-brand-dd)}
.ev-sec[id],.ev-block[id]{scroll-margin-top:calc(var(--nav-h) + 16px)}
.ev-sec-alt{background:var(--c-surface);border-top:1px solid var(--c-border);border-bottom:1px solid var(--c-border)}
.ev-sec-alt + .ev-sec{border-top:0}
.ev-prose{margin:0 0 20px;max-width:68ch;font-size:15.5px;line-height:1.7;color:var(--c-text-2)}
.ev-prose strong{color:var(--c-text);font-weight:600}
/* Konnektor çipləri */
.ev-chips{display:flex;flex-wrap:wrap;gap:8px;margin:-12px 0 28px}
.ev-chip{
display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;
border-radius:999px;border:1px solid var(--c-border);background:#fff;
font:inherit;font-size:13.5px;font-weight:600;color:var(--c-text-2);cursor:pointer;
transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
}
.ev-chip span{font-size:11.5px;font-weight:600;color:var(--c-text-3)}
.ev-chip:hover{border-color:var(--c-brand-t2)}
.ev-chip.on{background:var(--c-brand-dd);border-color:var(--c-brand-dd);color:#fff}
.ev-chip.on span{color:rgba(255,255,255,.7)}
.ev-empty[hidden]{display:none}
.ev-empty p{margin:0 0 6px}
.ev-empty .btn-primary{margin-top:10px;display:inline-flex}
/* Konnektor kartları */
.ev-conn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.ev-conn{
display:flex;flex-direction:column;gap:10px;padding:18px;
border-radius:16px;background:#fff;border:1px solid var(--c-border);
}
.ev-conn-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ev-conn-h h3{margin:0;font-size:18px;letter-spacing:-.015em}
.ev-conn-k{
font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
padding:4px 9px;border-radius:999px;background:var(--c-brand-lighter);color:var(--c-brand-dd);
}
.ev-conn p{margin:0;font-size:14px;line-height:1.6;color:var(--c-text-2)}
.ev-conn dl{margin:0;display:grid;gap:6px;padding-top:10px;border-top:1px solid var(--c-border)}
.ev-conn dl div{display:grid;grid-template-columns:56px 1fr;gap:8px;font-size:13px}
.ev-conn dt{color:var(--c-text-3);font-weight:600}
.ev-conn dd{margin:0;color:var(--c-text)}
.ev-conn-a{margin-top:auto;padding-top:4px;font-size:13.5px;font-weight:600;color:var(--c-brand-d);text-decoration:none}
.ev-conn-a:hover{color:var(--c-brand-dd)}
/* Addımlar */
.ev-steps{margin:0;padding:0;list-style:none;counter-reset:evs;display:grid;gap:12px;max-width:760px}
.ev-steps li{
position:relative;padding:16px 18px 16px 60px;border-radius:16px;
background:#fff;border:1px solid var(--c-border);
font-size:14.5px;line-height:1.65;color:var(--c-text-2);counter-increment:evs;
}
.ev-steps li::before{
content:counter(evs);position:absolute;left:18px;top:15px;
width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
background:var(--c-brand-dd);color:#fff;font-size:13px;font-weight:700;
}
.ev-steps b{display:block;color:var(--c-text);font-weight:600;margin-bottom:2px}
/* 4 sütunlu güc cədvəli */
.ev-table-4 .ev-tr{grid-template-columns:.7fr 1fr 1.8fr 1fr}
.ev-prods-sp{margin-top:20px}
/* Kalkulyator */
.ev-calc{
padding:clamp(18px,3vw,28px);border-radius:var(--r);
background:#fff;border:1px solid var(--c-border);box-shadow:var(--sh-sm);
}
.ev-seg{display:inline-flex;padding:4px;border-radius:999px;background:var(--c-surface);border:1px solid var(--c-border);margin-bottom:20px}
.ev-seg button{
height:36px;padding:0 16px;border:0;border-radius:999px;background:transparent;
font:inherit;font-size:13.5px;font-weight:600;color:var(--c-text-2);cursor:pointer;
transition:background .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease);
}
.ev-seg button.on{background:#fff;color:var(--c-brand-dd);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.ev-calc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ev-calc-grid label{display:flex;flex-direction:column;gap:7px;font-size:12.5px;font-weight:600;color:var(--c-text-3)}
.ev-calc-grid select,.ev-calc-grid input{
width:100%;height:44px;padding:0 12px;border:1px solid var(--c-border);border-radius:12px;
background:#fff;font:inherit;font-size:15px;font-weight:500;color:var(--c-text);outline:none;
transition:border-color .18s var(--ease);
}
.ev-calc-grid select:focus,.ev-calc-grid input:focus{border-color:var(--c-brand-t2)}
.ev-in{position:relative;display:block}
.ev-in input{padding-right:52px}
.ev-in em,.ev-range em{font-style:normal;font-size:13px;color:var(--c-text-3);font-weight:600}
.ev-in em{position:absolute;right:14px;top:50%;transform:translateY(-50%)}
.ev-range{display:flex;align-items:center;gap:6px}
.ev-range i{font-style:normal;color:var(--c-text-3)}
.ev-calc-out{
display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px;
padding-top:20px;border-top:1px solid var(--c-border);
}
.ev-calc-out div{padding:14px 16px;border-radius:14px;background:var(--c-brand-lighter)}
.ev-calc-out span{display:block;font-size:12px;font-weight:600;color:var(--c-text-3)}
.ev-calc-out b{display:block;margin-top:4px;font-size:clamp(19px,3vw,24px);font-weight:700;letter-spacing:-.02em;color:var(--c-brand-dd)}
@media(max-width:900px){
.ev-calc-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
.ev-toc{margin-top:18px;gap:6px}
.ev-toc a{font-size:12.5px;padding:7px 12px}
.ev-chips{flex-wrap:nowrap;overflow-x:auto;margin:-14px -16px 22px;padding:0 16px;scrollbar-width:none}
.ev-chips::-webkit-scrollbar{display:none}
.ev-chip{flex:none}
.ev-conn-grid{grid-template-columns:1fr}
.ev-steps li{padding:14px 14px 14px 52px;font-size:14px}
.ev-steps li::before{left:14px;top:14px}
.ev-table-4 .ev-tr{grid-template-columns:1fr}
.ev-seg{display:flex}
.ev-seg button{flex:1;padding:0 10px}
.ev-calc-grid{grid-template-columns:1fr;gap:12px}
.ev-calc-out{grid-template-columns:1fr;gap:8px}
.ev-calc-out div{display:flex;align-items:baseline;justify-content:space-between}
.ev-calc-out b{margin-top:0}
}
/* Məhsul səhifəsi: bu cihaza uyğun avtomobillər */
.pd-evfit{margin-top:clamp(48px,6vw,72px)}
.pd-evfit-lead{margin:0 0 18px;max-width:68ch;font-size:15px;line-height:1.65;color:var(--c-text-2)}
/* Şarj bələdçisi — kiçik düzəlişlər */
.ev-hero h1{text-wrap:balance}
.ev-block .faq-list{max-width:860px;margin:0}
.ev-nt{text-transform:none}
/* Model səhifəsi: DC sürətli şarj olmayan bazar sətri */
.ev-tr b.ev-none{color:var(--c-text-3);font-weight:500}
.ev-card-c i.ev-ac-only{background:var(--c-surface);color:var(--c-text-3);border:1px solid var(--c-border)}
/* ── Şarj bələdçisi: markalar, geniş filtrlər, marka səhifəsi ──
[hidden] atributu açıq şəkildə gücləndirilir: .ev-card{display:flex}
brauzerin öz [hidden]{display:none} qaydasını üstələyir və süzülmüş
kart ekranda qalırdı (sayğac düzgün olsa belə). */
.ev-card[hidden],.ev-group[hidden],.ev-tr[hidden]{display:none!important}
.ev-h-sm{display:flex;align-items:baseline;gap:10px}
.ev-h-sm span{font-size:14px;font-weight:600;color:var(--c-text-3)}
.ev-sec-tight{padding-top:0}
.ev-brands{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.ev-brands a{
display:flex;align-items:center;justify-content:space-between;gap:8px;
padding:11px 14px;border-radius:12px;background:#fff;border:1px solid var(--c-border);
text-decoration:none;color:var(--c-text);
transition:border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease);
}
.ev-brands a:hover{border-color:var(--c-brand-t2);transform:translateY(-1px);box-shadow:var(--sh-sm)}
.ev-brands b{font-size:14px;font-weight:600;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev-brands span{flex:none;font-size:11.5px;font-weight:700;color:var(--c-brand-dd);background:var(--c-brand-lighter);padding:2px 8px;border-radius:999px}
/* Əlavə filtrlər */
.ev-subf{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:-14px 0 30px}
.ev-seg-sm{margin:0}
.ev-seg-sm button{height:34px;padding:0 13px;font-size:13px}
.ev-seg-sm button span{font-size:11px;color:var(--c-text-3);font-weight:600;margin-left:3px}
.ev-seg-sm button.on span{color:var(--c-brand-d)}
.ev-sel select{
height:42px;padding:0 34px 0 14px;border:1px solid var(--c-border);border-radius:999px;background:#fff;
font:inherit;font-size:13.5px;font-weight:600;color:var(--c-text-2);cursor:pointer;outline:none;
}
.ev-sel select:focus{border-color:var(--c-brand-t2)}
.ev-tgl{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 14px;border:1px solid var(--c-border);border-radius:999px;background:#fff;cursor:pointer;font-size:13.5px;font-weight:600;color:var(--c-text-2)}
.ev-tgl input{width:16px;height:16px;accent-color:var(--c-brand-dd);margin:0}
.ev-reset{height:42px;padding:0 14px;border:0;background:none;font:inherit;font-size:13.5px;font-weight:600;color:var(--c-brand-d);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.ev-reset[hidden]{display:none}
/* Marka qrupu: başlıq + yığılan siyahı */
.ev-group-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 12px}
.ev-group-h .ev-group-t{margin:0}
.ev-group-a{font-size:13px;font-weight:600;color:var(--c-brand-d);text-decoration:none;white-space:nowrap}
.ev-group-a:hover{color:var(--c-brand-dd)}
.ev-group:not(.ev-open):not(.ev-all) .ev-more{display:none}
.ev-more-btn{
margin-top:12px;height:38px;padding:0 16px;border-radius:999px;border:1px dashed var(--c-brand-t2);
background:var(--c-brand-lighter);font:inherit;font-size:13.5px;font-weight:600;color:var(--c-brand-dd);cursor:pointer;
}
.ev-group.ev-all .ev-more-btn{display:none}
/* Marka səhifəsi: model cədvəli */
.ev-table-b .ev-tr{grid-template-columns:1.2fr 1.6fr .7fr .8fr;align-items:center}
.ev-tr-link{text-decoration:none;color:inherit;transition:background .15s var(--ease)}
.ev-tr-link:hover{background:var(--c-brand-lighter)}
.ev-tr .ev-mk small{display:block;margin-top:3px;font-size:12px;font-weight:500;color:var(--c-text-3)}
.ev-mkt{font-size:13px;line-height:1.7;color:var(--c-text-2)}
.ev-mkt em{font-style:normal;font-weight:600;color:var(--c-text-3)}
@media(max-width:640px){
.ev-brands{grid-template-columns:repeat(2,1fr);gap:6px}
.ev-brands a{padding:10px 12px}
.ev-subf{gap:8px;margin:-10px 0 24px}
.ev-seg-sm{display:flex;width:100%;overflow-x:auto;scrollbar-width:none}
.ev-seg-sm::-webkit-scrollbar{display:none}
.ev-seg-sm button{flex:1 0 auto}
.ev-sel,.ev-sel select{width:100%}
.ev-tgl{flex:1}
.ev-group-h{flex-direction:column;gap:4px}
.ev-table-b .ev-tr{grid-template-columns:1fr;gap:6px}
.ev-mkt{display:block}
}
/* ev-brands-fix: uzun marka adları kəsilməsin; marka bloku ilə axtarış arasında boşluq */
.ev-brands{grid-template-columns:repeat(auto-fill,minmax(178px,1fr))}
#markalar{padding-bottom:clamp(20px,3vw,32px)}
#markalar .ev-block{margin-bottom:0}
/* Köhnə mobil qayda (.ev-tr span{display:flex}) bazar sütununu da flex edib sətirləri qarışdırırdı */
.ev-table-b .ev-tr span.ev-mkt{display:block}
@media(max-width:640px){
.ev-brands{grid-template-columns:repeat(2,1fr)}
.ev-table-b .ev-tr .ev-mk{display:block}
}
/* ── Fotodan port tanıma ─────────────────────────────────── */
.ev-port-sec{padding-bottom:0}
.ev-port{
display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(20px,4vw,48px);align-items:center;
padding:clamp(22px,4vw,40px);border-radius:24px;
background:linear-gradient(135deg,#0f2e2a 0%,#165d5c 100%);color:#fff;
box-shadow:0 20px 50px -24px rgba(15,46,42,.55);
}
.ev-port-k{
display:inline-block;margin-bottom:12px;padding:5px 11px;border-radius:999px;
background:rgba(255,255,255,.12);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#bfeee2;
}
.ev-port h2{margin:0;font-size:clamp(21px,3.4vw,30px);line-height:1.18;letter-spacing:-.022em;color:#fff;text-wrap:balance}
.ev-port-txt p{margin:12px 0 0;font-size:15px;line-height:1.65;color:rgba(255,255,255,.78);max-width:52ch}
.ev-port-tips{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.ev-port-tips li{position:relative;padding-left:22px;font-size:13.5px;color:rgba(255,255,255,.72)}
.ev-port-tips li::before{content:"";position:absolute;left:2px;top:7px;width:10px;height:6px;border:2px solid #7fe0c7;border-top:0;border-right:0;transform:rotate(-45deg)}
.ev-port-box{background:#fff;border-radius:18px;padding:16px;color:var(--c-text)}
.ev-port-drop{
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:190px;
border:2px dashed var(--c-brand-t2);border-radius:14px;background:var(--c-brand-lighter);
cursor:pointer;text-align:center;padding:18px;color:var(--c-brand-dd);
transition:background .18s var(--ease),border-color .18s var(--ease);
}
.ev-port-drop:hover{background:#d6eee7;border-color:var(--c-brand-d)}
.ev-port-drop input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.ev-port-drop b{font-size:16px}
.ev-port-drop span{font-size:12.5px;color:var(--c-text-3)}
.ev-port-drop.is-busy{pointer-events:none;opacity:.55}
.ev-port-work{position:relative;margin-top:12px;border-radius:14px;overflow:hidden;background:#0b1f1c}
.ev-port-work img{display:block;width:100%;max-height:260px;object-fit:contain}
.ev-port-st{
position:absolute;inset:auto 10px 10px 10px;display:flex;align-items:center;gap:10px;
padding:10px 14px;border-radius:12px;background:rgba(255,255,255,.94);font-size:14px;font-weight:600;
}
.ev-port-st[hidden]{display:none}
.ev-port-spin{width:16px;height:16px;border-radius:50%;border:2px solid var(--c-brand-t2);border-top-color:var(--c-brand-dd);animation:evspin .8s linear infinite}
@keyframes evspin{to{transform:rotate(360deg)}}
.ev-port-res{margin-top:14px}
.ev-port-res h4{margin:18px 0 10px;font-size:14px;letter-spacing:-.01em}
.ev-port-res .ev-prods{grid-template-columns:1fr}
.ev-port-hit{padding:14px 16px;border-radius:14px;background:var(--c-brand-lighter);border:1px solid var(--c-brand-t2)}
.ev-port-hit.is-unsure{background:#fdf6e6;border-color:#efd9a6}
.ev-port-lbl{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--c-text-3)}
.ev-port-chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 6px}
.ev-port-chip{display:inline-flex;align-items:baseline;gap:6px;padding:7px 13px;border-radius:999px;background:var(--c-brand-dd);color:#fff;font-size:17px;font-weight:700;letter-spacing:-.01em}
.ev-port-chip i{font-style:normal;font-size:11px;font-weight:600;opacity:.75}
.ev-port-mk,.ev-port-why{margin:6px 0 0;font-size:13.5px;line-height:1.55;color:var(--c-text-2)}
.ev-port-conf{height:5px;margin-top:10px;border-radius:3px;background:rgba(0,0,0,.08);overflow:hidden}
.ev-port-conf span{display:block;height:100%;background:var(--c-brand-d)}
.is-unsure .ev-port-conf span{background:#c9912b}
.ev-port-hit small{display:block;margin-top:5px;font-size:11.5px;color:var(--c-text-3)}
.ev-port-msg{padding:13px 15px;border-radius:12px;background:var(--c-surface);font-size:14px;line-height:1.55}
.ev-port-bad{background:#fdeceb}
.ev-port-tip{display:block;margin-top:6px;font-size:13px;color:var(--c-text-2)}
.ev-port-guide{display:inline-block;margin-top:14px;font-size:14px;font-weight:600;color:var(--c-brand-d);text-decoration:none}
.ev-port-act{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:14px}
.ev-port-again{height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--c-border);background:#fff;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.ev-port-act a{font-size:13.5px;font-weight:600;color:var(--c-text-2)}
.ev-port-off p{margin:0 0 14px;font-size:15px;line-height:1.6}
.ev-port-note{margin:12px 4px 0;font-size:12px;line-height:1.6;color:var(--c-text-3);max-width:90ch}
/* Model səhifəsində kiçik çağırış */
.ev-port-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding:13px 16px;border-radius:14px;border:1px dashed var(--c-brand-t2);font-size:14px;color:var(--c-text-2)}
.ev-port-cta a{flex:none;font-weight:600;color:var(--c-brand-d);text-decoration:none}
@media(max-width:860px){
.ev-port{grid-template-columns:1fr}
}
@media(max-width:640px){
.ev-port{border-radius:20px;padding:20px 16px}
.ev-port-tips{display:none}
.ev-port-drop{min-height:150px}
.ev-port-cta{flex-direction:column;align-items:flex-start}
}
/* ── Avtomobil şəkilləri ────────────────────────────────── */
.ev-card-img{
display:block;margin:-16px -16px 10px;aspect-ratio:16/10;overflow:hidden;
border-radius:15px 15px 0 0;background:#eef6f3;
}
.ev-card-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.ev-card:hover .ev-card-img img{transform:scale(1.035)}
.ev-card-img.is-sil img{object-fit:cover}
.ev-credit{margin:8px 0 26px;font-size:12px;line-height:1.6;color:var(--c-text-3);max-width:90ch}
/* Model səhifəsi: mətn + foto */
.ev-hero-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.ev-hero-fig{margin:0}
.ev-hero-fig img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:20px;background:#eef6f3;box-shadow:0 18px 40px -22px rgba(15,46,42,.45)}
.ev-hero-fig.is-sil img{box-shadow:none;border:1px solid var(--c-border)}
.ev-hero-fig figcaption{margin-top:8px;font-size:11.5px;line-height:1.5;color:var(--c-text-3)}
.ev-hero-fig figcaption a{color:inherit;text-decoration:underline;text-underline-offset:2px}
/* Marka cədvəli: kiçik şəkil */
.ev-mk-img{display:grid!important;grid-template-columns:84px 1fr;column-gap:12px;align-items:center}
.ev-mk-img .ev-thumb{grid-row:1/3;width:84px;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:8px;background:#eef6f3}
.ev-mk-img small{grid-column:2}
@media(max-width:900px){
.ev-hero-grid{grid-template-columns:1fr}
.ev-hero-fig{max-width:560px}
}
@media(max-width:640px){
/* Mobildə kart üfüqi olur: şəkil solda — 280 modelli siyahı ekranda uzanmasın */
.ev-card{display:grid;grid-template-columns:112px 1fr;column-gap:12px;align-items:center;padding:10px 12px 10px 10px}
.ev-card-img{grid-row:1/4;margin:0;border-radius:10px;align-self:center}
.ev-card-n,.ev-card-b,.ev-card-c{grid-column:2}
.ev-card-c{margin-top:4px}
.ev-hero-fig img{border-radius:16px}
}
/* Fotodan tanıma: avtomobil nəticəsi */
.ev-port-name{margin:6px 0 2px;font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--c-brand-dd)}
.ev-port-car{display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:center;margin-top:12px;padding:8px;border-radius:14px;border:1px solid var(--c-border);text-decoration:none;color:inherit;background:#fff}
.ev-port-car img{width:120px;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:10px}
.ev-port-car b{display:block;font-size:15px}
.ev-port-car small{display:block;margin-top:3px;font-size:12px;color:var(--c-text-3)}
.ev-port-tbl{width:100%;margin-top:10px;border-collapse:collapse;font-size:13.5px}
.ev-port-tbl th,.ev-port-tbl td{padding:8px 10px;border-bottom:1px solid var(--c-border);text-align:left}
.ev-port-tbl thead th{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--c-text-3);font-weight:700}
.ev-port-tbl tbody th{font-weight:600;color:var(--c-text-2)}
.ev-port-tbl td{font-weight:600;color:var(--c-brand-dd)}
.ev-port-alt{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px}
.ev-port-alt span{width:100%;font-size:12.5px;font-weight:600;color:var(--c-text-3)}
.ev-port-alt a{font-size:12.5px;font-weight:600;padding:5px 11px;border-radius:999px;border:1px solid var(--c-border);background:#fff;color:var(--c-text-2);text-decoration:none}
.ev-port-alt a:hover{border-color:var(--c-brand-t2);color:var(--c-brand-dd)}
/* ── Bələdçi: yığılan marka/model panelləri ───────────────── */
.ev-browse{display:flex;flex-wrap:wrap;gap:10px;margin:-12px 0 18px}
.ev-browse-btn{
display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 18px;border-radius:999px;
border:1px solid var(--c-border);background:#fff;font:inherit;font-size:14.5px;font-weight:600;color:var(--c-text);cursor:pointer;
transition:border-color .18s var(--ease),background .18s var(--ease),color .18s var(--ease);
}
.ev-browse-btn span{font-size:12px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--c-brand-lighter);color:var(--c-brand-dd)}
.ev-browse-btn svg{transition:transform .25s var(--ease)}
.ev-browse-btn:hover{border-color:var(--c-brand-t2)}
.ev-browse-btn[aria-expanded="true"]{background:var(--c-brand-dd);border-color:var(--c-brand-dd);color:#fff}
.ev-browse-btn[aria-expanded="true"] span{background:rgba(255,255,255,.18);color:#fff}
.ev-browse-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
/* 0fr → 1fr: hündürlük animasiyası. İçdəki min-height:0 olmasa 0fr
min-content-ə qədər daralır və bağlı panel zolaq kimi görünür. */
.ev-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s var(--ease)}
.ev-panel-in{min-height:0;overflow:hidden;opacity:0;transition:opacity .25s var(--ease)}
.ev-panel.is-open{grid-template-rows:1fr}
.ev-panel.is-open > .ev-panel-in{opacity:1;padding-top:6px}
#evBrandsPanel.is-open{margin-bottom:22px}
#evModelsPanel .ev-chips{margin-top:0}
/* Port: kamera + qalereya düymələri */
.ev-port-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:8px 0 2px}
.ev-port-cam,.ev-port-gal{
position:relative;display:inline-flex;align-items:center;height:42px;padding:0 18px;border-radius:999px;
font-size:14px;font-weight:600;cursor:pointer;
}
.ev-port-cam{background:var(--c-brand-dd);color:#fff}
.ev-port-gal{background:#fff;border:1px solid var(--c-brand-t2);color:var(--c-brand-dd)}
.ev-port-cam input,.ev-port-gal input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.ev-port-drop{cursor:default}
/* Kamera düyməsi YALNIZ toxunma ekranında (telefon/planşet) görünür.
Default gizlidir: kompüterdə capture nəzərə alınmır, düymə fayl pəncərəsi
açar və çaşdırar. Qeyri-müəyyən mühitdə (siçan da, toxunma da yoxdur)
da düzgün variant — "Şəkil seç" — qalır. */
.ev-port-cam{display:none}
.ev-only-touch{display:none}
.ev-port-gal{background:var(--c-brand-dd);border-color:var(--c-brand-dd);color:#fff}
@media (pointer:coarse){
.ev-port-cam{display:inline-flex}
.ev-only-touch{display:inline}
.ev-only-desk{display:none}
.ev-port-gal{background:#fff;border-color:var(--c-brand-t2);color:var(--c-brand-dd)}
}
@media(max-width:640px){
.ev-browse{gap:8px}
.ev-browse-btn{flex:1 1 0;justify-content:center;padding:0 12px;font-size:14px}
}
.ev-browse-btn em{font-style:normal}
.ev-lbl-m{display:none}
@media(max-width:640px){.ev-lbl-d{display:none}.ev-lbl-m{display:inline}}
/* ── Proyektlər səhifəsi ─────────────────────────────────── */
.prj-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:28px}
.prj-stats div{padding:18px;border-radius:16px;background:var(--c-surface);border:1px solid var(--c-border);text-align:center}
.prj-stats b{display:block;font-size:clamp(22px,4vw,30px);font-weight:700;letter-spacing:-.02em;color:var(--c-brand-dd)}
.prj-stats span{display:block;margin-top:4px;font-size:12.5px;color:var(--c-text-3);font-weight:500}
.prj-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.prj-chip{
display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 15px;border-radius:999px;
border:1px solid var(--c-border);background:#fff;font:inherit;font-size:13.5px;font-weight:600;
color:var(--c-text-2);cursor:pointer;transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
}
.prj-chip span{font-size:11.5px;color:var(--c-text-3)}
.prj-chip:hover{border-color:var(--c-brand-t2)}
.prj-chip.on{background:var(--c-brand-dd);border-color:var(--c-brand-dd);color:#fff}
.prj-chip.on span{color:rgba(255,255,255,.7)}
.prj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.prj-card[hidden]{display:none!important}
.prj-card{
display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;
padding:14px 16px;border-radius:16px;background:#fff;border:1px solid var(--c-border);
text-decoration:none;color:inherit;
transition:border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease);
}
.prj-card:hover{border-color:var(--c-brand-t2);transform:translateY(-2px);box-shadow:var(--sh-sm)}
.prj-logo{display:grid;place-items:center;width:56px;height:56px;border-radius:12px;background:var(--c-surface);overflow:hidden}
.prj-logo img{width:100%;height:100%;object-fit:contain;padding:6px}
.prj-body{min-width:0}
.prj-body b{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prj-body i{display:block;margin-top:3px;font-style:normal;font-size:12.5px;color:var(--c-text-3)}
.prj-arr{flex:none;color:var(--c-text-3);transition:color .18s var(--ease),transform .18s var(--ease)}
.prj-card:hover .prj-arr{color:var(--c-brand-d);transform:translate(2px,-2px)}
.prj-empty{padding:28px 0;text-align:center;color:var(--c-muted)}
/* Biznes təklifi mətni — çərçivə */
.hm-offer-framed{
padding:clamp(20px,3vw,30px);border-radius:var(--r);
background:var(--c-surface);border:1px solid var(--c-border);
}
@media(max-width:640px){
.prj-stats{grid-template-columns:1fr;gap:8px}
.prj-stats div{display:flex;align-items:baseline;justify-content:space-between;text-align:left;padding:14px 16px}
.prj-stats b{font-size:20px}
.prj-stats span{margin-top:0}
.prj-grid{grid-template-columns:1fr}
.prj-filter{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px 18px;padding:0 16px;scrollbar-width:none}
.prj-filter::-webkit-scrollbar{display:none}
.prj-chip{flex:none}
}
/* Menyuda 7 bənd var (Proyektlər əlavə olunandan sonra). 1050–1150 px
aralığında sətir sığmırdı — həmin dar zolaqda yazı və boşluq bir
qədər sıxılır. Daha dar ekranlarda onsuz da hamburger menyu işləyir. */
@media (max-width:1180px) and (min-width:1025px){
.nav-link{font-size:12.5px;padding:7px 9px}
.nav-links{gap:0}
}
/* Tərəfdaş lentindən Proyektlər səhifəsinə keçid */
.pb-more{display:block;margin-top:14px;text-align:center;font-size:13.5px;font-weight:600;color:var(--c-brand-d);text-decoration:none}
.pb-more:hover{color:var(--c-brand-dd)}
/* ══ Layihələr — kart şəbəkəsi və detal səhifəsi (v5) ══════════
Həndəsə qaydası: kartın şəkil bloku iki sütundur — sol sütun
obyektin fotosu (kənara qədər), sağ sütun ağ panel olub içində
loğo (yuxarı) və cihazın şəkli (aşağı) yerləşir. Sağ paneldəki
şəkillər kənara toxunmur, ona görə heç bir daşma hissi olmur.
Nisbətlər: sağ sütun eni = kartın 36%-i, foto xanası isə tam
4:3 olsun deyə media bloku 1/(0.75·0.64) = 2.0833 nisbətindədir.
Cihaz şəkli də 4:3 çərçivədədir — hər iki şəkil kəsilmir.
────────────────────────────────────────────────────────────── */
.pj-wide{max-width:1920px}
.pj-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.pj-card.reveal{transition-delay:calc(var(--fi,0)*55ms)}
.pj-card{
display:block;text-decoration:none;color:inherit;isolation:isolate;
border:1px solid var(--c-border);border-radius:18px;background:#fff;overflow:hidden;
box-shadow:0 1px 2px rgba(15,46,42,.05);
transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s cubic-bezier(.22,1,.36,1),border-color .3s var(--ease);
}
.pj-card:hover{transform:translateY(-7px);border-color:var(--c-brand-t2);
box-shadow:0 38px 70px -34px rgba(15,46,42,.46),0 0 0 4px var(--c-brand-t1,#eef6f3)}
.pj-card:focus-visible{outline:2px solid var(--c-brand);outline-offset:3px}
.pj-media{display:grid;grid-template-columns:1.618fr 1fr;gap:11px;padding:11px;background:#fff}
.pj-shot-wrap{position:relative;aspect-ratio:4/3;overflow:hidden;background:#eef6f3;
border-radius:11px;border:1px solid var(--c-border);transition:border-color .3s var(--ease)}
.pj-card:hover .pj-shot-wrap{border-color:var(--c-brand-t2)}
.pj-shot{width:100%;height:100%;object-fit:cover;display:block;
transition:transform .8s cubic-bezier(.22,1,.36,1)}
.pj-card:hover .pj-shot{transform:scale(1.06)}
/* foto ilə ağ panelin qovuşduğu kənarda incə dərinlik */
.pj-shot-wrap::after{content:"";position:absolute;inset:0;pointer-events:none;
border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(8,26,23,.05)}
.pj-side{display:flex;flex-direction:column;gap:11px;min-width:0;min-height:0}
.pj-logo{position:relative;flex:1 1 auto;min-height:0;display:grid;place-items:center;
padding:9px 11px;border-radius:11px;background:#fff;border:1px solid var(--c-border);
transition:border-color .3s var(--ease)}
.pj-card:hover .pj-logo{border-color:var(--c-brand-t2)}
.pj-logo img{
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:auto;height:auto;max-width:calc(100% - 22px);max-height:calc(100% - 18px);
object-fit:contain;display:block;
}
/* loğo hələ yoxdursa: boş ağ sahə əvəzinə marka rəngli panel */
.pj-logo.is-txt{border-radius:12px;background:var(--c-brand-t1,#eef6f3);padding:10px 14px}
.pj-logo.is-txt span{font-size:13px;font-weight:650;letter-spacing:-.012em;color:var(--c-brand-dd);
text-align:center;line-height:1.25;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pj-dev{position:relative;flex:none;aspect-ratio:4/3;border-radius:11px;overflow:hidden;
border:1px solid var(--c-border);transition:border-color .3s var(--ease)}
.pj-dev img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
transition:transform .8s cubic-bezier(.22,1,.36,1)}
.pj-card:hover .pj-dev{border-color:var(--c-brand-t2)}
.pj-card:hover .pj-dev img{transform:scale(1.05)}
.pj-body{padding:3px 15px 16px}
.pj-cat{display:block;font-size:10.5px;font-weight:650;letter-spacing:.055em;text-transform:uppercase;
color:var(--c-text-3)}
.pj-name{margin:6px 0 0;min-height:2.48em;font-size:16.5px;font-weight:600;letter-spacing:-.024em;line-height:1.24;color:var(--c-text-1)}
.pj-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
margin-top:12px;padding-top:11px;border-top:1px solid var(--c-border)}
.pj-spec{display:inline-flex;align-items:center;gap:5px;padding:5px 11px 5px 9px;border-radius:999px;
background:var(--c-brand-t2);color:var(--c-brand-dd);
font-size:11.5px;font-weight:650;letter-spacing:-.008em;white-space:nowrap}
.pj-spec svg{flex:none;opacity:.85}
.pj-go{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;
color:var(--c-brand-dd);opacity:0;transform:translateX(-6px);
transition:opacity .3s var(--ease),transform .3s var(--ease)}
.pj-card:hover .pj-go,.pj-card:focus-visible .pj-go{opacity:1;transform:none}
@media(max-width:1280px){
.pj-grid,.pj-grid.is-3{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
}
/* Planşet (720–1280 px) iki sütunda qalır — əvvəl 1050-dən aşağıda
bir sütuna düşürdü və kartlar lüzumsuz yer tuturdu. */
@media(max-width:720px){
.pj-grid,.pj-grid.is-3{grid-template-columns:1fr;gap:18px}
}
/* Telefon: foto tam enə çıxır, loğo və cihaz onun altında yan-yana */
@media(max-width:640px){
.pj-card{border-radius:18px}
.pj-media{grid-template-columns:1fr;gap:10px;padding:10px}
.pj-shot-wrap{aspect-ratio:4/3}
.pj-side{flex-direction:row;align-items:stretch;gap:10px}
.pj-logo{flex:1 1 auto;padding:8px 10px}
.pj-dev{flex:0 0 38%}
.pj-body{padding:2px 13px 14px}
.pj-name{font-size:16px}
.pj-go{display:none}
}
@media(prefers-reduced-motion:reduce){
.pj-card,.pj-shot,.pj-dev img,.pj-go{transition:none}
.pj-card:hover{transform:none}
.pj-card:hover .pj-shot,.pj-card:hover .pj-dev img{transform:none}
}
/* ══ Layihə detal səhifəsi (/layiheler/{slug}) ════════════════ */
.pd-wide{max-width:1460px}
.pd-back{display:inline-flex;align-items:center;gap:7px;margin-bottom:22px;
font-size:13.5px;font-weight:600;color:var(--c-text-3);text-decoration:none;
transition:color .2s var(--ease),gap .2s var(--ease)}
.pd-back:hover{color:var(--c-brand-dd);gap:11px}
.pd-sec-tight{padding-top:0}
.pd-hero{display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:center}
.pd-shot{position:relative;border-radius:22px;overflow:hidden;background:#eef6f3;
box-shadow:0 30px 70px -40px rgba(15,46,42,.55)}
.pd-shot img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.pd-logo{position:absolute;left:18px;top:18px;display:grid;place-items:center;
min-width:72px;height:54px;padding:8px 16px;border-radius:13px;
background:rgba(255,255,255,.97);box-shadow:0 8px 24px -10px rgba(0,0,0,.5)}
.pd-logo img{width:auto;height:auto;max-width:112px;max-height:38px;aspect-ratio:auto;object-fit:contain}
.pd-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:650;
letter-spacing:.06em;text-transform:uppercase;color:var(--c-brand-dd);
background:var(--c-brand-t2);padding:6px 13px;border-radius:999px}
.pd-title{margin:16px 0 0;font-size:clamp(28px,3.4vw,44px);font-weight:600;letter-spacing:-.032em;line-height:1.1}
.pd-sub{margin:12px 0 0;font-size:16px;color:var(--c-text-3);letter-spacing:-.008em}
.pd-sub-name{font-weight:600;color:var(--c-text-1)}
.pd-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:26px}
.pd-stat{border:1px solid var(--c-border);border-radius:14px;padding:13px 15px;background:#fff}
.pd-stat b{display:block;font-size:17px;font-weight:600;letter-spacing:-.02em;color:var(--c-text-1)}
.pd-stat span{display:block;margin-top:3px;font-size:11.5px;font-weight:600;letter-spacing:.05em;
text-transform:uppercase;color:var(--c-text-3)}
.pd-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
/* Quraşdırılan cihaz paneli */
.pd-dev{display:grid;grid-template-columns:.9fr 1.1fr;gap:0;align-items:stretch;
border:1px solid var(--c-border);border-radius:22px;overflow:hidden;background:#fff}
.pd-dev-img{position:relative;overflow:hidden;background:#eef6f3}
.pd-dev-img{position:relative;min-height:260px;overflow:hidden;background:#eef6f3}
.pd-dev-img img{
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:auto;height:auto;max-width:calc(100% - 28px);max-height:calc(100% - 28px);
aspect-ratio:auto;object-fit:contain;border-radius:10px;display:block;
}
.pd-dev-in{padding:30px 34px}
.pd-dev-in h3{margin:10px 0 0;font-size:26px;font-weight:600;letter-spacing:-.026em}
.pd-dev-in p{margin:12px 0 0;font-size:15px;line-height:1.6;color:var(--c-text-2,var(--c-text-3))}
.pd-specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 26px;
margin:22px 0 0;padding:0;list-style:none;background:none}
.pd-specs li{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
font-size:13.5px;line-height:1.45;padding:11px 2px;margin:0;background:none;
border-bottom:1px solid var(--c-border)}
.pd-specs li::marker{content:""}
.pd-specs .k{flex:0 1 auto;color:var(--c-text-3);white-space:nowrap}
.pd-specs .v{flex:1 1 auto;min-width:0;font-weight:600;color:var(--c-text-1);text-align:right}
/* Telefon: göstəricilər sətir-sətir, mətn qatlanmasın */
@media(max-width:640px){
.pd-stats{grid-template-columns:1fr;gap:10px;margin-top:22px}
.pd-stat{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:12px 16px}
.pd-stat b{font-size:16px;text-align:right;order:2}
.pd-stat span{margin:0}
.pd-logo{left:12px;top:12px;height:44px;padding:7px 12px;border-radius:11px}
.pd-logo img{max-width:88px;max-height:30px}
.pd-title{margin-top:12px}
.pd-acts .btn-primary,.pd-acts .btn-secondary{flex:1 1 auto;text-align:center}
}
@media(max-width:900px){
.pd-hero{grid-template-columns:1fr;gap:26px}
.pd-dev{grid-template-columns:1fr}
.pd-dev-in{padding:24px 22px}
.pd-specs{grid-template-columns:1fr}
}
/* ══════════════════════════════════════════════════════════
BİZNES TƏKLİFİ — interaktiv mərhələ seçicisi
──────────────────────────────────────────────────────────
Üç addım əvvəl eyni anda açıq idi: üç paraqraf yan-yana
oxunmurdu. İndi yalnız aktiv addımın mətni görünür, sol
reyka şarj kimi dolur, sol paneldəki keçid mərhələyə görə
dəyişir. Bölmə ekranda olduqca özü irəliləyir; istifadəçi
toxunan kimi dayanır.
══════════════════════════════════════════════════════════ */
/* ── Sol paneldə irəliləyiş ─────────────────────────────── */
.of-meter{display:flex;align-items:center;gap:14px;margin:22px 0 4px}
.of-meter-bar{flex:1 1 auto;height:4px;border-radius:999px;background:var(--c-border);overflow:hidden}
.of-meter-bar i{display:block;height:100%;width:33.33%;border-radius:999px;
background:linear-gradient(90deg,var(--c-brand),var(--c-brand-d));
transition:width .55s cubic-bezier(.22,1,.36,1)}
.of-meter-n{flex:none;font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--c-text-3);
font-variant-numeric:tabular-nums}
.of-meter-n b{color:var(--c-brand-d);font-weight:700}
/* keçidlər mərhələyə görə dəyişir */
.of-acts{position:relative;min-height:24px}
.of-acts .hm-textlink{
transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.of-acts .hm-textlink[hidden]{display:none}
.of-acts .hm-textlink.of-in{animation:ofIn .4s var(--ease)}
@keyframes ofIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
/* ── Addımlar ───────────────────────────────────────────── */
.of-steps{position:relative;list-style:none;margin:0;padding:0 0 0 2px}
.of-steps > li{border-top:0;padding:0}
.of-steps > li + li{margin-top:2px}
/* sol reyka — şarj kabeli kimi dolur */
.of-rail{position:absolute;left:0;top:14px;bottom:14px;width:2px;border-radius:999px;
background:var(--c-border);overflow:hidden}
.of-rail i{position:absolute;left:0;top:0;width:100%;height:0;border-radius:999px;
background:linear-gradient(180deg,var(--c-brand),var(--c-brand-d));
box-shadow:0 0 12px rgba(45,157,136,.5);
transition:height .55s cubic-bezier(.22,1,.36,1)}
.of-step{
display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:start;
width:100%;padding:22px 18px 22px 24px;margin:0;border:0;border-radius:16px;
background:transparent;text-align:left;font:inherit;color:inherit;cursor:pointer;
transition:background .3s var(--ease);
}
.of-step:hover{background:var(--c-surface,#f5f5f7)}
.of-step:focus-visible{outline:2px solid var(--c-brand);outline-offset:2px}
.of-step.is-on{background:var(--c-surface,#f5f5f7)}
.of-step .hm-step-n{
font-size:.85rem;font-weight:600;color:var(--c-text-3);padding-top:3px;
font-variant-numeric:tabular-nums;
transition:color .3s var(--ease),transform .3s var(--ease);
}
.of-step.is-on .hm-step-n{color:var(--c-brand-d);transform:scale(1.18);transform-origin:left center}
.of-tx{display:block;min-width:0}
.of-h{display:block;font-size:17px;font-weight:600;letter-spacing:-.018em;line-height:1.3;
color:var(--c-text-3);transition:color .3s var(--ease)}
.of-step.is-on .of-h,.of-step:hover .of-h{color:var(--c-text-1)}
/* mətn 0fr → 1fr ilə açılır: hündürlük animasiya oluna bilsin */
.of-p{display:grid;grid-template-rows:0fr;overflow:hidden;
transition:grid-template-rows .45s cubic-bezier(.22,1,.36,1),opacity .35s var(--ease);opacity:0}
.of-p > span{min-height:0;display:block;padding-top:9px;font-size:14.5px;line-height:1.6;color:var(--c-text-3)}
.of-step.is-on .of-p{grid-template-rows:1fr;opacity:1}
@media(max-width:860px){
.of-step{padding:18px 14px 18px 20px;gap:14px}
.of-h{font-size:16px}
.of-meter{margin-top:18px}
}
@media(prefers-reduced-motion:reduce){
.of-p,.of-rail i,.of-meter-bar i,.of-step,.of-step .hm-step-n,.of-h{transition:none}
.of-acts .hm-textlink.of-in{animation:none}
}
/* ── Bölmənin fonu: şarj səhnəsi ───────────────────────────
Əvvəl burada sadəcə dalğalı xətlər var idi — şarjı anlatmırdı.
İndi səhnə açıqdır: soldan gələn kabel konnektorla batareyaya
qoşulur, kabeldən enerji impulsları axır, batareya isə mərhələ
ilə dolur (01 → 33%, 02 → 66%, 03 → 100%). Açıq tonlarda,
mətnin arxasında. */
.hm-offer{position:relative;overflow:hidden;isolation:isolate;
background:linear-gradient(180deg,#fbfcfc 0%,#f4f8f7 48%,#fbfcfc 100%)}
.hm-offer > .container{position:relative;z-index:1}
.of-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
/* kabel — bölmənin eninə uzanır */
.of-bg-wire{position:absolute;inset:0;width:100%;height:100%}
.of-wire{fill:none;stroke:#d2e5df;stroke-width:1.9;stroke-linecap:round;
vector-effect:non-scaling-stroke;transition:stroke .5s var(--ease)}
.of-wire-2{stroke:#dcebe6}
.of-flow{fill:none;stroke:#9ed6c7;stroke-width:3.4;stroke-linecap:round;
vector-effect:non-scaling-stroke;
stroke-dasharray:18 8 4 240;stroke-dashoffset:0;
animation:ofFlow 6.5s linear infinite;
transition:stroke .5s var(--ease),stroke-width .5s var(--ease)}
.of-flow-2{animation-delay:-3.2s;opacity:.7}
@keyframes ofFlow{to{stroke-dashoffset:-270}}
/* mərhələ irəlilədikcə axın sürətlənir */
.of-bg.lv1 .of-flow{animation-duration:5s;stroke:#7fcdb9}
.of-bg.lv2 .of-flow{animation-duration:3.4s;stroke:var(--c-brand,#2d9d88)}
/* batareya — sağ tərəfdə, addımların arxasında */
.of-bg-batt{position:static;width:clamp(210px,21vw,320px);height:auto;opacity:.95}
.of-batt-body,.of-batt-tip{fill:none;stroke:#cfe3dd;stroke-width:3}
.of-batt-tip{fill:#e8f2ef;stroke:none}
.of-plug rect{fill:#d6e8e2}
.of-seg rect{fill:#e6f1ee;transition:fill .6s var(--ease),opacity .6s var(--ease)}
.of-seg.is-on rect{fill:#b6ddd0}
.of-seg.is-on:last-of-type rect,.of-seg.is-on[data-g="2"] rect{fill:#8fd0bd}
/* yeni dolan seqment bir dəfə parıldayır */
.of-seg.just rect{animation:ofSeg .9s var(--ease)}
@keyframes ofSeg{0%{fill:#d8ede6}45%{fill:#6fc6ae}100%{}}
.of-bolt{fill:#cde6de;transition:fill .6s var(--ease)}
.of-bg.lv1 .of-bolt{fill:#a9d9ca}
.of-bg.lv2 .of-bolt{fill:#6fc6ae}
.of-pct{fill:#b9d4cc;font-family:var(--ff-b,inherit);font-size:30px;font-weight:600;
letter-spacing:-.02em;transition:fill .6s var(--ease)}
.of-bg.lv2 .of-pct{fill:#79c4b1}
/* kursorun ardınca yumşaq işıq */
.of-bg-glow{position:absolute;inset:0;opacity:0;transition:opacity .45s var(--ease);
background:radial-gradient(320px circle at var(--gx,50%) var(--gy,50%),
rgba(87,166,149,.18),rgba(87,166,149,.06) 45%,transparent 70%)}
.hm-offer:hover .of-bg-glow{opacity:1}
@media(max-width:1100px){
/* dar ekranda boş zolaq azır — blok alçalır və soluşur */
.of-stack{right:10px;bottom:-6px;gap:16px}
.of-bg-batt{opacity:.6;width:min(250px,34vw)}
}
@media(max-width:900px){
.of-fact{display:none}
.of-stack{bottom:-18px}
.of-bg-batt{opacity:.4}
}
@media(max-width:700px){
/* telefonda mətnin arxasında qalmasın deyə daha aşağıda və soluq */
.of-stack{right:-46px;bottom:-34px}
.of-bg-batt{opacity:.28;width:250px}
.of-pct{display:none}
}
@media(prefers-reduced-motion:reduce){
.of-flow{animation:none;stroke-dasharray:none;opacity:.45}
.of-seg.just rect{animation:none}
.of-bg-glow{display:none}
}
/* ── Fondakı rəqəm: hər mərhələnin öz sübutu ──────────────── */
/* rəqəm və batareya bir sütunda dayanır ki, üst-üstə düşməsinlər */
.of-stack{position:absolute;right:clamp(14px,3vw,64px);bottom:clamp(16px,3.5vh,48px);
display:flex;flex-direction:row;align-items:center;gap:clamp(16px,2.2vw,34px);pointer-events:none}
.of-fact{text-align:right;line-height:1;
transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.of-fact b{display:block;font-size:clamp(44px,5vw,78px);font-weight:600;letter-spacing:-.045em;
color:#6f9c8f;font-variant-numeric:tabular-nums;transition:color .6s var(--ease)}
.of-bg.lv1 .of-fact b{color:#4e9480}
.of-bg.lv2 .of-fact b{color:#2f8972}
.of-fact span{display:block;margin-top:6px;font-size:14.5px;font-weight:600;letter-spacing:-.01em;
color:#55786e}
.of-fact i{display:block;margin-top:3px;font-style:normal;font-size:11.5px;font-weight:650;
letter-spacing:.08em;text-transform:uppercase;color:#5d8176}
.of-fact.swap{animation:ofFact .45s var(--ease)}
@keyframes ofFact{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* ── Addım keçiddir: aktiv olanda «ətraflı» işarəsi çıxır ─── */
.of-step{text-decoration:none;color:inherit}
.of-go{
display:flex;width:fit-content;align-items:center;gap:6px;margin-top:13px;
font-style:normal;font-size:13px;font-weight:600;letter-spacing:-.01em;
color:var(--c-brand-d);
}
.of-go svg{transition:transform .25s var(--ease)}
.of-step:hover .of-go svg{transform:translateX(3px)}
.of-step.is-on{box-shadow:inset 0 0 0 1px var(--c-border)}
@media(max-width:1100px){
.of-fact b{font-size:clamp(40px,6vw,62px)}
.of-fact span{font-size:13px}
}
@media(max-width:700px){
/* telefonda rəqəm mətnin arxasına düşməsin */
.of-fact{display:none}
}
@media(prefers-reduced-motion:reduce){
.of-fact,.of-fact.swap{animation:none;transition:none}
}
/* ── Cilalama: sol kart ilə addımların bağı, ritm və fokus ── */
.hm-offer-lead{align-self:start}
.hm-offer-framed{padding:clamp(24px,2.6vw,34px)}
/* aktiv mərhələ sol kartda da görünür */
.of-now{
display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;
margin:22px 0 0;padding-top:20px;border-top:1px solid var(--c-border);
}
.of-now-k{font-size:10.5px;font-weight:650;letter-spacing:.1em;text-transform:uppercase;
color:var(--c-text-3)}
.of-now b{font-size:15px;font-weight:700;color:var(--c-brand-d);font-variant-numeric:tabular-nums}
.of-now i{font-style:normal;font-size:14.5px;font-weight:600;letter-spacing:-.015em;
color:var(--c-text-1);transition:opacity .3s var(--ease)}
.of-meter{display:flex;align-items:center;gap:14px;margin:14px 0 2px}
.of-meter-bar{flex:1 1 auto;height:5px;border-radius:999px;background:var(--c-border);overflow:hidden}
.of-meter-bar i{display:block;height:100%;width:33.33%;border-radius:999px;
background:linear-gradient(90deg,var(--c-brand),var(--c-brand-d));
box-shadow:0 0 10px rgba(45,157,136,.45);
transition:width .55s cubic-bezier(.22,1,.36,1)}
/* ── Addım sırası: ritm və aydın hover ── */
.of-steps > li + li{margin-top:0;border-top:1px solid var(--c-border)}
.of-steps > li:has(.of-step.is-on) + li,
.of-steps > li.is-prev + li{border-top-color:transparent}
.of-step{
padding:20px 18px 20px 26px;border-radius:14px;
transition:background .3s var(--ease),transform .3s var(--ease);
}
.of-step:hover{background:var(--c-surface,#f5f5f7);transform:translateX(3px)}
.of-step.is-on{background:var(--c-surface,#f5f5f7);transform:none}
.of-step:focus-visible{outline:2px solid var(--c-brand);outline-offset:3px}
.of-step .hm-step-n{font-size:.9rem;min-width:22px}
.of-h{font-size:17.5px}
.of-p > span{padding-top:10px;font-size:14.5px;line-height:1.62}
/* reyka addımların mərkəzi ilə hizalanır */
.of-rail{left:2px;top:18px;bottom:18px;width:2px}
@media(max-width:860px){
.of-now{margin-top:18px;padding-top:16px}
.of-step{padding:17px 13px 17px 22px}
.of-h{font-size:16.5px}
.of-step:hover{transform:none}
}
@media(prefers-reduced-motion:reduce){
.of-step:hover{transform:none}
}
/* ══════════════════════════════════════════════════════════
HERO KARTLARI — interaktiv
──────────────────────────────────────────────────────────
Kart statik şüşə qutu idi. İndi: kursorun ardınca içəridə
yumşaq işıq, ikon lövhəsində canlanma, kartın üzərinə
gələndə isə onu fotodakı nöqtəyə bağlayan kabel işıqlanır
və enerji axını sürətlənir (aşağıdakı bölmə ilə eyni dil).
══════════════════════════════════════════════════════════ */
/* ── Mağaza ikonları: əvvəl 11 px idi, ləkəyə dönürdü ── */
.os-pair{display:inline-flex;align-items:center;gap:7px}
.os-pair .os-ic{width:15px;height:15px;flex-shrink:0;opacity:.95}
.os-pair-sm .os-ic{width:15px;height:15px}
.os-sep{display:block;width:1px;height:13px;background:currentColor;opacity:.3;flex:none}
.hb-btn{display:flex;align-items:center;gap:11px}
.hb-btn .os-pair{flex:none;padding:0;transition:transform .25s var(--ease)}
.hb-btn:hover .os-pair{transform:scale(1.06)}
.hb-btn-tx{flex:1;text-align:left;white-space:nowrap}
/* ── Kart: kursor işığı və dərinlik ── */
.hb-in{position:relative;overflow:hidden}
.hb-in::before{
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
rgba(140,235,205,.22),transparent 68%);
transition:opacity .35s var(--ease);
}
.hbadge:hover .hb-in::before{opacity:1}
.hb-in > *{position:relative;z-index:1}
.hbadge:hover .hb-in{transform:translateY(-4px)}
/* ikon lövhəsi nəfəs alır */
.hb-icon{transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.hbadge:hover .hb-icon{
transform:translateY(-1px) scale(1.06);
border-color:rgba(170,245,222,.7);
box-shadow:inset 0 1px 0 rgba(200,255,238,.45),0 10px 24px -6px rgba(0,0,0,.5),0 0 22px rgba(127,207,190,.35);
}
/* ── Kabellərdə enerji impulsu ── */
.aln-pulse{
fill:none;stroke:#b8ffe8;stroke-width:3.4;stroke-linecap:round;
stroke-dasharray:10 5 3 150;stroke-dashoffset:0;
filter:drop-shadow(0 0 5px rgba(140,255,222,.85));
animation:alnPulse 3.6s linear infinite;
transition:stroke-width .3s var(--ease),opacity .3s var(--ease);
pointer-events:none;
}
.ap3{animation-delay:-1.8s}
@keyframes alnPulse{to{stroke-dashoffset:-168}}
/* kartın üzərinə gələndə onun öz kabeli canlanır */
.aln-pulse.is-lit{stroke-width:4.4;animation-duration:1.5s}
.aln.is-lit{stroke-width:3.8px;opacity:1}
.aorigin.is-lit{filter:drop-shadow(0 0 12px rgba(140,255,222,1))}
.aring.is-lit{opacity:.9;stroke-width:3}
@media(max-width:640px){
.os-pair .os-ic,.os-pair-sm .os-ic{width:14px;height:14px}
.hb-btn{gap:9px}
}
@media(prefers-reduced-motion:reduce){
.aln-pulse{animation:none;stroke-dasharray:none;opacity:.35}
.hb-in::before{display:none}
.hbadge:hover .hb-in,.hbadge:hover .hb-icon{transform:none}
}
/* ══════════════════════════════════════════════════════════
LAYİHƏ QALEREYASI — /layiheler/{slug}
Hər obyektdən bir neçə foto. Şəkil üzərinə basanda böyük
açılır; oxlarla, klaviatura ilə və sürüşdürməklə gəzilir.
══════════════════════════════════════════════════════════ */
.pg-grid{columns:4;column-gap:12px;column-fill:balance;margin-top:22px}
.pg-item{
position:relative;display:block;width:100%;padding:0;margin:0 0 12px;
border:1px solid var(--c-border);border-radius:14px;
overflow:hidden;background:#eef6f3;cursor:zoom-in;
break-inside:avoid;-webkit-column-break-inside:avoid;
transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s var(--ease),border-color .3s var(--ease);
}
.pg-item img{display:block;width:100%;height:auto;
transition:transform .7s cubic-bezier(.22,1,.36,1)}
.pg-item::after{content:"";position:absolute;inset:0;background:rgba(6,30,26,0);transition:background .3s var(--ease)}
.pg-item:hover{transform:translateY(-4px);border-color:var(--c-brand-t2);
box-shadow:0 24px 48px -26px rgba(15,46,42,.5)}
.pg-item:hover img{transform:scale(1.06)}
.pg-item:hover::after{background:rgba(6,30,26,.1)}
.pg-item:focus-visible{outline:2px solid var(--c-brand);outline-offset:3px}
@media(max-width:1250px){.pg-grid{columns:3}}
@media(max-width:980px){.pg-grid{columns:3;column-gap:10px}.pg-item{margin-bottom:10px}}
@media(max-width:620px){.pg-grid{columns:2;column-gap:9px}.pg-item{margin-bottom:9px}}
/* ── İşıq qutusu ── */
.pg-box{
position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;
gap:clamp(6px,2vw,26px);padding:clamp(12px,3vw,40px);
background:rgba(4,18,16,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
opacity:0;transition:opacity .28s var(--ease);
}
.pg-box[hidden]{display:none}
.pg-box.is-open{opacity:1}
.pg-fig{margin:0;max-width:min(1400px,100%);max-height:100%;display:flex;flex-direction:column;
align-items:center;gap:12px;min-width:0}
.pg-fig img{max-width:100%;max-height:calc(100vh - 150px);width:auto;height:auto;
border-radius:14px;box-shadow:0 40px 90px -40px rgba(0,0,0,.9);background:#0a241f}
.pg-fig figcaption{font-size:13px;color:rgba(255,255,255,.72);letter-spacing:-.005em;text-align:center}
.pg-x,.pg-nav{
flex:none;display:grid;place-items:center;width:46px;height:46px;border:0;border-radius:50%;
background:rgba(255,255,255,.12);color:#fff;cursor:pointer;
transition:background .2s var(--ease),transform .2s var(--ease);
}
.pg-x:hover,.pg-nav:hover{background:rgba(255,255,255,.24);transform:scale(1.06)}
.pg-x:focus-visible,.pg-nav:focus-visible{outline:2px solid #fff;outline-offset:3px}
.pg-x{position:absolute;top:clamp(12px,2.5vw,26px);right:clamp(12px,2.5vw,26px)}
@media(max-width:620px){
.pg-x,.pg-nav{width:40px;height:40px}
.pg-fig img{max-height:calc(100vh - 170px)}
.pg-nav{position:absolute;bottom:18px}
.pg-prev{left:22%}
.pg-next{right:22%}
}
@media(prefers-reduced-motion:reduce){
.pg-item,.pg-item img,.pg-box,.pg-x,.pg-nav{transition:none}
.pg-item:hover{transform:none}
.pg-item:hover img{transform:none}
}
/* ── Mobil: mərhələ seçicisi əvəzinə üç müstəqil kart ──────
Telefonda akkordeon pis işləyirdi: birinci toxunuş yalnız
mətni açırdı, ikincisi isə gözlənilmədən səhifəni dəyişirdi;
üstəlik blok özü irəlilədiyi üçün oxunan mətn altdan qaçırdı.
İndi üç addımın da mətni açıqdır, hər biri adi keçiddir —
bir toxunuş = bir nəticə. Soldakı təkrar sətir gizlənir. */
@media(max-width:860px){
.of-now,.of-meter{display:none}
.of-rail{display:none}
.of-steps{padding-left:0}
.of-steps > li + li{border-top:0;margin-top:10px}
.of-step{
display:grid;grid-template-columns:auto minmax(0,1fr);gap:13px;
padding:16px 16px 17px;border:1px solid var(--c-border);border-radius:14px;
background:#fff;transform:none;
}
.of-step:hover,.of-step.is-on{background:#fff;transform:none;box-shadow:none}
.of-step:active{background:var(--c-surface,#f5f5f7)}
.of-step .hm-step-n{color:var(--c-brand-d);transform:none;padding-top:2px}
.of-h{color:var(--c-text-1);font-size:16.5px}
/* bütün mətnlər açıq */
.of-p{grid-template-rows:1fr;opacity:1}
.of-p > span{padding-top:7px;font-size:14px}
.of-go{margin-top:11px}
.hm-offer-framed{padding:22px}
}
/* ── Ana səhifə: layihələr zolağı ──────────────────────────
Biznes təklifindən sonra üç real obyekt. Kart komponenti
/layiheler səhifəsindəkinin eynidir, burada yalnız başlıq
sətri üçün stil var. */
.hm-proj-head{display:flex;align-items:flex-end;justify-content:space-between;gap:26px;margin-bottom:26px}
.hm-proj-head h2{margin:8px 0 0;font-size:clamp(24px,2.5vw,34px);font-weight:600;
letter-spacing:-.028em;line-height:1.15}
.hm-proj-head p{margin:9px 0 0;font-size:15px;color:var(--c-text-3);max-width:44em}
.hm-proj-more{flex:none;display:inline-flex;align-items:center;gap:7px;padding-bottom:4px;
font-size:14px;font-weight:600;color:var(--c-brand-dd);text-decoration:none;
transition:gap .2s var(--ease)}
.hm-proj-more:hover{gap:11px}
@media(max-width:720px){
.hm-proj-head{flex-direction:column;align-items:flex-start;gap:14px}
.hm-proj-head p{font-size:14px}
}
/* ── Məhsul səhifəsi: quraşdırıldığı layihələr ─────────────
Texniki cədvəldən sonra alıcı cihazı real obyektdə görür.
Kart komponenti /layiheler ilə eynidir. */
/* Zolaq dar konteynerdə (1240 px) sıxılırdı — kart cəmi 390 px olurdu
və foto/cihaz xınaları xırdalanırdı. Burada konteyner genişdir. */
.hm-proj > .container{max-width:1600px}
.hm-proj .pj-grid.is-3{gap:26px}
@media(max-width:1280px){.hm-proj .pj-grid.is-3{gap:20px}}
.pd-proj{margin-top:clamp(44px,5vw,72px)}
.pd-proj-head{display:flex;align-items:flex-end;justify-content:space-between;gap:26px;margin-bottom:24px}
.pd-proj-head .pd-features-title{margin:10px 0 0}
.pd-proj-sub{margin:10px 0 0;font-size:15px;line-height:1.6;color:var(--c-text-3);max-width:62ch}
@media(max-width:720px){
.pd-proj-head{flex-direction:column;align-items:flex-start;gap:14px}
.pd-proj-sub{font-size:14px}
}
/* ── Layihə hero qalereyası ────────────────────────────────
Əvvəl obyektin fotoları səhifənin aşağısında ayrıca böyük
bölmə kimi dururdu və çox yer tuturdu. İndi əsas fotonun
yanında nazik kadr zolağı var: kiçik kadra basanda böyük
şəkil dəyişir, böyük şəklə basanda isə işıq qutusu açılır. */
.pd-gal{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start}
.pd-gal-main{position:relative;border-radius:22px;overflow:hidden;background:#eef6f3;
box-shadow:0 30px 70px -40px rgba(15,46,42,.55);cursor:zoom-in}
.pd-gal-main > img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
transition:transform .7s cubic-bezier(.22,1,.36,1)}
.pd-gal-main:hover > img{transform:scale(1.03)}
.pd-gal-zoom{
position:absolute;right:14px;bottom:14px;display:inline-flex;align-items:center;gap:6px;
padding:7px 12px;border-radius:999px;font-size:12.5px;font-weight:650;
color:#fff;background:rgba(6,30,26,.6);backdrop-filter:blur(6px);pointer-events:none;
}
/* yan zolaq — şaquli */
.pd-gal-rail{order:-1;display:flex;flex-direction:column;gap:10px;
max-height:min(70vh,520px);overflow:auto;padding-right:2px;scrollbar-width:thin}
.pd-thumb{
flex:none;width:76px;padding:0;border:1px solid var(--c-border);border-radius:11px;
overflow:hidden;background:#eef6f3;cursor:pointer;aspect-ratio:4/3;
transition:border-color .25s var(--ease),transform .25s var(--ease),opacity .25s var(--ease);
opacity:.72;
}
.pd-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.pd-thumb:hover{opacity:1;transform:translateX(2px)}
.pd-thumb.is-on{opacity:1;border-color:var(--c-brand);box-shadow:0 0 0 2px var(--c-brand-t2)}
.pd-thumb:focus-visible{outline:2px solid var(--c-brand);outline-offset:2px}
@media(max-width:900px){
/* dar ekranda zolaq fotonun altına üfüqi düzülür */
.pd-gal{grid-template-columns:1fr;gap:10px}
.pd-gal-rail{order:1;flex-direction:row;max-height:none;overflow-x:auto;padding-bottom:4px}
.pd-thumb{width:84px}
}
/* ══ Mobil toxunma hədəfləri ═══════════════════════════════════
Barmaq üçün minimum 40–44px. Əvvəl futer keçidləri 16–28px,
mətn keçidləri 22–26px idi — yan-yana düşəndə səhv basılırdı. */
@media(max-width:640px){
.footer-col ul{gap:0}
.footer-col a{display:block;padding:12px 0;line-height:1.25}
.hm-textlink,.hm-proj-more,.pb-more{padding-top:10px;padding-bottom:10px}
.nav-toggle{width:44px;height:44px}
}
/* ══ Məhsul səhifəsi — informasiya arxitekturası ═══════════════
Dizayn qərarı: bu səhifədə insan emosional seçim yox, mühəndis
qərarı verir. Ona görə broşür dili (kölgə, iri yuvarlaqlıq,
səxavətli boşluq) deyil, TEXNİKİ SƏNƏD dili işlədilir:
saç damarı xətlər, ölçülü boşluq, monospace rəqəmlər.
Rəqəmlər tabular-nums ilə sütun kimi düzülür ki, göz şaquli
müqayisə apara bilsin. */
:root{
--pa-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
--pa-line:#dfe5e3; --pa-line-2:#eef2f1;
}
.pa-lbl{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--c-text-3)}
.pa-h{font-size:13px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--c-text-1);margin:0 0 6px}
/* ── Güc miqyası: bütün çeşid tək loqarifmik oxda ── */
.pa-scale{border-top:1px solid var(--c-text-1);border-bottom:1px solid var(--pa-line);padding:26px 0 30px}
.pa-scale-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:20px}
.pa-scale-now{font-family:var(--pa-mono);font-size:13px;font-weight:700;color:var(--c-brand-dd);white-space:nowrap}
.pa-rail{position:relative;height:74px}
.pa-rail-line{position:absolute;left:0;right:0;top:19px;height:2px;background:var(--pa-line)}
.pa-band{position:absolute;top:14px;height:12px;background:var(--c-brand-dd);opacity:.18}
.pa-pt{position:absolute;top:13px;width:2px;height:14px;background:var(--pa-line);transform:translateX(-1px)}
.pa-pt span{position:absolute;top:20px;left:50%;transform:translateX(-50%);font-family:var(--pa-mono);
font-size:10.5px;color:var(--c-text-3);white-space:nowrap}
.pa-pt.is-lo span{top:38px}
.pa-pt.is-lo::after{content:"";position:absolute;left:50%;top:27px;width:1px;height:11px;background:var(--pa-line)}
.pa-pt.is-on{background:var(--c-brand-dd);width:3px;height:22px;top:9px}
.pa-pt.is-on span{color:var(--c-brand-dd);font-weight:700}
/* ── Tərcümə: rəqəm deyil, nəticə ── */
.pa-tr{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--pa-line)}
.pa-tr-c{padding:30px 28px 28px;border-right:1px solid var(--pa-line-2);min-width:0}
.pa-tr-c:last-child{border-right:0}
.pa-tr-c:first-child{padding-left:0}
.pa-tr-n{font-family:var(--pa-mono);font-size:38px;font-weight:600;letter-spacing:-.04em;line-height:1;
margin:12px 0 8px;color:var(--c-text-1);font-variant-numeric:tabular-nums}
.pa-tr-n i{font-style:normal;font-size:17px;color:var(--c-text-3);font-weight:500}
.pa-tr-n.pa-tr-w{font-family:inherit;font-size:25px;letter-spacing:-.02em;line-height:1.15}
.pa-tr-t{margin:0;font-size:14.5px;line-height:1.5;color:var(--c-text-2)}
.pa-tr-a{display:block;margin-top:12px;font-size:11.5px;line-height:1.45;color:var(--c-text-3)}
/* ── Uyğunluq: yoxluq da məlumatdır, ona görə üstüxətli göstərilir ── */
.pa-fit{display:grid;grid-template-columns:200px 1fr;border-bottom:1px solid var(--pa-line)}
.pa-fit-h{padding:30px 28px 30px 0}
.pa-fit-b{padding:30px 0 30px 28px;border-left:1px solid var(--pa-line-2)}
.pa-conns{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.pa-conn{padding:9px 15px;border:1px solid var(--c-text-1);font-family:var(--pa-mono);
font-size:13.5px;font-weight:600;color:var(--c-text-1)}
.pa-conn.is-off{border-color:var(--pa-line);color:#b9c4c1;text-decoration:line-through}
.pa-scen{display:flex;gap:8px;flex-wrap:wrap}
.pa-sc{padding:7px 13px;border:1px solid var(--pa-line);font-size:13px;color:var(--c-text-3)}
.pa-sc.is-yes{border-color:var(--c-brand-dd);color:var(--c-brand-dd);
background:var(--c-brand-t);font-weight:600}
@media(max-width:820px){
.pa-scale-top{flex-wrap:wrap;gap:6px}
.pa-tr{grid-template-columns:1fr}
.pa-tr-c{border-right:0;border-bottom:1px solid var(--pa-line-2);padding:26px 0}
.pa-tr-c:last-child{border-bottom:0}
.pa-fit{grid-template-columns:1fr}
.pa-fit-h{padding:28px 0 12px}
.pa-fit-b{border-left:0;padding:0 0 28px}
.pa-rail{height:68px}
.pa-pt span{font-size:9.5px}
}
/* ══ Məhsullar — yan filtr paneli ═════════════════════════════
Əvvəl filtrlər "Filtr" düyməsinin arxasında gizli idi: istifadəçi
hansı süzgəclərin olduğunu bilmirdi. İndi masaüstündə panel SOLDA
və HƏMİŞƏ AÇIQdır, məhsullar sağda. Mobildə yer çatmadığına görə
köhnə açılan panel olduğu kimi qalır. */
@media(min-width:901px){
.pr-layout{display:grid;grid-template-columns:252px minmax(0,1fr);gap:26px;align-items:start}
.pr-side{position:sticky;top:calc(var(--nav-h,68px) + 16px)}
/* Düymə artıq lazım deyil — panel onsuz da görünür */
.pr-filter-btn{display:none}
/* Açılma-bağlanma mexanizmi masaüstündə söndürülür */
.pr-layout .pr-filter-wrap,
.pr-layout .pr-filter-wrap:not(.is-open){
display:block;max-height:none;grid-template-rows:none;
opacity:1;margin-bottom:0;transition:none;overflow:visible;
}
.pr-layout .pr-filter-wrap > *{overflow:visible;min-height:0}
/* Panel: eyni şüşə görünüşü, amma şaquli */
.pr-layout .prod-filter-bar{
flex-direction:column;align-items:stretch;flex-wrap:nowrap;
gap:0;padding:16px 16px 18px;margin:0;
}
.pr-layout .prod-filter-group{
flex-direction:column;align-items:stretch;width:100%;
gap:6px;padding:14px 0 0;margin:0;
}
.pr-layout .prod-filter-group + .prod-filter-group{
margin-top:14px;border-top:1px solid var(--c-border);
}
.pr-layout .prod-filter-group:first-child{padding-top:0}
.pr-layout .prod-filter-label{
display:block;margin:0 0 4px;font-size:10.5px;font-weight:700;
letter-spacing:.12em;text-transform:uppercase;color:var(--c-text-3);
}
/* Həblər tam enli sətirlərə çevrilir — şaquli siyahıda daha oxunaqlı */
.pr-layout .prod-filter-pill{
display:flex;flex-direction:row;align-items:center;justify-content:flex-start;
gap:7px;width:100%;text-align:left;padding:9px 13px;line-height:1.2;
}
.pr-layout .pf-reg{margin-left:auto;opacity:.75}
/* Sayğac sətri məhsulların üstündə qalır */
.pr-bar{margin-bottom:16px}
.prod-grid{margin-top:0!important}
.prod-filter-group{overflow:visible}
}
/* Çox dar masaüstündə rey biraz nazikləşir */
@media(min-width:901px) and (max-width:1140px){
.pr-layout{grid-template-columns:216px minmax(0,1fr);gap:20px}
}
/* ── Məhsullar səhifəsi ekranın tam enini tutur ──────────────
Konteyner 1160px-də kilidli idi: 1920px monitorda sağda və solda
~380px boş yer qalırdı. Yalnız məhsul bölməsi açılır — FAQ-ın
mətn sütunu öz max-width-i ilə mərkəzdə qalır (uzun sətir
oxunmur), ona görə ona toxunulmur. */
@media(min-width:901px){
body.page-products .stn-section > .container{max-width:none;padding:0 24px}
body.page-products .stn-section > .container > .section-header{max-width:1160px;margin-left:auto;margin-right:auto}
.pr-layout{gap:24px}
}
@media(min-width:1500px){
.pr-layout{grid-template-columns:272px minmax(0,1fr);gap:28px}
}
@media(min-width:901px){
.pr-main .prod-grid{grid-template-columns:repeat(auto-fill,minmax(292px,1fr))}
}
/* ── Məhsul kartı yığcamlaşdırılır ───────────────────────────
Kart 741px idi: təsvir 4 sətrə qədər uzanır, boşluqlar isə
lazım olandan böyük idi. Məzmun eynidir — yalnız sıxlıq artır. */
@media(min-width:901px){
.pr-main .pc-body{padding-top:16px;padding-bottom:18px}
.pr-main .pc-top{margin-bottom:8px}
.pr-main .pc-specs{margin-bottom:8px}
.pr-main .pc-conns{margin-top:9px}
/* Təsvir iki sətirdə kəsilir — tam mətn detal səhifəsindədir.
Bu həm də kart hündürlüklərini bərabərləşdirir. */
.pr-main .pc-desc{
max-height:3.3em;overflow:hidden;margin-bottom:12px;flex:none;
-webkit-mask-image:linear-gradient(180deg,#000 62%,rgba(0,0,0,.15) 100%);
mask-image:linear-gradient(180deg,#000 62%,rgba(0,0,0,.15) 100%);
}
.pr-main .p-price{margin-top:6px;margin-bottom:2px}
.pr-main .p-stock{margin-bottom:8px}
/* Şəkil kartın 39%-ni tuturdu (4:3 = 266px). 3:2-yə endirilir —
hələ də iri qalır, amma kart ~30px qısalır. */
.pr-main .pc-media{aspect-ratio:3/2}
/* Güc/Növ qutusu: hündürlük xanaların daxili boşluğundan gəlir */
.pr-main .pc-spec{padding-top:6px;padding-bottom:6px}
.pr-main .pc-spec span{margin-top:1px}
.pr-main .pc-name{margin-bottom:8px}
/* CTA aşağı itələnib kartda boşluq yaradırdı — məzmunun ardınca gəlsin */
.pr-main .pc-cta{margin-top:4px}
.pr-main .pc-body{justify-content:flex-start}
}
/* ── Güc sürüşdürücüsü ───────────────────────────────────────
Dəstəklər doğma input[type=range] deyil, adi düymələrdir —
iki dəstəyi üst-üstə qoyanda doğma inputlar nə siçanla, nə
barmaqla etibarlı sürüşmürdü. Ölçü 24px (mobildə 28px):
barmaq üçün minimum toxunma hədəfi. */
.pw-group{padding-bottom:4px;width:100%;display:block!important;
overflow:visible!important;flex:1 1 100%}
.pw-out,.pw-reset{width:100%;min-width:0}
.pw-out{display:block;font-size:12.5px;font-weight:700;color:var(--c-brand-dd);
margin-bottom:14px;font-variant-numeric:tabular-nums}
.pw-slider{position:relative;height:30px;margin:0 12px 2px;touch-action:none;
-webkit-user-select:none;user-select:none}
.pw-rail{position:absolute;left:0;right:0;top:13px;height:4px;border-radius:4px;
background:var(--c-border)}
.pw-fill{position:absolute;top:0;height:100%;border-radius:4px;background:var(--c-brand-d)}
.pw-thumb{position:absolute;top:3px;width:24px;height:24px;margin-left:-12px;padding:0;
border:2px solid var(--c-brand-d);border-radius:50%;background:#fff;cursor:grab;
box-shadow:0 2px 6px rgba(12,40,36,.26);transition:transform .12s var(--ease);touch-action:none}
.pw-thumb:hover{transform:scale(1.08)}
.pw-slider.is-drag .pw-thumb{cursor:grabbing;transition:none}
.pw-thumb:focus-visible{outline:2px solid var(--c-brand);outline-offset:3px}
.pw-reset{margin-top:10px;padding:0;border:0;background:none;text-align:left;
font:inherit;font-size:12px;color:var(--c-muted);text-decoration:underline;
text-underline-offset:2px;cursor:pointer}
.pw-reset:hover{color:var(--c-brand-dd)}
.pw-empty{padding:26px 2px;color:var(--c-muted);font-size:14.5px}
.prod-card[hidden]{display:none}
@media(max-width:900px){
.prod-filter-bar .pw-group{width:100%;flex-basis:100%}
.pw-slider{height:36px;margin:0 14px 4px}
.pw-rail{top:16px}
.pw-thumb{width:28px;height:28px;margin-left:-14px;top:4px}
}
/* ── Məhsulun foto qalereyası ────────────────────────────────
Masonry şəbəkə: fotoların öz nisbəti saxlanılır (portret və
landşaft qarışıqdır), kəsilmir. İşıq qutusu CSS-i layihə
qalereyası ilə ortaqdır (.pg-box, .pg-nav, .pg-fig). */
.pgp{margin-top:56px}
.pgp-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.pgp-title{margin:6px 0 0;font-size:26px;font-weight:600;letter-spacing:-.026em}
.pgp-count{font-size:12.5px;color:var(--c-text-3);font-variant-numeric:tabular-nums}
.pg-item.pgp-item{display:block;width:100%;padding:0;border:1px solid var(--c-border);
background:var(--c-surface-2);cursor:zoom-in}
@media(max-width:1100px){.pg-grid{columns:3}}
@media(max-width:760px){.pg-grid{columns:2;column-gap:10px}.pgp-title{font-size:21px}}
/* ══ Məhsul detal səhifəsi — peşəkar düzüm ════════════════════
Problemlər: konteyner 1160px-də kilidli idi (1920-də hər tərəfdən
380px ölü sahə), texniki cədvəl isə kartın yalnız sağ yarısını
tuturdu və sərhədini aşırdı. Məhsullar siyahısı ilə eyni enə
gətirilir; mətn blokları isə oxunaqlılıq üçün dar saxlanılır. */
@media(min-width:901px){
body.page-product-detail section > .container{
max-width:1560px;padding-left:24px;padding-right:24px;
}
/* Hero: şəkil böyüyür, alış paneli yanında sabit enli qalır */
body.page-product-detail .pd-grid{
grid-template-columns:minmax(0,1.15fr) minmax(430px,.85fr);
gap:clamp(32px,4vw,64px);max-width:1340px;
}
/* Texniki cədvəl kartın bütün enini tutur.
Başlıq öz sətrində, cədvəl isə avtomatik sütunlarda. */
body.page-product-detail .pd-specs{display:block;padding:clamp(22px,2.4vw,34px)}
body.page-product-detail .pd-specs h2{margin-bottom:18px}
body.page-product-detail .pd-specs-table{
display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
gap:0 clamp(28px,3vw,56px);
}
/* Mətn ağırlıqlı bloklar tam enə yayılmasın — sətir uzun olur */
body.page-product-detail .pd-features-title,
body.page-product-detail .pd-compat-lead,
body.page-product-detail .pd-proj-sub{max-width:62ch}
}
@media(min-width:1500px){
body.page-product-detail .pd-features .feat-grid{
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
}
/* ══ Məhsul detal səhifəsi — MOBİL ════════════════════════════
Problem: mobil maket masaüstünün yığılmış variantı idi — eyni
tipoqrafiya ölçüləri, eyni boşluqlar. Səhifə 390px-də 8965px
hündürlükdə idi (~11 ekran). Burada ölçülər telefona uyğunlaşır;
məzmun eyni qalır, heç nə gizlədilmir. */
@media(max-width:640px){
/* Hero: üç qısa fakt şaquli yığılmaq əvəzinə bir sətirdə qalır */
body.page-product-detail .pd-quick{grid-template-columns:repeat(3,1fr);margin-bottom:20px}
body.page-product-detail .pd-quick-item{padding:11px 10px;border-left:1px solid var(--c-border);border-top:none}
body.page-product-detail .pd-quick-item:first-child{border-left:none}
body.page-product-detail .pd-quick-item dt{font-size:9.5px;letter-spacing:.5px;margin-bottom:3px}
body.page-product-detail .pd-quick-item dd{font-size:13px;line-height:1.25}
body.page-product-detail .pd-grid{gap:22px}
body.page-product-detail .pd-sub,
body.page-product-detail .pd-grid > div > p{font-size:14.5px;line-height:1.55}
/* Tərcümə blokları: rəqəmlər telefon üçün çox iri idi */
.pa-tr-c{padding:18px 0}
.pa-tr-n{font-size:28px;margin:8px 0 6px}
.pa-tr-n i{font-size:14px}
.pa-tr-n.pa-tr-w{font-size:19px}
.pa-tr-t{font-size:13.5px}
.pa-tr-a{font-size:11px;margin-top:8px}
/* Güc miqyası: 390px-də etiketlər bir-birinə dəyirdi */
.pa-scale{padding:18px 0 20px}
.pa-rail{height:60px}
.pa-pt span{font-size:8.5px;letter-spacing:0}
.pa-pt.is-lo span{top:34px}
.pa-fit-h{padding:20px 0 10px}
.pa-fit-b{padding:0 0 20px}
.pa-conn{padding:7px 11px;font-size:12px}
.pa-sc{padding:6px 10px;font-size:12px}
/* Xüsusiyyət kartları: 4 nəhəng kart əvəzinə 2 sütun, yığcam */
body.page-product-detail .pd-features .feat-grid{grid-template-columns:repeat(2,1fr);gap:10px}
body.page-product-detail .feat-card{padding:14px 13px;border-radius:14px}
body.page-product-detail .feat-card h3{font-size:14px;margin-bottom:5px}
body.page-product-detail .feat-card p{font-size:12.5px;line-height:1.45}
body.page-product-detail .feat-icon,
body.page-product-detail .feat-card > span:first-child{width:34px;height:34px;margin-bottom:9px}
/* Bölmələr arası ritm telefona görə sıxılır */
body.page-product-detail .pd-features,
body.page-product-detail .pd-specs{margin-top:34px}
body.page-product-detail .pgp{margin-top:34px}
body.page-product-detail .pd-features-title{font-size:19px;margin-bottom:14px}
body.page-product-detail .pd-specs{padding:16px 15px}
body.page-product-detail .pd-specs h2{font-size:19px}
.pgp-title{font-size:19px}
}
/* Qalereya: mobildə ilk 6 şəkil, qalanı düymə ilə açılır */
.pgp-more{display:none}
@media(max-width:640px){
.pgp-more{display:block;width:100%;margin-top:14px;padding:13px;
border:1px solid var(--c-border);border-radius:12px;background:var(--c-bg);
font:inherit;font-size:13.5px;font-weight:600;color:var(--c-brand-dd);cursor:pointer}
.pgp:not(.is-all) .pg-item:nth-of-type(n+7){display:none}
}
/* ══ Layihələr səhifəsi — filtr reyi və şəbəkə xülasəsi ═══════
Məhsullar səhifəsi ilə eyni sinif adları (pr-layout/pr-side)
işlədilir — vizual dil və açılış-bağlanış məntiqi ortaqdır,
kod təkrarlanmır. */
.pj-sum-sec{padding-top:8px}
.pj-sum{display:grid;grid-template-columns:repeat(4,1fr);
border:1px solid var(--c-border);border-radius:var(--r);overflow:hidden;
background:var(--c-surface);margin-bottom:22px}
.pj-sum-i{padding:16px 18px;border-left:1px solid var(--c-border)}
.pj-sum-i:first-child{border-left:none}
.pj-sum-i b{display:block;font-size:26px;font-weight:700;letter-spacing:-.03em;
color:var(--c-text-1);font-variant-numeric:tabular-nums;line-height:1}
.pj-sum-i span{display:block;margin-top:5px;font-size:11.5px;color:var(--c-text-3);line-height:1.3}
.pj-empty{padding:40px 2px;color:var(--c-muted);font-size:15px}
.pj-empty a{color:var(--c-brand-dd);font-weight:600}
/* Layihə səhifəsi də ekranın tam enini tutur */
@media(min-width:901px){
body.page-projects section > .container{max-width:1560px;padding-left:24px;padding-right:24px}
/* Kartlar geniş ekranda həddən artıq böyüyürdü (1920-də 605px) */
.pr-main .pj-grid{grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
}
@media(max-width:900px){
.pj-sum{grid-template-columns:repeat(2,1fr)}
.pj-sum-i{border-top:1px solid var(--c-border)}
.pj-sum-i:nth-child(-n+2){border-top:none}
.pj-sum-i:nth-child(odd){border-left:none}
}
@media(max-width:640px){
.pj-sum-i{padding:12px 13px}
.pj-sum-i b{font-size:21px}
.pj-sum-i span{font-size:10.5px}
}
/* ── Layihə kartı — mobil yığcamlıq ──────────────────────────
Kart 486px idi, media bloku onun 73%-ni tuturdu. Foto nisbəti
və yan panel telefona uyğunlaşır; məzmun eyni qalır. */
@media(max-width:640px){
.pj-media{padding:8px;gap:8px}
.pj-shot-wrap{aspect-ratio:16/10}
.pj-side{gap:8px;max-height:72px}
.pj-logo{padding:7px 9px}
.pj-body{padding:2px 12px 12px}
.pj-name{font-size:15.5px;min-height:0;margin-top:5px}
.pj-foot{margin-top:9px;padding-top:9px}
/* Mobildə "Layihəyə bax" hover olmadığına görə həmişə görünür */
.pj-go{opacity:1;transform:none}
}
/* ── Layihələr: yığcam başlıq zolağı ─────────────────────────
Hero 282px + ayrıca xülasə 88px idi; telefonda ilk kart 488px
aşağıda qalırdı. İndi başlıq və rəqəmlər tək zolaqdadır. */
.pj-hero{padding:calc(var(--nav-h,68px) + 20px) 0 20px}
.pj-hero-t{margin:0 0 16px;font-size:clamp(23px,2.6vw,32px);font-weight:600;
letter-spacing:-.028em;line-height:1.1;color:#fff;text-align:left}
.pj-hero .pj-sum{margin-bottom:0;background:rgba(255,255,255,.07);
border-color:rgba(255,255,255,.17)}
.pj-hero .pj-sum-i{border-left-color:rgba(255,255,255,.17);padding:13px 16px}
.pj-hero .pj-sum-i b{color:#fff;font-size:23px}
.pj-hero .pj-sum-i span{color:rgba(255,255,255,.72)}
@media(max-width:900px){
.pj-hero .pj-sum-i{border-top-color:rgba(255,255,255,.17)}
}
@media(max-width:640px){
.pj-hero{padding:calc(var(--nav-h,68px) + 14px) 0 16px}
.pj-hero-t{font-size:21px;margin-bottom:12px}
.pj-hero .pj-sum-i{padding:10px 12px}
.pj-hero .pj-sum-i b{font-size:19px}
}
/* ── Səhifə yüklənmə zolağı ──────────────────────────────────
Başlığın da üstündə (z-index 300 > header 200) ki, sticky
menyu onu örtməsin. */
.page-bar{
position:fixed;top:0;left:0;height:3px;width:0;z-index:300;
background:linear-gradient(90deg,var(--c-brand-d,#1d7a6f),var(--c-brand,#2d9d88));
opacity:0;pointer-events:none;
transition:width .18s ease-out,opacity .22s ease-out;
}
.page-bar.is-on{opacity:1}
.page-bar::after{
content:"";position:absolute;right:0;top:0;height:100%;width:70px;
background:linear-gradient(90deg,transparent,var(--c-brand,#2d9d88));
filter:blur(1px);
}
@media (prefers-reduced-motion: reduce){ .page-bar{display:none} }