`-nin ümumi qaydası (`margin:0 0 1em`) buraya da
düşürdü və sütunun 22px-lik alt boşluğunun üstünə təxminən 12px
əlavə edirdi. Yəni © sətrinin altındakı boşluq 34px idi, üstündəki
isə 12px — göz onu «aşağı sürüşməyib» kimi oxuyur. */
.side-copy{margin:0;font-size:.72rem;color:var(--ink3);letter-spacing:.04em;text-align:center}
/* Versiya solğundur — nasazlıq bildirəndə lazım olur, oxumaq üçün yox. */
.side-copy .ver{opacity:.55}
.portal-nav:hover{color:var(--acc2);text-decoration:underline;text-underline-offset:4px}
.icons{display:flex;flex-wrap:wrap;gap:8px}
/* ⚠️ ÇƏRÇİVƏ YOXDUR (istifadəçinin tələbi). Ölçü isə QALIR: 32px toxunma
sahəsidir — telefonda barmaq ikonun özünə yox, ətrafına dəyir. */
.icons{gap:10px}
/* Əlaqə səhifəsindəki ikon bloku — sol sütundan bura köçdü. */
.contact-links{margin-top:26px}
.contact-links .icons{margin-top:10px}
/* Rəng `--b` ilə hər ikonun ÖZ etiketindən gəlir (bax header.php). */
.icons a{display:grid;place-items:center;width:32px;height:32px;color:var(--b,var(--ink2))}
.icons a:hover{opacity:.7}
/* Sosial kanallar dolu dairədir — xətti ikonlarla bir sətirdə olduqları
üçün formaca da seçilirlər, təkcə rənglə yox. */
.icons .soc{width:24px;height:24px;border-radius:50%;background:var(--b);color:#fff;
font-size:.66rem;font-weight:700;letter-spacing:0;line-height:1}
/* Dolğun dairənin içindəki cizim ağdır — `currentColor` onu özü tutur. */
.icons .soc svg{width:14px;height:14px}
/* Futerdə fon yoxdur, ona görə cizim böyük ola bilər. */
.page-foot .soc svg{width:16px;height:16px}
/* Ünvan mətni sol menyudan çıxarıldı — xəritə ikonu onsuz da var
(istifadəçinin qərarı). Altlıqda qalır. */
.addr{display:none}
.side-toggle{display:none}
/* ── Məzmun ───────────────────────────────────────────────── */
/* ⚠️ Məzmun sol sütuna YAPIŞMAMALIDIR. `.container` özü mərkəzləşir, amma
ekran daraldıqca (məs. 1200px) qalan sahə `max-width`-dən kiçik olur və
mətn sütunun kənarına dirənir. Ona görə boşluq `.main`-in ÖZÜNDƏDİR —
hansı ekranda olursa olsun, nəfəs yeri qalır. */
/* ⚠️ `padding-bottom` sabit futerin hündürlüyünə görədir — olmasa
səhifənin son sətirləri onun altında gizlənər. */
.main{margin-left:var(--sb);min-height:100vh;display:flex;flex-direction:column;
padding-left:clamp(24px,3.2vw,72px);padding-right:clamp(24px,3.2vw,72px);
padding-bottom:76px}
main{flex:1}
.container{max-width:1080px;margin:0 auto;padding:0}
.section{padding:96px 0;border-bottom:1px solid var(--line)}
/* ⚠️ SONUNCU bölmənin altında xətt olmur. O xətt bölmələri BİR-BİRİNDƏN
ayırmaq üçündür; sonuncudan sonra ayrılası bir şey yoxdur və xətt
futerin öz üst xətti ilə cütləşib qoşa zolaq kimi görünürdü.
Yalnız Xidmətlər səhifəsində deyil — sonu bölmə ilə bitən hər
səhifədə eyni hal var idi. */
main > .section:last-child{border-bottom:0}
.section-soft{background:var(--bg2)}
/* Siyahı səhifələrində üstdə hero yoxdur — 96px boşluq oradan qalmışdı
və məzmunu səbəbsiz aşağı itələyirdi. */
.section-tight{padding-top:28px}
/* ⚠️ Səhifə adından SONRA gələn ilk bölmə: `.section`-un 96px-lik üst
boşluğu başlıqla mətn arasında ~106px açırdı — başlıq öz səhifəsindən
qopmuş kimi görünürdü. O boşluq bölmələr ARASI üçün nəzərdə tutulub,
başlığın altı üçün yox. */
.page-head + .section{padding-top:26px}
.section-head{max-width:60ch;margin-bottom:48px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.eyebrow{display:block;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);margin-bottom:18px}
/* hero */
/* ⚠️ `position:relative` + `overflow:hidden` — fon hero-nun içində
qalsın. Onsuz `slice` ilə böyüdülən SVG bölmədən daşıb altdakı
məzmunun üstünə çıxardı. */
/* ⚠️ SABİT BOŞLUQ İŞƏ YARAMADI. Əvvəl 104/88, sonra 0/72, sonra 38/48
sınandı — heç biri düzgün görünmədi, çünki məsələ boşluqda deyildi:
ana səhifədə hero-dan başqa məzmun yoxdur (xidmətlər, xəbərlər və CTA
blokları qəsdən silinib), ona görə blok yuxarıda qalır və altında
yarım ekran boşluq açılır. Sabit rəqəm bunu düzəldə bilməzdi —
boşluğun ölçüsü EKRANIN hündürlüyündən asılıdır.
Həll: blok qalan sahəni tutur və İÇİNDƏ şaquli mərkəzləşir
(`.hero-full`, aşağıda). Buradakı boşluq yalnız dar ekran üçün
qorunma qatıdır — orada məzmun ekrandan uzun olduğu üçün
mərkəzləşmə onsuz da işləmir. */
.hero{position:relative;overflow:hidden;padding:38px 0 48px;
border-bottom:1px solid var(--line)}
/* ⚠️ `:has()` işlədilir, çünki `main` YALNIZ ana səhifədə flex sütun
olmalıdır. Qaydanı bütün `main`-lərə versək, digər səhifələrdə
abzas boşluqlarının birləşməsi (margin collapse) dayanar və
səhifələrin ritmi səssizcə dəyişərdi.
⚠️ `:has()` dəstəklənməyən köhnə brauzerdə səhifə BUGÜNKÜ kimi
görünür — pozulmur, sadəcə mərkəzləşmir. */
main:has(.hero-full){display:flex;flex-direction:column}
.hero-full{flex:1;display:flex;align-items:center}
.hero-full > .container{width:100%}
/* Mətn fonun ÜSTÜNDƏDİR. */
.hero-inner{position:relative;z-index:1}
/* ⚠️ `fixed`, `absolute` DEYİL — fon bütün görünən sahəni tutmalıdır
(istifadəçinin tələbi), hero bölməsinin hündürlüyünü yox.
⚠️ `left:var(--sb)` — sol menyu fonun altında qalmasın. Sabit rəqəm
yazmıram: sütunun eni `--sb` dəyişənindədir və bir yerdən idarə
olunur.
⚠️ `.main`-in yan boşluğu (24–72px) fona ŞAMİL OLMUR: `fixed`
element valideynin padding-inə tabe deyil, ona görə fon kənarlara
qədər gedir — məhz istənilən budur. */
.hero-bg{position:fixed;left:var(--sb);right:0;top:0;bottom:0;
z-index:0;pointer-events:none;color:var(--line)}
@media (max-width:900px){
/* Dar ekranda sol menyu ekrandan kənardadır — fon tam eni tutur. */
.hero-bg{left:0}
}
.hero-bg svg{width:100%;height:100%;display:block}
/* İşıq qatları yavaş-yavaş sürüşür: fon «canlı» olur, amma hərəkət
göz altında hiss olunmur. */
.hb-a{animation:hbA 30s ease-in-out infinite alternate}
.hb-b{animation:hbB 34s ease-in-out infinite alternate}
.hb-c{animation:hbC 26s ease-in-out infinite alternate}
@keyframes hbA{from{transform:translate(0,0)}to{transform:translate(-80px,54px)}}
@keyframes hbB{from{transform:translate(0,0)}to{transform:translate(70px,-46px)}}
@keyframes hbC{from{transform:translate(0,0)}to{transform:translate(-46px,-60px)}}
/* Dəftər xətləri — tərpənmir. Hərəkət edən xətlər fonu deyil,
səhifəni sürüşən kimi göstərir və gözü yorur. */
.hb-rules{opacity:.20}
/* ── Qeydlər ───────────────────────────────────────────────────
Bəndlər növbə ilə görünüb sönür: uçot dayanmayan, sakit bir
ritmdir — «bir dəfə görülüb bitən iş» deyil.
⚠️ Dövr UZUNDUR (16 s) və hər bəndin öz gecikməsi var; qısa dövrdə
bu, yanıb-sönən reklam lövhəsinə çevrilir. */
.hb-entry{opacity:0;transform-box:fill-box;transform-origin:0 50%;
animation:hbEntry 16s ease-in-out infinite;animation-delay:var(--d)}
@keyframes hbEntry{
0% {opacity:0;transform:scaleX(.2)}
8% {opacity:.13;transform:scaleX(1)}
55% {opacity:.13;transform:scaleX(1)}
70% {opacity:0;transform:scaleX(1)}
100% {opacity:0;transform:scaleX(1)}
}
/* ── Yoxlama zolağı ────────────────────────────────────────────
Soldan sağa keçir: audit. 16 s — «Qeydlər» ilə eyni dövr, yəni
zolaq həmişə eyni mərhələdə gəlir və təsadüfi görünmür. */
.hb-sweep{animation:hbSweep 16s linear infinite}
@keyframes hbSweep{
0% {transform:translateX(0)}
62% {transform:translateX(1980px)}
100% {transform:translateX(1980px)}
}
/* ── Təsdiq işarəsi ────────────────────────────────────────────
Zolaq keçəndən SONRA özünü çəkir: əvvəl yoxlanılır, sonra
təsdiqlənir. Ardıcıllıq pozulsa, motiv mənasını itirir.
⚠️ `stroke-dasharray` xəttin uzunluğundan böyük götürülüb — JS ilə
ölçməyə ehtiyac qalmır və nəticə eynidir. */
.hb-check{opacity:0;animation:hbCheckIn 16s ease-in-out infinite}
@keyframes hbCheckIn{
0%,30% {opacity:0}
42% {opacity:.16}
72% {opacity:.16}
86%,100% {opacity:0}
}
.hb-check-ring{stroke-dasharray:360;stroke-dashoffset:360;
animation:hbDraw 16s ease-out infinite}
.hb-check-tick{stroke-dasharray:90;stroke-dashoffset:90;
animation:hbDrawTick 16s ease-out infinite}
@keyframes hbDraw{
0%,32% {stroke-dashoffset:360}
52%,100% {stroke-dashoffset:0}
}
@keyframes hbDrawTick{
0%,46% {stroke-dashoffset:90}
60%,100% {stroke-dashoffset:0}
}
/* Qövslər çox yavaş genişlənir. Mərkəz `view-box` vahidlərindədir —
`fill-box` işlətsəydik, hər dairənin ÖZ mərkəzi götürülərdi və
konsentriklik pozulardı. */
.hb-arcs{transform-box:view-box;transform-origin:1560px 880px;
animation:hbArc 24s ease-in-out infinite alternate}
@keyframes hbArc{from{transform:scale(1)}to{transform:scale(1.045)}}
/* Film dənəsi — ~3.5%. Bundan artığı fonu «kirli» göstərir,
azı isə ümumiyyətlə hiss olunmur. */
.hb-grain{opacity:.035;mix-blend-mode:multiply;pointer-events:none}
/* Fon yumşaq açılır: intro animasiyasından sonra birdən «partlamasın». */
.hero-bg{animation:hbIn .8s ease-out both}
@keyframes hbIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
/* Hərəkət dayanır, şəkil isə QALIR — fon yox olmamalıdır.
⚠️ Qeydlər və təsdiq işarəsi `opacity:0` ilə başlayır; animasiyanı
söndürüb əl ilə görünən etməsək, onlar tamamilə itərdi. */
.hb-a,.hb-b,.hb-c,.hb-arcs,.hb-sweep,.hero-bg,
.hb-entry,.hb-check,.hb-check-ring,.hb-check-tick{animation:none}
.hb-entry{opacity:.13}
.hb-check{opacity:.16}
.hb-check-ring{stroke-dashoffset:0}
.hb-check-tick{stroke-dashoffset:0}
.hb-sweep{opacity:0}
}
/* ⚠️ «Telefonda qeydlər və təsdiq gizlənir» QAYDASI SİLİNDİ
(2026-08-21). O, fonun eninə variantı üçün doğru idi: motiv sağ
tərəfə yerləşdirilmişdi və dar ekranda kəsilirdi. İndi telefonda
AYRI, portret variant çəkilir (bax `includes/hero-bg.php`) və eyni
siniflər onda da var — qayda qalsaydı, yeni variantın da motivini
gizlədərdi. Faylın sonundakı «ANA SƏHİFƏNİN FONU» bölməsinə bax. */
/* ⚠️ BURADA KÖHNƏ, TƏKRAR NÜSXƏ VAR İDİ (silindi, 2026-08-21).
Fon motivi dəyişəndə əvvəlki variantın qaydaları qalmışdı: `.hb-shaft`
adlı element SVG-də ARTIQ YOXDUR, qalan qaydalar isə yuxarıdakıları
hərfi-hərfinə təkrarlayırdı. Zərərsiz görünürdü, amma telefon
düzəlişini əlavə edəndə hansı nüsxənin qalib gəldiyini izləmək
lazım gəlirdi — ona görə çıxarıldı. */
/* ⚠️ `max-width:none` GÖTÜRÜLDÜ (istifadəçinin qərarı, 2026-08-20).
Ana səhifənin hero mətni yeganə yer idi ki, `.container`-in 1080px
həddini pozurdu — yəni geniş ekranda başlıq sol menyuya digər
səhifələrdəkindən qat-qat yaxın başlayırdı və keçid zamanı mətn
yerindən sıçrayırdı. İndi bütün səhifələrdə sol kənar eynidir.
⚠️ FON bundan təsirlənmir: `.hero-bg` `fixed`-dir və `.container`-ə
tabe deyil — tam eni tutmağa davam edir. */
/* ⚠️ `max-width:14ch` GÖTÜRÜLDÜ. Şüar («Doğru partnyor, davamlı biznes»)
30 simvoldur, 14ch isə onu məcburən İKİ SƏTRƏ bölürdü — dar ekran
üçün qoyulmuşdu, amma orada mətn onsuz da özü keçir. İndi geniş
ekranda bir sətir, dar ekranda təbii olaraq iki. */
.hero h1{margin-bottom:28px}
/* ⚠️ `max-width:52ch` GÖTÜRÜLDÜ — başlıqdakı `14ch` ilə eyni səbəb.
İkinci cümlə 95 simvoldur, 52ch isə onu geniş ekranda da məcburən
ikiyə bölürdü; halbuki `.container` (1080px) hər iki cümləni bir
sətirdə saxlayır. Dar ekranda mətn onsuz da özü keçir.
⚠️ Sətirlərarası boşluq `
`-a görə ayrıca verilir: `
` sətri
qırır, amma abzas boşluğu yaratmır — iki cümlə bir-birinə yapışırdı. */
.hero-sub{font-size:1.14rem;line-height:1.7}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
/* düymələr */
/* ── Düymələr — SAYT BOYU BİR GÖRKƏM (istifadəçinin qərarı) ────
Sakit halda: ağ fon, mavi çərçivə, mavi mətn.
Kursor üstündə: fon maviyə dolur, mətn ağa keçir.
⚠️ `.btn-primary`, `.btn-outline`, `.btn-light` ARTIQ FƏRQLƏNMİR.
Onlar səhifələrdə hələ işlədilir, ona görə siniflər SİLİNMİR —
sadəcə hamısı eyni görkəmə gətirilir. Şablonlardan bir-bir çıxarmaq
həm risklidir, həm də biri unudulsa tək düymə fərqli qalardı.
⚠️ Çərçivə sakit haldan hover-ə keçəndə də QALIR (rəngi dəyişir):
çərçivəni götürsək, düymə hover anında bir piksel «sıçrayardı». */
.btn,.btn-primary,.btn-outline,.btn-light{
display:inline-block;padding:13px 28px;font-size:.93rem;font-weight:500;
background:var(--bg);color:var(--acc2);border:1px solid var(--acc2);
cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.btn:hover,.btn-primary:hover,.btn-outline:hover,.btn-light:hover{
background:var(--acc2);color:#fff;border-color:var(--acc2)}
.btn-lg{padding:15px 32px}
.btn-portal{border-color:var(--acc2)}
/* grid + kart */
.grid{display:grid;gap:0}
.grid-2{grid-template-columns:1fr 1fr;gap:48px}
.grid-3{grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
/* Kart yox, sıra: 8 xidməti kartla vermək səhifəni dağıdır. */
.grid-3 > .card{border-bottom:1px solid var(--line);padding:30px 40px 30px 0;background:none;border-radius:0}
.grid-3 > .card:nth-child(odd){border-right:1px solid var(--line);padding-right:52px}
.grid-3 > .card:nth-child(even){padding-left:52px}
.card{background:var(--bg);border:1px solid var(--line);padding:28px}
.card h3{margin-bottom:.35em}
.card p{margin:0;font-size:.95rem}
.card-icon{color:var(--acc2);margin-bottom:14px}
.card-icon svg{width:26px;height:26px}
/* dəyər siyahısı */
/* ⚠️ Əvvəl bu, ✓ nişanlı, sətirləri xətlə ayrılmış «xüsusiyyət cədvəli»
idi. İstifadəçinin tələbi ilə adi mətn siyahısına çevrildi: brauzerin
öz yumru nöqtəsi, ayırıcı xətt yox, qalın hissə yox.
`list-style:none` və `display:flex` GETMƏLİDİR — birincisi nöqtəni
söndürür, ikincisi isə nöqtəni ümumiyyətlə göstərmir (flex elementi
`list-item` olmur). */
/* Ad + izah cütlükləri. `auto 1fr` — sol sütun ən uzun adın eni qədər
olur, artıq yer izaha qalır.
(50/50 sınandı, istifadəçi bəyənmədi — geri qaytarıldı.) */
/* ⚠️ Sol sütuna ƏN AZI 240px verilir: `auto` sütunu ən uzun ada görə
ölçürdü və adlar sol kənara yapışırdı. `max-content` isə ad daha uzun
olsa sütunun genişlənməsinə imkan verir — yəni 240px döşəmədir, tavan
deyil. */
.pairs{display:grid;grid-template-columns:minmax(240px,max-content) 1fr;
gap:10px 24px;margin:16px 0 0}
.pairs dt{text-align:right;color:var(--ink);font-weight:600}
.pairs dd{margin:0;text-align:left}
@media (max-width:760px){
/* ⚠️ Telefonda tək sütun: ad sağa hizalı qalsaydı, izahından qopardı. */
.pairs{grid-template-columns:1fr;gap:2px 0}
.pairs dt{text-align:left}
.pairs dd{margin-bottom:10px}
}
/* rəqəmlər */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line)}
.stats > div{padding:24px 20px 28px 0;border-bottom:1px solid var(--line)}
.stats > div:nth-child(odd){border-right:1px solid var(--line);padding-right:32px}
.stats > div:nth-child(even){padding-left:32px}
.stat-num{font-size:2.1rem;font-weight:700;color:var(--ink);letter-spacing:-.04em;line-height:1}
.stat-label{font-size:.85rem;color:var(--ink3);margin-top:6px}
/* ── Xəbərlər: SƏTİR, kart deyil ──────────────────────────────
İstifadəçinin tərifi (2026-08-18): «xəbər saytlarındakı kimi sətir
şəklində — 3 sütun: solda tarix, ortada başlıq və 2 sətir məzmun,
sətrin sonunda «Ətraflı», sağda kiçik şəkil.»
Grid kartında böyük şəkil yer tutur və səhifədə cəmi 3 xəbər sığır;
sətirdə isə eyni sahədə 8-10 xəbər görünür — xəbər siyahısında oxucu
şəkli yox, BAŞLIĞI süzür. */
.news-list{border-top:1px solid var(--line)}
/* Bütün sətir link olduğu üçün `display:grid` birbaşa -dadır. */
.news-row{
display:grid;
grid-template-columns:150px minmax(0,1fr) 132px;
gap:28px;
/* ⚠️ `stretch` MƏCBURİDİR: sol sütun tam hündürlüyü tutmasa, kateqoriyanı
aşağı itələmək mümkün olmur. */
align-items:stretch;
padding:24px 0;border-bottom:1px solid var(--line);
color:inherit;transition:background .15s;
}
.news-row:hover{background:var(--bg2)}
.news-row:hover .nr-title{color:var(--acc2)}
.news-row:hover .nr-thumb img{transform:scale(1.04)}
/* Sol sütun: tarix üstdə, KATEQORİYA ALTDA (istifadəçinin tələbi). */
.nr-date{display:flex;flex-direction:column;justify-content:space-between;
font-size:.86rem;color:var(--ink3);font-variant-numeric:tabular-nums}
.nr-date em{font-style:normal;padding-top:2px}
.nr-cat{color:var(--acc2);font-size:.74rem;letter-spacing:.07em;text-transform:uppercase}
.nr-body{display:block;min-width:0}
/* ⚠️ Başlıq DƏQİQ BİR SƏTİRDİR, sığmayan hissə «…» ilə kəsilir.
`display:block` DEYİL, `-webkit-box`: `text-overflow:ellipsis` yalnız
bir sətirlik qutuda işləyir və `line-clamp` onu sətir sayına görə
idarə edir. `min-width:0` valideyndə (`.nr-body`) onsuz da var —
olmasa grid sütunu kiçilmir və kəsilmə heç vaxt baş vermir. */
.nr-title{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;
overflow:hidden;font-size:1.06rem;font-weight:600;color:var(--ink);
line-height:1.35;margin-bottom:5px;transition:color .15s}
/* Məzmun DƏQİQ 3 SƏTİR; «Ətraflı …» sonuncu sətrin içindədir, ayrıca
sətir tutmur.
⚠️ `-webkit-line-clamp` İŞLƏMİR bu halda: o, mətni kəsəndə «Ətraflı»nı
da kəsib aparır. `float:right` + `max-height` ilə həmin söz sağ kənara
yapışır, mətn onun ətrafından axır — nə dördüncü sətir yaranır, nə də
keçid itir. */
.nr-text{display:block;overflow:hidden;font-size:.93rem;color:var(--ink2);
line-height:1.55;max-height:calc(3 * 1.55em)}
/* ⚠️ `margin-top` = 2 sətir hündürlüyü. Üzən element mətndən ƏVVƏLdir,
yəni normalda 1-ci sətrin sağına düşərdi; bu boşluq onu 3-cü sətrə
endirir. Beləcə yeri MƏTNİN UZUNLUĞUNDAN ASILI DEYİL — əvvəl mətnin
sonuna bağlı idi və uzun mətndə kəsilən sahədə qalıb itirdi. */
.nr-more{float:right;clear:right;margin-top:calc(2 * 1.55em);margin-left:8px;
color:var(--acc2);white-space:nowrap;font-weight:500;line-height:1.55}
.nr-thumb{display:block;overflow:hidden;align-self:start}
/* ⚠️ NİŞAN TOXUNUŞA KEÇİRGƏNDİR (`pointer-events:none`).
İstifadəçinin şikayəti: telefonda xəbər nişanına basanda yazı açılmaq
əvəzinə ŞƏKİL açılırdı. HTML düzgündür — bütün sətir bir -dır və
ölçüldü ki, şəklin beş nöqtəsi də məqalə linkinə düşür. Səbəb
brauzerin şəkil üçün AYRI davranışıdır (uzun toxunuşda «şəkli aç /
saxla» menyusu, sürüşdürmə zamanı təsadüfi tutma).
Nişanı toxunuşa keçirgən etmək bu davranışın kökünü kəsir: jest
həmişə linkə çatır. Nişanı ayrıca saxlamağın onsuz da mənası yoxdur —
tam ölçülü şəkil yazının içindədir. */
.nr-thumb img,.nr-thumb picture,.nr-thumb source{pointer-events:none;-webkit-touch-callout:none}
.nr-thumb img{width:132px;height:88px;object-fit:cover;transition:transform .4s}
.nr-thumb-empty{width:132px;height:88px;background:var(--bg2);border:1px solid var(--line2)}
/* ⚠️ ŞƏKLİN HÜNDÜRLÜYÜ ƏLLƏ YAZILMIR, HESABLANIR: başlığın bir sətri +
təsvirin üç sətri. Sabit rəqəm yazsaydıq, şrift ölçüsü və ya sətir
hündürlüyü dəyişən kimi şəkil mətndən uzun/qısa qalardı və sıra
pozulardı. Toplananlar yuxarıdakı qaydaların EYNİSİDİR:
`.nr-title` 1.06rem × 1.35 + 5px margin, `.nr-text` 3 × 1.55 × .93rem. */
.news-row{--nr-h:calc(1.06rem * 1.35 + 5px + 3 * 1.55 * .93rem)}
@media(max-width:760px){
/* İstifadəçinin tələbi (2026-08-21): telefonda şəkil SOLDA, başlıq və
təsvir onun sağında. Tarix ilə kateqoriya isə üstdə, bir sətirdə —
onları da sağa salsaq, mətn sütunu daha da daralardı.
⚠️ Sahə adları işlədilir: HTML-də sıra «tarix → mətn → şəkil»dir və
`grid-template-areas` onu yenidən düzür. Şəkli mətndən ƏVVƏLƏ
keçirmək üçün HTML-i dəyişsəydik, masaüstü düzülüşü pozulardı. */
.news-row{grid-template-columns:100px minmax(0,1fr);
grid-template-areas:"tarix tarix" "sekil metn";
gap:7px 12px;padding:18px 0;align-items:start}
.nr-date{grid-area:tarix;flex-direction:row;gap:10px;align-items:baseline}
.nr-body{grid-area:metn}
.nr-thumb,.nr-thumb-empty{grid-area:sekil;display:block}
/* ⚠️ Şəkil KƏSİLİR (`cover`), sıxılmır: xəbər şəkilləri müxtəlif
nisbətdədir və `contain` onları ağ zolaqla əhatə edərdi. */
.nr-thumb img{width:100%;height:var(--nr-h)}
.nr-thumb-empty{width:100%;height:var(--nr-h)}
/* ⚠️ «Ətraflı …» TELEFONDA SİLİNİR (istifadəçinin tələbi): şəkil
soldan yer aldığı üçün mətn sütunu ~250px qalır və üzən söz hər
sətirdən bir neçə hərf oğurlayırdı. Sətrin ÖZÜ onsuz da linkdir,
yəni heç bir keçid itmir. */
.nr-more{display:none}
}
@media(max-width:400px){
/* 360px ekranda 100px şəkil mətnə cəmi ~190px qoyur — üç sətir
qırılıb oxunmaz olur. Şəkil daralır, hündürlüyü isə DƏYİŞMİR:
mətnlə bir xətdə qalmalıdır. */
.news-row{grid-template-columns:82px minmax(0,1fr);gap:7px 10px}
}
/* xəbər kartı (köhnə grid — başqa yerlərdə qalır) */
.post-card{border:0;padding:0;background:none}
.post-thumb{display:block;overflow:hidden}
.post-thumb img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .5s}
.post-card:hover .post-thumb img{transform:scale(1.03)}
.post-body{padding-top:18px}
.post-meta{font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin-bottom:9px;display:flex;gap:8px;flex-wrap:wrap}
.post-cat{color:var(--acc2)}
.post-card h3{font-size:1.08rem}
.post-card p{font-size:.93rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post-more{font-size:.88rem;color:var(--acc2);display:inline-block;margin-top:10px}
/* çağırış zolağı */
.cta-band{display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap;border-top:1px solid var(--ink);padding-top:36px}
.cta-band h2{margin-bottom:.25em;max-width:20ch}
.cta-band p{margin:0;color:var(--ink2)}
/* ── Altlıq ───────────────────────────────────────────────── */
/* Altlıq tam enlidir — `.main`-in boşluğunu geri alır ki, fon kənara çatsın. */
/* ⚠️ Fon `--bg2` (boz) DEYİL, hero ilə eyni ağdır — istifadəçinin tələbi.
Futeri məzmundan ayıran yeganə şey üstündəki xətt qalır. */
/* ⚠️ SABİT — ekranın altında qalır (istifadəçinin tələbi).
`left:var(--sb)` sol sütunu örtməsin deyə; `position:fixed` olduğu üçün
yan boşluğu `.main`-dən miras almır, ona görə özündə var.
Yarımşəffaf fon + blur: altından keçən mətn oxunmasın, amma futer
səhifədən qopmuş bir zolaq kimi də görünməsin. */
.page-foot{position:fixed;left:var(--sb);right:0;bottom:0;z-index:30;
background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
border-top:1px solid var(--line);
padding:0 clamp(24px,3.2vw,72px)}
.foot-inner{display:flex;align-items:center;justify-content:space-between;
gap:16px;max-width:1080px;margin:0 auto;min-height:56px}
/* Ortadakı ikonlar həqiqətən ORTADA olsun: yan bloklar müxtəlif enlidir,
`space-between` tək başına onu mərkəzdən sürüşdürür. */
/* ⚠️ İkonlar artıq ORTADA deyil, SAĞDADIR (istifadəçinin tələbi).
«Paylaş» futerdən çıxdığı üçün iki blok qaldı — `space-between`
onları özü kənarlara dağıdır, mütləq yerləşdirmə lazım deyil. */
.foot-inner{position:relative}
/* ── Futer ikonları ───────────────────────────────────────────
Kvadrat, sakit halda konsepsiyanın öz rəngində (boz mətn, nazik
çərçivə), kursor üstünə gələndə brend rənginə keçir.
⚠️ Brend rəngi `--b` HTML-dədir (hər kanal öz rəngini gətirir), ona
görə hover qaydası CSS-də sabit rəng yazmır — yeni kanal əlavə
olunanda o da özü işləyir.
⚠️ `.icons a:hover{opacity:.7}` ümumi qaydası burada LƏĞV EDİLİR:
solğunlaşma rəngə keçidi görünməz edirdi. */
.page-foot .soc{width:30px;height:30px;border-radius:0;
background:transparent;color:var(--ink3);
border:1px solid var(--line);transition:.15s}
.page-foot .icons a:hover{opacity:1}
.page-foot .soc:hover{background:var(--b);border-color:var(--b);color:#fff}
/* ── Uyğunlaşma ───────────────────────────────────────────── */
@media(max-width:1080px){
.grid-2{grid-template-columns:1fr;gap:32px}
}
@media(max-width:860px){
:root{--sb:0px}
.page-foot{left:0}
/* Dar ekranda ikonlar sətri şişirdir — gizlədilir, yol izi və
«Paylaş» qalır. */
.side{transform:translateX(-100%);transition:transform .25s;width:280px;box-shadow:0 0 40px rgba(10,50,90,.15)}
.side.open{transform:none}
.side-toggle{display:grid;position:fixed;top:14px;right:14px;z-index:50;width:44px;height:44px;place-content:center;gap:5px;background:#fff;border:1px solid var(--line);cursor:pointer}
.side-toggle span{display:block;width:18px;height:2px;background:var(--ink)}
.main{margin-left:0;padding-top:8px;padding-left:20px;padding-right:20px}
.section,.hero{padding:56px 0}
.grid-3{grid-template-columns:1fr}
.grid-3 > .card,.grid-3 > .card:nth-child(odd),.grid-3 > .card:nth-child(even){padding:26px 0;border-right:0}
.stats{grid-template-columns:1fr}
.stats > div,.stats > div:nth-child(odd),.stats > div:nth-child(even){padding:20px 0;border-right:0}
}
/* İş ortaqları — loqo şəbəkəsi. Loqolar müxtəlif ölçüdə olur, ona görə
hər biri eyni qutuya yerləşdirilir və boz verilir: rəngarəng loqolar
yan-yana səhifəni dağıdır. */
/* Hər sətirdə DƏQİQ 5 sütun (istifadəçinin tələbi) — `auto-fill` deyil:
o, ekranın eninə görə say dəyişirdi. `minmax(0,1fr)` sütunun məzmundan
genişlənməsinin qarşısını alır (geniş loqo sütunu dartırdı).
Xanalar KVADRATDIR: `aspect-ratio` ilə hündürlük enə bərabərdir, yəni
loqoların ölçüsündən asılı olmayaraq şəbəkə düz qalır. */
.partners{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
gap:1px;background:var(--line);border:1px solid var(--line)}
.partner{display:grid;place-items:center;aspect-ratio:1;padding:16px;
background:var(--bg);transition:background .15s}
.partner:hover{background:var(--bg2)}
/* Loqolar müxtəlif ölçü və formadadır — `contain` onları xananın içinə
sığdırır, kəsmir və nisbətini pozmur. */
.partner img{max-width:100%;max-height:100%;object-fit:contain;
filter:grayscale(1);opacity:.72;transition:filter .2s,opacity .2s}
@media (max-width:1100px){.partners{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:860px){.partners{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.partners{grid-template-columns:repeat(2,minmax(0,1fr))}}
.partner:hover img{filter:none;opacity:1}
.partner-name{font-size:.92rem;color:var(--ink2);text-align:center}
/* ── Yol izi ──────────────────────────────────────────────────
Yalnız alt bölmədə görünür. Sol menyu «hara gedə bilərəm»i, bu isə
«indi haradayam»ı deyir — ikisi fərqli suallardır. */
/* Paylaş — səhifənin üst sağ küncü, scroll zamanı yerində qalır.
⚠️ `max-width` YOXDUR (istifadəçinin qərarı, 2026-08-20): düymə
məzmunun sağ kənarında yox, SƏHİFƏNİN sağ kənarında dayanır. Qısa
müddət 1080px-ə salınmışdı — orada məzmunla bir xətdə olurdu, amma
istifadəçi onu daha sağda istədi.
⚠️ Sağdakı boşluq düymənin özünə verilir, `.main`-in yan boşluğuna
ƏLAVƏ olaraq — kənara yapışmasın deyə.
⚠️ `sticky` üçün fon MƏCBURİDİR: şəffaf qalsaydı, altından sürüşən
mətn düymənin içindən görünərdi. */
.topshare{position:sticky;top:0;z-index:25;
display:flex;justify-content:flex-end;padding:16px 12px 8px 0}
.topshare .share{background:rgba(255,255,255,.94);backdrop-filter:blur(8px)}
/* «Paylaş» da eyni məntiqdədir — ağ fon, mavi çərçivə və mətn;
hover-də dolur. Ölçüsü kiçikdir, çünki o, əsas hərəkət deyil. */
.share{display:inline-flex;align-items:center;gap:8px;
background:var(--bg);border:1px solid var(--acc2);padding:7px 14px;
font:inherit;font-size:.84rem;color:var(--acc2);cursor:pointer;
transition:background .15s,color .15s}
.share:hover{background:var(--acc2);color:#fff}
.crumbs{display:flex;align-items:center;gap:9px;
font-size:.88rem;color:var(--ink3)}
/* ⚠️ Üst bənd MAVİ DEYİL, amma LİNK olaraq qalır (istifadəçinin tələbi).
Yol izi naviqasiya deyil, mövqe göstəricisidir — mavi orada diqqəti
səhifənin əsas məzmunundan yayındırırdı. Klik edilə bildiyi altdakı
nazik xətt və mausun üzərinə gələndə rəngin dəyişməsi ilə bilinir. */
.crumbs a{color:var(--ink3);border-bottom:1px solid var(--line)}
.crumbs a:hover{color:var(--acc2);border-bottom-color:var(--acc2)}
/* Yol izində də ad uzun ola bilər — kəsilir, tam adı `title`-dadır. */
.crumbs strong{color:var(--ink);font-weight:600;max-width:38ch;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ── Xəbər sətirlərində zebra ─────────────────────────────────
Uzun siyahıda göz sətri itirir; növbələşən fon onu saxlayır.
Fon çox açıqdır — zolaq oxumağa kömək etməli, diqqəti çəkməməlidir. */
.news-row:nth-child(even){background:var(--bg2)}
.news-row:nth-child(even):hover,.news-row:hover{background:#EDF2F8}
/* ── Xəbərin öz səhifəsi ──────────────────────────────────────
Siyahıdakı nəhəng h1 ölçüsü tək yazı səhifəsində həddindən artıqdır:
orada başlıq artıq kontekstdir, mətn əsasdır. */
/* Yazı səhifəsinin başlığı.
Tarixçə: əsas `h1` qaydası 40-70px verirdi — yazı səhifəsi üçün çox idi.
Yarıya endirdim (16.8-21.6px), istifadəçi baxıb «iki dəfə böyüt» dedi.
İndi 33.6-43.2px — ilk halın təxminən yarısı, adi mətndən (16.5px) isə
aydın seçilir. Başlıq mətni üstələməməli, amma itməməlidir də. */
/* ⚠️ `max-width` YOXDUR. Əvvəl 26ch idi və başlıq konteynerin təxminən
yarısını tutub tez sətirə keçirdi — yanında isə boş sahə qalırdı.
Yazı səhifəsində başlıq tək element olduğu üçün tam eni işlədə bilər. */
/* ⚠️ Teq H1 qalır, ölçü h2-nindir. `` etsəydik yazı səhifəsi h1-siz
qalardı — başqa h1 yoxdur, çünki `$has_visible_h1` qoyulub. Səhifə
adında da eyni yanaşma işlədilib. */
.article-title{font-size:30px;padding:6px 0;line-height:1.18}
/* Yazı səhifəsinin başlığı ORTADA — istifadəçinin tələbi.
⚠️ Tarix/kateqoriya sətri də ortalanır: başlıq ortada, altındakı sətir
solda qalsaydı blok əyri görünərdi — ikisi bir başlıqdır.
⚠️ `max-width` QOYULMUR. Əvvəl 26ch idi, istifadəçi «başlıq 50%-də
olmasın» dedi və silindi — ortalayarkən onu geri gətirmək həmin
qərarı pozardı. Başlıq tam eni işlədir. */
.hero-lead{margin:0 0 22px;font-size:1.05rem}
.article-header .article-title,
.article-header .post-meta{text-align:center}
/* ── Yazı mətni: hər iki kənara hizalanır ─────────────────────
İstifadəçinin tələbi: sətirlərin sağ kənarı da düz olsun.
⚠️ `hyphens` OLMADAN mətn hizalanmır, DARTILIR — sözlər arası boşluqlar
böyüyür və səhifədə «çay» adlanan ağ zolaqlar yaranır. Ona görə söz
bölünməsi də açılır; `lang="az"` -dədir, yəni brauzer Azərbaycan
qaydalarını tətbiq edir (dəstəkləməyəndə sadəcə bölmür — zərəri yoxdur).
`break-word` uzun keçidlər üçündür: bölünməyən uzun söz hizalanmış
sətirdə nəhəng boşluq qoyur. */
.article-content,.article-content p,.article-content li{
text-align:justify;
hyphens:auto;-webkit-hyphens:auto;
overflow-wrap:break-word;
}
/* Başlıqlar hizalanmır — qısa sətirdə hizalama sözləri bir-birindən
qoparır və başlıq dağınıq görünür. */
.article-content h2,.article-content h3,.article-content h4,
.article-content figcaption{text-align:left;hyphens:manual}
/* ── Xəbər şəkilləri ──────────────────────────────────────────
İstifadəçinin tələbi: şəkil mətn sahəsinin 33%-ni tutsun, mətn onun
ətrafından axsın. Basanda böyüsün, bir də basanda qayıtsın. */
/* Ana şəkil də 33% — mətn onun ətrafından axır.
Əvvəl tam eni tuturdu və yazının başlanğıcını aşağı itələyirdi. */
.article-figure{margin:0;width:33%;min-width:200px;float:right;
padding:6px 0 16px 26px}
.article-figure img{width:100%;cursor:zoom-in}
.article{overflow:hidden} /* üzən şəkil qutudan daşmasın */
/* ⚠️ ÖLÇÜ `.container`-ə görədir (max 1080px) — yəni hero ilə EYNİ en.
`33%` şəklin öz qutusuna nisbətdir, qutu isə həmin konteynerdir.
Praktikada ~356px. */
.article-content img{width:33%;min-width:200px;float:left;
margin:6px 26px 16px 0;cursor:zoom-in;clear:right}
.article-content img:nth-of-type(even){float:right;margin:6px 0 16px 26px}
.article-content::after{content:"";display:block;clear:both}
/* ⚠️ QALEREYA ƏVVƏL İSTİSNA İDİ (`width:auto`) və şəkillər tam ölçüdə
çıxırdı — «şəkillər böyükdür» şikayəti məhz buradan gəlirdi. İndi o da
33%-lik sütunlara düzülür: üç sütun = hər biri konteynerin ~33%-i.
Float işlətmirik, çünki qalereya mətnin ARASINDA deyil, sonundadır. */
.article-content .post-gallery{
display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
float:none;clear:both;margin:26px 0 0;
}
.article-content .post-gallery img{
width:100%;min-width:0;float:none;margin:0;
aspect-ratio:3/2;object-fit:cover;
}
.zoom{position:fixed;inset:0;z-index:80;display:none;place-items:center;
background:rgba(10,50,90,.88);padding:32px;cursor:zoom-out}
.zoom.on{display:grid}
.zoom img{max-width:min(1100px,94vw);max-height:90vh;width:auto;object-fit:contain}
@media(max-width:700px){
/* Dar ekranda 33% oxunmaz olur — şəkil tam enə keçir. */
.article-content img,.article-content img:nth-of-type(even){width:100%;float:none;margin:0 0 18px}
.article-figure{width:100%;float:none;padding:0 0 18px}
/* ⚠️ Telefonda hizalama SÖNDÜRÜLÜR: sütun dar olanda bir sətrə az söz
düşür və hər boşluq nəzərəçarpacaq qədər genəlir. */
.article-content,.article-content p,.article-content li{text-align:left}
.article-content .post-gallery{grid-template-columns:1fr 1fr}
}
/* Komanda — sadə şəbəkə. Şəkil dairəvidir və eyni ölçüdədir, çünki
işçilərin şəkilləri müxtəlif nisbətdə olur. */
.team{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:36px 28px}
.tm img,.tm-ph{width:96px;height:96px;border-radius:50%;object-fit:cover;margin-bottom:14px}
.tm-ph{display:grid;place-items:center;background:var(--bg2);color:var(--ink3);
font-size:1.8rem;font-weight:600;border:1px solid var(--line)}
.tm h3{font-size:1rem;margin-bottom:2px}
.tm-pos{margin:0;font-size:.9rem;color:var(--ink2)}
.tm-dep{margin:2px 0 0;font-size:.82rem;color:var(--ink3)}
.tm-mail{display:inline-block;margin-top:6px;font-size:.82rem;color:var(--acc2);word-break:break-all}
/* Blok bütövlükdə çərçivədədir (istifadəçinin tələbi) — forma
səhifənin qalan mətnindən ayrı bir vahid kimi oxunur.
⚠️ Başlıq da çərçivənin İÇİNDƏDİR: kənarda qalsaydı, «Müraciət edin»
sözü ilə aid olduğu forma iki ayrı blok kimi görünərdi. */
/* Çərçivəli blok — «Vakansiyalar» və «Müraciət edin» eyni qutudur.
⚠️ Ortaq sinif: iki yerdə ayrıca yazsaydıq, birinin çərçivəsi
dəyişəndə o biri geridə qalardı. */
/* ⚠️ Fon `--bg2` (#F5F8FB) — səhifənin ağından bir çalar fərqlidir.
Yalnız çərçivə ilə blokun harada başlayıb bitdiyi zəif oxunurdu.
Xanalar isə İÇƏRİDƏ ağ qalır (`.apply-form input`), yəni doldurulası
yer fonun üstündə aydın seçilir — fonu tünd etsəydik bu itərdi. */
/* ⚠️ `max-width` YOXDUR: blok konteynerin (hero ilə eyni, 1080px) tam
enini tutur. Sağ kənara yapışmır, çünki `.main`-in özündə 24–72px
yan boşluq var — blok həmin sahənin içindədir. */
.panel{margin-top:26px;padding:28px 30px;
background:var(--bg2);border:1px solid var(--line)}
.panel > h3{padding-top:0;text-align:center}
/* ⚠️ Xidmət blokları İSTİSNADIR: başlıqları sola hizalanır
(istifadəçinin tələbi). Ümumi qaydanı dəyişmirəm — Karyera,
Haqqımızda və Məxfilik səhifələrində ortalama qalmalıdır. */
.panel-left > h3{text-align:left}
/* Blokun altındakı solğun qeyd — əsas məzmun deyil, əlavə imkandır. */
.panel-note{margin:18px 0 0;font-size:.82rem;color:var(--ink3);line-height:1.45}
/* Boş vəziyyət — sistem bildirişi görkəmi: ortada, solğun, kəsik xətli
çərçivədə. Kəsik xətt «burada məzmun olacaq, hazırda yoxdur» deməkdir;
bütöv xətt onu tamamlanmış bir blok kimi göstərərdi. */
/* Səhifə girişi — hero ilə eyni en, öz max-width-i yoxdur. */
.lead{margin:0;color:var(--ink2)}
.panel-empty{margin:0;padding:28px 16px;text-align:center;
font-size:.9rem;color:var(--ink3);letter-spacing:.02em;
background:transparent;border:1px dashed var(--line)}
/* ── Karyera: müraciət forması ────────────────────────────────
İki sütun — solda şəxsi məlumat və CV, sağda məktub və göndərmə.
⚠️ Sağ sütun `grid` deyil `flex`-dir: mətn sahəsi qalan hündürlüyü
tutmalıdır ki, iki sütunun altı bir xəttdə bitsin. */
.apply-form{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:6px}
.apply-col{display:flex;flex-direction:column;gap:12px}
.apply-form input[type=text],.apply-form input:not([type]),
.apply-form input[type=email],.apply-form textarea{
width:100%;padding:11px 13px;font:inherit;font-size:.95rem;color:var(--ink);
background:#fff;border:1px solid var(--line);border-radius:0;outline:none}
.apply-form input:focus,.apply-form textarea:focus{border-color:var(--acc2)}
.apply-form ::placeholder{color:var(--ink3);opacity:1}
/* Məktub xanası sağ sütunun qalan hündürlüyünü tutur — iki sütunun altı
bir xəttdə bitsin deyə. */
.apply-form textarea{flex:1 1 auto;min-height:150px;resize:vertical}
/* Fayl xanası digərləri ilə eyni çərçivədə görünsün. */
.apply-file{display:block;padding:11px 13px;background:#fff;border:1px solid var(--line);
font-size:.88rem;color:var(--ink3)}
.apply-file input{display:block;margin-top:8px;font-size:.85rem}
/* Sonuncu sətir: solda kod haqqında məlumat, sağda düymə.
⚠️ Düymə `flex-shrink:0` — uzun mətn onu sıxıb sözü iki sətrə
salırdı. */
.apply-send{display:flex;align-items:center;justify-content:space-between;gap:16px}
.apply-send p{margin:0;font-size:.82rem;color:var(--ink3);line-height:1.45}
.apply-send .btn{flex:0 0 auto}
@media (max-width:760px){
.apply-send{flex-direction:column;align-items:stretch}
}
@media (max-width:760px){
/* ⚠️ Telefonda tək sütun: iki sütun xanaları oxunmaz dərəcədə daraldır. */
.apply-form{grid-template-columns:1fr}
}
/* ── Əlaqə: üç sütun ──────────────────────────────────────────
Solda forma, ortada kanallar, sağda xəritə (istifadəçinin tələbi).
⚠️ `minmax(0,1fr)`: xəritə `iframe`-dir və öz sütununu genişləndirməyə
çalışır — bu, üç sütunun tarazlığını pozurdu. */
/* ⚠️ `align-items:start` DEYİL, `stretch`: üç blok eyni hündürlükdə
olsun. Fərqi mesaj xanası udur — o, sütunun qalan yerini tutur, yəni
ən uzun blok (adətən xəritə) ölçünü təyin edir və qalan ikisi ona
çatır. Sabit hündürlük yazsaydıq, məzmun dəyişəndə pozulardı. */
.contact3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;
align-items:stretch}
.contact3 h4{padding-top:0;margin-bottom:14px;text-align:center}
/* ⚠️ Hər blok ÇƏRÇİVƏDƏDİR — digər səhifələrdəki `.panel` ilə eyni:
boz fon, nazik çərçivə, ortalanmış başlıq. Sinfi təkrar yazmıram,
`.panel`-in dəyərlərini burada təkrarlamaq iki yerdə fərqli görünüş
riski yaradardı; ona görə eyni dəyişənlər işlədilir. */
.c3-col{min-width:0;padding:24px;background:var(--bg2);border:1px solid var(--line);
display:flex;flex-direction:column}
/* İkinci sətir — üç sütunu birləşdirən tək blok. */
.c3-wide{grid-column:1 / -1}
.c3-form{display:flex;flex-direction:column;gap:12px;flex:1 1 auto}
/* ⚠️ `:not(.sr-only)` MƏCBURİDİR — TELEFONDA ÜFÜQİ DAŞMANIN SƏBƏBİ BU İDİ.
«Sənədlər» düyməsinin arxasındakı fayl xanası `sr-only`-dir, yəni
1×1 piksel olmalıdır. Amma bu qayda iki sinifdir (`.c3-form input`),
`.sr-only` isə bir — yəni ÜSTÜN GƏLİRDİ: gizli xana 100% + 26px
padding alır və mütləq yerləşdirildiyi üçün qabından 30px kənara
çıxırdı. Nəticədə Əlaqə səhifəsi 375px ekranda 405px enində olurdu
və bütün sayt yana sürüşürdü.
⚠️ Xəritə GÜNAHKAR DEYİL (ilk şübhə ona düşmüşdü) — `.c3-map iframe`
onsuz da `width:100%`-dir və ölçüldü: qabından çıxmır. */
.c3-form input:not(.sr-only),.c3-form textarea{
width:100%;padding:11px 13px;font:inherit;font-size:.95rem;color:var(--ink);
background:#fff;border:1px solid var(--line);border-radius:0;outline:none}
.c3-form textarea{flex:1 1 auto;min-height:150px;resize:vertical}
.c3-form input:focus,.c3-form textarea:focus{border-color:var(--acc2)}
.c3-form ::placeholder{color:var(--ink3);opacity:1}
.c3-form .btn{align-self:flex-start}
/* Yoxlama xətası — xananın altında, qırmızı. */
.c3-err{color:#B3261E;font-size:.82rem;line-height:1.4}
.c3-form input.bad{border-color:#B3261E}
/* Kanal siyahısı: ikon + ad, bir sütunda. */
.c3-social{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.c3-social a{display:flex;align-items:center;gap:12px;padding:9px 0;
color:var(--ink2);font-size:.94rem;border-bottom:1px solid var(--line2)}
.c3-social li:last-child a{border-bottom:0}
.c3-social a:hover{color:var(--acc2)}
/* ⚠️ Nişan `--b`-dən öz brend rəngini alır, hover-də dolur — futerdəki
davranışın eynisi, ona görə burada da eyni `.soc` sinfi işlədilir. */
.c3-social .soc{flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;
border:1px solid var(--line);color:var(--ink3);transition:.15s}
.c3-social .soc svg{width:16px;height:16px}
.c3-social a:hover .soc{background:var(--b);border-color:var(--b);color:#fff}
/* Xəritə: nisbəti sabitdir, yoxsa `iframe` standart 150px hündürlüklə çıxır. */
.c3-map{aspect-ratio:4/3;border:1px solid var(--line);overflow:hidden}
.c3-map iframe{width:100%;height:100%;border:0;display:block}
.c3-addr{margin:12px 0 0;font-size:.9rem;color:var(--ink3)}
/* Kanallar ÜÇ SÜTUNA bölünür (istifadəçinin tələbi). Bir sətirdə
yan-yana düzüləndə adların uzunluğu fərqli olduğu üçün sıra qırıq
görünürdü; şəbəkə isə onları düz sütunlara oturdur.
⚠️ `display:grid` `.c3-social`-un `flex`-ini əvəz edir — qayda ondan
SONRA yazılıb, eyni ağırlıqda olduqları üçün sonuncu qalib gəlir. */
.c3-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:4px 30px}
.c3-row a{border-bottom:0;padding:7px 0}
@media (max-width:860px){.c3-row{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.c3-row{grid-template-columns:1fr}}
.c3-info{margin-bottom:0}
@media (max-width:1000px){
/* Üç sütun dar ekranda oxunmur: xəritə tam enə çıxır, qalan ikisi qoşa. */
.contact3{grid-template-columns:1fr 1fr}
.contact3 .c3-col:last-child{grid-column:1 / -1}
}
@media (max-width:680px){.contact3{grid-template-columns:1fr}}
/* ── Açılış animasiyası ───────────────────────────────────────
Loqo hərf-hərf yığılır, sonra örtük qalxır. Ardıcıllıq:
emblemin iki yarısı uçub birləşir → hərflər soldan sağa qalxır →
qısa fasilə → örtük yuxarı sürüşüb yox olur. */
/* ⚠️ `[hidden]` QAYDASI MƏCBURİDİR. Brauzerin öz `[hidden]{display:none}`
qaydası sinif seçicisindən ZƏİFDİR — aşağıdakı `display:grid` onu
üstələyir və örtük JS işə düşməmiş, hətta JS sönülü olanda belə
görünərdi. */
.intro[hidden]{display:none}
/* ⚠️ Örtüyün ÖZÜ fonsuzdur — ağ fon `.intro-bg` qatındadır. Loqo sol
panelə uçarkən fon ayrıca şəffaflaşmalıdır; bir elementdə olsaydılar,
fonu söndürmək loqonu da söndürərdi.
⚠️ `pointer-events:none` — animasiya bitməmiş kliklər altdakı səhifəyə
keçməsin deyə DEYİL, əksinə: örtük artıq şəffaflaşanda ziyarətçi
gözlədilməsin. */
.intro{position:fixed;inset:0;z-index:9999;pointer-events:none}
/* ⚠️ Fon YIĞILMA MÜDDƏTİNCƏ TAM AĞ QALIR (istifadəçinin qərarı).
Başdan şəffaflaşdıranda diqqət dağılırdı: altdakı sol panel — o
cümlədən oradakı loqo — animasiya davam edərkən görünürdü.
Şəffaflaşma yalnız uçuş başlayanda, JS tərəfindən işə salınır. */
.intro-bg{position:absolute;inset:0;background:var(--bg)}
/* ⚠️ Animasiya müddətincə səhifə sürüşməsi bağlanır: altdakı məzmun
tərpənsə, örtük qalxanda ziyarətçi başqa yerdə tapılardı. */
.intro-on{overflow:hidden}
/* Loqo mərkəzdədir; uçuş anında JS onu piksel mövqeyinə keçirir. */
.intro-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
width:min(760px,78vw);height:auto;overflow:visible}
/* ⚠️ HƏR ON BİR HİSSƏ EYNİ SIRADADIR: M, E, S(yuxarı), S(aşağı), L, E,
H, E, T, C, İ. Yəni loqo soldan sağa yığılır və emblem öz yerində —
«E» ilə «L» arasında — görünür. Sıra `--i` dəyişənindədir, gecikmə
düsturu isə üçü üçün eynidir; ayrı-ayrı yazsaydıq, tempi dəyişəndə
biri geridə qalardı. */
/* ⚠️ SELEKTOR `.intro-logo` İLƏ MƏHDUDLAŞIB. Əvvəl sadəcə `.lg-up`
yazılmışdı və qayda SOL SÜTUNDAKI loqoya da düşürdü — orada hərflər
hər səhifə yüklənəndə yenidən yığılırdı. */
.intro-logo .lg-up,.intro-logo .lg-down{
opacity:0;animation-duration:.62s;animation-fill-mode:forwards;
animation-timing-function:cubic-bezier(.22,1,.36,1);
animation-delay:calc(.15s + var(--i) * .09s)}
.intro-logo .lg-up{animation-name:lgUp}
.intro-logo .lg-down{animation-name:lgDown}
@keyframes lgUp{
from{opacity:0;transform:translate(-90px,-120px) rotate(-12deg)}
to{opacity:1;transform:none}
}
@keyframes lgDown{
from{opacity:0;transform:translate(90px,120px) rotate(12deg)}
to{opacity:1;transform:none}
}
/* Hərflər — pilləli gecikmə ilə (`--i` hər hərfin sırasıdır). */
.intro-logo .lg-part{opacity:0;transform-box:fill-box;transform-origin:50% 100%;
animation:lgLetter .5s cubic-bezier(.22,1,.36,1) forwards;
animation-delay:calc(.15s + var(--i) * .09s)}
@keyframes lgLetter{
from{opacity:0;transform:translateY(26px) scale(.94)}
to{opacity:1;transform:none}
}
/* ⚠️ Hərəkəti azaldılmış rejim: animasiya ÜMUMİYYƏTLƏ işə düşmür.
JS onsuz da örtüyü göstərmir; bu qayda isə ehtiyatdır — CSS
yüklənib JS gecikən anda da heç nə tərpənməsin. */
@media (prefers-reduced-motion:reduce){
.intro{display:none}
.lg-up,.lg-down,.lg-part{animation:none;opacity:1;transform:none}
}
/* ══ XİDMƏTLƏR SƏHİFƏSİ ═══════════════════════════════════════════
Köhnə səhifə səkkiz eyni blokdan ibarət idi və oxucu nə ilə
tanındığımızı görmürdü. Yeni quruluş çəki fərqi üzərində qurulub:
əsas xidmətlər geniş blokla, qalanları qısa kartla.
⚠️ BAŞLIQ ÖLÇÜLƏRİ BURADA DƏYİŞDİRİLMİR. İstifadəçinin qaydası
«h1 50 / h2 40 / h3 30 / h4 20 — istisnasız» idi; bölmə başlıqları
böyük görünə bilər, amma saytın ritmi bir yerdən idarə olunmalıdır.
Yalnız BAŞLIQ OLMAYAN rəqəmlərin (sübut zolağı, addım nömrələri)
ölçüsü burada verilir. */
.svc-hero{padding:8px 0 40px}
.svc-lead{font-size:1.14rem;max-width:none;margin:0 0 30px}
/* Sübut zolağı — üç rəqəm, aralarında saçteli xətt. */
.svc-proof{display:flex;flex-wrap:wrap;border:1px solid var(--line);background:var(--bg2)}
/* Etiket və rəqəm BİR SƏTİRDƏ, sütunun ortasında (istifadəçinin
tələbi). Şrift ölçüləri DƏYİŞMİR — 34px rəqəm 14px etiketin yanında
qalır, ona görə hizalanma `baseline`-dır: `center` olsaydı, kiçik söz
iri rəqəmin ortasında asılı qalar və sətir əyri görünərdi.
⚠️ `wrap` var: dar sütunda uzun etiket («xidmət istiqaməti») rəqəmi
sıxıb kəsirdi. */
.svc-proof > div{flex:1 1 0;min-width:150px;padding:20px 24px;
border-left:1px solid var(--line);display:flex;flex-wrap:wrap;
align-items:baseline;justify-content:center;text-align:center;
gap:2px 10px}
.svc-proof > div:first-child{border-left:0}
/* ⚠️ `tabular-nums`: sayğac animasiyası zamanı rəqəmlər dəyişir və
adi şriftdə «1» «8»-dən dardır — eni oynayan mətn titrəyir. */
.svc-proof strong{font-size:34px;line-height:1.1;color:var(--ink);font-weight:700;
letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.svc-proof span,.svc-proof a{font-size:.88rem;color:var(--ink3)}
/* ── «Sizə hansı lazımdır?» ───────────────────────────────────────
Səhifəni işlədən blok. Kart deyil, sətirdir: oxucu göz gəzdirib
öz halını tapmalıdır, oxumamalıdır. */
.svc-cases{padding:36px 0 8px}
.svc-caselist{list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.svc-caselist li{border-bottom:1px solid var(--line)}
.svc-caselist a{display:flex;align-items:center;gap:12px;
padding:13px 2px;color:var(--ink2);text-decoration:none;
transition:color .15s,padding .15s}
/* ⚠️ Nöqtə OLMADAN sətirlər bir-birinə axırdı və oxucu bunların ayrı-ayrı
hallar olduğunu ilk baxışda görmürdü (istifadəçinin qeydi). Nöqtə CSS-dədir,
mətndə deyil — tərcümə fayllarında təsadüfən silinməsin. */
.svc-caselist a::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;
background:var(--acc2);opacity:.45;transition:opacity .15s}
.svc-caselist a:hover::before{opacity:1}
/* Mətn qalan yeri tutur ki, ox həmişə sağ kənarda dayansın. */
.svc-caselist a > span{flex:1 1 auto}
/* Ox işarəsi mətnlə birlikdə gəlmir — CSS-dədir ki, tərcümə
fayllarında təsadüfən silinməsin. */
.svc-caselist a::after{content:"→";color:var(--line);transition:color .15s,transform .15s}
.svc-caselist a:hover{color:var(--acc2);padding-left:6px}
.svc-caselist a:hover::after{color:var(--acc2);transform:translateX(3px)}
/* ── Əsas xidmət — geniş blok ─────────────────────────────────── */
.svc-main{border:1px solid var(--line);background:var(--bg2);margin-top:26px;
scroll-margin-top:80px}
.svc-main-head{display:flex;align-items:center;gap:12px;
padding:20px 30px;border-bottom:1px solid var(--line);background:var(--bg)}
.svc-main-head h2,.svc-main-head h3{padding:0}
.svc-icon{display:grid;place-items:center;width:38px;height:38px;flex:0 0 auto;
color:var(--acc2);border:1px solid var(--line);background:var(--bg2)}
.svc-main-body{display:grid;grid-template-columns:1.15fr 1fr}
.svc-main-text{padding:24px 30px}
.svc-main-text > p{margin:0 0 16px}
/* Siyahı sütunu solundakı xətlə ayrılır — iki fərqli məlumat növüdür:
solda «nədir», sağda «nə daxildir». */
.svc-main-list{padding:24px 30px;border-left:1px solid var(--line)}
.svc-main-list h3{font-size:20px;padding:0 0 10px}
.svc-main-list ul,.svc-mini{list-style:none;margin:0;padding:0}
.svc-main-list li,.svc-mini li{position:relative;padding:6px 0 6px 20px;font-size:.95rem}
/* Nöqtə `::before` ilə — mətnə «•» yazsaydıq, tərcümədə itə bilərdi. */
.svc-main-list li::before,.svc-mini li::before{content:"";position:absolute;left:2px;top:.85em;
width:5px;height:5px;background:var(--acc2)}
.svc-audience{font-size:.9rem;color:var(--ink3);margin:0 0 18px}
.svc-audience strong{color:var(--ink2);font-weight:600}
/* ── Digər xidmətlər — qısa kart ──────────────────────────────── */
.svc-otherhead{margin-top:44px}
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.svc-card{border:1px solid var(--line);background:var(--bg2);padding:0 0 20px;
scroll-margin-top:80px}
.svc-card > p{margin:16px 30px 10px}
.svc-card .svc-mini{margin:0 30px 12px}
.svc-card .svc-audience{margin:0 30px}
/* ── Necə işləyirik ───────────────────────────────────────────── */
.svc-steps{padding:44px 0 8px}
.svc-steps ol{list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.svc-steps li{padding:20px 22px 20px 0;border-top:2px solid var(--acc2);margin-right:22px}
.svc-steps li:last-child{margin-right:0}
.svc-num{display:block;font-size:13px;font-weight:700;color:var(--acc2);
letter-spacing:.12em;margin-bottom:8px}
.svc-steps strong{display:block;color:var(--ink);font-weight:600;margin-bottom:6px}
.svc-steps span{font-size:.92rem}
/* ── Suallar ──────────────────────────────────────────────────── */
.svc-faq{padding:44px 0 8px}
.svc-faq details{border-bottom:1px solid var(--line)}
.svc-faq summary{list-style:none;cursor:pointer;padding:16px 34px 16px 0;position:relative;
color:var(--ink);font-weight:600}
.svc-faq summary::-webkit-details-marker{display:none}
/* «+» açılanda «−» olur — ikon faylı olmadan, yalnız mətnlə. */
.svc-faq summary::after{content:"+";position:absolute;right:4px;top:14px;
font-size:22px;font-weight:400;color:var(--acc2);line-height:1}
.svc-faq details[open] summary::after{content:"−"}
.svc-faq summary:hover{color:var(--acc2)}
.svc-faq p{margin:0 0 18px;padding-right:34px}
/* ── Yekun ────────────────────────────────────────────────────── */
.svc-cta{padding:48px 0 8px;text-align:center}
.svc-cta p{margin:0 0 24px}
@media (max-width:900px){
/* Bir sütun: iki sütun telefonda sətirləri iki-üç sətrə qırırdı. */
.svc-caselist,.svc-main-body,.svc-grid{grid-template-columns:1fr}
.svc-main-list{border-left:0;border-top:1px solid var(--line)}
.svc-steps ol{grid-template-columns:1fr 1fr}
/* ⚠️ `flex-direction:column` MƏCBURİDİR. Aşağıdakı sərhəd qaydaları
alt-alta düzülüşü nəzərdə tuturdu, amma zolaq `wrap` ilə qalırdı:
xanaların `min-width:150px`-i 360px ekranda ikisini yan-yana
salırdı, üçüncüsü isə tək sətirdə qalıb zolağı əyri göstərirdi. */
.svc-proof{flex-direction:column}
.svc-proof > div{border-left:0;border-top:1px solid var(--line)}
.svc-proof > div:first-child{border-top:0}
}
@media (max-width:560px){
.svc-steps ol{grid-template-columns:1fr}
.svc-steps li{margin-right:0}
}
/* ── Əlaqə forması: alt sətir ─────────────────────────────────────
Solda qoşma, sağda «Göndər» (istifadəçinin tələbi). */
.c3-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:12px}
/* Sancaq DÜYMƏNİN İÇİNDƏDİR (istifadəçinin tələbi).
⚠️ Amma «Göndər»lə EYNİ görünmür: hər ikisi mavi çərçivəli olsaydı,
yan-yana iki bərabər düymə çıxardı və göz hansının əsas olduğunu
seçə bilməzdi. Ona görə sakit halda çərçivə və mətn bozdur; kursor
üstündə maviyə keçir, yəni basıla bilən olduğu yenə aydındır.
⚠️ `