/* ==========================================================================
   ATAM LLC — atam.com.ua
   Tek dosya stil sayfası. Framework yok, build yok.
   Bölümler: 1 Tokenlar · 2 Reset · 3 Tipografi · 4 Yerleşim · 5 Bileşenler
             6 Başlık/Altbilgi · 7 Sayfa blokları · 8 Form · 9 Yardımcılar
   ========================================================================== */

/* 1 — TOKENLAR ============================================================ */
:root {
  /* Marka */
  --navy:        #202C73;
  --navy-700:    #1A2460;
  --navy-500:    #3B47A0;
  --navy-100:    #E8EAF4;
  /* Pembe skalası kontrasta göre bölünmüştür — tonu keyfî seçmeyin:
     --rose      dekoratif (odak halkası, ışıma, kenarlık) — metin taşımaz
     --rose-300  koyu lacivert zeminde metin (6,15:1) */
  --rose:        #E4577E;
  --rose-300:    #F49CB5;

  /* Vurgu ikilisi — 07658-64 Deluxe ambalajının pembesinden örneklendi
     (16 335 piksel; koyu bant %18, güvenli açık uç). Ambalajda koyu ÜSTTE,
     açık ALTTA — buton gradyanı bu yönü taklit eder (180deg).
     --accent-deep METİN tonudur: beyaz 6,37 · bg-alt 6,00 · krem 5,71 ·
     rose-soft 5,83 — hepsi AA üstü, tek ton, gradyan metinde KULLANILMAZ.
     --accent yalnız gradyanın açık ucudur; beyaz metinle 4,72. Ambalajın
     asıl açık pembesi (#CD7890) beyaz metinle 3,14 verdiği için buton
     yüzeyine giremez. Hover uçları %8 koyu: #9E2A54 / #AC4969. */
  --accent:      #BB4F72;
  --accent-deep: #AC2E5B;
  --accent-grad:       linear-gradient(180deg, var(--accent-deep), var(--accent));
  --accent-grad-hover: linear-gradient(180deg, #9E2A54, #AC4969);
  /* --rose-600/--rose-700/--rose-on-dark 15.08.2026'da kaldırıldı — birincil
     buton ve vurgu metinleri artık --accent ailesinde. */
  --rose-soft:   #FDF2F6;

  /* Belinno mavisinin koyu uçları — reklam karesinin zemininden okundu.
     Not: --navy (#202C73) hâlâ marka rengidir — başlıklar, bağlantılar,
     .btn--navy ve gezinme durumları onu kullanmayı sürdürür. */
  --belinno-spot: #2142B6;   /* spot ışığın en açık noktası */
  --belinno-deep: #0E2052;   /* kenar tonu */
  --belinno-dark: #051958;   /* orta ton */

  /* Hero'nun zemini. YALNIZ hero kullanır. Açık merkez sağda (%74) — ürün
     görselinin durduğu taraf — sola ve kenarlara koyulaşır.
     Alt CTA ve altbilgi bunu KULLANAMAZ: radyal degradenin geometrisi kutuya
     görelidir, yani her kutu onu kendi ölçüsüne göre yeniden ölçekler. İki
     komşu kutu aynı degradeyi taşısa bile sınırda farklı renkler buluşur —
     denendi, dikiş kapanmadı, x%74'te 29 RGB fark ölçüldü. */
  --belinno-surface: radial-gradient(125% 105% at 74% 40%,
    var(--belinno-spot) 0%, var(--belinno-dark) 55%, var(--belinno-deep) 100%);

  /* Sayfa sonu yüzeyi — alt CTA + altbilgi. Dikey lineer degrade, çünkü
     lineer 180deg yatayda tekdüzedir: alt CTA'yı DÜZ --footer-top ile
     boyayınca altbilginin üst kenarıyla birebir aynı renk oluşur ve dikiş
     her x'te tam olarak 0 olur. Değerler radyal degradenin altbilgi
     bölgesinden okundu, yani hero'yla aynı renk ailesinde kalır. */
  --footer-top:    #122C7C;
  --footer-bottom: #061A57;
  --cream:       #F7F2E8;   /* koyu zemindeki açık butonun hover tonu */

  /* Nötr */
  --ink:         #14172B;
  --muted:       #5B6076;
  --line:        #E3E5EE;
  --bg:          #FFFFFF;
  --bg-alt:      #F7F8FC;

  /* Tipografi */
  --font-head:   "Comfortaa", "Segoe UI", system-ui, sans-serif;
  --font-body:   system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Ölçek */
  --step--1:     clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0:      clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  --step-1:      clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
  --step-2:      clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --step-3:      clamp(1.9rem, 1.5rem + 2vw, 3rem);

  /* Yapı */
  --container:   1180px;
  --gutter:      clamp(1rem, 4vw, 2rem);
  /* Bölümlerin dikey iç boşluğu — TEK kaynak. Her bölüme ayrı sabit değer
     yazmayın; .section, .trust, .page-head, .cat ve .footer bunu kullanır.
     Yüksekliğe bağlıdır (svh): eski clamp(3rem, 8vw, 5.5rem) genişliğe
     bakıyordu ve 1280px'te ekran ne olursa olsun 88px veriyordu. */
  --section-pad: clamp(2.5rem, 5svh, 3.5rem);
  --radius:      14px;
  --radius-sm:   8px;
  --shadow:      0 1px 2px rgba(20, 23, 43, 0.04), 0 8px 24px rgba(20, 23, 43, 0.06);
  --shadow-lift: 0 2px 4px rgba(20, 23, 43, 0.06), 0 16px 40px rgba(20, 23, 43, 0.1);
  --header-h:    88px;   /* logo yüksekliği + nefes payı; mobilde 880px altında 64px */
  --logo-h:      69px;   /* 60px'in %15 fazlası — header-h SABİT kaldı, nefes 19px */
}

/* 2 — RESET =============================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img, svg, picture { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--rose); outline-offset: 2px; border-radius: 4px; }

/* 3 — TİPOGRAFİ =========================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.18;
  color: var(--navy);
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }
p  { margin: 0 0 1em; max-width: 68ch; text-wrap: pretty; }
/* Alt çizgi görünür bir ton olmalı: link rengi (--navy) gövde metninden (--ink)
   yalnızca 1,41:1 ayrışır, yani paragraf içindeki bağlantı renkten anlaşılmaz. */
a  { color: var(--navy); text-decoration-color: var(--navy-500); text-underline-offset: 3px; }
a:hover { color: var(--accent-deep); text-decoration-color: currentColor; }
ul, ol { padding-left: 1.2em; }

.eyebrow {
  font-family: var(--font-head);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 0.6rem;
}
.lead { font-size: var(--step-1); color: var(--muted); line-height: 1.55; }

/* 4 — YERLEŞİM ============================================================ */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-pad); }
.section--alt { background: var(--bg-alt); }
/* Alt CTA bloğu DÜZ --footer-top'tur, degrade değil. .section--navy her
   sayfada son bölümdür, yani daima altbilgiye komşudur; altbilginin degradesi
   de tam bu renkten başlar, dolayısıyla aradaki dikiş her x'te 0'dır ve
   koyulaşma oradan aşağı doğru sürer.
   Buraya degrade VERMEYİN — radyal olan kutuya göre ölçeklenir, lineer olan
   ise altbilgininkinden farklı yükseklikte biteceği için sınırda uyuşmaz.
   Ayırıcı çizgi de EKLEMEYİN, bölünmüşlüğü artırır. */
.section--navy { background: var(--footer-top); color: #fff; }
.section--navy h2, .section--navy h3 { color: #fff; }
.section--navy p { color: rgba(255, 255, 255, 0.82); }

/* Ana sayfanın alt CTA'sı. Açıklama metni kaldırıldı — buton zaten aynı şeyi
   söylüyordu — ve geriye tek buton kaldı. Ayrı bir bölüm gibi değil,
   altbilginin üst bandı gibi okunsun diye dikey dolgu --section-pad'in
   yaklaşık %40'ı. Yalnız ana sayfada: pro-nas/en-about'taki yasal bilgi
   ızgarası ve spivpratsia/partnership'teki başlıklı CTA .section--navy'yi
   başka amaçla kullanıyor, onlar tam dolguda kalmalı. */
.section--footer-band { padding-block: clamp(1rem, 2svh, 1.5rem); }
.section--footer-band .btn-row { margin-top: 0; }
.section__head { max-width: 62ch; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.section__head--center { margin-inline: auto; text-align: center; }

.grid { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
/* auto-fill (auto-fit değil) bilinçlidir: auto-fit boş sütunları çökertir, bu yüzden
   2 ürünlü bir grup sayfa genişliğine yayılıp diğer gruplardan çok daha iri kartlar
   üretiyordu (medya kutusu 407px'e karşı 264px). auto-fill boş rayı korur, sütun
   genişliği her grupta aynı kalır. grid-auto-rows: 1fr ise satırları eşitler —
   yoksa 3+2 dizilen bir ızgarada ikinci satır ilkinden alçak kalıyordu. */
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); grid-auto-rows: 1fr; }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* 5 — BİLEŞENLER ========================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  font-family: var(--font-head); font-weight: 700; font-size: var(--step-0);
  border: 2px solid transparent; border-radius: 999px;
  text-decoration: none; cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.btn:active { transform: translateY(1px); }
/* Gönderim sırasında. Soluklaştırma yerine koyu ton: opacity beyaz metnin
   kontrastını eşiğin altına düşürürdü, durumu imleç ve metin zaten anlatıyor. */
.btn[disabled] { cursor: progress; }
.btn[disabled]:active { transform: none; }
.btn--primary[disabled] { background: #9E2A54; border-color: #9E2A54; }
/* Dolgu ambalaj yönünde hafif gradyan (koyu üst -> açık alt); METİN gradyan
   taşımaz. Beyaz metin açık uçta 4,72, koyu uçta 6,37 — ikisi de AA üstü. */
.btn--primary { background: var(--accent-grad); color: #fff; border-color: var(--accent-deep); }
.btn--primary:hover { background: var(--accent-grad-hover); border-color: #9E2A54; color: #fff; }
.btn--navy { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn--navy:hover { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }
/* Koyu zeminde ikincil buton. .btn--ghost'u BURADA kullanmayın: ghost'un
   varsayılan hâli lacivert yazıdır ve .hero koyu olmasına rağmen .section--navy
   olmadığı için o varyanta düşer — yazı zeminle aynı renge gelir (1,0:1). */
.btn--light { background: #fff; color: var(--navy); border-color: #fff; }
.btn--light:hover { background: var(--cream); border-color: var(--cream); color: var(--navy); }

.btn--ghost { background: transparent; color: var(--navy); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--navy); color: var(--navy); background: var(--navy-100); }
.section--navy .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.section--navy .btn--ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }

.card {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.card:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); border-color: var(--navy-100); }
/* display: grid şart — aspect-ratio'nun tek başına yetmediği yer burası.
   Kutunun yüksekliği auto olduğu için img'deki height: 100% çözülemiyor, görsel
   kendi doğal oranında açılıp kutuyu geriyordu (ana sayfada 966–1376px'lik medya
   kutuları). Izgara alanı kesin ölçülüdür, öğe ona gerilir.

   Zemin kartın kendi rengidir: ürün fotoğrafları şeffaf, ayrı bir zemin rengi
   onları kart içinde yamalı gösteriyordu.

   contain (cover DEĞİL): cover görseli kutuya doldurmak için kırpıyordu —
   Economy kartında ambalajdaki "24" yarıda kalıyor, üstelik her kartta farklı
   ölçek çıkıyordu (görsel kutuları 305–434px arası). contain tamamını gösterir.
   Not: contain küçük bir görseli BÜYÜTÜR; kategori görselleri en az 610 px
   olduğu için bugün büyütme olmuyor, daha küçük bir dosya koyarsanız bozulur. */
.card__media {
  background: transparent; aspect-ratio: 4 / 3;
  display: grid; overflow: hidden; padding: 0.875rem;
}
/* width/height: 100% KULLANMAYIN. Kutunun yüksekliği aspect-ratio'dan geldiği
   için yüzde yükseklik çözülmez; img kendi doğal oranında açılır, kutuyu taşar
   ve overflow: hidden onu keser. Kırpılmanın gerçek sebebi buydu — object-fit
   devreye bile girmiyordu. Izgara alanına gerdirmek (stretch) kesin ölçü verir;
   letterbox'ı object-fit yapar. min-*: 0 olmadan öğe içeriğinden küçülemez. */
.card__media img {
  align-self: stretch; justify-self: stretch;
  width: auto; height: auto; min-width: 0; min-height: 0;
  object-fit: contain;
}
.card__body { padding: 1.25rem 1.35rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.card__title { font-size: var(--step-1); margin-bottom: 0.35rem; }
/* Kategori kartındaki tek satırlık SEO alt yazısı. Tanıtım metninden (--muted)
   ayrışsın diye başlık fontu + vurgu rengi; anahtar kelimeyi taşır. */
.card__seo {
  font-family: var(--font-head); font-weight: 600; font-size: var(--step--1);
  color: var(--accent-deep); margin: 0 0 0.5rem;
}
.card__text { color: var(--muted); font-size: var(--step--1); margin-bottom: 1rem; }
.card__link { margin-top: auto; font-family: var(--font-head); font-weight: 700; color: var(--accent-deep); text-decoration: none; }
.card__link:hover { text-decoration: underline; }

/* Katalog: kategori çapa menüsü, bölümler ve ürün kartı
   Bu bloktaki sınıfları tools/build-products.mjs üretir — sınıf adlarını
   değiştirirseniz betiği de güncelleyin. */
/* Filtre çubuğu normal akışta — sticky KALDIRILDI (yerine sağ alttaki
   "yukarı dön" oku var; ok, kullanıcıyı filtrelere bir dokunuşla döndürür). */
.cat-nav {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  padding: 0.85rem 0; margin-bottom: 1rem; border-bottom: 1px solid var(--line);
}
.cat-nav a {
  padding: 0.4rem 0.9rem; border: 1px solid var(--line); border-radius: 999px;
  font-family: var(--font-head); font-weight: 600; font-size: var(--step--1);
  text-decoration: none; color: var(--navy); white-space: nowrap;
}
.cat-nav a:hover { background: var(--navy); border-color: var(--navy); color: #fff; }

.cat { padding-top: var(--section-pad); scroll-margin-top: calc(var(--header-h) + 60px); }
.cat__head { max-width: 60ch; margin-bottom: 1.5rem; }
.cat__head h2 { margin-bottom: 0.25rem; }
.cat__head p { color: var(--muted); margin: 0; }
.cat__group {
  font-size: var(--step-0); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--accent-deep); margin: 2rem 0 1rem;
  padding-bottom: 0.5rem; border-bottom: 1px solid var(--line);
}
.cat__group:first-of-type { margin-top: 0; }

.card--product { scroll-margin-top: calc(var(--header-h) + 60px); position: relative; }

/* Ürün fotoğrafları şeffaf PNG/WebP — zemin kartın kendi rengidir, beyaz dayatmıyoruz.
   Sabit oranlı kutu yeri baştan ayırır (CLS yok), görsel içinde ortalanır.
   width/height auto + yalnızca max-* sınırı: görsel ASLA büyütülmez, sadece
   kutuya sığmıyorsa küçültülür. Büyütme yumuşaklık yaratıyordu. */
.card--product .card__media {
  padding: 0.75rem;
}
/* Ürün kartı da aynı hatadan etkileniyordu: max-width/max-height: 100% de yüzde
   olduğu için çözülmüyor, 918×1000 görsel 263px'lik kutuda 357px basılıp
   kesiliyordu. Taban kuraldaki gerdirme burada da geçerli.
   Fark: scale-down (contain değil) — "hiçbirini büyütmeyin" kuralı ürün
   fotoğrafları için geçerli ve katalogda 220 px'lik eski görseller var.
   scale-down, none ile contain'in küçüğünü seçer: sığmayanı küçültür,
   küçük olanı olduğu boyutta bırakır. */
.card--product .card__media img {
  object-fit: scale-down;
}
.card__media--empty {
  width: 100%; height: 100%; display: grid; place-items: center;
  background: repeating-linear-gradient(45deg, var(--bg-alt) 0 10px, var(--navy-100) 10px 20px);
  color: var(--muted); font-family: var(--font-head); font-weight: 600; font-size: var(--step--1);
  text-align: center; padding: 1rem;
}
.card__badge {
  position: absolute; top: 0.75rem; right: 0.75rem; z-index: 1;
  background: var(--accent-deep); color: #fff; border-radius: 999px;
  padding: 0.2rem 0.7rem; font-family: var(--font-head); font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
}
.card__sku { font-size: var(--step--1); color: var(--muted); margin: 0 0 0.85rem; }
.card__sku strong { color: var(--navy); font-family: var(--font-head); }

.specs { margin: 0 0 1.1rem; padding: 0; display: grid; gap: 0.3rem; font-size: var(--step--1); }
.spec { display: flex; justify-content: space-between; gap: 0.75rem; padding-bottom: 0.3rem; border-bottom: 1px dotted var(--line); }
.spec:last-child { border-bottom: 0; }
.spec dt { color: var(--muted); }
/* tabular-nums: alt alta gelen sayısal değerler (3 / 140 / 17,22 м) eşit
   rakam genişliğiyle basılır, sütun dikey hizalanır — B2B spec listesinin
   sessiz hassasiyet sinyali. */
.spec dd { margin: 0; text-align: right; font-weight: 600; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }

.feature { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
.feature__icon {
  width: 44px; height: 44px; border-radius: 12px; margin-bottom: 0.9rem;
  display: grid; place-items: center; background: var(--rose-soft); color: var(--accent-deep);
  font-family: var(--font-head); font-weight: 700;
}
.feature h3 { font-size: var(--step-0); margin-bottom: 0.3rem; }
.feature p { font-size: var(--step--1); color: var(--muted); margin: 0; }
/* Altında bağlantı taşıyan kutu: flex sütun olmadan .card__link'teki
   margin-top: auto çalışmaz ve bağlantılar farklı yüksekliklerde asılı kalır. */
.feature--linked { display: flex; flex-direction: column; }
.feature--linked p { margin-bottom: 1rem; }

.stat { text-align: center; }
.stat__num { font-family: var(--font-head); font-size: var(--step-3); font-weight: 700; color: var(--rose); line-height: 1; }
.stat__label { font-size: var(--step--1); color: var(--muted); margin-top: 0.4rem; }
.section--navy .stat__label { color: rgba(255, 255, 255, 0.75); }
.section--navy .stat__num { color: #fff; }

.notice {
  border: 1px dashed var(--rose); background: var(--rose-soft); color: var(--navy);
  border-radius: var(--radius-sm); padding: 0.9rem 1.1rem; font-size: var(--step--1);
  margin-bottom: 2rem;
}
.notice strong { font-family: var(--font-head); }

/* 6 — BAŞLIK / ALTBİLGİ =================================================== */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: #fff; padding: 0.75rem 1.25rem; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; color: #fff; }

.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
/* Kısa ekranlarda menü akışa döner. SEBEP: sayfa sonuna inildiğinde alt CTA
   butonu yapışkan menünün arkasında kalıyordu. Butonun sayfa sonuna uzaklığı
   SABİTTİR — CTA'nın alt dolgusu + altbilgi, 1024'te 501px — ve butonun
   viewport'taki yeri şu denklemle belirlenir:
       butonÜstü = innerHeight − 501 − butonYüksekliği
   CTA'nın ÜST dolgusunu artırmak bu denklemde yer almaz; blok uzar, sayfa
   uzar, örtülme aynen kalır. Denendi ve ölçüldü, işe yaramıyor.
   Altbilgi sıkıştırılmayacağına göre (büyük ekranlarda seyrek görünmemeli)
   geriye tek değişken menünün 89px'i kalıyor. Eşik ölçümle bulundu: 1024'te
   buton 648px, 1280'de 625px viewport altında örtülmeye başlıyor.
   DİKKAT: dar VE kısa ekranda (~940px altı genişlik, orada altbilgi 3 sütuna
   düşüp uzuyor) bu da yetmeyebilir. */
@media (max-height: 660px) {
  .header { position: static; }
}
.header__inner { display: flex; align-items: center; gap: 1rem; min-height: var(--header-h); }
.logo { display: flex; align-items: center; text-decoration: none; margin-right: auto; }
.logo img { height: var(--logo-h); width: auto; }

/* .nav'ın flex olması şart: blok kalırsa .nav__list ile .lang alt alta düşer ve
   dil seçici menünün altına sarkar. Aynı satırda, dil seçici en sağda. */
.nav { display: flex; align-items: center; }
.nav__list { display: flex; align-items: center; gap: 0.35rem; list-style: none; margin: 0; padding: 0; }
.nav__link {
  display: block; padding: 0.5rem 0.85rem; border-radius: 999px;
  font-family: var(--font-head); font-weight: 600; font-size: var(--step--1);
  text-decoration: none; color: var(--ink);
}
.nav__link:hover { background: var(--navy-100); color: var(--navy); }
.nav__link[aria-current="page"] { color: var(--navy); background: var(--navy-100); }

.lang { display: flex; align-items: center; gap: 0.25rem; margin-left: 0.5rem; padding-left: 0.75rem; border-left: 1px solid var(--line); }
.lang a {
  font-family: var(--font-head); font-weight: 700; font-size: var(--step--1);
  text-decoration: none; color: var(--muted); padding: 0.3rem 0.5rem; border-radius: 6px;
}
.lang a:hover { color: var(--navy); background: var(--navy-100); }
.lang a[aria-current="true"] { color: var(--navy); background: var(--navy-100); }

.burger {
  display: none; width: 44px; height: 44px; border: 1px solid var(--line);
  background: var(--bg); border-radius: 10px; cursor: pointer; padding: 0;
}
.burger span { display: block; width: 20px; height: 2px; background: var(--navy); margin: 4px auto; border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Kırılım 880 değil 1024: 60px'lik logo + beş Ukraynaca bağlantı + dil seçici
   ~890px'te sığmaya başlıyor, yani 880'de pay kalmıyordu ve bağlantılar iki
   satıra kırılıyordu. site.js'teki matchMedia sorgusu bu değerle eş olmalı. */
@media (max-width: 1023.98px) {
  :root { --header-h: 64px; --logo-h: 51px; }  /* 44px'in %15 fazlası */
  .burger { display: block; }
  /* Açık menüde dikey yığın — masaüstündeki flex satırı geçersiz kılar. */
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 1rem var(--gutter) 1.5rem; box-shadow: var(--shadow);
    display: none;
  }
  .nav[data-open="true"] { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0.15rem; }
  .nav__link { padding: 0.75rem 1rem; font-size: var(--step-0); }
  .lang { margin: 0.75rem 0 0; padding: 0.75rem 0 0; border-left: 0; border-top: 1px solid var(--line); gap: 0.5rem; }
  /* Dokunma hedefi: masaüstündeki 36×32 kutu mobilde 44px eşiğinin altında kalıyor. */
  .lang a { min-width: 44px; min-height: 44px; display: grid; place-items: center; }
}

/* Altbilgi zemini de Belinno mavisi ailesinden, ama hero'nun spot degradesi
   BURAYA KOPYALANMAZ. İki sebep: altbilgi geniş ve düz bir alan, orada spot
   ışık yapay durur; ve radyal geometri kutuya göre ölçeklendiği için üstteki
   alt CTA ile arasında dikiş açar (ölçüldü: 29 RGB).
   Dikey lineer degrade yatayda tekdüzedir — üst kenarı her x'te --footer-top
   olduğu için düz boyalı alt CTA'yla tam olarak uyuşur. */
.footer {
  background: linear-gradient(180deg, var(--footer-top) 0%, var(--footer-bottom) 100%);
  color: rgba(255, 255, 255, 0.78); padding-block: var(--section-pad) 3rem;
}
/* Alt dolgu 2rem değil 3rem: telif + trademark satırı sayfanın dibine yapışık
   duruyordu. 48px, mesajlaşma butonlarıyla .footer__bottom arasındaki 40px'lik
   boşlukla dengeli. Yalnız konum — renkler değişmedi. */
.footer a { color: rgba(255, 255, 255, 0.78); text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer h4 { font-family: var(--font-head); color: #fff; font-size: var(--step-0); margin: 0 0 0.9rem; }
.footer__grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.footer__logo { height: 60px; width: auto; margin-bottom: 1rem; }
/* tabular-nums: telefon ve ЄДРПОУ satırlarındaki rakamlar eşit genişlikte. */
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; font-size: var(--step--1); font-variant-numeric: tabular-nums; }
/* Dokunma hedefi: linkler 17px yükseklikteydi (24px eşiğin altı). Dikey
   padding hedefi ~25px'e çıkarır; negatif margin görsel satır aralığını
   aynen korur — yalnız tıklanabilir alan büyür. */
.footer__list a { display: inline-block; padding-block: 4px; margin-block: -4px; }
.footer__bottom {
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.15);
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; justify-content: space-between;
  font-size: var(--step--1); color: rgba(255, 255, 255, 0.6);
}

/* 7 — SAYFA BLOKLARI ====================================================== */
/* Dikey ölçü viewport YÜKSEKLİĞİNE bağlıdır. Eski değer clamp(3rem, 9vw, 6rem)
   ile genişliğe bakıyordu: 1280px'te ekran ister 768 ister 1080 yüksek olsun
   hep 96px dolgu veriyor, içerik yapışkan menünün 96px altından başlıyor ve
   altta 96px boş lacivert kalıyordu. svh (vh değil) kullanılır — mobil tarayıcı
   çubukları vh'yi oynatıp açılışta zıplamaya yol açıyor.
   max-height YOK: overflow: hidden ile birlikte kısa ekranda içeriği keserdi.
   Yükseklik içeriğe göre oluşur, clamp'in üst sınırı şişmeyi zaten engelliyor. */
.hero {
  /* Hero zemini: Belinno reklam karesinin mavisi. Değerler kaynağın zemininden
     piksel bazında okundu — spot ışığın en açık noktası, orta ton, en koyu köşe.
     Spot ışık SAĞDA: ürün görselinin durduğu taraf; sola ve kenarlara koyulaşır.
     Bu renkler YALNIZ hero'dadır; logo, altbilgi ve başlıklardaki --navy aynı
     kaldı. --hero-edge, güven şeridiyle geçiş biraz sert bulunduğu için
     ölçülen en koyu köşeden (#010F32) bir tık açıldı. */
  --hero-spot: var(--belinno-spot);
  --hero-mid:  var(--belinno-dark);
  --hero-edge: var(--belinno-deep);
  background: var(--belinno-surface);
  color: #fff; padding-block: clamp(1rem, 3.5svh, 3.5rem);
  position: relative; overflow: hidden;
}
/* .hero::after IŞIMASI 16.08.2026'da SİLİNDİ ve GERİ GELMEMELİ.
   620px'lik pembe radyal (rgba(228,87,126,.4)) sağ üstteydi; mavi zeminle
   karışıp havluların arkasında MOR bölge üretiyordu (gerçek piksel #5A408F).
   Aylarca zemin degradesinde aranan morun kaynağı buydu — zemin üç kez
   değiştirildi, düzelmedi, çünkü mor bu katmandandı. Silinince aynı nokta
   #183496 temiz maviye döndü; mavi ışıma varyantı da denendi, görünür fark
   yaratmadığı için sade çözüm seçildi. Hero'ya ışıma/glow eklemeden önce
   bu kaydı okuyun. */
.hero__inner { position: relative; z-index: 1; display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
/* Görsel sütunu 0.95fr'den 0.75fr'e daraltıldı. Sebep: kutu 1:1 olunca kare
   yükseklik = sütun genişliği; 0.95fr'de görsel 503 px'e çıkıp metin sütununu
   (404 px) geçiyor ve hero'yu 458'den 542'ye uzatıyordu. Daraltınca kare tekrar
   metnin altında kalıyor, hero yüksekliği korunuyor. Metin sütunu genişleyince
   paragraf daha az satıra sarıyor — iki etki birbirini destekliyor. */
/* TEK oran — kırılıma göre ikinci bir kademe YOK. Bir ara 1200px üstünde
   1fr/1.3fr denendi; görsel metni eziyordu ve 1200'ü geçerken 425→599 px
   sıçraması oluyordu. Tek fr oranıyla ölçek viewport'la sürekli değişir.
   1.15/0.85 iki işi birden yapar: görsel küçülür ve metin sütunu genişler —
   Ukraynaca iki CTA yan yana 499 px ister, 1024 px'te 469 px'lik sütuna
   sığmıyordu (30 px eksik). Genişletince dile özel hack gerekmiyor. */
/* İki sütun 1024'ten başlar — gezinme kırılımıyla aynı sınır. 900'de
   başlayınca metin sütunu 446 px'e düşüyor ve Ukraynaca iki CTA (496 px)
   alt alta sarıyordu. 900–1023 artık tek sütun: butonlar tüm genişliği alır. */
@media (min-width: 1024px) { .hero__inner { grid-template-columns: 1.15fr 0.85fr; } }

/* Tek sütun kırılımında hero görselini gizler.
   Gerekçe ARTIK YER TUTUCU DEĞİL — 14.08.2026'da gerçek fotoğraf kondu ve karar
   bilinçli olarak korundu: tek sütuna inince görsel metnin altına geçip hero'yu
   829 px'e çıkarıyor, güven şeridini ilk ekranın tamamen dışına itiyor.
   Geri açmak isterseniz HTML'deki <img> yerinde duruyor; bu bloğu silin ve
   375 px'te şeridin ilk satırının hâlâ göründüğünü ÖLÇÜN. Görünmüyorsa gizlemek
   yerine küçültmeyi deneyin (örn. max-height: 28svh).
   Sınır 1023.98px: üstündeki min-width: 1024px kuralının tam tümleyeni —
   yani görsel TAM OLARAK tek sütun düzeninde gizlenir. */
@media (max-width: 1023.98px) {
  .hero__media { display: none; }
}
.hero h1 { color: #fff; }
/* Koyu zeminde --rose 3,57:1'de kalıyor; açık ton 6,15:1 veriyor. */
.hero .eyebrow { color: var(--rose-300); }
/* Hero'nun iç dikey ritmi de yüksekliğe bağlıdır. Dar ekranda paragraf 7 satıra
   çıkıp iki CTA alt alta sarınca metin sütunu 529px'e ulaşıyor ve hero, güven
   şeridinin ilk satırını katlamanın altına itiyordu. Satır aralığı 1,65 yerine
   1,5: bu gövde metni değil 22px'lik giriş metni, 1,5 okunur aralıkta kalır. */
.hero p { color: rgba(255, 255, 255, 0.85); font-size: var(--step-1); line-height: 1.5; }

/* Hero tipografisi YALNIZ iki sütunlu düzende bir tık küçülür: kazanılan dikey
   yer kare görsele gider. h1 --step-3'ün ~%13, paragraf --step-1'in ~%11 altında;
   paragraf 19 px'in altına inmez, satır 47–57 karakterde kalır.
   Mobilde ölçek DEĞİŞMEZ — orada görsel zaten gizli, küçültmenin karşılığı yok
   ve tek sütunda metin ekranın tamamını kullanıyor. */
@media (min-width: 900px) {
  .hero h1 { font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.6rem); }
  .hero p  { font-size: clamp(1.1rem, 1.05rem + 0.3vw, 1.3rem); max-width: 54ch; }
}
.hero .btn-row { margin-top: clamp(0.75rem, 2svh, 1.5rem); }
/* Hero butonlarında yan boşluk 1.5rem yerine 1.25rem: Ukraynaca iki CTA
   1024 px'te 499 px istiyor, sütun 514 px — 15 px pay fazla inceydi.
   Bu kısma payı 31 px'e çıkarır ve İngilizce görünümü bozmaz. */
.hero .btn { padding-inline: 1.25rem; }

/* Koyu zeminde birincil buton: gradyan dolgu miras kalır, ince açık dış hat
   ŞART. Ölçümle sabit: beyaz metnin 4,5 eşiği ile yüzeyin 3:1 eşiği tek dolgu
   renginde KESİŞMİYOR; pembe gradyanın lacivert zeminle yüzey farkı 1,5-2,4
   bandında kalıyor. Bileşen sınırını 2px'lik açık hat taşır — kaldırmayın. */
.hero .btn--primary,
.section--navy .btn--primary {
  border-color: rgba(255, 255, 255, 0.42);
}
.hero .btn--primary:hover,
.section--navy .btn--primary:hover {
  border-color: rgba(255, 255, 255, 0.55);
}
/* Görsel şeffaf zeminli ÜRÜN KÜMESİDİR (783×490), kare reklam karesi değil.
   Bu yüzden:
   - aspect-ratio YOK — kutu görselin kendi oranını alır (width + height: auto).
     Oran kilidine gerek yok: dosyanın kendisi kompozisyonu taşıyor.
   - Kart görünümü YOK — köşe yuvarlatma, kenarlık ve gölge kaldırıldı. Şeffaf
     bir kesime çerçeve çizmek olmayan bir kutuyu varmış gibi gösterirdi;
     ürünler doğrudan hero'nun lacivert zemininde durur.
   - object-fit gereksiz: kırpma yok, görsel doğal oranında ölçeklenir. */
.hero__media img {
  width: 100%; height: auto;
  margin-inline: auto;
}
/* Butonların altındaki tek satırlık teyit. Seçici .hero .hero__note olmalı:
   .hero p (0,1,1) yalın .hero__note'u (0,1,0) yenip punto büyütürdü. */
.hero .hero__note {
  display: flex; align-items: baseline; gap: 0.5rem;
  margin: clamp(0.5rem, 1.5svh, 1rem) 0 0; font-size: var(--step--1); color: rgba(255, 255, 255, 0.85);
}
.hero__check { color: var(--rose-300); font-weight: 700; }

.page-head { background: var(--bg-alt); border-bottom: 1px solid var(--line); padding-block: var(--section-pad); }
.page-head p { color: var(--muted); font-size: var(--step-1); margin-bottom: 0; }
/* About açılışı "ilk ekrana sığar" kuralına bağlı: başlık + giriş + "Хто ми"
   başlangıcı ilk ekranda. Font küçültme YOK — yalnız dikey boşluk kısılır.
   İki sınıf yalnız pro-nas/en-about'ta; diğer sayfalar tam dolguda.
   İç boşluklar da sıkı: breadcrumb-h1 arası ve h1-giriş arası kısaltıldı. */
.page-head--compact { padding-block: clamp(0.875rem, 2svh, 1.25rem); }
.page-head--compact .breadcrumb { margin-bottom: 0.4rem; }
.page-head--compact h1 { margin-bottom: 0.5rem; }
.section--tight { padding-block-start: clamp(0.875rem, 2svh, 1.25rem); }
.breadcrumb { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; margin: 0 0 0.75rem; font-size: var(--step--1); color: var(--muted); }
.breadcrumb a { color: var(--muted); }
.breadcrumb li + li::before { content: "/"; margin-right: 0.4rem; color: var(--line); }

/* İnce bant: aynı değişkenin yarısı — bölümlerle orantılı kalsın diye. */
.trust { border-block: 1px solid var(--line); background: var(--bg); padding-block: calc(var(--section-pad) * 0.5); }
/* align-items: start olmadan ızgara öğeleri en uzun maddeye gerilir: tek satırlık
   maddelerin altında 32px boşluk kalıyor, şerit ragged görünüyordu. start ile her
   kutu kendi metnine oturur ve dördü de aynı üst hizadan başlar. */
.trust__grid {
  display: grid; gap: 1.25rem 1.5rem; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.trust__item {
  font-family: var(--font-head); font-weight: 600; color: var(--navy);
  font-size: var(--step--1); line-height: 1.45; text-wrap: balance;
  /* İkon solda, metin yanında: ikonu metnin ÜSTÜNE koymak şerit yüksekliğini
     ~40px artırırdı; yan yana dizilim 40px ikonla iki satırlık metni aynı
     yükseklikte tutar. */
  display: flex; align-items: center; justify-content: center;
  gap: 0.65rem; text-align: left;
}
.trust__icon { block-size: 40px; inline-size: auto; flex: none; }

/* Why Belinno paragraflarının altındaki kompakt nitelik şeridi. Aynı ikon
   serisinden; paragraf yapısına dokunulmadı — maddeleştirme bilerek yapılmadı,
   bölüm kurumsal paragraf olarak kalıyor. Etiketler kısa tutulur. */
.quality-strip {
  list-style: none; padding: 0; margin: 1.5rem 0 0;
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem;
}
.quality-strip li {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-head); font-weight: 600;
  font-size: var(--step--1); color: var(--navy);
}
.quality-strip img { block-size: 32px; inline-size: auto; flex: none; }

/* Ana sayfadaki segment kutuları Співпраця'daki hedef kitle kartlarına
   çapa ile bağlanır; yapışkan menü hedefi örtmesin. */
.feature[id] { scroll-margin-top: calc(var(--header-h) + 24px); }

/* Yüzen mesajlaşma butonları: her sayfada sağ altta sabit. İkonlar
   çizgi SVG ailesinden (1.8 kalınlık, currentColor); zemin marka renkleri.
   Not: beyaz ikon / marka zemini kontrastı WhatsApp'ta 3:1 altındadır —
   marka renkleri bilinçli tercih, erişilebilir ad aria-label'da. */
.float-msg {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 60;
  display: flex; flex-direction: column; gap: 0.45rem;
  transition: opacity 180ms ease, transform 180ms ease;
}
/* Yüzen katman gizlenmesi (site.js yönetir): mobilde aşağı kaydırırken ve
   herhangi bir form alanı odaktayken — butonlar mobilde kartların sağa
   hizalı spec değerlerini ve form onay metnini örtüyordu (Playwright ile
   ölçüldü: dd sağ x=351, buton sol x=336). */
.float-hidden { opacity: 0; pointer-events: none; transform: translateY(10px); }
/* Yumuşak dış gölge her iki zeminde de (lacivert footer, beyaz bölüm) sınırı
   okutur; halka denendi ve kaldırıldı. Çap kademeli küçüldü: 48 -> 42 -> 38. */
.float-msg__btn {
  inline-size: 38px; block-size: 38px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  box-shadow: 0 6px 18px rgba(5, 25, 88, 0.30);
  transition: transform 140ms ease;
}
.float-msg__btn:hover { transform: translateY(-2px); color: #fff; }
.float-msg__btn svg { width: 19px; height: 19px; }
.float-msg__btn--wa { background: #25D366; }
.float-msg__btn--tg { background: #229ED9; }
.float-msg__btn--vb { background: #7360F2; }
@media (max-width: 899.98px) {
  .float-msg { right: 0.75rem; bottom: 0.75rem; gap: 0.4rem; }
  .float-msg__btn { inline-size: 36px; block-size: 36px; }
  .float-msg__btn svg { width: 18px; height: 18px; }
  /* Sayfa sonunda buton sütunu telif satırının sağ ucuyla kesişiyordu
     (ölçüldü: grup x321+, satır 359'a uzanıyor). Metin şeride girmesin. */
  .footer__bottom { padding-inline-end: 3.5rem; }
  /* Spec değerleri mobilde SAĞA YASLANMAZ: kart tam genişlikte, sağa hizalı
     değerler yüzen buton şeridinin (x 336+) altında kalıyordu. Solda, etiketin
     hemen ardında dururlar; noktalı ayırıcı satır çizgisi olarak kalır. */
  .spec { justify-content: flex-start; }
}

/* "Yukarı dön" oku: mesaj grubunun ÜSTÜNDE durur.
   bottom = grubun tepesi + 10px boşluk. Masaüstü grup: 16 + 3x38 + 2x7.2
   = 144px; mobil: 12 + 3x36 + 2x6.4 = 133px. Bir ekran kaydırılınca
   site.js data-totop ile gösterir. */
.to-top {
  position: fixed; right: 1rem; bottom: 154px; z-index: 60;
  inline-size: 38px; block-size: 38px; border-radius: 50%;   /* mesaj butonlarıyla aynı çap */
  border: 0; cursor: pointer; color: #fff; background: var(--navy);
  display: grid; place-items: center;
  box-shadow: 0 6px 18px rgba(5, 25, 88, 0.30);   /* gölge de grupla aynı */
  transition: transform 140ms ease, opacity 180ms ease;
}
.to-top:hover { transform: translateY(-2px); }
.to-top svg { width: 19px; height: 19px; }
.to-top[hidden] { display: none; }
/* Hover ipucu: metin data-tip'ten gelir (uk/en HTML'de). Yalnız gerçek
   imleçli cihazlarda — dokunmatikte hover yok, etiket gereksiz. Sayfa
   sonunda ok koyu altbilginin üstüne düşebildiği için etikete yarı saydam
   beyaz hap zemin verildi; metin gri (--muted'dan bir tık açık). */
@media (hover: hover) and (pointer: fine) {
  .to-top::after {
    content: attr(data-tip);
    position: absolute; right: calc(100% + 10px); top: 50%;
    transform: translateY(-50%);
    white-space: nowrap; pointer-events: none;
    font-family: var(--font-head); font-weight: 600; font-size: 0.8rem;
    color: #6E7389;
    background: rgba(255, 255, 255, 0.92); border-radius: 999px;
    padding: 0.25rem 0.7rem;
    opacity: 0; transition: opacity 180ms ease;
  }
  .to-top:hover::after, .to-top:focus-visible::after { opacity: 1; }
}
@media (max-width: 899.98px) {
  .to-top { right: 0.75rem; bottom: 143px; inline-size: 36px; block-size: 36px; }
  .to-top svg { width: 18px; height: 18px; }
}

/* Mobil dikey ritim. Şerit burada tek sütuna iner (4 madde alt alta, ~200px);
   hero ile birlikte ilk ekranı tam doldurup altında hiçbir şey bırakmıyordu,
   sayfanın devam ettiği belli olmuyordu. Hero ve şerit dolgusu birlikte sıkılır
   — tek cihaza göre değil, yine svh ile oransal.
   Bu blok .hero ve .trust temel kurallarının ARDINDAN gelmek zorunda: aynı
   özgüllükte (0,1,0) olduğu için kazanan sonra yazılandır. */
@media (max-width: 899.98px) {
  .hero  { padding-block: clamp(0.75rem, 2.5svh, 2.25rem); }
  .trust { padding-block: clamp(0.875rem, 2svh, 1.25rem); }
  /* İkonlar tek sütunda 40px ile şeridi 254px'e büyütüp 375×812'de ilk ekranı
     31px taşırıyordu (kural: hero + şerit ilk ekrana tam sığar). 28px ikon +
     hafif dar dikey gap ile 789px'te bitiyor, 23px pay kalıyor. */
  .trust__icon { block-size: 28px; }
  .trust__grid { gap: 0.9rem 1.5rem; }
}

.split { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 880px) { .split { grid-template-columns: 1fr 1fr; } }
.split__media img { border-radius: var(--radius); width: 100%; }

/* Kare veya kareye yakın reklam karesi (why-belinno 1:1, smart-choice 1.11:1).
   Sütunun tamamını kaplarsa 530px genişliğe çıkar ve bölümü metin sütununun
   çok üstüne uzatır; genişliği sınırlayıp ortalıyoruz. Görsel zemini lacivert
   ve dolu olduğu için açık bölümde kart gibi dursun diye yumuşak gölge var —
   kırpma YOK, kare olduğu gibi duruyor. */
.split__media--square img {
  display: block;
  max-inline-size: 27rem;
  margin-inline: auto;
  box-shadow: 0 10px 30px rgba(32, 44, 115, 0.16);
}

/* Hakkımızda BRAND bölümü: kolajdan kesilmiş 2x2 seçki (brand-grid.webp),
   "Хто ми" düzeninde metnin yanında. Aralıklar ŞEFFAF — kutu, zemin, gölge
   yok; radius da yok, tek img'de dış köşeleri yuvarlayıp iç köşeleri düz
   bırakmak tutarsız görünür. */
.split__media--grid img { border-radius: 0; display: block; }

/* Ürünler sayfasının üst bölgesi ana sayfa hero düzeninde: metin solda,
   beş serinin şeffaf ürün kolajı sağda — ilk ekran kompakt. 1024 altında
   tek sütun: metin üstte, görsel altta (DOM sırası). Kolaj kutusuz. */
.page-head__split { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center; }
.page-head__media img { width: 100%; height: auto; display: block; }
@media (min-width: 1024px) {
  .page-head__split { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1023.98px) {
  .page-head__media img { max-inline-size: 34rem; margin-inline: auto; }
}

/* Fiyat listesi bandı. Zemin BÖLÜMDE, kutuda değil: eskiden .cta'nın kendi
   arka planı vardı ve container genişliğinde kaldığı için iki yanında
   --bg-alt şeridi görünüyordu. Zemin bölüme taşınınca kenardan kenara uzanır,
   içerik container'da ortalı kalır.
   100vw / margin-inline: calc(50% - 50vw) KULLANILMADI — o yöntem dikey kaydırma
   çubuğu genişliğini hesaba katmaz ve yatay taşma yaratır. */
.section--cta { background: var(--rose-soft); }
.cta { text-align: center; }
.cta h2 { margin-bottom: 0.5rem; }
.cta p { margin-inline: auto; color: var(--muted); }

.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; }
.contact-list dt, .contact-list .label {
  font-family: var(--font-head); font-weight: 700; font-size: var(--step--1);
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-deep); margin-bottom: 0.15rem;
}

/* 8 — FORM ================================================================ */
.form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: 0.35rem; }
.field label { font-family: var(--font-head); font-weight: 600; font-size: var(--step--1); color: var(--navy); }
.field .req { color: var(--accent-deep); }
.field input, .field textarea, .field select {
  width: 100%; padding: 0.75rem 0.9rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg); transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* Odakta çerçeve vurgu rengine döner (Stripe'ın input-focused kalıbı):
   aktif alan formda tek bakışta seçilir. --accent-deep beyaz zeminde 6,37 —
   3:1 UI sınırının rahat üstünde. Halka, vurgunun soluk tonu. */
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--accent-deep); box-shadow: 0 0 0 3px rgba(172, 46, 91, 0.14);
}
.field textarea { min-height: 140px; resize: vertical; }
.field--row { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.consent { display: flex; gap: 0.65rem; align-items: flex-start; font-size: var(--step--1); color: var(--muted); }
.consent input { width: 18px; height: 18px; margin-top: 0.25rem; flex: none; }
.form__note { font-size: var(--step--1); color: var(--muted); margin: 0; }
/* AJAX gönderimi başarısızsa görünen uyarı (site.js açar). Kırmızı metin
   --accent-deep: beyaz zeminde 6,37 — AA üstü. */
.form__error {
  margin: 0 0 0.75rem; font-size: var(--step--1); font-weight: 600;
  color: var(--accent-deep); background: var(--rose-soft);
  border: 1px solid var(--accent); border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
}
.form__error[hidden] { display: none; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* 9 — MESSENGER ERİŞİMİ ===================================================
   Yatay "Напишіть нам у ..." buton sıraları 15.08.2026'da kaldırıldı
   (footer + iletişim sayfası): sağ alttaki yüzen .float-msg grubu aynı işi
   görüyor, iki kopya gerekmiyor. İletişim sayfasındaki
   "WhatsApp · Telegram · Viber доступні" bilgi satırı (.contact-note) durur. */
.contact-note { display: block; margin-top: 0.25rem; font-size: var(--step--1); color: var(--muted); }

/* 10 — YARDIMCILAR ======================================================== */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.text-center { text-align: center; }
.mb-0 { margin-bottom: 0; }