/* ─────────────────────────────────────────────
   EarFit · Awwwards-grade dark site
   ───────────────────────────────────────────── */

:root {
  --font-main: "Outfit", sans-serif;
  --bg: #000000;
  --bg-soft: #0d0d0f;
  --bg-card: #111114;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.18);
  --text: #ededed;
  --text-dim: #8a8a8c;
  --text-faint: #5a5a5c;
  /* ══ RESMİ MARKA RENGİ ══
     Müşteri onayı: ana sayfa "Titanyum/Polimer 3D üretim" bölümündeki mor.
     Tüm mor/lila aksanlar bu token'lardan türer — tek yerden yönetilir. */
  --brand-lilac: #e5c2ff;   /* açık lila — ana aksan */
  --brand-pink:  #ff6fab;   /* pembe — artık yalnız hata/uyarı/hover durumları (degradelerde kullanılmıyor) */
  --brand-mor:   #b088ff;   /* doygun mor — degrade ucu */
  --brand-soft:  #d1a8ff;   /* orta ton — ikon/çizgi */
  --brand-rgb:   229, 194, 255;               /* --brand-lilac rgb */
  /* marka degradeleri (metin ve dolgu için) */
  --brand-gradient:      linear-gradient(115deg, #ffffff 8%, var(--brand-lilac) 48%, var(--brand-mor) 100%);
  /* metin gradyanı: renk SOLDA başlar, sağa doğru beyaza gider */
  --brand-gradient-cool: linear-gradient(135deg, var(--brand-mor) 0%, var(--brand-lilac) 50%, #ffffff 100%);

  /* — geriye dönük uyum: eski --titan ailesi artık marka lilasına eşitlendi
       (önceden #e3bfff idi; #e5c2ff'e sabitlendi ki iki yakın mor tekleşsin) */
  --titan: var(--brand-lilac);
  --titan-2: #f3e6ff;
  --titan-glow: var(--brand-rgb);
  --accent: #6effd0;          /* dekoratif yeşil vurgu — korunuyor */
  --blueprint: #8aa7ff;
  --blueprint-rgb: 138, 167, 255;
  --text-gradient: var(--brand-gradient-cool);
  --radius: 8px;
  --easing: cubic-bezier(0.6, 0.1, 0.2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--text); }
html { scroll-behavior: auto; }
body {
  font-family: var(--font-main);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  cursor: none;
}
button,
input,
textarea,
select {
  font: inherit;
}
body::before {
  display: none;
}
@media (max-width: 900px) { body { cursor: auto; } }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
main { position: relative; isolation: isolate; }

.italic { font-family: var(--font-main); font-style: normal; font-weight: 500; letter-spacing: -0.02em; }
.mono { font-family: var(--font-main); font-weight: 500; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
.muted { color: var(--text-dim); }

/* ░░░ Loader ░░░ */
.loader {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: #000;
  transition:
    opacity 0.85s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0.85s,
    background-color 0.55s ease 0.3s; /* portal büyürken zemin süzülerek açılır */
}

/* WebGL orb tuvali — thei.care tarzı shader halka (bkz. header.php inline script) */
.loader__orb-canvas {
  position: absolute;
  left: 50%; top: 50%;
  width: min(80vmin, 800px);
  height: min(80vmin, 800px);
  transform: translate(-50%, -50%);
  pointer-events: none;
  will-change: transform;
}
.loader--no-gl .loader__orb-canvas { display: none; }
.loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader.is-done .loader__inner {
  transform: translateY(-10px) scale(0.985);
  opacity: 0;
}
.loader__inner {
  position: relative;
  z-index: 2; /* logo, orb tuvalinin üstünde ortada durur */
  width: min(340px, 76vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(0) scale(1);
  opacity: 1;
  transition: transform 0.85s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.65s ease;
}
.loader__brand {
  position: relative; /* orb bunun merkezine hizalanır */
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 34px;
  animation: loaderBrandIn 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* ── CSS orb — yalnız WebGL yoksa görünen yedek ──
   Nefes alan halka + dönen ışık yayı. WebGL çalıştığında shader tuvali
   (.loader__orb-canvas) devrededir ve bu tamamen gizlenir. */
.loader__orb { display: none; }
.loader--no-gl .loader__orb { display: block; }
.loader__orb {
  position: absolute;
  left: 50%; top: 50%;
  width: 230px; height: 230px;
  margin: -115px 0 0 -115px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 50% 44%,
    rgba(209, 168, 255, 0.14),
    rgba(138, 90, 200, 0.06) 46%,
    transparent 70%);
  animation: loaderOrbBreathe 2.6s ease-in-out infinite;
  will-change: transform;
}
/* ince halka + iç/dış parlama */
.loader__orb::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(229, 194, 255, 0.35);
  box-shadow:
    0 0 34px rgba(209, 168, 255, 0.22),
    inset 0 0 30px rgba(209, 168, 255, 0.12);
}
/* halkanın üzerinde dönen parlak yay */
.loader__orb::after {
  content: "";
  position: absolute; inset: -2px;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0 76%,
    rgba(229, 194, 255, 0.95) 88%,
    transparent 97%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: loaderOrbSpin 2.4s linear infinite;
}
@keyframes loaderOrbBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}
@keyframes loaderOrbSpin { to { transform: rotate(360deg); } }

/* ── Bitiş sekansı: orb PORTALA dönüşür ──
   Loader zemini şeffaflaşır; orb'un içi delik olur, dışı dev bir siyah
   box-shadow ile örtülür. Orb büyüdükçe delik büyür ve site halkanın
   İÇİNDEN görünerek açılır. Halka ekran kenarlarından taşınca geçiş biter. */
.loader.is-finishing,
#loader.is-finishing { /* header'daki anti-FOUC `#loader{background:#000}` kuralını ezer */
  background-color: rgba(0, 0, 0, 0); /* transition'lı: site orb'un arkasından belirir */
}
/* WebGL orb: halka büyüyerek ekrandan taşar */
.loader.is-finishing .loader__orb-canvas {
  transform: translate(-50%, -50%) scale(9);
  transition: transform 1.05s cubic-bezier(0.7, 0, 0.3, 1);
}
.loader.is-finishing .loader__orb {
  animation: none;
  background: transparent;
  box-shadow: 0 0 0 200vmax #000; /* delik dışında kalan her yer siyah */
  transform: scale(30); /* halka + karanlık ekrandan tamamen taşar */
  transition: transform 1.05s cubic-bezier(0.7, 0, 0.3, 1);
}
/* büyüyen halka: parlak mor rim — portalın kenarı */
.loader.is-finishing .loader__orb::before {
  border-color: rgba(229, 194, 255, 0.55);
  box-shadow:
    0 0 40px rgba(209, 168, 255, 0.4),
    inset 0 0 40px rgba(209, 168, 255, 0.25);
}
/* dönen yay büyüme sırasında söner */
.loader.is-finishing .loader__orb::after {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.loader.is-finishing .loader__logo,
.loader.is-finishing .loader__enter,
.loader.is-finishing .loader__preference {
  opacity: 0;
  transition: opacity 0.25s ease;
}

/* Loader tercihi — alt ortada, sonraki sayfalarda animasyonu tamamen atlar. */
.loader__preference {
  position: absolute;
  left: 50%;
  bottom: max(28px, env(safe-area-inset-bottom));
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transform: translateX(-50%);
  transition: color 0.25s ease, opacity 0.25s ease;
}
.loader__preference:hover { color: rgba(255, 255, 255, 0.88); }
.loader__preference input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.loader__preference-box {
  width: 17px;
  height: 17px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid rgba(229, 194, 255, 0.42);
  border-radius: 5px;
  background: rgba(229, 194, 255, 0.05);
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.loader__preference-box svg {
  width: 11px;
  height: 11px;
  color: #120a18;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.loader__preference input:checked + .loader__preference-box {
  border-color: #e5c2ff;
  background: #e5c2ff;
  box-shadow: 0 0 18px rgba(209, 168, 255, 0.28);
}
.loader__preference input:checked + .loader__preference-box svg {
  opacity: 1;
  transform: scale(1);
}
.loader__preference input:focus-visible + .loader__preference-box {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

/* ── Giriş kapısı — "Sesli Gir / sessiz devam et" ── */
.loader__enter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.loader.is-waiting .loader__enter {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.loader__enter-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 30px;
  border-radius: 999px;
  border: 1px solid rgba(229, 194, 255, 0.45);
  background: rgba(229, 194, 255, 0.06);
  color: var(--text);
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.loader__enter-btn:hover {
  border-color: rgba(229, 194, 255, 0.85);
  background: rgba(229, 194, 255, 0.12);
  box-shadow: 0 0 30px rgba(209, 168, 255, 0.25);
  transform: translateY(-1px);
}
.loader__enter-btn svg { color: var(--brand-soft); }
/* ikincil: sade metin görünümü */
.loader__enter-btn--muted {
  border-color: transparent;
  background: none;
  color: var(--text-faint);
  font-size: 12px;
  padding: 6px 12px;
  text-transform: none;
  letter-spacing: 0.02em;
}
.loader__enter-btn--muted:hover {
  border-color: transparent;
  background: none;
  box-shadow: none;
  color: var(--text-dim);
}
.loader__logo {
  height: 42px; width: auto; display: block;
  opacity: 0.96;
  filter: drop-shadow(0 18px 42px rgba(209, 168, 255, 0.16));
}
@keyframes loaderBrandIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* ░░░ Cursor ░░░ */
.cursor { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 10001; mix-blend-mode: difference; } /* loader (9999) dahil her şeyin üstünde — giriş kapısında da görünür */
.cursor__dot {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: #fff; transform: translate(-50%, -50%);
}
.cursor__ring {
  position: absolute; width: 36px; height: 36px; border: 1px solid #fff; border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.3s var(--easing), height 0.3s var(--easing), opacity 0.3s;
}
.cursor.is-hover .cursor__ring { width: 64px; height: 64px; }
.cursor.is-hide { opacity: 0; }
@media (max-width: 900px) { .cursor { display: none; } }

/* ░░░ Grain ░░░ */
.grain {
  display: none;
}
@keyframes grain {
  0%   { transform: translate(0,0) }
  10%  { transform: translate(-3%,-2%) }
  20%  { transform: translate(2%,3%) }
  30%  { transform: translate(-2%,1%) }
  40%  { transform: translate(3%,-3%) }
  50%  { transform: translate(-3%,2%) }
  60%  { transform: translate(2%,-2%) }
  70%  { transform: translate(-1%,3%) }
  80%  { transform: translate(2%,1%) }
  90%  { transform: translate(-2%,-1%) }
  100% { transform: translate(0,0) }
}

/* ░░░ Nav ░░░ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px clamp(56px, 7vw, 132px);
  transition: backdrop-filter 0.4s, background 0.4s, padding 0.4s,
    transform 0.38s var(--easing), opacity 0.28s ease;
}
/* akıllı gizlenme: aşağı inerken kaybolur, yukarı çekince döner (earfit.js) */
.nav.nav--hidden { transform: translateY(-100%); }
.nav.nav--immersive-hidden {
  transform: translateY(-115%);
  opacity: 0;
  pointer-events: none;
}
body.menu-open .nav.nav--immersive-hidden,
body.cartd-open .nav.nav--immersive-hidden {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}
.nav.is-scrolled {
  backdrop-filter: blur(16px);
  background: rgba(6, 6, 7, 0.55);
  border-bottom: 1px solid var(--line);
  padding: 14px clamp(56px, 7vw, 132px);
}
.nav__logo {
  display: inline-flex; align-items: center;
  height: 48px;
  color: var(--text);
}
.nav__logo-img {
  height: 36px; width: auto; display: block;
  transition: opacity 0.3s var(--easing), transform 0.6s var(--easing);
}
.nav__logo:hover .nav__logo-img {
  opacity: 0.78;
  transform: scale(0.97);
}
.nav.is-scrolled .nav__logo-img { height: 30px; }
.nav__links {
  display: flex; align-items: center; gap: 30px;
  font-size: 15px; font-weight: 500; color: var(--text-dim);
}
.nav__links a { transition: color 0.3s; position: relative; }
.nav__links a:hover { color: var(--text); }
.nav__dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}
/* Trigger ile mega menü arasındaki dikey boşlukta hover kopmasın — görünmez
   ama hover-aktif bir köprü. Menü top:100%+16px'te; köprü o 16px'i doldurur.
   Trigger genişliğinde + biraz taşkın; komşu nav linklerine binmez. */
.nav__dropdown::after {
  content: "";
  position: absolute;
  top: 100%; left: -24px; right: -24px; height: 20px;
}
.nav__dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav__dropdown-trigger svg {
  opacity: 0.72;
  transition: transform 0.28s var(--easing), opacity 0.28s var(--easing);
}
.nav__dropdown:hover .nav__dropdown-trigger,
.nav__dropdown:focus-within .nav__dropdown-trigger {
  color: var(--text);
}
.nav__dropdown:hover .nav__dropdown-trigger svg,
.nav__dropdown:focus-within .nav__dropdown-trigger svg {
  opacity: 1;
  transform: rotate(180deg);
}
/* ═══════════════════════════════════════════════
   Ürünler mega menü — sinematik, katmanlı, premium.
   Sol tanıtım kolonu + büyük görselli ürün kartları.
   ═══════════════════════════════════════════════ */
.nav__mega {
  position: absolute;
  top: calc(100% + 16px);
  /* Geniş panel — trigger'ın solundan biraz içeriden başlayıp sağa açılır,
     böylece sol kenardan taşmaz (ortalamak ~700px'te sola taşardı). */
  left: -40px; transform: translate3d(0, 10px, 0);
  padding: 0;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 22px;
  background:
    radial-gradient(130% 100% at 12% 0%, rgba(var(--brand-rgb), 0.1), transparent 52%),
    radial-gradient(120% 120% at 100% 100%, rgba(176,136,255,0.07), transparent 55%),
    rgba(10, 9, 12, 0.9);
  backdrop-filter: blur(26px) saturate(1.3); -webkit-backdrop-filter: blur(26px) saturate(1.3);
  box-shadow:
    0 32px 80px rgba(0,0,0,0.55),
    0 2px 0 rgba(255,255,255,0.04) inset,
    0 0 0 1px rgba(var(--brand-rgb), 0.05) inset;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  transition: opacity 0.32s var(--easing), transform 0.42s cubic-bezier(0.22,1,0.36,1);
}
/* üstte ince ışıltı çizgisi */
.nav__mega::after {
  content: ""; position: absolute; top: 0; left: 22px; right: 22px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--brand-rgb), 0.6), rgba(176,136,255,0.5), transparent);
}
/* menü ile trigger arası köprü .nav__dropdown::after ile sağlanır (üstte) */
.nav__dropdown:hover .nav__mega,
.nav__dropdown:focus-within .nav__mega {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
}
.nav__mega-inner {
  display: grid;
  grid-template-columns: 176px auto;
  gap: 22px;
  padding: 22px;
}

/* ── Sol tanıtım kolonu ── */
.nav__mega-aside {
  display: flex; flex-direction: column;
  padding-right: 22px;
  border-right: 1px solid rgba(255,255,255,0.08);
}
.nav__mega-eyebrow {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brand-lilac);
}
.nav__mega-tagline {
  margin-top: 12px; font-size: 19px; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em;
  color: #fff;
}
.nav__mega-links { margin-top: auto; padding-top: 22px; display: flex; flex-direction: column; gap: 4px; }
.nav__mega-link {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 10px; margin: 0 -10px; border-radius: 9px;
  font-size: 13px; color: var(--text-dim);
  transition: color .26s var(--easing), background .26s var(--easing);
}
.nav__mega-link svg { color: var(--brand-soft); opacity: 0.8; transition: opacity .26s ease, transform .26s ease; }
.nav__mega-link:hover { color: #fff; background: rgba(255,255,255,0.04); }
.nav__mega-link:hover svg { opacity: 1; transform: translateX(2px); }

/* ── Ürün kartları — büyük, dikey, görselli ── */
.nav__mega-grid {
  display: grid;
  grid-template-columns: repeat(2, 236px);
  gap: 14px;
}
.nav__mega-card {
  position: relative;
  display: flex; flex-direction: column;
  border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.008));
  /* staggered giriş için başlangıç durumu */
  opacity: 0; transform: translateY(14px);
  transition:
    border-color .3s var(--easing), transform .5s cubic-bezier(0.22,1,0.36,1),
    opacity .5s var(--easing), box-shadow .35s var(--easing);
}
.nav__dropdown:hover .nav__mega-card,
.nav__dropdown:focus-within .nav__mega-card { opacity: 1; transform: translateY(0); }
.nav__dropdown:hover .nav__mega-card:nth-child(2) { transition-delay: .06s; }
.nav__mega-card:hover {
  border-color: rgba(var(--brand-rgb), 0.5);
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.4), 0 0 30px rgba(var(--brand-rgb), 0.14);
}
.nav__mega-card[aria-current="page"] { border-color: rgba(var(--brand-rgb), 0.6); }

/* büyük görsel alanı (placeholder — gerçek foto <img> ile gelir) */
.nav__mega-media {
  position: relative;
  height: 128px; overflow: hidden;
  display: grid; place-items: center;
  background:
    radial-gradient(120% 130% at 28% 18%, rgba(var(--brand-rgb), 0.22), transparent 60%),
    radial-gradient(120% 130% at 90% 100%, rgba(176,136,255,0.14), transparent 55%),
    linear-gradient(158deg, #201b28 0%, #0d0c11 78%);
}
.nav__mega-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nav__mega-photo { object-position: 50% 58%; transition: transform .5s cubic-bezier(0.22,1,0.36,1); }
.nav__mega-card:hover .nav__mega-photo { transform: scale(1.06); }
.nav__mega-glyph {
  width: 62px; height: 62px; color: rgba(var(--brand-rgb), 0.9);
  filter: drop-shadow(0 4px 14px rgba(var(--brand-rgb), 0.35));
  transition: transform .5s cubic-bezier(0.22,1,0.36,1);
}
.nav__mega-card:hover .nav__mega-glyph { transform: scale(1.08) rotate(-3deg); }
.nav__mega-tag {
  position: absolute; top: 11px; left: 11px; z-index: 1;
  padding: 4px 10px; border-radius: 999px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: #fff; background: rgba(0,0,0,0.32); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.14);
}

/* kart alt bilgi bandı */
.nav__mega-body { display: flex; flex-direction: column; gap: 5px; padding: 15px 16px 16px; }
.nav__mega-name { font-size: 15.5px; font-weight: 600; color: #fff; letter-spacing: -0.01em; }
.nav__mega-desc { font-size: 12px; color: var(--text-dim); line-height: 1.45; }
.nav__mega-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 8px;
}
/* Fiyat gösterilmediğinde "İncele" sağda kalsın */
.nav__mega-cta { margin-left: auto; }
.nav__mega-price {
  font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--brand-gradient-cool);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.nav__mega-cta {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 600; color: var(--text-dim);
  transition: color .26s var(--easing);
}
.nav__mega-cta svg { transition: transform .26s var(--easing); }
.nav__mega-card:hover .nav__mega-cta { color: var(--brand-lilac); }
.nav__mega-card:hover .nav__mega-cta svg { transform: translateX(3px); }

@media (max-width: 1080px) {
  .nav__mega-inner { grid-template-columns: 150px auto; gap: 18px; padding: 18px; }
  .nav__mega-grid { grid-template-columns: repeat(2, 200px); gap: 12px; }
  .nav__mega-media { height: 112px; }
}
.nav__cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px; border: 1px solid var(--line-strong); border-radius: 999px;
  font-size: 13px; transition: all 0.3s var(--easing); white-space: nowrap;
}
.nav__cta:hover { background: var(--text); color: var(--bg); border-color: var(--text); }
.nav__cta:hover svg { transform: translateX(3px); }
.nav__cta svg { transition: transform 0.3s; }

/* Right-side nav actions: language toggle · account · cart */
.nav__actions {
  display: flex;
  align-items: center;
  gap: 14px;
}
/* Language toggle (TR / EN) — quiet text, EN disabled until ready */
.nav__lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  letter-spacing: 0.04em;
}
.nav__lang-btn {
  background: none;
  border: none;
  padding: 4px 2px;
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.3s var(--easing);
}
.nav__lang-btn:hover:not(:disabled) { color: var(--text); }
.nav__lang-btn.is-active { color: var(--text); font-weight: 600; }
.nav__lang-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.nav__lang-sep { color: var(--line-strong); font-size: 12px; }
/* Account / cart icon buttons */
.nav__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  color: var(--text-dim);
  border: 1px solid transparent;
  transition: color 0.3s var(--easing), border-color 0.3s var(--easing), background 0.3s var(--easing);
}
.nav__icon:hover {
  color: var(--text);
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.04);
}

/* ── Ses aç/kapat düğmesi (earfit-sound.js) ──
   Durumlar: .is-playing → çubuklar dans eder · .is-muted → çubuklar söner */
.nav__sound {
  background: none;
  padding: 0;
  cursor: pointer;
}
.nav__sound-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 14px;
}
.nav__sound-bars i {
  width: 2px;
  height: 5px;
  border-radius: 1px;
  background: currentColor;
  transition: height 0.25s var(--easing), opacity 0.25s var(--easing);
}
.nav__sound-bars i:nth-child(2) { height: 10px; }
.nav__sound-bars i:nth-child(3) { height: 7px; }
.nav__sound-bars i:nth-child(4) { height: 12px; }
.nav__sound.is-playing { color: var(--brand-soft); }
.nav__sound.is-playing .nav__sound-bars i { animation: ef-eq 1.05s ease-in-out infinite; }
.nav__sound.is-playing .nav__sound-bars i:nth-child(1) { animation-delay: 0s; }
.nav__sound.is-playing .nav__sound-bars i:nth-child(2) { animation-delay: -0.35s; }
.nav__sound.is-playing .nav__sound-bars i:nth-child(3) { animation-delay: -0.7s; }
.nav__sound.is-playing .nav__sound-bars i:nth-child(4) { animation-delay: -0.2s; }
.nav__sound.is-muted { color: var(--text-faint); }
.nav__sound.is-muted .nav__sound-bars i {
  height: 2px !important;
  animation: none !important;
  opacity: 0.7;
}
@keyframes ef-eq {
  0%, 100% { height: 4px; }
  50% { height: 14px; }
}

/* ── Hamburger button — hidden on desktop, shown ≤900px ── */
.nav__burger {
  display: none; /* flipped to inline-flex in the 900px query */
  position: relative;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  background: none; border: none; padding: 0; cursor: pointer;
  z-index: 1101; /* above the overlay so the X stays tappable */
}
.nav__burger span {
  display: block; width: 22px; height: 2px;
  background: var(--text); border-radius: 2px;
  transition: transform 0.32s var(--easing), opacity 0.2s var(--easing);
}
/* Animate into an X while the menu is open. */
body.menu-open .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .nav__burger span:nth-child(2) { opacity: 0; }
body.menu-open .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Full-screen mobile menu overlay ── */
.mobile-menu {
  position: fixed; inset: 0; z-index: 1100;
  display: flex; flex-direction: column;
  justify-content: center;
  padding: 96px clamp(28px, 8vw, 56px) 56px;
  background: rgba(6, 6, 7, 0.86);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  opacity: 0; visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 0.4s var(--easing), transform 0.4s var(--easing), visibility 0.4s;
}
body.menu-open .mobile-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.mobile-menu__links {
  display: flex; flex-direction: column; gap: 6px;
}
.mobile-menu__links a {
  font-family: var(--font-main);
  font-size: clamp(30px, 9vw, 46px);
  font-weight: 500; line-height: 1.18;
  color: var(--text);
  padding: 8px 0;
  letter-spacing: -0.01em;
  /* staggered entrance */
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.5s var(--easing), transform 0.5s var(--easing), color 0.25s;
}
body.menu-open .mobile-menu__links a { opacity: 1; transform: translateY(0); }
body.menu-open .mobile-menu__links a:nth-child(1) { transition-delay: 0.08s; }
body.menu-open .mobile-menu__links a:nth-child(2) { transition-delay: 0.14s; }
body.menu-open .mobile-menu__links a:nth-child(3) { transition-delay: 0.20s; }
body.menu-open .mobile-menu__links a:nth-child(4) { transition-delay: 0.26s; }
body.menu-open .mobile-menu__links a:nth-child(5) { transition-delay: 0.32s; }
.mobile-menu__links a[aria-current="page"] { color: var(--accent); }
.mobile-menu__foot {
  margin-top: auto;
  display: flex; flex-direction: column; gap: 18px;
  padding-top: 40px;
}
.mobile-menu__cta {
  display: inline-flex; align-items: center; gap: 10px;
  align-self: flex-start;
  padding: 14px 24px; border-radius: 999px;
  border: 1px solid var(--line-strong, rgba(255,255,255,0.2));
  font-size: 15px; color: var(--text);
  transition: background 0.3s var(--easing), color 0.3s var(--easing);
}
.mobile-menu__cta:hover { background: var(--text); color: var(--bg); }
.mobile-menu__meta {
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-dim);
}

@media (max-width: 900px) {
  .nav { padding: 18px 20px; }
  .nav__logo { height: 42px; }
  .nav__logo-img { height: 32px; }
  .nav__links { display: none; }
  .nav__burger { display: inline-flex; }
  .nav.is-scrolled { padding: 12px 20px; }
  .nav.is-scrolled .nav__logo-img { height: 28px; }
  .nav__actions { gap: 8px; }
  .nav__icon { width: 34px; height: 34px; }
}

/* ░░░ Hero ░░░ */
.hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: flex-end;
  /* yanlar nav ile aynı hizada (bkz. .nav padding) — içerik header genişliğinde.
     NOT: aşağıdaki global `section { max-width: 1480px; margin: 0 auto }` kuralı
     hero'yu da kapaklıyordu; burada açıkça sıfırlanır (tam genişlik). */
  max-width: none;
  margin: 0;
  padding: 120px clamp(56px, 7vw, 132px) 100px;
  overflow: hidden;
}
.hero__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0;
}
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
  opacity: 0;
  transition: opacity 1.4s cubic-bezier(0.6, 0.1, 0.2, 1);
  will-change: transform, opacity;
  pointer-events: none;
  filter: contrast(1.05) saturate(1.05);
}
.hero__video.is-ready { opacity: 1; }
/* When video is active, hide the WebGL canvas entirely (frees GPU) */
.hero.has-video .hero__canvas { display: none; }
/* Pause the noise grain over the pinned hero — its mix-blend-mode is expensive */
.hero.has-video ~ .grain,
body:has(.hero.has-video) .grain { animation: none; opacity: 0.04; }
/* Hero ilk karede doğal ölçüdedir; scroll ile yakınlaştırmayı JS yönetir. */
.hero__video {
  transform: translateZ(0) scale(1);
  transform-origin: center center;
  backface-visibility: hidden;
}

.hero__blur-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  backdrop-filter: blur(28px) saturate(1.1);
  -webkit-backdrop-filter: blur(28px) saturate(1.1);
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle 250px at var(--mouse-x, 50vw) var(--mouse-y, 50vh), transparent 0%, rgba(0,0,0,0.15) 45%, black 85%);
  mask-image: radial-gradient(circle 250px at var(--mouse-x, 50vw) var(--mouse-y, 50vh), transparent 0%, rgba(0,0,0,0.15) 45%, black 85%);
}
.hero__vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.7) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.85) 100%);
}
.hero__content { position: relative; z-index: 2; width: 100%; margin: 0; } /* 1280px kapağı kalktı — header ile aynı genişlik */
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 20px;
  color: var(--text-dim);
}
.hero__eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--titan);
  box-shadow: 0 0 18px rgba(var(--titan-glow), 0.7);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}
.hero__title {
  font-family: var(--font-main);
  font-size: clamp(48px, 9.5vw, 168px);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.04em;
  margin-bottom: 24px;
}
.hero__title .line { display: block; overflow: hidden; }
.hero__title .word { display: inline-block; }
.hero__title .italic {
  font-size: 1.05em; line-height: 0.9;
  background: var(--text-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero__row {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 40px; flex-wrap: wrap;
}
.hero__lede {
  max-width: 460px; color: var(--text-dim);
  font-size: 15px; line-height: 1.55;
}
.scroll-hint {
  display: inline-flex; flex-direction: column; align-items: center; gap: 12px;
  color: var(--text-dim);
  cursor: pointer;
  text-decoration: none;
  transition: color 0.3s var(--easing), transform 0.3s var(--easing);
}
.scroll-hint .mono {
  letter-spacing: 0.28em;
  transition: color 0.3s var(--easing);
}
.scroll-hint:hover,
.scroll-hint:focus-visible {
  color: var(--text);
  transform: translateY(-3px);
  outline: none;
}
.scroll-hint:hover .mono,
.scroll-hint:focus-visible .mono {
  color: var(--titan);
}
.scroll-hint__line {
  width: 1px; height: 64px; background: linear-gradient(to bottom, transparent, var(--titan));
  position: relative; overflow: hidden;
}
.scroll-hint__line::after {
  content: ""; position: absolute; top: -20px; left: 0; right: 0; height: 20px;
  background: var(--text);
  animation: scrolldown 2s var(--easing) infinite;
}
@keyframes scrolldown {
  0% { top: -20px; }
  100% { top: 100%; }
}
/* Hero CTA group — appears only at the end of the hero scrub video. A one-line
   hook above the button grounds it so the CTA doesn't float in the black.
   Anchored bottom-centre, hidden until JS fades the group in. */
/* End-of-hero reveal: the big hook headline + button appear CENTRED over the
   blurred/darkened last frame of the hero scrub video. */
.hero__cta-group {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% + 24px));
  z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 32px;
  text-align: center;
  width: min(90vw, 880px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.6s var(--easing), transform 0.6s var(--easing);
}
.hero__cta-group.is-visible {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, -50%);
}
.hero__cta-hook {
  margin: 0;
  font-size: clamp(30px, 5vw, 64px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.08;
  max-width: 16ch;
  /* Same soft-purple gradient text used across the site (hero title, accents) */
  background: linear-gradient(120deg, var(--brand-mor) 0%, var(--titan) 42%, #ffffff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero__cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 26px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 14px; letter-spacing: 0.02em; white-space: nowrap;
  color: var(--text);
  background: transparent;
  text-decoration: none;
  transition: background 0.3s var(--easing), border-color 0.3s var(--easing),
              color 0.3s var(--easing);
}
.hero__cta:hover {
  background: var(--text); color: var(--bg); border-color: var(--text);
}
.hero__cta svg { transition: transform 0.3s var(--easing); }
.hero__cta:hover svg { transform: translateX(3px); }
@media (max-width: 900px) {
  .hero__cta-group { gap: 24px; padding: 0 20px; }
  .hero__cta { padding: 12px 22px; font-size: 13px; }
}

.hero__corners {
  position: absolute; bottom: 24px; left: 40px; right: 40px;
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  color: var(--text-faint);
  z-index: 2;
}

@media (max-width: 900px) {
  .hero { padding: 110px 20px 40px; }
  .hero__corners { display: none; }
}

/* ░░░ Manifesto ░░░ */
.manifesto {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* No longer pinned — give the section breathing room top & bottom instead of
     relying on a transform to centre pinned content. */
  padding: clamp(120px, 18vh, 220px) 40px;
  background: transparent;
  z-index: 2;
}

.manifesto__text {
  font-family: var(--font-main);
  font-size: clamp(24px, 3.5vw, 42px);
  font-weight: 300;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92); /* neutral body copy */
  text-align: center;
  max-width: 1000px;
  margin: 0 auto;
}

/* Each character is a span the typewriter fades in one-by-one. JS flips opacity
   to 1 as it types; this is the hidden starting state. A short fade per char
   softens the daktilo edge without looking like a per-char animation. */
.manifesto__char {
  opacity: 0;
  white-space: pre-wrap; /* keep spaces, still allow natural line wrapping */
  transition: opacity 0.12s linear;
}
/* Purple accent — used only on the highlighted words (net / doğal). */
.manifesto__accent {
  color: var(--titan);
}

/* Accessibility: no typing for reduced-motion users — show all text at once. */
@media (prefers-reduced-motion: reduce) {
  .manifesto__char { opacity: 1 !important; transition: none !important; }
}

/* ░░░ Third Section – Full‑screen banner ░░░ */
.third-section {
  position: relative;
  width: 100%;
  height: 100vh;
  margin-top: -10vh; /* Pulls the section up to blend the black voids smoothly */
  background: #000 url('../earfit/banner3.png') no-repeat;
  background-position: center calc(100% + 12vh); /* Pushes the image downwards to crop the bottom and give more space at the top */
  background-size: cover;
  /* Aggressive inset shadows to perfectly blend all edges into the page's #000 background */
  box-shadow: 
    inset 0 25vh 20vh -10vh #000000,
    inset 0 -10vh 15vh -5vh #000000,
    inset 25vw 0 20vw -10vw #000000,
    inset -25vw 0 20vw -10vw #000000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* Reverted: Push strictly to the top */
  padding-top: 18vh; /* Increased from 8vh to give the navbar breathing room */
  padding-bottom: 0;
  overflow: hidden;
}

.third-section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 36vh;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.72) 52%,
    #000 100%
  );
}

.third-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2; /* Keeps text above the vignette */
}

.third-title {
  font-family: var(--font-main);
  font-size: clamp(36px, 5vw, 80px); /* Slightly smaller to fit cleanly above */
  text-align: center;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.third-title span {
  display: inline-block; /* Crucial for GSAP transform animations to work on spans */
  will-change: transform, opacity;
}

.third-title .highlight {
  font-weight: 500;
  color: #d1a8ff; /* Solid premium lilac, no gradient, matches reference exactly */
}

.third-title .muted {
  font-weight: 400;
  color: #ffffff; /* Pure crisp white, matches reference perfectly */
}

/* Vertical indicator line from reference */
.third-line-indicator {
  width: 1px;
  height: 60px; /* Shorter line to ensure it doesn't touch earphones */
  background: linear-gradient(to bottom, rgba(255,255,255,0.0) 0%, rgba(209, 168, 255, 0.8) 100%);
  margin-top: 25px; /* Tighter margin */
  position: relative;
}

.third-line-indicator::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: -2.5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d1a8ff;
  box-shadow: 0 0 10px #d1a8ff;
}

/* ░░░ Ürün Vitrini ░░░ */
.products {
  position: relative;
  width: 100%;
  /* global `section` kapağını sıfırla — yanlar nav ile aynı hizada */
  max-width: none;
  margin: 0;
  background: var(--bg);
  padding: clamp(120px, 16vh, 200px) clamp(56px, 7vw, 132px);
  z-index: 2;
}
.products__inner {
  width: 100%;
  max-width: none;
  margin: 0;
}
.products__head {
  margin: 0 0 clamp(48px, 6vw, 80px);
}
.products__eyebrow {
  display: block;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  margin-bottom: 16px;
}
.products__title {
  margin: 0;
  color: #fff;
  font-family: var(--font-main);
  font-size: clamp(34px, 5vw, 68px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.products__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2vw, 30px);
}

/* Card — almost-invisible dark surface; content does the separating.
   overflow is NOT hidden here so the hover glow can spill out behind the card;
   the media area clips its own corners instead. */
/* ── Mağaza arşivi (woocommerce/archive-product.php) ──
   Ana sayfa "Ürünler" bölümünün stillerini aynen kullanır; buradaki kurallar
   yalnız arşive özgü farkları kapatır (ul/li sıfırlama, lede, sayfalama). */
.shop-archive__lede {
  max-width: 640px;
  margin: 18px 0 0;
  color: var(--text-dim);
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.6;
  font-weight: 300;
}
.shop-archive__grid {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Woo'nun clearfix ::before/::after pseudoları grid'de hayalet hücre
   oluşturup ilk kolonu işgal ediyor — kapat. */
.shop-archive__grid::before,
.shop-archive__grid::after {
  content: none !important;
  display: none !important;
}
.shop-archive__grid > li {
  display: flex; /* li sarmalayıcısı karta yükseklik geçirir */
  min-width: 0;
}
.shop-archive__grid .product-card { width: 100%; }
.shop-archive__empty {
  color: var(--text-dim);
  font-size: 16px;
  padding: 40px 0;
}
/* Woo bildirimleri — karanlık temaya uyarlanmış sade şerit */
.shop-archive .woocommerce-notices-wrapper:not(:empty),
.shop-archive .woocommerce-info,
.shop-archive .woocommerce-message,
.shop-archive .woocommerce-error {
  margin: 0 0 28px;
  color: var(--text-dim);
  font-size: 14px;
  list-style: none;
  padding: 0;
}
/* Sayfalama — yuvarlak, kısık; aktif sayfa marka morunda */
.shop-archive .woocommerce-pagination { margin-top: 48px; text-align: center; }
.shop-archive .woocommerce-pagination .page-numbers {
  display: inline-flex;
  list-style: none;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.shop-archive .woocommerce-pagination .page-numbers li { list-style: none; }
.shop-archive .woocommerce-pagination a.page-numbers,
.shop-archive .woocommerce-pagination span.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--text-dim);
  font-size: 14px;
  transition: color 0.3s var(--easing), border-color 0.3s var(--easing), background 0.3s var(--easing);
}
.shop-archive .woocommerce-pagination a.page-numbers:hover {
  color: var(--text);
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.04);
}
.shop-archive .woocommerce-pagination span.page-numbers.current {
  color: #000;
  background: var(--brand-lilac);
  border-color: var(--brand-lilac);
}

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.022);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 22px;
  transition: transform 0.22s ease, border-color 0.22s ease;
}
/* Soft purple aura that glows evenly around the WHOLE card on hover. It mirrors
   the card's shape (same rounded rect, sat behind it) and spreads out on every
   side via a blurred box-shadow — not just under the image. Fades in gently. */
.product-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: 0 0 40px 6px rgba(199, 150, 255, 0.38);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.product-card:hover {
  transform: translateY(-4px);
  border-color: rgba(199, 150, 255, 0.32);
}
.product-card:hover::after { opacity: 1; }

/* Hero / flagship product — quietly lifted above the other two using only
   white tints (no colour, no glow). Slightly stronger surface + edge, and a
   touch raised so the eye lands here first. Grid stays 3 equal columns. */
.product-card--featured {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.16);
  transform: translateY(-10px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset;
}
.product-card--featured:hover {
  transform: translateY(-14px);
  border-color: rgba(255, 255, 255, 0.24);
}

/* Media area — sized so the product fills it and dominates (not small/centred
   with margins). A real <img> with object-fit:cover fills the whole box. */
.product-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(130% 100% at 50% 16%, rgba(255, 255, 255, 0.06), transparent 62%),
    linear-gradient(160deg, #121214 0%, #0a0a0c 60%, #060606 100%);
  overflow: hidden;
  /* Card no longer clips; round the media's own top corners to match. */
  border-radius: 21px 21px 0 0;
}
/* The flagship gets a marginally taller render area so its product reads bigger. */
.product-card--featured .product-card__media { aspect-ratio: 4 / 3.2; }
/* BURAYA ÜRÜN GÖRSELİ — gerçek görsel eklenince placeholder otomatik gizlenir.
   object-fit:cover ile kutuyu tamamen doldurur; ürün büyük ve hâkim görünür. */
.product-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--easing);
}
.product-card__img + .product-card__placeholder { display: none; }
.product-card:hover .product-card__img { transform: scale(1.02); }
.product-card__placeholder {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.28);
}
.product-card__badge {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 5px 11px;
  font-size: 11px;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.product-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 28px 28px 30px;
}
.product-card__name {
  margin: 0;
  font-size: clamp(20px, 1.6vw, 24px);
  font-weight: 500;
  color: #fff;
  letter-spacing: -0.01em;
}
.product-card__desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.58);
}
/* CTA — ghost/outline pill in the site's button language. */
.product-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 6px;
  padding: 11px 20px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 999px;
  font-size: 14px;
  color: var(--text);
  background: transparent;
  text-decoration: none;
  transition: border-color 0.22s ease, color 0.22s ease;
}
.product-card__cta:hover {
  border-color: rgba(255, 255, 255, 0.55);
}
.product-card__cta svg { transition: transform 0.22s ease; }
.product-card__cta:hover svg { transform: translateX(4px); }

.products__grid > .product-card--coming-soon {
  overflow: hidden;
  align-items: center;
  justify-content: center;
  padding: 48px 28px;
  text-align: center;
  background:
    radial-gradient(ellipse at 100% 0%, rgba(146, 108, 184, 0.10), transparent 58%),
    radial-gradient(ellipse at 0% 100%, rgba(75, 44, 118, 0.14), transparent 65%),
    linear-gradient(145deg, #151019 0%, #100c15 43%, #0b0a0e 75%, #08080a 100%);
  border-color: rgba(199, 150, 255, 0.09);
}
.product-card__preview-label {
  color: #95849f;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
}
.product-card__preview-copy h3 {
  margin: 16px 0 14px;
  color: #c8c2ce;
  font-size: clamp(28px, 2.2vw, 36px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.035em;
}
.product-card__preview-copy p {
  margin: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
  line-height: 1.6;
}

.products__grid > .product-card--coming-soon:hover {
  transform: none;
}
.products__grid > .product-card--coming-soon::after {
  display: none;
}

@media (max-width: 1024px) {
  .products__grid > .product-card--coming-soon { display: none; }
  .products__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* With 3 cards in a 2-col grid the last one is orphaned, leaving a big empty
     cell. Let a lone final card span the full row so there's no dead space. */
  .products__grid > .product-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* ══ Ödeme adımı kesin kontrast düzeltmesi ══
   Global içerik stilleri payment_box içindeki <p> etiketine koyu renk
   verdiği için yalnızca kapsayıcıya renk vermek yeterli olmuyor. */
body.co-page .co-panel[data-panel="3"] .wc_payment_methods li > label,
body.co-page .co-panel[data-panel="3"] .wc_payment_methods li > label * {
  color: #ffffff !important;
  opacity: 1 !important;
}

body.co-page .co-panel[data-panel="3"] .wc_payment_methods .payment_box,
body.co-page .co-panel[data-panel="3"] .wc_payment_methods .payment_box p,
body.co-page .co-panel[data-panel="3"] .wc_payment_methods .payment_box span,
body.co-page .co-panel[data-panel="3"] .wc_payment_methods .payment_box strong,
body.co-page .co-panel[data-panel="3"] .wc_payment_methods .payment_box small {
  color: rgba(255, 255, 255, 0.88) !important;
  opacity: 1 !important;
}

body.co-page .co-panel[data-panel="3"] .woocommerce-terms-and-conditions-checkbox-text,
body.co-page .co-panel[data-panel="3"] .woocommerce-terms-and-conditions-checkbox-text span,
body.co-page .co-panel[data-panel="3"] .woocommerce-terms-and-conditions-checkbox-text strong {
  color: rgba(255, 255, 255, 0.92) !important;
  opacity: 1 !important;
}

body.co-page .co-panel[data-panel="3"] .woocommerce-terms-and-conditions-checkbox-text a {
  color: #e5c2ff !important;
  opacity: 1 !important;
}

body.co-page .co-panel[data-panel="3"] .woocommerce-terms-and-conditions,
body.co-page .co-panel[data-panel="3"] .woocommerce-terms-and-conditions p,
body.co-page .co-panel[data-panel="3"] .woocommerce-terms-and-conditions li,
body.co-page .co-panel[data-panel="3"] .woocommerce-terms-and-conditions h2,
body.co-page .co-panel[data-panel="3"] .woocommerce-terms-and-conditions h3,
body.co-page .co-panel[data-panel="3"] .woocommerce-terms-and-conditions strong {
  color: rgba(255, 255, 255, 0.9) !important;
  opacity: 1 !important;
}

body.co-page .co-summary h2,
body.co-page .co-summary .co-sumitem__n,
body.co-page .co-summary .co-sumitem__p {
  color: #ffffff !important;
  opacity: 1 !important;
}

body.co-page .co-summary .co-sumitem__c,
body.co-page .co-summary .co-sumrow,
body.co-page .co-summary .co-sumtotal span,
body.co-page .co-summary .co-sumsecure {
  color: rgba(255, 255, 255, 0.82) !important;
  opacity: 1 !important;
}

body.co-page .co-summary .co-sumrow b {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Tek ödeme yöntemi varsa seçim radyo alanına gerek yok. Soldaki 40px'lik
   hayalet boşluğu kaldırıp başlık ve açıklamayı aynı hizada başlat. */
body.co-page #payment .wc_payment_methods > li:only-child > input[type="radio"] {
  display: none !important;
}

body.co-page #payment .wc_payment_methods > li:only-child > label {
  padding: 14px 18px 9px !important;
}

body.co-page #payment .wc_payment_methods > li:only-child > .payment_box {
  padding: 0 18px 14px !important;
}

/* Ödeme yöntemi ile onay satırı arasındaki gereksiz dikey aralığı azalt. */
body.co-page .co-payment {
  margin-top: 16px;
}

body.co-page #payment div.place-order {
  margin-top: 16px;
}

/* Alt bar ilk ekran görüntüsünde de eksiksiz görünsün. Bazı tema reveal/
   footer stilleri ilk kaydırmaya kadar adım öğelerini görünmez bırakabiliyor. */
body.co-page.co-dock-ready .co-dock {
  position: fixed !important;
  inset: auto 0 0 0 !important;
  height: auto !important;
  min-height: 76px;
  overflow: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: translateZ(0) !important;
  isolation: isolate;
}

body.co-page .co-dock__inner {
  min-height: 76px !important;
  box-sizing: border-box;
  overflow: visible !important;
}

body.co-page .co-dock .co-stepper,
body.co-page .co-dock .co-stepper__item,
body.co-page .co-dock .co-stepper__n,
body.co-page .co-dock .co-stepper__n > span,
body.co-page .co-dock .co-stepper__lbl {
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}

body.co-page .co-dock .co-stepper__item {
  display: flex !important;
  position: relative;
  z-index: 2;
}

body.co-page .co-dock .co-stepper__n {
  display: grid !important;
  border-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.8);
}

body.co-page .co-dock .co-stepper__lbl {
  display: inline-block !important;
  color: rgba(255, 255, 255, 0.72) !important;
}

body.co-page .co-dock .co-stepper__item.is-active .co-stepper__lbl {
  color: #ffffff !important;
}

body.co-page .co-dock .co-stepper__item.is-done .co-stepper__n svg {
  opacity: 1 !important;
}

@media (max-width: 680px) {
  body.co-page .co-dock .co-stepper__lbl {
    display: none !important;
  }
}

body.co-page .woocommerce-terms-and-conditions-wrapper {
  margin-bottom: 10px;
}
@media (max-width: 640px) {
  .products { padding: clamp(90px, 12vh, 130px) 20px; }
  .products__grid { grid-template-columns: 1fr; }
  .product-card__body { padding: 24px 24px 26px; }
}

/* Accessibility: reduced-motion users get no entrance reveal and minimal hover.
   The flagship's static lift is kept (it's not motion), but hover translate/
   scale are disabled. */
@media (prefers-reduced-motion: reduce) {
  .product-card { opacity: 1 !important; }
  .product-card,
  .product-card:hover { transition: none; }
  .product-card:not(.product-card--featured),
  .product-card:not(.product-card--featured):hover { transform: none; }
  .product-card--featured,
  .product-card--featured:hover { transform: translateY(-10px); }
  .product-card:hover .product-card__img,
  .product-card__cta:hover svg { transform: none; }
}
/* ░░░ Showcase · pinned scroll-scrub, black-bg blends with page ░░░ */
.showcase {
  position: relative;
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0 0 90px;
  max-width: none;
  background:
    radial-gradient(circle at 50% 52%, rgba(222, 170, 255, 0.06), transparent 26%),
    radial-gradient(circle at 50% 50%, rgba(255, 164, 208, 0.03), transparent 38%),
    #000;
  overflow: hidden;
}
.showcase::before,
.showcase::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  height: 22vh;
  pointer-events: none;
}
.showcase::before {
  top: 0;
  background: linear-gradient(to bottom, #000, rgba(0, 0, 0, 0));
}
.showcase::after {
  bottom: 0;
  background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
}
/* Stage holds the product video AND the callout overlay; dots/lines are
   positioned relative to THIS box. The source video is SQUARE (1600×1600), so
   the stage is forced square too — the video then FILLS the stage with no
   letterbox, which means % coords on the stage map 1:1 onto the product. */
.showcase__stage {
  position: absolute;
  left: 50%;
  top: calc(50% + 76px);
  height: min(820px, 82vh);
  aspect-ratio: 1 / 1;       /* square box == square video, no padding gaps */
  max-width: 96vw;
  transform: translate(-50%, -50%) translateZ(0);
  z-index: 2;
}
.showcase__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;         /* square video fills the square stage exactly */
  opacity: 0;
  transition: opacity 1s var(--easing);
  will-change: transform, opacity;
  pointer-events: none;
  filter: none;
}
.showcase__video.is-ready { opacity: 1; }

.showcase__glow {
  position: absolute;
  left: 50%;
  top: 56%;
  width: min(920px, 78vw);
  height: min(640px, 60vh);
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
  filter: blur(34px);
  background:
    radial-gradient(circle at 50% 50%, rgba(234, 170, 255, 0.26) 0%, rgba(234, 170, 255, 0.14) 18%, rgba(255, 143, 197, 0.08) 36%, transparent 68%);
  opacity: 0.9;
}

.showcase__intro {
  position: absolute;
  top: clamp(72px, 9vh, 112px);
  left: 50%;
  z-index: 5;
  width: min(620px, 78vw);
  text-align: center;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0.92;
}

.showcase__intro span {
  display: block;
  margin-bottom: 14px;
  color: rgba(255, 255, 255, 0.46);
  font-family: var(--font-main);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
}

.showcase__intro h2 {
  margin: 0;
  color: rgba(255, 255, 255, 0.94);
  font-size: clamp(26px, 3.2vw, 48px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

/* Ortak bölüm etiketi — ürünler, mühendislik vitrini ve iletişim hero'su.
   İçerik ACF'den değişse bile # işareti ve tipografik dil korunur. */
.products__eyebrow,
.showcase__intro > span,
.con-hero .about-kicker {
  display: inline-flex;
  align-items: center;
  width: auto;
  margin-bottom: 18px;
  color: var(--brand-lilac);
  font-family: var(--font-main);
  font-size: clamp(10px, 0.7vw, 12px);
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(var(--brand-rgb), 0.2);
}

.products__eyebrow::before,
.showcase__intro > span::before,
.con-hero .about-kicker::before {
  content: "#";
  flex: none;
  margin-right: 0.42em;
  color: var(--brand-mor);
  font-size: 1.18em;
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: 0;
  text-shadow: 0 0 14px rgba(176, 136, 255, 0.5);
}

/* Callout overlay lives on the (square) stage, but the LABELS are pushed OUT
   past the stage edges into the wide empty space beside the product, so they
   never overlap each other or the product. Each leader runs from the dot on the
   part to the stage edge; the label sits just outside that edge, same height. */
.showcase__callouts {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

/* Leader lines — share the stage's 0..100 coordinate space, so an endpoint and
   its dot land on the exact same product pixel at any size. Each line goes from
   the component dot OUT to the stage edge (x=0 left / x=100 right). */
.showcase__leaders {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
}
.showcase__leader {
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.showcase.has-callouts .showcase__leader {
  opacity: 1;
  stroke-dashoffset: 0;
  transition: opacity 0.3s ease, stroke-dashoffset 0.5s ease 0.1s;
}

/* Component anchor dots — pinned ON the part via % coords. */
.showcase__dot {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  z-index: 5;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
.showcase.has-callouts .showcase__dot {
  opacity: 1;
  transform: scale(1);
}

/* Labels — positioned relative to the stage but pushed OUTSIDE its left/right
   edge into the surrounding space. */
.showcase__callout {
  position: absolute;
  width: clamp(150px, 15vw, 220px);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s var(--easing), transform 0.6s var(--easing);
}
.showcase.has-callouts .showcase__callout {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.15s;
}
.showcase__callout strong {
  display: block;
  color: rgba(255, 255, 255, 0.94);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}
.showcase__callout p {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
}

/* Left labels sit just left of the stage (right-aligned, hugging the edge).
   Right labels sit just right of the stage (left-aligned). The y values line up
   with each leader's outer endpoint (set in the SVG to the same %). */
.showcase__callout--tl { right: calc(100% + 26px); top: 18%;  text-align: right; }
.showcase__callout--bl { right: calc(100% + 26px); top: 66%;  text-align: right; }
.showcase__callout--tr { left:  calc(100% + 26px); top: 22%;  text-align: left; }
.showcase__callout--br { left:  calc(100% + 26px); top: 68%;  text-align: left; }

/* On narrower (but still desktop) screens the stage nearly fills the width, so
   there's little room beside it — tuck labels just inside the stage corners and
   shrink them slightly so they still clear the centred product. */
@media (max-width: 1280px) {
  .showcase__callout { width: clamp(130px, 13vw, 180px); }
  .showcase__callout--tl, .showcase__callout--bl { right: auto; left: 8px; }
  .showcase__callout--tr, .showcase__callout--br { left: auto; right: 8px; }
  .showcase__callout--tl, .showcase__callout--tr { top: 6%; }
  .showcase__callout--bl, .showcase__callout--br { top: 78%; }
}

/* ≤900px: drop leaders/dots; stack labels under the product as a clean list. */
@media (max-width: 900px) {
  .showcase__leaders,
  .showcase__dot { display: none; }

  .showcase__stage {
    height: auto;
    aspect-ratio: auto;
    top: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    width: 92vw;
    max-width: none;
  }
  .showcase__video {
    position: relative;
    width: 100%;
    height: 56vh;
    object-fit: contain;
  }
  .showcase__callouts {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 24px;
    width: 100%;
  }
  .showcase__callout {
    position: relative;
    left: auto; right: auto; top: auto;
    width: auto;
    text-align: left;
    opacity: 1;
    transform: none;
  }
  .showcase__callout p { display: block; }
}
@media (max-width: 540px) {
  .showcase__callouts { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .showcase__leader { opacity: 1; stroke-dashoffset: 0; transition: none; }
  .showcase__dot { opacity: 1; transform: scale(1); transition: none; }
  .showcase__callout { opacity: 1; transform: none; transition: none; }
}
/* ░░░ Marquee ░░░ */
.marquee {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
  overflow: hidden;
  background: var(--bg);
}
.marquee__track {
  display: inline-flex; gap: 32px; align-items: center; white-space: nowrap;
  font-family: var(--font-main);
  font-size: clamp(28px, 4vw, 48px);
  padding-left: 32px;
  will-change: transform;
}
.marquee__track .dotsep { color: var(--titan); font-size: 0.5em; }

/* ░░░ Assembly bridge ░░░ */
.assembly {
  position: relative;
  max-width: none;
  min-height: 78vh;
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(460px, 1.35fr);
  gap: clamp(36px, 8vw, 120px);
  align-items: center;
  padding: 120px clamp(28px, 7vw, 132px);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(120deg, rgba(var(--blueprint-rgb), 0.1), transparent 42%, rgba(var(--titan-glow), 0.08));
  background-size: 96px 96px, 96px 96px, 100% 100%;
}
.assembly::before,
.assembly::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.assembly::before {
  top: 16%;
  bottom: 16%;
  left: 50%;
  width: 1px;
  background: linear-gradient(transparent, rgba(var(--blueprint-rgb), 0.35), transparent);
}
.assembly::after {
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 17%, rgba(var(--titan-glow), 0.14) 17% 17.08%, transparent 17.08% 100%),
    linear-gradient(90deg, transparent 0 72%, rgba(var(--blueprint-rgb), 0.14) 72% 72.08%, transparent 72.08% 100%);
}
.assembly__copy { position: relative; z-index: 1; max-width: 560px; }
.assembly__copy h2 {
  font-size: clamp(40px, 6.2vw, 104px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.035em;
  margin-bottom: 28px;
}
.assembly__copy p {
  color: var(--text-dim);
  max-width: 460px;
  font-size: 16px;
  line-height: 1.7;
}
.assembly__stage {
  position: relative;
  z-index: 1;
  min-height: min(58vw, 600px);
  border-left: 1px solid rgba(var(--blueprint-rgb), 0.22);
  border-right: 1px solid rgba(var(--titan-glow), 0.2);
}
.assembly__axis {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
}
.assembly__axis::before,
.assembly__axis::after {
  content: "";
  position: absolute;
  top: -5px;
  width: 11px;
  height: 11px;
  border: 1px solid var(--titan);
  border-radius: 50%;
}
.assembly__axis::before { left: 0; }
.assembly__axis::after { right: 0; }
.assembly__part {
  position: absolute;
  display: block;
  transform-origin: center;
  filter: drop-shadow(0 20px 50px rgba(0,0,0,0.45));
}
.assembly__part::before,
.assembly__part::after {
  content: "";
  position: absolute;
  inset: 0;
}
.assembly__part--shell {
  width: 32%;
  aspect-ratio: 1.2;
  left: 7%;
  top: 29%;
  border: 1px solid rgba(var(--titan-glow), 0.6);
  border-radius: 46% 54% 58% 42%;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.2), transparent 35%),
    linear-gradient(145deg, #332311, #0b0b0d 70%);
}
.assembly__part--shell::after {
  inset: 22%;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: inherit;
}
.assembly__part--core {
  width: 13%;
  aspect-ratio: 1;
  left: 39%;
  top: 38%;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
  background: radial-gradient(circle at 35% 30%, #fff, var(--accent) 16%, #0c1716 48%, #050606 100%);
}
.assembly__part--driver {
  width: 14%;
  aspect-ratio: 0.75;
  left: 57%;
  top: 34%;
  border: 1px solid rgba(var(--blueprint-rgb), 0.52);
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, rgba(var(--blueprint-rgb), 0.22) 0 2px, transparent 2px 10px), #06080c;
}
.assembly__part--filter {
  width: 9%;
  aspect-ratio: 1;
  left: 73%;
  top: 43%;
  border: 1px solid rgba(var(--titan-glow), 0.65);
  background: repeating-linear-gradient(45deg, rgba(var(--titan-glow), 0.28) 0 1px, transparent 1px 6px), #080705;
  transform: rotate(45deg);
}
.assembly__part--tip {
  width: 15%;
  aspect-ratio: 1.7;
  left: 84%;
  top: 41%;
  border-radius: 999px 45% 45% 999px;
  border: 1px solid rgba(255,255,255,0.3);
  background: linear-gradient(90deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04));
}
.assembly__label {
  position: absolute;
  color: var(--text-dim);
  padding-left: 48px;
}
.assembly__label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 36px;
  height: 1px;
  background: var(--line-strong);
}
.assembly__label--one { left: 10%; top: 18%; }
.assembly__label--two { left: 52%; top: 18%; }
.assembly__label--three { left: 62%; bottom: 16%; }

/* ░░░ Section common ░░░ */
section {
  position: relative;
  padding: 120px 40px;
  max-width: 1480px;
  margin: 0 auto;
}
section:not(.hero):not(.marquee):not(.pillars):not(.assembly):not(.manifesto):not(.third-section):not(.showcase):not(.final-image-section):not(.stacked-panels):not(.pdp-video-section)::before {
  content: "";
  position: absolute;
  inset: 40px;
  z-index: -1;
  pointer-events: none;
  border-left: 1px solid rgba(var(--blueprint-rgb), 0.08);
  border-right: 1px solid rgba(var(--titan-glow), 0.08);
  background:
    linear-gradient(90deg, transparent 0 19%, rgba(255,255,255,0.035) 19% 19.08%, transparent 19.08% 100%),
    linear-gradient(90deg, transparent 0 81%, rgba(255,255,255,0.03) 81% 81.08%, transparent 81.08% 100%);
}
.section__head { margin-bottom: 80px; }
.section__index { display: inline-block; color: var(--text-dim); margin-bottom: 28px; }
.section__title {
  font-size: clamp(34px, 5.5vw, 78px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  max-width: 1100px;
}
@media (max-width: 900px) { section { padding: 80px 20px; } .section__head { margin-bottom: 50px; } }

/* ░░░ Manifesto ░░░ */
.manifesto__text {
  font-size: clamp(26px, 3.4vw, 52px);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.02em;
  max-width: 1280px;
  margin-bottom: 100px;
}
.manifesto__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.kpi {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.03), transparent 30%),
    var(--bg);
  padding: 36px 28px;
  display: flex; flex-direction: column; justify-content: space-between; min-height: 200px;
  position: relative; overflow: hidden;
  border-right: 1px solid var(--line);
  transition: background 0.6s var(--easing), transform 0.6s var(--easing);
}
.kpi:last-child { border-right: 0; }
.kpi:hover { background: var(--bg-soft); transform: translateY(-8px); }
.kpi:hover::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(110deg, transparent 0 28%, rgba(var(--titan-glow), 0.1) 28% 28.3%, transparent 28.3% 100%),
    linear-gradient(80deg, transparent 0 72%, rgba(var(--blueprint-rgb), 0.08) 72% 72.3%, transparent 72.3% 100%);
  pointer-events: none;
}
.kpi__num {
  font-family: var(--font-main); font-size: clamp(56px, 7vw, 96px);
  font-style: normal; line-height: 1; color: var(--titan);
}
.kpi__label { color: var(--text-dim); }
@media (max-width: 900px) { .manifesto__grid { grid-template-columns: repeat(2, 1fr); } }

/* ░░░ Pillars (3 brand pillars under hero) ░░░ */
.pillars {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  background:
    linear-gradient(90deg, rgba(var(--blueprint-rgb), 0.08), transparent 40%, rgba(var(--titan-glow), 0.08));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 0; margin: 0; max-width: none;
}
.pillar {
  background: rgba(6, 6, 7, 0.82); padding: 80px 50px; min-height: 320px;
  display: flex; flex-direction: column; gap: 18px;
  position: relative; overflow: hidden; transition: background 0.5s, clip-path 0.6s var(--easing);
  border-right: 1px solid var(--line);
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
}
.pillar:last-child { border-right: 0; }
.pillar::before {
  content: "";
  position: absolute;
  inset: 20px;
  border: 1px solid rgba(255,255,255,0.055);
  opacity: 0;
  transition: opacity 0.5s var(--easing), transform 0.5s var(--easing);
}
.pillar:hover { background: var(--bg-soft); clip-path: polygon(0 0, 100% 0, 100% 100%, 26px 100%, 0 calc(100% - 26px)); }
.pillar:hover::before { opacity: 1; transform: translate(8px, -8px); }
.pillar__id { color: var(--titan); }
.pillar h3 {
  font-family: var(--font-main); font-style: normal;
  font-size: clamp(34px, 3.8vw, 54px); font-weight: 400; line-height: 1.05;
  letter-spacing: -0.02em; margin-top: 12px;
}
.pillar p { color: var(--text-dim); font-size: 15px; line-height: 1.6; max-width: 380px; }
@media (max-width: 900px) { .pillars { grid-template-columns: 1fr; } .pillar { padding: 50px 24px; min-height: auto; } }

/* ░░░ Section sub-heading (within sections) ░░░ */
.section__sub {
  display: flex; align-items: baseline; gap: 24px;
  margin: 100px 0 40px;
  flex-wrap: wrap;
}
.section__sub .mono { color: var(--titan); }
.section__subtitle {
  font-family: var(--font-main); font-style: normal;
  font-size: clamp(28px, 3.4vw, 44px); font-weight: 400;
  letter-spacing: -0.02em;
}

/* ░░░ Products ░░░ */
.cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.cards--lg {
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: 28px;
  align-items: start;
}
.cards--lg .card:nth-child(2) { margin-top: 84px; }
@media (max-width: 900px) { .cards--lg { grid-template-columns: 1fr; } }
.card {
  position: relative; overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.035), transparent 42%),
    var(--bg-card);
  display: flex; flex-direction: column;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  transition: transform 0.6s var(--easing), border-color 0.4s, background 0.4s, clip-path 0.6s var(--easing);
}
.card::before,
.card::after {
  content: "";
  position: absolute;
  z-index: 3;
  pointer-events: none;
  background: var(--titan);
  opacity: 0.58;
}
.card::before { top: 18px; right: 18px; width: 42px; height: 1px; }
.card::after { top: 18px; right: 18px; width: 1px; height: 42px; }
.card:hover {
  border-color: var(--line-strong);
  background:
    linear-gradient(135deg, rgba(var(--blueprint-rgb), 0.06), transparent 42%),
    #131318;
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}
.card__media {
  height: 320px; position: relative;
  isolation: isolate;
  background:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(135deg, #1a1a1d, #050505 70%);
  background-size: 42px 42px, 42px 42px, 100% 100%;
  overflow: hidden;
}
.card__media--titan {
  background:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(135deg, #3a2a14, #0a0808 70%);
  background-size: 42px 42px, 42px 42px, 100% 100%;
}
.card__media--polymer {
  background:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(135deg, #102b33, #050a10 70%);
  background-size: 42px 42px, 42px 42px, 100% 100%;
}
.card__media--gaming {
  background:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(135deg, #2a1235, #0a050f 70%);
  background-size: 42px 42px, 42px 42px, 100% 100%;
}
.card__media--sport {
  background:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(135deg, #1a3525, #050f08 70%);
  background-size: 42px 42px, 42px 42px, 100% 100%;
}
.card__media--ppe {
  background:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(135deg, #352010, #0f0805 70%);
  background-size: 42px 42px, 42px 42px, 100% 100%;
}
.card__glow {
  position: absolute; inset: 0;
  z-index: 0;
  background:
    linear-gradient(110deg, transparent 0 20%, rgba(var(--titan-glow), 0.18) 20% 20.5%, transparent 20.5% 100%),
    linear-gradient(80deg, transparent 0 66%, rgba(var(--blueprint-rgb), 0.18) 66% 66.4%, transparent 66.4% 100%);
  opacity: 0.75;
  transition: opacity 0.6s, transform 0.8s var(--easing);
}
.card:hover .card__glow { opacity: 1; transform: translateX(12px); }
.card__media::before {
  content: ""; position: absolute; inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, transparent 0 49.9%, rgba(255,255,255,0.14) 49.9% 50.1%, transparent 50.1%),
    linear-gradient(0deg, transparent 0 49.9%, rgba(255,255,255,0.1) 49.9% 50.1%, transparent 50.1%);
  mix-blend-mode: screen;
  opacity: 0.45;
  transition: transform 1s var(--easing);
}
.card:hover .card__media::before { transform: scale(1.06) translateY(-5px); }
.card__media::after {
  content: ""; position: absolute; inset: 0;
  z-index: 0;
  background: linear-gradient(to top, var(--bg-card) 0%, transparent 50%);
}
.card__device {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.card__device::before {
  content: "";
  position: absolute;
  left: 11%;
  right: 11%;
  top: 53%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.36), transparent);
}
.device__part {
  position: absolute;
  display: block;
  border: 1px solid rgba(255,255,255,0.2);
  transform-origin: center;
  transition: transform 0.8s var(--easing), border-color 0.5s var(--easing);
}
.device__part--shell {
  width: 33%;
  aspect-ratio: 1.16;
  left: 16%;
  top: 33%;
  border-radius: 46% 54% 58% 42%;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.2), transparent 34%),
    linear-gradient(145deg, rgba(var(--titan-glow), 0.42), rgba(0,0,0,0.2) 72%);
}
.device__part--shell::after {
  content: "";
  position: absolute;
  inset: 23%;
  border: 1px solid rgba(0,0,0,0.35);
  border-radius: inherit;
}
.device__part--driver {
  width: 12%;
  aspect-ratio: 0.8;
  left: 51%;
  top: 39%;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.24) 0 1px, transparent 1px 6px), rgba(0,0,0,0.45);
}
.device__part--core {
  width: 10%;
  aspect-ratio: 1;
  left: 65%;
  top: 44%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--accent), #061716 55%, #020303);
}
.device__part--nozzle {
  width: 12%;
  height: 11%;
  left: 75%;
  top: 47%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0.08), rgba(var(--blueprint-rgb), 0.2));
}
.device__part--tip {
  width: 15%;
  height: 16%;
  left: 86%;
  top: 44.5%;
  border-radius: 999px 46% 46% 999px;
  background: rgba(255,255,255,0.1);
}
.device__wave {
  position: absolute;
  left: 49%;
  top: 33%;
  width: 34%;
  height: 36%;
  border: 1px solid rgba(var(--blueprint-rgb), 0.35);
  border-left: 0;
  border-radius: 0 999px 999px 0;
}
.device__wave::before,
.device__wave::after {
  content: "";
  position: absolute;
  inset: 18%;
  border: 1px solid rgba(var(--blueprint-rgb), 0.25);
  border-left: 0;
  border-radius: inherit;
}
.device__wave::after { inset: 36%; }
.card:hover .device__part { border-color: rgba(255,255,255,0.34); }
.card:hover .device__part--shell { transform: translateX(-18px) rotate(-5deg); }
.card:hover .device__part--driver { transform: translateX(8px) translateY(-14px); }
.card:hover .device__part--core { transform: translateX(16px) translateY(12px); }
.card:hover .device__part--nozzle { transform: translateX(24px); }
.card:hover .device__part--tip { transform: translateX(34px) scaleX(1.08); }
.card__device--polymer .device__part--shell {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.22), transparent 34%),
    linear-gradient(145deg, rgba(var(--blueprint-rgb), 0.34), rgba(0,0,0,0.2) 72%);
}
.card__device--compact .device__part--shell {
  width: 26%;
  left: 22%;
}
.card__device--compact .device__part--driver {
  left: 49%;
}
.card__device--compact .device__part--nozzle {
  left: 61%;
  width: 17%;
}
.card__tag {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  color: var(--text);
}
.card__price {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  padding: 6px 12px;
  border: 1px solid rgba(var(--titan-glow), 0.4);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  color: var(--titan-2);
  font-size: 12px;
}

/* ░░░ Specs table inside product cards ░░░ */
.specs {
  display: grid; gap: 0;
  padding-top: 18px; margin-top: 4px;
  border-top: 1px solid var(--line);
}
.specs > div {
  display: grid; grid-template-columns: 110px 1fr; gap: 18px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 11.5px;
}
.specs > div:last-child { border-bottom: 0; }
.specs > div > span:first-child { color: var(--text-faint); letter-spacing: 0.14em; }
.specs > div > span:last-child { color: var(--text); letter-spacing: 0.04em; }

/* ░░░ Process highlight email ░░░ */
.hl { color: var(--titan-2); border-bottom: 1px dashed rgba(var(--titan-glow), 0.5); padding-bottom: 1px; }
.card__body {
  padding: 28px; display: flex; flex-direction: column; gap: 14px;
  flex: 1;
}
.card__body h3 {
  font-family: var(--font-main);
  font-size: 26px; font-weight: 500; letter-spacing: -0.02em;
}
.card__body p { color: var(--text-dim); font-size: 14.5px; line-height: 1.55; flex: 1; }
.card__meta {
  display: flex; gap: 16px; color: var(--text-faint); flex-wrap: wrap;
  padding-top: 14px; border-top: 1px solid var(--line);
}

.card--cta {
  background: linear-gradient(150deg, #1c1408 0%, #0a0a0c 70%);
  border-color: rgba(var(--titan-glow), 0.25);
}
.card--cta .card__body { justify-content: center; min-height: 360px; }
.card--cta h3 {
  font-family: var(--font-main); font-style: normal; font-size: 36px; font-weight: 400;
  line-height: 1.05; color: var(--titan-2);
}

@media (max-width: 1100px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .cards { grid-template-columns: 1fr; } }

/* ░░░ Buttons ░░░ */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 22px;
  border: 1px solid var(--titan);
  border-radius: 999px;
  background: var(--titan);
  color: var(--bg);
  font-size: 14px; font-weight: 500;
  transition: all 0.4s var(--easing);
  width: fit-content;
}
.btn:hover { background: var(--titan-2); border-color: var(--titan-2); }
.btn:hover svg { transform: translateX(4px); }
.btn svg { transition: transform 0.4s var(--easing); }
.btn--lg { padding: 18px 28px; font-size: 15px; }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--text); color: var(--bg); border-color: var(--text); }

/* ░░░ Tech ░░░ */
.tech__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  background: var(--line);
}
.tech__item {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.026), transparent 45%),
    var(--bg);
  padding: 44px 36px; min-height: 280px;
  display: flex; flex-direction: column; gap: 14px;
  position: relative; overflow: hidden;
  transition: background 0.5s;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.tech__item:hover { background: var(--bg-soft); }
.tech__item::before {
  content: ""; position: absolute; top: 0; left: -1px; width: 1px; height: 0;
  background: var(--titan);
  transition: height 0.6s var(--easing);
}
.tech__item:hover::before { height: 100%; }
.tech__item::after {
  content: "";
  position: absolute;
  right: 24px;
  bottom: 24px;
  width: 46px;
  height: 46px;
  border-right: 1px solid rgba(var(--blueprint-rgb), 0.26);
  border-bottom: 1px solid rgba(var(--blueprint-rgb), 0.26);
  opacity: 0.5;
}
.tech__id { color: var(--titan); }
.tech__item h3 {
  font-family: var(--font-main);
  font-size: 28px; font-weight: 400; letter-spacing: -0.02em;
  margin-top: 8px;
}
.tech__item p { color: var(--text-dim); font-size: 14.5px; line-height: 1.6; }
@media (max-width: 1100px) { .tech__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .tech__grid { grid-template-columns: 1fr; } }

/* ░░░ Process ░░░ */
.steps {
  list-style: none;
  display: grid; grid-template-columns: 1fr; gap: 0;
  border-top: 1px solid var(--line);
  position: relative;
}
.steps::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 60px;
  width: 1px;
  background: linear-gradient(var(--titan), rgba(var(--blueprint-rgb), 0.42), transparent);
}
.steps::after {
  content: "";
  position: absolute;
  left: 53px;
  top: var(--process-progress, 0%);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 28px rgba(110, 255, 208, 0.55);
  transform: translateY(-50%);
}
.step {
  display: grid;
  grid-template-columns: 120px 320px 1fr;
  gap: 60px;
  padding: 44px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
  transition: padding 0.5s var(--easing);
  position: relative;
}
.step:hover { padding-left: 20px; padding-right: 20px; }
.step__num { color: var(--titan); }
.step h4 {
  font-family: var(--font-main);
  font-size: clamp(28px, 3.4vw, 44px);
  font-style: normal;
  font-weight: 400;
}
.step p { color: var(--text-dim); font-size: 16px; line-height: 1.6; max-width: 540px; }
@media (max-width: 900px) {
  .step { grid-template-columns: 1fr; gap: 14px; padding: 32px 0; }
}

/* ░░░ CTA ░░░ */
.cta {
  text-align: center;
  padding: 160px 40px;
  position: relative;
  max-width: none;
  overflow: hidden;
}
.cta::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, transparent 0 22%, rgba(var(--titan-glow), 0.12) 22% 22.12%, transparent 22.12% 100%),
    linear-gradient(90deg, transparent 0 78%, rgba(var(--blueprint-rgb), 0.12) 78% 78.12%, transparent 78.12% 100%),
    linear-gradient(180deg, transparent, rgba(var(--titan-glow), 0.08), transparent);
  pointer-events: none;
}
.cta__inner { position: relative; max-width: 900px; margin: 0 auto; }
.cta__eyebrow { color: var(--titan); margin-bottom: 32px; display: block; }
.cta__title {
  font-size: clamp(48px, 9vw, 132px);
  font-weight: 400; line-height: 0.95;
  letter-spacing: -0.03em;
  margin-bottom: 28px;
}
.cta__inner p { color: var(--text-dim); font-size: 17px; max-width: 560px; margin: 0 auto 40px; }
.cta__row { display: inline-flex; gap: 16px; flex-wrap: wrap; justify-content: center; }

/* ░░░ Footer ░░░ */
.footer {
  position: relative;
  border-top: 1px solid var(--line);
  /* yanlar nav ile aynı hizada — içerik header genişliğinde */
  padding: 88px clamp(56px, 7vw, 132px) 42px;
  width: 100%;
  overflow: hidden;
  background: var(--bg);
}
.footer__top {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  padding-bottom: 76px;
  overflow: hidden;
  max-width: none;
  margin: 0;
  width: 100%;
}
.footer__intro {
  max-width: 1100px;
  width: 100%;
}
.footer__eyebrow {
  display: inline-flex;
  margin-bottom: 24px;
  color: var(--titan);
}
.footer__headline {
  font-family: var(--font-main);
  font-size: clamp(48px, 8.5vw, 112px);
  line-height: 0.92;
  font-weight: 300;
  letter-spacing: -0.04em;
  color: #ffffff;
  margin-bottom: 28px;
}
.footer__headline-accent {
  font-weight: 600;
  background: var(--text-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.footer__lead {
  margin-top: 18px;
  max-width: 640px;
  color: rgba(255, 255, 255, 0.45);
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1.6;
  margin-bottom: 42px;
}
.footer__cta-wrapper {
  display: flex;
  margin-top: 12px;
}
.footer__main-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 42px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.02);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  overflow: hidden;
  transition: all 0.45s var(--easing);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 20px 40px rgba(0, 0, 0, 0.2);
}
.footer__main-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--text-gradient);
  opacity: 0;
  z-index: 0;
  transition: opacity 0.45s var(--easing);
}
.footer__main-cta span,
.footer__main-cta svg {
  position: relative;
  z-index: 1;
  transition: transform 0.45s var(--easing), color 0.45s var(--easing);
}
.footer__main-cta:hover {
  border-color: transparent;
  box-shadow: 
    0 0 32px rgba(227, 191, 255, 0.25),
    0 12px 36px rgba(0, 0, 0, 0.45);
  transform: scale(1.025) translateY(-3px);
}
.footer__main-cta:hover::before {
  opacity: 1;
}
.footer__main-cta:hover span {
  color: #000000;
}
.footer__main-cta:hover svg {
  color: #000000;
  transform: translateX(6px) scale(1.1);
}
.footer__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 88px;
  padding: 76px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  max-width: none;
  margin: 0;
  width: 100%;
}
.footer__brand-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.footer__brand-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer__small-logo {
  height: 28px;
  width: auto;
  opacity: 0.95;
}
.footer__brand-tagline {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.7;
  max-width: 32ch;
}
.footer__links-section {
  display: grid;
  /* üç menü tek satırda: KEŞFET · YASAL · İLETİŞİM (en sağda) */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px;
}
.footer__column {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.footer__label {
  display: block;
  color: rgba(255, 255, 255, 0.35);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.footer__status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}
.footer__status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
  animation: statusPulse 2.4s infinite ease-in-out;
}
.footer__status-text {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.05em;
  font-weight: 500;
}
@keyframes statusPulse {
  0%, 100% { opacity: 0.5; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.1); }
}
.footer__links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0;
  margin: 0;
}
.footer__links a {
  position: relative;
  font-size: 15px;
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.35s var(--easing);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
}
.footer__links a::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--titan);
  transition: width 0.35s var(--easing);
}
.footer__links a:hover {
  color: #ffffff;
}
.footer__links a:hover::after {
  width: 100%;
}
.footer__link-highlight {
  color: var(--titan) !important;
  font-weight: 500;
}
.footer__link-highlight svg {
  transition: transform 0.35s var(--easing);
}
.footer__link-highlight:hover svg {
  transform: translate(2px, -2px);
}
.footer__bottom {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32px 0 0;
  color: var(--text-faint);
  font-size: 13px;
  max-width: none;
  margin: 0;
  width: 100%;
}
.footer__bottom-left {
  display: flex;
  align-items: center;
}
.footer__bottom-right {
  display: flex;
  align-items: center;
}

/* ── Ajans360 marka rozeti (footer sağ alt) ──
   combine.css'ten taşındı — o dosya enqueue edilmiyor (içindeki açık tema
   resetleri EarFit karanlık temasını bozar). Hover'da kart çevrilir. */
.a360-icon { width: 100px; height: 22px; position: relative; letter-spacing: 0; text-align: left; margin: 0; }
.a360-icon * { box-sizing: border-box; }
.a360-icon .a360-icon-link { text-indent: -99999px; display: block; width: 100%; height: 100%; position: absolute; z-index: 1; }
.a360-icon .tooltip360-a360-icon { display: block; position: relative; z-index: 999; }
.a360-icon .tooltip360-a360-icon .tooltip360-a360-icon-content {
  position: absolute; z-index: 9999; width: 140px; left: 50%; bottom: 100%;
  font-size: 14px; line-height: 1.4; text-align: center; font-weight: 400; color: #fff;
  background: 0 0; opacity: 0; margin: 0 0 10px -70px; cursor: default; pointer-events: none;
  font-family: var(--font-main); -webkit-font-smoothing: antialiased;
  transition: opacity 0.3s 0.3s;
}
.a360-icon .tooltip360-a360-icon .tooltip360-a360-icon-content span { display: block; }
.a360-icon .tooltip360-a360-icon .tooltip360-a360-icon-content .tooltip360-a360-icon-text {
  border-bottom: 2px solid #fffaf0; overflow: hidden;
  transform: scale3d(0, 1, 1); transition: transform 0.3s 0.3s;
}
.a360-icon .tooltip360-a360-icon .tooltip360-a360-icon-content .tooltip360-a360-icon-text .tooltip360-a360-icon-inner {
  background: rgba(0, 0, 0, 0.6); padding: 10px;
  transform: translate3d(0, 100%, 0); transition: transform 0.3s;
}
.a360-icon .a360-icon-card-container { width: 100%; height: 100%; position: relative; perspective: 100px; }
.a360-icon .a360-icon-card-container figure {
  display: block; height: 100%; width: 100%; position: absolute; padding: 0 8px; margin: 0;
  backface-visibility: hidden; transition: transform 0.4s; transform-style: preserve-3d;
}
.a360-icon .a360-icon-card-container figure > div { background-position: center; background-repeat: no-repeat; background-size: contain; height: 100%; width: 100%; }
.a360-icon .a360-icon-card-container .a360-icon-back { transform: rotateY(180deg); }
.a360-icon .a360-icon-card-container .a360-icon-front > div { background-image: url(../img/tmp/360-original.svg); }
.a360-icon .a360-icon-card-container .a360-icon-back > div { background-image: url(../img/tmp/url-back.svg); }
.a360-icon.a360-front-white .a360-icon-card-container .a360-icon-front > div { background-image: url(../img/tmp/360-white.svg); }
.a360-icon.a360-front-black .a360-icon-card-container .a360-icon-front > div { background-image: url(../img/tmp/360-black.svg); }
.a360-icon.a360-back-black .a360-icon-card-container .a360-icon-back > div { background-image: url(../img/tmp/url-back-black.svg); }
.a360-icon:hover .tooltip360-a360-icon .tooltip360-a360-icon-content { transition-delay: 0s; opacity: 1; pointer-events: auto; }
.a360-icon:hover .tooltip360-a360-icon .tooltip360-a360-icon-content .tooltip360-a360-icon-text { transform: scale3d(1, 1, 1); transition-delay: 0s; }
.a360-icon:hover .tooltip360-a360-icon .tooltip360-a360-icon-content .tooltip360-a360-icon-text .tooltip360-a360-icon-inner { transform: translate3d(0, 0, 0); transition-delay: 0.3s; }
.a360-icon:hover .a360-icon-card-container .a360-icon-front { transform: rotateY(180deg); }
.a360-icon:hover .a360-icon-card-container .a360-icon-back { transform: rotateY(360deg); }
@media (max-width: 980px) {
  .footer {
    padding: 72px 20px 32px;
  }
  .footer__top {
    gap: 32px;
    padding-bottom: 56px;
  }
  .footer__headline {
    max-width: 100%;
  }
  .footer__grid {
    grid-template-columns: 1fr;
    gap: 56px;
    padding: 56px 0;
  }
  .footer__links-section {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
}
@media (max-width: 640px) {
  .footer__headline {
    font-size: clamp(34px, 10vw, 56px);
    letter-spacing: -0.03em;
  }
  .footer__lead {
    font-size: 15px;
    line-height: 1.65;
    margin-bottom: 32px;
  }
  .footer__main-cta {
    padding: 15px 32px;
    font-size: 15px;
  }
  .footer__grid {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 40px 0;
  }
  .footer__links-section {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding-top: 24px;
  }
}

@media (max-width: 1100px) {
  .assembly {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .assembly__stage {
    min-height: 460px;
  }
  .cards--lg .card:nth-child(2) { margin-top: 0; }
}

@media (max-width: 700px) {
  .assembly {
    padding: 88px 20px;
  }
  .assembly__stage {
    min-height: 340px;
  }
  .assembly__label {
    display: none;
  }
  .steps::before {
    left: 8px;
  }
  .steps::after {
    left: 1px;
  }
}

/* ░░░ Reveal animations ░░░ */
.reveal-text .word-wrap { overflow: hidden; display: inline-block; vertical-align: bottom; }
.reveal-text .word-inner { display: inline-block; transform: translateY(110%); }
.is-revealed .word-inner { transform: translateY(0); }

/* ░░░ Final Image ░░░ */
.final-image-section {
  position: relative;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  max-width: none;
  background: #000;
  overflow: hidden;
  isolation: isolate;
  z-index: 5;
}

.final-image__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url('https://earfit.com.tr/dacegug/2026/08/gitar_sound.webp') center center / cover no-repeat;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0px) saturate(1) brightness(0.96);
  will-change: transform, filter;
}

.final-image-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.98) 7%, rgba(0, 0, 0, 0.74) 16%, rgba(0, 0, 0, 0.3) 28%, transparent 40%, transparent 72%, rgba(0, 0, 0, 0.68) 100%),
    radial-gradient(circle at 50% 52%, rgba(227, 191, 255, 0.035), transparent 42%);
}

.final-image__copy {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  pointer-events: none;
}

.final-image__title {
  color: #fff;
  font-family: var(--font-main);
  font-size: clamp(38px, 4.25vw, 76px);
  font-weight: 450;
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
  max-width: min(1120px, 88vw);
  text-shadow:
    0 3px 22px rgba(0, 0, 0, 0.78),
    0 0 1px rgba(255, 255, 255, 0.45);
}

/* Yalnız ACF'den gelen ana parçaları animasyon kutusu yap. Önceki geniş
   `span` seçicisi vurgu kelimelerini de blok yaparak her kelimeyi gereksiz
   biçimde ayrı satıra düşürüyordu. */
.final-image__title > span {
  display: inline-block;
  margin-right: 0.16em;
}

.final-image__title > span:last-child {
  margin-right: 0;
}

.final-image__accent {
  color: #d1a8ff;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: #d1a8ff;
  text-shadow: 0 3px 22px rgba(0, 0, 0, 0.78), 0 0 18px rgba(191, 132, 255, 0.18);
  /* Safari/Chrome'da altı kesilen 'ğ', 'y' gibi harfler için düzeltme */
  padding-bottom: 0.15em;
  display: inline-block;
  margin-bottom: -0.15em;
}

@media (max-width: 900px) {
  .final-image__copy {
    padding: 20px;
  }

  .final-image__title {
    font-size: clamp(28px, 8vw, 44px);
    line-height: 1.12;
    max-width: 92vw;
  }

  .final-image__title > span { margin-right: 0.12em; }
}

/* ░░░ Stacked Panels ░░░ */
.stacked-panels {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: #000;
  z-index: 10;
}

.stacked-panels__intro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 84vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(110px, 14vw, 220px) clamp(24px, 7vw, 120px) clamp(80px, 10vw, 150px);
}

.stacked-panels__intro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("../earfit/arka-plan.png") center center / cover no-repeat;
  filter: brightness(1.45) saturate(1.14);
  opacity: 0.78;
  transform: scale(1.015);
}

.stacked-panels__intro::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.54) 38%, rgba(0, 0, 0, 0.18) 72%, rgba(0, 0, 0, 0.38) 100%),
    linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.14) 24%, rgba(0, 0, 0, 0.1) 64%, #000 100%);
}

.stacked-panels__title {
  max-width: 900px;
  margin: 0;
  color: #fff;
  font-family: var(--font-main);
  font-size: clamp(34px, 5vw, 76px); /* Boyutu biraz daha dengeli hale getirelim */
  font-weight: 300; /* Daha ince ve zarif bir temel ağırlık */
  line-height: 1.15; /* Daha havadar bir satır arası */
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.stacked-panels__accent {
  display: inline-block;
  font-weight: 600; /* Vurgulu kelimeler daha dolgun */
  background: linear-gradient(135deg, var(--brand-mor) 0%, var(--titan) 50%, #fff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: 0.18em;
  margin-bottom: -0.18em;
  line-height: normal;
  filter: drop-shadow(0 0 15px rgba(227, 191, 255, 0.15)); /* Hafif bir ışıltı */
}

.stacked-panels__text {
  max-width: 640px;
  margin: 24px 0 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: clamp(15px, 1.1vw, 19px);
  line-height: 1.6;
  letter-spacing: -0.01em;
  font-weight: 300;
}

/* ── 3D deste sahnesi (boilerlab.ai tarzı) ──
   Deck GSAP ile pinlenir; kartlar sahnede mutlak konumlanır. Aktif kart
   ortadadır; scroll ile yeni kart alttan yükselir, önceki translateZ ile
   derinliğe çekilip kararır — perspektif sayesinde arkada küçülmüş bir
   "deste" görünümü oluşur. */
.stacked-panels__deck {
  position: relative;
  height: 100vh;
  overflow: hidden;
  perspective: 1400px;
  transform-style: preserve-3d;
}

.stacked-panel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* yanlar nav ile aynı hizada — kart header genişliğinde */
  padding: clamp(16px, 3vh, 40px) clamp(56px, 7vw, 132px);
  transform-style: preserve-3d;
  will-change: transform;
  background: transparent;
  border-top: 0;
}

.stacked-panel__inner {
  position: relative;
  width: 100%;
  height: min(84vh, 900px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  max-width: 100%;
  margin: 0;
  padding: 0;
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: clamp(20px, 2vw, 32px);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55);
  transform-origin: center center;
  will-change: transform, filter, opacity;
  backface-visibility: hidden;
}

.stacked-panel__inner::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(110deg, rgba(255, 255, 255, 0.13), transparent 28%, transparent 72%, rgba(255, 255, 255, 0.08)),
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.24) 100%);
  opacity: 0.8;
}

.stacked-panel__inner::after {
  content: "";
  position: absolute;
  width: 42vw;
  height: 42vw;
  left: -18vw;
  bottom: -25vw;
  pointer-events: none;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(var(--titan-glow), 0.16), transparent 66%);
  filter: blur(18px);
}

.stacked-panel__visual {
  position: relative;
  z-index: 1;
  width: 100%;
  height: clamp(300px, 60vh, 600px);
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.36);
  font-family: var(--font-main);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: clamp(24px, 2.2vw, 40px);
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.12), transparent 28%),
    linear-gradient(150deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.018) 48%, rgba(255, 255, 255, 0.055)),
    rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -44px 80px rgba(0, 0, 0, 0.35),
    0 24px 80px rgba(0, 0, 0, 0.38);
}

.stacked-panel__visual::before {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(236, 216, 255, 0.32), rgba(176, 136, 255, 0.12) 42%, transparent 68%);
  filter: blur(24px);
  opacity: 0.72;
}

.stacked-panel__visual::after {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: calc(clamp(24px, 2.2vw, 40px) - 10px);
  border: 1px solid rgba(255, 255, 255, 0.055);
  pointer-events: none;
}

.stacked-panel__visual--photo {
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: #050506;
  box-shadow: none;
}

.stacked-panel__visual--photo::before {
  inset: 0;
  z-index: 1;
  border-radius: 0;
  background:
    radial-gradient(circle at 52% 44%, rgba(215, 190, 255, 0.16), transparent 34%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.46) 100%);
  filter: none;
  opacity: 1;
}

.stacked-panel__visual--photo::after {
  inset: 0;
  z-index: 2;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), transparent 34%, rgba(0, 0, 0, 0.28)),
    linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.24) 72%, rgba(0, 0, 0, 0.58) 100%);
}

.stacked-panel__visual--photo-right::before {
  background:
    radial-gradient(circle at 48% 44%, rgba(215, 190, 255, 0.16), transparent 34%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.1) 100%);
}

.stacked-panel__visual--photo-right::after {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), transparent 34%, rgba(0, 0, 0, 0.28)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.2) 28%, transparent 100%);
}

.stacked-panel__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.9) contrast(1.05) saturate(1.05);
  transform: scale(1.01);
}

.stacked-panel__orb {
  position: absolute;
  width: min(34vw, 440px);
  aspect-ratio: 1;
  border-radius: 999px;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.9), rgba(214, 191, 255, 0.42) 18%, rgba(70, 62, 77, 0.36) 48%, rgba(0, 0, 0, 0.2) 72%),
    #1a171d;
  box-shadow:
    inset -34px -46px 80px rgba(0, 0, 0, 0.6),
    inset 18px 18px 42px rgba(255, 255, 255, 0.12),
    0 42px 100px rgba(0, 0, 0, 0.56);
  transform: rotate(-16deg);
}

.stacked-panel__device {
  position: relative;
  width: min(26vw, 340px);
  aspect-ratio: 1.34;
  border-radius: 46% 54% 48% 52% / 50% 46% 54% 50%;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(92, 82, 98, 0.62) 18%, rgba(26, 24, 29, 0.96) 52%, rgba(178, 154, 198, 0.55)),
    #201d23;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    inset 0 0 0 10px rgba(0, 0, 0, 0.2),
    inset -24px -28px 60px rgba(0, 0, 0, 0.56),
    0 32px 70px rgba(0, 0, 0, 0.56);
  transform: rotate(-12deg) translateY(8px);
}

.stacked-panel__device::before,
.stacked-panel__device::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: inset 0 0 0 4px rgba(0, 0, 0, 0.34);
}

.stacked-panel__device::before {
  width: 18%;
  aspect-ratio: 1;
  right: 17%;
  top: 18%;
}

.stacked-panel__device::after {
  width: 13%;
  aspect-ratio: 1;
  right: 34%;
  bottom: 20%;
}

.stacked-panel__visual-label {
  position: absolute;
  left: clamp(22px, 3vw, 42px);
  bottom: clamp(20px, 3vw, 40px);
  z-index: 3;
  color: rgba(255, 255, 255, 0.46);
}

.stacked-panel__content {
  position: relative;
  z-index: 1;
  align-self: center; /* kart içinde dikey ortala (grid: stretch) */
  max-width: 720px;
  padding: 0 clamp(40px, 8vw, 120px); /* İçerik için güvenli boşluk */
}

.stacked-panel__title {
  font-family: var(--font-main);
  font-size: clamp(42px, 5.6vw, 92px);
  font-weight: 500;
  color: #fff;
  margin-bottom: 28px;
  line-height: 0.94;
  letter-spacing: -0.034em;
  text-wrap: balance;
}

.stacked-panel__text {
  font-size: clamp(17px, 1.3vw, 21px);
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 42px;
  max-width: 560px;
}

.stacked-panel__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 28px;
  background: #fff;
  color: #000;
  border-radius: 100px;
  font-weight: 700;
  text-decoration: none;
  font-size: 15px;
  box-shadow: 0 18px 45px rgba(255, 255, 255, 0.12);
  transition: transform 0.35s var(--easing), box-shadow 0.35s, background 0.35s;
}

.stacked-panel__btn:hover {
  transform: translateY(-4px);
  background: rgba(236, 216, 255, 0.96);
  box-shadow: 0 22px 60px rgba(var(--titan-glow), 0.22);
}

/* Card Background Colors (Dark Theme variations)
   NOT: Deck modunda panel şeffaf sahnedir; zemin renkleri KARTA (inner) uygulanır. */
.stacked-panel--one .stacked-panel__inner { background: #050506; }
.stacked-panel--two .stacked-panel__inner { background: #020203; }
.stacked-panel--three .stacked-panel__inner { background: #050506; }
.stacked-panel--four .stacked-panel__inner { background: #070909; }

.stacked-panel--two .stacked-panel__inner {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.022) 42%, rgba(255, 255, 255, 0.05)),
    radial-gradient(circle at 22% 24%, rgba(148, 190, 255, 0.13), transparent 36%),
    radial-gradient(circle at 86% 72%, rgba(var(--titan-glow), 0.12), transparent 38%),
    #08090c;
}

.stacked-panel--three .stacked-panel__inner {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.078), rgba(255, 255, 255, 0.024) 42%, rgba(255, 255, 255, 0.05)),
    radial-gradient(circle at 24% 22%, rgba(255, 202, 158, 0.12), transparent 36%),
    radial-gradient(circle at 84% 70%, rgba(207, 170, 255, 0.13), transparent 38%),
    #090807;
}

.stacked-panel--four .stacked-panel__inner {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.078), rgba(255, 255, 255, 0.024) 42%, rgba(255, 255, 255, 0.052)),
    radial-gradient(circle at 20% 22%, rgba(176, 255, 224, 0.1), transparent 35%),
    radial-gradient(circle at 84% 72%, rgba(var(--titan-glow), 0.13), transparent 38%),
    #070909;
}

@media (max-width: 900px) {
  .stacked-panels__intro {
    min-height: 76vh;
    padding: 96px 22px 64px;
  }

  .stacked-panels__title {
    font-size: clamp(32px, 11vw, 52px);
    letter-spacing: -0.025em;
  }

  .stacked-panels__text {
    margin-top: 24px;
    font-size: 16px;
  }

  /* Mobil: deste animasyonu yok — kartlar normal akışta alt alta */
  .stacked-panels__deck {
    height: auto;
    overflow: visible;
    perspective: none;
  }

  .stacked-panel {
    position: relative;
    inset: auto;
    padding: 12px 16px;
  }

  .stacked-panel__inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    height: auto;
    min-height: 0;
    gap: 28px;
    padding: 22px;
    align-content: center;
    border-radius: 20px;
  }
  
  .stacked-panel__visual {
    min-height: 280px;
    height: 36vh;
  }

  .stacked-panel__orb {
    width: min(70vw, 320px);
  }

  .stacked-panel__device {
    width: min(54vw, 260px);
  }
  
  .stacked-panel__content {
    padding-right: 0;
  }

  .stacked-panel__title {
    font-size: clamp(38px, 12vw, 58px);
    letter-spacing: -0.025em;
  }

  .stacked-panel__text {
    font-size: 16px;
  }
}

/* ░░░ About Page ░░░ */
.about-page section::before {
  display: none !important;
}

.about-page,
.about-page * {
  letter-spacing: 0;
}

.nav__links a[aria-current="page"] {
  color: var(--text);
}

.about-main {
  background:
    linear-gradient(180deg, #000 0%, #070707 42%, #000 100%);
}

.about-hero {
  min-height: 92vh;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.72fr);
  align-items: center;
  gap: 56px;
  max-width: 1480px;
  margin: 0 auto;
  padding: 156px 40px 76px;
}

.about-hero__content {
  max-width: 840px;
}

.about-kicker {
  display: inline-flex;
  margin-bottom: 20px;
  color: rgba(227, 191, 255, 0.92);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.about-hero h1 {
  max-width: 760px;
  font-size: 92px;
  line-height: 0.96;
  font-weight: 400;
}

.about-hero p {
  max-width: 640px;
  margin-top: 26px;
  color: rgba(255, 255, 255, 0.66);
  font-size: 20px;
  line-height: 1.62;
}

.about-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

.about-button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  transition: transform 0.35s var(--easing), background 0.35s var(--easing), border-color 0.35s var(--easing), color 0.35s var(--easing);
}

.about-button:hover {
  transform: translateY(-2px);
}

.about-button--primary {
  background: #f4f1eb;
  color: #060606;
}

.about-button--ghost {
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--text);
  background: rgba(255, 255, 255, 0.03);
}

.about-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 360px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.015);
  overflow: hidden;
}

.about-visual::after {
  display: none;
}

.about-visual span {
  position: relative;
  z-index: 1;
  max-width: 220px;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  line-height: 1.5;
}

.about-visual--image {
  background: #070708;
}

.about-visual--image::after {
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, transparent 58%, rgba(0, 0, 0, 0.42));
}

.about-visual--image img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.94) contrast(1.04);
}

.about-visual--hero {
  min-height: 560px;
}

.about-statement {
  max-width: 1400px;
  margin: 0 auto;
  padding: 100px 40px 80px;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 48px;
}

.about-statement__eyebrow {
  color: var(--titan);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  position: relative;
  padding-left: 14px;
  height: fit-content;
}

.about-statement__eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  background: var(--titan);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--titan);
}

.about-statement p {
  max-width: 980px;
  font-size: clamp(24px, 3.2vw, 36px);
  line-height: 1.45;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.7);
}

.about-statement .highlight-text {
  background: linear-gradient(120deg, var(--titan) 0%, #ffffff 50%, var(--titan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 400;
}

.about-metrics {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px 100px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.about-metric {
  position: relative;
  min-height: 190px;
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.005) 100%);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  transition: all 0.4s var(--easing);
  overflow: hidden;
}

.about-metric::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(209, 168, 255, 0.08), transparent 50%);
  opacity: 0;
  transition: opacity 0.4s var(--easing);
  pointer-events: none;
}

.about-metric:hover {
  transform: translateY(-6px);
  border-color: rgba(209, 168, 255, 0.18);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.008) 100%);
  box-shadow: 
    0 12px 30px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(209, 168, 255, 0.03);
}

.about-metric:hover::before {
  opacity: 1;
}

.about-metric strong {
  font-size: clamp(38px, 4vw, 48px);
  line-height: 1;
  font-weight: 500;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, #ffffff 70%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 0.4s var(--easing);
}

.about-metric:hover strong {
  background: linear-gradient(135deg, var(--titan) 0%, #ffffff 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transform: scale(1.03);
}

.about-metric span {
  position: relative;
  z-index: 1;
  max-width: 220px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  transition: color 0.4s var(--easing);
}

.about-metric:hover span {
  color: rgba(255, 255, 255, 0.7);
}

.about-split {
  max-width: 1480px;
  margin: 0 auto;
  padding: 116px 40px;
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(320px, 0.72fr);
  gap: 64px;
  align-items: center;
}

.about-split--single {
  grid-template-columns: minmax(0, 1fr);
}

.about-split__copy h2,
.about-section-head h2,
.about-collab__copy h2 {
  max-width: 720px;
  font-size: 58px;
  line-height: 1.02;
  font-weight: 400;
}

.about-split__copy p,
.about-collab__copy p {
  max-width: 620px;
  margin-top: 24px;
  color: rgba(255, 255, 255, 0.64);
  font-size: 18px;
  line-height: 1.68;
}

.about-checks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 40px;
}

.about-check-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 16px;
  font-weight: 400;
  transition: all 0.3s var(--easing);
}

.about-check-item:not(:first-child) {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.about-check-item:hover {
  transform: translateX(6px);
  color: #ffffff;
}

.check-icon {
  color: var(--titan);
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(209, 168, 255, 0.3));
  transition: transform 0.3s var(--easing);
}

.about-check-item:hover .check-icon {
  transform: scale(1.15) rotate(2deg);
}

.about-visual--tall {
  min-height: 620px;
}

.about-audience {
  max-width: 1480px;
  margin: 0 auto;
  padding: 110px 40px 118px;
}

.about-section-head {
  display: flex;
  justify-content: space-between;
  gap: 48px;
  align-items: flex-end;
  margin-bottom: 48px;
}

.about-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
}

.about-card {
  min-height: 300px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
}

.about-card span {
  color: rgba(227, 191, 255, 0.72);
  font-size: 13px;
  font-weight: 600;
}

.about-card h3 {
  margin-top: auto;
  font-size: 28px;
  line-height: 1.08;
  font-weight: 500;
}

.about-card p {
  margin-top: 18px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 15px;
  line-height: 1.6;
}

.about-collab {
  max-width: 1480px;
  margin: 0 auto;
  padding: 112px 40px 130px;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(320px, 0.7fr);
  gap: 64px;
  align-items: center;
}

.about-logo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.about-logo-grid div {
  min-height: 108px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 14px 16px;
  line-height: 1.35;
  letter-spacing: 0.01em;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.015);
  color: rgba(255, 255, 255, 0.5);
  font-size: 13.5px;
  transition: color 0.35s ease, border-color 0.35s ease, background 0.35s ease, transform 0.35s ease;
}
@media (hover: hover) {
  .about-logo-grid div:hover {
    color: rgba(255, 255, 255, 0.86);
    border-color: rgba(209, 168, 255, 0.32);
    background: rgba(209, 168, 255, 0.04);
    transform: translateY(-2px);
  }
}

@media (max-width: 1100px) {
  .about-hero,
  .about-split,
  .about-collab {
    grid-template-columns: 1fr;
  }

  .about-visual--hero,
  .about-visual--tall {
    min-height: 420px;
  }

  .about-statement {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .about-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-section-head {
    display: block;
  }

  .about-card-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .about-hero {
    min-height: auto;
    padding: 124px 20px 70px;
    gap: 36px;
  }

  .about-hero h1 {
    font-size: 48px;
    line-height: 1.02;
  }

  .about-hero p {
    font-size: 16px;
    line-height: 1.62;
  }

  .about-hero__actions {
    width: 100%;
  }

  .about-button {
    flex: 1 1 180px;
  }

  .about-visual,
  .about-visual--hero,
  .about-visual--tall {
    min-height: 300px;
  }

  .about-statement,
  .about-split,
  .about-audience,
  .about-collab {
    padding-left: 20px;
    padding-right: 20px;
  }

  .about-statement {
    padding-top: 76px;
    padding-bottom: 72px;
  }

  .about-statement p {
    font-size: 30px;
    line-height: 1.18;
  }

  .about-metrics {
    grid-template-columns: 1fr;
    padding: 0 20px 76px;
  }

  .about-metric {
    min-height: 150px;
  }

  .about-split,
  .about-audience,
  .about-collab {
    padding-top: 76px;
    padding-bottom: 76px;
  }

  .about-split__copy h2,
  .about-section-head h2,
  .about-collab__copy h2 {
    font-size: 36px;
    line-height: 1.08;
  }

  .about-split__copy p,
  .about-collab__copy p {
    font-size: 16px;
    line-height: 1.62;
  }

  .about-card {
    min-height: 250px;
    padding: 24px;
  }

  .about-logo-grid {
    grid-template-columns: 1fr;
  }
}

/* ░░░ Product detail page (PDP) ░░░ */
.pdp-main {
  background: linear-gradient(180deg, #000 0%, #070707 38%, #000 100%);
}

/* Hero */
.pdp-hero {
  max-width: 1480px;
  margin: 0 auto;
  padding: 132px 40px 64px;
}

.pdp-hero--image {
  position: relative;
  max-width: none;
  height: 100svh;
  padding: 0;
  overflow: hidden;
  background: #050407;
}

.pdp-hero--image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,0.42) 0%,
      transparent 24%,
      rgba(35, 5, 42, 0.1) 66%,
      rgba(18, 0, 24, 0.58) 86%,
      #000 100%
    ),
    radial-gradient(90% 66% at 50% 78%, transparent 0 48%, rgba(0,0,0,0.34) 100%);
}

.pdp-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Scroll-scrubbed entrance video (mirrors the home hero treatment) */
.pdp-intro {
  position: relative;
  width: 100%;
  max-width: none;
  height: 100svh;
  overflow: hidden;
  background: #050407;
  isolation: isolate;
}
.pdp-intro__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.6, 0.1, 0.2, 1);
  pointer-events: none;
  /* No constant filter while playing — a permanent contrast/saturate filter
     forces every 1080p frame through a filter pass and stutters. JS applies a
     blur only during the tail. transform:translateZ(0) keeps it on its own
     compositor layer for smooth decode. */
  transform: translateZ(0);
  backface-visibility: hidden;
}
.pdp-intro__video.is-ready { opacity: 1; }
.pdp-intro__vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,0.42) 0%,
      transparent 24%,
      rgba(35, 5, 42, 0.1) 66%,
      rgba(18, 0, 24, 0.58) 86%,
      #000 100%
    ),
    radial-gradient(90% 66% at 50% 78%, transparent 0 48%, rgba(0,0,0,0.34) 100%);
}
/* Intro overlay — a single balanced vertical block (kicker → title → lede →
   CTAs), vertically centred so it lines up with the product's optical centre.
   Each child reveals on its own (staggered) over the blurred tail. */
.pdp-intro__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 clamp(24px, 7vw, 150px);
  pointer-events: none;
}
/* Each revealable child starts hidden; JS adds .is-in to play the stagger. */
.pdp-intro__rev {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.55s var(--easing), transform 0.55s var(--easing);
}
.pdp-intro__rev.is-in {
  opacity: 1;
  transform: translateY(0);
}
.pdp-intro__kicker {
  color: rgba(227, 191, 255, 0.95);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 16px; /* kicker → title: tight */
}
.pdp-intro__title {
  margin: 0 auto;
  max-width: 16ch;
  font-size: clamp(46px, 6.2vw, 96px);
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: -0.035em;
}
.pdp-intro__title span { display: block; }
.pdp-intro__accent {
  padding-bottom: 0.16em;
  background: linear-gradient(115deg, var(--brand-mor) 0%, #e5c2ff 52%, #ffffff 92%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pdp-intro__lede {
  margin: 26px auto 0; /* title → lede: medium */
  max-width: 44ch;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(15px, 1.3vw, 19px);
  font-weight: 300;
  line-height: 1.55;
}
.pdp-intro__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 38px; /* lede → CTAs: a touch wider */
  pointer-events: auto; /* buttons clickable even though overlay isn't */
}
.pdp-intro__cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 26px;
  border-radius: 999px;
  font-size: 14px;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}
.pdp-intro__cta svg { transition: transform 0.22s ease; }
/* Primary — dominant solid pill (the page's main conversion action). */
.pdp-intro__cta--primary {
  background: #fff;
  color: #0a0a0c;
  border: 1px solid #fff;
}
.pdp-intro__cta--primary:hover { background: rgba(255, 255, 255, 0.88); }
.pdp-intro__cta--primary:hover svg { transform: translateX(4px); }
/* Secondary — quiet ghost/outline. */
.pdp-intro__cta--ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.26);
}
.pdp-intro__cta--ghost:hover { border-color: rgba(255, 255, 255, 0.55); }
.pdp-intro__cta--ghost:hover svg { transform: translateY(3px); }

@media (max-width: 600px) {
  .pdp-intro__actions { gap: 12px; }
  .pdp-intro__cta { padding: 12px 22px; font-size: 13px; }
}

/* Reduced motion: show the whole block immediately, no stagger. */
@media (prefers-reduced-motion: reduce) {
  .pdp-intro__rev { opacity: 1; transform: none; transition: none; }
}

.pdp-video-section {
  position: relative;
  isolation: isolate;
  z-index: 1;
  max-width: none;
  margin-top: -14vh;
  padding: 0;
  overflow: visible;
  background: linear-gradient(180deg, rgba(18, 0, 24, 0) 0%, #000 18%, #000 100%);
  height: 100svh;
  display: grid;
  place-items: center;
}

.pdp-video-section::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  z-index: 3;
  height: min(30vh, 300px);
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(92, 22, 101, 0.42) 0%,
    rgba(38, 4, 50, 0.26) 32%,
    rgba(0, 0, 0, 0.72) 76%,
    rgba(0, 0, 0, 0) 100%
  );
}

.pdp-video-section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 4;
  height: min(30vh, 280px);
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(26, 2, 38, 0.42) 42%,
    rgba(0, 0, 0, 0.96) 100%
  );
}

.pdp-video-container {
  position: relative;
  width: 78vw;
  height: 72svh;
  border-radius: 34px;
  overflow: hidden;
  transform: scale(0.9);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.8);
  will-change: width, height, border-radius, transform;
}

.pdp-video-section__media {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.pdp-video-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, #000000 0%, rgba(0, 0, 0, 0.4) 15%, transparent 35%, transparent 65%, rgba(0, 0, 0, 0.4) 85%, #000000 100%);
}

.pdp-video-color-tint {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(125deg, rgba(147, 51, 234, 0.7) 0%, rgba(236, 72, 153, 0.6) 100%);
  mix-blend-mode: screen;
  opacity: 1;
}

.pdp-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 40px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.42);
}
.pdp-breadcrumb a { transition: color 0.3s var(--easing); }
.pdp-breadcrumb a:hover { color: rgba(255, 255, 255, 0.82); }
.pdp-breadcrumb span[aria-hidden] { color: rgba(255, 255, 255, 0.22); }
.pdp-breadcrumb__current { color: rgba(227, 191, 255, 0.92); }

.pdp-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.85fr);
  gap: 64px;
  align-items: start;
}

.pdp-gallery {
  position: sticky;
  top: 110px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pdp-stage {
  min-height: 540px;
  background:
    radial-gradient(120% 90% at 50% 12%, rgba(227, 191, 255, 0.08), transparent 60%),
    #08080a;
}
.pdp-stage__badge {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 2;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(8px);
}

.pdp-thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.pdp-thumb {
  min-height: 96px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  transition: border-color 0.3s var(--easing), background 0.3s var(--easing), transform 0.3s var(--easing);
}
.pdp-thumb:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.04); }
.pdp-thumb.is-active { border-color: rgba(227, 191, 255, 0.4); background: rgba(227, 191, 255, 0.05); }

.pdp-info { padding-top: 6px; }
.pdp-title {
  font-size: clamp(40px, 5.4vw, 68px);
  line-height: 1;
  font-weight: 500;
  margin-bottom: 24px;
}
.pdp-lede {
  max-width: 560px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 17px;
  line-height: 1.7;
}

.pdp-specs-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.pdp-chip {
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.025);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.74);
}

.pdp-buy {
  margin-top: 40px;
  padding-top: 36px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.pdp-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 24px;
}
.pdp-price__amount {
  font-size: clamp(36px, 4.5vw, 50px);
  font-weight: 500;
  background: linear-gradient(135deg, var(--titan) -20%, #ffffff 70%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pdp-price__currency {
  font-size: 26px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
}

.pdp-buy__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.pdp-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border: none;
  border-radius: 999px;
  background: #f4f1eb;
  color: #060606;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.35s var(--easing), box-shadow 0.35s var(--easing), background 0.35s var(--easing);
}
.pdp-add-btn:hover {
  transform: translateY(-2px);
  background: #ffffff;
  box-shadow: 0 16px 38px rgba(227, 191, 255, 0.16);
}
.pdp-add-btn svg { flex-shrink: 0; }
.pdp-spec-link { min-height: 52px; }
.pdp-buy__note {
  margin-top: 18px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
}

/* Material narrative */
.pdp-material {
  width: 100%;
  max-width: none !important;
  position: relative;
  isolation: isolate;
  background-image:
    linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.9) 12%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.9) 88%, #000 100%),
    linear-gradient(to right, #000000 36%, rgba(0, 0, 0, 0.26) 68%, rgba(0, 0, 0, 0) 100%);
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  padding: 150px 0 120px;
  overflow: hidden;
}
.pdp-material__visual-layer {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: -1;
  width: min(70vw, 1220px);
  background:
    linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0.66) 20%, rgba(0, 0, 0, 0) 46%),
    linear-gradient(to bottom, #000 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 74%, #000 100%),
    url('../earfit/malzeme-bg.png') right center / cover no-repeat;
  transform-origin: 72% 50%;
  will-change: transform, opacity, filter;
}
.pdp-material__container {
  position: relative;
  z-index: 1;
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(200px, 0.75fr);
  gap: 64px;
  align-items: center;
}
.pdp-material__copy h2 {
  max-width: none;
  font-size: clamp(46px, 5.6vw, 82px);
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.035em;
}
.pdp-material__copy h2 span {
  display: block;
}
.pdp-material__accent {
  padding-bottom: 0.18em;
  background: linear-gradient(115deg, var(--brand-mor) 0%, #e5c2ff 52%, #ffffff 92%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pdp-material__copy p {
  max-width: 600px;
  margin-top: 30px;
  color: rgba(255, 255, 255, 0.66);
  font-size: clamp(17px, 1.25vw, 20px);
  line-height: 1.72;
}

/* Reverse variant: image left, copy right */
.pdp-material--reverse {
  background-image:
    linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.9) 12%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.9) 88%, #000 100%),
    linear-gradient(to left, #000000 36%, rgba(0, 0, 0, 0.26) 68%, rgba(0, 0, 0, 0) 100%);
  background-position: left center;
}
.pdp-material--reverse .pdp-material__visual-layer {
  inset: 0 auto 0 0;
  width: min(58vw, 1040px);
  background:
    linear-gradient(to left, #000 0%, rgba(0, 0, 0, 0.66) 28%, rgba(0, 0, 0, 0) 60%),
    linear-gradient(to bottom, #000 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 74%, #000 100%),
    url('../earfit/polymer-bg.png') left center / cover no-repeat;
  transform-origin: 28% 50%;
}
.pdp-material--reverse .pdp-material__container {
  grid-template-columns: minmax(320px, 1fr) minmax(320px, 0.95fr);
  gap: clamp(64px, 9vw, 150px);
}
.pdp-material--reverse .pdp-material__copy {
  grid-column: 2;
  justify-self: end;
  padding-left: clamp(24px, 5vw, 90px);
}
/* Silver cable variant: image right (default layout), uses kablo.png */
.pdp-material--cable .pdp-material__visual-layer {
  width: min(52vw, 940px);
  background:
    linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0.66) 30%, rgba(0, 0, 0, 0) 62%),
    linear-gradient(to bottom, #000 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 74%, #000 100%),
    url('../earfit/kablo.png') right center / cover no-repeat;
}

/* ░░░ Stats · 4 columns with thin dividers (big value over small label) ░░░ */
.pdp-stats {
  position: relative;
  width: 100%;
  /* transparent so it shares the .pdp-main gradient with the FR section below —
     a fixed colour created a visible tone seam between the two */
  background: transparent;
  padding: clamp(60px, 9vh, 110px) 40px;
}
.pdp-stats__grid {
  width: 100%;
  max-width: 1340px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.pdp-stats__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 8px clamp(20px, 2.6vw, 44px);
  /* thin divider between columns — equal across all four cells */
  border-left: 0.5px solid rgba(255, 255, 255, 0.10);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.pdp-stats__item:first-child { border-left: none; padding-left: 0; }
/* subtle accent underline that grows in on hover */
.pdp-stats__item::after {
  content: "";
  position: absolute;
  left: clamp(20px, 2.6vw, 44px);
  right: clamp(20px, 2.6vw, 44px);
  bottom: -10px;
  height: 1px;
  background: #d1a8ff;
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease;
}
.pdp-stats__item:first-child::after { left: 0; }
.pdp-stats__icon {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  height: 18px;
  color: #6A6E73;
  margin-bottom: 18px;
  transition: color 0.35s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.pdp-stats__icon svg { width: 18px; height: 18px; }
.pdp-stats__label,
.pdp-stats__value { transition: color 0.35s ease; }

/* ── Hover · understated accent lift (pointer devices only) ── */
@media (hover: hover) {
  .pdp-stats__item:hover { transform: translateY(-4px); }
  .pdp-stats__item:hover .pdp-stats__icon {
    color: #d1a8ff;
    transform: translateY(-1px);
  }
  .pdp-stats__item:hover .pdp-stats__label { color: rgba(255, 255, 255, 0.82); }
  .pdp-stats__item:hover::after { transform: scaleX(1); opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  .pdp-stats__item,
  .pdp-stats__item::after,
  .pdp-stats__icon { transition: none; }
  .pdp-stats__item:hover { transform: none; }
}
/* Fixed-height title row: every value (number or text) sits on the SAME
   baseline because the box height is constant and content is bottom-aligned. */
.pdp-stats__value {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  min-height: 46px;
  color: #fff;
  font-family: var(--font-main);
  font-size: 46px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
}
/* Two-line text title whose TOTAL height equals the single-line number height:
   2 lines × 24px × 0.95 line-height ≈ 46px, matching the digits' cap box. */
.pdp-stats__value--text {
  display: block;
  font-size: 24px;
  line-height: 0.95;
  letter-spacing: -0.01em;
}
.pdp-stats__unit {
  font-size: 0.4em;
  font-weight: 500;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.85);
  /* lift the unit so it reads alongside the digits, not on the baseline */
  padding-bottom: 0.18em;
}
.pdp-stats__label {
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.68);
  font-size: clamp(15px, 1.15vw, 17px);
  font-weight: 300;
  line-height: 1.5;
  max-width: 24ch;
}

@media (max-width: 760px) {
  .pdp-stats { padding: clamp(48px, 8vh, 80px) 20px; }
  .pdp-stats__grid { grid-template-columns: repeat(2, 1fr); gap: 36px 0; }
  /* with 2 columns, only the right column of each row needs a divider */
  .pdp-stats__item:nth-child(odd) { border-left: none; }
}
@media (max-width: 420px) {
  .pdp-stats__grid { grid-template-columns: 1fr; gap: 32px 0; }
  .pdp-stats__item { border-left: none; }
}

/* ░░░ Ses imzası · frekans tepkisi grafiği ░░░ */
.pdp-fr {
  position: relative;
  width: 100%;
  /* transparent so the page's .pdp-main gradient flows through seamlessly
     (a fixed colour here created a visible tone seam against the gradient) */
  background: transparent;
  padding: clamp(70px, 11vh, 130px) 40px;
}
.pdp-fr__inner {
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
}
.pdp-fr__head { max-width: 640px; margin-bottom: clamp(34px, 5vh, 56px); }
.pdp-fr__title {
  margin: 0 0 14px;
  color: #fff;
  font-family: var(--font-main);
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.pdp-fr__lede {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: clamp(15px, 1.15vw, 17px);
  font-weight: 300;
  line-height: 1.6;
}

/* chart — no frame, blends into the page background */
.pdp-fr__chart {
  position: relative;
  margin: 0;
  padding: 18px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.pdp-fr__badge {
  position: absolute;
  top: 14px;
  left: 16px;
  z-index: 3;
  padding: 4px 10px;
  border: 0.5px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.pdp-fr__badge[hidden] { display: none; }

/* legend */
.pdp-fr__legend {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}
.pdp-fr__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.66);
  font-size: 12px;
  font-weight: 400;
}
.pdp-fr__legend-item[hidden] { display: none; }
.pdp-fr__swatch {
  width: 16px;
  height: 2.5px;
  border-radius: 2px;
  background: #5B6BFF;
}
.pdp-fr__legend-item--target .pdp-fr__swatch {
  height: 0;
  border-top: 1.5px dashed rgba(255, 255, 255, 0.45);
  background: none;
}

/* svg plot — viewBox 1000×420, stretched to container width */
.pdp-fr__svg {
  display: block;
  width: 100%;
  height: clamp(260px, 38vw, 420px);
}
.pdp-fr__grid line { stroke: rgba(255, 255, 255, 0.06); stroke-width: 1; }
.pdp-fr__grid line.is-zero { stroke: rgba(255, 255, 255, 0.14); }
.pdp-fr__axis text {
  fill: rgba(255, 255, 255, 0.4);
  font-family: var(--font-main);
  font-size: 12px;
}
.pdp-fr__line {
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* draw order: target is painted first (in markup), measured last → measured on top */
.pdp-fr__line--measured {
  stroke: #5B6BFF;
  stroke-width: 2.5;
  filter: drop-shadow(0 0 6px rgba(91, 107, 255, 0.35));
}
.pdp-fr__line--target {
  stroke: rgba(255, 255, 255, 0.42);
  stroke-width: 1.5;
  stroke-dasharray: 6 6;
}
.pdp-fr__line--target[hidden] { display: none; }
/* the draw-in reveal is handled in JS via getTotalLength() (see playDrawIn),
   which is robust under preserveAspectRatio="none" stretch */

/* hover cursor */
.pdp-fr__cursor-line { stroke: rgba(91, 107, 255, 0.5); stroke-width: 1; }
.pdp-fr__cursor-dot { fill: #fff; stroke: #5B6BFF; stroke-width: 2; }
.pdp-fr__cursor[hidden] { display: none; }

/* x labels row (real text, below svg) */
.pdp-fr__xlabels {
  position: relative;
  height: 22px;
  margin: 2px 0 6px;
}
.pdp-fr__xlabels span {
  position: absolute;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  white-space: nowrap;
}
.pdp-fr__xlabels span.is-sparse { display: none; }

/* tooltip */
.pdp-fr__tooltip {
  position: absolute;
  z-index: 4;
  transform: translate(-50%, -120%);
  padding: 7px 11px;
  border: 0.5px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: rgba(12, 12, 16, 0.92);
  backdrop-filter: blur(8px);
  pointer-events: none;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.3;
}
.pdp-fr__tooltip[hidden] { display: none; }
.pdp-fr__tooltip-freq { color: #fff; font-size: 13px; font-weight: 500; }
.pdp-fr__tooltip-db { color: #8E97FF; font-size: 12px; }

@media (max-width: 760px) {
  .pdp-fr { padding: clamp(56px, 9vh, 90px) 20px; }
  .pdp-fr__chart { padding: 14px 0 0; }
  .pdp-fr__legend { gap: 5px; }
  .pdp-fr__xlabels span:not(.is-sparse-keep) { display: none; }
  .pdp-fr__xlabels span.is-sparse-keep { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  /* reduced-motion is also handled in JS (playDrawIn skips the reveal);
     this just guarantees no leftover transition runs */
  .pdp-fr__line { transition: none !important; animation: none !important; }
}

/* Pull the copy a little to the left on the non-mirrored cards
   (Malzeme + Kablo together, so they stay aligned) */
.pdp-material:not(.pdp-material--reverse) .pdp-material__copy {
  margin-left: clamp(-64px, -2.8vw, -24px);
}

/* Features */
.pdp-features {
  max-width: none;
  margin: 0;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: clamp(68px, 8vh, 86px) 40px clamp(70px, 8vh, 90px);
  background:
    radial-gradient(76% 68% at 72% 8%, rgba(196, 91, 255, 0.12), transparent 64%),
    linear-gradient(180deg, #000 0%, #07070a 48%, #000 100%);
}
.pdp-features__inner {
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
}
.pdp-features__head {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.62fr);
  gap: 42px;
  align-items: end;
  margin-bottom: 34px;
}
.pdp-features__head h2 {
  max-width: 700px;
  font-size: clamp(36px, 4.3vw, 62px);
  line-height: 0.98;
  font-weight: 500;
  letter-spacing: -0.035em;
}
.pdp-features__head p {
  max-width: 520px;
  color: rgba(255, 255, 255, 0.58);
  font-size: clamp(16px, 1.15vw, 19px);
  line-height: 1.55;
}
.pdp-features__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.34fr);
  gap: 28px;
  align-items: start;
}
.pdp-feature-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.pdp-feature {
  position: relative;
  min-height: 154px;
  padding: 20px 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.018) 46%, rgba(255, 255, 255, 0.006)),
    rgba(255, 255, 255, 0.018);
  transition:
    transform 0.45s var(--easing),
    border-color 0.45s var(--easing),
    background 0.45s var(--easing);
}
.pdp-feature::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(220px 180px at 18% 0%, rgba(232, 184, 255, 0.14), transparent 70%),
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.26) 100%);
  opacity: 0;
  transition: opacity 0.45s var(--easing);
}
.pdp-feature:hover {
  transform: translateY(-5px);
  border-color: rgba(232, 184, 255, 0.22);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.024) 46%, rgba(255, 255, 255, 0.01)),
    rgba(255, 255, 255, 0.024);
}
.pdp-feature:hover::before { opacity: 1; }
.pdp-feature__index {
  display: inline-flex;
  margin-bottom: 22px;
  color: rgba(233, 190, 255, 0.72);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.pdp-feature strong {
  display: block;
  max-width: 330px;
  font-size: clamp(17px, 1.34vw, 22px);
  line-height: 1.12;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: #ffffff;
}
.pdp-feature p {
  max-width: 420px;
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 14px;
  line-height: 1.5;
}

.pdp-tech {
  position: sticky;
  top: 96px;
  min-height: 0;
  padding: 24px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 22px;
  background:
    radial-gradient(130% 90% at 86% 0%, rgba(255, 78, 166, 0.18), transparent 50%),
    radial-gradient(110% 80% at 0% 100%, rgba(131, 78, 255, 0.16), transparent 56%),
    rgba(255, 255, 255, 0.035);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.32);
}
.pdp-tech::before {
  content: "";
  position: absolute;
  inset: auto -20% -20% -20%;
  height: 52%;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  opacity: 0.42;
}
.pdp-tech__eyebrow {
  display: inline-flex;
  margin-bottom: 14px;
  color: rgba(232, 184, 255, 0.78);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pdp-tech h3 {
  max-width: 320px;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.04;
  font-weight: 500;
  letter-spacing: -0.025em;
}
.pdp-tech__metrics {
  display: grid;
  gap: 1px;
  margin: 24px 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.055);
}
.pdp-tech__metrics div {
  padding: 15px 16px;
  background: rgba(0, 0, 0, 0.24);
}
.pdp-tech__metrics strong {
  display: block;
  font-size: 24px;
  line-height: 1;
  font-weight: 500;
  color: #fff;
}
.pdp-tech__metrics span {
  display: block;
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.52);
  font-size: 13px;
}
.pdp-tech__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 22px;
}
.pdp-tech__list li {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.18);
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
}
.pdp-tech__list li::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #e5c2ff, var(--brand-mor));
}
.pdp-tech__btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
}

@media (max-width: 1180px) {
  .pdp-features {
    min-height: auto;
    align-items: stretch;
    padding-top: 90px;
    padding-bottom: 92px;
  }
  .pdp-features__head,
  .pdp-features__grid {
    grid-template-columns: 1fr;
  }
  .pdp-tech {
    position: relative;
    top: auto;
    min-height: auto;
  }
  .pdp-tech__metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .pdp-features {
    padding: 78px 20px 84px;
  }
  .pdp-features__head {
    gap: 22px;
    margin-bottom: 30px;
  }
  .pdp-feature-list,
  .pdp-tech__metrics {
    grid-template-columns: 1fr;
  }
  .pdp-feature {
    min-height: auto;
    padding: 20px;
  }
  .pdp-feature__index {
    margin-bottom: 20px;
  }
  .pdp-tech {
    padding: 24px;
    border-radius: 18px;
  }
}

/* Spec table */
.pdp-spectable {
  max-width: 1480px;
  margin: 0 auto;
  padding: 40px 40px 100px;
}
.pdp-spec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 56px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.pdp-spec-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.pdp-spec-row dt {
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
}
.pdp-spec-row dd {
  text-align: right;
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  font-weight: 500;
}

/* Box & cable */
.pdp-box {
  max-width: 1480px;
  margin: 0 auto;
  padding: 100px 40px;
  display: grid;
  grid-template-columns: minmax(320px, 1.05fr) minmax(0, 0.92fr);
  gap: 64px;
  align-items: center;
}
.pdp-box__media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.pdp-box__media .about-visual { min-height: 360px; }
.pdp-box__cable { transform: translateY(-22px); }
.pdp-box__case { transform: translateY(22px); }
.pdp-box__copy h2 {
  max-width: 480px;
  font-size: clamp(32px, 3.8vw, 50px);
  line-height: 1.04;
  font-weight: 400;
}
.pdp-box__copy p {
  max-width: 520px;
  margin-top: 22px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 17px;
  line-height: 1.7;
}

/* Closing CTA */
.pdp-cta {
  max-width: 1480px;
  margin: 0 auto;
  padding: 40px 40px 130px;
}
.pdp-cta__inner {
  position: relative;
  overflow: hidden;
  padding: 72px 48px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(120% 140% at 80% 0%, rgba(227, 191, 255, 0.1), transparent 55%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.008));
  text-align: center;
}
.pdp-cta__inner h2 {
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.06;
  font-weight: 400;
}
.pdp-cta__inner p {
  max-width: 560px;
  margin: 18px auto 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 17px;
  line-height: 1.65;
}
.pdp-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 34px;
}

@media (max-width: 1100px) {
  .pdp-hero__grid,
  .pdp-material__container,
  .pdp-features__grid,
  .pdp-box {
    grid-template-columns: 1fr;
  }
  .pdp-material {
    background-image:
      linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.82) 18%, rgba(0, 0, 0, 0.48) 56%, rgba(0, 0, 0, 0.92) 100%);
    background-position: center center;
    padding: 110px 0 80px;
  }
  .pdp-material__visual-layer {
    width: 100%;
    opacity: 0.6;
    background:
      linear-gradient(to bottom, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.62) 48%, rgba(0,0,0,0.94) 100%),
      url('../earfit/malzeme-bg.png') center center / cover no-repeat;
  }
  .pdp-material:not(.pdp-material--reverse) .pdp-material__copy {
    margin-left: 0;
  }
  .pdp-material--reverse .pdp-material__container {
    grid-template-columns: 1fr;
  }
  .pdp-material--reverse .pdp-material__copy {
    grid-column: auto;
  }
  .pdp-material--reverse {
    background-image:
      linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.82) 18%, rgba(0, 0, 0, 0.48) 56%, rgba(0, 0, 0, 0.92) 100%);
    background-position: center center;
  }
  .pdp-material--reverse .pdp-material__visual-layer {
    background:
      linear-gradient(to bottom, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.62) 48%, rgba(0,0,0,0.94) 100%),
      url('../earfit/polymer-bg.png') center center / cover no-repeat;
  }
  .pdp-material--cable .pdp-material__visual-layer {
    background:
      linear-gradient(to bottom, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.62) 48%, rgba(0,0,0,0.94) 100%),
      url('../earfit/kablo.png') center center / cover no-repeat;
  }
  .pdp-material--cable .pdp-material__container {
    grid-template-columns: 1fr;
  }
  .pdp-gallery,
  .pdp-tech { position: static; }
  .pdp-stage { min-height: 420px; }
  .pdp-spec-grid { grid-template-columns: 1fr; gap: 0; }
  .pdp-box__cable,
  .pdp-box__case { transform: none; }
}

@media (max-width: 720px) {
  .pdp-hero { padding: 116px 20px 48px; }
  .pdp-hero--image {
    height: 100svh;
    padding: 0;
  }
  .pdp-hero__image {
    height: 100%;
    object-position: center;
  }
  .pdp-video-section {
    height: auto;
    overflow: hidden;
  }
  .pdp-video-container {
    width: 100vw;
    height: 70svh;
    border-radius: 0px;
    transform: none;
    box-shadow: none;
  }
  .pdp-material__container,
  .pdp-features,
  .pdp-spectable,
  .pdp-box,
  .pdp-cta { padding-left: 20px; padding-right: 20px; }
  .pdp-material,
  .pdp-box { padding-top: 72px; padding-bottom: 72px; }
  .pdp-box__media { grid-template-columns: 1fr; }
  .pdp-box__media .about-visual { min-height: 260px; }
  .pdp-buy__actions { width: 100%; }
  .pdp-add-btn { flex: 1 1 100%; justify-content: center; }
  .pdp-spec-link { flex: 1 1 100%; }
  .pdp-cta__inner { padding: 48px 24px; }
  .pdp-spec-row { flex-direction: column; gap: 4px; }
  .pdp-spec-row dd { text-align: left; }
}

/* ░░░ Selection ░░░ */
::selection { background: var(--titan); color: var(--bg); }

/* ═════════════════════════════════════════════
   Auth modal (giriş / kayıt) — hesap ikonundan açılır.
   Markup script.js tarafından tüm sayfalara enjekte edilir.
   Consent modal desenini temel alır; marka token'ları kullanır.
   ═════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════
   YASAL · footer alt-bar satır içi linkleri + çerez banner'ı
   ══════════════════════════════════════════════════════════ */

/* Ödeme/teşekkür sayfalarındaki sade footer'ın alt barında yasal linkler */
.footer__bottom { flex-wrap: wrap; gap: 14px 0; }
.footer__legal-inline {
  display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center;
}
.footer__legal-inline a {
  font-size: 12.5px; color: rgba(255,255,255,0.48);
  text-decoration: none; transition: color 0.2s ease;
}
.footer__legal-inline a:hover,
.footer__legal-inline a:focus-visible { color: var(--brand-lilac); }

/* Footer sütununda "geçerli sayfa" (link olmayan) yasal madde */
.footer__link-current { color: rgba(255,255,255,0.4); cursor: default; }

/* ══════════════════════════════════════════════════════════
   ERİŞİLEBİLİRLİK · global klavye odak halkası
   Yalnızca klavyeyle gezinirken görünür (:focus-visible) —
   fare tıklamasında çıkmaz, tasarımı etkilemez. Kendi odak
   stilini kuran bileşenler (auth inputları, .scroll-hint)
   daha yüksek özgüllükle bunu geçersiz kılmaya devam eder.
   ══════════════════════════════════════════════════════════ */
:focus-visible {
  outline: 2px solid var(--brand-lilac);
  outline-offset: 2px;
}


/* ░░░ Sepet drawer (side cart) ░░░
   Hard-code karşılığı: titaniem-pro.html / earfit-pro.html içindeki inline
   <style> bloğu. WordPress'te tüm sayfalarda kullanıldığı için buraya taşındı.
   Yeni: .cartd__body (AJAX ile yenilenen sarmalayıcı) ve .cartd__loader. */
.cartd { position: fixed; inset: 0; z-index: 290; pointer-events: none; }
.cartd__veil {
  position: absolute; inset: 0; background: rgba(4,4,6,0.62);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .35s ease;
}
.cartd__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(430px, 92vw);
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #131118, #0b0a0d);
  border-left: 1px solid rgba(255,255,255,0.09);
  transform: translateX(100%); transition: transform .45s cubic-bezier(0.22,1,0.36,1);
}
.cartd.is-open { pointer-events: auto; }
.cartd.is-open .cartd__veil { opacity: 1; }
.cartd.is-open .cartd__panel { transform: none; }
.cartd__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 24px; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.cartd__head h3 { font-size: 17px; font-weight: 600; }
.cartd__close { background: none; border: 0; color: rgba(255,255,255,0.6); cursor: pointer; padding: 6px; }
.cartd__close svg { width: 18px; height: 18px; }
.cartd__list { flex: 1; overflow-y: auto; padding: 8px 24px; }
.cartd__empty { padding: 40px 0; text-align: center; color: rgba(255,255,255,0.45); font-size: 14px; }
.cartd__item { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.cartd__thumb {
  flex: none; width: 58px; height: 58px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.09);
  background: radial-gradient(circle at 50% 40%, rgba(227,191,255,0.14), #0a090c 70%);
  display: grid; place-items: center; color: rgba(227,191,255,0.8);
}
.cartd__thumb svg { width: 26px; height: 26px; }
.cartd__info { flex: 1; min-width: 0; }
.cartd__name { font-size: 14.5px; font-weight: 600; }
.cartd__badge {
  display: inline-flex; margin-left: 7px; padding: 2px 8px; border-radius: 999px;
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; vertical-align: 2px;
  border: 1px solid rgba(229,194,255,0.4); color: #e5c2ff; background: rgba(227,191,255,0.07);
}
.cartd__conf { margin-top: 4px; color: rgba(255,255,255,0.5); font-size: 12px; line-height: 1.5; }
.cartd__wait { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; color: rgba(255,111,171,0.85); font-size: 11.5px; }
.cartd__wait svg { width: 12px; height: 12px; flex: none; }
.cartd__meta { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; }
.cartd__price { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cartd__rm { background: none; border: 0; color: rgba(255,255,255,0.35); font-size: 12px; cursor: pointer; text-decoration: underline; font-family: inherit; }
@media (hover:hover) { .cartd__rm:hover { color: #ff6fab; } }
.cartd__foot { padding: 18px 24px 24px; border-top: 1px solid rgba(255,255,255,0.08); }
.cartd__total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.cartd__total span { color: rgba(255,255,255,0.55); font-size: 13px; }
.cartd__total strong { font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cartd__go {
  display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%;
  padding: 15px; border: 0; border-radius: 999px; background: #f4eefb; color: #11070f;
  font-size: 14.5px; font-weight: 600; font-family: inherit; cursor: pointer; text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}
@media (hover:hover) { .cartd__go:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(229,194,255,0.22); } }
.cartd__view { display: block; margin-top: 11px; text-align: center; color: rgba(255,255,255,0.55); font-size: 13px; text-decoration: none; }
@media (hover:hover) { .cartd__view:hover { color: #e5c2ff; } }

/* AJAX sarmalayıcı — .cartd__list ve .cartd__foot bunun içinde yenilenir. */
.cartd__body { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* Yükleniyor göstergesi */
.cartd__loader {
  position: absolute; inset: 0; display: none;
  background: rgba(11,10,13,0.55);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.cartd.is-loading .cartd__loader { display: block; }
.cartd__loader::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border: 2px solid rgba(229,194,255,0.25); border-top-color: #e5c2ff;
  border-radius: 50%; animation: cartd-spin .7s linear infinite;
}
@keyframes cartd-spin { to { transform: rotate(360deg); } }

/* Sepet açıkken arka plan kaymasın */
body.cartd-open { overflow: hidden; }

/* Ürün görseli (Woo'dan gelir; hard-code'da yalnızca SVG placeholder vardı) */
.cartd__thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }

/* Nav sepet ikonundaki adet rozeti */
.nav__icon { position: relative; }
.nav__cart-count {
  position: absolute; top: -4px; right: -6px; min-width: 17px; height: 17px;
  padding: 0 4px; border-radius: 999px; background: #e5c2ff; color: #11070f;
  font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.nav__cart-count.is-empty { display: none; }

/* Drawer başlığındaki adet rozeti */
.side-cart-count-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; margin-left: 8px; padding: 0 6px;
  border-radius: 999px; border: 1px solid rgba(229,194,255,0.4);
  color: #e5c2ff; background: rgba(227,191,255,0.07);
  font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
}


/* ░░░ Hakkımızda ░░░
   Hard-code karşılığı: htmlsite/hakkimizda.html içindeki sayfaya özel <style> bloğu. */
.about-hero {
  position: relative; overflow: hidden;
  /* kutudan çıkıp tüm viewport genişliğini kapla */
  width: 100vw; max-width: 100vw; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw;
  min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
  padding: 120px clamp(20px, 7vw, 120px) 90px;
}
.about-hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: #060606; }
.about-hero__bg img,
.about-hero__bg video {
  width: 100%; height: 100%; object-fit: cover; object-position: 70% center;
  image-rendering: -webkit-optimize-contrast;
}
/* katmanlı maske: metin tarafını koyulaştır, kenarları yumuşat */
.about-hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, #000 0%, rgba(0,0,0,0.9) 24%, rgba(0,0,0,0.5) 46%, rgba(0,0,0,0.1) 68%, transparent 84%),
    linear-gradient(0deg, #000 0%, transparent 24%),
    linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 18%);
}
.about-hero__content { position: relative; z-index: 2; width: 100%; max-width: var(--about-max, 1480px); margin: 0 auto; }
.about-hero__content > * { max-width: 720px; }
@media (max-width: 760px) {
  .about-hero { min-height: 92vh; padding: 110px 20px 72px; }
  .about-hero__bg img, .about-hero__bg video { object-position: 66% center; }
  .about-hero__bg::after {
    background:
      linear-gradient(0deg, #000 16%, rgba(0,0,0,0.45) 52%, rgba(0,0,0,0.7) 100%),
      linear-gradient(90deg, rgba(0,0,0,0.7), transparent 72%);
  }
}

/* ░░░ Teknoloji ░░░
   Hard-code karşılığı: htmlsite/teknoloji.html içindeki sayfaya özel <style> bloğu. */
.tech-page { --tech-pad: clamp(20px, 4vw, 64px); --tech-max: 1480px; }

/* ── Hero (tam ekran / full-bleed) ── */
.tech-hero {
  position: relative; overflow: hidden;
  /* kutudan çıkıp tüm viewport genişliğini kapla */
  width: 100vw; max-width: 100vw; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw;
  min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
  padding: 120px clamp(20px, 7vw, 120px) 80px;
}
/* içerik yine ortalı geniş kutuda hizalansın (sola yaslı metin korunur) */
.tech-hero__inner {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--tech-max); margin: 0 auto;
}
.tech-hero__inner > * { max-width: 720px; }
.tech-hero h1 {
  margin-top: 18px; font-size: clamp(40px, 6.4vw, 100px); line-height: 0.95; font-weight: 400;
  letter-spacing: -0.014em; max-width: 14ch;
}

/* hero görseli — tüm alanı kaplar (cover), sola doğru siyaha erir */
.tech-hero__media { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.tech-hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 72% center;
  image-rendering: -webkit-optimize-contrast;
}
/* katmanlı maske: metin tarafını koyulaştır, üst/alt kenarları yumuşat */
.tech-hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, #000 0%, rgba(0,0,0,0.92) 22%, rgba(0,0,0,0.55) 44%, rgba(0,0,0,0.12) 66%, transparent 82%),
    linear-gradient(0deg, #000 0%, transparent 22%),
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, transparent 18%);
}
@media (max-width: 760px) {
  .tech-hero { min-height: 92vh; padding: 110px 20px 70px; }
  .tech-hero__media img { object-position: 68% center; }
  .tech-hero__media::after {
    background:
      linear-gradient(0deg, #000 16%, rgba(0,0,0,0.45) 52%, rgba(0,0,0,0.7) 100%),
      linear-gradient(90deg, rgba(0,0,0,0.7), transparent 70%);
  }
}
.tech-hero__lede {
  max-width: 680px; margin-top: 28px; color: rgba(255,255,255,0.62);
  font-size: clamp(17px, 1.3vw, 20px); line-height: 1.62;
}
.tech-hero__scrollcue {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 40px;
  color: rgba(255,255,255,0.4); font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase;
}
.tech-hero__scrollcue svg { animation: techCue 1.8s ease-in-out infinite; }
@keyframes techCue { 0%,100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(4px); opacity: 1; } }

/* ── Sticky stage shell ── */
.tech-stage {
  position: relative; max-width: var(--tech-max); margin: 0 auto;
  padding: 0 var(--tech-pad) 40px;
  display: grid; grid-template-columns: minmax(360px, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(32px, 5vw, 96px); align-items: start;
}

/* Left — sticky pinned panel */
.tech-pin { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.tech-pin__inner { position: relative; }
.tech-pin__index {
  display: flex; align-items: baseline; gap: 6px; margin-bottom: 26px;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.tech-pin__cur {
  font-size: clamp(58px, 8vw, 104px); font-weight: 500; letter-spacing: -0.02em;
  background: linear-gradient(135deg, #ffffff 0%, #e5c2ff 58%, var(--brand-mor) 116%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.tech-pin__total { font-size: clamp(18px, 1.8vw, 24px); color: rgba(255,255,255,0.34); font-weight: 400; }

/* swap-animated text block */
.tech-pin__slot { position: relative; min-height: 280px; }
.tech-pin__panel {
  position: absolute; inset: 0; opacity: 0; transform: translateY(14px);
  transition: opacity .55s ease, transform .55s cubic-bezier(0.22,1,0.36,1);
  pointer-events: none;
}
.tech-pin__panel.is-active { opacity: 1; transform: none; pointer-events: auto; }
.tech-pin__kicker {
  display: inline-flex; margin-bottom: 16px; color: rgba(227,191,255,0.9);
  font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
}
.tech-pin__title { font-size: clamp(28px, 3.2vw, 46px); line-height: 1.04; font-weight: 400; }
.tech-pin__title .accent {
  background: linear-gradient(115deg, #ffffff 8%, #e5c2ff 48%, var(--brand-mor) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.tech-pin__desc {
  max-width: 460px; margin-top: 22px; color: rgba(255,255,255,0.62);
  font-size: 16px; line-height: 1.7;
}

/* progress rail */
.tech-rail { display: flex; gap: 7px; margin-top: 38px; }
.tech-rail button {
  flex: 1; height: 3px; border: 0; padding: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,0.12); position: relative; overflow: hidden;
  transition: background .3s ease;
}
.tech-rail button::after {
  content: ""; position: absolute; inset: 0; transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg,#e5c2ff,var(--brand-mor)); transition: transform .4s ease;
}
.tech-rail button.is-active::after { transform: scaleX(1); }
.tech-rail button.is-done { background: rgba(229,194,255,0.32); }

/* Right — scrolling scenes */
.tech-scenes { display: flex; flex-direction: column; }
.tech-scene {
  min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
  padding: 60px 0;
}
.tech-scene__card {
  position: relative; overflow: hidden; border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  background:
    radial-gradient(130% 120% at 85% 0%, rgba(227,191,255,0.08), transparent 55%),
    linear-gradient(150deg, rgba(255,255,255,0.035), rgba(255,255,255,0.006));
  padding: clamp(26px, 3vw, 44px);
  transition: transform .7s cubic-bezier(0.22,1,0.36,1), opacity .7s ease, border-color .7s ease;
  transform: translateY(24px) scale(0.985); opacity: 0.45;
}
.tech-scene.is-active .tech-scene__card { transform: none; opacity: 1; border-color: rgba(227,191,255,0.2); }
.tech-scene__num {
  position: absolute; top: 18px; right: 26px;
  font-size: clamp(56px, 7vw, 104px); font-weight: 600; line-height: 1;
  color: rgba(255,255,255,0.04); font-variant-numeric: tabular-nums; pointer-events: none;
}
.tech-scene__visual {
  position: relative; height: clamp(180px, 26vh, 280px); border-radius: 12px; overflow: hidden;
  margin-bottom: 28px; background: #08080a;
  border: 1px solid rgba(255,255,255,0.06);
}
.tech-scene__visual img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.92) contrast(1.05); transform: scale(1.04);
  transition: transform 1.1s ease;
}
.tech-scene.is-active .tech-scene__visual img { transform: scale(1); }
.tech-scene__visual::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,0.5));
}
/* iconographic visual fallback (no photo) */
.tech-scene__glyph {
  display: grid; place-items: center; height: 100%;
  background: radial-gradient(circle at 50% 40%, rgba(227,191,255,0.14), transparent 65%);
}
.tech-scene__glyph svg { width: 88px; height: 88px; color: rgba(227,191,255,0.85); }
.tech-scene__eyebrow {
  display: inline-flex; margin-bottom: 12px; color: rgba(227,191,255,0.85);
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
}
.tech-scene__title { font-size: clamp(22px, 2vw, 28px); font-weight: 400; line-height: 1.1; }
.tech-scene__title .accent {
  background: linear-gradient(115deg,#fff 8%,#e5c2ff 48%,var(--brand-mor) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.tech-scene__text { margin-top: 16px; color: rgba(255,255,255,0.64); font-size: 15.5px; line-height: 1.7; }
.tech-scene__points { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tech-scene__point {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.02);
}
.tech-scene__point svg { flex: none; width: 15px; height: 15px; margin-top: 2px; color: #d1a8ff; }
.tech-scene__point span { font-size: 13px; line-height: 1.45; color: rgba(255,255,255,0.82); }
.tech-scene__point strong { display: block; color: #fff; font-weight: 600; margin-bottom: 1px; font-size: 13.5px; }

/* ── Closing CTA ── */
.tech-cta { max-width: var(--tech-max); margin: 0 auto; padding: 40px var(--tech-pad) 130px; }
.tech-cta__inner {
  position: relative; padding: 48px 24px; text-align: center;
}
.tech-cta__inner h2 { font-size: clamp(28px,3.2vw,42px); line-height: 1.08; font-weight: 400; }
.tech-cta__inner p { max-width: 560px; margin: 16px auto 30px; color: rgba(255,255,255,0.62); font-size: 17px; line-height: 1.6; }

/* ── Responsive: collapse the sticky stage into a simple stacked flow ── */
@media (max-width: 980px) {
  .tech-stage { grid-template-columns: 1fr; gap: 0; }
  .tech-pin { display: none; }            /* sticky panel hidden; scenes carry their own headings */
  .tech-scene { min-height: 0; padding: 26px 0; }
  .tech-scene__card { transform: none; opacity: 1; }
  .tech-scene__points { grid-template-columns: 1fr; }
  .tech-scene__num { font-size: 64px; }
}
@media (min-width: 981px) {
  /* on desktop the scene's own heading is redundant with the sticky panel — keep visual only */
  .tech-scene__eyebrow, .tech-scene__title { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tech-scene__card, .tech-pin__panel, .tech-scene__visual img { transition: none; }
  .tech-scene__card { transform: none; opacity: 1; }
}

/* ░░░ PKE ░░░
   Hard-code karşılığı: htmlsite/pke.html içindeki sayfaya özel <style> bloğu. */
.pke-page { --pke-pad: clamp(20px, 4vw, 64px); --pke-max: 1280px; }

/* ── Hero ── */
.pke-hero { max-width: var(--pke-max); margin: 0 auto; padding: 168px var(--pke-pad) 8px; }
.pke-hero__inner { max-width: 880px; }
.pke-hero h1 {
  margin-top: 18px; font-size: clamp(38px, 5.6vw, 80px); line-height: 0.98; font-weight: 400;
  letter-spacing: -0.012em;
}
.pke-hero__lede {
  max-width: 660px; margin-top: 26px; color: rgba(255,255,255,0.62);
  font-size: clamp(17px, 1.3vw, 20px); line-height: 1.62;
}

/* ── Problem band ── */
.pke-problems {
  max-width: var(--pke-max); margin: 44px auto 0; padding: 0 var(--pke-pad);
}
.pke-problems__label {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.4); margin-bottom: 18px;
}
.pke-problems__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border: 1px solid rgba(255,255,255,0.09); border-radius: 16px; overflow: hidden;
  background: linear-gradient(150deg, rgba(255,255,255,0.022), rgba(255,255,255,0.004));
}
.pke-problem { padding: 26px 24px; border-left: 1px solid rgba(255,255,255,0.08); }
.pke-problem:first-child { border-left: 0; }
.pke-problem svg { width: 26px; height: 26px; color: #d1a8ff; margin-bottom: 16px; }
.pke-problem h3 { font-size: 15.5px; font-weight: 600; line-height: 1.25; }
.pke-problem p { margin-top: 8px; color: rgba(255,255,255,0.55); font-size: 13px; line-height: 1.55; }

/* ── Products ── */
.pke-products { max-width: var(--pke-max); margin: 0 auto; padding: 60px var(--pke-pad) 30px; }
.pke-prod {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px);
  align-items: center; padding: clamp(40px, 5vw, 70px) 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.pke-prod:first-of-type { border-top: 0; }
/* alternate image side */
.pke-prod--rev .pke-prod__visual { order: 2; }

.pke-prod__tag {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px;
  padding: 6px 13px; border-radius: 999px;
  border: 1px solid rgba(227,191,255,0.25); background: rgba(227,191,255,0.07);
  color: rgba(227,191,255,0.92); font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
}
.pke-prod__tag .n { font-variant-numeric: tabular-nums; }
.pke-prod__title { font-size: clamp(26px, 2.8vw, 38px); line-height: 1.06; font-weight: 400; }
.pke-prod__title .accent {
  background: linear-gradient(115deg, #ffffff 8%, #e5c2ff 48%, var(--brand-mor) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.pke-prod__desc { margin-top: 18px; color: rgba(255,255,255,0.64); font-size: 16px; line-height: 1.72; max-width: 540px; }
.pke-feats { margin-top: 26px; display: flex; flex-direction: column; gap: 14px; }
.pke-feat { display: flex; gap: 14px; align-items: flex-start; }
.pke-feat__ic {
  flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  color: #d1a8ff; background: rgba(227,191,255,0.07); border: 1px solid rgba(227,191,255,0.16);
}
.pke-feat__ic svg { width: 19px; height: 19px; }
.pke-feat__t { font-size: 15px; font-weight: 600; line-height: 1.3; }
.pke-feat__d { margin-top: 3px; color: rgba(255,255,255,0.58); font-size: 13.5px; line-height: 1.55; }

/* product visual (abstract, no photo yet) */
.pke-prod__visual {
  position: relative; aspect-ratio: 4 / 3.4; border-radius: 20px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.09); background: #08080a;
  display: grid; place-items: center;
}
.pke-prod__visual::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 38%, rgba(227,191,255,0.16), transparent 62%);
}
.pke-prod__glyph { position: relative; width: 110px; height: 110px; color: rgba(227,191,255,0.85); }
.pke-prod__glyph svg { width: 100%; height: 100%; }
.pke-prod__badge {
  position: absolute; left: 18px; bottom: 18px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px;
  font-size: 12.5px; color: #fff; background: rgba(12,12,14,0.78); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.12);
}
.pke-prod__badge svg { width: 14px; height: 14px; color: #e5c2ff; }

/* ── Closing CTA (frameless) ── */
/* ── Savunma sayfası (page-savunma.php) ──
   Kendine özgü görsel kimlik: taktik grid dokusu + radar animasyonlu hero,
   teknik döküman (şartname) düzeninde yaklaşım bölümü, HUD köşebentli
   kabiliyet kartları ve brief paneli CTA. Süreç zaman çizelgesi ortak
   proc-* bileşenini kullanır. */

/* — Bölüm yüzeyleri —
   Tam siyah zeminde içerik blokları birbirine karışıyordu. Her ana bölüm,
   sayfa container'ını bozmadan viewport genişliğinde farklı bir koyu yüzeye
   oturur. Mor ışıklar çok düşük opaklıkta tutulur; metin ve etkileşimli
   sahneler önde kalır. */
.sav-main {
  position: relative;
  isolation: isolate;
  background: #050506;
}
.sav-main > :is(.sav-signals, .sav-anc, .sav-rev, .sav-usecases, .sav-process, .sav-section--surec, .proc-timeline, .sav-cta) {
  position: relative;
  isolation: isolate;
}
.sav-main > :is(.sav-signals, .sav-anc, .sav-rev, .sav-usecases, .sav-process, .sav-section--surec, .proc-timeline, .sav-cta)::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  pointer-events: none;
}
.sav-main > .sav-signals::before {
  border-top: 1px solid rgba(var(--brand-rgb), 0.13);
  background:
    radial-gradient(70% 70% at 88% 4%, rgba(var(--brand-rgb), 0.09), transparent 68%),
    linear-gradient(180deg, #0d0a11 0%, #09070c 100%);
}
.sav-main > .sav-anc::before {
  border-top: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  background:
    radial-gradient(54% 90% at 8% 38%, rgba(var(--brand-rgb), 0.11), transparent 72%),
    radial-gradient(44% 70% at 96% 78%, rgba(98, 127, 255, 0.055), transparent 74%),
    linear-gradient(180deg, #070609 0%, #0a0710 48%, #050506 100%);
}
.sav-main > .sav-rev::before {
  border-top: 1px solid rgba(var(--brand-rgb), 0.11);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background:
    radial-gradient(48% 58% at 50% 30%, rgba(var(--brand-rgb), 0.105), transparent 72%),
    radial-gradient(54% 55% at 50% 100%, rgba(78, 101, 190, 0.045), transparent 76%),
    linear-gradient(180deg, #0c0911 0%, #070609 58%, #050506 100%);
}
.sav-main > .sav-usecases::before {
  border-top: 1px solid rgba(var(--brand-rgb), 0.11);
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  background:
    radial-gradient(58% 52% at 88% 4%, rgba(var(--brand-rgb), 0.085), transparent 72%),
    radial-gradient(42% 46% at 6% 92%, rgba(72, 117, 170, 0.055), transparent 75%),
    linear-gradient(180deg, #070609 0%, #0b0910 48%, #07070a 100%);
}
.sav-main > .sav-section--surec::before,
.sav-main > .proc-timeline::before {
  background:
    radial-gradient(70% 55% at 4% 0%, rgba(var(--brand-rgb), 0.05), transparent 68%),
    #08090d;
}
.sav-main > .sav-section--surec::before {
  border-top: 1px solid rgba(255, 255, 255, 0.075);
}
.sav-main > .proc-timeline::before {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.sav-main > .sav-process::before {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  background:
    radial-gradient(50% 42% at 7% 12%, rgba(var(--brand-rgb), 0.055), transparent 74%),
    linear-gradient(180deg, #08080a 0%, #060608 100%);
}
.sav-main > .sav-cta::before {
  background:
    radial-gradient(65% 100% at 50% 100%, rgba(var(--brand-rgb), 0.08), transparent 70%),
    linear-gradient(180deg, #050506 0%, #09070c 100%);
}

/* — Hero: taktik radar sahnesi — */
.sav-hero {
  position: relative;
  /* global `section { max-width: 1480px }` kapağını sıfırla — video tam genişlik */
  max-width: none;
  margin: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 0;
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  /* kısa laptop ekranlarında (720p) sabit 168px üst boşluk alanı yiyor */
  padding: clamp(110px, 18vh, 168px) var(--pke-pad, 40px) clamp(48px, 9vh, 80px);
}
/* Hero içeriği görselin merkezinde tek bir kompozisyon olarak toplanır. */
.sav-hero > .sav-hero__inner {
  width: 100%;
  max-width: calc(var(--pke-max, 1480px) - 2 * var(--pke-pad, 40px));
  margin: 0 auto;
}
/* arka plan videosu — video dark temalı, hafif karartma */
.sav-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.6);
}

/* Hero videosunu alt sınırda kesme; ANC bölümünün koyu/mor yüzeyine erit. */
.sav-hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: -1px;
  left: 0;
  height: clamp(260px, 38vh, 430px);
  background:
    radial-gradient(ellipse at 50% 100%, rgba(var(--brand-rgb), 0.09), transparent 58%),
    linear-gradient(
      180deg,
      rgba(7, 6, 9, 0) 0%,
      rgba(7, 6, 9, 0.12) 18%,
      rgba(7, 6, 9, 0.46) 48%,
      rgba(7, 6, 9, 0.78) 76%,
      rgba(7, 6, 9, 0.9) 100%
    );
  pointer-events: none;
}

/* Bölüm sınırını gerçekten aşan ikinci katman: hero ve ANC yüzeylerini
   aynı karanlığın içinde birleştirir, yatay kesim çizgisini yok eder. */
.sav-main > .sav-anc::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: -320px;
  left: 50%;
  width: 100vw;
  height: 680px;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse at 50% 48%, rgba(var(--brand-rgb), 0.12), transparent 64%),
    linear-gradient(
      180deg,
      rgba(7, 6, 9, 0) 0%,
      rgba(7, 6, 9, 0.2) 14%,
      rgba(7, 6, 9, 0.58) 30%,
      rgba(7, 6, 9, 0.88) 45%,
      rgba(7, 6, 9, 0.92) 56%,
      rgba(7, 6, 9, 0.68) 72%,
      rgba(7, 6, 9, 0.26) 89%,
      rgba(7, 6, 9, 0) 100%
    );
  filter: blur(26px);
  pointer-events: none;
}

/* içerik: tam ortalı kompozisyon */
.sav-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.sav-hero__inner h1 {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.sav-hero__inner h1 > .pdp-material__accent {
  display: block;
}
/* Hero girişinde kelimeler kendi maskelerinin içinden yukarı açılır. */
.sav-hero h1 .word-wrap {
  display: inline-block;
  overflow: hidden;
  padding-block: 0.12em 0.16em;
  margin-block: -0.12em -0.16em;
  vertical-align: bottom;
}
.sav-hero h1 .word-inner {
  display: inline-block;
  will-change: transform;
}
/* splitWords() accent metnini iç span'lara böler; gradient'i her animasyonlu
   kelimeye taşı ki parent'taki şeffaf text-fill yazıyı görünmez bırakmasın. */
.sav-hero h1 .pdp-material__accent .word-inner {
  background: linear-gradient(115deg, var(--brand-mor) 0%, #e5c2ff 52%, #ffffff 92%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* künye çizgili kicker — iki yanda simetrik çizgi */
.sav-hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand-soft);
}
.sav-hero__kicker::before,
.sav-hero__kicker::after {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--brand-soft);
}
/* tipografi hakkımızda sayfasını izler (about-hero h1: 92px / 0.96) —
   küçük laptop genişliklerinde (1280–1440) kademeli küçülür */
.sav-hero h1 {
  margin-top: 22px;
  font-size: clamp(48px, 6.2vw, 92px);
  font-weight: 400;
  line-height: 1.06;
  color: #fff;
  text-wrap: balance;
}
.sav-hero__lede {
  margin: 26px auto 0;
  max-width: 640px;
  color: rgba(255, 255, 255, 0.66);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.62;
}
.sav-hero__inner .about-hero__actions {
  justify-content: center;
}

/* — Çözüm ortaklığı: akustik sinyal sahnesi —
   Uzun section içinde 100svh sahne sabit kalır. JS, scroll ilerlemesini
   başlık geçişlerine ve canvas üzerindeki perspektif ışınlarına bağlar. */
.sav-signals {
  position: relative;
  max-width: none;
  height: 430svh;
  margin: clamp(56px, 6vw, 96px) 0 0;
  padding: 0;
}
.sav-signals__stage {
  --signal-entry: 0;
  --signal-grid-opacity: 0;
  --signal-entry-scale: 1.035;
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: min(620px, 100svh);
  overflow: hidden;
  background: #050506;
}
.sav-signals__stage::before,
.sav-signals__stage::after {
  content: "";
  position: absolute;
  z-index: 2;
  pointer-events: none;
  opacity: var(--signal-entry);
}
.sav-signals__stage::before {
  inset: 0;
  background: radial-gradient(circle at 50% 50%, transparent 0 27%, rgba(5, 5, 6, 0.18) 56%, rgba(5, 5, 6, 0.78) 100%);
}
.sav-signals__stage::after {
  inset: 0;
  background: #000000;
  background: radial-gradient(
    circle at 50% calc(50% + 28px),
    rgba(0, 0, 0, 0.99) 15%,
    rgba(0, 0, 0, 0) 39%
  );
}
.sav-signals__canvas,
.sav-signals__grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.sav-signals__canvas {
  z-index: 1;
  display: block;
  background: radial-gradient(circle at 50% calc(50% + 28px), rgba(174, 112, 255, 0.1), rgba(76, 110, 255, 0.028) 30%, transparent 72%);
  opacity: var(--signal-entry);
  transform: scale(var(--signal-entry-scale));
  transform-origin: center;
}
.sav-signals__grid {
  z-index: 2;
  opacity: var(--signal-grid-opacity);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-position: center;
  background-size: min(25vw, 360px) min(34vh, 260px);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, black, transparent 82%);
  mask-image: radial-gradient(circle at 50% 50%, black, transparent 82%);
  pointer-events: none;
}

/* ANC panelinden sinyal sahnesine geçen karanlık/marka ışığı köprüsü. */
.sav-main > .sav-signals::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: -210px;
  left: 50%;
  width: 100vw;
  height: 390px;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse at 50% 42%, rgba(var(--brand-rgb), 0.085), transparent 58%),
    linear-gradient(
      180deg,
      rgba(5, 5, 6, 0) 0%,
      rgba(5, 5, 6, 0.38) 22%,
      rgba(5, 5, 6, 0.86) 47%,
      rgba(5, 5, 6, 0.58) 70%,
      rgba(5, 5, 6, 0.16) 88%,
      rgba(5, 5, 6, 0) 100%
    );
  filter: blur(12px);
  pointer-events: none;
}
.sav-signals__titles {
  position: absolute;
  z-index: 4;
  inset: 74px 0 0;
  pointer-events: none;
}
.sav-signals__title {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: clamp(28px, 5vw, 80px);
  color: #fff;
  font-size: clamp(48px, 6vw, 104px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.08;
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
  opacity: 0;
  transform: translate3d(0, 56px, 0) scale(0.96);
  will-change: opacity, transform;
}
.sav-signals__title:first-child { opacity: var(--signal-entry); transform: none; }
.sav-signals__title span {
  display: block;
  max-width: 14ch;
  padding: 0.1em 0 0.16em;
  text-shadow:
    0 4px 26px rgba(0, 0, 0, 0.9),
    0 0 70px rgba(var(--brand-rgb), 0.15);
}
@media (max-width: 760px) {
  .sav-signals { height: 360svh; margin-top: 40px; }
  .sav-signals__stage { min-height: min(540px, 100svh); }
  .sav-signals__titles { inset: 68px 0 0; }
  .sav-signals__title {
    padding: 30px 20px;
    font-size: clamp(38px, 11vw, 60px);
    line-height: 1.1;
  }
  .sav-signals__title span { max-width: 11ch; }
}

@media (prefers-reduced-motion: reduce) {
  .sav-signals {
    height: auto;
  }
  .sav-signals__stage {
    --signal-entry: 1;
    --signal-grid-opacity: 0.38;
    --signal-entry-scale: 1;
    position: relative;
    height: auto;
    min-height: 0;
    padding: 120px var(--pke-pad, 40px) 90px;
  }
  .sav-signals__canvas { opacity: 1; transform: none; }
  .sav-signals__stage::after { display: none; }
  .sav-signals__titles {
    position: relative;
    inset: auto;
    display: grid;
    gap: 1px;
  }
  .sav-signals__title,
  .sav-signals__title:first-child {
    position: relative;
    inset: auto;
    display: block;
    padding: 24px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: clamp(34px, 7vw, 64px);
    text-align: left;
    opacity: 1;
    transform: none;
  }
  .sav-signals__title span { max-width: 18ch; }
}

/* — ANC sahnesi: karşıt faz dalga gösterimi — */
.sav-anc {
  max-width: var(--pke-max, 1480px);
  margin: 0 auto;
  padding: clamp(170px, 16vw, 260px) var(--pke-pad, 40px) clamp(76px, 8vw, 120px);
}
.sav-anc__panel {
  position: relative;
  z-index: 1;
  padding: 0;
}
.sav-anc__panel::before {
  content: "";
  position: absolute;
  width: min(72vw, 980px);
  height: 420px;
  top: -150px;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(var(--brand-rgb), 0.12), transparent 68%);
  filter: blur(28px);
  pointer-events: none;
}
.sav-anc__panel::after {
  display: none;
}
.sav-anc__panel > * {
  position: relative;
  z-index: 1;
}
.sav-anc .sav-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: none;
  margin-bottom: clamp(48px, 6vw, 78px);
  text-align: center;
}
.sav-anc .sav-head .about-kicker {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.sav-anc .sav-head .about-kicker::before,
.sav-anc .sav-head .about-kicker::after {
  content: "";
  width: 32px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--brand-rgb), 0.8));
}
.sav-anc .sav-head .about-kicker::after {
  transform: scaleX(-1);
}
.sav-anc .sav-head h2 {
  max-width: 980px;
  margin-top: 18px;
  font-size: clamp(42px, 4.2vw, 66px);
}
.sav-anc .sav-head p {
  max-width: 720px;
  margin: 22px auto 0;
  padding: 0;
  color: rgba(255, 255, 255, 0.65);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.7;
}
.sav-anc__scope {
  position: relative;
  border-top: 1px solid rgba(var(--brand-rgb), 0.34);
  border-bottom: 1px solid rgba(var(--brand-rgb), 0.2);
  border-right: 0;
  border-left: 0;
  border-radius: 0;
  overflow: hidden;
  background:
    linear-gradient(rgba(255, 255, 255, 0.026) 1px, transparent 1px) center / 48px 48px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px) center / 48px 48px,
    radial-gradient(70% 110% at 50% 50%, rgba(var(--brand-rgb), 0.075), transparent 74%),
    linear-gradient(90deg, transparent, rgba(4, 3, 7, 0.9) 10%, rgba(4, 3, 7, 0.9) 90%, transparent);
  padding: 64px 0 0;
  box-shadow:
    inset 0 34px 60px rgba(0, 0, 0, 0.34),
    inset 0 -34px 60px rgba(0, 0, 0, 0.28);
}
.sav-anc__scope::before {
  content: "LIVE / ANC";
  position: absolute;
  top: 27px;
  left: 26px;
  z-index: 1;
  color: rgba(255, 255, 255, 0.42);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
}
.sav-anc__scope::after {
  content: "";
  position: absolute;
  top: 31px;
  left: 112px;
  z-index: 1;
  width: min(20vw, 260px);
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--brand-rgb), 0.6), transparent);
  pointer-events: none;
}
.sav-anc__scope canvas {
  display: block;
  width: 100%;
}
/* ANC anahtarı — hem gösterge hem DÜĞME: tıklayınca ANC açılıp kapanır
   (ilk tıklamada otomatik anlatı devri biter — earfit-pages.js).
   Yapı: ANC etiketi + ON/OFF durumu + kaydırmalı topuzlu anahtar rayı. */
.sav-anc__status {
  position: absolute;
  top: 16px; right: 18px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 12px 20px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.45);
  font-family: var(--font-main);
  cursor: pointer;
  transition: border-color 0.35s var(--easing), box-shadow 0.35s var(--easing), background 0.35s var(--easing);
}
.sav-anc__status:hover {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.05);
}
.sav-anc__status:focus-visible {
  outline: 2px solid var(--brand-soft);
  outline-offset: 2px;
}
.sav-anc__status-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #fff;
}
.sav-anc__status-state {
  min-width: 32px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.45);
  font-variant-numeric: tabular-nums;
  transition: color 0.35s var(--easing);
}
.sav-anc__status.is-on .sav-anc__status-state {
  color: var(--brand-soft);
  text-shadow: 0 0 14px rgba(var(--brand-rgb), 0.7);
}
/* anahtar rayı + topuz */
.sav-anc__status-track {
  position: relative;
  width: 46px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  transition: background 0.35s var(--easing), border-color 0.35s var(--easing), box-shadow 0.35s var(--easing);
}
.sav-anc__status-knob {
  position: absolute;
  top: 2px; left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.65);
  transition: transform 0.35s var(--easing), background 0.35s var(--easing), box-shadow 0.35s var(--easing);
}
.sav-anc__status.is-on .sav-anc__status-track {
  background: rgba(var(--brand-rgb), 0.22);
  border-color: rgba(var(--brand-rgb), 0.6);
  box-shadow: 0 0 18px rgba(var(--brand-rgb), 0.25);
}
.sav-anc__status.is-on .sav-anc__status-knob {
  transform: translateX(22px);
  background: var(--brand-lilac);
  box-shadow: 0 0 12px rgba(var(--brand-rgb), 0.9);
}
@media (max-width: 640px) {
  .sav-anc__status { top: 10px; right: 10px; padding: 10px 12px 10px 16px; gap: 9px; }
}
.sav-anc__status.is-on {
  color: var(--brand-soft);
  border-color: rgba(var(--brand-rgb), 0.5);
  box-shadow: 0 0 22px rgba(var(--brand-rgb), 0.2);
}

.sav-anc__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  justify-content: center;
  padding: 18px 22px 20px;
  border-top: 1px solid rgba(var(--brand-rgb), 0.12);
  background: linear-gradient(90deg, transparent, rgba(var(--brand-rgb), 0.035), transparent);
  font-size: 12.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.sav-anc__legend span { display: inline-flex; align-items: center; gap: 9px; }
.sav-anc__sw { width: 18px; height: 2px; border-radius: 2px; display: inline-block; }
.sav-anc__sw--noise { background: rgba(255, 255, 255, 0.35); }
.sav-anc__sw--anti  { background: rgba(209, 168, 255, 0.7); }
.sav-anc__sw--out   { background: var(--brand-lilac); box-shadow: 0 0 10px rgba(var(--brand-rgb), 0.8); }

@media (max-width: 640px) {
  .sav-anc { padding-top: 120px; padding-bottom: 64px; }
  .sav-anc__panel { padding: 0; }
  .sav-anc .sav-head { padding: 0 8px; }
  .sav-anc .sav-head h2 { font-size: clamp(36px, 11vw, 48px); }
  .sav-anc__scope { padding-top: 64px; border-radius: 0; }
  .sav-anc__scope::before { left: 16px; }
  .sav-anc__scope::after { display: none; }
  .sav-anc__legend { justify-content: flex-start; gap: 10px 18px; padding-inline: 16px; }
}

/* ANC ölçüm konsolu — jenerik grafik kutusu yerine katmanlı teknik panel. */
.sav-anc__scope {
  padding: 0;
  border: 1px solid rgba(213, 174, 255, 0.2);
  border-radius: 26px;
  background:
    radial-gradient(90% 150% at 50% 45%, rgba(var(--brand-rgb), 0.07), transparent 66%),
    linear-gradient(145deg, rgba(18, 15, 23, 0.96), rgba(5, 5, 7, 0.98));
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
  transition: border-color 0.45s ease, box-shadow 0.45s ease;
}
.sav-anc__scope.is-on {
  border-color: rgba(var(--brand-rgb), 0.4);
  box-shadow:
    0 34px 100px rgba(0, 0, 0, 0.46),
    0 0 44px rgba(var(--brand-rgb), 0.075),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.sav-anc__scope::before,
.sav-anc__scope::after { display: none; }

.sav-anc__toolbar {
  position: relative;
  z-index: 3;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 18px 14px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.025), transparent 52%);
}
.sav-anc__live {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}
.sav-anc__live-dot {
  width: 9px;
  height: 9px;
  border: 2px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.34);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.035);
  transition: border-color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
}
.sav-anc__scope.is-on .sav-anc__live-dot {
  border-color: rgba(229, 194, 255, 0.78);
  background: var(--brand-lilac);
  box-shadow: 0 0 0 5px rgba(var(--brand-rgb), 0.09), 0 0 18px rgba(var(--brand-rgb), 0.62);
}

.sav-anc__status {
  position: relative;
  top: auto;
  right: auto;
  padding: 10px 13px 10px 17px;
  background: rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.sav-anc__viewport {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px) center / 48px 48px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px) center / 48px 48px,
    radial-gradient(ellipse at 50% 50%, rgba(var(--brand-rgb), 0.075), transparent 68%),
    #060508;
}
.sav-anc__viewport::before,
.sav-anc__viewport::after {
  content: "";
  position: absolute;
  z-index: 2;
  pointer-events: none;
}
.sav-anc__viewport::before {
  inset: 0;
  background: linear-gradient(90deg, rgba(5, 5, 7, 0.72), transparent 8%, transparent 92%, rgba(5, 5, 7, 0.72));
}
.sav-anc__viewport::after {
  top: 50%;
  right: 24px;
  left: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(229, 194, 255, 0.12) 14%, rgba(229, 194, 255, 0.12) 86%, transparent);
}
.sav-anc__scope canvas {
  position: relative;
  z-index: 1;
  width: 100%;
}

.sav-anc__footer {
  position: relative;
  z-index: 3;
  min-height: 74px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  border-top: 1px solid rgba(255, 255, 255, 0.075);
  background: rgba(7, 6, 9, 0.84);
}
.sav-anc__legend {
  justify-content: flex-start;
  align-content: center;
  gap: 10px 24px;
  padding: 18px 24px;
  border-top: 0;
  background: none;
  font-size: 10px;
  letter-spacing: 0.09em;
}
@media (max-width: 760px) {
  .sav-anc__scope { border-radius: 20px; }
  .sav-anc__toolbar { min-height: 64px; padding: 10px 10px 10px 16px; }
  .sav-anc__status { padding: 9px 10px 9px 13px; }
  .sav-anc__footer { grid-template-columns: 1fr; }
  .sav-anc__legend { gap: 9px 16px; padding: 15px 16px; }
}

@media (max-width: 480px) {
  .sav-anc__live { font-size: 9px; letter-spacing: 0.12em; }
  .sav-anc__status-label { display: none; }
  .sav-anc__legend { display: grid; grid-template-columns: 1fr; }
}

/* — Kabiliyetler: "revolver" sahnesi —
   Masaüstünde (.is-armed) sahne pinlenir: merkezde başlık + aktif kabiliyet
   detayı, çevresinde çember üzerinde dönen hazneler (earfit-pages.js sürer).
   Mobil / GSAP yoksa .sav-rev__fallback grid'i görünür. */
.sav-rev { position: relative; }
/* pinli sahne zaten 100vh — global `section` 120px padding'i araya ölü boşluk
   koyuyor; masaüstü (is-armed) modda sıfırla, sahne önceki bölüme yaklaşsın.
   Mobil fallback global padding'i korur. */
.sav-rev.is-armed { padding: 0; }
.sav-rev__stage { display: none; }
.sav-rev.is-armed .sav-rev__stage {
  /* --rev-nav: fixed header yüksekliği — sahne, nav'ın ALTINDA kalan alana
     göre ortalanır; üst/alt boşluklar eşitlenir. */
  --rev-nav: 74px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  padding-top: var(--rev-nav);
  box-sizing: border-box;
  overflow: hidden;
}
.sav-rev.is-armed .sav-rev__stage::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 48%, #000, transparent 76%);
  mask-image: radial-gradient(ellipse at 50% 48%, #000, transparent 76%);
  opacity: calc(var(--rev-in, 0) * 0.72);
}
.sav-rev.is-armed .sav-rev__fallback { display: none; }

/* çember: ince kesikli halka — GENİŞ, merkezi sahnenin alt kenarında:
   yalnız üst yarısı görünür, alt yarısı kırpılır (overflow: hidden) */
.sav-rev__ring {
  position: absolute;
  z-index: 1;
  left: 50%; top: 100%;
  width: min(150vh, 1700px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(calc(0.92 + 0.08 * var(--rev-in, 0)));
  border-radius: 50%;
  border: 1px dashed rgba(var(--brand-rgb), 0.17);
  box-shadow:
    0 0 80px rgba(var(--brand-rgb), 0.045),
    inset 0 0 80px rgba(var(--brand-rgb), 0.035);
  opacity: var(--rev-in, 0);
  pointer-events: none;
}
/* not: tek temiz halka — çentikler ve tepe yuvası bilinçli olarak yok;
   aktif hazneyi parlaması işaretler. */

/* hazne yörüngesi: çemberle aynı boyutta görünmez kutu — JS yarıçapı buradan ölçer */
.sav-rev__orbit {
  position: absolute;
  z-index: 1;
  left: 50%; top: 100%;
  width: min(150vh, 1700px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
/* hazne: revolver fişek yatağı — metalik yüzey + iç bilezik */
.sav-rev__chamber {
  position: absolute;
  left: 50%; top: 50%;
  width: 76px; height: 76px;
  margin: -38px 0 0 -38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.1), transparent 46%),
    radial-gradient(circle at 50% 120%, rgba(var(--brand-rgb), 0.14), transparent 60%),
    linear-gradient(160deg, #16161a, #0a0a0c 65%);
  color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.48);
  transition: border-color 0.3s var(--easing), box-shadow 0.3s var(--easing), color 0.3s var(--easing);
  will-change: transform, opacity;
}
/* ikon ↔ görsel geçişi: --act JS'ten gelir (0 = yanda, 1 = tepede) */
.sav-rev__chamber svg {
  width: 23px;
  height: 23px;
  opacity: calc(1 - var(--act, 0));
}
/* tepede daireyi tamamen örten DİKDÖRTGEN görsel kartı — büyüyerek belirir.
   Boyut vh tabanlı: kısa laptop ekranlarında (720p) küçülür, merkez metne
   taşmaz. Ortalamayı margin yerine translate yapar — akışkan boyutla uyumlu.
   (transform CSS'indir; GSAP yalnız üst .sav-rev__chamber'ı sürer.) */
.sav-rev__chamber-img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(720px, 68vh);
  max-width: none; /* global img{max-width:100%} kuralını ez — hazne 94px */
  aspect-ratio: 340 / 214;
  height: auto;
  object-fit: cover;
  border-radius: 15px;
  border: 1px solid rgba(var(--brand-rgb), 0.42);
  filter: saturate(0.78) contrast(1.08) brightness(0.9);
  box-shadow:
    0 28px 72px rgba(0, 0, 0, 0.62),
    0 0 54px rgba(var(--brand-rgb), 0.16);
  opacity: var(--act, 0);
  transform: translate(-50%, -50%) scale(calc(0.45 + 0.55 * var(--act, 0)));
  pointer-events: none;
}
.sav-rev__chamber.is-active {
  z-index: 2;
  border-color: rgba(var(--brand-rgb), 0.8);
  box-shadow:
    0 0 28px rgba(var(--brand-rgb), 0.32),
    0 10px 28px rgba(0, 0, 0, 0.55),
    inset 0 0 20px rgba(var(--brand-rgb), 0.14);
  color: var(--brand-soft);
}

/* merkez: başlık + kısa açıklama + aktif kabiliyet detayı */
/* Merkez: başlık (faz 1) ve özellik (faz 2) AYNI hücrede üst üste durur —
   biri diğerinin yerini alırken kompozisyon zıplamaz, her şey tam merkezde. */
.sav-rev__core {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  /* yarım çemberin iç boşluğuna otursun — tepe hazneden uzak dursun */
  margin-top: 18vh;
  max-width: min(72vh, 760px);
  text-align: center;
  opacity: var(--rev-in, 0);
  transform: translateY(calc((1 - var(--rev-in, 0)) * 40px));
}
.sav-rev__head,
.sav-rev__detail {
  grid-area: 1 / 1;
}
/* merkez ışıması — metin karanlıkta yüzmesin */
.sav-rev__core::before {
  content: "";
  position: absolute;
  inset: -72px -120px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--brand-rgb), 0.1), rgba(0, 0, 0, 0.62) 57%, transparent 80%);
  filter: blur(4px);
}
/* faz 1 → faz 2 geçişi: --rev-fm (0..1) earfit-pages.js'ten sürülür */
.sav-rev__head {
  opacity: calc(1 - var(--rev-fm, 0));
  transform: translateY(calc(var(--rev-fm, 0) * -18px));
  pointer-events: none;
}
.sav-rev__count {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--brand-soft);
  font-variant-numeric: tabular-nums;
}
.sav-rev__count::before,
.sav-rev__count::after {
  content: "";
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--brand-rgb), 0.68));
}
.sav-rev__count::after { transform: scaleX(-1); }
.sav-rev__core h2 {
  margin-top: 12px;
  font-size: clamp(28px, 3vw, 46px);
  font-weight: 400;
  line-height: 1.02;
  color: #fff;
  text-wrap: balance;
}
.sav-rev__lede {
  margin: 12px auto 0;
  max-width: 46ch;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13.5px;
  line-height: 1.6;
}
/* faz 2: özellik merkezi devralır — BÜYÜK tipografi (opacity JS'ten) */
.sav-rev__detail {
  opacity: 0;
}
.sav-rev__detail h3 {
  font-size: clamp(28px, 3vw, 46px);
  font-weight: 500;
  line-height: 1.08;
  text-wrap: balance;
  /* sitedeki vurgulu başlıklarla aynı marka degradesi */
  padding-bottom: 0.14em;
  background: linear-gradient(115deg, var(--brand-mor) 0%, #e5c2ff 52%, #ffffff 92%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sav-rev__detail p {
  margin: 18px auto 0;
  max-width: 60ch;
  color: rgba(255, 255, 255, 0.68);
  font-size: clamp(14.5px, 1.1vw, 16.5px);
  line-height: 1.68;
}

/* Kısa laptop ekranları (720p/768p): pinli sahnede dikey alan dar —
   hazne ve görsel küçülür, merkez alçalır ve genişler (daha az satır),
   tipografi bir kademe iner. Tepe görseliyle metin çakışması böylece
   100vh içinde her kombinasyonda açık kalır. */
@media (min-width: 901px) and (max-height: 800px) {
  .sav-rev__chamber {
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
  }
  .sav-rev__chamber svg {
    width: 21px;
    height: 21px;
  }
  .sav-rev__chamber-img {
    width: min(520px, 60vh);
  }
  .sav-rev__core {
    margin-top: 22vh;
    max-width: min(76vh, 720px);
  }
  .sav-rev__core::before {
    inset: -50px -70px;
  }
  .sav-rev__core h2 {
    font-size: clamp(24px, 2.4vw, 36px);
  }
  .sav-rev__lede {
    font-size: 13px;
  }
  .sav-rev__detail h3 {
    font-size: clamp(24px, 2.6vw, 36px);
  }
  .sav-rev__detail p {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.6;
  }
}

/* — Yaklaşım: teknik döküman / şartname düzeni — */
.sav-principles {
  max-width: var(--pke-max, 1480px);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) var(--pke-pad, 40px);
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap: clamp(40px, 6vw, 110px);
  align-items: start;
}
.sav-principles__intro { position: sticky; top: 120px; }
.sav-principles__intro h2 {
  margin-top: 14px;
  font-size: clamp(38px, 4vw, 58px);
  font-weight: 400;
  line-height: 1.02;
  color: #fff;
}
.sav-principles__intro p {
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.56);
  font-size: 18px;
  line-height: 1.68;
}
.sav-principles__list {
  display: grid;
  gap: 14px;
}
/* madde kartları — çerçeveli, hover'da lila vurgulu */
.sav-principle {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 24px;
  align-items: start;
  padding: 28px 30px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.006));
  transition: border-color 0.35s var(--easing), background-color 0.35s var(--easing), transform 0.35s var(--easing);
}
@media (hover: hover) {
  .sav-principle:hover {
    border-color: rgba(var(--brand-rgb), 0.38);
    background:
      radial-gradient(140% 180% at 0% 0%, rgba(var(--brand-rgb), 0.07), transparent 55%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.008));
    transform: translateY(-3px);
  }
  .sav-principle:hover .sav-principle__ic {
    border-color: rgba(var(--brand-rgb), 0.5);
    color: var(--brand-lilac);
  }
}
.sav-principle__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.sav-principle__ic {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(var(--brand-rgb), 0.25);
  border-radius: 13px;
  background: rgba(var(--brand-rgb), 0.07);
  color: var(--brand-soft);
  transition: border-color 0.35s var(--easing), color 0.35s var(--easing);
}
.sav-principle__ic svg { width: 22px; height: 22px; }
.sav-principle__body h3 {
  font-size: clamp(19px, 1.7vw, 24px);
  font-weight: 500;
  color: #fff;
}
.sav-principle__body p {
  margin-top: 10px;
  max-width: 62ch;
  color: rgba(255, 255, 255, 0.6);
  font-size: 15px;
  line-height: 1.7;
}
/* küçük laptop genişliği: intro kolonu daralır, kartlara nefes kalır */
@media (max-width: 1280px) {
  .sav-principles { grid-template-columns: minmax(250px, 340px) 1fr; }
  .sav-principles__intro p { font-size: 16px; }
  .sav-principle__body p { font-size: 14.5px; }
}
@media (max-width: 980px) {
  .sav-principles { grid-template-columns: 1fr; }
  .sav-principles__intro { position: static; }
  .sav-principle { grid-template-columns: 46px 1fr; gap: 18px; padding: 22px 20px; }
  .sav-principle__ic { width: 40px; height: 40px; border-radius: 11px; }
  .sav-principle__ic svg { width: 19px; height: 19px; }
}
/* mobil tipografi — hakkımızda sayfasının 720px kırılımıyla birebir */
@media (max-width: 720px) {
  .sav-hero h1 { font-size: 48px; line-height: 1.08; }
  .sav-hero__lede { font-size: 16px; }
  .sav-principles__intro h2,
  .sav-head h2,
  .sav-cta__panel h2 { font-size: 36px; line-height: 1.08; }
}

/* — CTA: brief paneli — */
.sav-cta {
  max-width: var(--pke-max, 1480px);
  margin: 0 auto;
  padding: 30px var(--pke-pad, 40px) 120px;
}
.sav-cta__panel {
  position: relative;
  text-align: center;
  padding: clamp(56px, 7vw, 96px) clamp(24px, 5vw, 72px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 24px;
  overflow: hidden;
  background:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px) center / 48px 48px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px) center / 48px 48px,
    radial-gradient(circle at 50% 0%, rgba(var(--brand-rgb), 0.08), transparent 55%),
    rgba(255, 255, 255, 0.012);
}
/* HUD köşebentleri */
.sav-cta__corner {
  position: absolute;
  width: 26px; height: 26px;
  border: 1.5px solid rgba(var(--brand-rgb), 0.55);
  pointer-events: none;
}
.sav-cta__corner--tl { top: 18px; left: 18px; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.sav-cta__corner--br { bottom: 18px; right: 18px; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }
.sav-cta__kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand-soft);
}
.sav-cta__panel h2 {
  margin-top: 16px;
  font-size: clamp(38px, 4vw, 58px);
  font-weight: 400;
  line-height: 1.02;
  color: #fff;
  text-wrap: balance;
}
.sav-cta__panel p {
  margin: 18px auto 30px;
  max-width: 560px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 18px;
  line-height: 1.68;
}
.sav-section {
  max-width: var(--pke-max, 1480px);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 90px) var(--pke-pad, 40px) 10px;
}
.sav-section--surec { padding-bottom: 0; }
.sav-head { max-width: 860px; margin-bottom: clamp(32px, 4vw, 52px); }
.sav-head h2 {
  margin-top: 14px;
  font-size: clamp(38px, 4vw, 58px);
  font-weight: 400;
  line-height: 1.02;
  color: #fff;
  text-wrap: balance;
}
.sav-head p {
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 18px;
  line-height: 1.68;
  max-width: 640px;
}
.sav-caps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding-bottom: clamp(24px, 3vw, 48px);
}
.sav-cap {
  position: relative;
  padding: 28px 26px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 0%, rgba(var(--brand-rgb), 0.05), transparent 42%),
    rgba(255, 255, 255, 0.018);
  transition: border-color 0.35s var(--easing), background 0.35s var(--easing), transform 0.35s var(--easing);
}
/* HUD köşebentleri — hover'da hedefe kilitlenme hissi */
.sav-cap::before,
.sav-cap::after {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  border: 1.5px solid rgba(var(--brand-rgb), 0.85);
  opacity: 0;
  transition: opacity 0.3s var(--easing), transform 0.3s var(--easing);
  pointer-events: none;
}
.sav-cap::before { top: 10px; left: 10px; border-right: 0; border-bottom: 0; border-radius: 4px 0 0 0; transform: translate(4px, 4px); }
.sav-cap::after { bottom: 10px; right: 10px; border-left: 0; border-top: 0; border-radius: 0 0 4px 0; transform: translate(-4px, -4px); }
/* spec-sheet indeks numarası */
.sav-cap__no {
  position: absolute;
  top: 24px; right: 24px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.22);
  font-variant-numeric: tabular-nums;
  transition: color 0.35s var(--easing);
}
@media (hover: hover) {
  .sav-cap:hover {
    border-color: rgba(var(--brand-rgb), 0.35);
    background:
      radial-gradient(circle at 18% 0%, rgba(var(--brand-rgb), 0.09), transparent 46%),
      rgba(255, 255, 255, 0.03);
    transform: translateY(-4px);
  }
  .sav-cap:hover::before,
  .sav-cap:hover::after { opacity: 1; transform: translate(0, 0); }
  .sav-cap:hover .sav-cap__no { color: var(--brand-soft); }
}
.sav-cap__ic {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: var(--brand-soft);
  border: 1px solid rgba(var(--brand-rgb), 0.28);
  background: rgba(var(--brand-rgb), 0.06);
  margin-bottom: 18px;
}
.sav-cap h3 {
  font-size: 19px;
  font-weight: 500;
  color: #fff;
  line-height: 1.3;
}
.sav-cap p {
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14.5px;
  line-height: 1.66;
}
@media (max-width: 1100px) {
  .sav-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .sav-caps { grid-template-columns: 1fr; }

  /* Mobil kart girişi: yalnız JS gözlemcisi hazır olduğunda başlangıç
     durumunu uygula; JS çalışmazsa içerik her zaman görünür kalır. */
  .sav-caps.is-reveal-ready .sav-cap {
    opacity: 0;
    filter: blur(7px);
    transform: perspective(900px) translate3d(0, 58px, 0) rotateX(7deg) scale(0.975);
    transform-origin: 50% 0;
    transition:
      opacity 0.62s cubic-bezier(0.22, 1, 0.36, 1),
      filter 0.68s ease,
      transform 0.82s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--cap-delay, 0ms);
    will-change: opacity, filter, transform;
  }
  .sav-caps.is-reveal-ready .sav-cap.is-in {
    opacity: 1;
    filter: blur(0);
    transform: perspective(900px) translate3d(0, 0, 0) rotateX(0) scale(1);
    animation: savCapMobileLock 0.95s ease-out var(--cap-delay, 0ms) both;
  }
  .sav-caps.is-reveal-ready .sav-cap__ic,
  .sav-caps.is-reveal-ready .sav-cap__no,
  .sav-caps.is-reveal-ready .sav-cap h3,
  .sav-caps.is-reveal-ready .sav-cap p {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.48s ease, transform 0.58s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .sav-caps.is-reveal-ready .sav-cap.is-in .sav-cap__ic,
  .sav-caps.is-reveal-ready .sav-cap.is-in .sav-cap__no,
  .sav-caps.is-reveal-ready .sav-cap.is-in h3,
  .sav-caps.is-reveal-ready .sav-cap.is-in p {
    opacity: 1;
    transform: translateY(0);
  }
  .sav-caps.is-reveal-ready .sav-cap.is-in .sav-cap__ic,
  .sav-caps.is-reveal-ready .sav-cap.is-in .sav-cap__no {
    transition-delay: calc(var(--cap-delay, 0ms) + 120ms);
  }
  .sav-caps.is-reveal-ready .sav-cap.is-in h3 {
    transition-delay: calc(var(--cap-delay, 0ms) + 190ms);
  }
  .sav-caps.is-reveal-ready .sav-cap.is-in p {
    transition-delay: calc(var(--cap-delay, 0ms) + 260ms);
  }
  .sav-caps.is-reveal-ready .sav-cap.is-in::before,
  .sav-caps.is-reveal-ready .sav-cap.is-in::after {
    opacity: 0.72;
    transform: translate(0, 0);
    transition-delay: calc(var(--cap-delay, 0ms) + 300ms);
  }
}

@keyframes savCapMobileLock {
  0%, 34% {
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 54px rgba(0, 0, 0, 0.22);
  }
  66% {
    border-color: rgba(var(--brand-rgb), 0.52);
    box-shadow: 0 22px 64px rgba(0, 0, 0, 0.34), 0 0 30px rgba(var(--brand-rgb), 0.13);
  }
  100% {
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.25);
  }
}

.pke-cta { max-width: var(--pke-max); margin: 0 auto; padding: 30px var(--pke-pad) 120px; text-align: center; }
.pke-cta h2 { font-size: clamp(28px,3.2vw,42px); line-height: 1.08; font-weight: 400; }
.pke-cta p { max-width: 580px; margin: 16px auto 30px; color: rgba(255,255,255,0.62); font-size: 17px; line-height: 1.6; }

/* ── Responsive ── */
@media (max-width: 920px) {
  .pke-problems__grid { grid-template-columns: repeat(2, 1fr); }
  .pke-problem:nth-child(3) { border-left: 0; }
  .pke-problem:nth-child(3), .pke-problem:nth-child(4) { border-top: 1px solid rgba(255,255,255,0.08); }
  .pke-prod { grid-template-columns: 1fr; gap: 30px; }
  .pke-prod--rev .pke-prod__visual { order: 0; }
}
@media (max-width: 600px) {
  .pke-hero { padding: 130px 20px 8px; }
  .pke-problems, .pke-products, .pke-cta { padding-left: 20px; padding-right: 20px; }
  .pke-problems__grid { grid-template-columns: 1fr; }
  .pke-problem { border-left: 0 !important; border-top: 1px solid rgba(255,255,255,0.08); }
  .pke-problem:first-child { border-top: 0; }
}

/* ░░░ Üretim Süreci ░░░
   Hard-code karşılığı: htmlsite/surec.html içindeki sayfaya özel <style> bloğu. */
.proc-page { --proc-pad: clamp(20px, 4vw, 64px); --proc-max: 1180px; }

/* ── Hero ── */
.proc-hero { max-width: var(--proc-max); margin: 0 auto; padding: 168px var(--proc-pad) 48px; }
.proc-hero__inner { max-width: 860px; }
.proc-hero h1 {
  margin-top: 18px; font-size: clamp(40px, 6vw, 84px); line-height: 0.97; font-weight: 400;
  letter-spacing: -0.012em;
}
.proc-hero__lede {
  max-width: 640px; margin-top: 28px; color: rgba(255,255,255,0.62);
  font-size: clamp(17px, 1.3vw, 20px); line-height: 1.62;
}
.proc-hero__meta {
  display: flex; flex-wrap: wrap; gap: 28px; margin-top: 38px;
}
.proc-hero__stat strong {
  display: block; font-size: clamp(26px, 2.6vw, 34px); font-weight: 500; line-height: 1;
  background: linear-gradient(120deg, #ffffff, #e5c2ff 70%, var(--brand-mor));
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.proc-hero__stat span { display: block; margin-top: 8px; color: rgba(255,255,255,0.5); font-size: 13.5px; }

/* ── Timeline ── */
.proc-timeline {
  position: relative; max-width: var(--proc-max); margin: 0 auto;
  padding: 30px var(--proc-pad) 60px;
}
.proc-steps { position: relative; }
/* the vertical rail sits BEHIND the nodes (z-index 0; steps are z-index 1) */
.proc-steps::before {
  content: ""; position: absolute; z-index: 0; top: 14px; bottom: 14px; left: 27px;
  width: 2px; background: rgba(255,255,255,0.1); border-radius: 2px;
}
/* the filled portion grows as you scroll (set via JS --fill) */
.proc-steps::after {
  content: ""; position: absolute; z-index: 0; top: 14px; left: 27px; width: 2px;
  height: var(--fill, 0%); border-radius: 2px;
  background: linear-gradient(180deg, #e5c2ff, var(--brand-mor));
  transition: height .2s linear;
}

.proc-step {
  position: relative; z-index: 1; display: grid; grid-template-columns: 56px 1fr; gap: clamp(20px, 3vw, 40px);
  align-items: center;
  padding: 0 0 clamp(36px, 5vw, 64px) 0;
}
.proc-step:last-child { padding-bottom: 0; }

.proc-step__node {
  position: relative; z-index: 2; width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; flex: none;
  background: #0c0c0e; border: 1.5px solid rgba(255,255,255,0.14);
  font-size: 17px; font-weight: 600; color: rgba(255,255,255,0.55);
  font-variant-numeric: tabular-nums;
  transition: border-color .5s ease, color .5s ease, box-shadow .5s ease, background .5s ease;
}
.proc-step.is-active .proc-step__node {
  color: #fff; border-color: rgba(229,194,255,0.9);
  background: radial-gradient(circle at 50% 38%, rgba(229,194,255,0.22), rgba(12,12,14,0.9) 70%), #0c0c0e;
  box-shadow: 0 0 0 5px rgba(229,194,255,0.08), 0 0 26px rgba(229,194,255,0.22);
}

.proc-step__card {
  border-radius: 16px; border: 1px solid rgba(255,255,255,0.08);
  background:
    radial-gradient(130% 130% at 90% 0%, rgba(227,191,255,0.06), transparent 55%),
    linear-gradient(150deg, rgba(255,255,255,0.03), rgba(255,255,255,0.006));
  padding: clamp(22px, 2.6vw, 34px) clamp(22px, 2.8vw, 38px);
  transition: transform .6s cubic-bezier(0.22,1,0.36,1), opacity .55s ease, border-color .55s ease, filter .55s ease;
  transform: translateY(20px); opacity: 0;
}
/* görünür ama aktif değil → hafif karanlık / soluk dursun */
.proc-step.is-inview .proc-step__card {
  transform: none; opacity: 0.42; filter: brightness(0.78) saturate(0.85);
}
/* aktif (o an ortadaki) → tam aydınlansın */
.proc-step.is-active .proc-step__card {
  opacity: 1; filter: none; border-color: rgba(227,191,255,0.2);
}

.proc-step__kicker {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px;
  color: rgba(227,191,255,0.9); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.proc-step__kicker svg { width: 15px; height: 15px; }
.proc-step__title { font-size: clamp(21px, 2vw, 28px); line-height: 1.1; font-weight: 400; }
.proc-step__text { margin-top: 14px; color: rgba(255,255,255,0.66); font-size: 15.5px; line-height: 1.72; }
/* metin artık ACF wysiwyg'den <p>'li gelir (div sarmalayıcı) — iç boşlukları sıfırla */
.proc-step__text p { margin: 0 0 10px; }
.proc-step__text p:last-child { margin-bottom: 0; }
.proc-step__text a { color: #d1a8ff; text-decoration: none; border-bottom: 1px solid rgba(209,168,255,0.4); }
@media (hover:hover) { .proc-step__text a:hover { border-bottom-color: #d1a8ff; } }
/* highlight chip for addresses/key data */
.proc-chip {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
  padding: 9px 14px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.025);
  color: rgba(255,255,255,0.82); font-size: 13.5px;
}
.proc-chip svg { width: 15px; height: 15px; color: #d1a8ff; flex: none; }

/* ── Closing CTA ── */
.proc-cta { max-width: var(--proc-max); margin: 0 auto; padding: 20px var(--proc-pad) 130px; }
.proc-cta__inner {
  position: relative; padding: 48px 24px; text-align: center;
}
.proc-cta__inner h2 { font-size: clamp(28px,3.2vw,42px); line-height: 1.08; font-weight: 400; }
.proc-cta__inner p { max-width: 560px; margin: 16px auto 30px; color: rgba(255,255,255,0.62); font-size: 17px; line-height: 1.6; }

/* ── Responsive ── */
@media (max-width: 640px) {
  .proc-hero { padding: 130px 20px 40px; }
  .proc-timeline, .proc-cta { padding-left: 20px; padding-right: 20px; }
  .proc-step { grid-template-columns: 44px 1fr; gap: 16px; }
  .proc-step__node { width: 44px; height: 44px; font-size: 15px; }
  .proc-steps::before, .proc-steps::after { left: 21px; }
  .proc-cta__inner { padding: 36px 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .proc-step__card { transition: none; transform: none; opacity: 1; }
  .proc-steps::after { transition: none; }
}

/* ── Savunma · statik proje süreci kartları ──
   Hareketli sahnelerden sonra scroll animasyonsuz, kolay taranan kart grid'i. */
@property --sav-card-glow-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes sav-card-border-glow {
  to { --sav-card-glow-angle: 360deg; }
}
@property --sav-usecase-border-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes sav-usecase-border-orbit {
  to { --sav-usecase-border-angle: 360deg; }
}
@keyframes sav-usecase-signal {
  0%, 100% { opacity: 0.45; transform: scaleY(0.72); }
  50% { opacity: 1; transform: scaleY(1.18); }
}

/* ── Savunma · operasyonel kullanım alanları ──
   Dört eşit ürün kartı yerine geniş/dar ritimli, tam görsel senaryo panoları.
   Etkileşim yalnız hover'da çalışır; scroll sırasında JS/rAF yükü oluşturmaz. */
.sav-usecases {
  max-width: var(--pke-max, 1480px);
  margin: 0 auto;
  padding: clamp(96px, 11vw, 164px) var(--pke-pad, 40px) clamp(92px, 10vw, 148px);
}
.sav-usecases__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.65fr);
  gap: clamp(38px, 7vw, 110px);
  align-items: end;
  margin-bottom: clamp(42px, 5.5vw, 76px);
}
.sav-usecases__intro h2 {
  max-width: 820px;
  margin-top: 16px;
  color: #fff;
  font-size: clamp(40px, 4.6vw, 68px);
  font-weight: 400;
  line-height: 1.01;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.sav-usecases__intro h2 .pdp-material__accent {
  display: block;
  padding-bottom: 0.08em;
}
.sav-usecases__intro > p {
  position: relative;
  max-width: 470px;
  margin-bottom: 7px;
  padding-left: 24px;
  border-left: 1px solid rgba(var(--brand-rgb), 0.4);
  color: rgba(255, 255, 255, 0.58);
  font-size: 16px;
  line-height: 1.72;
}
.sav-usecases__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
}
.sav-usecase {
  --sav-use-x: 50%;
  --sav-use-y: 45%;
  --sav-use-rx: 0deg;
  --sav-use-ry: 0deg;
  position: relative;
  isolation: isolate;
  grid-column: span 7;
  min-height: clamp(380px, 31vw, 470px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: 22px;
  background: #09090c;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
  transform: perspective(1200px) translateZ(0) rotateX(var(--sav-use-rx)) rotateY(var(--sav-use-ry));
  transform-style: preserve-3d;
  will-change: transform;
  transition: border-color 0.45s var(--easing), box-shadow 0.45s var(--easing), transform 0.45s var(--easing);
}
.sav-usecase:nth-child(2),
.sav-usecase:nth-child(3) {
  grid-column: span 5;
}
.sav-usecase:nth-child(3) .sav-usecase__image {
  object-position: 56% center;
}
.sav-usecase::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 5, 7, 0.42) 0%, transparent 35%),
    linear-gradient(0deg, rgba(5, 5, 7, 0.97) 0%, rgba(5, 5, 7, 0.63) 27%, transparent 66%),
    linear-gradient(90deg, rgba(5, 5, 7, 0.24), transparent 48%);
  pointer-events: none;
  transition: opacity 0.45s var(--easing);
}
.sav-usecase::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--sav-usecase-border-angle),
    transparent 0deg 252deg,
    rgba(var(--brand-rgb), 0.08) 270deg,
    rgba(213, 174, 255, 0.85) 306deg,
    rgba(255, 255, 255, 0.92) 318deg,
    rgba(213, 174, 255, 0.32) 338deg,
    transparent 356deg 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(var(--brand-rgb), 0.58));
  transition: opacity 0.35s var(--easing);
}
.sav-usecase__image {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.72) contrast(1.08) brightness(0.78);
  transform: scale(1.015);
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s ease;
}
.sav-usecase__flare {
  position: absolute;
  z-index: 2;
  inset: 0;
  background: radial-gradient(
    430px circle at var(--sav-use-x) var(--sav-use-y),
    rgba(210, 164, 255, 0.2),
    rgba(112, 157, 255, 0.055) 25%,
    transparent 58%
  );
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.38s ease;
}
.sav-usecase__top {
  position: absolute;
  z-index: 3;
  top: 22px;
  right: 22px;
  left: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.sav-usecase__tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  background: rgba(7, 7, 10, 0.58);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: rgba(255, 255, 255, 0.82);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.sav-usecase__tag svg {
  width: 16px;
  height: 16px;
  color: var(--brand-soft);
}
.sav-usecase__tag,
.sav-usecase__body {
  transition: transform 0.48s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s ease, background-color 0.35s ease;
}
.sav-usecase__signal {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 18px;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(7, 7, 10, 0.48);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.sav-usecase__signal i {
  display: block;
  width: 2px;
  border-radius: 999px;
  background: rgba(229, 194, 255, 0.84);
  transform-origin: bottom;
}
.sav-usecase__signal i:nth-child(1) { height: 4px; }
.sav-usecase__signal i:nth-child(2) { height: 7px; }
.sav-usecase__signal i:nth-child(3) { height: 10px; }
.sav-usecase__body {
  position: absolute;
  z-index: 3;
  right: clamp(24px, 3.2vw, 46px);
  bottom: clamp(25px, 3.2vw, 44px);
  left: clamp(24px, 3.2vw, 46px);
  max-width: 620px;
}
.sav-usecase__body h3 {
  color: #fff;
  font-size: clamp(27px, 2.6vw, 39px);
  font-weight: 450;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.sav-usecase__body p {
  max-width: 50ch;
  margin-top: 13px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 14.5px;
  line-height: 1.62;
}
@media (hover: hover) {
  .sav-usecase:hover {
    border-color: rgba(var(--brand-rgb), 0.3);
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.48), 0 0 48px rgba(var(--brand-rgb), 0.105);
    transform: perspective(1200px) translateY(-7px) rotateX(var(--sav-use-rx)) rotateY(var(--sav-use-ry));
  }
  .sav-usecase:hover::before { opacity: 0.78; }
  .sav-usecase:hover::after {
    opacity: 1;
    animation: sav-usecase-border-orbit 2.35s linear infinite;
  }
  .sav-usecase:hover .sav-usecase__flare { opacity: 1; }
  .sav-usecase:hover .sav-usecase__image {
    filter: saturate(0.92) contrast(1.07) brightness(0.91);
    transform: scale(1.065);
  }
  .sav-usecase:hover .sav-usecase__tag {
    border-color: rgba(229, 194, 255, 0.32);
    background: rgba(12, 9, 16, 0.72);
    transform: translateY(-2px);
  }
  .sav-usecase:hover .sav-usecase__body { transform: translateY(-5px); }
  .sav-usecase:hover .sav-usecase__signal i { animation: sav-usecase-signal 0.9s ease-in-out infinite; }
  .sav-usecase:hover .sav-usecase__signal i:nth-child(2) { animation-delay: 0.12s; }
  .sav-usecase:hover .sav-usecase__signal i:nth-child(3) { animation-delay: 0.24s; }
}
@media (max-width: 1040px) {
  .sav-usecases__intro {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .sav-usecases__intro > p { max-width: 620px; }
  .sav-usecase,
  .sav-usecase:nth-child(2),
  .sav-usecase:nth-child(3) {
    grid-column: span 6;
    min-height: 390px;
  }
}
@media (max-width: 680px) {
  .sav-usecases {
    padding: 78px 20px 84px;
  }
  .sav-usecases__intro { margin-bottom: 34px; }
  .sav-usecases__intro h2 { font-size: 38px; line-height: 1.06; }
  .sav-usecases__intro > p {
    padding-left: 18px;
    font-size: 15px;
  }
  .sav-usecases__grid {
    grid-template-columns: 1fr;
    gap: 13px;
  }
  .sav-usecase,
  .sav-usecase:nth-child(2),
  .sav-usecase:nth-child(3) {
    grid-column: 1;
    min-height: 360px;
    border-radius: 18px;
  }
  .sav-usecase__top { top: 16px; right: 16px; left: 16px; }
  .sav-usecase__tag { min-height: 34px; padding: 0 12px; font-size: 9.5px; }
  .sav-usecase__body { right: 22px; bottom: 25px; left: 22px; }
  .sav-usecase__body h3 { font-size: 28px; }
  .sav-usecase__body p { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .sav-usecase,
  .sav-usecase::before,
  .sav-usecase::after,
  .sav-usecase__image,
  .sav-usecase__flare,
  .sav-usecase__tag,
  .sav-usecase__body { transition: none; }
  .sav-usecase:hover::after,
  .sav-usecase:hover .sav-usecase__signal i { animation: none; }
}

.sav-process {
  max-width: var(--pke-max, 1480px);
  margin: 0 auto;
  padding: clamp(88px, 10vw, 150px) var(--pke-pad, 40px);
}
.sav-process__intro {
  position: static;
  max-width: 860px;
  margin: 0 auto clamp(48px, 6vw, 76px);
  text-align: center;
}
.sav-process__intro h2 {
  margin-top: 18px;
  font-size: clamp(40px, 4vw, 58px);
  line-height: 1.04;
}
.sav-process__intro p {
  max-width: 660px;
  margin: 22px auto 0;
  color: rgba(255, 255, 255, 0.56);
  font-size: 16px;
  line-height: 1.72;
}
.sav-process__steps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}
.sav-process__steps::before,
.sav-process__steps::after {
  display: none;
}
.sav-process .proc-step {
  position: relative;
  display: block;
  grid-column: span 3;
  min-height: 250px;
  padding: 30px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 20px;
  background:
    radial-gradient(100% 100% at 100% 0%, rgba(var(--brand-rgb), 0.075), transparent 58%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.032), rgba(255, 255, 255, 0.008));
  transition: transform 0.35s var(--easing), border-color 0.35s var(--easing), background-color 0.35s var(--easing);
}
.sav-process .proc-step:nth-child(n + 3) {
  grid-column: span 2;
}
.sav-process .proc-step::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--sav-card-glow-angle),
    transparent 0deg 268deg,
    rgba(var(--brand-rgb), 0.08) 282deg,
    rgba(209, 168, 255, 0.88) 310deg,
    #ffffff 320deg,
    rgba(209, 168, 255, 0.55) 332deg,
    transparent 350deg 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 7px rgba(var(--brand-rgb), 0.72));
  transition: opacity 0.25s ease;
}
@media (hover: hover) {
  .sav-process .proc-step:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--brand-rgb), 0.28);
    background-color: rgba(var(--brand-rgb), 0.025);
  }
  .sav-process .proc-step:hover::after {
    opacity: 1;
    animation: sav-card-border-glow 1.8s linear infinite;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sav-process .proc-step:hover::after {
    --sav-card-glow-angle: 110deg;
    animation: none;
  }
}
.sav-process .proc-step__card,
.sav-process .proc-step.is-inview .proc-step__card,
.sav-process .proc-step.is-active .proc-step__card {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  opacity: 1;
  filter: none;
  transform: none;
  transition: none;
}
.sav-process .proc-step__kicker {
  margin: 0 0 28px;
  color: rgba(229, 194, 255, 0.76);
}
.sav-process .proc-step__title {
  max-width: 18ch;
  font-size: clamp(22px, 1.8vw, 28px);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.94);
}
.sav-process .proc-step__text {
  max-width: 56ch;
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14.5px;
  line-height: 1.68;
}
@media (max-width: 980px) {
  .sav-process__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sav-process .proc-step,
  .sav-process .proc-step:nth-child(n + 3) {
    grid-column: span 1;
  }
  .sav-process .proc-step:last-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .sav-process {
    padding: 72px 20px;
  }
  .sav-process__intro {
    margin-bottom: 42px;
    text-align: left;
  }
  .sav-process__intro h2 { font-size: 38px; }
  .sav-process__intro p { margin-left: 0; }
  .sav-process__steps { grid-template-columns: 1fr; gap: 12px; }
  .sav-process .proc-step,
  .sav-process .proc-step:nth-child(n + 3),
  .sav-process .proc-step:last-child {
    grid-column: 1;
    min-height: 0;
    padding: 24px 22px 26px;
    border-radius: 16px;
  }
  .sav-process .proc-step__kicker { margin-bottom: 22px; }
}

/* ░░░ Destek ░░░
   Hard-code karşılığı: htmlsite/destek.html içindeki sayfaya özel <style> bloğu. */
.sup-page { --sup-pad: clamp(20px, 4vw, 64px); --sup-max: 1180px; }

/* ── Hero ── */
.sup-hero { max-width: var(--sup-max); margin: 0 auto; padding: 168px var(--sup-pad) 36px; }
.sup-hero__inner { max-width: 820px; }
.sup-hero h1 {
  margin-top: 18px; font-size: clamp(40px, 6vw, 84px); line-height: 0.97; font-weight: 400;
  letter-spacing: -0.012em;
}
.sup-hero__lede {
  max-width: 620px; margin-top: 26px; color: rgba(255,255,255,0.62);
  font-size: clamp(17px, 1.3vw, 20px); line-height: 1.62;
}

/* ── Two-column layout: sticky side nav + content ── */
.sup-layout {
  max-width: var(--sup-max); margin: 0 auto; padding: 0 var(--sup-pad) 40px;
  display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: clamp(32px, 4vw, 64px);
  align-items: start;
}

/* Left sticky menu */
.sup-side { position: sticky; top: 92px; align-self: start; }
.sup-side__label {
  margin: 0 0 14px 14px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,0.4);
}
.sup-nav { display: flex; flex-direction: column; gap: 2px; position: relative; }
.sup-tab {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: 10px; cursor: pointer;
  color: rgba(255,255,255,0.58); font-size: 14.5px; text-decoration: none;
  border: 1px solid transparent;
  transition: color .3s ease, background .3s ease, border-color .3s ease;
}
.sup-tab .num {
  flex: none; width: 22px; font-size: 12.5px; font-weight: 600; text-align: center;
  color: rgba(227,191,255,0.6); font-variant-numeric: tabular-nums;
  transition: color .3s ease;
}
.sup-tab .lbl { line-height: 1.25; }
@media (hover:hover) {
  .sup-tab:hover { color: rgba(255,255,255,0.92); background: rgba(255,255,255,0.03); }
}
.sup-tab.is-active {
  color: #fff; background: rgba(209,168,255,0.08);
  border-color: rgba(209,168,255,0.28);
}
.sup-tab.is-active .num { color: #e5c2ff; }

/* ── Sections ── */
.sup-body { min-width: 0; }
.sup-section {
  padding: clamp(48px, 6vw, 76px) 0 clamp(8px, 1vw, 14px);
  border-top: 1px solid rgba(255,255,255,0.07);
  scroll-margin-top: 96px;
}
.sup-section:first-child { border-top: 0; padding-top: 8px; }
.sup-section__head { max-width: 720px; margin-bottom: 34px; }
.sup-kicker {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;
  color: rgba(227,191,255,0.9); font-size: 12px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.sup-kicker .idx {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px;
  background: rgba(227,191,255,0.1); border: 1px solid rgba(227,191,255,0.22);
  font-size: 12px; font-variant-numeric: tabular-nums;
}
.sup-section__title { font-size: clamp(26px, 3vw, 40px); line-height: 1.06; font-weight: 400; }
.sup-section__title .accent {
  background: linear-gradient(115deg, #ffffff 8%, #e5c2ff 48%, var(--brand-mor) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.sup-section__lede { margin-top: 16px; color: rgba(255,255,255,0.64); font-size: 16.5px; line-height: 1.72; max-width: 680px; }

/* generic prose */
.sup-prose p { color: rgba(255,255,255,0.66); font-size: 15.5px; line-height: 1.76; max-width: 720px; }
.sup-prose p + p { margin-top: 14px; }
.sup-prose a { color: #d1a8ff; text-decoration: none; border-bottom: 1px solid rgba(209,168,255,0.4); }
@media (hover:hover) { .sup-prose a:hover { border-bottom-color: #d1a8ff; } }

/* feature/info card grid */
.sup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 26px; }
.sup-card {
  border-radius: 14px; border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(150deg, rgba(255,255,255,0.03), rgba(255,255,255,0.006));
  padding: 24px 24px 26px;
  transition: border-color .35s ease, transform .35s ease, background .35s ease;
}
@media (hover:hover) {
  .sup-card:hover { border-color: rgba(209,168,255,0.26); transform: translateY(-3px); background: linear-gradient(150deg, rgba(227,191,255,0.05), rgba(255,255,255,0.006)); }
}
.sup-card__ic { width: 30px; height: 30px; color: #d1a8ff; margin-bottom: 16px; }
.sup-card h3 { font-size: 17px; font-weight: 600; line-height: 1.2; }
.sup-card p { margin-top: 9px; color: rgba(255,255,255,0.6); font-size: 14px; line-height: 1.6; }

/* ── Icon rows (frameless list, divider lines) ── */
.sup-rows { margin-top: 30px; }
.sup-row {
  display: grid; grid-template-columns: 40px 200px 1fr; gap: 28px; align-items: start;
  padding: 26px 0; border-top: 1px solid rgba(255,255,255,0.08);
}
.sup-row:last-child { border-bottom: 1px solid rgba(255,255,255,0.08); }
.sup-row__ic {
  width: 40px; height: 40px; color: #d1a8ff;
  display: grid; place-items: center; border-radius: 11px;
  background: rgba(227,191,255,0.07); border: 1px solid rgba(227,191,255,0.16);
}
.sup-row__ic svg { width: 21px; height: 21px; }
.sup-row__t { font-size: clamp(18px, 1.6vw, 22px); font-weight: 500; line-height: 1.2; padding-top: 7px; }
.sup-row__d { color: rgba(255,255,255,0.62); font-size: 15.5px; line-height: 1.7; padding-top: 8px; }
@media (max-width: 720px) {
  .sup-row { grid-template-columns: 40px 1fr; gap: 16px 18px; }
  .sup-row__d { grid-column: 2; padding-top: 0; }
  .sup-row__t { padding-top: 7px; }
}

/* ── Big stat band ── */
.sup-stats {
  margin-top: 30px; display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid rgba(255,255,255,0.09); border-radius: 16px; overflow: hidden;
  background: linear-gradient(150deg, rgba(255,255,255,0.025), rgba(255,255,255,0.004));
}
.sup-stat { padding: 30px 28px; border-left: 1px solid rgba(255,255,255,0.08); }
.sup-stat:first-child { border-left: 0; }
.sup-stat__n {
  font-size: clamp(34px, 4vw, 50px); font-weight: 500; line-height: 1; letter-spacing: -0.02em;
  background: linear-gradient(120deg, #ffffff, #e5c2ff 65%, var(--brand-mor));
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.sup-stat__n small { font-size: 0.42em; font-weight: 500; -webkit-text-fill-color: rgba(255,255,255,0.5); margin-left: 4px; letter-spacing: 0; }
.sup-stat__l { margin-top: 12px; color: rgba(255,255,255,0.6); font-size: 14px; line-height: 1.5; }
@media (max-width: 720px) {
  .sup-stats { grid-template-columns: 1fr; }
  .sup-stat { border-left: 0; border-top: 1px solid rgba(255,255,255,0.08); }
  .sup-stat:first-child { border-top: 0; }
}

/* ── Safety callouts (tinted) ── */
.sup-safety { margin-top: 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.sup-safe {
  position: relative; padding: 20px 22px 22px 22px; border-radius: 13px;
  border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.015);
  border-left: 3px solid rgba(229,194,255,0.55);
}
.sup-safe h3 { display: flex; align-items: center; gap: 9px; font-size: 15.5px; font-weight: 600; }
.sup-safe h3 svg { width: 17px; height: 17px; color: #e5c2ff; flex: none; }
.sup-safe p { margin-top: 9px; color: rgba(255,255,255,0.62); font-size: 14px; line-height: 1.62; }

/* ── Inline two-column intro (editorial) ── */
.sup-lead2 { margin-top: 26px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 36px; align-items: start; }
.sup-lead2 p { color: rgba(255,255,255,0.66); font-size: 15.5px; line-height: 1.76; }
@media (max-width: 720px) { .sup-lead2 { grid-template-columns: 1fr; gap: 16px; } }

/* numbered steps (mini timeline) */
.sup-steps { position: relative; display: grid; gap: 12px; margin-top: 26px; }
/* vertical rail running through the number column — sits BEHIND the cards */
.sup-steps::before {
  content: ""; position: absolute; z-index: 0; left: 43px; top: 42px; bottom: 42px;
  width: 2px; background: rgba(255,255,255,0.1); border-radius: 2px;
}
/* filled portion grows with scroll (JS sets --fill) */
.sup-steps::after {
  content: ""; position: absolute; z-index: 0; left: 43px; top: 42px; width: 2px;
  height: var(--fill, 0%); max-height: calc(100% - 84px); border-radius: 2px;
  background: linear-gradient(180deg, #e5c2ff, var(--brand-mor));
  transition: height .15s linear;
}
.sup-step {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 44px 1fr; gap: 18px; align-items: start;
  border-radius: 14px; border: 1px solid rgba(255,255,255,0.07);
  background: linear-gradient(150deg, rgba(20,18,24,0.96), rgba(14,13,16,0.96));
  padding: 20px 22px;
}
.sup-step__n {
  position: relative; z-index: 1;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid rgba(229,194,255,0.45); color: #fff; font-weight: 600; font-size: 15px;
  font-variant-numeric: tabular-nums; background: #14121a;
  transition: border-color .4s ease, box-shadow .4s ease, background .4s ease;
}
/* number lights up once its step is passed/active */
.sup-step.is-done .sup-step__n,
.sup-step.is-active .sup-step__n {
  border-color: rgba(229,194,255,0.95);
  background: radial-gradient(circle at 50% 36%, rgba(229,194,255,0.28), #14121a 72%);
  box-shadow: 0 0 0 4px rgba(229,194,255,0.07), 0 0 18px rgba(229,194,255,0.2);
}
.sup-step h3 { font-size: 16.5px; font-weight: 600; line-height: 1.25; margin-top: 9px; }
.sup-step p { margin-top: 8px; color: rgba(255,255,255,0.62); font-size: 14.5px; line-height: 1.62; }

/* contact / highlight chips */
.sup-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.sup-chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 15px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.025);
  color: rgba(255,255,255,0.85); font-size: 14px; text-decoration: none;
  transition: border-color .3s ease, background .3s ease;
}
.sup-chip svg { width: 16px; height: 16px; color: #d1a8ff; flex: none; }
@media (hover:hover) { a.sup-chip:hover { border-color: rgba(209,168,255,0.4); background: rgba(209,168,255,0.06); } }

/* callout (warnings / key notes) */
.sup-note {
  display: flex; gap: 13px; margin-top: 20px; padding: 16px 18px; border-radius: 12px;
  border: 1px solid rgba(227,191,255,0.18);
  background: radial-gradient(120% 160% at 0% 0%, rgba(227,191,255,0.07), transparent 60%), rgba(255,255,255,0.015);
}
.sup-note svg { width: 18px; height: 18px; color: #e5c2ff; flex: none; margin-top: 1px; }
.sup-note p { color: rgba(255,255,255,0.74); font-size: 14.5px; line-height: 1.6; }

/* link-out button (to dedicated page) */
.sup-linkout {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 24px;
  padding: 12px 20px; border-radius: 999px;
  background: #f4eefb; color: #11070f; font-size: 14px; font-weight: 600; text-decoration: none;
  transition: transform .3s ease, box-shadow .3s ease;
}
.sup-linkout svg { width: 15px; height: 15px; }
@media (hover:hover) { .sup-linkout:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(229,194,255,0.18); } }

/* FAQ accordion */
.sup-faq { margin-top: 22px; border-top: 1px solid rgba(255,255,255,0.08); }
.sup-faq__group-label {
  margin: 26px 0 12px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(227,191,255,0.7);
}
.sup-q { border-bottom: 1px solid rgba(255,255,255,0.08); }
.sup-q__btn {
  width: 100%; text-align: left; cursor: pointer; background: none; border: 0;
  display: flex; align-items: center; gap: 16px; padding: 18px 4px;
  color: #fff; font-size: 16px; font-weight: 500; line-height: 1.4;
}
.sup-q__btn .plus {
  flex: none; width: 20px; height: 20px; position: relative; margin-left: auto;
  transition: transform .35s ease;
}
.sup-q__btn .plus::before, .sup-q__btn .plus::after {
  content: ""; position: absolute; background: #d1a8ff; border-radius: 2px;
  top: 50%; left: 50%; transform: translate(-50%,-50%);
}
.sup-q__btn .plus::before { width: 14px; height: 2px; }
.sup-q__btn .plus::after { width: 2px; height: 14px; transition: transform .35s ease; }
.sup-q.is-open .plus::after { transform: translate(-50%,-50%) scaleY(0); }
.sup-q__ans {
  overflow: hidden; max-height: 0; transition: max-height .4s ease;
}
.sup-q__ans p {
  padding: 0 4px 20px; color: rgba(255,255,255,0.64); font-size: 15px; line-height: 1.72; max-width: 760px;
}
.sup-q__ans p a { color: #d1a8ff; text-decoration: none; border-bottom: 1px solid rgba(209,168,255,0.4); }

/* ── Closing CTA (frameless) ── */
.sup-cta { max-width: var(--sup-max); margin: 0 auto; padding: 30px var(--sup-pad) 120px; text-align: center; }
.sup-cta h2 { font-size: clamp(28px,3.2vw,42px); line-height: 1.08; font-weight: 400; }
.sup-cta p { max-width: 560px; margin: 16px auto 30px; color: rgba(255,255,255,0.62); font-size: 17px; line-height: 1.6; }

/* ── Responsive: collapse side nav into a sticky horizontal bar ── */
@media (max-width: 900px) {
  .sup-layout { grid-template-columns: 1fr; gap: 0; }
  .sup-side {
    position: sticky; top: 0; z-index: 40; margin: 0 calc(-1 * var(--sup-pad)) 8px;
    padding: 10px var(--sup-pad);
    background: rgba(6,6,6,0.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .sup-side__label { display: none; }
  .sup-nav {
    flex-direction: row; gap: 8px; overflow-x: auto; scrollbar-width: none;
  }
  .sup-nav::-webkit-scrollbar { display: none; }
  .sup-tab {
    flex: none; padding: 8px 14px; border-radius: 999px; white-space: nowrap;
    border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.02); font-size: 13.5px;
  }
  .sup-tab .lbl { white-space: nowrap; }
  .sup-section { scroll-margin-top: 64px; }
}
@media (max-width: 640px) {
  .sup-hero { padding: 130px 20px 28px; }
  .sup-layout, .sup-cta { padding-left: 20px; padding-right: 20px; }
  .sup-side { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; }
  .sup-step { grid-template-columns: 36px 1fr; gap: 14px; }
  .sup-step__n { width: 36px; height: 36px; font-size: 13px; }
  .sup-steps::before, .sup-steps::after { left: 39px; top: 38px; }
  .sup-steps::before { bottom: 38px; }
  .sup-steps::after { max-height: calc(100% - 76px); }
}

/* ░░░ İletişim ░░░
   Hard-code karşılığı: htmlsite/iletisim.html içindeki sayfaya özel <style> bloğu. */
.con-page { --con-pad: clamp(20px, 4vw, 64px); --con-max: 1280px; }

/* ── Hero ── */
.con-hero { max-width: var(--con-max); margin: 0 auto; padding: 168px var(--con-pad) 8px; }
.con-hero__inner { max-width: 820px; }
.con-hero h1 {
  margin-top: 18px; font-size: clamp(40px, 6vw, 84px); line-height: 0.97; font-weight: 400;
  letter-spacing: -0.012em;
}
.con-hero__lede {
  max-width: 600px; margin-top: 26px; color: rgba(255,255,255,0.62);
  font-size: clamp(17px, 1.3vw, 20px); line-height: 1.62;
}

/* ── Quick channels (email / phone) ── */
.con-channels {
  max-width: var(--con-max); margin: 40px auto 0; padding: 0 var(--con-pad);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
}
.con-channel {
  display: flex; align-items: center; gap: 18px; text-decoration: none;
  padding: 24px 26px; border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.09);
  background: linear-gradient(150deg, rgba(255,255,255,0.03), rgba(255,255,255,0.006));
  /* Kart geniş olduğu için konum değiştiren hover (transform) kaymaya yol
     açıyordu; geri bildirim yalnızca renk/kenarlıkla veriliyor. */
  transition: border-color .35s ease, background .35s ease;
}
@media (hover:hover) {
  .con-channel:hover {
    border-color: rgba(209,168,255,0.32);
    background: linear-gradient(150deg, rgba(227,191,255,0.06), rgba(255,255,255,0.006));
  }
}
.con-channel__ic {
  flex: none; width: 50px; height: 50px; border-radius: 13px; display: grid; place-items: center;
  color: #14121a; background: linear-gradient(135deg, #f3e6ff, #e3bfff);
}
.con-channel__ic svg { width: 23px; height: 23px; }
.con-channel__txt { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.con-channel__k { display: block; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(227,191,255,0.85); font-weight: 600; }
.con-channel__v { display: block; margin-top: 4px; word-break: break-word; font-size: clamp(17px, 1.6vw, 21px); font-weight: 500; color: #fff; }
.con-channel__arrow { margin-left: auto; flex: none; color: rgba(255,255,255,0.35); transition: color .35s ease; }
@media (hover:hover) { .con-channel:hover .con-channel__arrow { color: #e5c2ff; } }

/* ── Main split: form + side info ── */
.con-main {
  max-width: var(--con-max); margin: 0 auto; padding: 40px var(--con-pad) 60px;
  display: grid; grid-template-columns: 1.25fr 0.85fr; gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

/* Form */
.con-formwrap {
  border-radius: 20px; border: 1px solid rgba(255,255,255,0.09);
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(227,191,255,0.07), transparent 55%),
    linear-gradient(155deg, rgba(255,255,255,0.035), rgba(255,255,255,0.006));
  padding: clamp(28px, 3vw, 44px);
}
.con-formwrap h2 { font-size: clamp(22px, 2.2vw, 30px); font-weight: 400; line-height: 1.1; }
.con-formwrap > p { margin-top: 10px; color: rgba(255,255,255,0.6); font-size: 15px; line-height: 1.6; }
.con-form { margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.con-field { display: flex; flex-direction: column; gap: 8px; }
.con-field.full { grid-column: 1 / -1; }
.con-field label { font-size: 12.5px; font-weight: 600; letter-spacing: 0.03em; color: rgba(255,255,255,0.72); }
.con-field label .req { color: #e5a0c8; }
.con-input, .con-textarea, .con-select {
  width: 100%; font: inherit; font-size: 15px; color: #fff;
  background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 11px; padding: 13px 15px; outline: none;
  transition: border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.con-input::placeholder, .con-textarea::placeholder { color: rgba(255,255,255,0.32); }
.con-input:focus, .con-textarea:focus, .con-select:focus {
  border-color: rgba(209,168,255,0.6); background: rgba(255,255,255,0.04);
  box-shadow: 0 0 0 3px rgba(209,168,255,0.1);
}
.con-select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none' stroke='%23b9a0d8' stroke-width='1.6'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; padding-right: 40px; }
.con-select option { background: #14121a; color: #fff; }
.con-textarea { resize: vertical; min-height: 130px; line-height: 1.6; }
.con-submit {
  grid-column: 1 / -1; margin-top: 4px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 26px; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 600; color: #14070f;
  background: linear-gradient(120deg, #ffffff, #f0e2fb);
  transition: transform .3s ease, box-shadow .3s ease;
}
.con-submit svg { width: 16px; height: 16px; }
@media (hover:hover) { .con-submit:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(229,194,255,0.22); } }
.con-form__note { grid-column: 1 / -1; margin-top: 2px; font-size: 12.5px; color: rgba(255,255,255,0.42); line-height: 1.5; }
.con-form__ok {
  grid-column: 1 / -1; display: none; align-items: center; gap: 10px;
  padding: 14px 16px; border-radius: 12px; font-size: 14px;
  color: #d8ffe9; border: 1px solid rgba(110,255,208,0.3); background: rgba(110,255,208,0.07);
}
.con-form__ok.show { display: flex; }
.con-form__ok svg { width: 18px; height: 18px; flex: none; }

/* Koşullu alanlar — konuya göre açılır (JS: earfit-pages.js) */
.con-cond[hidden] { display: none; }
.con-cond.is-on { animation: conCondIn .32s cubic-bezier(.22,.61,.36,1) both; }
@keyframes conCondIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .con-cond.is-on { animation: none; } }
.con-hint { font-weight: 400; letter-spacing: 0; color: rgba(255,255,255,0.42); }
.con-file {
  width: 100%; padding: 12px 14px; border-radius: 12px; font: inherit; font-size: 14px;
  color: rgba(255,255,255,0.72); cursor: pointer;
  border: 1px dashed rgba(255,255,255,0.18); background: rgba(255,255,255,0.03);
  transition: border-color .25s ease, background .25s ease;
}
.con-file::file-selector-button {
  margin-right: 12px; padding: 8px 14px; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; color: #14070f;
  background: linear-gradient(120deg, #ffffff, #f0e2fb);
}
.con-file:hover, .con-file:focus { border-color: rgba(229,194,255,0.45); background: rgba(255,255,255,0.05); }

/* Tarih seçici — native takvim paneli biçimlendirilemediği için
   earfit-pages.js kendi panelini takıyor. Alan JS yoksa type=date olarak
   çalışmayı sürdürür, o durumda ikonu koyu temaya uyarlıyoruz. */
.con-input[type="date"] { color-scheme: dark; }
.con-input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer; opacity: .75; transition: opacity .25s ease;
}
.con-input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }

.con-datewrap { position: relative; }
/* Panel açıkken alanı kardeşlerinin (mesaj kutusu dahil) üstüne al —
   grid'de sonradan gelen kardeşler aksi halde panelin üstünde kalır. */
.con-field:has(.con-datewrap.is-open) { position: relative; z-index: 30; }
.con-field--dp-open { position: relative; z-index: 30; } /* :has() yedeği (JS) */
.con-datewrap.is-open { z-index: 30; }
.con-date {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b9a0d8' stroke-width='1.7' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 42px;
}
.con-dp {
  position: absolute; z-index: 40; top: calc(100% + 8px); left: 0;
  width: 292px; max-width: calc(100vw - 40px); padding: 14px;
  border-radius: 16px; border: 1px solid rgba(209,168,255,0.22);
  background: #16131d;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
  isolation: isolate;
  animation: conDpIn .18s cubic-bezier(.22,.61,.36,1) both;
}
/* Panelin kendisi asla yarı saydam olmamalı — aksi halde açılış boyunca
   arkadaki form alanları içinden okunuyor. Solma yalnızca içeriğe uygulanır. */
.con-dp > * { animation: conDpFade .18s ease both; }
.con-dp.is-up { top: auto; bottom: calc(100% + 10px); }
.con-dp[hidden] { display: none; }
@keyframes conDpIn { from { transform: translateY(-6px) scale(.985); } to { transform: none; } }
@keyframes conDpFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .con-dp, .con-dp > * { animation: none; } }

.con-dp__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.con-dp__ay { font-size: 14px; font-weight: 600; color: #fff; letter-spacing: 0.01em; }
.con-dp__nav {
  flex: none; width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 9px; cursor: pointer; padding: 0;
  border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.75); transition: background .25s ease, color .25s ease, border-color .25s ease;
}
@media (hover:hover) { .con-dp__nav:hover { background: rgba(227,191,255,0.14); border-color: rgba(209,168,255,0.4); color: #fff; } }

.con-dp__hafta, .con-dp__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.con-dp__hafta { margin-bottom: 6px; }
.con-dp__hafta span {
  text-align: center; font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: rgba(227,191,255,0.6);
}
.con-dp__g {
  aspect-ratio: 1; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 9px; cursor: pointer;
  font: inherit; font-size: 13px; color: rgba(255,255,255,0.82);
  background: transparent; transition: background .2s ease, color .2s ease;
}
@media (hover:hover) { .con-dp__g:not(.is-dis):hover { background: rgba(227,191,255,0.14); color: #fff; } }
.con-dp__g.is-dis { color: rgba(255,255,255,0.16); cursor: default; }
.con-dp__g.is-bugun { box-shadow: inset 0 0 0 1px rgba(209,168,255,0.45); color: #e5c2ff; }
.con-dp__g.is-sec {
  color: #14070f; font-weight: 600;
  background: linear-gradient(135deg, #f3e6ff, #e3bfff);
}
.con-dp__alt {
  display: flex; justify-content: space-between; margin-top: 12px; padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.con-dp__link {
  border: 0; background: none; cursor: pointer; padding: 2px 4px;
  font: inherit; font-size: 12.5px; font-weight: 600; color: rgba(227,191,255,0.85);
  transition: color .25s ease;
}
@media (hover:hover) { .con-dp__link:hover { color: #fff; } }

/* Side info */
.con-side { display: flex; flex-direction: column; gap: 14px; }
.con-block {
  border-radius: 16px; border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(150deg, rgba(255,255,255,0.025), rgba(255,255,255,0.004));
  padding: 22px 24px;
}
.con-block__h {
  display: flex; align-items: center; gap: 9px; margin-bottom: 16px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(227,191,255,0.85);
}
.con-block__h svg { width: 16px; height: 16px; }
/* office entry */
.con-office + .con-office { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.07); }
.con-office h3 { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.con-office h3 .flag { font-size: 14px; }
.con-office p { margin-top: 6px; color: rgba(255,255,255,0.6); font-size: 13.5px; line-height: 1.6; }
.con-office a { color: rgba(209,168,255,0.9); text-decoration: none; font-size: 13px; display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; }
@media (hover:hover) { .con-office a:hover { color: #e5c2ff; } }
/* dept emails */
.con-dept { display: flex; flex-direction: column; gap: 2px; }
.con-dept a {
  display: flex; align-items: baseline; gap: 10px; padding: 9px 0; text-decoration: none;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.con-dept a:first-child { border-top: 0; }
.con-dept .role { font-size: 12.5px; color: rgba(255,255,255,0.5); min-width: 92px; }
.con-dept .mail { font-size: 14px; color: #fff; transition: color .3s ease; }
@media (hover:hover) { .con-dept a:hover .mail { color: #e5c2ff; } }
/* socials */
.con-social { display: flex; gap: 10px; }
.con-social a {
  width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
  color: rgba(255,255,255,0.78); border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.02);
  transition: color .3s ease, border-color .3s ease, transform .3s ease, background .3s ease;
}
.con-social a svg { width: 19px; height: 19px; }
@media (hover:hover) {
  .con-social a:hover { color: #fff; border-color: rgba(209,168,255,0.4); background: rgba(209,168,255,0.08); transform: translateY(-2px); }
}

/* ── Map ── */
.con-map { max-width: var(--con-max); margin: 0 auto; padding: 0 var(--con-pad) 120px; }
.con-map__frame {
  border-radius: 20px; overflow: hidden; border: 1px solid rgba(255,255,255,0.09);
  line-height: 0; position: relative;
}
.con-map__frame iframe { width: 100%; height: 420px; border: 0; filter: grayscale(1) invert(0.92) contrast(0.9) hue-rotate(180deg); }
.con-map__tag {
  position: absolute; left: 18px; bottom: 18px; z-index: 2;
  display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; border-radius: 999px;
  font-size: 13px; color: #fff; background: rgba(12,12,14,0.82); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.12);
}
.con-map__tag svg { width: 15px; height: 15px; color: #e5c2ff; }

/* ── Responsive ── */
@media (max-width: 920px) {
  .con-main { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .con-hero { padding: 130px 20px 8px; }
  .con-channels, .con-main, .con-map { padding-left: 20px; padding-right: 20px; }
  .con-channels { grid-template-columns: 1fr; }
  .con-form { grid-template-columns: 1fr; }
  .con-channel { padding: 18px 20px; }
  .con-map__frame iframe { height: 320px; }
}

/* ░░░ Yasal metin sayfaları (4 sayfada ortak) ░░░
   Hard-code karşılığı: htmlsite/kvkk.html içindeki sayfaya özel <style> bloğu. */
/* Yanlar nav ile aynı hizada (bkz. .nav padding) — içerik header genişliğinde,
   1080px orta kolon kapağı kaldırıldı. */
.legal-page { --legal-pad: clamp(56px, 7vw, 132px); }
.legal-hero {
  max-width: none; margin: 0; padding: 152px var(--legal-pad) 0;
}
.legal-hero__eyebrow {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brand-lilac, #e5c2ff);
}
.legal-hero h1 {
  margin-top: 16px; font-size: clamp(32px, 4.6vw, 60px); line-height: 1.02; font-weight: 400;
  letter-spacing: -0.012em; max-width: 20ch;
}
.legal-hero__meta {
  margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px 24px;
  font-size: 13px; color: rgba(255,255,255,0.5);
}
.legal-hero__meta strong { color: rgba(255,255,255,0.82); font-weight: 500; }

.legal-notice {
  max-width: none; margin: 34px 0 0; padding: 0 var(--legal-pad);
}
.legal-notice__inner {
  display: flex; gap: 14px; align-items: flex-start;
  border: 1px solid rgba(229,194,255,0.28); border-radius: 14px;
  background: linear-gradient(150deg, rgba(229,194,255,0.06), rgba(176,136,255,0.03));
  padding: 16px 20px; color: rgba(255,255,255,0.72); font-size: 13.5px; line-height: 1.55;
}
.legal-notice__inner svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--brand-lilac, #e5c2ff); margin-top: 2px; }
.legal-notice__inner strong { color: #fff; font-weight: 600; }

.legal-body {
  max-width: none; margin: 40px 0 0; padding: 0 var(--legal-pad) 40px;
  display: grid; grid-template-columns: 280px 1fr; gap: clamp(56px, 6vw, 96px); align-items: start;
}
.legal-toc {
  position: sticky; top: 108px;
  border-left: 1px solid rgba(255,255,255,0.1); padding-left: 20px;
}
.legal-toc__label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.4); margin-bottom: 14px;
}
.legal-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.legal-toc li { counter-increment: toc; margin-bottom: 2px; }
.legal-toc a {
  position: relative;
  display: flex; gap: 10px; padding: 7px 10px; font-size: 13.5px; line-height: 1.4;
  margin-left: -10px; border-radius: 9px;
  color: rgba(255,255,255,0.6); text-decoration: none;
  transition: color 0.2s, background 0.2s;
}
.legal-toc a::before { content: counter(toc, decimal-leading-zero); color: rgba(255,255,255,0.32); font-variant-numeric: tabular-nums; transition: color 0.2s; }
.legal-toc a:hover, .legal-toc a:focus-visible { color: var(--brand-lilac, #e5c2ff); }
/* scroll-spy: görünürdeki bölümün maddesi vurgulanır (earfit-pages.js) */
.legal-toc a.is-active {
  color: #fff;
  background: rgba(227, 191, 255, 0.08);
}
.legal-toc a.is-active::before { color: var(--brand-lilac, #e5c2ff); }
.legal-toc a.is-active::after {
  content: ""; position: absolute; left: -21px; top: 8px; bottom: 8px; width: 2px;
  border-radius: 2px; background: var(--brand-lilac, #e5c2ff);
}

.legal-doc { max-width: none; min-width: 0; } /* metin sağ kenara kadar yayılır */
.legal-doc section { padding-top: 8px; margin-bottom: 40px; scroll-margin-top: 100px; }
/* Bölüm başlıkları: üstte nefes + ince ayırıcı çizgi — maddeler birbirine
   yapışmaz, belge "bölümlenmiş" okunur. Çapa kaymaları için scroll-margin. */
.legal-doc h2 {
  margin-top: clamp(44px, 6vw, 64px);
  padding-top: clamp(26px, 3vw, 34px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  scroll-margin-top: 120px;
  font-size: clamp(20px, 2.2vw, 26px); font-weight: 500; line-height: 1.2;
  letter-spacing: -0.008em; display: flex; align-items: baseline; gap: 14px;
}
.legal-doc h2 .n {
  font-size: 12.5px; font-weight: 600; color: var(--brand-lilac, #e5c2ff);
  font-variant-numeric: tabular-nums; flex: 0 0 auto;
  width: 30px; height: 30px; display: inline-grid; place-items: center;
  border-radius: 50%; border: 1px solid rgba(229, 194, 255, 0.35);
  background: rgba(227, 191, 255, 0.06);
  transform: translateY(4px);
}
.legal-doc h3 { font-size: 16px; font-weight: 600; margin-top: 22px; color: rgba(255,255,255,0.9); }
.legal-doc p { margin-top: 14px; color: rgba(255,255,255,0.66); font-size: 15px; line-height: 1.72; }
/* belge girişindeki ilk paragraf otomatik "lead" tonunda */
.legal-doc > p:first-child {
  font-size: 16.5px; color: rgba(255,255,255,0.8); line-height: 1.7;
}
.legal-doc ul { margin-top: 14px; padding-left: 0; list-style: none; }
.legal-doc li {
  position: relative; padding-left: 20px;
  margin-bottom: 8px; color: rgba(255,255,255,0.66); font-size: 15px; line-height: 1.65;
}
/* lila madde noktası — varsayılan disk yerine marka vurgusu */
.legal-doc ul li::before {
  content: ""; position: absolute; left: 2px; top: 0.62em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--brand-soft, #d1a8ff);
}
.legal-doc ol { margin-top: 14px; padding-left: 22px; }
.legal-doc a { color: var(--brand-lilac, #e5c2ff); text-decoration: underline; text-underline-offset: 3px; }
.legal-doc strong { color: rgba(255,255,255,0.9); font-weight: 600; }
.legal-doc .lead { font-size: 16.5px; color: rgba(255,255,255,0.78); }

.legal-table-wrap { overflow-x: auto; margin-top: 18px; border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; }
.legal-table { border-collapse: collapse; width: 100%; font-size: 14px; }
.legal-table th, .legal-table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.07); vertical-align: top; }
.legal-table th { font-weight: 600; color: rgba(255,255,255,0.82); background: rgba(255,255,255,0.02); }
.legal-table td { color: rgba(255,255,255,0.64); }
.legal-table tr:last-child td { border-bottom: 0; }

.legal-cta {
  max-width: none; margin: 8px 0 0; padding: 0 var(--legal-pad) 72px;
}
.legal-cta__inner {
  border: 1px solid rgba(255,255,255,0.1); border-radius: 18px;
  background: linear-gradient(150deg, rgba(255,255,255,0.03), rgba(255,255,255,0.006));
  padding: 30px clamp(22px, 4vw, 44px); display: flex; flex-wrap: wrap; gap: 20px;
  align-items: center; justify-content: space-between;
}
.legal-cta__inner h2 { font-size: 20px; font-weight: 500; }
.legal-cta__inner p { margin-top: 6px; color: rgba(255,255,255,0.6); font-size: 14px; max-width: 46ch; }
.legal-cta__btn {
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  padding: 13px 22px; border-radius: 999px; font-size: 14px; font-weight: 500;
  color: #17121f; background: linear-gradient(100deg, var(--brand-lilac, #e5c2ff), var(--brand-mor, #b088ff));
  text-decoration: none;
}

.footer__link-current { color: rgba(255,255,255,0.4); cursor: default; }

@media (max-width: 860px) {
  .legal-page { --legal-pad: 20px; }
  .legal-body { grid-template-columns: 1fr; gap: 24px; }
  .legal-toc { position: static; border-left: 0; border-top: 1px solid rgba(255,255,255,0.1); padding-left: 0; padding-top: 20px; }
}


/* ░░░ Ürün detay · satın alma yapılandırıcısı + onay modalı ░░░
   Hard-code karşılığı: htmlsite/titaniem-pro.html · earfit-pro.html içindeki
   sayfaya özel <style> bloğu. Sepet drawer CSS'i yukarıda ayrıca taşındı.
   NOT: .cartd* kuralları bu bloktan çıkarıldı (zaten yukarıda tanımlı). */
/* ── Buy configurator · Apple-style ── */
.pdp-buy { max-width: 1120px; margin: 0 auto; padding: clamp(64px,8vw,120px) clamp(20px,4vw,64px) 40px; }
.pdp-buy__head { max-width: 760px; margin-bottom: clamp(40px,5vw,64px); }
.pdp-buy__head h2 { font-size: clamp(30px,3.8vw,52px); line-height: 1.05; font-weight: 500; letter-spacing: -0.02em; margin-top: 14px; }
.pdp-buy__lede { margin-top: 16px; color: rgba(255,255,255,0.6); font-size: clamp(16px,1.3vw,18px); line-height: 1.6; }
.pdp-buy__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(320px,392px); gap: clamp(32px,5vw,80px); align-items: start; }

/* step group — big numbered heading, generous rhythm */
.buy-group { border: 0; padding: 0; margin: 0 0 clamp(40px,4.5vw,58px); }
.buy-group legend {
  display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; padding: 0; width: 100%;
}
.buy-group__step {
  flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: #e5c2ff; border: 1px solid rgba(229,194,255,0.35); background: rgba(227,191,255,0.06);
}
.buy-group__title { font-size: clamp(20px,2.1vw,26px); font-weight: 500; letter-spacing: -0.01em; color: #fff; }
.buy-group legend small { margin-left: auto; align-self: center; text-transform: none; letter-spacing: 0; color: rgba(255,255,255,0.4); font-size: 13px; font-weight: 400; }

/* selectable rows (Apple option list) */
.buy-list { display: grid; gap: 12px; }
.buy-opt { display: block; cursor: pointer; }
.buy-opt input { position: absolute; opacity: 0; pointer-events: none; }
.buy-opt__box {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 18px; border-radius: 16px; padding: 20px 22px;
  border: 1.5px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.018);
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
@media (hover:hover) { .buy-opt:hover .buy-opt__box { border-color: rgba(255,255,255,0.28); } }
.buy-opt input:checked + .buy-opt__box {
  border-color: #e5c2ff;
  box-shadow: 0 0 0 1px #e5c2ff, 0 0 30px rgba(229,194,255,0.1);
  background: rgba(227,191,255,0.045);
}
/* material swatch chip on the left */
.buy-opt__swatch {
  flex: none; width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.18);
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.12), inset 0 -3px 6px rgba(0,0,0,0.4);
}
.buy-opt__swatch--gri   { background: linear-gradient(145deg,#b8bcc4,#7d818b 55%,#5a5e67); }
.buy-opt__swatch--siyah { background: linear-gradient(145deg,#3a3a3f,#1a1a1d 55%,#0c0c0e); }
.buy-opt__swatch--std   { background: linear-gradient(145deg,#e6e6ea,#b7bbc4 55%,#8b8f98); }
.buy-opt__swatch--bal   { background: linear-gradient(145deg,#d9dbe0,#9fa3ad 55%,#6f7681); position: relative; }
.buy-opt__swatch--bal::after { content:""; position:absolute; inset:0; border-radius:11px; background: linear-gradient(115deg, transparent 60%, rgba(229,194,255,0.5)); }
.buy-opt__main { min-width: 0; }
.buy-opt__name { font-size: 16px; font-weight: 500; color: #fff; letter-spacing: -0.01em; }
.buy-opt__desc { margin-top: 4px; color: rgba(255,255,255,0.52); font-size: 13.5px; line-height: 1.5; }
.buy-opt__right { display: flex; align-items: center; gap: 16px; }
.buy-opt__price { font-size: 14.5px; color: rgba(255,255,255,0.85); font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 500; }
/* selected radio ring */
.buy-opt__tick {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.28); display: grid; place-items: center;
  transition: border-color .25s ease, background .25s ease;
}
.buy-opt__tick svg { width: 12px; height: 12px; color: #11070f; opacity: 0; transition: opacity .2s ease; }
.buy-opt input:checked + .buy-opt__box .buy-opt__tick { border-color: #e5c2ff; background: #e5c2ff; }
.buy-opt input:checked + .buy-opt__box .buy-opt__tick svg { opacity: 1; }

/* version rows carry a tag + a delivery note under the name */
.buy-ver__tag {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px;
  padding: 3px 10px; border-radius: 999px; font-size: 10px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.14); color: rgba(255,255,255,0.6);
}
.buy-ver--custom .buy-ver__tag { border-color: rgba(229,194,255,0.4); color: #e5c2ff; background: rgba(227,191,255,0.06); }
.buy-ver__note {
  display: inline-flex; gap: 6px; align-items: center; margin-top: 9px;
  color: rgba(255,255,255,0.5); font-size: 12.5px; line-height: 1.4;
}
.buy-ver__note svg { flex: none; width: 13px; height: 13px; color: #d1a8ff; }
/* version thumbnail (product-ish) instead of swatch */
.buy-opt__thumb {
  flex: none; width: 52px; height: 52px; border-radius: 13px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,0.1); color: rgba(227,191,255,0.85);
  background: radial-gradient(circle at 50% 38%, rgba(227,191,255,0.14), #0a090c 72%);
}
.buy-opt__thumb svg { width: 26px; height: 26px; }

/* engrave (custom only) */
.buy-engrave { display: none; }
.buy-engrave.is-on { display: block; }
.buy-engrave input[type="text"] {
  width: 100%; padding: 15px 18px; border-radius: 14px;
  border: 1.5px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.02);
  color: #fff; font-size: 15px; font-family: inherit; outline: none;
  transition: border-color .25s ease;
}
.buy-engrave input[type="text"]:focus { border-color: rgba(229,194,255,0.6); }
.buy-engrave input::placeholder { color: rgba(255,255,255,0.3); }
.buy-engrave__hint { margin-top: 9px; color: rgba(255,255,255,0.4); font-size: 12.5px; }

/* summary aside — airy Apple panel */
.buy-sum {
  position: sticky; top: 96px;
  border-radius: 22px; border: 1px solid rgba(255,255,255,0.09);
  background: linear-gradient(165deg, rgba(23,21,28,0.9), rgba(12,11,14,0.92));
  padding: 30px 28px 26px;
}
.buy-sum__thumb {
  width: 100%; aspect-ratio: 3/2; border-radius: 15px; margin-bottom: 20px;
  border: 1px solid rgba(255,255,255,0.08); display: grid; place-items: center;
  background: radial-gradient(circle at 50% 42%, rgba(227,191,255,0.13), #0a090c 72%);
  color: rgba(227,191,255,0.75);
}
.buy-sum__thumb svg { width: 58px; height: 58px; }
.buy-sum__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; border-radius: inherit; }
.buy-sum__name { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.buy-sum__ver { margin-top: 4px; font-size: 12px; color: rgba(227,191,255,0.85); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; }
.buy-sum__rows { margin-top: 20px; border-top: 1px solid rgba(255,255,255,0.08); }
.buy-sum__row {
  display: flex; justify-content: space-between; gap: 14px; padding: 10px 0;
  font-size: 13.5px; color: rgba(255,255,255,0.58); border-bottom: 1px solid rgba(255,255,255,0.05);
}
.buy-sum__row b { color: rgba(255,255,255,0.88); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.buy-sum__total { display: flex; justify-content: space-between; align-items: baseline; padding: 20px 0 4px; }
.buy-sum__total span { font-size: 13.5px; color: rgba(255,255,255,0.5); }
.buy-sum__total strong {
  font-size: 30px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: #fff;
}
.buy-sum__ship { display: flex; gap: 8px; align-items: center; margin-top: 8px; color: rgba(255,255,255,0.55); font-size: 12.5px; }
.buy-sum__ship svg { width: 14px; height: 14px; color: #d1a8ff; flex: none; }
.buy-sum__cta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; margin-top: 22px; padding: 17px 20px; border: 0; border-radius: 999px;
  background: linear-gradient(115deg, var(--brand-lilac), var(--brand-mor));
  color: #11070f; font-size: 15.5px; font-weight: 600; font-family: inherit;
  position: relative; isolation: isolate; overflow: hidden;
  cursor: pointer; transition: transform .25s ease, box-shadow .25s ease, filter .25s ease, background .3s ease;
}
@media (hover:hover) { .buy-sum__cta:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 12px 30px rgba(var(--brand-rgb),0.32); } }
.buy-sum__cta > * { position: relative; z-index: 2; }
.buy-sum__cta svg { width: 17px; height: 17px; }
.buy-sum__cta::before {
  content: ""; position: absolute; z-index: 1; inset: -50% auto -50% -45%; width: 34%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent);
  transform: translateX(-180%) rotate(12deg); opacity: 0; pointer-events: none;
}
.buy-sum__cta.is-loading { cursor: wait; box-shadow: 0 0 0 1px rgba(229,194,255,.42), 0 10px 34px rgba(var(--brand-rgb),.3); }
.buy-sum__cta.is-loading::before { opacity: 1; animation: buyAddSweep .85s ease-in-out infinite; }
.buy-sum__cta.is-loading svg { animation: buyCartTravel .85s cubic-bezier(.22,1,.36,1) infinite; }
.buy-sum__cta.is-added {
  background: linear-gradient(115deg, #ead7ff, #b982f4);
  box-shadow: 0 0 0 1px rgba(235,216,255,.55), 0 0 34px rgba(191,132,255,.44);
}
.buy-sum__cta.is-added::after {
  content: ""; position: absolute; z-index: 1; left: 50%; top: 50%; width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,.82); border-radius: 50%; pointer-events: none;
  animation: buyAddedWave .68s ease-out both;
}
.buy-sum__cta.is-added .buy-sum__check { animation: buyAddedCheck .42s cubic-bezier(.22,1,.36,1) both; }
.buy-sum__cta.is-error { background: linear-gradient(115deg, #f2c4d7, #d889ad); animation: buyAddError .34s ease; }
@keyframes buyAddSweep { to { transform: translateX(570%) rotate(12deg); } }
@keyframes buyCartTravel { 0%,100% { transform: translateX(0); } 45% { transform: translateX(5px) translateY(-1px); } }
@keyframes buyAddedWave { from { transform: translate(-50%,-50%) scale(.2); opacity: .8; } to { transform: translate(-50%,-50%) scale(22); opacity: 0; } }
@keyframes buyAddedCheck { from { transform: scale(.45) rotate(-18deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes buyAddError { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) {
  .buy-sum__cta.is-loading::before, .buy-sum__cta.is-loading svg,
  .buy-sum__cta.is-added::after, .buy-sum__cta.is-added .buy-sum__check,
  .buy-sum__cta.is-error { animation: none; }
}
.buy-sum__trust { margin-top: 16px; display: flex; justify-content: center; gap: 18px; color: rgba(255,255,255,0.4); font-size: 11.5px; }
.buy-sum__trust span { display: inline-flex; align-items: center; gap: 5px; }
.buy-sum__trust svg { width: 12px; height: 12px; color: rgba(209,168,255,0.7); }

@media (max-width: 880px) {
  .pdp-buy__grid { grid-template-columns: 1fr; }
  .buy-sum { position: static; }
  .buy-sum__thumb { max-width: 320px; }
}
@media (max-width: 480px) {
  .buy-opt__box { grid-template-columns: auto 1fr; gap: 14px; padding: 16px 18px; }
  .buy-opt__right { grid-column: 1 / -1; justify-content: space-between; padding-top: 12px; margin-top: 2px; border-top: 1px solid rgba(255,255,255,0.06); }
}

/* ── Custom consent modal ── */
.consent {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 20px;
  background: rgba(4,4,6,0.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; pointer-events: none; transition: opacity .35s ease;
}
.consent.is-open { opacity: 1; pointer-events: auto; }
.consent__card {
  width: min(560px, 100%); max-height: 88vh; overflow: auto;
  border-radius: 20px; border: 1px solid rgba(227,191,255,0.2);
  background: linear-gradient(165deg, #17141d 0%, #0d0c10 70%);
  padding: clamp(24px,4vw,36px);
  transform: translateY(16px) scale(0.98); transition: transform .4s cubic-bezier(0.22,1,0.36,1);
}
.consent.is-open .consent__card { transform: none; }
.consent__kicker { font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(227,191,255,0.9); }
.consent__title { margin-top: 10px; font-size: clamp(21px,2.4vw,27px); font-weight: 500; line-height: 1.15; }
.consent__text { margin-top: 14px; color: rgba(255,255,255,0.66); font-size: 14.5px; line-height: 1.7; }
.consent__steps { margin: 18px 0 4px; display: grid; gap: 8px; }
.consent__step { display: flex; gap: 11px; align-items: flex-start; font-size: 13.5px; color: rgba(255,255,255,0.72); line-height: 1.5; }
.consent__step i {
  flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid rgba(229,194,255,0.4); color: #e5c2ff; font-style: normal; font-size: 11.5px; font-weight: 600;
}
.consent__warn {
  display: flex; gap: 12px; margin-top: 18px; padding: 15px 17px; border-radius: 13px;
  border: 1px solid rgba(255,111,171,0.28);
  background: radial-gradient(120% 160% at 0% 0%, rgba(255,111,171,0.08), transparent 60%), rgba(255,255,255,0.015);
}
.consent__warn svg { flex: none; width: 18px; height: 18px; color: #ff6fab; margin-top: 1px; }
.consent__warn p { color: rgba(255,255,255,0.8); font-size: 13.5px; line-height: 1.6; }
.consent__warn b { color: #fff; }
.consent__check {
  display: flex; gap: 12px; align-items: flex-start; margin-top: 20px; padding: 15px 16px;
  border-radius: 13px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.02);
  cursor: pointer; transition: border-color .3s ease, background .3s ease;
}
.consent__check.is-err { border-color: rgba(255,111,171,0.7); animation: consentShake .4s ease; }
@keyframes consentShake { 0%,100%{transform:none} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
.consent__check input { position: absolute; opacity: 0; pointer-events: none; }
.consent__box {
  flex: none; width: 21px; height: 21px; border-radius: 6px; margin-top: 1px;
  border: 1.5px solid rgba(229,194,255,0.55); display: grid; place-items: center;
  transition: background .25s ease, border-color .25s ease;
}
.consent__box svg { width: 12px; height: 12px; color: #11070f; opacity: 0; transition: opacity .2s ease; }
.consent__check input:checked ~ .consent__box { background: #e5c2ff; border-color: #e5c2ff; }
.consent__check input:checked ~ .consent__box svg { opacity: 1; }
.consent__check span { font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,0.82); }
.consent__log { margin-top: 12px; display: flex; gap: 8px; align-items: center; color: rgba(255,255,255,0.38); font-size: 11.5px; }
.consent__log svg { width: 13px; height: 13px; flex: none; }
.consent__actions { display: flex; gap: 12px; margin-top: 22px; }
.consent__btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: transform .25s ease, opacity .25s ease, box-shadow .25s ease;
}
.consent__btn--ghost { background: none; border: 1px solid rgba(255,255,255,0.18); color: rgba(255,255,255,0.75); }
.consent__btn--ok { border: 0; background: #f4eefb; color: #11070f; }
.consent__btn--ok[aria-disabled="true"] { opacity: 0.38; cursor: not-allowed; }
@media (hover:hover) {
  .consent__btn--ok:not([aria-disabled="true"]):hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(229,194,255,0.25); }
  .consent__btn--ghost:hover { border-color: rgba(255,255,255,0.4); color: #fff; }
}
@media (max-width: 520px) { .consent__actions { flex-direction: column-reverse; } }

/* ── Cart drawer ── */

/* nav cart count badge (JS injects) */
.nav-cart-count {
  position: absolute; top: -4px; right: -6px; min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: 999px; background: #ff6fab; color: #11070f;
  font-size: 9.5px; font-weight: 700; line-height: 15px; text-align: center;
}

/* Ürün görseline göre değişen özet küçük resmi konumu — panelden ayarlanır. */
.buy-sum__thumb img { object-position: var(--ef-thumb-pos, 50% 60%); }


/* ░░░ Sepet sayfası ░░░
   Hard-code karşılığı: htmlsite/sepet.html içindeki sayfaya özel <style> bloğu. */
.cart-page { --c-pad: clamp(20px, 4vw, 64px); --c-max: 1180px; }
.cart-hero { max-width: var(--c-max); margin: 0 auto; padding: 158px var(--c-pad) 34px; }
.cart-hero h1 { margin-top: 16px; font-size: clamp(36px, 5vw, 68px); line-height: 0.98; font-weight: 400; letter-spacing: -0.012em; }
.cart-hero__lede { margin-top: 18px; color: rgba(255,255,255,0.6); font-size: 16.5px; line-height: 1.6; max-width: 560px; }

.cart-layout {
  max-width: var(--c-max); margin: 0 auto; padding: 10px var(--c-pad) 120px;
  display: grid; grid-template-columns: minmax(0,1.4fr) minmax(300px,0.6fr);
  gap: clamp(28px, 4vw, 56px); align-items: start;
}
@media (max-width: 880px) { .cart-layout { grid-template-columns: 1fr; } }

/* items */
.cart-item {
  display: grid; grid-template-columns: 92px 1fr auto; gap: 20px; align-items: start;
  padding: 26px 0; border-top: 1px solid rgba(255,255,255,0.08);
}
.cart-item:last-child { border-bottom: 1px solid rgba(255,255,255,0.08); }
.cart-item__thumb {
  width: 92px; height: 92px; border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.09);
  background: radial-gradient(circle at 50% 40%, rgba(227,191,255,0.15), #0a090c 72%);
  display: grid; place-items: center; color: rgba(227,191,255,0.85);
}
.cart-item__thumb svg { width: 40px; height: 40px; }
.cart-item__name { font-size: 18px; font-weight: 600; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cart-badge {
  display: inline-flex; padding: 3px 10px; border-radius: 999px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid rgba(229,194,255,0.4); color: #e5c2ff; background: rgba(227,191,255,0.07);
}
.cart-item__conf { margin-top: 6px; color: rgba(255,255,255,0.55); font-size: 13.5px; line-height: 1.55; }
.cart-item__custom {
  display: flex; gap: 9px; align-items: flex-start; margin-top: 12px; padding: 11px 13px;
  border-radius: 11px; border: 1px solid rgba(255,111,171,0.22);
  background: radial-gradient(120% 160% at 0% 0%, rgba(255,111,171,0.06), transparent 60%), rgba(255,255,255,0.012);
  max-width: 480px;
}
.cart-item__custom svg { flex: none; width: 15px; height: 15px; color: #ff6fab; margin-top: 1px; }
.cart-item__custom p { color: rgba(255,255,255,0.7); font-size: 12.5px; line-height: 1.55; }
.cart-item__custom b { color: #fff; }
.cart-item__right { text-align: right; }
.cart-item__price { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cart-item__rm {
  margin-top: 10px; background: none; border: 0; color: rgba(255,255,255,0.4);
  font-size: 12.5px; cursor: pointer; font-family: inherit; text-decoration: underline;
}
@media (hover:hover) { .cart-item__rm:hover { color: #ff6fab; } }
@media (max-width: 560px) {
  .cart-item { grid-template-columns: 64px 1fr; }
  .cart-item__thumb { width: 64px; height: 64px; border-radius: 12px; }
  .cart-item__right { grid-column: 2; text-align: left; display: flex; align-items: center; gap: 16px; }
  .cart-item__rm { margin-top: 0; }
}

/* empty state */
.cart-empty { padding: 60px 0 20px; text-align: center; }
.cart-empty__ic {
  width: 74px; height: 74px; margin: 0 auto 22px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.1); display: grid; place-items: center;
  background: radial-gradient(circle at 50% 38%, rgba(227,191,255,0.1), transparent 70%);
  color: rgba(227,191,255,0.8);
}
.cart-empty__ic svg { width: 30px; height: 30px; }
.cart-empty h2 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 400; }
.cart-empty p { margin: 12px auto 26px; max-width: 380px; color: rgba(255,255,255,0.55); font-size: 15px; line-height: 1.6; }

/* summary */
.cart-sum {
  position: sticky; top: 92px; border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.1);
  background:
    radial-gradient(130% 120% at 85% 0%, rgba(227,191,255,0.07), transparent 55%),
    linear-gradient(160deg, rgba(20,18,24,0.95), rgba(12,11,14,0.95));
  padding: 26px;
}
@media (max-width: 880px) { .cart-sum { position: static; } }
.cart-sum h2 { font-size: 17px; font-weight: 600; margin-bottom: 14px; }
.cart-sum__row {
  display: flex; justify-content: space-between; padding: 10px 0;
  font-size: 14px; color: rgba(255,255,255,0.62); border-top: 1px solid rgba(255,255,255,0.06);
}
.cart-sum__row b { color: rgba(255,255,255,0.9); font-weight: 500; font-variant-numeric: tabular-nums; }
.cart-sum__total { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 0 6px; border-top: 1px solid rgba(255,255,255,0.1); }
.cart-sum__total span { font-size: 13px; color: rgba(255,255,255,0.5); }
.cart-sum__total strong {
  font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums;
  background: linear-gradient(120deg,#fff,#e5c2ff 70%,var(--brand-mor));
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.cart-sum__cta {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  margin-top: 16px; padding: 16px; border: 0; border-radius: 999px;
  background: #f4eefb; color: #11070f; font-size: 15px; font-weight: 600; text-decoration: none;
  transition: transform .3s ease, box-shadow .3s ease;
}
@media (hover:hover) { .cart-sum__cta:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(229,194,255,0.22); } }
.cart-sum__note { margin-top: 13px; text-align: center; color: rgba(255,255,255,0.4); font-size: 12px; line-height: 1.5; }
.cart-sum__back { display: block; margin-top: 14px; text-align: center; color: rgba(255,255,255,0.55); font-size: 13.5px; text-decoration: none; }
@media (hover:hover) { .cart-sum__back:hover { color: #e5c2ff; } }

/* ░░░ Ödeme (checkout) sayfası ░░░
   Hard-code karşılığı: htmlsite/odeme.html içindeki sayfaya özel <style> bloğu. */
    .co-page { --co-pad: clamp(20px, 4vw, 64px); --co-max: 1120px; }
    .co-hero { max-width: var(--co-max); margin: 0 auto; padding: 148px var(--co-pad) 20px; }
    .co-hero h1 { margin-top: 14px; font-size: clamp(30px, 4vw, 52px); line-height: 1; font-weight: 400; letter-spacing: -0.012em; }

    /* stepper */
    .co-stepper { display: flex; align-items: center; gap: 0; max-width: var(--co-max); margin: 26px auto 0; padding: 0 var(--co-pad); }
    .co-stepper__item { display: flex; align-items: center; gap: 11px; }
    .co-stepper__n {
      position: relative;
      width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none;
      border: 1.5px solid rgba(255,255,255,0.16); color: rgba(255,255,255,0.5);
      font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums;
      transition: border-color .4s ease, background .4s ease, color .4s ease, box-shadow .4s ease;
    }
    /* Rakam ve tik ikonu aynı merkezde üst üste — rakam tam ortada dursun */
    .co-stepper__n > span {
      grid-area: 1 / 1; display: flex; align-items: center; justify-content: center;
      width: 100%; height: 100%; line-height: 1;
    }
    .co-stepper__n svg { grid-area: 1 / 1; width: 15px; height: 15px; opacity: 0; transition: opacity .3s ease; }
    .co-stepper__lbl { font-size: 13.5px; color: rgba(255,255,255,0.5); font-weight: 500; transition: color .4s ease; white-space: nowrap; }
    .co-stepper__line { flex: 1; height: 1.5px; background: rgba(255,255,255,0.12); margin: 0 16px; position: relative; overflow: hidden; }
    .co-stepper__line::after { content: ""; position: absolute; inset: 0; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg,#e5c2ff,var(--brand-mor)); transition: transform .5s ease; }
    .co-stepper__item.is-active .co-stepper__n { border-color: rgba(229,194,255,0.9); color: #fff; background: radial-gradient(circle at 50% 36%, rgba(229,194,255,0.25), #14121a 72%); box-shadow: 0 0 0 4px rgba(229,194,255,0.08); }
    .co-stepper__item.is-active .co-stepper__lbl { color: #fff; }
    .co-stepper__item.is-done .co-stepper__n { border-color: rgba(229,194,255,0.6); background: #e5c2ff; color: #11070f; }
    .co-stepper__item.is-done .co-stepper__n span { display: none; }
    .co-stepper__item.is-done .co-stepper__n svg { opacity: 1; }
    .co-stepper__line.is-done::after { transform: scaleX(1); }
    @media (max-width: 680px) { .co-stepper__lbl { display: none; } .co-stepper__line { margin: 0 8px; } }

    /* layout */
    .co-layout {
      max-width: var(--co-max); margin: 0 auto; padding: 34px var(--co-pad) 120px;
      display: grid; grid-template-columns: minmax(0,1.4fr) minmax(300px,0.6fr);
      gap: clamp(28px,4vw,56px); align-items: start;
    }
    @media (max-width: 880px) { .co-layout { grid-template-columns: 1fr; } .co-summary { order: -1; } }

    /* panels */
    .co-panel { display: none; }
    .co-panel.is-active { display: block; animation: coIn .5s ease; }
    @keyframes coIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
    .co-panel__title { font-size: 21px; font-weight: 600; }
    .co-panel__sub { margin-top: 6px; color: rgba(255,255,255,0.55); font-size: 14px; line-height: 1.55; }

    /* form fields */
    .co-fields { margin-top: 24px; display: grid; gap: 16px; }
    .co-fields--2 { grid-template-columns: 1fr 1fr; }
    @media (max-width: 560px) { .co-fields--2 { grid-template-columns: 1fr; } }
    .co-field { display: flex; flex-direction: column; gap: 7px; }
    .co-field.full { grid-column: 1 / -1; }
    .co-field label { font-size: 12.5px; color: rgba(255,255,255,0.6); font-weight: 500; }
    .co-field label .req { color: #ff6fab; }
    .co-input, .co-select {
      padding: 13px 15px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.03); color: #fff; font-size: 14.5px; font-family: inherit; outline: none;
      transition: border-color .3s ease, box-shadow .3s ease;
    }
    .co-input:focus, .co-select:focus { border-color: rgba(229,194,255,0.6); box-shadow: 0 0 0 3px rgba(229,194,255,0.08); }
    .co-input::placeholder { color: rgba(255,255,255,0.28); }
    .co-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23999' stroke-width='1.6' d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; padding-right: 40px; }
    .co-input.is-err { border-color: rgba(255,111,171,0.7); }
    .co-field__err { color: #ff6fab; font-size: 12px; display: none; }
    .co-field__err.show { display: block; }


    /* nav buttons */
    .co-nav { display: flex; gap: 14px; margin-top: 28px; }
    .co-btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 9px;
      padding: 15px 26px; border-radius: 999px; font-size: 14.5px; font-weight: 600; font-family: inherit;
      cursor: pointer; transition: transform .25s ease, opacity .25s ease, box-shadow .25s ease;
    }
    .co-btn--ghost { background: none; border: 1px solid rgba(255,255,255,0.18); color: rgba(255,255,255,0.75); }
    .co-btn--next { border: 0; background: #f4eefb; color: #11070f; flex: 1; }
    .co-btn--next[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }
    .co-btn svg { width: 16px; height: 16px; }
    @media (hover:hover) {
      .co-btn--next:not([aria-disabled="true"]):hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(229,194,255,0.24); }
      .co-btn--ghost:hover { border-color: rgba(255,255,255,0.4); color: #fff; }
    }

    /* summary */
    .co-summary {
      position: sticky; top: 92px; border-radius: 18px;
      border: 1px solid rgba(255,255,255,0.1);
      background:
        radial-gradient(130% 120% at 85% 0%, rgba(227,191,255,0.07), transparent 55%),
        linear-gradient(160deg, rgba(20,18,24,0.95), rgba(12,11,14,0.95));
      padding: 24px;
    }
    @media (max-width: 880px) { .co-summary { position: static; } }
    .co-summary h2 { font-size: 16px; font-weight: 600; margin-bottom: 16px; }
    .co-sumitem { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(255,255,255,0.06); }
    .co-sumitem__t { flex: none; width: 42px; height: 42px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.09); background: radial-gradient(circle at 50% 40%, rgba(227,191,255,0.14), #0a090c 70%); display: grid; place-items: center; color: rgba(227,191,255,0.8); }
    .co-sumitem__t svg { width: 22px; height: 22px; }
    .co-sumitem__n { font-size: 13.5px; font-weight: 600; }
    .co-sumitem__badge { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 9px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; border: 1px solid rgba(229,194,255,0.4); color: #e5c2ff; }
    .co-sumitem__c { margin-top: 2px; color: rgba(255,255,255,0.5); font-size: 11.5px; line-height: 1.4; }
    .co-sumitem__p { margin-left: auto; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .co-sumrow { display: flex; justify-content: space-between; padding: 9px 0; font-size: 13px; color: rgba(255,255,255,0.6); border-top: 1px solid rgba(255,255,255,0.06); }
    .co-sumrow b { color: rgba(255,255,255,0.9); font-weight: 500; }
    .co-sumtotal { display: flex; justify-content: space-between; align-items: baseline; padding: 15px 0 4px; border-top: 1px solid rgba(255,255,255,0.1); }
    .co-sumtotal span { font-size: 12.5px; color: rgba(255,255,255,0.5); }
    .co-sumtotal strong { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; background: linear-gradient(120deg,#fff,#e5c2ff 70%,var(--brand-mor)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
    .co-sumsecure { margin-top: 14px; display: flex; gap: 7px; align-items: center; color: rgba(255,255,255,0.4); font-size: 11.5px; }
    .co-sumsecure svg { width: 13px; height: 13px; color: rgba(209,168,255,0.7); flex: none; }

    /* empty guard */
    .co-empty { max-width: var(--co-max); margin: 0 auto; padding: 60px var(--co-pad) 120px; text-align: center; }
    .co-empty h2 { font-size: 26px; font-weight: 400; }
    .co-empty p { margin: 12px auto 24px; max-width: 380px; color: rgba(255,255,255,0.55); font-size: 15px; line-height: 1.6; }


/* ░░░ Adım 3 · satır içi ödeme formu ░░░
   Sipariş oluşturulduktan sonra sağlayıcının formu (PayTR) 3. adıma
   gömülür — bkz. assets/js/earfit-pay-inline.js.

   PayTR formu doğrudan bir iframe olarak akar (#paytriframe).
   Kart alanlarının İÇİ sağlayıcının iframe'idir — PCI gereği öyle kalmalı,
   o yüzden çerçeve/başlık/genişlik dışında iç görünüme karışılmaz. */
    .co-pay { margin-top: 22px; }
    .co-pay[hidden] { display: none; }

    /* Formu saran kart — panelin geri kalanıyla aynı dil. */
    .co-pay__box {
      border-radius: 18px; border: 1px solid rgba(255,255,255,0.08); overflow: hidden;
      background: linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.008));
      box-shadow: 0 24px 64px rgba(0,0,0,0.4);
    }
    .co-pay__head {
      display: flex; align-items: center; justify-content: space-between; gap: 14px;
      padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,0.07);
    }
    .co-pay__head h3 { font-size: 14.5px; font-weight: 600; }
    .co-pay__secure {
      display: inline-flex; align-items: center; gap: 7px; flex: none;
      padding: 5px 11px; border-radius: 999px;
      border: 1px solid rgba(139,224,168,0.32); background: rgba(139,224,168,0.08);
      color: #8be0a8; font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
    }
    .co-pay__secure svg { width: 12px; height: 12px; flex: none; }

    /* Sağlayıcı çıktısının aktığı alan. Yükseklik sağlayıcının iframe'ine
       bırakılır — sabit yükseklik verilirse taksit tablosu açıldığında
       form kırpılır. */
    .co-pay__body { padding: 20px 16px 24px; }
    .co-pay__body > * { max-width: 100%; }
    .co-pay__body iframe {
      display: block; margin: 0 auto; width: 100%; max-width: 520px;
      border: 0; border-radius: 12px;
    }
    /* PayTR iframe'inin yüksekliğini kendi resizer script'i ayarlar
       (payTRiframeResizer.js → iFrameResize). Sabit yükseklik verilirse
       taksit tablosu açıldığında form kırpılır — bu yüzden height'a
       dokunulmaz, yalnızca genişlik ve çerçeve tema kontrolündedir. */
    .co-pay__body #paytriframe { max-width: 520px; }
    /* Özel imleç (body{cursor:none}) iframe içine giremez; kart formu
       üzerinde gerçek imleç geri açılır. */
    .co-pay, .co-pay * { cursor: auto; }
    .co-pay a, .co-pay button { cursor: pointer; }

    /* Form istenirken gösterilen iskelet (kartın içinde). */
    .co-pay__body.is-loading::before {
      content: ""; display: block; height: 360px; border-radius: 12px;
      max-width: 520px; margin: 0 auto;
      background: linear-gradient(100deg, rgba(255,255,255,0.03) 30%, rgba(255,255,255,0.07) 50%, rgba(255,255,255,0.03) 70%);
      background-size: 220% 100%;
      animation: payShimmer 1.5s ease-in-out infinite;
    }

    .co-pay__trust {
      display: flex; align-items: flex-start; gap: 9px; margin-top: 14px; padding: 0 4px;
      color: rgba(255,255,255,0.42); font-size: 12.5px; line-height: 1.55;
    }
    .co-pay__trust svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: rgba(209,168,255,0.7); }

    .co-pay__err {
      padding: 14px 16px; border-radius: 12px; text-align: center;
      border: 1px solid rgba(255,111,171,0.35); background: rgba(255,111,171,0.07);
      color: #ffb8d4; font-size: 14px; line-height: 1.55;
    }

    /* Form gömülüyken Woo'nun ödeme yöntemi bloğu ve "Siparişi tamamla"
       düğmesi gizlenir — ödeme artık sağlayıcının formunda tamamlanıyor.
       "Geri" bırakılır: sipariş oluşmuş olsa da kullanıcı vazgeçebilmeli
       (ödenmemiş sipariş Woo tarafında pending kalır). */
    .co-panel[data-panel="3"]:has(.co-pay:not([hidden])) #order_review {
      display: none;
    }

    @media (max-width: 560px) {
      .co-pay__head { padding: 14px 16px; }
      .co-pay__body { padding: 16px 8px 20px; }
    }

/* ░░░ Ödeme sayfası (order-pay) ░░░
   Woo'nun `checkout/order-receipt.php` çıktısı — sipariş makbuzu + ödeme
   sağlayıcısının (PayTR) iframe'i. Sağlayıcı formu `.pay-panel__body`
   içine ortalanır, çevresi tema diliyle kurulur. */
    .pay-page { --pay-pad: clamp(20px, 4vw, 64px); --pay-max: 1120px; }

    .pay-hero { max-width: var(--pay-max); margin: 0 auto; padding: 148px var(--pay-pad) 0; }
    .pay-hero h1 { margin-top: 14px; font-size: clamp(30px, 4vw, 52px); line-height: 1; font-weight: 400; letter-spacing: -0.012em; }
    .pay-hero__lede { margin-top: 16px; max-width: 520px; color: rgba(255,255,255,0.6); font-size: 16px; line-height: 1.6; }

    .pay-layout {
      max-width: var(--pay-max); margin: 0 auto; padding: 38px var(--pay-pad) 110px;
      display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 30px; align-items: start;
    }

    /* ── ödeme paneli ── */
    .pay-panel {
      border-radius: 20px; border: 1px solid rgba(255,255,255,0.08); overflow: hidden;
      background: linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.008));
      box-shadow: 0 30px 80px rgba(0,0,0,0.45);
    }
    .pay-panel__head {
      display: flex; align-items: center; justify-content: space-between; gap: 14px;
      padding: 18px 24px; border-bottom: 1px solid rgba(255,255,255,0.07);
    }
    .pay-panel__head h2 { font-size: 15px; font-weight: 600; letter-spacing: -0.005em; }
    .pay-panel__badge {
      display: inline-flex; align-items: center; gap: 7px; flex: none;
      padding: 5px 11px; border-radius: 999px;
      border: 1px solid rgba(139,224,168,0.32); background: rgba(139,224,168,0.08);
      color: #8be0a8; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
    }
    .pay-panel__badge svg { width: 12px; height: 12px; flex: none; }

    /* Sağlayıcı formu (PayTR iframe) — ortalanır, kenarlıksız oturur. */
    .pay-panel__body { padding: 26px 20px 30px; min-height: 520px; display: block; }
    .pay-panel__body > * { max-width: 100%; }
    .pay-panel__body #paytriframe { max-width: 500px; }
    .pay-panel__body iframe { display: block; margin: 0 auto; max-width: 100%; border: 0; border-radius: 14px; }
    /* Sitenin özel imleci (`body { cursor: none }`) iframe içine giremez;
       kart formu üzerinde gerçek imleç geri açılır — yoksa kullanıcı kart
       bilgilerini imleçsiz doldurmak zorunda kalır. */
    .pay-panel__body, .pay-panel__body * { cursor: auto; }
    .pay-panel__body a, .pay-panel__body button { cursor: pointer; }
    /* Özel imleç, ödeme formunun üzerindeyken gizlenir (bkz. earfit-pay.js);
       aksi hâlde iframe'i takip edemeyip kenarda takılı kalıyordu. */
    .cursor.is-hide-pay { opacity: 0; }
    /* Sağlayıcı formu gelene kadar iskelet (bkz. earfit-pay.js). */
    .pay-panel__body.is-loading::before {
      content: ""; display: block; height: 420px; border-radius: 14px;
      max-width: 500px; margin: 0 auto;
      background: linear-gradient(100deg, rgba(255,255,255,0.03) 30%, rgba(255,255,255,0.07) 50%, rgba(255,255,255,0.03) 70%);
      background-size: 220% 100%;
      animation: payShimmer 1.5s ease-in-out infinite;
    }
    @keyframes payShimmer { 0% { background-position: 130% 0; } 100% { background-position: -30% 0; } }
    @media (prefers-reduced-motion: reduce) {
      .pay-panel__body.is-loading::before { animation: none; }
    }

    .pay-trust {
      display: flex; align-items: flex-start; gap: 9px; margin-top: 16px; padding: 0 4px;
      color: rgba(255,255,255,0.42); font-size: 12.5px; line-height: 1.55;
    }
    .pay-trust svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: rgba(209,168,255,0.7); }

    /* ── sipariş özeti (sağ sütun) ── */
    .pay-side { position: sticky; top: 104px; }
    .pay-sum {
      border-radius: 18px; border: 1px solid rgba(255,255,255,0.08);
      background: linear-gradient(160deg, rgba(255,255,255,0.04), rgba(255,255,255,0.006));
    }
    .pay-sum__head {
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
      padding: 17px 20px; border-bottom: 1px solid rgba(255,255,255,0.07);
    }
    .pay-sum__head h2 { font-size: 14.5px; font-weight: 600; }
    .pay-sum__no {
      color: rgba(255,255,255,0.5); font-size: 12.5px; font-variant-numeric: tabular-nums; letter-spacing: 0.03em;
    }

    .pay-sum__items { padding: 6px 0; }
    .pay-item { display: flex; align-items: center; gap: 12px; padding: 13px 20px; }
    .pay-item + .pay-item { border-top: 1px solid rgba(255,255,255,0.05); }
    .pay-item__t {
      position: relative; flex: none; width: 44px; height: 44px; border-radius: 11px;
      border: 1px solid rgba(255,255,255,0.09);
      background: radial-gradient(circle at 50% 40%, rgba(227,191,255,0.14), #0a090c 70%);
      display: grid; place-items: center; color: rgba(227,191,255,0.8); overflow: visible;
    }
    .pay-item__t img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
    .pay-item__t svg { width: 22px; height: 22px; }
    .pay-item__q {
      position: absolute; top: -7px; right: -7px; min-width: 19px; height: 19px; padding: 0 5px;
      border-radius: 999px; display: grid; place-items: center;
      background: var(--brand-lilac); color: #11070f;
      font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums;
    }
    .pay-item__b { min-width: 0; }
    .pay-item__n { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
    .pay-item__p {
      margin-left: auto; padding-left: 6px; font-size: 13.5px; font-weight: 600;
      font-variant-numeric: tabular-nums; white-space: nowrap;
    }

    .pay-sum__rows { padding: 14px 20px; border-top: 1px solid rgba(255,255,255,0.07); display: grid; gap: 9px; }
    .pay-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
    .pay-row span { color: rgba(255,255,255,0.52); font-size: 13px; }
    .pay-row b { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
    .pay-row--total { margin-top: 5px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,0.07); }
    .pay-row--total span { color: rgba(255,255,255,0.65); font-size: 14px; }
    .pay-row--total strong {
      font-size: 23px; font-weight: 600; font-variant-numeric: tabular-nums;
      background: linear-gradient(120deg,#fff,#e5c2ff 70%,var(--brand-mor));
      -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
    }
    .pay-row--total strong .woocommerce-Price-amount { color: inherit; -webkit-text-fill-color: inherit; }

    .pay-meta { padding: 14px 20px; border-top: 1px solid rgba(255,255,255,0.07); display: grid; gap: 9px; }
    .pay-meta > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
    .pay-meta dt { color: rgba(255,255,255,0.45); font-size: 12.5px; }
    .pay-meta dd { margin: 0; color: rgba(255,255,255,0.8); font-size: 12.5px; text-align: right; }

    .pay-back {
      display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 0 4px;
      color: rgba(255,255,255,0.55); font-size: 13.5px; text-decoration: none;
      transition: color .3s ease;
    }
    .pay-back svg { width: 14px; height: 14px; transition: transform .3s ease; }
    @media (hover:hover) {
      .pay-back:hover { color: var(--brand-lilac); }
      .pay-back:hover svg { transform: translateX(-3px); }
    }

    /* Woo'nun bu sayfadaki ham çıktısı (varsayılan makbuz listesi ve
       bildirimleri) tema bileşenleriyle yer değiştirdiği için gizlenir. */
    .pay-page ul.order_details { display: none; }
    .pay-page .woocommerce-notices-wrapper:not(:empty) {
      max-width: var(--pay-max); margin: 0 auto; padding: 0 var(--pay-pad);
    }

    @media (max-width: 980px) {
      .pay-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
      /* Özet mobilde formun ÜSTÜNE alınır — ne ödeneceği önce görünsün. */
      .pay-side { position: static; order: -1; }
      .pay-panel__body { min-height: 480px; padding: 20px 12px 24px; }
    }
    @media (max-width: 560px) {
      .pay-hero { padding-top: 124px; }
      .pay-panel__head { padding: 15px 17px; }
      .pay-panel__body { padding: 16px 6px 20px; }
    }

/* ░░░ Sipariş tamamlandı (teşekkür) sayfası ░░░
   Hard-code karşılığı: htmlsite/siparis-tamam.html içindeki sayfaya özel <style> bloğu. */
    .ty-page { --ty-pad: clamp(20px, 4vw, 64px); --ty-max: 900px; }
    .ty-wrap { max-width: var(--ty-max); margin: 0 auto; padding: 150px var(--ty-pad) 40px; }

    .ty-badge {
      width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center;
      border: 1px solid rgba(139,224,168,0.4);
      background: radial-gradient(circle at 50% 38%, rgba(139,224,168,0.2), transparent 70%);
      color: #8be0a8; margin-bottom: 26px;
      animation: tyPop .6s cubic-bezier(0.22,1,0.36,1);
    }
    @keyframes tyPop { 0% { transform: scale(0.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
    .ty-badge svg { width: 34px; height: 34px; }
    .ty-wrap h1 { font-size: clamp(30px, 4.4vw, 54px); line-height: 1.02; font-weight: 400; letter-spacing: -0.012em; }
    .ty-lede { margin-top: 16px; color: rgba(255,255,255,0.62); font-size: 16.5px; line-height: 1.65; max-width: 560px; }
    .ty-ref {
      display: inline-flex; align-items: center; gap: 10px; margin-top: 22px;
      padding: 11px 18px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.025); color: rgba(255,255,255,0.85); font-size: 14px;
    }
    .ty-ref b { color: #fff; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
    .ty-ref svg { width: 16px; height: 16px; color: #d1a8ff; }

    /* order summary */
    .ty-card {
      margin-top: 34px; border-radius: 18px; border: 1px solid rgba(255,255,255,0.09);
      background: linear-gradient(160deg, rgba(20,18,24,0.9), rgba(12,11,14,0.9));
      overflow: hidden;
    }
    .ty-card__head { padding: 20px 24px; border-bottom: 1px solid rgba(255,255,255,0.07); display: flex; justify-content: space-between; align-items: center; }
    .ty-card__head h2 { font-size: 15px; font-weight: 600; }
    .ty-card__head span { color: rgba(255,255,255,0.5); font-size: 13px; }
    .ty-item { display: flex; gap: 14px; padding: 18px 24px; border-bottom: 1px solid rgba(255,255,255,0.05); }
    .ty-item__t { flex: none; width: 46px; height: 46px; border-radius: 11px; border: 1px solid rgba(255,255,255,0.09); background: radial-gradient(circle at 50% 40%, rgba(227,191,255,0.14), #0a090c 70%); display: grid; place-items: center; color: rgba(227,191,255,0.8); }
    .ty-item__t svg { width: 24px; height: 24px; }
    .ty-item__n { font-size: 14.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .ty-badge-pill { padding: 2px 9px; border-radius: 999px; font-size: 9.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; border: 1px solid rgba(229,194,255,0.4); color: #e5c2ff; background: rgba(227,191,255,0.07); }
    .ty-item__c { margin-top: 3px; color: rgba(255,255,255,0.5); font-size: 12.5px; line-height: 1.45; }
    .ty-item__p { margin-left: auto; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .ty-card__total { display: flex; justify-content: space-between; align-items: baseline; padding: 18px 24px; }
    .ty-card__total span { color: rgba(255,255,255,0.55); font-size: 14px; }
    .ty-card__total strong { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; background: linear-gradient(120deg,#fff,#e5c2ff 70%,var(--brand-mor)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

    /* custom roadmap */
    .ty-road { margin-top: 42px; }
    .ty-road__head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 8px; }
    .ty-road__head svg { flex: none; width: 22px; height: 22px; color: #e5c2ff; margin-top: 3px; }
    .ty-road__head h2 { font-size: clamp(21px, 2.6vw, 30px); font-weight: 400; }
    .ty-road__head p { margin-top: 6px; color: rgba(255,255,255,0.6); font-size: 15px; line-height: 1.6; }

    /* 30-day countdown banner */
    .ty-count {
      display: flex; align-items: center; gap: 16px; margin: 22px 0 8px; padding: 18px 22px;
      border-radius: 15px; border: 1px solid rgba(255,111,171,0.28);
      background: radial-gradient(120% 180% at 0% 0%, rgba(255,111,171,0.09), transparent 60%), rgba(255,255,255,0.014);
    }
    .ty-count__n { font-size: 40px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; background: linear-gradient(120deg,#fff,var(--brand-mor)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
    .ty-count__l { font-size: 13.5px; color: rgba(255,255,255,0.7); line-height: 1.5; }
    .ty-count__l b { color: #fff; }

    /* steps */
    .ty-steps { position: relative; margin-top: 26px; display: grid; gap: 12px; }
    .ty-steps::before { content: ""; position: absolute; left: 22px; top: 30px; bottom: 30px; width: 2px; background: linear-gradient(180deg, rgba(229,194,255,0.5), rgba(255,111,171,0.4)); border-radius: 2px; }
    .ty-step { position: relative; display: grid; grid-template-columns: 46px 1fr; gap: 18px; align-items: start; }
    .ty-step__n { position: relative; z-index: 1; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid rgba(229,194,255,0.45); background: radial-gradient(circle at 50% 36%, rgba(229,194,255,0.18), #14121a 72%); color: #e5c2ff; }
    .ty-step__n svg { width: 20px; height: 20px; }
    .ty-step__body { border-radius: 14px; border: 1px solid rgba(255,255,255,0.08); background: linear-gradient(150deg, rgba(255,255,255,0.03), rgba(255,255,255,0.006)); padding: 16px 20px; }
    .ty-step__body h3 { font-size: 15.5px; font-weight: 600; }
    .ty-step__body p { margin-top: 6px; color: rgba(255,255,255,0.62); font-size: 13.5px; line-height: 1.6; }
    .ty-chip { display: inline-flex; align-items: center; gap: 8px; margin-top: 11px; padding: 8px 13px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.025); color: rgba(255,255,255,0.85); font-size: 13px; text-decoration: none; }
    .ty-chip svg { width: 14px; height: 14px; color: #d1a8ff; flex: none; }
    @media (hover:hover) { a.ty-chip:hover { border-color: rgba(209,168,255,0.4); } }

    .ty-actions { display: flex; gap: 14px; margin-top: 42px; flex-wrap: wrap; }

    /* universal note */
    .ty-note { display: flex; gap: 12px; margin-top: 30px; padding: 18px 20px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.09); background: rgba(255,255,255,0.015); }
    .ty-note svg { flex: none; width: 20px; height: 20px; color: #d1a8ff; margin-top: 1px; }
    .ty-note p { color: rgba(255,255,255,0.7); font-size: 14.5px; line-height: 1.6; }


/* ░░░ WooCommerce özgüllük düzeltmeleri ░░░
   woocommerce-layout.css şu kuralı basıyor:
     .woocommerce img, .woocommerce-page img { height: auto; max-width: 100% }
   Bu, özgüllüğü daha yüksek olduğu için temanın sabit yükseklikli
   görsellerini (nav logosu, footer logosu, sepet küçük resmi) ezip
   doğal boyutlarına döndürüyordu. Aşağıdaki kurallar yalnızca o kaybı
   geri alır — Woo'nun kendi ürün görsellerine dokunmaz. */

.woocommerce .nav__logo-img,
.woocommerce-page .nav__logo-img {
  height: 36px;
  width: auto;
}

.woocommerce .nav.is-scrolled .nav__logo-img,
.woocommerce-page .nav.is-scrolled .nav__logo-img {
  height: 30px;
}

.woocommerce .footer__small-logo,
.woocommerce-page .footer__small-logo {
  height: 26px;
  width: auto;
}

/* Yükleme ekranı logosu — her sayfada basılır. */
.woocommerce .loader__logo,
.woocommerce-page .loader__logo {
  height: 42px;
  width: auto;
}

/* Mega menüdeki ürün kartı görselleri kutularını doldurur. */
.woocommerce .nav__mega-media img,
.woocommerce-page .nav__mega-media img,
.woocommerce .nav__mega-photo,
.woocommerce-page .nav__mega-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Sepet drawer ve sepet sayfasındaki küçük görseller kutularını doldurur. */
.woocommerce .cartd__thumb img,
.woocommerce-page .cartd__thumb img,
.woocommerce .cart-item__thumb img,
.woocommerce-page .cart-item__thumb img,
.woocommerce .ty-item__t img,
.woocommerce-page .ty-item__t img,
.woocommerce .buy-sum__thumb img,
.woocommerce-page .buy-sum__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 900px) {
  .woocommerce .nav__logo-img,
  .woocommerce-page .nav__logo-img {
    height: 32px;
  }
  .woocommerce .nav.is-scrolled .nav__logo-img,
  .woocommerce-page .nav.is-scrolled .nav__logo-img {
    height: 28px;
  }
}


/* ░░░ Satın alma seçenekleri — hizalama ve metin akışı ░░░

   Tasarımdaki iki sorunu birlikte düzeltir:

   1) Kartın ilk sütunu `auto` genişlikteydi ve içeriği adıma göre değişiyordu:
      Versiyon adımında 52px ikon (.buy-opt__thumb), Gövde ve Kablo adımlarında
      40px renk örneği (.buy-opt__swatch). Üç adımın metin ve fiyat sütunları
      birbirine göre 12px kayıyordu.

   2) Kart içeriği <span> öğelerinden oluşuyor ve bunlara display verilmemişti;
      ad ile açıklama yan yana yapışıyor, satır sayısı değişince kart
      yükseklikleri tutmuyordu.

   NOT: 480px altında tasarım fiyat satırını alta indirip iki sütuna düşer
   (yukarıdaki @media kuralı). Aşağıdaki kurallar o kırılımı korur.
   Tüm .buy-opt__box ayarları TEK blokta toplanmıştır — ayrı bloklara
   bölünürse sonraki blok öncekinin grid ayarını ezer. */

@media (min-width: 481px) {
  .buy-opt__box {
    grid-template-columns: 52px 1fr auto;
    align-items: start;
  }
}

@media (max-width: 480px) {
  .buy-opt__box {
    grid-template-columns: 44px 1fr;
    align-items: start;
  }
  .buy-opt__thumb {
    width: 44px;
    height: 44px;
  }
}

/* Bölüm genişliği: malzeme anlatımlarıyla (.pdp-material) aynı ölçüde,
   kenardan kenara. Hard-code'da 1120px'di, ancak çevresindeki bölümler
   <template> içinde gizli olduğu için dar kaldığı fark edilmiyordu.

   Yapı .pdp-material ile aynı: bölümün kendisi tam genişlik olur, içerik
   sayfanın ortak ölçüsünde (1480px) ortalanır. Bölümde ayrı bir iç
   sarmalayıcı olmadığı için başlık ve ızgara tek tek ortalanır. */
.pdp-buy {
  width: 100%;
  max-width: none;
  /* Sayfa standardı: masaüstünde 40px, ≤760px'de 20px yan boşluk.
     Malzeme, istatistik, Ses İmzası ve teknik tablo bölümleri de aynı
     değeri kullanır — böylece tüm bölümlerin kenarları aynı çizgide olur. */
  padding-left: 40px;
  padding-right: 40px;
}

@media (max-width: 760px) {
  .pdp-buy {
    padding-left: 20px;
    padding-right: 20px;
  }
}

.pdp-buy__head,
.pdp-buy__grid {
  max-width: 1480px;
  margin-left: auto;
  margin-right: auto;
}

/* Geniş ekranda özet paneli (fiyat dökümü + Sepete Ekle) daha ferah olsun.
   Alt sınır yükseltilir ki panel dar kalmasın; üst sınır seçenek kartlarının
   payını korur. */
@media (min-width: 1200px) {
  .pdp-buy__grid {
    grid-template-columns: minmax(0, 1fr) minmax(400px, 480px);
  }
}

@media (min-width: 1600px) {
  .pdp-buy__grid {
    grid-template-columns: minmax(0, 1fr) minmax(440px, 520px);
  }
}

/* İçerik dikey aksın: ad ve açıklama kendi satırlarını alır. */
.buy-opt__main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.buy-opt__name,
.buy-opt__desc {
  display: block;
  width: 100%;
}

/* Küçük renk örneği 52px'lik sütunun ortasına otursun. */
.buy-opt__swatch {
  justify-self: center;
}

/* Yan sütunlar dikeyde ortalı kalsın (kart üstten hizalı olsa da). */
.buy-opt__thumb,
.buy-opt__swatch,
.buy-opt__right {
  align-self: center;
}


/* ░░░ Ürün sayfası — bölüm genişlik hizası ░░░
   Sayfanın ortak içerik ölçüsü 1480px (malzeme anlatımları, Ses İmzası,
   teknik tablo, satın alma). İstatistik şeridi tasarımda 1340px'di ve
   komşularından 140px dar kalıyordu; ortak ölçüye çekildi. */

.pdp-stats__grid {
  max-width: 1480px;
}


/* ░░░ Satın alma özeti — görsel oranı ░░░
   Görsel tasarımda `aspect-ratio: 3/2` idi; panel genişledikçe yükseliyor ve
   fiyat dökümünü aşağı itiyordu. Hafif yatay bir orana (4/3) alındı: ürün
   görselleri dikey (780x1024) olduğu için bu oranda az kırpılıyor, panel de
   gereğinden fazla uzamıyor. */

.buy-sum__thumb {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

/* Kutu `display: grid; place-items: center` kullanıyor. Bu, <img>'i grid
   öğesi yapıp doğal boyutunda ORTALIYOR — esnetmiyor. Ürün görseli dikey
   (780x1024) olduğu için kutu görselin boyuna göre uzuyor ve aspect-ratio
   hiç devreye girmiyordu. Görseli hücrenin tamamına yayıyoruz.

   Seçici, yukarıdaki `.woocommerce-page .buy-sum__thumb img` kuralıyla (0,2,1)
   aynı özgüllükte yazılır; aksi halde o kural bu ayarları ezerdi. */
.buy-sum__thumb img,
.woocommerce .buy-sum__thumb img,
.woocommerce-page .buy-sum__thumb img {
  grid-area: 1 / 1;
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ░░░ Site geneli container standardı ░░░
   Sayfa tipleri dört farklı genişlik kullanıyordu (1480 / 1280 / 1180 / 1120px)
   ve sayfalar arası geçişte kenar hizası zıplıyordu. Hepsi ürün sayfasının
   ölçüsüne çekilir: içerik 1480px, yan boşluk masaüstünde 40px, ≤760px'de 20px.

   Değişkenler üzerinden ayarlandığı için o sayfaların tüm bölümleri
   (hero, layout, CTA) tek noktadan hizalanır. */

.tech-page  { --tech-max: 1480px;  --tech-pad: 40px; }
.pke-page   { --pke-max: 1480px;   --pke-pad: 40px; }
.proc-page  { --proc-max: 1480px;  --proc-pad: 40px; }
.sup-page   { --sup-max: 1480px;   --sup-pad: 40px; }
.con-page   { --con-max: 1480px;   --con-pad: 40px; }
.legal-page { --legal-pad: clamp(56px, 7vw, 132px); } /* nav ile aynı hiza */
.cart-page  { --c-max: 1480px;     --c-pad: 40px; }
.co-page    { --co-max: 1480px;    --co-pad: 40px; }
.ty-page    { --ty-max: 1480px;    --ty-pad: 40px; }
/* Ödeme sayfası içerik genişliği: sağlayıcı formu ~500px olduğu için
   1480px'e açılmaz — iki sütun 1180px'de dengeli kalır. */
.pay-page   { --pay-max: 1180px;   --pay-pad: 40px; }

@media (max-width: 760px) {
  .tech-page  { --tech-pad: 20px; }
  .pke-page   { --pke-pad: 20px; }
  .proc-page  { --proc-pad: 20px; }
  .sup-page   { --sup-pad: 20px; }
  .con-page   { --con-pad: 20px; }
  .legal-page { --legal-pad: 20px; }
  .cart-page  { --c-pad: 20px; }
  .co-page    { --co-pad: 20px; }
  .ty-page    { --ty-pad: 20px; }
  .pay-page   { --pay-pad: 20px; }
}

/* Destek sayfası: container 1480px'e çıkınca yan menü (248px sabit) orantısız
   dar kalıyor ve içerik satırları okunamayacak kadar uzuyordu. Menü büyütülür,
   içerik metni okunabilir bir üst sınırda tutulur. */
@media (min-width: 1100px) {
  .sup-layout {
    grid-template-columns: 300px minmax(0, 1fr);
  }
  .sup-body {
    max-width: 980px;
  }
}

/* ░░░ Footer menüleri — mobilde akordiyon ░░░
   Masaüstünde üç sütun yan yana ve açık kalır. Mobilde başlıklar kapalı
   akordiyon olur; tıklanınca ilgili liste açılır.

   Başlıklar <button aria-expanded> olduğu için klavye ve ekran okuyucuyla
   çalışır. Gizleme yalnızca JS'in eklediği `.js-footer-acc-ready` sınıfıyla
   devreye girer — script yüklenmezse bağlantılar erişilebilir kalır.

   NOT: .footer__links zaten `display: flex; gap: 14px` kullanıyor. Açılma
   animasyonu için max-height tercih edildi; grid-template-rows: 0fr tekniği
   listenin kendi display/gap değerlerini ezip madde aralıklarını bozuyordu. */

/* Buton, masaüstünde başlık gibi görünür.
   Yalnızca tarayıcının buton varsayılanları sıfırlanır — tipografi
   (11px / 600 / 0.16em / uppercase) yukarıdaki .footer__label kuralından
   gelir. `font: inherit` YAZILMAZ; o kısayol font-size ve font-weight'i de
   ezip başlıkları büyük ve ince gösteriyordu. */
.footer__label {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: default;
  -webkit-appearance: none;
  appearance: none;
}

.footer__label-icon {
  display: none;
  flex: none;
  transition: transform 0.3s ease;
}

@media (max-width: 760px) {
  .footer__links-section {
    display: block;
  }

  .footer__column {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .footer__column:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .footer__label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 0;
    margin: 0;
    cursor: pointer;
  }

  .footer__label-icon {
    display: block;
    color: rgba(255, 255, 255, 0.55);
  }

  /* Kapalı durum — liste kendi flex düzenini korur, yalnızca yüksekliği kısılır. */
  .js-footer-acc-ready .footer__links {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin: 0;
    padding-bottom: 0;
    transition: max-height 0.35s ease, opacity 0.25s ease, padding-bottom 0.35s ease;
  }

  /* Açık durum. max-height gerçek içerikten büyük bir üst sınırdır. */
  .js-footer-acc-ready .footer__label[aria-expanded="true"] + .footer__links {
    max-height: 480px;
    opacity: 1;
    padding-bottom: 20px;
  }

  /* Açıkken artı işareti çarpıya döner. */
  .footer__label[aria-expanded="true"] .footer__label-icon {
    transform: rotate(45deg);
  }
}


/* ░░░ Malzeme panelleri — mobil düzen ░░░
   Ana sayfadaki .stacked-panel kartları mobilde tek sütuna düşüyor ama
   tasarım masaüstü için yazıldığından dört sorun kalıyordu:

     1) Görsellerin köşeleri keskin (.stacked-panel__visual--photo → radius 0;
        masaüstünde kartın kenarına dayandığı için kasıtlıydı)
     2) Başlık çok büyük (clamp'in 12vw tabanı dar ekranda taşıyor)
     3) Metin bloğu kartın kendi iç boşluğuna ek padding alıyor → sağ/sol eşitsiz
     4) Görsel yüksekliği sabit 36vh — dar ekranda orantısız

   Aşağıdaki kurallar yalnızca ≤900px'de geçerlidir; masaüstü düzeni değişmez. */

@media (max-width: 900px) {
  /* Kart iç boşluğu tek kaynaktan gelsin. */
  .stacked-panel__inner {
    padding: 20px;
    gap: 22px;
  }

  /* 3 · Metin bloğu ek yan boşluk almasın — kartın padding'i yeterli. */
  .stacked-panel__content {
    padding: 0;
  }

  /* 1 · Görseller yuvarlak köşeli olsun. */
  .stacked-panel__visual,
  .stacked-panel__visual--photo {
    border-radius: 16px;
    overflow: hidden;
  }

  /* 4 · Görsel oranı sabit yükseklik yerine en-boy oranıyla. */
  .stacked-panel__visual {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .stacked-panel__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
  }

  /* 2 · Başlık küçülsün. */
  .stacked-panel__title {
    font-size: clamp(28px, 7.5vw, 40px);
    line-height: 1.08;
  }

  .stacked-panel__text {
    font-size: 15px;
    line-height: 1.6;
  }

  /* Görsel üzerindeki etiket kartın köşesine yapışmasın. */
  .stacked-panel__visual-label {
    left: 14px;
    bottom: 14px;
    font-size: 11px;
  }

  /* Tüm kartlarda aynı sıra: görsel → başlık → açıklama → buton.
     Masaüstünde çift numaralı paneller ters yerleşiyor (metin solda) ve DOM'da
     metin bloğu önce basılıyor. Mobilde tek sütuna düşünce bu sıra bozuluyordu;
     `order` ile görsel her zaman öne alınır. Başlık/açıklama/buton zaten
     .stacked-panel__content içinde doğru sırada. */
  .stacked-panel__visual {
    order: 1;
  }

  .stacked-panel__content {
    order: 2;
  }

  /* order yalnızca flex/grid çocuklarında çalışır — inner zaten grid. */
  .stacked-panel__inner,
  .stacked-panel__inner--reverse {
    grid-auto-flow: row;
  }
}


/* ░░░ Footer alt bar — mobilde tek satır ░░░
   ≤640px'de `.footer__bottom { flex-direction: column }` uygulanıyordu ve
   telif metni ile ajans logosu alt alta düşüyordu. İkisi tek satırda kalır:
   metin solda, logo sağda. Metin uzunsa satır kaydırılır, logo daralmaz. */

@media (max-width: 640px) {
  .footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .footer__bottom-left {
    min-width: 0;
    flex: 1 1 auto;
  }

  .footer__bottom-right {
    flex: 0 0 auto;
  }
}


/* ░░░ Üst çubuk — mobil sadeleştirme ve buton tutarlılığı ░░░

   1) Dil değiştirici mobilde üst çubuktan kaldırılır; aynı bileşen mobil
      menünün içinde gösterilir (header.php · .mobile-menu__lang).
   2) Hamburger, diğer ikonlarla aynı ölçü ve çerçeveyi kullanır. Tasarımda
      42px ve çerçevesizdi, ikonlar ise 38px yuvarlak çerçeveliydi — yan yana
      uyumsuz duruyordu. */

@media (max-width: 900px) {
  /* 1 · Üst çubuktaki dil değiştirici gizlenir (mobil menüde görünür). */
  .nav__actions .nav__lang {
    display: none;
  }

  /* 2 · Hamburger diğer ikonlarla aynı kutu. */
  .nav__burger {
    width: 34px;
    height: 34px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: none;
    gap: 4px;
  }

  .nav__burger span {
    width: 16px;
    height: 1.6px;
  }

  /* Açık hâldeki çarpı dönüşümü küçülen kutuya göre yeniden hesaplanır.
     Açık durum `body.menu-open` ile kontrol edilir (bkz. assets/js/earfit.js). */
  body.menu-open .nav__burger span:nth-child(1) {
    transform: translateY(5.6px) rotate(45deg);
  }

  body.menu-open .nav__burger span:nth-child(3) {
    transform: translateY(-5.6px) rotate(-45deg);
  }

  /* Dokunma hedefi görsel kutudan büyük kalsın (erişilebilirlik). */
  .nav__icon,
  .nav__burger {
    position: relative;
  }

  .nav__icon::after,
  .nav__burger::after {
    content: "";
    position: absolute;
    inset: -6px;
  }
}

/* Mobil menü içindeki dil değiştirici — menü listesinin altında,
   alt bilgi bloğunun üstünde durur. */
.mobile-menu__lang {
  display: none;
}

@media (max-width: 900px) {
  .mobile-menu__lang {
    display: block;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
  }

  .mobile-menu__lang .nav__lang {
    display: inline-flex;
    gap: 10px;
  }

  .mobile-menu__lang .nav__lang-btn {
    padding: 6px 4px;
    font-size: 14px;
  }
}


/* ░░░ Mobil menü — kapatma düğmesi ░░░
   .mobile-menu (z-index: 1100) üst çubuğun (z-index: 100) üzerini kaplıyordu,
   bu yüzden menü açıkken hamburger görünmüyor ve kapatma yolu kalmıyordu.
   Menü açıkken üst çubuk menünün üstüne alınır; hamburger zaten `body.menu-open`
   ile çarpıya dönüşüyor (bkz. .nav__burger span kuralları).

   Yalnızca hamburger tıklanabilir kalır — logo ve diğer ikonlar menü açıkken
   tıklamayı yakalamaz, böylece menüye tıklayınca yanlışlıkla sayfa değişmez. */

@media (max-width: 900px) {
  body.menu-open .nav {
    z-index: 1200;
    background: none;
    backdrop-filter: none;
    border-bottom: 0;
    pointer-events: none;
  }

  body.menu-open .nav__burger {
    pointer-events: auto;
  }

  /* Menü açıkken üst çubukta yalnızca kapatma (çarpı) kalır — logo ve
     diğer ikonlar gizlenir. */
  body.menu-open .nav__actions > *:not(.nav__burger),
  body.menu-open .nav__logo {
    opacity: 0;
    visibility: hidden;
  }
}


/* ░░░ Yasal metin sayfaları — container genişliği ░░░
   Kapak yok: içerik header genişliğinde (yanlar --legal-pad ile nav hizasında),
   metin sütunu sağ kenara kadar yayılır. */

.legal-hero,
.legal-notice,
.legal-body,
.legal-cta {
  max-width: none;
}

@media (min-width: 1100px) {
  /* İçindekiler menüsü de genişleyen alana göre biraz büyür. */
  .legal-body {
    grid-template-columns: 300px minmax(0, 1fr);
  }
}


/* ░░░ Hesabım sayfaları ░░░
   WooCommerce'in ham formları tasarım diline giydirilir: koyu kart yüzeyi,
   ince çerçeve, lila vurgu, sayfa standardı 1480px container.
   Woo'nun kendi sınıfları (woocommerce-form, form-row …) korunur — JS ve
   doğrulama akışı bozulmasın diye yalnızca görünüm katmanı eklenir. */

.wc-page {
  --acc-max: 1480px;
  --acc-pad: 40px;
}

.acc-hero {
  max-width: var(--acc-max);
  margin: 0 auto;
  padding: 168px var(--acc-pad) 8px;
}

.acc-hero h1 {
  margin-top: 14px;
  font-size: clamp(34px, 4.6vw, 62px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.02em;
}

.acc-hero__lede {
  margin-top: 16px;
  max-width: 60ch;
  color: rgba(255, 255, 255, 0.6);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.6;
}

/* ── Giriş / kayıt ── */
.acc-grid {
  max-width: var(--acc-max);
  margin: clamp(32px, 5vw, 56px) auto 0;
  padding: 0 var(--acc-pad) 120px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
}

.acc-grid--single {
  grid-template-columns: minmax(0, 620px);
}

.acc-card {
  padding: clamp(26px, 3vw, 38px);
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(165deg, rgba(23, 21, 28, 0.9), rgba(12, 11, 14, 0.92));
}

.acc-card__title {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 22px;
}

.acc-field {
  margin-bottom: 18px;
}

.acc-field label,
.wc-page .woocommerce-form-row label {
  display: block;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 13.5px;
}

.acc-field .req,
.wc-page .required {
  color: #ff6fab;
  text-decoration: none;
}

/* Woo'nun kendi input'ları da aynı görünümü alsın. */
.acc-input,
.wc-page input[type="text"],
.wc-page input[type="email"],
.wc-page input[type="tel"],
.wc-page input[type="password"],
.wc-page input[type="number"],
.wc-page textarea,
.wc-page select {
  width: 100%;
  padding: 13px 15px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.03);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.acc-input:focus,
.wc-page input:focus,
.wc-page textarea:focus,
.wc-page select:focus {
  border-color: rgba(229, 194, 255, 0.7);
  box-shadow: 0 0 0 3px rgba(229, 194, 255, 0.09);
}

.acc-form__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 4px 0 22px;
  flex-wrap: wrap;
}

.acc-check {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13.5px;
  cursor: pointer;
}

.acc-check input {
  width: 16px;
  height: 16px;
  accent-color: #e5c2ff;
}

.acc-link {
  color: rgba(229, 194, 255, 0.9);
  font-size: 13.5px;
  text-decoration: none;
}

.acc-link:hover {
  color: #fff;
}

.acc-note {
  margin: -4px 0 20px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13.5px;
  line-height: 1.55;
}

/* ── Butonlar ── */
.acc-btn,
.wc-page .woocommerce-Button,
.wc-page button[type="submit"]:not(.acc-btn--ghost) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 26px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(100deg, #e5c2ff, var(--brand-mor));
  color: #17121f;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.25s ease, filter 0.25s ease;
}

.acc-btn:hover,
.wc-page .woocommerce-Button:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

.acc-btn--ghost {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
}

.acc-btn--ghost:hover {
  border-color: rgba(229, 194, 255, 0.6);
  filter: none;
}

/* ── Hesap paneli (giriş yapılmış) ── */
.acc-layout {
  max-width: var(--acc-max);
  margin: clamp(32px, 5vw, 56px) auto 0;
  padding: 0 var(--acc-pad) 120px;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.acc-side__label {
  margin-bottom: 14px;
  color: rgba(255, 255, 255, 0.35);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.wc-page .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wc-page .woocommerce-MyAccount-navigation li a {
  display: flex; /* ikon + etiket yan yana (bkz. myaccount/navigation.php) */
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 15px;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease;
}

/* Menü ikonları — kısık başlar, hover/aktifte marka lilasına döner */
.wc-page .woocommerce-MyAccount-navigation .acc-nav__ic {
  display: inline-flex;
  flex: none;
  color: var(--text-faint);
  transition: color 0.25s ease;
}

.wc-page .woocommerce-MyAccount-navigation li a:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
}
.wc-page .woocommerce-MyAccount-navigation li a:hover .acc-nav__ic {
  color: var(--brand-soft);
}

.wc-page .woocommerce-MyAccount-navigation li.is-active a {
  background: rgba(227, 191, 255, 0.1);
  border: 1px solid rgba(229, 194, 255, 0.35);
  color: #fff;
}
.wc-page .woocommerce-MyAccount-navigation li.is-active a .acc-nav__ic {
  color: var(--brand-soft);
}

.acc-body {
  min-width: 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: 15px;
  line-height: 1.7;
}

.acc-body a:not(.acc-btn):not(.woocommerce-Button) {
  color: rgba(229, 194, 255, 0.9);
}

/* ── Woo tabloları (siparişler, adresler) ── */
.wc-page table.shop_table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  overflow: hidden;
}

.wc-page table.shop_table th,
.wc-page table.shop_table td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  text-align: left;
  font-size: 14.5px;
}

.wc-page table.shop_table th {
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── Woo bildirimleri ── */
.wc-page .woocommerce-message,
.wc-page .woocommerce-info,
.wc-page .woocommerce-error {
  margin: 0 0 22px;
  padding: 15px 18px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.025);
  list-style: none;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14.5px;
}

.wc-page .woocommerce-error {
  border-color: rgba(255, 111, 171, 0.4);
  color: #ffc4dd;
}

@media (max-width: 900px) {
  .wc-page {
    --acc-pad: 20px;
  }

  .acc-hero {
    padding-top: 130px;
  }

  .acc-grid,
  .acc-grid--single {
    grid-template-columns: 1fr;
  }

  .acc-layout {
    grid-template-columns: 1fr;
  }
}

/* Woo, giriş/kayıt formlarına açık gri çerçeve ve iç boşluk veriyor
   (woocommerce.css → `form.login, form.register { border: 1px solid #cfc8d8 }`).
   Kart zaten kendi çerçevesini taşıdığı için form sarmalayıcısı sadeleştirilir. */
.wc-page form.login,
.wc-page form.register,
.woocommerce .wc-page form.login,
.woocommerce .wc-page form.register,
.woocommerce-page .wc-page form.login,
.woocommerce-page .wc-page form.register {
  border: 0;
  padding: 0;
  margin: 0;
  border-radius: 0;
}

/* Parola sıfırlama — "Girişe dön" bağlantısı butonun altında durur. */
.acc-form__back {
  margin-top: 18px;
  font-size: 14px;
}


/* ░░░ Hesabım iç sayfaları ░░░
   Panel içindeki Woo bileşenleri (siparişler, adresler, hesap detayları,
   indirmeler) kendi şablonlarını kullanır. Şablonları tek tek override etmek
   yerine görünüm katmanı burada verilir — Woo güncellemelerinde kırılmaz.

   Kapsam: `.wc-page` altındaki her şey. Tema dışındaki Woo sayfaları
   (sepet/ödeme kendi şablonlarını kullanır) etkilenmez. */

/* ── Bildirim ve bilgi kutuları ── */
.wc-page .woocommerce-message,
.wc-page .woocommerce-info,
.wc-page .woocommerce-error,
.wc-page .woocommerce-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin: 0 0 18px;
  padding: 18px 22px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.025);
  list-style: none;
  color: rgba(255, 255, 255, 0.78);
  font-size: 14.5px;
  line-height: 1.6;
}

/* Woo bu kutulara ikon için ::before koyuyor — tasarımda gereksiz. */
.wc-page .woocommerce-message::before,
.wc-page .woocommerce-info::before,
.wc-page .woocommerce-error::before,
.wc-page .woocommerce-notice::before {
  content: none;
}

/* Kutu içindeki bağlantı butonları (ör. "Ürünlere göz at"). */
.wc-page .woocommerce-message .button,
.wc-page .woocommerce-info .button,
.wc-page .woocommerce-error .button {
  flex: 0 0 auto;
  margin: 0;
}

/* ── Butonlar — Woo'nun tüm buton varyantları ── */
.wc-page .button,
.wc-page a.button,
.wc-page input[type="submit"],
.wc-page .woocommerce-Button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 22px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(100deg, #e5c2ff, var(--brand-mor));
  color: #17121f;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s ease, filter 0.25s ease;
}

.wc-page .button:hover,
.wc-page a.button:hover,
.wc-page input[type="submit"]:hover,
.wc-page .woocommerce-Button:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  color: #17121f;
}

/* İkincil butonlar (iptal, sil, adres düzenle) sade dursun. */
.wc-page .button.cancel,
.wc-page .button.wc-forward:not(.checkout),
.wc-page .edit,
.wc-page a.edit {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
}

.wc-page .button.cancel:hover,
.wc-page .edit:hover,
.wc-page a.edit:hover {
  border-color: rgba(229, 194, 255, 0.6);
  filter: none;
  color: #fff;
}

/* ── Boş durum kartı (siparişler/indirmeler boşken) ──
   Woo'nun tek satırlık bilgi şeridi yerine davet eden, ortalı bir kart.
   Markup: woocommerce/myaccount/orders.php → .account-empty */
.account-empty {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  padding: clamp(48px, 7vw, 84px) 32px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 0%, rgba(var(--brand-rgb), 0.07), transparent 55%),
    rgba(255, 255, 255, 0.018);
  overflow: hidden;
}
.account-empty__glyph {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: 22px;
  border-radius: 50%;
  color: var(--brand-soft);
  border: 1px solid rgba(var(--brand-rgb), 0.28);
  background: radial-gradient(circle at 50% 35%, rgba(var(--brand-rgb), 0.16), transparent 70%);
  box-shadow: 0 0 44px rgba(var(--brand-rgb), 0.14);
}
.account-empty__title {
  margin: 0 0 10px;
  color: #fff;
  font-family: var(--font-main);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.account-empty__text {
  max-width: 460px;
  margin: 0 0 28px;
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.6;
}
/* CTA, footer'daki .footer__main-cta stilini birebir kullanır; tek fark:
   degrade zemin burada hover beklemeden AÇIK gelir (davet kartı vurgusu). */
.account-empty__cta::before { opacity: 1; }
.account-empty__cta { border-color: transparent; }
.account-empty__cta span,
.account-empty__cta svg { color: #000; }

/* ── Tablolar (siparişler, indirmeler) ── */
.wc-page table.shop_table,
.wc-page table.woocommerce-orders-table,
.wc-page table.account-orders-table {
  border-radius: 16px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}

.wc-page table.shop_table thead th {
  background: rgba(255, 255, 255, 0.03);
}

.wc-page table.shop_table tr:last-child td {
  border-bottom: 0;
}

/* Sipariş durumu rozeti. */
.wc-page .woocommerce-orders-table__cell-order-status {
  color: rgba(229, 194, 255, 0.9);
  font-weight: 500;
}

/* Kulak izi bekleyen sipariş — müşterinin aksiyon alması gerektiği için
   diğer durumlardan ayrışır (bkz. inc/earfit-earmold.php). */
.wc-page .woocommerce-orders-table__row--status-earmold
  .woocommerce-orders-table__cell-order-status {
  color: #ffcf8a;
}

/* ── Adres kartları ── */
.wc-page .woocommerce-Addresses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.wc-page .woocommerce-Address {
  padding: 24px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.02);
  width: auto;
  float: none;
}

.wc-page .woocommerce-Address-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.wc-page .woocommerce-Address-title h2,
.wc-page .woocommerce-Address-title h3 {
  font-size: 17px;
  font-weight: 600;
}

.wc-page .woocommerce-Address address {
  color: rgba(255, 255, 255, 0.65);
  font-style: normal;
  font-size: 14.5px;
  line-height: 1.7;
}

/* ── Form düzeni (hesap detayları, adres formları) ── */
.wc-page .woocommerce-form-row,
.wc-page p.form-row {
  margin: 0 0 18px;
  padding: 0;
}

.wc-page fieldset {
  margin: 28px 0 0;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
}

.wc-page fieldset legend {
  padding: 0 8px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13.5px;
}

.wc-page .woocommerce-form__label-for-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 14px;
}

.wc-page em,
.wc-page .description {
  display: block;
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 13px;
  font-style: normal;
  line-height: 1.5;
}

/* İki sütunlu adres formu tek sütuna düşsün — dar panelde sıkışmasın. */
.wc-page .col2-set .col-1,
.wc-page .col2-set .col-2 {
  width: 100%;
  float: none;
}

/* Woo'nun temizleyici div'leri düzeni bozmasın. */
.wc-page .clear {
  clear: none;
}

@media (max-width: 600px) {
  .wc-page .woocommerce-message,
  .wc-page .woocommerce-info,
  .wc-page .woocommerce-error {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }

  .wc-page table.shop_table {
    display: block;
    overflow-x: auto;
  }
}

/* Pasif butonlar (ör. e-posta onayı beklenirken) — Woo `opacity: .5` veriyor.
   Gradient yerine sade bir yüzey daha okunur duruyor. */
.wc-page .button:disabled,
.wc-page .button.disabled,
.wc-page a.button.disabled,
.wc-page button:disabled,
.wc-page input[type="submit"]:disabled {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.45);
  opacity: 1;
  cursor: not-allowed;
  transform: none;
  filter: none;
}

.wc-page .button:disabled:hover,
.wc-page .button.disabled:hover,
.wc-page button:disabled:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.45);
  transform: none;
  filter: none;
}

/* Woo, hesap panelini eski float düzeniyle kuruyor
   (woocommerce-layout.css → `.woocommerce-account .woocommerce-MyAccount-navigation
   { float: left; width: 30% }` ve content için `float: right; width: 68%`).
   Bu, .acc-layout grid'ini eziyor: sütunlar kendi alanlarını doldurmuyor,
   aralarında boşluk kalıyordu. Float sıfırlanır, genişlik grid'e bırakılır.

   Seçici, Woo'nunkiyle (0,2,0) en az aynı özgüllükte yazılır. */
.woocommerce-account .wc-page .woocommerce-MyAccount-navigation,
.woocommerce-account .wc-page .woocommerce-MyAccount-content,
.wc-page .woocommerce-MyAccount-navigation,
.wc-page .woocommerce-MyAccount-content {
  float: none;
  width: auto;
  max-width: none;
}

/* Yan menü öğeleri aynı yüksekliği korusun: aktif öğedeki 1px çerçeve
   diğerlerinde şeffaf olarak da bulunur, aksi halde aktif satır 2px büyüyüp
   hizayı kaydırıyordu. */
.wc-page .woocommerce-MyAccount-navigation li a {
  border: 1px solid transparent;
}


/* ░░░ Hesabım formları — Woo input stilini ez ░░░
   Woo şu kuralı basıyor (woocommerce.css):
     `.woocommerce form .form-row .input-text` → background: #fff  (özgüllük 0,3,1)
   Bizim `.wc-page input[type="text"]` kuralı (0,2,1) bunun altında kalıyor ve
   hesap detayları / adres formlarındaki alanlar beyaz görünüyordu.
   Seçici Woo'nunkinden yüksek özgüllükte yazılır. */

.woocommerce .wc-page form .form-row .input-text,
.woocommerce .wc-page form .form-row select,
.woocommerce-page .wc-page form .form-row .input-text,
.woocommerce-page .wc-page form .form-row select,
.wc-page form .form-row .input-text,
.wc-page form .form-row select,
.wc-page .woocommerce-Input,
.wc-page input.input-text {
  padding: 13px 15px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.03);
  background-color: rgba(255, 255, 255, 0.03);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.3;
  box-shadow: none;
}

.woocommerce .wc-page form .form-row .input-text:focus,
.woocommerce-page .wc-page form .form-row .input-text:focus,
.wc-page form .form-row .input-text:focus,
.wc-page .woocommerce-Input:focus,
.wc-page input.input-text:focus {
  border-color: rgba(229, 194, 255, 0.7);
  box-shadow: 0 0 0 3px rgba(229, 194, 255, 0.09);
  outline: none;
}

/* Parola alanlarındaki "göster/gizle" düğmesi koyu zeminde okunur olsun. */
.wc-page .woocommerce-password-input,
.wc-page .password-input {
  position: relative;
  display: block;
}

.wc-page .show-password-input {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}

.wc-page .show-password-input::after {
  color: inherit;
}

/* Etiketler ve açıklama satırları. */
.wc-page form .form-row label {
  display: block;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 13.5px;
}

.wc-page form .form-row span.description,
.wc-page form .form-row em {
  display: block;
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 13px;
  font-style: normal;
}

/* İki sütunlu satırlar (Ad / Soyad) yan yana kalsın, aralarında boşluk olsun. */
@media (min-width: 700px) {
  .wc-page form .form-row-first,
  .wc-page form .form-row-last {
    width: calc(50% - 10px);
    float: none;
    display: inline-block;
    vertical-align: top;
  }

  .wc-page form .form-row-first {
    margin-right: 16px;
  }
}

/* Woo form değişkenleri tema paletine çekilir — kural kaçırsak bile
   alanlar beyaz kalmaz (Woo varsayılanı `#fff` fallback'i kullanıyordu). */
.wc-page {
  --wc-form-color-background: rgba(255, 255, 255, 0.03);
  --wc-form-color-text: #fff;
  --wc-form-border-color: rgba(255, 255, 255, 0.14);
  --wc-form-border-width: 1px;
  --wc-form-border-radius: 12px;
}


/* ░░░ Adres sayfası ░░░
   Woo adres kartlarını eski float düzeniyle diziyor:
     `.woocommerce .col2-set .col-1 { float: left; width: 48% }`  (özgüllük 0,3,0)
   Bu, .woocommerce-Addresses grid'ini eziyordu; kartlar %48 genişlikte
   float'lanıp sağa sıkışıyor, solda boşluk kalıyordu.
   Seçici Woo'nunkinden yüksek özgüllükte yazılır. */

.woocommerce .wc-page .col2-set .col-1,
.woocommerce .wc-page .col2-set .col-2,
.woocommerce-page .wc-page .col2-set .col-1,
.woocommerce-page .wc-page .col2-set .col-2,
.wc-page .woocommerce-Addresses .woocommerce-Address {
  float: none;
  width: auto;
  max-width: none;
}

/* Kart başlığı: ad solda, "düzenle" bağlantısı sağda buton görünümünde. */
.wc-page .woocommerce-Address-title {
  align-items: flex-start;
}

.wc-page .woocommerce-Address-title h2,
.wc-page .woocommerce-Address-title h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}

.wc-page .woocommerce-Address-title .edit {
  flex: 0 0 auto;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: none;
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.25s ease, color 0.25s ease;
}

.wc-page .woocommerce-Address-title .edit:hover {
  border-color: rgba(229, 194, 255, 0.6);
  color: #fff;
}

/* Adresi olmayan kartta bilgi metni. */
.wc-page .woocommerce-Address p {
  margin: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 14.5px;
  line-height: 1.7;
}

/* Sayfa başındaki açıklama satırı. */
.wc-page .woocommerce-MyAccount-content > p:first-child {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14.5px;
}

/* Woo, `.col2-set` üzerinde eski float düzeni için clearfix kullanıyor:
     `.woocommerce .col2-set::before, ::after { content: " "; display: table }`
   Bu sözde elemanlar grid bağlamında GERÇEK HÜCRE sayılır — ilk sütunu
   `::before` kapıyor, kartlar sağa kayıyor ve solda boşluk kalıyordu.
   Grid düzeninde clearfix'e gerek yok, kaldırılır. */
.wc-page .woocommerce-Addresses::before,
.wc-page .woocommerce-Addresses::after,
.woocommerce .wc-page .col2-set::before,
.woocommerce .wc-page .col2-set::after,
.woocommerce-page .wc-page .col2-set::before,
.woocommerce-page .wc-page .col2-set::after {
  content: none;
  display: none;
}


/* ░░░ Sepet sayfası — Woo bileşenleri ░░░
   Satır düzeni ve özet paneli tasarımdan geliyor; adet kutusu, kupon alanı ve
   aksiyon butonları Woo'nun kendi markup'ıyla basıldığı için ham görünüyordu. */

/* ── Adet kutusu ── */
.cart-page .cart-item__right .quantity,
.woocommerce .cart-page .quantity {
  display: inline-flex;
  align-items: center;
  margin: 10px 0 0;
}

.cart-page input.cart-item__qty,
.woocommerce .cart-page .quantity input.qty,
.woocommerce-page .cart-page .quantity input.qty {
  width: 76px;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.03);
  background-color: rgba(255, 255, 255, 0.03);
  color: #fff;
  font-family: inherit;
  font-size: 14.5px;
  text-align: center;
  box-shadow: none;
}

.cart-page input.cart-item__qty:focus,
.woocommerce .cart-page .quantity input.qty:focus {
  border-color: rgba(229, 194, 255, 0.7);
  box-shadow: 0 0 0 3px rgba(229, 194, 255, 0.09);
  outline: none;
}

/* ── "Kaldır" bağlantısı — Woo kırmızı bir link basıyor ── */
.cart-page a.cart-item__rm,
.woocommerce .cart-page a.remove,
.woocommerce-page .cart-page a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  height: auto;
  margin-top: 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: rgba(255, 255, 255, 0.45);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.25s ease;
}

.cart-page a.cart-item__rm:hover,
.woocommerce .cart-page a.remove:hover {
  background: none;
  color: #ff6fab;
}

/* Woo rengi `!important` ile basıyor (`.woocommerce a.remove { color: var(--wc-red) !important }`),
   bu yüzden renk aynı ağırlıkla ezilir. Yalnızca sepet sayfasındaki kaldır
   bağlantısını kapsar. */
.cart-page a.cart-item__rm,
.woocommerce .cart-page a.remove {
  color: rgba(255, 255, 255, 0.45) !important;
}

.cart-page a.cart-item__rm:hover,
.woocommerce .cart-page a.remove:hover {
  color: #ff6fab !important;
  background: none !important;
}

/* ── Kupon + sepeti güncelle satırı ── */
.cart-page .cart-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cart-page .cart-coupon {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 340px;
  min-width: 0;
}

.cart-page .cart-coupon input.con-input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  margin: 0;
}

.cart-page .cart-actions .about-button {
  flex: 0 0 auto;
  padding: 12px 22px;
  font-size: 14px;
  white-space: nowrap;
}

/* ── Ürün satırı ── */
.cart-page .cart-item__name a {
  color: #fff;
  text-decoration: none;
}

.cart-page .cart-item__name a:hover {
  color: rgba(229, 194, 255, 0.9);
}

.cart-page .cart-item__price .amount {
  font-size: 17px;
  font-weight: 600;
}

/* Woo'nun stok/uyarı metni satır içinde kalabalık yapmasın. */
.cart-page .cart-item__right .stock {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.45);
  font-size: 12.5px;
}

@media (max-width: 700px) {
  .cart-page .cart-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cart-page .cart-coupon {
    flex: 1 1 auto;
  }

  .cart-page .cart-actions .about-button {
    width: 100%;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   ÖDEME (CHECKOUT) SAYFASI — modernleştirme
   ──────────────────────────────────────────────────────────────────────────
   Adım 3 (Ödeme) tamamen WooCommerce'in kendi işaretlemesiyle basılıyor
   (wc_payment_methods, place-order, terms). Tasarım dili bu blokta kurulur.

   Özgüllük notu: Woo'nun form kuralları (0,3,1) seviyesinde geliyor
   (.woocommerce form .form-row .input-text). Bu yüzden alan kuralları
   body.co-page ile (0,4,1) seviyesine çıkarılmıştır — !important gerekmez.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Alanlar: Woo'nun beyaz zeminini bastır ── */
body.co-page .co-form .co-field .co-input,
body.co-page .co-form .co-field .co-select,
body.co-page .co-form .co-field textarea.co-input,
body.co-page .checkout_coupon .input-text {
  width: 100%;
  padding: 13px 15px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background-color: rgba(255, 255, 255, 0.03);
  color: #fff;
  font-size: 14.5px;
  font-family: inherit;
  line-height: 1.4;
  outline: none;
  box-shadow: none;
  transition: border-color .3s ease, box-shadow .3s ease, background-color .3s ease;
}

/* Woo, CSS değişkeniyle de zemin veriyor — değişkenin kendisini devralalım. */
body.co-page .co-form,
body.co-page .checkout_coupon {
  --wc-form-color-background: rgba(255, 255, 255, 0.03);
  --wc-form-color-text: #fff;
  --wc-form-border-color: rgba(255, 255, 255, 0.12);
}

body.co-page .co-form .co-field .co-input:focus,
body.co-page .co-form .co-field .co-select:focus,
body.co-page .checkout_coupon .input-text:focus {
  border-color: rgba(229, 194, 255, 0.6);
  background-color: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 0 3px rgba(229, 194, 255, 0.08);
}

body.co-page .co-form .co-field .co-input::placeholder {
  color: rgba(255, 255, 255, 0.28);
}

body.co-page .co-form .co-field textarea.co-input {
  min-height: 104px;
  resize: vertical;
}

/* Select2 (ülke/il seçici) — Woo'nun açık temasını koyuya çevir. */
body.co-page .co-form .select2-container .select2-selection--single {
  height: auto;
  padding: 6px 4px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
}

body.co-page .co-form .select2-container .select2-selection__rendered {
  color: #fff;
  line-height: 1.5;
}

body.co-page .co-form .select2-container .select2-selection__arrow b {
  border-color: rgba(255, 255, 255, 0.45) transparent transparent;
}

/* Woo'nun kendi hata/uyarı işaretleri alanın altında görünsün. */
body.co-page .co-form .co-field.woocommerce-invalid .co-input,
body.co-page .co-form .co-field.woocommerce-invalid .co-select {
  border-color: rgba(255, 111, 171, 0.7);
}

body.co-page .co-form .co-field .required {
  color: #ff6fab;
  text-decoration: none;
  border: 0;
}

/* Woo bazı alanlara clearfix ::before/::after koyuyor; grid'de hayalet
   hücre oluşturur. (Daha önce hesabım ve adres kartlarında aynı sorun.) */
body.co-page .co-form .co-fields::before,
body.co-page .co-form .co-fields::after,
body.co-page .co-form .co-field::before,
body.co-page .co-form .co-field::after {
  content: none;
}

/* Woo'nun float'lı form-row genişlikleri grid'i bozmasın. */
body.co-page .co-form .co-field.form-row {
  float: none;
  width: auto;
  padding: 0;
  margin: 0;
}

/* ── Onay kutuları (farklı adrese gönder, koşullar) ── */
body.co-page .co-form .co-ship-toggle {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

body.co-page .co-form .checkbox,
body.co-page .co-form .co-ship-toggle label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
  cursor: pointer;
}

body.co-page .co-form input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 19px;
  height: 19px;
  margin: 0;
  border-radius: 6px;
  border: 1.5px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease;
}

body.co-page .co-form input[type="checkbox"]:checked {
  border-color: rgba(229, 194, 255, 0.8);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2311070f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5L6.5 12L13 4'/%3E%3C/svg%3E") center / 12px no-repeat,
    #e5c2ff;
}

body.co-page .co-form input[type="checkbox"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(229, 194, 255, 0.18);
}

/* ── Koşullu alanlar: farklı adres bloğu + fatura tipi (earfit-checkout.js) ── */
body.co-page .co-form .co-field.is-hidden,
body.co-page .co-form .shipping_address.is-hidden {
  display: none !important;
}

/* fatura tipi: iki hap görünümlü radio (Bireysel / Kurumsal) */
body.co-page .co-form .co-invoice-type {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
body.co-page .co-form .co-invoice-type .woocommerce-input-wrapper {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
body.co-page .co-form .co-invoice-type label.radio {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}
/* radio dairesi görünmez — seçim doğrudan hap etiketine tıklayarak yapılır
   (Woo, input'u label'ın KARDEŞİ olarak basar: input + label.radio) */
body.co-page .co-form .co-invoice-type input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
body.co-page .co-form .co-invoice-type input[type="radio"]:checked + label.radio {
  border-color: rgba(var(--brand-rgb), 0.65);
  background: rgba(var(--brand-rgb), 0.08);
  color: #fff;
}
body.co-page .co-form .co-invoice-type input[type="radio"]:focus-visible + label.radio {
  box-shadow: 0 0 0 3px rgba(229, 194, 255, 0.18);
}
/* hap içindeki zorunlu yıldızı gereksiz — gizle */
body.co-page .co-form .co-invoice-type label.radio .required {
  display: none;
}

/* ── Adım 3 · Ödeme yöntemleri ── */
body.co-page .co-payment {
  margin-top: 24px;
}

/* Woo bu bloğa sipariş tablosu da basabiliyor; özet panelde zaten var. */
body.co-page .co-payment .shop_table,
body.co-page .co-payment .woocommerce-checkout-review-order-table {
  display: none;
}

body.co-page .wc_payment_methods {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

body.co-page .wc_payment_methods li {
  margin: 0;
  padding: 0;
  list-style: none;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.022);
  overflow: hidden;
  transition: border-color .3s ease, background .3s ease;
}

body.co-page .wc_payment_methods li::before,
body.co-page .wc_payment_methods li::after {
  content: none;
}

/* Seçili yöntem vurgusu — :has desteklenmeyen tarayıcıda nötr görünür. */
body.co-page .wc_payment_methods li:has(input:checked) {
  border-color: rgba(229, 194, 255, 0.45);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(229, 194, 255, 0.09), transparent 60%),
    rgba(255, 255, 255, 0.03);
}

body.co-page .wc_payment_methods li > label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 17px 20px 17px 52px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
}

/* Radyo düğmesi — özel görünüm.
   Woo, input'u label'ın KARDEŞİ olarak basar; kartın içine mutlak konumla
   yerleştirilir, label soldan ona yer açar. */
body.co-page .wc_payment_methods li {
  position: relative;
}
body.co-page #payment .wc_payment_methods input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  left: 20px;
  top: 18px;
  flex: none;
  width: 19px;
  height: 19px;
  margin: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.26);
  background: transparent;
  cursor: pointer;
  transition: border-color .25s ease;
}

body.co-page .wc_payment_methods input[type="radio"]:checked {
  border-color: #e5c2ff;
}

body.co-page .wc_payment_methods input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 3.5px;
  border-radius: 50%;
  background: linear-gradient(140deg, #e5c2ff, var(--brand-mor));
}

body.co-page .wc_payment_methods input[type="radio"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(229, 194, 255, 0.18);
}

/* Yöntem logoları (sağlayıcı eklentisi basarsa). */
body.co-page .wc_payment_methods label img {
  max-height: 24px;
  width: auto;
  margin-left: auto;
  opacity: 0.9;
}

/* Yöntem açıklaması / sağlayıcı formu. */
body.co-page .wc_payment_methods .payment_box {
  margin: 0;
  padding: 0 20px 18px 59px;
  background: none;
  border: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 13.5px;
  line-height: 1.6;
}

body.co-page .wc_payment_methods .payment_box::before,
body.co-page .wc_payment_methods .payment_box::after {
  content: none;
}

body.co-page .wc_payment_methods .payment_box p:last-child {
  margin-bottom: 0;
}

/* Sağlayıcı formu (İyzico/PayTR/Stripe) alanları da koyu tema alsın. */
body.co-page .wc_payment_methods .payment_box input[type="text"],
body.co-page .wc_payment_methods .payment_box input[type="tel"],
body.co-page .wc_payment_methods .payment_box input[type="number"],
body.co-page .wc_payment_methods .payment_box select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background-color: rgba(255, 255, 255, 0.03);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
}

/* ── Koşullar onayı + Siparişi tamamla ── */
body.co-page .co-payment .place-order {
  margin: 22px 0 0;
  padding: 0;
  float: none;
  width: auto;
}

body.co-page .co-payment .place-order::before,
body.co-page .co-payment .place-order::after {
  content: none;
}

body.co-page .woocommerce-terms-and-conditions-wrapper {
  margin-bottom: 18px;
}

body.co-page .woocommerce-privacy-policy-text p,
body.co-page .woocommerce-terms-and-conditions-wrapper p {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12.5px;
  line-height: 1.65;
}

body.co-page .woocommerce-terms-and-conditions-wrapper a {
  color: #e5c2ff;
  text-decoration: none;
}

body.co-page .woocommerce-terms-and-conditions {
  margin: 12px 0;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.02);
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
}

/* "Siparişi tamamla" — tasarımın birincil butonu. */
body.co-page #place_order,
body.co-page .co-payment button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  margin: 0;
  padding: 17px 26px;
  border: 0;
  border-radius: 999px;
  background: #f4eefb;
  color: #11070f;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease;
}

@media (hover: hover) {
  body.co-page #place_order:hover,
  body.co-page .co-payment button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(229, 194, 255, 0.24);
  }
}

body.co-page #place_order:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Ödeme yöntemi yoksa Woo bir uyarı basar. */
body.co-page .woocommerce-notice--info,
body.co-page .wc_payment_methods > .woocommerce-info {
  margin: 0;
}

/* ── Woo çekirdek stil ezmeleri ──
   woocommerce.css kuralları `#payment` ID'siyle geldiğinden yukarıdaki class
   tabanlı stilleri yener (açık gri payment_box, ok üçgeni, float'lar).
   Aynı ID ile daha yüksek öncelikte geri ezilir. */
body.co-page #payment {
  background: none;
  border-radius: 0;
}
body.co-page #payment ul.payment_methods {
  padding: 0;
  border: 0;
}
body.co-page #payment ul.payment_methods li {
  line-height: inherit;
  text-align: left;
}
body.co-page #payment div.payment_box {
  margin: 0;
  padding: 0 20px 18px 59px;
  width: auto;
  background: none;
  border: 0;
  border-radius: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 13.5px;
  line-height: 1.6;
}
body.co-page #payment div.payment_box::before,
body.co-page #payment div.payment_box::after {
  content: none;
  display: none;
}
body.co-page #payment div.form-row {
  padding: 0;
  margin: 0;
}
body.co-page #payment div.place-order {
  margin: 22px 0 0;
  padding: 0;
  float: none;
  width: 100%;
}
/* Geri butonu ödeme bloğunun float/taşmalarından etkilenmesin. */
body.co-page .co-panel .co-nav {
  clear: both;
  position: relative;
  z-index: 1;
}

/* Adım 3'te Geri butonu ÜSTTE, ödeme yöntemlerinin öncesinde durur. */
body.co-page .co-nav--top {
  margin: 14px 0 0;
}

/* Şartlar ve koşullar onay kutusu — Woo çekirdeğine karşı garanti görünürlük. */
body.co-page #payment .woocommerce-terms-and-conditions-wrapper label.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 13.5px;
  line-height: 1.55;
  cursor: pointer;
}
body.co-page #payment input#terms {
  appearance: none;
  -webkit-appearance: none;
  display: inline-block;
  flex: none;
  width: 19px;
  height: 19px;
  margin: 1px 0 0;
  border-radius: 6px;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease;
}
body.co-page #payment input#terms:checked {
  border-color: rgba(229, 194, 255, 0.8);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2311070f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5L6.5 12L13 4'/%3E%3C/svg%3E") center / 12px no-repeat,
    #e5c2ff;
}
body.co-page #payment input#terms:focus-visible {
  box-shadow: 0 0 0 3px rgba(229, 194, 255, 0.18);
}

/* ── Kupon şeridi ── */
/* Bildirim kuralları .wc-page altına yazılmıştı; ödeme sayfasının gövde
   sınıfı .co-page olduğu için burada ayrıca tanımlanır. */
body.co-page .woocommerce-form-coupon-toggle {
  max-width: var(--co-max);
  margin: 0 auto;
  padding: 0 var(--co-pad);
}

body.co-page .woocommerce-form-coupon-toggle .woocommerce-info,
body.co-page .woocommerce-notices-wrapper .woocommerce-info,
body.co-page .woocommerce-notices-wrapper .woocommerce-message,
body.co-page .woocommerce-notices-wrapper .woocommerce-error {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  padding: 15px 20px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.025);
  color: rgba(255, 255, 255, 0.72);
  font-size: 13.5px;
  line-height: 1.55;
  list-style: none;
}

body.co-page .woocommerce-notices-wrapper .woocommerce-error {
  border-color: rgba(255, 111, 171, 0.3);
  background: rgba(255, 111, 171, 0.07);
  color: #ffc9de;
}

body.co-page .woocommerce-info::before,
body.co-page .woocommerce-message::before,
body.co-page .woocommerce-error::before {
  content: none;
}

body.co-page .woocommerce-notices-wrapper li {
  list-style: none;
  margin: 0;
}

body.co-page .showcoupon {
  color: #e5c2ff;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(229, 194, 255, 0.35);
}

body.co-page .woocommerce-notices-wrapper:empty {
  display: none;
}

/* Kupon formu (bağlantıya tıklanınca açılır). */
body.co-page .checkout_coupon {
  max-width: var(--co-max);
  margin: 0 auto 18px;
  padding: 20px var(--co-pad);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  border: 0;
  border-radius: 0;
  background: none;
}

body.co-page .checkout_coupon .form-row {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
}

body.co-page .checkout_coupon .form-row-first {
  flex: 1 1 220px;
}

body.co-page .checkout_coupon::before,
body.co-page .checkout_coupon::after,
body.co-page .checkout_coupon .clear {
  content: none;
  display: none;
}

body.co-page .checkout_coupon button[name="apply_coupon"] {
  padding: 14px 24px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: none;
  color: rgba(255, 255, 255, 0.8);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .25s ease, color .25s ease;
}

@media (hover: hover) {
  body.co-page .checkout_coupon button[name="apply_coupon"]:hover {
    border-color: rgba(229, 194, 255, 0.55);
    color: #fff;
  }
}

/* ── Özet paneli iyileştirmeleri ── */
body.co-page .co-summary .co-sumrow:first-child {
  border-top: 0;
}

body.co-page .co-summary .co-sumrow span {
  padding-right: 12px;
  line-height: 1.45;
}

body.co-page .co-summary .co-sumrow b {
  flex: none;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Woo'nun kargo satırı bazen liste olarak gelir. */
body.co-page .co-summary ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ── Yükleniyor durumu (Woo AJAX ile toplamları yeniler) ── */
body.co-page .blockUI.blockOverlay {
  background: rgba(10, 9, 12, 0.55) !important;
  opacity: 1 !important;
}

body.co-page .blockUI.blockOverlay::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  border: 2px solid rgba(229, 194, 255, 0.25);
  border-top-color: #e5c2ff;
  background: none;
  animation: coSpin .7s linear infinite;
}

@keyframes coSpin { to { transform: rotate(360deg); } }

/* ── Mobil ── */
@media (max-width: 880px) {
  body.co-page .co-summary {
    order: -1;
  }
}

@media (max-width: 560px) {
  body.co-page .wc_payment_methods li > label {
    padding: 15px 16px;
    font-size: 14px;
  }

  body.co-page .wc_payment_methods input[type="radio"] {
    margin-left: 16px;
  }

  body.co-page .wc_payment_methods .payment_box {
    padding: 0 16px 16px 51px;
  }

  body.co-page .checkout_coupon {
    flex-direction: column;
    align-items: stretch;
  }

  body.co-page .checkout_coupon button[name="apply_coupon"] {
    width: 100%;
  }
}

/* ══ Toast bildirimleri (assets/js/earfit-toast.js) ══
   Üst-ortada belirir; birden çoğu arkaya istiflenir (3+ gizli),
   yığının üzerine gelince tümü listelenir. */
.ef-toasts {
  position: fixed;
  bottom: 42px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4000;
  width: min(92vw, 560px);
  pointer-events: none;
}
.ef-toast {
  pointer-events: auto;
  position: relative;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(21, 18, 26, 0.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
  color: rgba(255, 255, 255, 0.88);
  font-size: 14px;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(12px);
  transition: transform 0.3s var(--easing), opacity 0.28s ease;
}
.ef-toast.is-in { opacity: 1; transform: none; }
.ef-toast.is-out { opacity: 0; transform: translateY(10px); }
.ef-toast__ic { flex: none; width: 20px; height: 20px; }
.ef-toast__ic svg { width: 100%; height: 100%; display: block; }
.ef-toast__msg { flex: 1; min-width: 0; }
.ef-toast__msg a { color: var(--brand-lilac); text-decoration: none; }
.ef-toast__close {
  flex: none;
  width: 26px;
  height: 26px;
  margin-right: -4px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: none;
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}
.ef-toast__close svg { width: 12px; height: 12px; }
.ef-toast__close:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }

/* kapalı hal: en yenisi önde, gerisi üstünden hafif taşarak küçülür */
.ef-toasts:not(.is-open) .ef-toast:not(:first-child) {
  position: absolute;
  left: 0;
  right: 0;
  top: auto;
  bottom: calc(var(--i, 0) * 12px);
  transform: scale(calc(1 - var(--i, 0) * 0.05));
  transform-origin: bottom center;
  z-index: calc(50 - var(--i, 0));
  opacity: calc(1 - var(--i, 0) * 0.28);
}
.ef-toasts:not(.is-open) .ef-toast.is-deep {
  opacity: 0;
  pointer-events: none;
}

/* açık hal (hover): tümü aralıklı liste olur — en yenisi en altta */
.ef-toasts.is-open {
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
}

@media (max-width: 720px) {
  .ef-toasts { bottom: 24px; }
}

/* ══ Teşekkür sayfası iyileştirmeleri ══ */

/* sipariş durumu stepper'ı — .co-stepper görünümünü ty düzenine uyarlar */
.ty-status { margin: 30px 0 6px; }
.ty-status__stepper.co-stepper {
  margin: 0;
  padding: 0;
  max-width: none;
}
.ty-status__note {
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13.5px;
  line-height: 1.6;
}

/* Woo varsayılan blokları (.ty-wrap içinde) kart diline çekilir */
.ty-wrap .woocommerce-bacs-bank-details,
.ty-wrap .woocommerce-order-details,
.ty-wrap .woocommerce-customer-details {
  margin-top: 26px;
  padding: 26px 28px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.02);
}
.ty-wrap .woocommerce-bacs-bank-details > h2,
.ty-wrap .woocommerce-order-details > h2,
.ty-wrap .woocommerce-customer-details > h2,
.ty-wrap .woocommerce-column__title {
  margin: 0 0 16px;
  font-size: 19px;
  font-weight: 600;
  color: #fff;
}

/* — Banka bilgileri (BACS) — */
.ty-wrap .wc-bacs-bank-details-account-name {
  margin: 4px 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-soft);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ty-wrap ul.wc-bacs-bank-details {
  margin: 0 0 6px;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.ty-wrap ul.wc-bacs-bank-details li {
  float: none;
  width: auto;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-right-width: 1px !important;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.ty-wrap ul.wc-bacs-bank-details li strong {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: #fff;
  word-break: break-word;
}

/* — Sipariş detayları tablosu — */
.ty-wrap table.order_details {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
}
.ty-wrap table.order_details th,
.ty-wrap table.order_details td {
  padding: 13px 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  text-align: left;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
}
.ty-wrap table.order_details thead th {
  padding-top: 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}
.ty-wrap table.order_details td:last-child,
.ty-wrap table.order_details th:last-child {
  text-align: right;
}
.ty-wrap table.order_details a {
  color: #fff;
  font-weight: 500;
  text-decoration: none;
}
.ty-wrap table.order_details a:hover { color: var(--brand-lilac); }
.ty-wrap table.order_details .wc-item-meta {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.5);
}
.ty-wrap table.order_details .wc-item-meta li { display: flex; gap: 5px; margin-top: 2px; }
.ty-wrap table.order_details .wc-item-meta li strong { color: rgba(255, 255, 255, 0.65); font-weight: 500; }
.ty-wrap table.order_details tfoot th,
.ty-wrap table.order_details tfoot td {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.6);
}
.ty-wrap table.order_details tfoot tr:last-child th,
.ty-wrap table.order_details tfoot tr:last-child td {
  border-bottom: 0;
  padding-bottom: 0;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

/* — Fatura / gönderim adresleri — */
.ty-wrap .woocommerce-customer-details .col2-set {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
  width: auto;
}
.ty-wrap .woocommerce-customer-details .col2-set .col-1,
.ty-wrap .woocommerce-customer-details .col2-set .col-2 {
  float: none;
  width: auto;
  max-width: none;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.015);
}
.ty-wrap .woocommerce-customer-details address {
  border: 0;
  padding: 0;
  margin: 0;
  font-style: normal;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.65);
}
.ty-wrap .woocommerce-customer-details--phone,
.ty-wrap .woocommerce-customer-details--email {
  margin: 10px 0 0;
  padding: 0;
  color: rgba(255, 255, 255, 0.5);
}
.ty-wrap .woocommerce-customer-details--phone::before,
.ty-wrap .woocommerce-customer-details--email::before {
  color: var(--brand-soft);
}

@media (max-width: 640px) {
  .ty-wrap .woocommerce-bacs-bank-details,
  .ty-wrap .woocommerce-order-details,
  .ty-wrap .woocommerce-customer-details {
    padding: 20px 18px;
  }
}

/* ── Teşekkür sayfası: okunurluk düzeltmeleri ── */

/* Sipariş özeti kartındaki varyasyon listesi: madde imleri yerine
   yan yana "Etiket: Değer" çiftleri */
.ty-wrap .ty-item__c ul.wc-item-meta,
.ty-wrap .ty-item__c dl.variation {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}
.ty-wrap .ty-item__c .wc-item-meta li,
.ty-wrap .ty-item__c dl.variation > div {
  display: flex;
  gap: 6px;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
}
.ty-wrap .ty-item__c .wc-item-meta li strong,
.ty-wrap .ty-item__c dl.variation dt {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
}
.ty-wrap .ty-item__c .wc-item-meta li p,
.ty-wrap .ty-item__c dl.variation dd {
  display: inline;
  margin: 0;
}

/* Sipariş detayları tablosu: daha yüksek kontrast + düzgün hizalar */
.ty-wrap table.order_details th,
.ty-wrap table.order_details td {
  padding: 15px 0;
  vertical-align: top;
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.85);
}
.ty-wrap table.order_details thead th {
  padding-top: 0;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.42);
}
.ty-wrap table.order_details .woocommerce-table__product-name {
  font-weight: 500;
}
.ty-wrap table.order_details .product-quantity {
  color: rgba(255, 255, 255, 0.5);
  font-weight: 400;
}
.ty-wrap table.order_details .wc-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-top: 9px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}
.ty-wrap table.order_details .wc-item-meta li { margin: 0; }
.ty-wrap table.order_details .wc-item-meta li strong { color: rgba(255, 255, 255, 0.8); }
.ty-wrap table.order_details .wc-item-meta li p { display: inline; margin: 0; }
.ty-wrap table.order_details tfoot th {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
}
.ty-wrap table.order_details tfoot td {
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.85);
}

/* Adres kartlarındaki metinler daha okunur */
.ty-wrap .woocommerce-customer-details address {
  color: rgba(255, 255, 255, 0.78);
}
.ty-wrap .woocommerce-customer-details--phone,
.ty-wrap .woocommerce-customer-details--email {
  color: rgba(255, 255, 255, 0.62);
}

/* Banka bilgisi kartlarındaki etiketler bir tık daha görünür */
.ty-wrap ul.wc-bacs-bank-details li { color: rgba(255, 255, 255, 0.55); }

/* ── Teşekkür sayfası: kontrast geçişi — soluk griler okunur seviyeye ── */
.ty-lede { color: rgba(255, 255, 255, 0.92); }
.ty-status__note { color: rgba(255, 255, 255, 0.88); }
.ty-card__head span { color: rgba(255, 255, 255, 0.92); }
.ty-item__c { color: rgba(255, 255, 255, 0.88); font-size: 13.5px; }
.ty-card__total span { color: rgba(255, 255, 255, 0.88); }
.ty-note p { color: rgba(255, 255, 255, 0.9); }
.ty-road__head p,
.ty-step__body p { color: rgba(255, 255, 255, 0.88); }
.ty-count__l { color: rgba(255, 255, 255, 0.92); }

/* özet kartı varyasyon çiftleri: etiket beyaz, değer açık gri */
.ty-wrap .ty-item__c .wc-item-meta li,
.ty-wrap .ty-item__c dl.variation > div {
  color: rgba(255, 255, 255, 0.88);
  font-size: 13.5px;
}
.ty-wrap .ty-item__c .wc-item-meta li strong,
.ty-wrap .ty-item__c dl.variation dt {
  color: #fff;
}

/* sipariş detayları tablosu */
.ty-wrap table.order_details thead th { color: rgba(255, 255, 255, 0.7); }
.ty-wrap table.order_details tfoot th { color: rgba(255, 255, 255, 0.88); }
.ty-wrap table.order_details .wc-item-meta { color: rgba(255, 255, 255, 0.88); }
.ty-wrap table.order_details .wc-item-meta li strong { color: #fff; }
.ty-wrap table.order_details .product-quantity { color: rgba(255, 255, 255, 0.75); }

/* adres ve banka kartları */
.ty-wrap .woocommerce-customer-details address { color: rgba(255, 255, 255, 0.92); }
.ty-wrap .woocommerce-customer-details--phone,
.ty-wrap .woocommerce-customer-details--email { color: rgba(255, 255, 255, 0.88); }
.ty-wrap ul.wc-bacs-bank-details li { color: rgba(255, 255, 255, 0.92); }

/* ══ Teşekkür sayfası — KESİN okunurluk katmanı ══
   Hangi kaynak (eklenti CSS'i, bundle, inline stil) araya girerse girsin
   kazanması için body scope + !important ile yazıldı. */
body .ty-wrap .ty-lede {
  color: rgba(255, 255, 255, 0.94) !important;
  font-weight: 400 !important;
}
body .ty-wrap .ty-status__note {
  color: rgba(255, 255, 255, 0.9) !important;
}
body .ty-wrap .ty-card__head span {
  color: rgba(255, 255, 255, 0.9) !important;
}
body .ty-wrap .ty-item__c,
body .ty-wrap .ty-item__c * {
  color: rgba(255, 255, 255, 0.9) !important;
  opacity: 1 !important;
}
body .ty-wrap .ty-item__c .wc-item-meta li strong,
body .ty-wrap .ty-item__c dl.variation dt {
  color: #ffffff !important;
}
body .ty-wrap .ty-card__total span {
  color: rgba(255, 255, 255, 0.9) !important;
}
body .ty-wrap .ty-note p,
body .ty-wrap .ty-note p b {
  color: rgba(255, 255, 255, 0.92) !important;
}
body .ty-wrap .ty-road__head p,
body .ty-wrap .ty-step__body p {
  color: rgba(255, 255, 255, 0.9) !important;
}
body .ty-wrap table.order_details th,
body .ty-wrap table.order_details td,
body .ty-wrap table.order_details .wc-item-meta,
body .ty-wrap table.order_details .wc-item-meta li,
body .ty-wrap table.order_details .wc-item-meta li p {
  color: rgba(255, 255, 255, 0.9) !important;
}
body .ty-wrap table.order_details .wc-item-meta li strong {
  color: #ffffff !important;
}
body .ty-wrap .woocommerce-customer-details address,
body .ty-wrap .woocommerce-customer-details--phone,
body .ty-wrap .woocommerce-customer-details--email {
  color: rgba(255, 255, 255, 0.92) !important;
}
body .ty-wrap ul.wc-bacs-bank-details li {
  color: rgba(255, 255, 255, 0.85) !important;
}
body .ty-wrap ul.wc-bacs-bank-details li strong {
  color: #ffffff !important;
}

/* ── Teşekkür sayfası: üst blok ortalı kompozisyon ── */
.ty-wrap .ty-badge {
  margin-left: auto;
  margin-right: auto;
}
.ty-wrap h1,
.ty-wrap .ty-lede,
.ty-wrap .ty-status__note {
  text-align: center;
}
.ty-wrap .ty-lede {
  margin-left: auto;
  margin-right: auto;
}
.ty-wrap .ty-ref {
  display: flex;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.ty-wrap .ty-actions {
  justify-content: center;
}

/* ── Teşekkür sayfası: kulak izi yol haritası chip/butonları okunur ── */
body .ty-wrap .ty-chip,
body .ty-wrap a.ty-chip,
body .ty-wrap a.ty-chip:visited {
  color: rgba(255, 255, 255, 0.94) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  font-weight: 500;
}
body .ty-wrap .ty-chip svg {
  color: var(--brand-soft) !important;
}
@media (hover: hover) {
  body .ty-wrap a.ty-chip:hover {
    color: #fff !important;
    border-color: rgba(209, 168, 255, 0.55) !important;
    background: rgba(var(--brand-rgb), 0.08) !important;
  }
}
body .ty-wrap .ty-step__body h3,
body .ty-wrap .ty-road__head h2 {
  color: #fff !important;
}

/* ── Teşekkür sayfası: adres kartları düzeni + aksiyon butonları ── */
body .ty-wrap .woocommerce-customer-details {
  padding: 26px 28px !important;
}
body .ty-wrap .woocommerce-customer-details .col2-set {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 22px !important;
  width: 100% !important;
  margin: 0 !important;
}
body .ty-wrap .woocommerce-customer-details .col2-set .col-1,
body .ty-wrap .woocommerce-customer-details .col2-set .col-2 {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
body .ty-wrap .woocommerce-customer-details address {
  min-height: 0 !important;
}

/* alt aksiyonlar: hayalet butonun yazısı net okunur */
body .ty-wrap .ty-actions .about-button--ghost {
  color: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}
@media (hover: hover) {
  body .ty-wrap .ty-actions .about-button--ghost:hover {
    color: #fff !important;
    border-color: rgba(209, 168, 255, 0.55) !important;
  }
}

/* ── Teşekkür sayfası: tema adres ızgarası (.ty-addr) ──
   Woo'nun kendi müşteri detayları bloğu tamamen gizlenir. */
body .ty-wrap .woocommerce-customer-details {
  display: none !important;
}
.ty-addr {
  margin-top: 26px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
@media (max-width: 680px) {
  .ty-addr { grid-template-columns: 1fr; }
}
.ty-addr__col {
  padding: 24px 26px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.02);
}
.ty-addr__col h3 {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 600;
  color: #fff;
}
.ty-addr__col address {
  margin: 0;
  font-style: normal;
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.85);
}
.ty-addr__line {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 12px 0 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}
.ty-addr__line svg {
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--brand-soft);
}

/* adres kartı telefon/e-posta satırları — kesin okunurluk */
body .ty-wrap .ty-addr__line {
  color: rgba(255, 255, 255, 0.92) !important;
  opacity: 1 !important;
}
body .ty-wrap .ty-addr__line svg {
  color: var(--brand-soft) !important;
}
body .ty-wrap .ty-addr__col address {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* ── Hesabım: Woo'nun küçük harfli buton sınıfları (Görüntüle, Öde, İptal…) ──
   Eski .woocommerce-Button kuralı yeni `woocommerce-button wp-element-button`
   sınıflarını yakalamıyordu; lila zemin üstünde lila link yazısı kalıyordu. */
.wc-page a.woocommerce-button,
.wc-page .wp-element-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(100deg, #e5c2ff, var(--brand-mor)) !important;
  color: #17121f !important;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none !important;
  transition: transform 0.25s ease, filter 0.25s ease;
}
@media (hover: hover) {
  .wc-page a.woocommerce-button:hover,
  .wc-page .wp-element-button:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    color: #17121f !important;
  }
}
/* iptal gibi ikincil aksiyonlar hayalet stile döner */
.wc-page a.woocommerce-button.cancel {
  background: none !important;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff !important;
}

/* ══ Hesabım → Sipariş detayı (view-order) — kart diline çekilir ══ */
.acc-body .woocommerce-order-details {
  margin-top: 26px;
  padding: 26px 28px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.02);
}
/* adres bölümünün DIŞ çerçevesi yok — yalnız içteki iki kart görünür */
.acc-body .woocommerce-customer-details {
  margin-top: 26px;
  padding: 0;
  border: 0;
  background: none;
}
.acc-body .woocommerce-order-details__title,
.acc-body .woocommerce-customer-details > h2 {
  margin: 0 0 16px;
  font-size: 19px;
  font-weight: 600;
  color: #fff;
}

/* tablo */
.acc-body table.order_details {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
}
.acc-body table.order_details th,
.acc-body table.order_details td {
  padding: 15px 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  text-align: left;
  vertical-align: top;
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.9) !important;
}
.acc-body table.order_details thead th {
  padding-top: 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55) !important;
}
.acc-body table.order_details td:last-child,
.acc-body table.order_details th:last-child { text-align: right; }
.acc-body table.order_details a {
  color: #fff !important;
  font-weight: 500;
  text-decoration: none;
}
.acc-body table.order_details a:hover { color: var(--brand-lilac) !important; }
.acc-body table.order_details .product-quantity { color: rgba(255, 255, 255, 0.6); font-weight: 400; }
.acc-body table.order_details .wc-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 9px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85) !important;
}
.acc-body table.order_details .wc-item-meta li { margin: 0; display: flex; gap: 5px; }
.acc-body table.order_details .wc-item-meta li strong { color: #fff !important; font-weight: 500; }
.acc-body table.order_details .wc-item-meta li p { display: inline; margin: 0; }
.acc-body table.order_details tfoot th {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65) !important;
  text-transform: none;
  letter-spacing: normal;
}
.acc-body table.order_details tfoot tr:last-child th,
.acc-body table.order_details tfoot tr:last-child td {
  border-bottom: 0;
  padding-bottom: 0;
  font-size: 16px;
  font-weight: 600;
  color: #fff !important;
}

/* adresler: yan yana iki iç kart */
/* Woo clearfix sözde elemanları grid'de gerçek hücre sayılır — kaldır,
   yoksa ilk hücreyi kapıp kartları daraltıyor ve sahte boşluk yaratıyor. */
.acc-body .woocommerce-customer-details .col2-set::before,
.acc-body .woocommerce-customer-details .col2-set::after,
body .ty-wrap .woocommerce-customer-details .col2-set::before,
body .ty-wrap .woocommerce-customer-details .col2-set::after {
  content: none !important;
  display: none !important;
}
.acc-body .woocommerce-customer-details .col2-set {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 22px !important;
  width: 100% !important;
  margin: 0 !important;
}
.acc-body .woocommerce-customer-details .col2-set .col-1,
.acc-body .woocommerce-customer-details .col2-set .col-2 {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 22px 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.015);
}
.acc-body .woocommerce-customer-details .woocommerce-column__title {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 600;
  color: #fff;
}
.acc-body .woocommerce-customer-details address {
  margin: 0;
  padding: 0;
  border: 0;
  font-style: normal;
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.9) !important;
}
.acc-body .woocommerce-customer-details--phone,
.acc-body .woocommerce-customer-details--email {
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.85) !important;
}
.acc-body .woocommerce-customer-details--phone::before,
.acc-body .woocommerce-customer-details--email::before {
  color: var(--brand-soft);
}

/* sipariş durumu özet cümlesi */
.acc-body .woocommerce-order > p:first-child,
.acc-body p.order-again { margin-bottom: 6px; }
.acc-body .woocommerce-order > p:first-child mark {
  background: rgba(var(--brand-rgb), 0.14);
  color: var(--brand-lilac);
  padding: 2px 8px;
  border-radius: 6px;
}

@media (max-width: 640px) {
  .acc-body .woocommerce-order-details,
  .acc-body .woocommerce-customer-details { padding: 20px 18px; }
}

/* Hesabım sipariş detayında stepper aralıkları */
.acc-body .ty-status { margin: 20px 0 4px; }
.acc-body .ty-status__note { color: rgba(255, 255, 255, 0.88) !important; }

/* ── Adres bölümleri <section> etiketi kullanıyor: global
   `section { padding:120px 40px; max-width:1480px }` kuralı araya girip
   dev boşluk + yanlardan içeri itme yaratıyordu. Sıfırlanır. ── */
.acc-body section.woocommerce-customer-details,
.acc-body .woocommerce-customer-details section.col2-set,
body .ty-wrap section.woocommerce-customer-details,
body .ty-wrap .woocommerce-customer-details section.col2-set,
.acc-body .woocommerce-customer-details .woocommerce-columns {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
}
.acc-body section.woocommerce-customer-details { margin-top: 26px !important; }

/* ══ Hesabım → Sipariş detayı: başlık kartı ══ */
.acc-body .acc-order-head {
  margin: 2px 0 26px;
  padding: 24px 28px 26px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  background:
    radial-gradient(130% 160% at 0% 0%, rgba(var(--brand-rgb), 0.05), transparent 55%),
    rgba(255, 255, 255, 0.02);
}
.acc-body .acc-order-head__top {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.acc-body .acc-order-head__title {
  margin: 0;
  font-size: 23px;
  font-weight: 600;
  color: #fff;
}
.acc-order-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.04);
}
.acc-order-badge--pending,
.acc-order-badge--on-hold {
  border-color: rgba(255, 200, 120, 0.4);
  color: #ffd9a0;
  background: rgba(255, 200, 120, 0.08);
}
.acc-order-badge--processing {
  border-color: rgba(var(--brand-rgb), 0.45);
  color: var(--brand-lilac);
  background: rgba(var(--brand-rgb), 0.08);
}
.acc-order-badge--completed {
  border-color: rgba(139, 224, 168, 0.4);
  color: #8be0a8;
  background: rgba(139, 224, 168, 0.08);
}
.acc-order-badge--cancelled,
.acc-order-badge--refunded,
.acc-order-badge--failed {
  border-color: rgba(255, 111, 171, 0.4);
  color: #ff9dc4;
  background: rgba(255, 111, 171, 0.07);
}
.acc-body .acc-order-head__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75) !important;
}
.acc-body .acc-order-head__meta svg {
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--brand-soft);
}
.acc-body .acc-order-head .ty-status { margin: 22px 0 0; }
.acc-body .acc-order-head .ty-status__note { margin-top: 12px; }
@media (max-width: 640px) {
  .acc-body .acc-order-head { padding: 20px 18px; }
}

/* ══ Ödeme akışı — yüksek kontrast / okunurluk katmanı ══
   Siyah zemin üzerindeki yardımcı metinler önceki düşük opaklıklarla
   özellikle gerçek ekranlarda kayboluyordu. Checkout'un 3. adımı ve
   order-pay ekranında ana metinleri beyaz, ikincil metinleri de en az
   %82 beyaz seviyesinde tutuyoruz. */
body.co-page .co-panel__title,
body.co-page .co-pay__head h3,
body.co-page .co-summary h2,
body.co-page .co-sumitem__n,
body.co-page .co-sumitem__p {
  color: #ffffff !important;
}

body.co-page .co-panel__sub,
body.co-page .co-field label,
body.co-page .co-sumitem__c,
body.co-page .co-sumrow,
body.co-page .co-sumtotal span,
body.co-page .co-sumsecure,
body.co-page .co-pay__trust,
body.co-page .wc_payment_methods .payment_box,
body.co-page .woocommerce-privacy-policy-text p,
body.co-page .woocommerce-terms-and-conditions-wrapper p,
body.co-page .woocommerce-terms-and-conditions {
  color: rgba(255, 255, 255, 0.86) !important;
  opacity: 1 !important;
}

body.co-page .co-sumrow b,
body.co-page .co-sumtotal strong,
body.co-page .wc_payment_methods li > label {
  color: #ffffff !important;
  opacity: 1 !important;
}

body.pay-page .pay-hero h1,
body.pay-page .pay-panel__head h2,
body.pay-page .pay-sum__head h2,
body.pay-page .pay-item__n,
body.pay-page .pay-item__p,
body.pay-page .pay-row b {
  color: #ffffff !important;
}

body.pay-page .pay-hero__lede {
  color: rgba(255, 255, 255, 0.94) !important;
  opacity: 1 !important;
}

body.pay-page .pay-trust,
body.pay-page .pay-sum__no,
body.pay-page .pay-row span,
body.pay-page .pay-meta dt,
body.pay-page .pay-meta dd,
body.pay-page .pay-back {
  color: rgba(255, 255, 255, 0.86) !important;
  opacity: 1 !important;
}

body.pay-page .pay-row--total span,
body.pay-page .pay-row--total strong,
body.pay-page .pay-meta dd {
  color: #ffffff !important;
}

/* ══ Kart formu açıldığında odaklı, tek sütunlu ödeme ══
   Ürün/toplam özeti önceki adımlarda görünmeye devam eder. PayTR formu
   açıldığı anda aynı bilgi ikinci kez gösterilmez ve ödeme alanı bütün
   kullanılabilir genişliği alır. */
body.co-page.co-payment-open .co-layout,
body.pay-page .pay-layout {
  grid-template-columns: minmax(0, 1fr) !important;
}

body.co-page.co-payment-open .co-summary,
body.pay-page .pay-side {
  display: none !important;
}

body.co-page.co-payment-open .co-pay__box,
body.co-page.co-payment-open .co-pay__body,
body.co-page.co-payment-open .co-pay__body iframe,
body.pay-page .pay-panel,
body.pay-page .pay-panel__body,
body.pay-page .pay-panel__body iframe {
  width: 100% !important;
  max-width: none !important;
}

body.co-page.co-payment-open .co-pay__body #paytriframe,
body.pay-page .pay-panel__body #paytriframe {
  width: 100% !important;
  max-width: none !important;
}

/* Özel halka imleç iframe içinde takip edilemediği için ödeme formunun
   üzerinde donmuş/dönüyormuş gibi görünüyordu. Bu ekranda tamamen kaldır. */
body.co-page.co-payment-open,
body.pay-page {
  cursor: auto !important;
}

/* Sağlayıcı iframe'i boyut değiştirirken tarayıcının görünümü otomatik
   olarak aşağı taşıyan scroll anchoring davranışını ödeme modunda kapat. */
body.co-page.co-payment-open .co-pay,
body.co-page.co-payment-open .co-pay__body {
  overflow-anchor: none;
}

body.co-page.co-payment-open .cursor,
body.pay-page .cursor {
  display: none !important;
}

/* Woo başarılı checkout'ta normalde başka sayfaya gideceğini varsayıp
   form kilidini açık bırakır. Satır içi PayTR modunda bu perde görünmemeli. */
body.co-page.co-payment-open form.checkout > .blockUI.blockOverlay,
body.co-page.co-payment-open form.checkout > .blockUI.blockMsg {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ══ Checkout üst alanını kompaktlaştır ══
   Başlık ve adımlar görünür kalır; daha küçük ölçü ve boşluklarla form
   alanlarının ekranın üst bölümünde başlaması sağlanır. */
body.co-page .co-hero {
  display: block;
  padding-top: 96px;
  padding-bottom: 0;
}

body.co-page .co-hero h1 {
  margin-top: 0;
  font-size: clamp(28px, 2.8vw, 38px);
  line-height: 1.08;
}

body.co-page .co-stepper {
  margin-top: 16px;
}

body.co-page .co-stepper__item {
  gap: 8px;
}

body.co-page .co-stepper__n {
  width: 28px;
  height: 28px;
  font-size: 12px;
}

body.co-page .co-stepper__n svg {
  width: 13px;
  height: 13px;
}

body.co-page .co-stepper__lbl {
  font-size: 12.5px;
}

body.co-page .co-stepper__line {
  margin-right: 12px;
  margin-left: 12px;
}

body.co-page .co-stepper__item.is-active .co-stepper__n {
  box-shadow: 0 0 0 3px rgba(229, 194, 255, 0.07);
}

body.co-page .co-layout {
  padding-top: 20px;
}

body.co-page.co-payment-open .co-panel[data-panel="3"] > .co-panel__title,
body.co-page.co-payment-open .co-panel[data-panel="3"] > .co-panel__sub,
body.co-page.co-payment-open .co-panel[data-panel="3"] > .co-nav--top {
  display: none !important;
}

body.co-page.co-payment-open .co-layout {
  padding-top: 20px !important;
}

body.co-page.co-payment-open .co-pay {
  margin-top: 0 !important;
}

@media (max-width: 900px) {
  body.co-page .co-hero {
    display: block;
    padding-top: 86px;
  }

  body.co-page .co-hero h1 {
    margin-top: 6px;
    font-size: clamp(28px, 8vw, 34px);
  }

  body.co-page.co-payment-open .co-layout {
    padding-top: 16px !important;
  }
}

/* ══ Checkout sabit alt barı ══ */
body.co-page .co-dock {
  display: none;
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10020;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(8, 7, 10, 0.9);
  box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

body.co-page.co-dock-ready .co-dock {
  display: block !important;
}

body.co-page .co-dock__inner {
  width: 100%;
  max-width: var(--co-dock-width, var(--co-max));
  min-height: 76px;
  margin: 0 auto;
  padding: 12px var(--co-pad);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
}

body.co-page .co-dock .co-stepper {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 0;
}

body.co-page .co-dock__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

body.co-page .co-dock__back,
body.co-page .co-dock__next {
  min-height: 48px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 22px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

body.co-page .co-dock__back {
  background: rgba(255, 255, 255, 0.025);
  color: rgba(255, 255, 255, 0.9);
}

body.co-page .co-dock__next {
  min-width: 190px;
  border-color: transparent;
  background: #f4eefb;
  color: #11070f;
}

body.co-page .co-dock__back svg,
body.co-page .co-dock__next svg {
  width: 16px;
  height: 16px;
  flex: none;
}

body.co-page .co-dock__back[hidden] {
  display: none !important;
}

body.co-page .co-dock__next:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

body.co-page .co-dock__payment-status {
  display: none;
  align-items: center;
  gap: 9px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  white-space: nowrap;
}

body.co-page .co-dock__secure-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8be0a8;
  box-shadow: 0 0 0 5px rgba(139, 224, 168, 0.09);
}

body.co-page.co-payment-open .co-dock__actions {
  display: none;
}

body.co-page.co-payment-open .co-dock__payment-status {
  display: inline-flex;
}

/* PayTR kart formu kendi ödeme aksiyonunu içerir; bu aşamada sabit checkout
   barı gereksiz yer kaplamasın ve formun alt bölümünü örtmesin. */
body.co-page.co-dock-ready.co-payment-open .co-dock {
  display: none !important;
}

body.co-page.co-dock-ready.co-payment-open .co-layout {
  padding-bottom: 100px;
}

/* Checkout hataları sabit aksiyon barının üzerinde, rahat okunacak bir
   boşlukla belirsin. Satır içi kart formunda dock gizlendiği için toast
   yeniden ekranın standart alt boşluğuna döner. */
body.co-page.co-dock-ready:not(.co-payment-open) .ef-toasts {
  bottom: calc(112px + env(safe-area-inset-bottom));
}

body.co-page.co-payment-open .ef-toasts {
  bottom: calc(42px + env(safe-area-inset-bottom));
}

/* Panel içindeki düğmeler yalnızca dock'un olay kaynağıdır. İlk boyamada
   görünürlerse dock açıldığında aşağı kayıyormuş gibi bir sıçrama oluşur. */
body.co-page .co-panel .co-nav {
  display: none !important;
}

body.co-page.co-dock-ready #place_order {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.co-page.co-dock-ready .co-layout {
  padding-bottom: 156px;
}

@media (hover: hover) {
  body.co-page .co-dock__back:hover {
    border-color: rgba(229, 194, 255, 0.48);
    color: #ffffff;
  }

  body.co-page .co-dock__next:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(229, 194, 255, 0.2);
  }
}

@media (max-width: 700px) {
  body.co-page.co-dock-ready:not(.co-payment-open) .ef-toasts {
    bottom: calc(96px + env(safe-area-inset-bottom));
  }

  body.co-page.co-payment-open .ef-toasts {
    bottom: calc(24px + env(safe-area-inset-bottom));
  }

  body.co-page .co-dock__inner {
    min-height: 70px;
    gap: 14px;
    padding-top: 10px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }

  body.co-page .co-dock .co-stepper__line {
    margin-right: 7px;
    margin-left: 7px;
  }

  body.co-page .co-dock__back,
  body.co-page .co-dock__next {
    min-height: 44px;
    padding-right: 15px;
    padding-left: 15px;
  }

  body.co-page .co-dock__next {
    min-width: 138px;
  }
}

@media (max-width: 480px) {
  body.co-page .co-dock__inner {
    gap: 10px;
  }

  body.co-page .co-dock .co-stepper__n {
    width: 25px;
    height: 25px;
  }

  body.co-page .co-dock__back span,
  body.co-page.co-payment-open .co-dock__payment-status {
    display: none;
  }

  body.co-page .co-dock__back {
    width: 44px;
    padding: 0;
  }

  body.co-page .co-dock__next {
    min-width: 124px;
  }
}

/* ══ Checkout yüzey ve boşluk dengesi ══ */
body.co-page .co-hero {
  padding-top: 118px;
}

body.co-page .co-layout {
  padding-top: 28px;
}

/* Form ve özet aynı görsel ailede, çok hafif marka moru taşıyan yüzeyler. */
body.co-page .co-panel.is-active {
  padding: 26px;
  border: 1px solid rgba(213, 174, 255, 0.16);
  border-radius: 20px;
  background:
    radial-gradient(115% 150% at 0% 0%, rgba(var(--brand-rgb), 0.09), transparent 55%),
    linear-gradient(155deg, rgba(22, 17, 28, 0.86), rgba(10, 9, 13, 0.94));
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}

body.co-page .co-summary {
  border-color: rgba(213, 174, 255, 0.18);
  background:
    radial-gradient(125% 145% at 10% 0%, rgba(var(--brand-rgb), 0.12), transparent 58%),
    linear-gradient(155deg, rgba(24, 18, 30, 0.94), rgba(11, 10, 14, 0.97));
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3);
}

body.co-page .co-form input[type="text"],
body.co-page .co-form input[type="email"],
body.co-page .co-form input[type="tel"],
body.co-page .co-form input[type="number"],
body.co-page .co-form textarea,
body.co-page .co-form select,
body.co-page .co-input,
body.co-page .co-select {
  border-color: rgba(213, 174, 255, 0.2) !important;
  background-color: rgba(var(--brand-rgb), 0.045) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

body.co-page .co-form input[type="text"]:focus,
body.co-page .co-form input[type="email"]:focus,
body.co-page .co-form input[type="tel"]:focus,
body.co-page .co-form input[type="number"]:focus,
body.co-page .co-form textarea:focus,
body.co-page .co-form select:focus,
body.co-page .co-input:focus,
body.co-page .co-select:focus {
  border-color: rgba(213, 174, 255, 0.58) !important;
  background-color: rgba(var(--brand-rgb), 0.075) !important;
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.08) !important;
}

/* PayTR zaten kendi kart yüzeyine sahip; dıştaki aktif panel burada nötr
   kalsın ki kart içinde kart görünümü oluşmasın. */
body.co-page.co-payment-open .co-panel[data-panel="3"].is-active {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

body.co-page.co-payment-open .co-layout {
  padding-top: 28px !important;
}

@media (max-width: 900px) {
  body.co-page .co-hero {
    padding-top: 104px;
  }

  body.co-page .co-panel.is-active {
    padding: 21px 18px;
    border-radius: 17px;
  }
}

/* Sipariş özetindeki bütün tutarlar kartın sağ iç kenarında bitsin. */
body.co-page .co-summary .co-sumrow,
body.co-page .co-summary .co-sumtotal {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) max-content;
  width: 100% !important;
  align-items: center;
  column-gap: 16px;
}

body.co-page .co-summary .co-sumrow > b,
body.co-page .co-summary .co-sumtotal > strong {
  justify-self: end !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
  text-align: right !important;
}

body.co-page .co-summary .co-sumrow > b *,
body.co-page .co-summary .co-sumtotal > strong * {
  margin-right: 0 !important;
  padding-right: 0 !important;
  text-align: right !important;
}

/* Kart formunun altındaki güvenlik notu formun merkezinde dursun. */
body.co-page .co-pay__trust {
  width: 100%;
  justify-content: center;
  align-items: center;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

body.co-page .co-pay__trust svg {
  margin-top: 0;
}

/* Missing page — quiet acoustic glow, consistent with the storefront. */
body.error404 .ef-not-found {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 85svh;
  padding: 150px 24px 100px;
  overflow: hidden;
  color: #f4f0f8;
  background: radial-gradient(ellipse at 50% 38%, rgba(112, 61, 167, 0.13), transparent 60%), #050506;
}
.ef-not-found__inner { width: 100%; max-width: 780px; text-align: center; }
.ef-not-found__code {
  margin: 0 0 32px;
  font-size: clamp(120px, 19vw, 240px);
  font-weight: 600;
  line-height: 0.85;
  letter-spacing: -0.065em;
  color: #816494;
  background: linear-gradient(155deg, #d4acef -20%, #74518c 40%, #21182d 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  user-select: none;
}
.ef-not-found__eyebrow { color: #bd98d6; font-size: 11px; letter-spacing: 0.24em; font-weight: 600; }
.ef-not-found__inner h1 { margin: 20px 0; color: #f4f0f8; font-size: clamp(30px, 4vw, 52px); font-weight: 400; line-height: 1.15; letter-spacing: -0.035em; }
.ef-not-found__actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 34px; }
.ef-not-found__help { margin: 30px 0 0; color: #97919e; font-size: 13px; line-height: 1.8; }
.ef-not-found__help a { color: #cba5ed; text-underline-offset: 4px; }
.ef-not-found a:focus-visible { outline: 2px solid #dab6f7; outline-offset: 5px; }
@media (max-width: 600px) {
  body.error404 .ef-not-found { min-height: 80svh; padding: 120px 24px 72px; }
  .ef-not-found__code { margin-bottom: 28px; }
  .ef-not-found__actions { flex-direction: column; align-items: center; max-width: 320px; margin-inline: auto; }
  .ef-not-found__help a { display: block; }
}
@media (prefers-reduced-motion: reduce) {
}

/* CookieNode stays below the intro loader (9999). */
body { --vcc-z: 9000; }
body .vcc-theme--dark {
  --vcc-bg: #141018;
  --vcc-text: #f7f2fa;
  --vcc-text-muted: #d6cedd;
  --vcc-border: #50445c;
}
body .vcc-banner__description,
body .vcc-category__description,
body .vcc-preferences__description {
  color: #d6cedd;
  font-size: 14px;
  line-height: 1.75;
}
body .vcc-banner__title { font-size: 20px; line-height: 1.4; }
body .vcc-banner__links a { color: #dfbcff; font-size: 13px; }
body .vcc-btn { font-size: 14px; font-weight: 600; min-height: 46px; }

/* Side cart — product cards and a useful empty state. */
.cartd__panel {
  width: min(470px, 100vw);
  background: radial-gradient(ellipse at 100% 0%, rgba(134, 80, 177, 0.10), transparent 48%), #0e0c11;
  border-left-color: #322939;
  box-shadow: -20px 0 80px rgba(0, 0, 0, 0.35);
}
.cartd__head { padding: 24px; }
.cartd__head h3 { font-size: 20px; letter-spacing: -0.025em; }
.cartd__close { display: grid; place-items: center; width: 40px; height: 40px; padding: 10px; border: 1px solid #3c3343; border-radius: 50%; color: #dcd2e4; }
.cartd__list { padding: 20px; }
.cartd__list:has(.cartd__empty) { display: flex; align-items: center; justify-content: center; }
.cartd__empty { width: 100%; max-width: 340px; padding: 32px 8px 60px; }
.cartd__empty-icon { display: grid; place-items: center; width: 96px; height: 96px; margin: 0 auto 28px; border-radius: 28px; border: 1px solid #41304f; background: linear-gradient(145deg, #241a2f, #141019); color: #cba5ed; }
.cartd__empty-icon svg { width: 44px; height: 44px; }
.cartd__empty-label { color: #af92c6; letter-spacing: 0.24em; font-size: 10px; font-weight: 600; }
.cartd__empty h3 { margin: 14px 0 12px; color: #f5eff9; font-size: 26px; font-weight: 400; letter-spacing: -0.035em; line-height: 1.25; }
.cartd__empty p { margin: 0; color: #b6acbe; font-size: 14px; line-height: 1.8; }
.cartd__empty .cartd__explore { margin-top: 28px; }
.cartd__go { background: #cba5ed; color: #1b1026; min-height: 48px; }
.cartd__item { padding: 16px; margin-bottom: 12px; border: 1px solid #302736; border-radius: 16px; background: rgba(255,255,255,0.025); }
.cartd__thumb { width: 76px; height: 88px; flex: 0 0 76px; }
.cartd__name { color: #f3edf7; font-size: 15px; line-height: 1.5; }
.cartd__conf { color: #b5abbe; line-height: 1.65; overflow-wrap: anywhere; }
.cartd__meta { gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.cartd__price { color: #e2c4f7; font-size: 16px; }
.cartd__rm { color: #b9adbf; padding: 6px 0; text-underline-offset: 3px; }
.cartd__foot { padding: 24px 24px max(24px, env(safe-area-inset-bottom)); background: #151019; border-top-color: #352a3e; }
.cartd__total span, .cartd__view { color: #bfb4c8; }
.cartd__total strong { color: #f2e6fb; }
.cartd a:focus-visible, .cartd button:focus-visible { outline: 2px solid #d7b2f5; outline-offset: 4px; }
@media (max-width: 380px) {
  .cartd__head { padding: 18px; }
  .cartd__list { padding: 14px; }
  .cartd__item { padding: 12px; gap: 10px; }
  .cartd__thumb { width: 60px; flex-basis: 60px; height: 72px; }
}

/* Extend the native product link across its entire card. */
.product-card__cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 22px;
}
.product-card:has(.product-card__cta:focus-visible) {
  outline: 2px solid #cba5ed;
  outline-offset: 4px;
}