/* ==========================================================================
   East West Drilling — brend qatı

   `main.css` faylından SONRA yüklənir.
   Baza `:root` tokenləri artıq bizim palitraya keçirilib
   (bax docs/TEMPLATE_DIFF.md), ona görə burada yalnız baza CSS-də
   olmayan komponentlər və nöqtəvi düzəlişlər var.
   ========================================================================== */

:root{
  /* Palitranın tam şkalası — şablonun tokenləri bunların üzərinə oturur.
     Mənbə: design/logo.svg, bax docs/DESIGN.md */
  --ewd-primary-50:#F1F3F9;
  --ewd-primary-100:#DEE3F0;
  --ewd-primary-200:#B7C3DF;
  --ewd-primary-300:#8C9FCC;
  --ewd-primary-400:#536FB3;
  --ewd-primary:#103795;
  --ewd-primary-600:#0E2F80;
  --ewd-primary-700:#0B2668;
  --ewd-primary-800:#091E50;
  --ewd-primary-900:#061539;

  --ewd-accent-100:#F0F8E1;
  --ewd-accent-300:#CDE699;
  --ewd-accent:#96CA2B;
  --ewd-accent-600:#81AE25;
  --ewd-accent-700:#698D1E;

  --ewd-neutral-50:#F6F6F6;
  --ewd-neutral-100:#E9E9E9;
  --ewd-neutral-200:#D0D0D0;
  --ewd-neutral-400:#8D8D8F;
  --ewd-neutral:#616164;
  --ewd-neutral-700:#444446;
  --ewd-neutral-900:#252526;
}

/* --------------------------------------------------------------------------
   Yaşıl accent üzərində mətn

   `#96CA2B` ağ üzərində 1.95 kontrast verir — mətn kimi işlənə bilməz.
   Şablon narıncı üzərində ağ mətn işlədirdi (narıncıda bu keçirdi), yaşılda
   keçmir. Ona görə accent fonlu elementlərdə mətn tündləşdirilir:
     yaşıl fon + #061539  -> 9.18 (AAA)
   Bax docs/DESIGN.md -> Kontrast.
   -------------------------------------------------------------------------- */
.fx-btn-1,
.fx-btn-2,
[class*="fx-btn"]:not(.fx-btn-outline){
  color:var(--ewd-primary-900);
}

/* --------------------------------------------------------------------------
   Loqo — şablonun loqosu yastı wordmark idi, EWD loqosu nişan + iki sətirdir.
   Hündürlüklə ölçülür ki, header hündürləşməsin.
   -------------------------------------------------------------------------- */
.fx-header-1-logo img,
.fx-footer-1-logo img,
.offcanvas-logo img{
  width:auto;
  height:56px;
  max-height:56px;
}

@media (max-width:1199px){
  .fx-header-1-logo img,
  .fx-footer-1-logo img,
  .offcanvas-logo img{ height:46px; max-height:46px; }
}

/* --------------------------------------------------------------------------
   text-transform: capitalize ləğvi

   Şablon 28 yerdə `capitalize` tətbiq edir — ingilis dilində Title Case
   normaldır, Azərbaycan və rus dilində qrammatik səhvdir. Üstəlik e-poçt
   ünvanı «Contact@Ewd.Az» kimi çıxırdı.

   `uppercase` qaydalarına toxunulmur — onlar dekorativ etiketlərdir.
   -------------------------------------------------------------------------- */
.fx-heading-1,
.fx-heading-2,
.fx-pr-btn-1,
.fx-search-btn-1,
.fx-play-btn-1,
.txa-offcanvas-search-form-btn,
.mobile-main-navigation .navbar-nav li a,
.main-navigation .navbar-nav li a,
.fx-about-1-card .card-tags li,
.fx-services-2-btn,
.fx-services-7-card-content .card-title,
.fx-projects-7-filter-btn button,
.fx-testimonial-1-slider-main-item .author-bio,
.fx-sidebar-gategories a,
.fx-form-1-label,
.fx-cta-1-form-btn,
.fx-team-1-content .t1-btn,
.fx-team-4-content .t1-btn,
.fx-team-details-person-info .person-degi li,
.fx-career-opening-1-item .item-tag li,
.fx-job-apply-form-label-2,
.fx-job-apply-form .country,
.fx-job-apply-form-radio,
.fx-job-apply-form-agree,
.fx-footer-1-menu li a,
.fx-footer-1-menu-2 li a{
  text-transform: none;
}

/* Mətn animasiyası hərfləri sətirlərə bölür və ilk sətrə capitalize verir */
.txaa-split-text-2 .split-line div div:nth-child(1){
  text-transform: none;
}

/* --------------------------------------------------------------------------
   Dil seçici header-in sağ blokunda — şablonun «request a quote» düyməsinin
   yerində. Dropdown mexanizmi şablonundur, burada yalnız yerləşdirmə var.
   -------------------------------------------------------------------------- */
/* Boşluq iyerarxiyası. Şablonda hamburger-dən əvvəl enli «request a quote»
   düyməsi vardı; onu dil seçicisi ilə əvəz etdiyimiz üçün ölçülər yenidən
   nizamlanır:

     menyu elementləri arası   ~37px   (şablonun öz `li` marginləri)
     menyu -> dil seçici        40px   (`.fx-header-1-main` gap)
     dil seçici -> hamburger    20px

   Şablonun 80px gap-ı burada çox böyük boşluq yaradırdı. */
.fx-header-1-main{ gap: 40px; }

.fx-header-1-action-link{ gap: 0; }

.fx-header-1-action-link .fx-lang-nav{ margin-right: 20px; }

.fx-header-1-action-link .fx-lang-nav .navbar-nav{
  margin: 0;
  padding: 0;
}

/* Şaquli padding aşağıda — menyu ilə eyni 32px (bax «dropdown-un
   başlanğıc nöqtəsi» şərhi). */

/* --------------------------------------------------------------------------
   Azərbaycan və rus diakritikaları

   Şablonun başlıqlarında `line-height: 0.9` var və mətn animasiyası sətirləri
   `overflow: hidden` olan `.split-line` qutusuna salır. İngilis dilində bu
   problem yaratmır, amma «Ə», «Ğ», «Ç», «Ş» hərflərinin quyruğu kəsilir.
   Sətir hündürlüyü bir az artırılır — animasiya işləməyə davam edir.
   -------------------------------------------------------------------------- */
.fx-hero-1-slider-item-title,
.fx-scn-title-1,
.fx-scn-title-2,
.fx-cta-1-content-title,
.fx-marquee-text-1-item .item-text{
  line-height: 1.06;
}

.split-line{
  padding-bottom: .08em;
}

/* --------------------------------------------------------------------------
   Dil seçici — header-in sağ blokunda

   Şablonun menyu dropdown-u burada işlədilir, amma o, geniş alt menyular
   üçün qurulub: `min-width: 250px` və sola çıxma (`left: 0`). Dil siyahısı
   3 qısa koddan ibarətdir və header-in sağ kənarındadır, ona görə:
     - eni məzmuna görə daralır,
     - sağ kənara bağlanır (sağa daşıb ekrandan çıxmasın deyə),
     - şaquli padding azaldılır.

   Ox işarəsi şablonda `a::before` ilə `right: 0`-a bağlanır — linkə sağdan
   yer verilməsə, mətnin üstünə düşür.
   -------------------------------------------------------------------------- */
.fx-header-1-action-link .fx-lang-nav .navbar-nav{
  margin: 0;
  padding: 0;
}

.fx-header-1-action-link .fx-lang-nav .navbar-nav > li{
  margin: 0;
  position: relative;
}

/* Dropdown-un başlanğıc nöqtəsi.

   Şablon dropdown-u `top: 100%` ilə `li`-nin ALT kənarına bağlayır, menyu
   linklərində isə `padding: 32px 0` var — ona görə `li` header-in tam
   hündürlüyünü (80px) tutur və siyahı header-in alt kənarından açılır.

   Dil seçicisində əvvəl şaquli padding YOX idi: `li` cəmi 32px qalırdı və
   siyahı «AZ» yazısının lap dibindən, menyudan 24px yuxarıdan açılırdı —
   göz vahidliyi pozulurdu (müştəri qeydi 2026-09-04). İndi eyni 32px
   verilir; header hündürləşmir, çünki hamburger düyməsi onsuz da 80px-dir. */
.fx-header-1-action-link .fx-lang-nav .navbar-nav > li > a{
  padding: 32px 18px 32px 0;
}

.main-navigation.fx-lang-nav .navbar-nav li .dropdown-menu{
  left: auto;
  right: 0;
  min-width: 0;
  width: max-content;
  /* Şaquli padding menyununku ilə eyni (20px) — yalnız en məzmuna görə
     daralır, çünki siyahıda 3 qısa dil kodu var. */
  padding: 20px 0;
  text-align: center;
}

.main-navigation.fx-lang-nav .navbar-nav li .dropdown-menu li{
  margin-left: 0;
  padding: 3px 0;
}

.main-navigation.fx-lang-nav .navbar-nav li .dropdown-menu li a{
  padding: 4px 22px;
}

/* --------------------------------------------------------------------------
   Header-in hündürlüyü

   Hamburger düyməsi 80x80-dir və header-in tam hündürlüyünü tutmalıdır.
   Loqonun `height` atributu 86px olduğu üçün header 86px-ə uzanırdı və
   düymənin altında-üstündə 3px ağ zolaq qalırdı.
   -------------------------------------------------------------------------- */
.fx-header-1-main-logo img{
  width: auto;
  height: 56px;
  max-height: 56px;
  display: block;
}

@media (max-width: 1199px){
  .fx-header-1-main-logo img{ height: 44px; max-height: 44px; }
}

/* --------------------------------------------------------------------------
   Fixed header şəffaflığı mobil ekranda hero mətninin arxasından "görünməsi"

   `.fx-header-1-main` fonu 88% qeyri-şəffafdır (`main.css`) — bu, header
   sabitləşəndə (`.txa_sticky`) hero-nun scroll-a bağlı paralaks mətni
   məhz header-in arxasına düşəndə 12% sızma yaradır və mətn qırıq-qırıq
   görünür. `main.js` scroll animasiyasına toxunula bilmədiyi üçün (bax
   CLAUDE.md) həll yalnız header-i tam qeyri-şəffaf etməkdir — 768px-dən
   aşağı, sabit header həmişə görünən yeganə element olduğu üçün.
   -------------------------------------------------------------------------- */
@media (max-width: 767px){
  .txa_sticky_header.fx-header-1-area .fx-header-1-main{
    background-color: #fff;
  }
}

/* --------------------------------------------------------------------------
   Partnyor loqoları

   Şablonun loqoları eyni ölçülü SVG-dir; bizimkilər köhnə saytdan çıxarılmış
   rastr PNG-dir və nisbətləri müxtəlifdir, ona görə hündürlük bərabərləşdirilir.
   Rəngli loqolar bir-birindən fərqlənməsin deyə sönükdürülür, hover-də açılır.
   -------------------------------------------------------------------------- */
.fx-client-1-slider-item img{
  height: 72px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .55;
  transition: filter .25s ease, opacity .25s ease;
}
.fx-client-1-slider-item span{
  display: flex;
  align-items: center;
}

.fx-client-1-slider-item:hover img{
  filter: grayscale(0);
  opacity: 1;
}

/* Toxunma ilə idarə olunan cihazlarda (tablet/mobil) hover yoxdur, ona görə
   loqo əbədi solğun qalırdı — bu ekranlarda birbaşa rəngli göstərilir. */
@media (hover: none){
  .fx-client-1-slider-item img{
    filter: grayscale(0);
    opacity: 1;
  }
}

/* --------------------------------------------------------------------------
   Xidmətlər fon şəkli — Swiper-siz keçid

   `ewd.js` bu konteynerə Swiper qurmur (bax şərh orada — loop+fade
   kombinasiyası Swiper-in daxili xətasına səbəb olurdu). Slaydlar sadə
   opacity keçidi ilə üst-üstə göstərilir, `.is-active` sinfini JS verir.
   -------------------------------------------------------------------------- */
.fx-services-1-bg-img-slider .swiper-wrapper{
  display: block;
  position: relative;
}
.fx-services-1-bg-img-slider .swiper-slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .6s ease;
}
.fx-services-1-bg-img-slider .swiper-slide.is-active{
  opacity: 1;
  position: relative;
}

/* --------------------------------------------------------------------------
   Əlaqə blokları

   Şablonda ikinci qutu çəhrayı (`#FEEDE8`) — narıncı accent-in açıq tonu idi.
   Bizim accent yaşıldır, ona görə onun açıq tonu (accent-100) qoyulur.
   Kontrast: #252526 mətn -> 14.02 (AAA), #616164 -> 5.65 (AA).
   -------------------------------------------------------------------------- */
.fx-contact-us-1-info-box:nth-child(2){
  background: var(--ewd-accent-100);
}

/* Yaşıl qutuda mətn tünd olmalıdır — accent üzərində ağ 1.95 verir */
.fx-contact-us-1-info-box:nth-child(1),
.fx-contact-us-1-info-box:nth-child(1) .box-title,
.fx-contact-us-1-info-box:nth-child(1) .address{
  color: var(--ewd-primary-900);
}

.fx-client-1-slider-item{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   Hero slaydları — şəkil altında boşluq

   Swiper-in baza CSS-i `.swiper-wrapper{align-items:flex-start}` və
   `.swiper-slide{height:auto}` işlədir: konteynerin hündürlüyü ən uzun
   slaydın məzmununa görə təyin olunur, amma daha qısa mətnli slaydlar bu
   hündürlüyə stretch olunmur — öz təbii (daha qısa) hündürlüyündə qalıb,
   arxa fon (fx-hero-1-area-in özü) altdan görünür. Hər slaydda eyni mətn
   olanda hiss olunmurdu, indi hər slaydın öz fərqli uzunluqda title/text-i
   olduğu üçün üzə çıxdı.

   `align-items: stretch` bu konkret Swiper strukturunda təsir etmir (test
   edilib) — əsl bərabərləşdirmə JS ilə edilir, bax
   `assets/js/ewd.js` → `equalizeHeroSlides()`. Bu qayda ehtiyat üçün qalır.
   -------------------------------------------------------------------------- */
.fx-hero-1-active .swiper-wrapper{
  align-items: stretch;
}
.fx-hero-1-slider-item{
  height: 100%;
}

/* --------------------------------------------------------------------------
   Hero LCP — ilk slayd Swiper init-dən ƏVVƏL görünsün (2026-09-05)

   `main.css`-in `.fx-hero-1-slider-item-img img` baza qaydası şəkli
   "gizli" başlanğıc vəziyyətində çəkir: `transform:translateX(150px)`,
   `filter:blur(5px)` + künc maskası (`--_i:15%/0%/0%/8%`). Yalnız Swiper
   (`main.js`, `defer`) `.swiper-slide-active` klassını əlavə edəndə
   `transition: all 1s var(--cube-1)` ilə "açılmış" vəziyyətə (translateX 0,
   blur 0, maska 0%) keçir. LCP elementi məhz bu `<img>`-dir (fetchpriority
   =high) — nəticədə brauzer şəkli ƏVVƏLCƏ tərs/bulanıq/maskalanmış çəkir,
   "əsl" (kəskin) render yalnız `main.js` yüklənib icra olunandan SONRA,
   1 saniyəlik keçiddən sonra baş verir. Lighthouse `lcp-breakdown-insight`
   bunu `elementRenderDelay` kimi göstərir (~1.1 s, `docs/STATE.md`
   "2026-09-05, dördüncü düzəliş").

   Həll: `.swiper-initialized` klassı hələ YOXKƏN (yəni HTML render olunan
   kimi, JS-dən asılı olmadan) ilk slaydın şəklini birbaşa "aktiv" (açılmış)
   vəziyyətdə çək, keçidsiz. Swiper init olub `.swiper-slide-active`-i
   birinci slayda verəndə (autoplay HƏMİŞƏ 0-cı slaydla başlayır) vizual
   nəticə DƏYİŞMİR — sadəcə "açılma" animasiyasını görünməzdən əvvəl bitirmiş
   oluruq. `:not(.swiper-initialized)` qoruyucudur: init-dən SONRA loop
   fırlanıb ilk slayd qeyri-aktiv olanda bu qayda ÖZÜ ARADAN QALXIR və
   şablonun öz gizlətmə/maska animasiyası normal işləyir (yoxsa sonrakı
   dövrlərdə ilk slayd həmişə "açıq" görünüb reveal effekti pozulardı).
   -------------------------------------------------------------------------- */
.fx-hero-1-slider .swiper-container:not(.swiper-initialized) .swiper-slide:first-child .fx-hero-1-slider-item-img img{
  --_i: 0%;
  transition: none;
  transform: translateX(0);
  filter: blur(0);
}

/* --------------------------------------------------------------------------
   Hero autoplay keçidi — "açılma" (reveal) animasiyası Swiper-in öz
   fade keçidindən GECİKİR (2026-09-05, ayrı sessiya)

   `docs/STATE.md`-nin "2026-09-05, dördüncü düzəliş" bölməsində qeyd
   edilmiş, kod bazasından ƏVVƏL də mövcud olan qüsur: `main.js` hero-nu
   `effect:'fade' + loop:true + autoplay` ilə qurur. Devtools-da rAF
   səviyyəsində ölçüldü (hər keçid dövründə, 3 dildə): Swiper-in öz
   opacity keçidi (`swiper-fade`, inline `style.opacity`) ~460-470 ms-də
   bitir, AMMA `main.css`-in `.fx-hero-1-slider-item-img img` baza
   qaydasının "açılma" keçidi (`transition: all 1s var(--cube-1)` —
   maska/blur/translateX) 1000-1200 ms çəkir. Nəticə: yeni aktiv slayd
   opacity 1-ə ~470 ms-də çatır, amma ÖZ şəkli hələ də ~550-700 ms daha
   bulanıq/künc-maskalı/sürüşmüş qalır — istifadəçi bunu "növbəti slaydın
   üstündə bulanıq, düzbucaqlı maskalanmış şəkil" kimi görür. Bu, iki
   keçidin FƏRQLİ mənbədən (main.js-in Swiper konfiqurasiyası —
   dəyişdirilə bilmir — və main.css-in dizayn keçidi) gəlməsi və heç vaxt
   sinxron olmamasından yaranır, `main.js`-ə TOXUNULMADAN düzəlir.

   Həll: yalnız AKTİV olan (hədəf) vəziyyət üçün "açılma" keçidinin
   müddətini Swiper-in fade müddətindən (~470 ms) QISA et — CSS
   Transitions spesifikasiyasına görə keçidin müddəti HƏDƏF (sonrakı)
   vəziyyətin `transition-duration`-u ilə təyin olunur, ona görə bu qayda
   YALNIZ "açılma" istiqamətinə təsir edir; "bağlanma" (aktivdən çıxma)
   hələ də bazadakı 1s-i işlədir, amma o zaman slayd artıq opacity 0-da
   olduğu üçün zərərsizdir. `:not(.swiper-initialized)` ilk-yük qaydasına
   TOXUNULMUR (o, `transition:none` verir, bura aid deyil).
   -------------------------------------------------------------------------- */
.fx-hero-1-slider .swiper-container.swiper-initialized .swiper-wrapper .swiper-slide:is(.swiper-slide-active) .fx-hero-1-slider-item-img img{
  transition-duration: .35s;
}

/* --------------------------------------------------------------------------
   Layihə kartlarının ikonları

   Şablonun abstrakt SVG-lərinin yerinə generasiya edilmiş PNG ikonlar
   (`assets/img/ewd/project-icons/`) qoyuldu. Rəngi PNG-nin özü yox, CSS
   `mask-image` verir — PNG-nin alfa forması maska kimi işlədilir, rəng
   `background-color`-dandır. Bu, şablonun əvvəlki SVG `fill` texnikasının
   eynisini (default boz, hover-də brend rəngi) raster şəkillə təkrarlayır.
   -------------------------------------------------------------------------- */
.fx-project-1-item-single .item-icon-img{
  display: block;
  width: 63px;
  height: 63px;
  background-color: #DFE1E5;
  -webkit-mask-image: var(--icon-mask);
  mask-image: var(--icon-mask);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  transition: background-color .3s var(--cube-1);
}
.fx-project-1-item-single:hover .item-icon-img{
  background-color: var(--fx-clr-pr-1);
  animation: fx-project-1-icon .5s;
}

/* Footer sürüşən mətn zolağındakı ayırıcı ikon (Layihə 3 ilə eyni PNG,
   eyni mask texnikası). Şablonun SVG-si 64px idi — mətnin yanında çox
   kiçik göründüyü üçün böyüdüldü (90px, mobil 70px). */
.fx-marquee-text-1-item .item-icon-img{
  display: block;
  width: 90px;
  height: 90px;
  background-color: #000;
  -webkit-mask-image: var(--icon-mask);
  mask-image: var(--icon-mask);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  transition: background-color .3s var(--cube-1);
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px){
  .fx-marquee-text-1-item .item-icon-img{
    width: 70px;
    height: 70px;
  }
}
.fx-marquee-text-1-item .item-icon-img:hover{
  background-color: var(--fx-clr-pr-1);
}

/* --------------------------------------------------------------------------
   Hero başlığı — rus versiyası

   Konteyner 515px-ə sabitdir (main.css), rus sözləri (məs. "партнёрство",
   "стабильный") AZ/EN-dən xeyli uzundur — heç bir söz cütü sətirdə birləşə
   bilmir, hər söz öz sətrinə düşür (4 sətir). `text-wrap:balance` bunu
   düzəltmədi (bərabərləşdirmə sətir SAYINI azaltmır, yalnız mövcud
   sətirləri bölüşdürür). Yeganə real həll şrifti kiçiltməkdir. `em` işə
   yaramır (valideyndən miras alır, main.css-in özünün eyni elementə
   qoyduğu mütləq px-dən asılı deyil) — ona görə main.css-in hər breakpoint-i
   üçün 72%-ə uyğun mütləq qiymət təkrarlanır.
   -------------------------------------------------------------------------- */
:lang(ru) .fx-hero-1-slider-item-title{
  font-size: 46px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  :lang(ru) .fx-hero-1-slider-item-title{
    font-size: 39px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  :lang(ru) .fx-hero-1-slider-item-title{
    font-size: 36px;
  }
}
@media (max-width: 767px) {
  :lang(ru) .fx-hero-1-slider-item-title{
    font-size: 20px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  :lang(ru) .fx-hero-1-slider-item-title{
    font-size: 36px;
  }
}

/* --------------------------------------------------------------------------
   Slayder ox düymələri (əvvəl/növbəti) — narıncı hover

   `.fx-slider-btn-1-item` şablonun ortaq slayder düymə komponentidir
   (partnyor, komanda, digər slayderlərdə işlədilir) — hover fonu şablonda
   narıncı idi (rgba(252,82,32,.7)). Brend palitrasında narıncı yoxdur.
   -------------------------------------------------------------------------- */
.fx-slider-btn-1-item:hover{
  background: var(--fx-clr-pr-1);
}
.fx-slider-btn-1-item:hover i{
  color: #fff;
}

/* --------------------------------------------------------------------------
   Yekun çağırış (CTA)

   Şablonda burada newsletter forması var idi və qrid sütununu tam doldururdu.
   Onu düymə ilə əvəz etdiyimiz üçün düymə də sütun boyu uzanırdı — məzmuna
   görə daraldılır və sütunun sonuna bağlanır.
   -------------------------------------------------------------------------- */
.fx-cta-1-content .fx-pr-btn-1{
  display: inline-flex;
  align-items: center;
  justify-self: end;
  width: auto;
}

@media (max-width: 991px){
  .fx-cta-1-content .fx-pr-btn-1{ justify-self: start; }
}

/* --------------------------------------------------------------------------
   Footer loqosu — header-dəkindən böyük ola bilər, məhdudiyyət yoxdur.
   2026-09-04 (müştəri tələbi): bir qədər böyüdüldü, 88 -> 108px.
   -------------------------------------------------------------------------- */
.fx-footer-1-logo img{
  width: auto;
  height: 108px;
  max-height: 108px;
  display: block;
}

@media (max-width: 991px){
  .fx-footer-1-logo img{ height: 82px; max-height: 82px; }
}

/* --------------------------------------------------------------------------
   Preloader — dövr + aşağıdan-yuxarı "dolan" qazma başlığı

   Xarici fasiləli dövr yavaş fırlanır. Qazma başlığının ikonu (raster,
   təsdiqlənmiş, bax preloader.html.twig-dəki qeyd) DƏYİŞMİR və özü
   fırlanmır — solğun baza üzərində eyni ikonun tam-rəngli versiyası
   aşağıdan yuxarı `clip-path: inset()` ilə "dolub-boşalır" (dərinlik
   göstəricisi effekti).

   Mərkəzləşmə: `.ewd-preloader-bit-holder`-in `transform`-u sadə
   bounding-box mərkəzi (-50%,-50%) yox, PNG-nin piksel-alfa sıxlığına görə
   hesablanmış OPTİK ağırlıq mərkəzinədir (bit forması asimmetrikdir —
   yuxarıda kompakt patron/yaxa, aşağıda uzun nazik spiral və sivri uc —
   bounding-box mərkəzi ilə göz üçün "mərkəz" hiss olunan nöqtə üst-üstə
   düşmür). Hesablama: `python -c "PIL alpha-weighted centroid"` →
   cx=40.27%, cy=51.91% (bounding-box-un 50%/50%-i əvəzinə).
   `prefers-reduced-motion` seçimi olan istifadəçilərdə animasiya dayanır.
   -------------------------------------------------------------------------- */
.ewd-preloader-wrap{
  position: relative;
  width: 200px;
  height: 200px;
  max-width: 100%;
  margin: 0 auto;
}

.ewd-preloader-ring{
  width: 100%;
  height: 100%;
  color: var(--ewd-neutral-200);
  transform-origin: 100px 100px;
  animation: ewd-ring-spin 4.5s linear infinite;
}

.ewd-preloader-bit-holder{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-40.27%, -51.91%);
  width: 19%;
}

.ewd-preloader-bit-base{
  display: block;
  width: 100%;
  height: auto;
  opacity: .3;
}

.ewd-preloader-bit-fill{
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  clip-path: inset(100% 0 0 0);
  animation: ewd-bit-fill 2s ease-in-out infinite;
}

@keyframes ewd-ring-spin{
  to{ transform: rotate(360deg); }
}

@keyframes ewd-bit-fill{
  0%{ clip-path: inset(100% 0 0 0); }
  50%{ clip-path: inset(0% 0 0 0); }
  100%{ clip-path: inset(100% 0 0 0); }
}

@media (prefers-reduced-motion: reduce){
  .ewd-preloader-ring,
  .ewd-preloader-bit-fill{ animation: none; }
  .ewd-preloader-bit-fill{ clip-path: inset(40% 0 0 0); }
}

/* --------------------------------------------------------------------------
   Kontrast düzəlişləri (Lighthouse a11y)

   Şablon bir neçə yerdə yaşıl `--fx-clr-pr-1`-i ağ fonda MƏTN kimi
   işlədib — docs/DESIGN.md-də qeyd olunduğu kimi bu kombinasiya 1.95
   nisbətlə WCAG AA-ni keçmir (min. 4.5 lazımdır). Yaşıl yalnız dekorativ
   qalır (sərhəd, ikon), mətn tünd mavi `--ewd-primary-700`-ə keçirilib
   (ağ fonda 10+ nisbət, AAA).
   -------------------------------------------------------------------------- */
.fx-about-1-card .card-tags li{
  color: var(--ewd-primary-700);
}
.fx-blog-1-item-single .item-subtitle{
  color: var(--ewd-primary-700);
}
.fx-back-top-1{
  color: var(--ewd-primary-700);
}
.fx-footer-1-disc-text{
  opacity: 72%;
}
/* Xidmətlər slaydında başlıq linki `has-clr-white`-i valideyn h4-dən
   miras almır (brauzerin defolt link rəngi kontrastı pozur) — rəng
   birbaşa `<a>`-ya verilir, valideyndən miras alınır.

   2026-09-05: canlı Lighthouse (mobil, ana səhifə) `color-contrast` FAIL
   verdi — `div.swiper-slide > div.fx-services-1-slider-item >
   h3.fx-heading-1 > a`, ağ mətn #96CA2B fonda, 1.94:1. Əvvəlki qeyd
   (aşağıda saxlanılıb, tarix üçün) fon mənbəyini SƏHV tapmışdı:
   `.fx-services-1-area{background:var(--fx-clr-sd-1)}` (tünd mavi) bu
   BÖLMƏNİN fonudur, amma başlıq KARTIN — `.fx-services-1-slider`
   (main.css:7224, fərqli class, "-area" YOX, "-slider") — İÇİNDƏDİR, o
   isə `background: var(--fx-clr-pr-1)` yəni HƏMİŞƏ yaşıl #96CA2B.
   Kartın fonu şəkillə/slaydla dəyişmir, sabit yaşıldır — ona görə
   "LOKAL yoxlanıldı, heç yerdə düşmür" nəticəsi səhv idi.
   Fon dəyişmir (kart dizaynı budur), ona görə mətn tündləşdirilir:
   həm başlıq (`.item-title`, ağ, `has-clr-white`-dən miras), həm təsvir
   (`.item-disc`, ağ + `opacity:.72`, `has-opacity-7`-dən — daha da
   solğun, təkbaşına 1.94:1-dən də pisdir) eyni yaşıl kartdadır, ikisi də
   tünd rəngə keçirilib, opacity ləğv edilir (əks halda tündləşdirilmiş
   mətn özü solğunlaşıb kontrastı yenidən aşağı salardı). Hover halı
   toxunulmadı — `.item-title:hover{color:var(--fx-clr-sd-1)}`
   (main.css) artıq tünd mavidir, öz spesifikliyi (əlavə `:hover`
   pseudo-sinfi) bu qaydalardan yüksəkdir.
   Kontrast (tam qeyri-şəffaf, #96CA2B fonda): `--ewd-primary-800`
   (#091E50) -> 8.1:1 (AAA, həm 24px başlıq, həm 16px təsvir üçün
   kifayətdir). */
.fx-services-1-slider-item .item-title,
.fx-services-1-slider-item .item-title a{
  color: var(--ewd-primary-800);
}
.fx-services-1-slider-item .item-disc{
  color: var(--ewd-primary-800);
  opacity: 1;
}
/* Layihələr siyahısındakı "sifarişçi" nişanı (`item-subtitle`) yaşıl
   fonda (`--fx-clr-pr-1`) ağ mətn idi (main.css:8944, 12px, kontrast
   1.95) — docs/DESIGN.md-nin "yaşıl yalnız dekorativ" qaydasını pozurdu.
   Tünd mavi mətnə keçirildi (kontrast ~8.6:1). */
.fx-projects-7-filter-item-single .item-subtitle{
  color: var(--ewd-primary-700);
}

/* --------------------------------------------------------------------------
   Statistika sayğacları (haqqımızda bölməsi) — 3 dil

   EN/RU etiketləri ("Years of experience", "Опыт работы: 18 лет" və s.)
   AZ-dan uzundur — hər elementin təbii eni buna görə fərqlidir və
   `.fx-counter-1`-in `flex-wrap` xassəsi 3-cü elementi növbəti sətrə atır.
   Maksimum en təyin edərək etiket öz daxilində 2 sətrə bölünür, üçü də
   həmişə eyni sətirdə qalır.
   -------------------------------------------------------------------------- */
.fx-counter-1{
  gap: 20px 24px;
}
.fx-counter-1-item{
  max-width: 130px;
}

/* --------------------------------------------------------------------------
   Breadcrumb (daxili səhifələr, məs. /haqqimizda) — header hündürlüyü

   Header `position:absolute` ilə breadcrumb-un üstünə minir (şablonun öz
   dizaynı — böyük hero fonu ilə hesablaşdırılıb). Bizim header əlavə üst
   zolağı (əlaqə + sosial) daşıdığı üçün şablonun defolt `padding-top:85px`-i
   (yalnız ≥1400px enində, dar ekranlarda öz media query-ləri var) header-i
   (≈128px) örtmür — breadcrumb mətni onun altında qalırdı.
   -------------------------------------------------------------------------- */
@media (min-width: 1400px){
  .breadcrumb-area{
    padding-top: 170px;
  }
}


/* --------------------------------------------------------------------------
   Daxili səhifələrin giriş mətni

   Şablonun daxili səhifələrində bölmədən əvvəl gələn qısa izah mətni üçün
   hazır sinif yoxdur — oxunaqlı sətir uzunluğu üçün eni məhdudlaşdırılır.
   -------------------------------------------------------------------------- */
/* Giriş mətni konteynerin tam eni boyunca gedir — altındakı şəbəkə ilə
   eyni kənarlarda bitsin (müştəri tələbi 2026-09-04). */
.ewd-intro-text{
  margin-bottom: 60px;
}

/* --------------------------------------------------------------------------
   Partnyorlar səhifəsi — statik loqo şəbəkəsi

   Şablonun `fx-clients-7-wrap`-ı 4 sütunludur; müştəri sətirdə 3 loqo
   istəyib. Loqolar rəngli qalır (şablonun boz→rəngli hover keçidi bizdə
   yoxdur, çünki hər kartda tək şəkil var).
   -------------------------------------------------------------------------- */
@media (min-width: 992px){
  .ewd-partners-grid{
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.ewd-partners-grid .fx-clients-7-item{
  height: 140px;
}
.ewd-partners-grid .fx-clients-7-item img{
  max-height: 84px;
  max-width: 100%;
  width: auto;
  height: auto; /* width/height atributları CLS üçün verilir; ölçünü CSS + nisbət təyin edir */
  object-fit: contain;
}
/* Şablonun kartında İKİ şəkil var — boz nüsxə (`nth-child(1)`) və altındakı
   rəngli nüsxə (`nth-child(2)`, defolt `opacity: 0`); hover-də birincisi
   söndürülür, ikincisi yanır. Bizdə loqolar həmişə rənglidir, kartda tək
   şəkil var, ona görə hər iki `nth-child` qaydası zərərlidir:
     • hover-də `nth-child(1)` bizim yeganə loqonu söndürürdü;
     • webp üçün `<picture>` sarğısı əlavə olunandan sonra `<source>` birinci
       uşaq oldu və `<img>` `nth-child(2)`-yə sürüşdü — loqolar ÜMUMİYYƏTLƏ
       görünmədi (2026-09-04). `display: contents` layout-u düzəldir, amma
       `nth-child` DOM-a baxır, ona görə ona təsir etmir.
   Ən sadə və davamlı həll: bu şəbəkələrdə loqo həmişə tam görünür. */
.ewd-partners-grid .fx-clients-7-item img{
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Xidmət detalı — başlıq şəkli

   Şablonda `.fx-services-details-img` üçün ölçü qaydası YOXDUR (main.css-də
   yalnız `...-content` var), ona görə şəkil öz təbii nisbəti ilə açılırdı;
   portret foto (s1-img-3, 1280×1920) bütün ekranı doldururdu. Sabit
   landşaft nisbəti verilir, kadr `object-fit: cover` ilə kəsilir.
   -------------------------------------------------------------------------- */
.fx-services-details-img{
  aspect-ratio: 16 / 7;
  max-height: 520px;
}
@media (max-width: 767px){
  .fx-services-details-img{ aspect-ratio: 4 / 3; }
}

/* Ana səhifədəki müştəri loqoları — sətirdə 5 (müştəri tələbi 2026-09-04).
   Dar ekranlarda 5 sütun oxunmur, ona görə pilləli azalma. */
@media (min-width: 992px){
  .ewd-clients-grid{
    grid-template-columns: repeat(5, 1fr);
  }
}
@media (max-width: 991px) and (min-width: 576px){
  .ewd-clients-grid{
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Sertifikatlar — sətirdə 3 sənəd, klikdə lightbox

   Şəbəkə şablonun `glry-row-2`-sindən (3 sütun) gəlir, amma şablonun
   `fx-projects-details-gallery-img`-i landşaft fotolar üçün 395px sabit
   hündürlük + `object-fit:cover` verir. Sertifikat A4 portretdir —
   `cover` sənədin kənarlarını kəsərdi, ona görə `contain` və portret
   nisbət işlədilir.
   -------------------------------------------------------------------------- */
/* Şablonun `.glry-row-2`-si yalnız `.fx-projects-details-gallery`
   valideyninin daxilində işləyir (descendant selektor) — sertifikat
   şəbəkəsi o valideyni daşımadığı üçün sütunlar burada təyin edilir. */
.ewd-cert-grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
  align-items: start;
}
@media (max-width: 991px){
  .ewd-cert-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575px){
  .ewd-cert-grid{ grid-template-columns: 1fr; }
}
.ewd-cert-img{
  display: block;
  height: auto;
  aspect-ratio: 1 / 1.35;
  background: #F7F7F7;
  border: 1px solid #F0F0F0;
  cursor: pointer;
}
.ewd-cert-img img{
  object-fit: contain !important;
  padding: 10px;
}
.ewd-cert-item .item-title{
  font-size: 22px;
}
.ewd-cert-pdf-link{
  display: inline-block;
  margin-top: 6px;
  color: #0f1f14;
  text-decoration: underline;
  font-size: 15px;
}
.ewd-cert-pdf-link:hover{
  color: #96CA2B;
}

/* --------------------------------------------------------------------------
   Xidmət kartı — mətn başlığın altında

   Şablonun `.fx-serve-1-slider-item .content`-i
   `display:flex; justify-content:space-between; align-items:center`-dir,
   çünki orada başlıq + kiçik ox düyməsi yan-yana durur (ox
   `services-details.html`-ə gedir). Bizdə xidmət detalı səhifəsi yoxdur,
   ox əvəzinə qısa təsvir mətni var — flex sətir qalsaydı mətn başlığın
   YANINDA sıxılardı, ona görə sütuna keçirilir.
   -------------------------------------------------------------------------- */
.fx-serve-1-slider-item .content.ewd-service-content{
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

/* --------------------------------------------------------------------------
   Komanda səhifəsi — statik şəbəkə (karusel yox)

   Partnyorlar səhifəsindəki kimi sətirdə 3 element, amma çərçivəsiz
   (müştəri tələbi 2026-09-04). Kart daxili şablonun `fx-team-1-slider-item`-idir;
   Swiper-dən çıxarıldığı üçün eni şəbəkədən gəlir.
   -------------------------------------------------------------------------- */
.ewd-team-grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
}
@media (max-width: 991px){
  .ewd-team-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575px){
  .ewd-team-grid{ grid-template-columns: 1fr; }
}
.ewd-team-grid .fx-team-1-slider-item{
  border: 0;
  border-radius: 0;
}
.ewd-team-grid .fx-team-1-slider-item .item-img{
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Layihə detalı — üz qabığı şəkli düymənin üstünə minirdi

   Şablon şəkli 70px yuxarı dartır (`main.css:9418 margin-top:-70px`), çünki
   orada meta qutusunda 6 sətir var (Client/Category/Start/End/Tag/Budget) və
   başlıq bloku hündürdür — dartma düyməyə çatmır. Bizdə 3 real göstərici var
   (sahə/dərinlik/xidmətlər), blok alçaqdır və şəkil «Layihələr» düyməsinin
   üstünə düşürdü. Dartma ləğv edilir, üfüqi sürüşmə şablondakı kimi qalır.
   -------------------------------------------------------------------------- */
.fx-projects-details-img{
  margin-top: 0;
}

/* Şablonda meta kartı şəklin üstünə düşür və estetik görünür — çünki orada
   6 sətir var (Client/Category/Start/End/Tag/Budget) və kart uzundur.
   Bizdə 3 real göstərici var, kart qısadır və şəklə çatmırdı. Kart layout-a
   toxunmadan (transform) aşağı sürüşdürülür — üst-üstə düşmə məlumat
   sayından asılı olmur. Dar ekranlarda başlıq bloku sətirlərə bölündüyü
   üçün sürüşmə söndürülür. */
@media (min-width: 992px){
  .fx-projects-details-meta{
    transform: translateY(70px);
    z-index: 2;
  }
}

/* --------------------------------------------------------------------------
   Lightbox açılan şəkillər — istifadəçi klikləyə biləcəyini görsün

   Şablonda şəkil-lightbox nümunəsi yoxdur (yalnız `popup-video` var), ona
   görə affordans burada qurulub: hover-də tünd örtük + brend rəngli dairədə
   böyütmə ikonu görünür, şəkil azca yaxınlaşır, kursor `zoom-in` olur.
   İkon SVG data-URI kimi verilib — Font Awesome ailəsinin adından/çəkisindən
   asılı olmasın deyə (`all.min.css`-də 5 və 6, Free/Pro qarışıqdır).
   -------------------------------------------------------------------------- */
.ewd-lightbox{
  position: relative;
  display: block;
  overflow: hidden;
  cursor: pointer;
}
.ewd-lightbox img{
  transition: transform .5s var(--cube-1);
}
.ewd-lightbox::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(6, 21, 57, .45);
  opacity: 0;
  transition: opacity .35s ease;
  z-index: 1;
}
.ewd-lightbox::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--fx-clr-pr-1) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23061539' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4M11 8.5v5M8.5 11h5'/%3E%3C/svg%3E") center / 26px 26px no-repeat;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.75);
  transition: opacity .35s ease, transform .35s var(--cube-1);
  z-index: 2;
}
.ewd-lightbox:hover::after{ opacity: 1; }
.ewd-lightbox:hover::before{
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.ewd-lightbox:hover img{ transform: scale(1.05); }

/* --------------------------------------------------------------------------
   Lightbox — kənardakı «zoom-out» kursoru

   Magnific Popup `closeOnContentClick` aktiv olanda `<html>`-ə
   `.mfp-zoom-out-cur` sinfi əlavə edir və kursoru lupa-minus (`zoom-out`)
   edir. Bizdə şəklin üstündə onsuz da böyütmə ikonu var, kənarda isə bu
   kursor çaşdırıcıdır — adi göstəriciyə qaytarılır. Bağlama düyməsi və
   oxlar öz `pointer`-ini saxlayır.
   -------------------------------------------------------------------------- */
.mfp-zoom-out-cur,
.mfp-wrap,
.mfp-container,
.mfp-image-holder{
  cursor: default;
}
/* Bağlama düyməsi və oxlar kliklənəndir — `.mfp-image-holder .mfp-close`
   selektoru daha spesifik olduğu üçün o da açıq yazılır. */
.mfp-close,
.mfp-arrow,
.mfp-image-holder .mfp-close,
.mfp-zoom-out-cur .mfp-image-holder .mfp-close{
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Video lightbox — 16:9 çərçivə

   GLightbox-un inline slaydı (`gslide-inline`) daxilində `overflow: auto`
   var; məzmun bir neçə piksel daşanda şablonun yaşıl rəngə boyanmış
   scrollbar-ları görünürdü (sağda şaquli, altda üfüqi yaşıl zolaq).
   Ona görə həm daşma bağlanır, həm də çərçivə slaydın içində
   mərkəzləşdirilir.
   -------------------------------------------------------------------------- */
.glightbox-container .gslide-inline{
  overflow: hidden;
  background: transparent;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.glightbox-container .gslide-inline .ginner-container{
  width: 100%;
  height: 100%;
}
.ewd-video-frame{
  position: relative;
  width: min(92vw, 1200px);
  max-height: 84vh;
  aspect-ratio: 16 / 9;
  margin: auto;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
}
.ewd-video-frame iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* --------------------------------------------------------------------------
   Əlaqə bölməsi — foto əvəzinə Google Xəritə (müştəri tələbi 2026-09-04)

   Şablonda bu qutu `img-cover` idi və hündürlüyünü şəklin özü verirdi.
   `iframe`-in öz ölçüsü yoxdur, ona görə qutuya sabit hündürlük verilir;
   altındakı `fx-contact-us-1-content` kartları şablondakı kimi qalır.
   -------------------------------------------------------------------------- */
.ewd-contact-map{
  height: 480px;
  overflow: hidden;
}
.ewd-contact-map iframe{
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  /* Xəritə boz-mavi tonlardadır; şablonun tünd fonunda daha yumşaq otursun */
  filter: saturate(0.9);
}
@media (max-width: 991px){
  .ewd-contact-map{ height: 360px; }
}

/* GLightbox şəkil altındakı başlıq zolağını həmişə qurur, hətta başlıq
   boş olanda da (layihə qalereyasında `title` atributu qəsdən yoxdur —
   müştəri tələbi 2026-09-04). Boş zolaq 63px ağ sahə kimi görünürdü. */
.gslide-description:has(.gslide-title:empty):has(.gslide-desc:empty){
  display: none;
}

/* Dil seçicisinin açar elementi artıq link deyil (bax
   partials/lang-switcher.html.twig) — kursor və klaviatura davranışı
   əl ilə verilir. Şablonun dropdown-u yalnız `:hover`-lə açılır,
   `:focus-within` klaviatura ilə gəzənlər üçün əlavə edilir. */
.fx-lang-nav .navbar-nav > li.dropdown > a[role="button"]{
  cursor: pointer;
}
.fx-lang-nav .navbar-nav > li.dropdown:focus-within > .dropdown-menu{
  opacity: 1;
  visibility: visible;
  transform: translateY(0px) translateZ(0);
}

/* --------------------------------------------------------------------------
   WebP — `<picture>` sarğısı layout-a təsir etməsin

   Şəkillər `<picture><source type="image/webp"><img ...></picture>` şəklində
   verilir (bax `webp()` — src/dependencies.php). Şablonun CSS-i isə şəkli
   valideynin BİRBAŞA uşağı kimi ölçür (`height:100%`, `object-fit`,
   `img:nth-child()`); araya yeni element düşəndə bu qaydalar pozulurdu.
   `display: contents` sarğını layout ağacından tamamilə çıxarır — `<img>`
   yenə də öz əvvəlki valideyninin uşağı kimi ölçülür.
   -------------------------------------------------------------------------- */
picture{
  display: contents;
}

/* ==========================================================================
   Əlaqə forması — bal tələsi, bildiriş bloku və nəticə modalı
   ========================================================================== */

/* Bal tələsi (honeypot). `display:none` İŞLƏTMİRİK — bəzi botlar məhz gizli
   sahələri atlamağı öyrənib. Sahə ekrandan kənara çıxarılır: brauzer üçün
   mövcuddur, istifadəçi görmür, ekran oxuyucusuna isə `aria-hidden` deyir. */
.ewd-hp{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* JS-siz variantda formanın üstündə çıxan bildiriş. */
.ewd-form-note{
  display: block;
  margin-bottom: 24px;
  padding: 16px 20px;
  border-radius: 8px;
  border-left: 4px solid var(--ewd-accent);
  background: var(--ewd-accent-100);
  color: var(--ewd-primary-900);
}
.ewd-form-note.is-error{
  border-left-color: #C0392B;
  background: #FDEDEC;
}
.ewd-form-note strong{ display: block; margin-bottom: 4px; }

/* Nəticə modalı (AJAX). `ewd.js` → `initContactForm()` qurur. */
.ewd-modal{
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.ewd-modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(6, 21, 57, .72);
  backdrop-filter: blur(3px);
}
.ewd-modal-panel{
  position: relative;
  width: min(460px, 100%);
  padding: 40px 36px 32px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .25);
  text-align: center;
}
.ewd-modal-icon{
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--ewd-accent-100);
  position: relative;
}
/* Uğur — yaşıl işarə; xəta — qırmızı «!». İkonlar CSS ilə çəkilir ki,
   şrift/şəkil asılılığı olmasın. */
.ewd-modal.is-ok .ewd-modal-icon::after{
  content: "";
  position: absolute;
  left: 22px;
  top: 16px;
  width: 16px;
  height: 28px;
  border: solid var(--ewd-accent-700);
  border-width: 0 4px 4px 0;
  transform: rotate(45deg);
}
.ewd-modal.is-error .ewd-modal-icon{ background: #FDEDEC; }
.ewd-modal.is-error .ewd-modal-icon::after{
  content: "!";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 700 34px/1 var(--fx-font-pr-1, sans-serif);
  color: #C0392B;
}
.ewd-modal-title{
  margin: 0 0 10px;
  font-size: 24px;
  line-height: 1.2;
  color: var(--ewd-primary-900);
}
.ewd-modal-text{
  margin: 0 0 28px;
  color: var(--ewd-neutral);
}
/* Şablonun `.fx-pr-btn-1`-i mətni `span[data-front]`-dan alır; burada düymə
   sadə mətnlidir, ona görə minimal öz stilini alır. */
.ewd-modal-close{
  display: inline-block;
  padding: 12px 32px;
  border: 0;
  border-radius: 6px;
  background: var(--ewd-accent);
  color: var(--ewd-primary-900);
  font-weight: 600;
  cursor: pointer;
}
.ewd-modal-close:hover{ background: var(--ewd-accent-600); }

/* --------------------------------------------------------------------------
   Məxfilik siyasəti / İstifadə şərtləri (`templates/legal.html.twig`)

   Şablonun qlobal `ul{list-style:none}` qaydası (main.css) bura da tətbiq
   olunur — siyahı işarələri əl ilə qaytarılır.
   -------------------------------------------------------------------------- */
.ewd-legal-content{
  max-width: 860px;
}
.ewd-legal-list{
  list-style: disc;
  padding-left: 22px;
}
.ewd-legal-list li{
  margin-bottom: 8px;
}
.ewd-legal-updated{
  font-style: italic;
}

/* 2026-09-05 audit: preloader-in yuxarı sürüşmə keçidi 1 s idi (main.css
   `#preloader{transition:all 1s}`) — LCP şəkli o müddətdə örtülü qalırdı.
   Keçid 0.35 s-ə endirilib; forma/animasiya dəyişmir. */
#preloader{transition-duration:.35s}

/* 2026-09-05 audit: `.txa-offcanvas-box-close i` şablonda font-weight:400 alır,
   ikon isə `fa-solid` (900). Tam FA ilə fərq görünmürdü; subset-də «regular»
   şriftində xmark yoxdur → mobil menyuda X əvəzinə boş kvadrat çıxırdı.
   Qayda: ikonun çəkisi onun style class-ı ilə eyni olmalıdır. */
.txa-offcanvas-box-close i.fa-solid{font-weight:900}

/* 2026-09-05, main.js əvəzlənməsi: `/layiheler` grid-i əvvəllər Isotope
   (`layoutMode:'fitRows'`, filtr YOXDUR — bax docs/MAIN_JS_INVENTORY.md)
   ilə mütləq mövqeləndirilirdi. `.grid-item` eni artıq main.css-də faizlə
   verilib (8894-8905-ci sətirlər: 50% masaüstü, 100% mobil) — Isotope-un
   funksiyası sırf "sətirlərə bölüb düz sırala" idi, filtr/sort yoxdur.
   Bu, sadə flex-wrap ilə eyni nəticəni verir, JS lazım deyil. `.grid-sizer`
   Isotope-un sütun genişliyini ÖLÇMƏK üçün istifadə etdiyi boş prob
   elementidir — JS onu artıq oxumur, vizual sahə tutmasın deyə gizlədilir. */
.fx-projects-7-filter-item.grid{
  display: flex;
  flex-wrap: wrap;
}
.fx-projects-7-filter-item .grid-sizer{
  display: none;
}

/* 2026-09-05: Layihələr siyahısında ox (item-btn) mobil enində başlığın
   altına düşürdü. Səbəb: `.fx-project-1-item-single` (ana səhifə) və
   `.fx-projects-7-filter-item-single .content` (/layiheler kartları)
   mobil breakpoint-də `flex-wrap:wrap` alır (main.css) — başlıq mətni
   RU-da uzun olanda (`Месторождение Ховсан 1728`) sətrə sığmır, flex
   qutu ikinci sətrə keçir, ox da onunla gedir. Ölçüldü (Puppeteer,
   390px): AZ/EN ana səhifədə görünmürdü, RU-da VƏ /layiheler-də (bütün
   dillərdə, kart eni daha dardır) ox başlığın altına düşürdü.
   Həll: konteyneri `nowrap` et, başlığı `flex:1 1 auto;min-width:0` ilə
   sıxıla bilən et (öz İÇİNDƏ çox sətrə bölünsün, amma sətir BLOKU heç vaxt
   oxu aşağı itələməsin), ox `flex:0 0 auto` ilə sabit qalsın. */
@media (max-width: 767px){
  .fx-project-1-item-single{
    flex-wrap: nowrap;
  }
  .fx-project-1-item-single .item-title{
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .fx-project-1-item-single .item-btn{
    flex: 0 0 auto;
  }
}
@media (max-width: 575px){
  /* Ən dar telefonlarda (məs. 390px) başlıq bir pillə kiçildilir ki, iki
     sətrə bölünəndə də konteyner həddən artıq hündürləşməsin. */
  .fx-project-1-item-single .item-title{
    font-size: 18px;
  }
}

/* Eyni problem /layiheler kartlarında (`.fx-projects-7-filter-item-single`) —
   kart `.content` qutusu daha dar olduğu üçün AZ/EN/RU-nun HAMISINDA baş
   verirdi (yoxlanıldı, 390px). `.left` (başlıq+badge sütunu) eyni
   `flex:1 1 auto;min-width:0` məntiqini alır. */
@media (max-width: 767px){
  .fx-projects-7-filter-item-single .content{
    flex-wrap: nowrap;
  }
  .fx-projects-7-filter-item-single .content .left{
    flex: 1 1 auto;
    min-width: 0;
  }
  .fx-projects-7-filter-item-single .item-title{
    overflow-wrap: anywhere;
  }
  .fx-projects-7-filter-item-single .item-btn{
    flex: 0 0 auto;
  }
}

/* 2026-09-05 audit: naviqasiya dropdown chevron-u şablonda `::before{content:"\f107";
   font-weight:700}` ilə gəlir — bu qlif <i> ikonu deyil, ona görə subset siyahısına
   düşməmişdi (solid subset-ə əlavə edildi). Şablonun 700 çəkisi brauzerin
   font-matching qaydası ilə mövcud 900 faylına düşür — əlavə qayda lazım deyil;
   `bin/check-icons.mjs` eyni qaydanı tətbiq edib yoxlayır. */

/* 2026-09-05 (sahib rəyi): X bağlama düyməsi və mobil dropdown ox-u
   template-in defolt dolğun kvadrat fonunu (main.css: `.txa-offcanvas-box-close`
   `background:#C9F7CA`, `.dropdown-btn.active` `background-color:var(--fx-clr-pr-1)`)
   götürürdü — sahib bunu lazımsız hesab etdi. İkon oxunaqlığı üçün fon YOX,
   rəng dəyişikliyi ilə əvəz olundu; ölçü/klik sahəsi (45×55 / 56×56) saxlanılıb. */
.txa-offcanvas-box-close{
  background: transparent;
}
.txa-offcanvas-box-close:hover{
  background: transparent;
  color: var(--fx-clr-pr-1);
}
.mobile-main-navigation .navbar-nav li .dropdown-btn:is(.active){
  background-color: transparent;
  color: var(--fx-clr-pr-1);
}