/* ============================================================================
   GostFooter — tema footer'ı (isFooter). Zemin varsayılanı KOYU.

   Kararların kaynağı: design-reference/gostliria/build-spec.md § 1-4,
   tasarim-sistemi.md § 6 (footer zemini --g-ink, 4 kolon → mobilde akordeon).
   Üst blok iki bölge (kullanıcı, 2026-09-24): SOL kolonda üstte marka
   (logo + yazı), altında bülten (e-posta) · SAĞDA kolon grubu ortalı.
   Mobilde her şey ortalı; avantaj şeridi yatay kayar.

   Ölçü/renk yalnızca global.css token'larından ya da bu dosyada tanımlı,
   gerekçesi yazılı bileşen değişkenlerinden gelir.
   ========================================================================= */

.cc_n2k0mxzk_ZGKVDfv94B .gf {
  /* Dikey boşluk sectionStyle() değişkenlerinden. Mobil karşılıkları
     (--sec-pt-m / --sec-pb-m) aşağıdaki <768 sorgusunda okunuyor — diğer 12
     section'la birebir aynı blok. Yalnızca bu iki satır yazıldığında
     paddingTopMobile / paddingBottomMobile prop'ları hiçbir şey yapmıyordu. */
  padding-top: var(--sec-pt);
  padding-bottom: var(--sec-pb);

  /* Koyu zemin varsayılanı. Editörden gelen backgroundColor / textColor
     inline stil olarak basıldığı için bu iki satırı geçersiz kılar. */
  background: var(--g-ink);
  color: var(--g-bg);

  /* ---- Koyu zemine özel bileşen değişkenleri ---------------------------
     Global palet BEYAZ zemin için kalibre edildi; koyu zeminde ikincil
     metin ve ayırıcı için doğrudan karşılığı olan token yok. İkincil metni
     opacity ile üretmiyoruz (griliği sahte, alt katmanı sızdırıyor) —
     ayrı, gerçek bir renk tanımlanıyor. */

  /* İkincil metin: marka açıklaması, kolon bağlantıları, telif satırı.
     #b8bfc4 → --g-ink (#111315) üstünde ~10.0:1 kontrast (AA fazlasıyla) ve
     beyazın 17.4:1'inden belirgin ayrıştığı için hiyerarşi kuruyor.
     R(184) < G(191) < B(196) olduğundan mavi-soğuk tarafta; yasak palet
     (sıcak/sarıya kaçan nötrler) bölgesine düşmüyor.
     --g-ink-3 (#8d9499) bu rol için kullanılmadı: o ton beyaz zemin üstü meta
     metin için tanımlı ve koyu zeminde gereğinden koyu kalıyor. */
  --gf-muted: var(--g-ink-2-on-dark);

  /* Ayırıcı çizgi. --g-line (#dfe3e5) koyu zeminde neredeyse beyaz bir şerit
     gibi görünürdü. #2b3034 koyu zeminde ~1.5:1 — görünür ama gürültüsüz;
     değeri ikas.config.json'daki borderColor varsayılanıyla birebir aynı.
     Metin taşımadığı için WCAG metin kontrast eşiği uygulanmaz. */
  --gf-line: var(--g-line-on-dark);

  /* --gf-fg (tam güçlü metin) ve --gf-accent index.tsx'te inline set edilir;
     burada yalnızca prop temizlenirse diye yedek değer duruyor. */
  --gf-fg: var(--g-bg);
  --gf-accent: var(--g-accent);

  /* Orta gruptaki kolonların ARASI. Tarihçe: 1fr izler → "başlıklar çok
     ayrı"; auto izler sağda toplu → "başlıklar biraz daha sola"; sonra marka
     izi sabit + kalan alana space-between. Üç bölgeli düzende (2026-09-21)
     kolonlar tek grup olarak ORTADA durduğu için aralık artık SABİT:
     --g-gap. (1.5× denendi: 1280'de grup + iki dış boşluk ~1000px'e çıkıp
     bülten girdisini ~100px'e sıkıştırıyordu — inceleme.)
     2026-09-26 (kullanıcı: "başlıklar çok sıkışık, araları biraz açılsın"):
     ≥1280'de 2× (48px). Bülten artık sol kolonda, markanın altında —
     kolon grubu 1280'de ~660px, kendi izi ~760px; sıkıştırma yok. ≤1279'da
     kolonlar eşit 1fr izlerle yayıldığı için aralık orada --g-gap kalır
     (aşağıdaki medya kuralı). */
  --gf-col-gap: calc(var(--g-gap) * 2);
  /* Bülten girdisi ve butonu artık 48px (kullanıcı, 2026-09-24: "e-posta
     kutusunu büyült") — .gf-news-input / .gf-news-btn. */
}

/* ---------- Güven şeridi (footer'ın en üstü, beyaz bant) ----------
   Kullanıcı (2026-09-25): "o trust bar footerda bunun yerinde olacak,
   gerekirse arka planı beyaz yap". Anasayfadaki ikon kutulu şerit koyu
   avantaj şeridinin yerini aldı. Bant konteynerin DIŞINDA, kenardan kenara;
   zemin --gf-trust-bg (varsayılan beyaz), metin --gf-trust-fg. Üst/alt 30px
   (bölüm boşluğu kuralı). Çizgi yok (kullanıcı kuralı: gri çizgi asla).

   Şerit varken footer'ın üst boşluğu bandın ÜSTÜNDE değil ALTINDA durur:
   yoksa beyaz bandın üstünde koyu bir şerit açılırdı. `.gf.gf--trust` iki
   sınıf: aşağıdaki <768 `.gf` kuralı dosyada sonra geldiği için tek sınıfla
   onu ezemezdi. */
.cc_n2k0mxzk_ZGKVDfv94B .gf.gf--trust {
  padding-top: 0;
}

.cc_n2k0mxzk_ZGKVDfv94B .gf-trust {
  --gf-trust-gap: var(--g-space-8);
  --g-ink-2: color-mix(in srgb, var(--gf-trust-fg, var(--g-ink)) 67%, var(--gf-trust-bg, var(--g-bg)));
  margin-bottom: var(--sec-pt);
  padding-block: 30px;
  background: var(--gf-trust-bg, var(--g-bg));
  color: var(--gf-trust-fg, var(--g-ink));
  text-align: center;
}

/* Madde açıklaması (.gbi-desc) --g-ink-2 okur; yukarıdaki satır onu bandın
   zemin/metin renginden türetir ki "Güven Şeridi Metin Rengi" açık bir renge
   çekilip zemin koyulaştırıldığında açıklamalar da okunur kalsın (varsayılan
   beyaz/mürekkep çiftinde ≈ eski #5b6165). color-mix tanımayan tarayıcıda
   değer geçersiz olur ve açıklama bandın metin rengini alır — yine okunur.
   Başlık ve açıklama her ekranda ikonun ALTINDA (madde bileşeninin kendi
   düzeni: kutu satır içi blok, başlık/açıklama blok). */

/* Maddeleri IkasComponentRenderer basıyor (kökü display: contents, altında
   her madde için kap + kapsam sarmalayıcı, en içte .gbi). GostBenefitStripe
   ile aynı çözüm: öğe ölçüsü .gbi'ye VE onu içeren her kademeye yazılır;
   esnek öğe olmayan kademede `flex` sessizce yok sayılır. Sarılan satırda
   eksik kalan son maddeler ortada toplanır. */
.cc_n2k0mxzk_ZGKVDfv94B .gf-trust-grid {
  --gf-trust-cols: var(--gf-trust-n, 5);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  column-gap: var(--gf-trust-gap);
  row-gap: var(--g-space-8);
}

/* İki AYRI kural: :has() tanımayan tarayıcı seçici listesinin tamamını
   atar; ayrık yazınca en azından .gbi kuralı yaşar. */
.cc_n2k0mxzk_ZGKVDfv94B .gf-trust-grid .gbi {
  flex: 0 0 calc((100% - (var(--gf-trust-cols) - 1) * var(--gf-trust-gap)) / var(--gf-trust-cols));
  min-width: 0;
}

.cc_n2k0mxzk_ZGKVDfv94B .gf-trust-grid :has(.gbi) {
  flex: 0 0 calc((100% - (var(--gf-trust-cols) - 1) * var(--gf-trust-gap)) / var(--gf-trust-cols));
  min-width: 0;
}

/* SIRA: İKON → BAŞLIK → AÇIKLAMA, alt alta ve ortalı (kullanıcı, 2026-09-25,
   ekran görüntüsü: başlık ikonun yanına akıyordu — "Ücretsiz" kutunun
   sağında, "Kargo" altında). Madde bileşeni artık dikey esnek kutu; footer
   aynı garantiyi daha yüksek özgüllükle tekrarlar. Başlık gövde ölçüsünde
   (16px) ve kalın: 5 maddelik satırda en dar hücrede (1024px'te ≈170px)
   en uzun başlık "Müşteri Hizmetleri" tek satıra sığar, açıklamalar aynı
   çizgiden başlar. */
.cc_n2k0mxzk_ZGKVDfv94B .gf-trust .gbi {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.cc_n2k0mxzk_ZGKVDfv94B .gf-trust .gbi-mark {
  display: block;
  margin-inline: auto;
}

.cc_n2k0mxzk_ZGKVDfv94B .gf-trust .gbi-title {
  display: block;
  font-size: var(--g-fs-body);
  font-weight: var(--g-w-semibold);
}

/* ---------- Avantaj şeridi (yedek: Güven Maddeleri listesi boşsa) ---------- */

/* Dört madde kolonların ÜSTÜNDE. Referans görseldeki yapı (ikon + iki
   satır). Maddeler İÇERİK genişliğinde ve grup olarak ORTALI, aralarında
   2.5×--g-gap: tam genişliğe yayılan dört eşit hücre maddeleri birbirinden
   koparıyordu (kullanıcı: "daha yakın ve ortada"). Dar ekranda sarar,
   ortalı kalır. Alt ayırıcı çizgi kaldırıldı (gri çizgi asla); ayrımı alt
   boşluk yapıyor. */
.cc_n2k0mxzk_ZGKVDfv94B .gf-benefits {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--g-gap) calc(var(--g-gap) * 2.5);
  margin: 0 0 calc(var(--g-gap) * 2);
  padding: 0 0 calc(var(--g-gap) * 1.5);
  list-style: none;
}

/* YAZILARIN HEPSİ İKONUN ALTINDA (kullanıcı, 2026-09-25: "trustbarda
   yazıların hepsi iconun aşağısında olacak"). Eskiden masaüstünde ikon solda,
   iki satır metin sağındaydı; artık her ekranda ikon üstte, başlık ve
   açıklama altında, ortalı. */
.cc_n2k0mxzk_ZGKVDfv94B .gf-benefit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--g-space-2);
  min-width: 0;
  text-align: center;
}

.cc_n2k0mxzk_ZGKVDfv94B .gf-benefit-icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--gf-fg);
}

/* 28px: 24'lük setten bir kademe büyük, iki satırlık metnin yüksekliğine
   (~40px) oturuyor — referanstaki ölçüye yakın, baskın değil. */
.cc_n2k0mxzk_ZGKVDfv94B .gf-benefit-svg {
  width: 28px;
  height: 28px;
}

.cc_n2k0mxzk_ZGKVDfv94B .gf-benefit-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--g-space-1);
  min-width: 0;
}

/* body-sm: kolon ve bülten başlıklarıyla AYNI kademe — footer'daki bütün
   yazılar bir kademe küçüldü (kullanıcı, 2026-09-21) ve şerit başlığı body
   ölçüsünde kalsaydı footer'ın en büyük metni olurdu. Eskiden yalnızca
   <768'de body-sm'e iniyordu (390px'te "Müşteri hizmetleri" tek satıra
   sığsın); global.css body-sm'i mobilde 14px'e çektiği için o gerekçe
   taban kuralla da karşılanıyor. */
.cc_n2k0mxzk_ZGKVDfv94B .gf-benefit-title {
  font-size: var(--g-fs-body-sm);
  line-height: var(--g-lh-tight);
  font-weight: var(--g-w-semibold);
  color: var(--gf-fg);
}

.cc_n2k0mxzk_ZGKVDfv94B .gf-benefit-desc {
  font-size: var(--g-fs-meta);
  line-height: 1.5;
  color: var(--gf-muted);
}

/* ---------- Üst blok: sol kolon (marka + bülten) · kolon grubu ---------- */

/* İKİ BÖLGE (kullanıcı, 2026-09-24: "kategoriler buna göre, ortalı güzel bir
   görünüm"; son hâli: "logo ve yazı üstte, e-posta kısmı altta").
   SOL KOLON: üstte logo + marka yazısı, altında bülten (e-posta).
   SAĞ: bağlantı kolonları, kalan alanın ORTASINDA. Sol kolon içerikçe dar
   (260–340px) tutulur ki kolon grubuna geniş, dengeli bir alan kalsın.
   Satır boşluğu bülten ile marka arası; sütun boşluğu iki bölge arası. */
/* Sol iz 400px'e kadar (eskiden 340px): bülten başlığı ("Kampanya ve
   sürprizlerden ilk sen haberdar ol!", 15px/600 ≈ 385px) tek satıra sığsın
   (kullanıcı, 2026-09-24: "e-postada yazı tam sığacak, kelime aşağı
   kaymayacak"). Daha dar izlerde başlık lib/fitLine ile küçülür. */
.cc_n2k0mxzk_ZGKVDfv94B .gf-top {
  display: grid;
  grid-template-columns: minmax(260px, 400px) minmax(0, 1fr);
  /* 1. satır markanın kendi boyunda, 2. satır esnek: kolon grubu iki
     satırı birden kaplıyor ve markadan + bültenden uzunsa fazla yükseklik
     iki `auto` satıra EŞİT bölünüyordu — bülten markanın ~120px altına
     itiliyordu (10 bağlantılı kolonda). `1fr` fazlayı yalnızca 2. satıra
     verir; bülten markanın bir satır boşluğu altında durur. */
  grid-template-rows: auto 1fr;
  align-items: start;
  column-gap: calc(var(--g-gap) * 3);
  row-gap: calc(var(--g-gap) * 1.5);
}

/* ---------- Marka bloğu ---------- */

/* İz ve satır AÇIKÇA atanıyor (bülten ve kolon grubu için de): otomatik
   yerleşim, sütunu verilip satırı verilmeyen öğeyi bir önceki öğenin
   altına kaydırabiliyordu. Marka SOL kolonun ÜSTÜNDE (1. satır). */
.cc_n2k0mxzk_ZGKVDfv94B .gf-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--g-gap-tight);
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  min-width: 0;
}

/* Marka logosu bağlantısı: hem <a> hem <button> aynı sınıfı taşır; görünüm
   düz metin/görsel gibi kalır, tıklanabilirlik yalnızca imleç ve odak
   halkasıyla belli olur (alt çizgi yok). */
.cc_n2k0mxzk_ZGKVDfv94B .gf-logo-link {
  display: inline-flex;
  align-self: flex-start;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.cc_n2k0mxzk_ZGKVDfv94B .gf-logo {
  display: block;
  width: var(--gf-logo-w);
  max-width: 100%;
  height: auto;
  /* Footer zemini KOYU (--g-ink) ama mağazada tek logo varlığı var ve o da
     koyu mürekkep wordmark — koyu üstünde koyu kalıyor, yani footer'da logo
     hiç görünmüyordu.
     brightness(0) bütün pikselleri siyaha indirir, invert(1) beyaza çevirir:
     sonuç tek renk BEYAZ wordmark. Yalnızca invert(1) kullanılamazdı, çünkü
     kalbin vermilion'unu camgöbeğine çeviriyordu.
     Bu bir ARA ÇÖZÜM: kalp de beyaza döndüğü için markanın iki renkli kimliği
     footer'da tek renge iniyor. Kalıcı çözüm, açık zemin için üretilmiş ikinci
     bir logo varlığı (beyaz harf + vermilion kalp) yüklemek. */
  filter: brightness(0) invert(1);
}

/* SVG prop'u dangerouslySetInnerHTML ile basıldığı için içindeki <svg>'ye sınıf
   verilemiyor. Eleman seçicisi yazmamak için evrensel seçici kullanıldı; kural
   scope'lanan .gf-logo-svg sınıfına bağlı olduğundan bileşen dışına sızmaz. */
.cc_n2k0mxzk_ZGKVDfv94B .gf-logo-svg > * {
  display: block;
  width: 100%;
  height: auto;
}

/* meta ölçüsü: bir kademe küçültme (kullanıcı, 2026-09-21; body-sm → meta).
   38ch: marka izi 1fr olduğu için cümle tek uzun satıra yayılıyordu. */
.cc_n2k0mxzk_ZGKVDfv94B .gf-brand-text {
  margin: 0;
  max-width: 38ch;
  font-size: var(--g-fs-meta);
  line-height: var(--g-lh-body);
  color: var(--gf-muted);
}

/* ---------- Link kolonları ---------- */

/* Kolon grubu (SAĞ iz): kolonlar içerik genişliğinde yan yana, aralık
   sabit (--gf-col-gap). Kolon sayısı için ayrı sınıf gerekmiyor: sütun
   akışı dolu kolon kadar iz açar (boş kolon zaten render edilmiyor).
   Üstte hizalı: satır yüksekliğini bu grup belirliyor, ortalamanın anlamı
   yok; başlıklar bülten başlığıyla değil kendi aralarında hizalı kalır.
   min-width verilmiyor: orta izin tabanı grubun min-content'i kalsın,
   dar kapta bağlantılar değil yan izler (1fr, taban 0) daralsın. */
/* SAĞ BÖLGE: sol kolonun iki satırını birden kaplar, kendi alanının
   ORTASINDA durur (kullanıcı, 2026-09-24: "ortalı güzel bir görünüm"). */
.cc_n2k0mxzk_ZGKVDfv94B .gf-cols {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: auto;
  gap: var(--gf-col-gap);
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-self: center;
  align-self: start;
}

.cc_n2k0mxzk_ZGKVDfv94B .gf-col {
  min-width: 0;
}

/* Başlık body-sm, bağlantılar meta: bir kademe küçültme (kullanıcı,
   2026-09-21) ikisini birlikte indirdi ki hiyerarşi korunsun — aynı ölçüde
   olduklarında hiyerarşi kurulmuyordu (eski not). Büyük harf yok —
   "eyebrow kullanma" kuralı. */
.cc_n2k0mxzk_ZGKVDfv94B .gf-col-title {
  margin: 0 0 var(--g-space-3) 0;
  font-size: var(--g-fs-body-sm);
  line-height: var(--g-lh-tight);
  font-weight: var(--g-w-semibold);
  color: var(--gf-fg);
}

.cc_n2k0mxzk_ZGKVDfv94B .gf-links {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Metin meta ölçüsünde (2026-09-21); satır yüksekliği küçülmedi — hedef
   boyutu metinden bağımsız (aşağıdaki 44px / 36px kuralları). */
.cc_n2k0mxzk_ZGKVDfv94B .gf-link {
  display: inline-flex;
  align-items: center;
  /* 44px: dokunma hedefi (build-spec § 3) */
  min-height: 44px;
  font-size: var(--g-fs-meta);
  line-height: var(--g-lh-tight);
  color: var(--gf-muted);
  text-decoration: none;
  border-radius: var(--g-radius);
  transition: color var(--g-dur) var(--g-ease);
}

/* Hover/odakta metin tam güce çıkar, altı vurgu renginde çizilir.
   Vurgu rengi METİN rengi olarak kullanılmıyor: vermilion koyu zeminde
   yalnızca 4.5:1 sınırında kalıyor, çizgi olarak ise kontrast eşiğine tabi
   değil ve renk tek işaret olmuyor (altı çizili + renk değişimi birlikte). */
/* HOVER (kullanıcı, 2026-09-24): alt çizgi YOK; yazı hafif KIRIK BEYAZA
   döner ve bir kademe kalınlaşır (400 → 500). Kırık beyaz = temanın nötr
   yüzey tonu --g-surface (#f4f5f6): saf beyazdan bir tık yumuşak, bej/sıcak
   tona kaymaz (paletin yasak tonları). Bağlantılar tek sütunda olduğu için
   kalınlaşma komşu satırı kaydırmaz. */
.cc_n2k0mxzk_ZGKVDfv94B .gf-link:hover, .cc_n2k0mxzk_ZGKVDfv94B .gf-link:focus-visible {
  color: var(--g-surface);
  font-weight: var(--g-w-medium);
  text-decoration: none;
}

/* SATIR YÜKSEKLİĞİ, imleçli cihazlarda 36px. Uzun listeler (Kategoriler,
   Kurumsal) tek sütun; 36px, WCAG 2.5.8'in 24px tabanının üstünde,
   dokunmatikte 44px kalır. Bu blok taban .gf-link kuralından SONRA duruyor:
   media sorgusu özgüllük eklemez, önce yazılınca 44px kazanıyordu (ölü kural). */
@media (hover: hover) and (pointer: fine) {
  .cc_n2k0mxzk_ZGKVDfv94B .gf-link {
    min-height: 36px;
  }
}

/* ---------- Bülten ---------- */

/* Bülten SOL KOLONDA, markanın ALTINDA (kullanıcı, 2026-09-24: "logo ve
   yazı üstte, e-posta kısmı altta"). Kolonun genişliğini doldurur — kolon
   zaten 340px'e kelepçeli, ayrı bir üst sınır gerekmiyor. min-width 0:
   girdinin doğal genişliği izi taşırmasın. */
/* Markadan biraz daha aşağıda (kullanıcı, 2026-09-24: "footer'da e-posta
   kısmı biraz daha aşağı alınacak"): ızgaranın satır boşluğuna (36px) ek
   bir boşluk payı (24px, mobilde 16px). */
/* GENİŞLİK = BAŞLIK YAZISI KADAR (kullanıcı, 2026-09-24: "e-posta kutusu
   yazı boyutu kadar olacak, aşırı büyük olmuş"): form `fit-content` —
   genişliğini en geniş çocuğu olan tek satırlık başlık belirler; girdi ve
   buton bu genişliği doldurur. Sütundan dar kalırsa `max-width: 100%`
   kelepçeler, başlık da lib/fitLine ile sığdırılır. */
.cc_n2k0mxzk_ZGKVDfv94B .gf-news {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  margin-top: var(--g-gap);
}

/* Başlık kolon başlıklarıyla aynı ölçüde (body-sm; 2026-09-21'de birlikte
   bir kademe indi); h3 ölçüsü footer'da sayfa başlığı gibi bağırıyordu. */
.cc_n2k0mxzk_ZGKVDfv94B .gf-news-title {
  /* Başlıkla girdi arasında 32px (kullanıcı: önce "box ile text çok yakın"
     → 20px; 2026-09-26 "yazı ile box arasında biraz boşluk olacak, çok
     yapışık" → 32px). Satır aralığı gövde ölçüsü: sıkı aralık iki satırı
     birbirine yapıştırıyordu. */
  margin: 0 0 var(--g-space-8) 0;
  font-size: var(--g-fs-body-sm);
  line-height: var(--g-lh-body);
  font-weight: var(--g-w-semibold);
  color: var(--gf-fg);
}

/* GİRDİ ÜSTTE, BUTON ALTTA — HER EKRANDA (kullanıcı, 2026-09-24: "footer'da
   buton aşağıda olacak, e-posta kutusunu büyült"). İkisi de satırın tam
   genişliğinde, alt alta. Eskiden yan yanaydı ve dar izde sarıyordu.
   Sütun yönünde flex-basis YÜKSEKLİĞE uygulanır — girdi ve buton doğal
   yüksekliklerinde kalır (flex: 0 0 auto; mobil notu aşağıda). */
.cc_n2k0mxzk_ZGKVDfv94B .gf-news-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--g-gap-tight);
}

/* Girdi KOYU zemine göre: global .g-input beyaz zemin + 48px için yazıldı ve
   koyu footer'da "göz alıyordu" (kullanıcı). Şeffaf zemin, tam güçlü metin.
   KENARLIK ikincil metin renginde (--gf-muted, #111315 üstünde ~10:1) —
   ayırıcı renginde (--gf-line, 1.4:1) bırakılamaz: alanın dolgusu yok,
   etiketi görünmez (sr-only), placeholder yazınca kaybolur; boşta çerçeve
   alanın TEK sınırı ve WCAG 1.4.11 en az 3:1 ister. Mağazanın
   "Ayırıcı Rengi" ayarı bu yüzden girdiye bağlanmadı. */
/* ÖLÇÜ (kullanıcı, 2026-09-24: önce "kutuyu büyült", sonra "aşırı büyük
   olmuş, biraz küçült"): 42px yükseklik (eski 40 ile 48 arası), 14px yazı,
   12px iç boşluk. Genişlik başlık kadar (.gf-news). */
.cc_n2k0mxzk_ZGKVDfv94B .gf-news-input {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 0 var(--g-space-3);
  background: transparent;
  border-color: var(--gf-muted);
  color: var(--gf-fg);
  font-size: calc(var(--g-fs-meta) + 1px);
}

.cc_n2k0mxzk_ZGKVDfv94B .gf-news-input::placeholder {
  color: var(--gf-muted);
}

/* Hover/odakta çerçeve tam güce çıkar (global hover kuralı açık zemin
   çizgisine dönerdi). Odak halkası global .g-input:focus-visible'dan. */
.cc_n2k0mxzk_ZGKVDfv94B .gf-news-input:hover, .cc_n2k0mxzk_ZGKVDfv94B .gf-news-input:focus-visible {
  border-color: var(--gf-fg);
}

/* Buton girdinin ALTINDA, onunla aynı genişlik ve yükseklik. */
.cc_n2k0mxzk_ZGKVDfv94B .gf-news-btn {
  flex: 0 0 auto;
  width: 100%;
  min-height: 42px;
  padding: 0 var(--g-space-4);
  font-size: calc(var(--g-fs-meta) + 1px);
}

/* Durum mesajı. RENKLE anlam taşımıyor: koyu zeminde --g-error (3.3:1) ve
   --g-success metin kontrastını geçmediği için mesaj tam güçlü metin renginde
   basılır, anlamı metnin kendisi söyler (WCAG 1.4.1 "renge bağlı olmama"). */
.cc_n2k0mxzk_ZGKVDfv94B .gf-news-msg {
  margin: var(--g-gap-tight) 0 0 0;
  font-size: var(--g-fs-meta);
  line-height: 1.5;
  color: var(--gf-fg);
}

/* Mesaj yokken satır yüksekliği kadar boşluk bırakmasın; eleman DOM'da kalır
   ki role="status" bölgesi değişimi duyurabilsin. */
.cc_n2k0mxzk_ZGKVDfv94B .gf-news-msg:empty {
  margin: 0;
}

/* ---------- Mobil akordeon ---------- */

.cc_n2k0mxzk_ZGKVDfv94B .gf-acc {
  display: none;

  /* Accordion sub-component'i beyaz zemin için yazıldı. Dosyasına dokunmadan,
     token'ları yalnızca bu alt ağaçta koyu zemine göre yeniden tanımlıyoruz. */
  --g-line: var(--gf-line);
  --g-ink: var(--gf-fg);
  --g-ink-2: var(--gf-muted);
  --g-ink-3: var(--gf-muted);
  --g-surface: var(--gf-line);
}

/* ---------- Alt bar ---------- */

/* ALT BAR üç bölge: telif SOLDA · sosyal ikonlar ORTADA (kullanıcı isteği)
   · partner logosu SAĞDA. Dış izler 1fr olduğu için orta iz her zaman tam
   ortada kalır — telif ya da partner boş olsa bile. Tek --g-gap her iki
   eksende. */
.cc_n2k0mxzk_ZGKVDfv94B .gf-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--g-gap);
  margin-block-start: calc(var(--g-gap) * 2);
  padding-block-start: var(--g-gap);
  border-top: 1px solid var(--gf-line);
}

.cc_n2k0mxzk_ZGKVDfv94B .gf-copy {
  margin: 0;
  justify-self: start;
  font-size: var(--g-fs-meta);
  line-height: 1.5;
  color: var(--gf-muted);
}

/* Partner logosu (ör. serpinGO). Varlık KOYU mürekkep wordmark ve şeffaf
   zeminli; footer zemini koyu olduğu için footer'ın kendi logosuyla AYNI
   muamele uygulanır: tek renk beyaza çevrilir (filter yalnızca bu logoya). */
.cc_n2k0mxzk_ZGKVDfv94B .gf-partner {
  display: inline-flex;
  align-items: center;
  grid-column: 3;
  justify-self: end;
}

.cc_n2k0mxzk_ZGKVDfv94B .gf-partner img {
  display: block;
  width: var(--gf-partner-w, 96px);
  max-width: 100%;
  height: auto;
  filter: brightness(0) invert(1);
}

.cc_n2k0mxzk_ZGKVDfv94B .gf-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  grid-column: 2;
  justify-self: center;
  gap: var(--g-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Sosyal bağlantılar İKON ÇİPİ (kullanıcı isteği): marka işareti SocialIcon
   alt bileşeninden (resmi çizimler). GERÇEK 40×40 kare: border-box + sıfır iç
   boşluk (content-box + padding 66×42 hap yapıyordu); WCAG 2.5.8'in 24px
   tabanının üstünde. Çerçeve ayırıcı renginde — burada dekoratif, kontrolü
   10:1'lik ikon tanımlıyor. Hover/odakta çerçeve vurgu rengine döner VE
   kalınlaşır (iç gölge ile 2px): kalınlık, renkten bağımsız ikinci ipucu.
   Köşe --g-radius. Alan adı tanınmazsa çip metin taşır; yatay boşluğu
   metin öğesi (.gsi__text) kendisi getirir. */
.cc_n2k0mxzk_ZGKVDfv94B .gf-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  border: 1px solid var(--gf-line);
  font-size: var(--g-fs-meta);
  font-weight: var(--g-w-medium);
  color: var(--gf-muted);
  text-decoration: none;
  border-radius: var(--g-radius);
  transition:
    color var(--g-dur) var(--g-ease),
    border-color var(--g-dur) var(--g-ease),
    box-shadow var(--g-dur) var(--g-ease);
}

.cc_n2k0mxzk_ZGKVDfv94B .gf-social-link:hover, .cc_n2k0mxzk_ZGKVDfv94B .gf-social-link:focus-visible {
  color: var(--gf-fg);
  border-color: var(--gf-accent);
  box-shadow: inset 0 0 0 1px var(--gf-accent);
}

/* ============================================================================
   Responsive — build-spec § 7 (kullanıcı: "ekranı ufaltınca footer kötü")
   ≥1280 : iki bölge — SOL kolon (260–340px): marka üstte, bülten altında ·
           SAĞ: kolon grubu, kendi alanında ortalı
   ≤1279 : aynı iki bölge, sol kolon 240–300px; kolonlar sağ alanı EŞİT
           sütunlarla doldurur
   ≤1023 : alt alta — marka, bülten, kolonlar 2×2; avantaj şeridi 2×2
           (ikon üstte); alt bar üst üste, ortalı
   <768  : HER ŞEY ORTALI; kolon grubu yerine ortalı akordeon; avantaj
           şeridi tek satır, ekranda 2 madde, 2s'de bir kayar; bülten
           girdi + buton alt alta
   ========================================================================= */

@media (max-width: 1279px) {
  /* Aynı İKİ BÖLGE, daha dar: sol kolon 240–300px, sütun boşluğu 2×. Kolon
     grubu sağ alanı EŞİT sütunlarla doldurur — içerik genişliğinde kalınca
     dört kolon bu genişliğe sığmıyordu. */
  .cc_n2k0mxzk_ZGKVDfv94B .gf-top {
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
    column-gap: calc(var(--g-gap) * 2);
  }

  .cc_n2k0mxzk_ZGKVDfv94B .gf-cols {
    justify-self: stretch;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--g-gap);
  }

  /* Avantaj şeridi 1024–1279'da SARIYORDU: dört madde + 60px aralık 976px'lik
     kaba sığmayınca üçü üstte, biri altta tek başına kalıyordu ("ekranı
     ufaltınca footer kötü"). Dört eşit hücre, madde hücresinde ortalı. */
  .cc_n2k0mxzk_ZGKVDfv94B .gf-benefits {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--g-gap);
  }

  .cc_n2k0mxzk_ZGKVDfv94B .gf-benefit {
    justify-content: center;
  }
}

@media (max-width: 1023px) {
  /* Güven şeridi 768–1023'te en fazla üçlü sıralar (5 madde → 3 + 2, ikinci
     sıra ortada). <768 kuralı aşağıda bunu raya çevirir. */
  .cc_n2k0mxzk_ZGKVDfv94B .gf-trust-grid {
    --gf-trust-cols: var(--gf-trust-n-tab, 3);
  }

  /* Tek sütun, ALT ALTA, DOM sırasıyla: marka → bülten → kolonlar (2×2).
     Masaüstündeki sol kolon sırasıyla aynı (logo üstte, e-posta altında);
     `order` kullanılmıyor — görsel sıra DOM sırasıyla aynı kalsın, klavye ve
     ekran okuyucu sırası bozulmasın. Satırlar OTOMATİK: bülten kapalıyken
     boş satır açılmaz (display:none öğe satır açmaz). */
  .cc_n2k0mxzk_ZGKVDfv94B .gf-top {
    grid-template-columns: minmax(0, 1fr);
    /* Alt alta düzende satırlar otomatik; masaüstünün `auto 1fr`i burada
       ikinci öğeyi (bülten) gereksiz uzatırdı. */
    grid-template-rows: none;
  }

  .cc_n2k0mxzk_ZGKVDfv94B .gf-brand, .cc_n2k0mxzk_ZGKVDfv94B .gf-cols, .cc_n2k0mxzk_ZGKVDfv94B .gf-news, .cc_n2k0mxzk_ZGKVDfv94B .gf-acc {
    grid-column: 1;
    grid-row: auto;
  }

  /* Bülten başlık genişliğinde (temel kural), en fazla 480px, sola hizalı:
     tablette kaptan kaba yayılan e-posta girdisi orantısız duruyordu.
     Markanın hemen altında; arası ızgaranın satır boşluğu. */
  .cc_n2k0mxzk_ZGKVDfv94B .gf-news {
    max-width: min(480px, 100%);
    justify-self: start;
  }

  /* Dört kolon 1024 altında sıkışıyor → 2×2 (satır akışı, iki eşit iz). */
  .cc_n2k0mxzk_ZGKVDfv94B .gf-cols {
    justify-self: stretch;
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Avantaj şeridi 2×2 ızgara; madde DİKEY (ikon üstte, metin ortalı) —
     yan yana ikon + iki satır dar hücrede satır kırıp dağınık duruyordu
     ("mobilde çok kötü görünüyor"). */
  .cc_n2k0mxzk_ZGKVDfv94B .gf-benefits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--g-gap) var(--g-gap-tight);
  }

  .cc_n2k0mxzk_ZGKVDfv94B .gf-benefit {
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--g-space-2);
    text-align: center;
  }

  .cc_n2k0mxzk_ZGKVDfv94B .gf-benefit-text {
    align-items: center;
  }

  /* Alt bar üst üste ve ortalı: 7 çip + telif + partner logosu tek satıra
     sığmıyor. */
  .cc_n2k0mxzk_ZGKVDfv94B .gf-bottom {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }

  .cc_n2k0mxzk_ZGKVDfv94B .gf-copy, .cc_n2k0mxzk_ZGKVDfv94B .gf-social, .cc_n2k0mxzk_ZGKVDfv94B .gf-partner {
    grid-column: auto;
    justify-self: center;
  }
}

@media (max-width: 767px) {
  /* Mobil boşluk prop'ları (paddingTopMobile / paddingBottomMobile) sectionStyle()
     ile --sec-pt-m / --sec-pb-m değişkenlerine basılıyor; bu kural olmadan o iki
     prop hiçbir şey yapmıyordu. */
  .cc_n2k0mxzk_ZGKVDfv94B .gf {
    padding-top: var(--sec-pt-m);
    padding-bottom: var(--sec-pb-m);
  }

  /* Aynı bağlantılar iki kez DOM'da: kolon grubu display:none olunca
     erişilebilirlik ağacından da çıkar, ekran okuyucuda tekrar oluşmaz. */
  .cc_n2k0mxzk_ZGKVDfv94B .gf-cols {
    display: none;
  }

  /* MOBİL FOOTER ORTALI (kullanıcı, 2026-09-24: "footer mobilde ortalı
     olacak"). Sıra DOM'la aynı: marka → bülten → akordeon (`order` yok). */
  .cc_n2k0mxzk_ZGKVDfv94B .gf-top {
    justify-items: center;
    text-align: center;
  }

  /* Mobilde footer ortalı: bülten de başlık genişliğinde ve ORTADA;
     ekrandan genişse kelepçelenir, başlık lib/fitLine ile sığar. */
  .cc_n2k0mxzk_ZGKVDfv94B .gf-news {
    justify-self: center;
    max-width: 100%;
  }

  .cc_n2k0mxzk_ZGKVDfv94B .gf-brand {
    align-items: center;
    justify-self: center;
  }

  .cc_n2k0mxzk_ZGKVDfv94B .gf-logo-link {
    align-self: center;
  }

  .cc_n2k0mxzk_ZGKVDfv94B .gf-brand-text {
    margin-inline: auto;
  }

  /* Akordeon tam genişlik, başlıklar ORTALI: başlık + ok birlikte ortada.
     Accordion etiketi normalde kalan alanı doldurup oku sağ kenara itiyor
     (flex: 1 1 auto); burada içerik genişliğine iner. Açılan bağlantılar da
     ortalı. Accordion dosyasına dokunulmuyor — yalnızca bu alt ağaç. */
  .cc_n2k0mxzk_ZGKVDfv94B .gf-acc {
    display: block;
    justify-self: stretch;
    margin-block-start: var(--g-gap);
  }

  .cc_n2k0mxzk_ZGKVDfv94B .gf-acc .gost-acc-trigger {
    justify-content: center;
    text-align: center;
  }

  .cc_n2k0mxzk_ZGKVDfv94B .gf-acc .gost-acc-label {
    flex: 0 1 auto;
  }

  .cc_n2k0mxzk_ZGKVDfv94B .gf-links {
    align-items: center;
  }

  /* Bülten: başlıkla girdi arası 32px, masaüstüyle aynı ("mobilde box ile
     text çok yakın" → 2026-09-26 "çok yapışık"); girdi ve buton alt alta,
     buton tam genişlik. */
  .cc_n2k0mxzk_ZGKVDfv94B .gf-news-title {
    margin-bottom: var(--g-space-8);
  }

  /* Girdi + buton alt alta düzeni artık her ekranda temel kuralda
     (.gf-news-row). Not: sütun yönünde flex-basis YÜKSEKLİĞE uygulanır —
     eski `flex: 1 1 160px` girdiyi mobilde 160px boyunda bir kutuya
     çeviriyordu ("mobilde rezil görünüyor"); temel kural `flex: 0 0 auto`. */

  /* AVANTAJ ŞERİDİ — YATAY, KAYAN (kullanıcı, 2026-09-24: "ikonlar yan yana,
     2 saniyede bir kayacak, 2 ikon görünecek"). Tek satır ızgara, sütun
     akışı; her madde (kap − boşluk) / 2 → ekranda tam 2 madde. Parmakla
     kaydırılır (scroll-snap); otomatik adımı index.tsx atar (2s). Kaydırma
     çubuğu gizli. Madde düzeni (ikon üstte, metin ortalı) ≤1023 kuralından. */
  .cc_n2k0mxzk_ZGKVDfv94B .gf-benefits {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: calc((100% - var(--g-gap-tight)) / 2);
    column-gap: var(--g-gap-tight);
    row-gap: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-bottom: calc(var(--g-gap) * 1.5);
    padding-bottom: var(--g-gap);
  }

  .cc_n2k0mxzk_ZGKVDfv94B .gf-benefits::-webkit-scrollbar {
    display: none;
  }

  .cc_n2k0mxzk_ZGKVDfv94B .gf-benefit {
    scroll-snap-align: start;
  }

  .cc_n2k0mxzk_ZGKVDfv94B .gf-benefit-svg {
    width: 24px;
    height: 24px;
  }

  /* GÜVEN ŞERİDİ — mobilde aynı yatay, kayan ray (yukarıdaki kullanıcı
     isteğinin devamı: "2 ikon görünecek, 2 saniyede bir kayacak"). Ekranda
     2 madde (madde 2'den azsa tam genişlik); otomatik adımı index.tsx atar.
     Footer'ın mobil üst boşluğu bandın altına geçer. */
  .cc_n2k0mxzk_ZGKVDfv94B .gf-trust {
    margin-bottom: var(--sec-pt-m);
  }

  .cc_n2k0mxzk_ZGKVDfv94B .gf-trust-grid {
    --gf-trust-cols: var(--gf-trust-n-mob, 2);
    --gf-trust-gap: var(--g-gap-tight);
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* overflow-x: auto dikeyde de kırpar; imleçli dar pencerede kutunun
       hover kalkışı (~7px) üst kenarda kesilmesin diye pay, negatif
       marjla geri alınır (.g-rail kalıbı) — bant boşluğu değişmez. */
    padding-top: var(--g-space-3);
    margin-top: calc(var(--g-space-3) * -1);
  }

  .cc_n2k0mxzk_ZGKVDfv94B .gf-trust-grid::-webkit-scrollbar {
    display: none;
  }

  .cc_n2k0mxzk_ZGKVDfv94B .gf-trust-grid .gbi {
    scroll-snap-align: start;
  }

  .cc_n2k0mxzk_ZGKVDfv94B .gf-trust-grid :has(.gbi) {
    scroll-snap-align: start;
  }
}

/* HAREKET AZALTMA (<768): zamanlayıcı hiç başlamadığı için kayan ray 5
   maddenin ikisini gösterip kalanını saklıyordu (kaydırma çubuğu da gizli).
   Bu tercihte ray yerine ikili, sarılan sıralar: tüm maddeler görünür
   (anasayfadaki güven şeridinin mobil düzeni). Dosyanın sonunda: yukarıdaki
   <768 kurallarıyla eşit özgüllükte, sıra üstünlüğüyle geçerli. */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .cc_n2k0mxzk_ZGKVDfv94B .gf-trust-grid {
    flex-wrap: wrap;
    justify-content: center;
    overflow-x: visible;
    scroll-snap-type: none;
    row-gap: var(--g-space-7);
  }

  .cc_n2k0mxzk_ZGKVDfv94B .gf-benefits {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-columns: auto;
    row-gap: var(--g-gap);
    overflow-x: visible;
    scroll-snap-type: none;
  }
}