/* Luma Label — landing tasarım sistemi (token + temel katman)
   Estetik: Simpra görsel sistemi — nötr gece-siyahı header/hero, canlı sarı
   vurgu + magenta ikincil; içerik bölümleri beyaz zemin + koyu mürekkep.
   Bölüm CSS'leri bu token'ları kullanır; ham renk/px değeri yazmayın. */

:root {
  /* zemin katmanları — nötr gece-siyahı (header + hero + bülten bandı) */
  --bg-0: #0a0a0c;
  --bg-1: #101014;
  --bg-2: #17171d;
  --panel: #141419;
  --line: rgba(255, 255, 255, 0.10);

  /* mürekkep — nötr kırık beyaz */
  --ink: #f5f5f7;
  --ink-dim: #b6b6c0;
  --ink-faint: #7e7e8a;

  /* vurgu: Simpra sarısı (birincil) + magenta (ikincil) */
  --amber: #ffd100;       /* birincil sarı — token adı korundu */
  --amber-hi: #ffe24d;
  --copper: #f0a81e;      /* sıcak turuncu — görsel detay çizgileri */
  --glow: rgba(255, 209, 0, 0.35);
  --magenta: #059669;     /* ikincil etiket / vurgu rengi */
  --magenta-hi: #10b981;

  /* durum */
  --ok: #2fbf5b;
  --err: #ff5a4d;

  /* tipografi */
  --font-display: 'Unbounded', sans-serif;
  --font-body: 'Manrope', sans-serif;

  /* ritim */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2.5rem;
  --sp-5: 4rem;
  --sp-6: 7rem;
  --radius: 18px;
  --radius-sm: 10px;
  --container: 1180px;
  --header-h: 76px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg-0);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--amber); color: var(--bg-0); }

/* anchor'lar sabit header altında kalmasın */
section[id] { scroll-margin-top: calc(var(--header-h) + 12px); }

.container { width: min(var(--container), calc(100% - 2.5rem)); margin-inline: auto; }

/* klavye kullanıcısı için içeriğe atla bağlantısı */
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 200;
  background: var(--amber); color: #1a1206; padding: 0.6rem 1rem; border-radius: 999px;
  font-family: var(--font-display); font-size: 0.8rem; transform: translateY(-160%);
  transition: transform 0.2s var(--ease-out);
}
.skip-link:focus { transform: none; }

/* --- tipografi desenleri --- */
.kicker {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--magenta);
}
.kicker::before { content: ''; width: 26px; height: 1px; background: var(--magenta); }
/* Kullanıcı isteği: bölüm başlıkları üstündeki tek-kelimelik eyebrow etiketleri
   (.kicker → "Özellikler", "Ürün Vitrini", "Hakkımızda", "Paketler", "SSS",
   "Katıl", çözüm sayfası kicker'ları) ve "Mobil" etiketi (.mobil-tab) gizlenir.
   Hero'daki büyük eyebrow (.hero-eyebrow · "Dijital Devrim") korunur.
   Tüm sayfalarda ortak base.css'te, kaynak sırasından bağımsız uygulansın diye
   !important. Geri almak için bu tek kuralı silmek yeterli. */
.kicker, .mobil-tab { display: none !important; }
.sec-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.7rem, 4vw, 2.7rem); line-height: 1.15;
  margin: var(--sp-2) 0 var(--sp-2); letter-spacing: -0.01em;
}
.sec-lead { color: var(--ink-dim); max-width: 46rem; margin: 0; }
.hl { color: var(--magenta); } /* başlık vurgusu — Simpra magenta, beyaz zeminde okunur */

/* --- butonlar --- */
.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-display); font-size: 0.86rem; font-weight: 500;
  padding: 0.85rem 1.6rem; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; transition: transform 0.25s var(--ease-out), box-shadow 0.25s, background 0.25s, color 0.25s;
  white-space: nowrap;
}
.btn .arr { transition: transform 0.25s var(--ease-out); }
.btn:hover .arr { transform: translateX(4px); }
.btn-primary { background: var(--amber); color: #1a1206; box-shadow: 0 0 0 rgba(0,0,0,0); }
.btn-primary:hover { background: var(--amber-hi); transform: translateY(-2px); box-shadow: 0 12px 34px -10px var(--glow); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: rgba(247,241,230,0.03); }
.btn-ghost:hover { border-color: var(--amber); color: var(--amber-hi); transform: translateY(-2px); }

/* --- kart temeli --- */
.card {
  background: linear-gradient(160deg, var(--panel), var(--bg-1));
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* --- scroll reveal --- */
.rv { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: 0.08s; } .rv-d2 { transition-delay: 0.16s; }
.rv-d3 { transition-delay: 0.24s; } .rv-d4 { transition-delay: 0.32s; }

/* --- atmosfer: tahıl dokusu + ışıma küreleri --- */
.grain::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 4;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.orb { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; }

/* --- 3B sahne yardımcıları --- */
.scene { perspective: 1100px; }
[data-tilt] { transform-style: preserve-3d; will-change: transform; transition: transform 0.35s var(--ease-out); }

/* erişilebilirlik: hareket azaltma */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; transition: none; }
  [data-tilt] { transition: none; }
}

/* ============ dil seçici bileşeni (TR · EN · DE) ============
   19 sayfanın hepsinde kullanılır (nav, ödeme başlığı, yasal başlık).
   Nav'a özgü konumlandırma (dikey ayraç) simpra.css'te kalır. */

/* masaüstü: açılır menü */
.nav-lang-wrap { position: relative; display: inline-flex; }

/* "🇹🇷 Türkçe ▾" — kenarlıklı yuvarlak çip */
.nav-lang {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-body); font-weight: 600; font-size: 0.82rem;
  color: var(--ink-dim);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--line); border-radius: 999px;
  cursor: pointer; padding: 0.42rem 0.7rem;
  transition: color 0.2s var(--ease-out), background 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.nav-lang:hover {
  color: #fff; background: rgba(255, 255, 255, 0.05);
  border-color: color-mix(in srgb, var(--amber) 42%, var(--line));
}
.nav-lang:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 999px; }
.nav-lang-flag { font-size: 1rem; line-height: 1; }
.nav-lang-current { font-family: var(--font-display); font-weight: 500; }
.nav-lang .caret {
  font-size: 0.7em; opacity: 0.7; margin-left: 0.05rem;
  transition: transform 0.25s var(--ease-out);
}
.nav-lang-wrap.open .nav-lang { color: var(--amber); }
.nav-lang-wrap.open .nav-lang .caret { transform: rotate(180deg); opacity: 1; }

.lang-menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 140;
  min-width: 178px; margin: 0; padding: 0.35rem; list-style: none;
  background: linear-gradient(180deg, var(--bg-1), var(--bg-0));
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 22px 54px -22px rgba(0, 0, 0, 0.8);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px);
  transition: opacity 0.22s var(--ease-out), transform 0.22s var(--ease-out), visibility 0.22s;
}
.nav-lang-wrap.open .lang-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.lang-opt {
  width: 100%; display: flex; align-items: center; gap: 0.6rem;
  background: transparent; border: 0; cursor: pointer; text-align: left;
  padding: 0.6rem 0.7rem; border-radius: 10px;
  font-family: var(--font-body); font-size: 0.92rem; font-weight: 600; color: var(--ink-dim);
  transition: background 0.2s var(--ease-out), color 0.2s;
}
.lang-opt .lang-flag { font-size: 1.05rem; line-height: 1; }
.lang-opt:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.lang-opt:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--amber); color: #fff; }
.lang-opt.is-active { color: var(--amber); }
.lang-opt.is-active::after { content: '✓'; margin-left: auto; color: var(--amber); font-size: 0.85rem; }

/* mobil: nav-mobile içinde segmentli seçici */
.nav-mobile-lang {
  display: flex; gap: 0.4rem; width: min(360px, 100%);
  padding: 0.35rem; border: 1px solid var(--line); border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
}
.m-lang-opt {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
  background: transparent; border: 0; cursor: pointer; border-radius: 10px;
  padding: 0.7rem 0.4rem;
  font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; color: var(--ink-dim);
  transition: background 0.2s var(--ease-out), color 0.2s;
}
.m-lang-opt span { font-size: 1.05rem; line-height: 1; }
.m-lang-opt.is-active { background: var(--amber); color: #0a0a0c; }
.m-lang-opt:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .lang-menu, .nav-lang .caret, .lang-opt, .m-lang-opt { transition: none; }
}

/* i18n perdesi: <head>'deki inline betik, kayıtlı dil TR değilse bu sınıfı
   <html>'e ekler; setLang() veya 800 ms emniyet zaman aşımı kaldırır. */
.i18n-pending body { visibility: hidden; }

/* ============ MARKA İŞARETİ (.lm) ============
   Kanonik işaret assets/img/luma-mark.svg; sayfalara satır içi kopyalanır
   (40 yer). İki tonlu: gövde `currentColor`, parıltı ve tek blok `--amber`.

   BURADA SADECE RENK VE HALE var; ölçü/konum bağlamın kendi kuralında
   (.nav-logo-mark, .ft-logo-mark, .lg-logo-mark, .co-logo-mark, .kfeat-mark).

   `color` ZORUNLU: sarmalayıcı bağlantılar (.nav-logo, .lg-logo) kendi
   metinleri için amber taşıyor; devralınsa kart konturu da amber olur ve
   parıltı zeminde kaybolurdu. */
.lm { color: var(--ink); }
/* Hale yalnız parıltıya: tüm işarete verilirse beyaz kontur amber'e bulanır. */
.lm .lm-spark {
  filter: drop-shadow(0 0 3.5px rgba(255, 209, 0, 0.6));
  transition: filter 0.3s var(--ease-out);
}

/* Ortak "cam çip". Önce amber blok (nav/checkout/footer), koyu karo (mega menü)
   ve çıplak amber işaret (yasal sayfalar) ayrı ayrı duruyordu — beş sayfa
   tipinde beş farklı marka izlenimi. Buradaki liste yalnız KOYU yüzeydeki
   bağlamları kapsar; mega menü kartı açık zeminli olduğu için kendi koyu
   karosunu korur (bkz. simpra.css #mega-kesfet .kfeat-mark).

   Kural base.css'te, yani en erken katmanda: bağlam dosyaları (simpra/checkout/
   legal) sonra yüklendiği için oralarda AYNI özelliği yeniden tanımlamak bunu
   sessizce ezer — o eski çip bildirimleri bilinçli olarak silindi. */
.nav-logo-mark,
.co-logo-mark,
.lg-logo-mark,
.ft-brand .ft-logo-mark {
  /* ÖLÇÜ BURADA, HTML'deki width/height DEĞİL: `box-sizing: border-box` global
     olduğu için width="26" çipin TOPLAM ölçüsü sayılıyor ve 2×6 px iç boşluk
     düşünce işarete 14 px kalıyordu — küçük ve silik görünmesinin sebebi buydu.
     38 px çip + 6 px iç boşluk = 26 px işaret; 76 px'lik header'da (kaydırınca
     64 px) rahat oturur. */
  width: 38px; height: 38px;
  border-radius: 11px; padding: 6px;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    0 12px 26px -14px rgba(0, 0, 0, 0.9);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
a:hover > .nav-logo-mark,
a:hover > .co-logo-mark,
a:hover > .lg-logo-mark,
a:hover > .ft-logo-mark {
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.20),
    0 12px 26px -14px rgba(255, 209, 0, 0.45);
}
a:hover .lm .lm-spark { filter: drop-shadow(0 0 5px rgba(255, 209, 0, 0.75)); }

@media (prefers-reduced-motion: reduce) {
  .nav-logo-mark, .co-logo-mark, .lg-logo-mark, .ft-brand .ft-logo-mark,
  .lm .lm-spark { transition: none; }
  a:hover > .nav-logo-mark, a:hover > .co-logo-mark,
  a:hover > .lg-logo-mark, a:hover > .ft-logo-mark { transform: none; }
}

/* ============ ÇEREZ/ANALİTİK ONAY ÇUBUĞU (assets/js/consent.js) ============
   z-index 90: .sticky-cta (60, closing.css) ve .lumi-fab (70, lumi.css) ÜSTÜNDE
   duracak şekilde bilinçli seçildi — ikisi de bottom:0 sabitlenmiş, banner
   açıkken üstlerini örtmesi kabul edilebilir (tek tıkla kalıcı kapanır);
   site-header (100) ve dil menüsü (140) ALTINDA kalır. */
.consent-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3) calc(var(--sp-2) + env(safe-area-inset-bottom, 0px));
  background: var(--panel); border-top: 1px solid var(--line);
  box-shadow: 0 -10px 30px -12px rgba(0, 0, 0, 0.6);
}
.consent-text { margin: 0; color: var(--ink-dim); font-size: 0.92rem; max-width: 56rem; }
.consent-actions { display: flex; gap: 0.6rem; flex: none; }
.consent-btn {
  font-family: var(--font-display); font-weight: 600; font-size: 0.85rem;
  border-radius: 999px; padding: 0.55rem 1.15rem; cursor: pointer;
  border: 1px solid transparent; transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.consent-accept { background: var(--amber); color: #0a0a0c; }
.consent-accept:hover { background: var(--amber-hi); }
.consent-reject { background: transparent; color: var(--ink-dim); border-color: var(--line); }
.consent-reject:hover { color: var(--ink); border-color: var(--ink-dim); }
@media (max-width: 640px) {
  .consent-bar { flex-direction: column; align-items: stretch; }
  .consent-actions { justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) { .consent-btn { transition: none; } }