/* ================================================================
   Eascess — Warm Cream Design System v3.0
   "The Quiet Audit" — precision, consistency, calm.
   ================================================================ */

/* ── Design Tokens ─────────────────────────────────────────────── */
:root {
  /* Brand */
  --teal-500: oklch(72% 0.11 190);
  --teal-600: oklch(62% 0.12 200);
  --indigo-700: oklch(42% 0.15 270);
  --indigo-800: oklch(32% 0.14 270);

  /* Surfaces (warm cream) */
  --cream-50:  oklch(98% 0.006 85);
  --cream-100: oklch(96% 0.008 85);
  --cream-200: oklch(93% 0.01 85);
  --cream-300: oklch(88% 0.012 80);

  /* Ink */
  --ink-900: oklch(18% 0.012 260);
  --ink-800: oklch(24% 0.012 260);
  --ink-700: oklch(36% 0.014 260);
  --ink-600: oklch(48% 0.014 260);
  --ink-500: oklch(60% 0.012 260);
  --ink-400: oklch(74% 0.01 260);

  /* Semantic */
  --success: oklch(62% 0.14 155);
  --warning: oklch(72% 0.15 75);
  --danger:  oklch(60% 0.18 27);
  /* Darker variants that pass AAA on white / cream */
  --success-deep: oklch(40% 0.13 155);
  --warning-deep: oklch(42% 0.12 75);
  --danger-deep:  oklch(42% 0.16 27);

  /* Yaldız — yalnızca Kurumsal kademesinde kullanılır (siyah zemin üstünde).
     Krem/beyaz zeminde kontrast yetmez; başka yerde kullanmayın. */
  --gold-300: oklch(92% 0.07 94);
  --gold-400: oklch(84% 0.11 91);
  --gold-500: oklch(76% 0.13 88);
  --gold-600: oklch(63% 0.11 86);

  /* Radii */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  /* Shadows */
  --sh-sm: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.04);
  --sh-md: 0 4px 12px rgba(16,24,40,.06), 0 2px 4px rgba(16,24,40,.04);
  --sh-lg: 0 16px 40px rgba(16,24,40,.1), 0 4px 12px rgba(16,24,40,.05);
  --sh-xl: 0 24px 60px rgba(16,24,40,.14), 0 8px 20px rgba(16,24,40,.06);

  /* Gradients */
  --brand-grad: linear-gradient(135deg, var(--teal-500) 0%, var(--indigo-700) 100%);
  --brand-grad-soft: linear-gradient(135deg, oklch(72% 0.11 190 / 0.12), oklch(42% 0.15 270 / 0.12));

  /* Tipografi ölçeği — 1.25x majör üçlü, 16px tabanlı, panel
     yoğunluğunu koruyacak biçimde yuvarlanmış (2026-08-11 kararı).
     Panelde ölçek DIŞI punto kullanılmaz; ara değer gerekiyorsa
     ölçek genişletilir, tek seferlik sayı yazılmaz. */
  --fs-xs:   12px;  /* rozet, üst etiket, yardımcı metin */
  --fs-sm:   14px;  /* panel gövde metni, tablo hücresi, buton */
  --fs-base: 16px;  /* form girdisi (iOS zoom eşiği), öne çıkan metin */
  --fs-lg:   20px;  /* kart başlığı */
  --fs-xl:   25px;  /* bölüm başlığı */
  --fs-2xl:  31px;  /* sayfa içi büyük değer */
  --fs-3xl:  39px;  /* sayfa başlığı (h1) */
  --fs-4xl:  49px;  /* istatistik kartındaki ana sayı */

  /* Fonts */
  --font-display: "Instrument Serif", "Times New Roman", Georgia, serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Motion — smooth deceleration, no bouncy easings */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --dur-fast:   0.2s;
  --dur-normal: 0.4s;
  --dur-slow:   0.7s;
  --dur-reveal: 0.9s;

  /* Boşluk ölçeği — 4px tabanlı. Ölçek DIŞI değer (margin: 17px gibi)
     yazılmaz; ara değer gerekiyorsa ölçek genişletilir.
     Ayrıntı: .claude/skills/eascess-ui/SKILL.md §3 */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ── Kırılma noktası merdiveni — DOKUZ BASAMAK, TEK KAYNAK ───────
     Üç basamaklı merdiven (640/900/1024) geçişleri fazla sert
     yapıyordu: 900px'te fiyat kartları 3 sütundan tek sütuna, özellik
     ızgarası 2'den 1'e, ödeme düzeni 2'den 1'e AYNI ANDA iniyordu.
     Araya altı basamak eklendi; oran aynı kaldığı için eski üç
     basamak (4, 6, 7) anlamını ve değerini korur.

     CSS custom property'ler @media koşulunda kullanılamaz (spec).
     Bu yüzden merdiven burada TEK KAYNAK olarak durur ve @media
     içinde birebir aynı sayılar yazılır. Merdiven DIŞINDA bir sayıyla
     @media yazılmaz — 480px gibi serbest değerler buraya taşındı.

       #  token        px     ne olur
       1  --bp-1      360    en dar telefon: istatistik tek sütun
       2  --bp-2      430    büyük telefon: kahraman butonları yan yana
       3  --bp-3      520    footer bağlantıları iki sütun
       4  --bp-4=sm   640    form/kart tek sütun, istatistik 2×2
       5  --bp-5      768    tablet dikey: ızgaralar 3→2 / 2→1 ara adım
       6  --bp-6=md   900    çekmece menü (pazarlama + panel), ödeme tek sütun
       7  --bp-7=lg  1024    kahraman tek sütun, dokunma hedefi 44px
       8  --bp-8     1120    küçük dizüstü: fiyat kartları 2×2 kalır
       9  --bp-9     1200    geniş dizüstü: kahraman boşluğu daralır

     Üst sınır bilerek 1200'dür: 1280px ve üstü "tam masaüstü"dür ve
     hiçbir merdiven kuralı oraya ulaşmaz (her yeni blok max-width ile
     kapatılmıştır). Ayrıntı: .claude/skills/eascess-ui/SKILL.md §4 */
  --bp-1:  360px;
  --bp-2:  430px;
  --bp-3:  520px;
  --bp-4:  640px;
  --bp-5:  768px;
  --bp-6:  900px;
  --bp-7: 1024px;
  --bp-8: 1120px;
  --bp-9: 1200px;

  /* Eski adlar — mevcut kurallar bunlara atıfta bulunuyor, kırılmasın. */
  --bp-sm: var(--bp-4);
  --bp-md: var(--bp-6);
  --bp-lg: var(--bp-7);

  /* Marketing rhythm */
  --mkt-pad-x: clamp(20px, 5vw, 56px);
  --mkt-pad-y: clamp(56px, 10vh, 104px);

  /* Sticky navbar yüksekliği — çapa hedeflerinin scroll-padding-top offset'i
     bu değişkenden okur. İlk boya için 72px; site.js gerçek yüksekliği
     ölçüp değişkeni günceller, hizalama her viewport'ta milimetriktir. */
  --nav-h: 72px;
}

/* ── Reset ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  /* Ambient warm depth — soft brand-tinted light pooled at the page edges,
     layered over warm cream. Fixed to the viewport so it stays put on scroll.
     Restrained (low chroma + alpha): adds dimension without glass or breaking
     the Parchment Test. */
  background:
    radial-gradient(ellipse 72% 56% at 4% -6%,    oklch(94% 0.05 190 / 0.72),  transparent 62%),
    radial-gradient(ellipse 64% 58% at 106% 104%, oklch(93% 0.05 270 / 0.6),   transparent 64%),
    radial-gradient(ellipse 110% 48% at 50% 126%, oklch(95% 0.035 85 / 0.7),    transparent 72%),
    var(--cream-50);
  background-attachment: fixed;
  color: var(--ink-900);
  margin: 0;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Subtle grain texture over the entire page */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

a { color: inherit; text-decoration: none; }

/* Taban kural: hiçbir gömülü içerik kendi kabından geniş olamaz.
   320px'te yatay sayfa kaydırmasının en yaygın üç sebebi budur. */
img, svg, video, canvas, iframe { max-width: 100%; }
img, video { height: auto; }

/* Uzun sözcük/URL sayfayı taşırmasın (Türkçe uzun bileşik kelimeler dahil). */
p, li, dd, dt, h1, h2, h3, h4, td, th, figcaption, label, blockquote {
  overflow-wrap: break-word;
}

/* Kod ve önbiçimli metin KENDİ kabında kaydırılır, sayfayı kaydırmaz. */
pre {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
pre:focus-visible { outline: 2px solid var(--indigo-700); outline-offset: 2px; }

/* Onay/radyo etiketleri dokunulabilir olmalı: 44px'lik hedef, etiketin
   tamamı tıklanabilir. Ayrıntı: SKILL.md §5 */
.check-label {
  min-height: 44px;
  align-items: center;
}
.check-label input[type="checkbox"],
.check-label input[type="radio"] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: var(--indigo-700);
}

/* ── App layout ─────────────────────────────────────────────────── */
.ea-app {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
  /* Ambient depth for the working surface — gentler than marketing so it
     never competes with data. Anchored to the content-area corners. */
  background:
    radial-gradient(ellipse 56% 46% at 100% -3%, oklch(94% 0.045 190 / 0.6),  transparent 62%),
    radial-gradient(ellipse 52% 52% at 1% 103%,  oklch(94% 0.04 270 / 0.46),  transparent 64%),
    var(--cream-50);
  background-attachment: fixed;
}

/* ── Sidebar ────────────────────────────────────────────────────── */
.ea-sidebar {
  background: var(--cream-100);
  border-right: 1px solid var(--cream-300);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.ea-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 20px;
  border-bottom: 1px solid var(--cream-300);
  margin-bottom: 20px;
}

.ea-brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--brand-grad);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px oklch(42% 0.15 270 / 0.3);
}

.ea-brand-mark svg { width: 22px; height: 22px; fill: white; }

.ea-brand-name {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink-900);
}

.ea-brand-meta {
  font-size: var(--fs-xs);
  color: var(--ink-500);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 2px;
}

.ea-brand-logo {
  height: 36px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

.ea-nav-section {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-500);
  padding: 12px 12px 4px;
}

.ea-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-700);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  position: relative;
  text-decoration: none;
}

.ea-nav-item:hover { background: var(--cream-200); color: var(--ink-900); }

.ea-nav-item.active {
  background: var(--ink-900);
  color: var(--cream-50);
}


.ea-nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }

.ea-nav-badge {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  background: var(--cream-200);
  color: var(--ink-700);
  padding: 2px 7px;
  border-radius: 999px;
}

.ea-nav-item.active .ea-nav-badge { background: var(--teal-500); color: white; }

.ea-sidebar-footer {
  margin-top: auto;
  padding: 12px;
  background: var(--cream-50);
  border: 1px solid var(--cream-300);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  gap: 10px;
}

.ea-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand-grad);
  display: grid;
  place-items: center;
  color: white;
  font-weight: 600;
  font-size: var(--fs-sm);
  flex-shrink: 0;
}

.ea-user-name {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-900);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ea-user-meta {
  font-size: var(--fs-xs);
  color: var(--ink-500);
  line-height: 1.2;
  margin-top: 2px;
}

/* ── Main content ───────────────────────────────────────────────── */
.ea-main {
  overflow-y: auto;
  padding: 28px 40px 40px;
  background: transparent; /* lets the .ea-app ambient depth show through */
}

/* ── Topbar ─────────────────────────────────────────────────────── */
.ea-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}

.ea-topbar-title {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink-900);
  margin: 0;
}

.ea-topbar-eyebrow {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-500);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.ea-topbar-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* ── Skip link ──────────────────────────────────────────────────── */
.ea-skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  background: var(--ink-900);
  color: white;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  transition: top 0.15s ease-out;
}
.ea-skip-link:focus {
  top: 0;
  outline: 2px solid var(--teal-500);
  outline-offset: 2px;
}

/* ── Marketing navbar — sticky glass surface ────────────────────── */
.ea-navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--nav-h); /* çapa offset'i (--nav-h) ile aynı kaynaktan beslenir */
  padding: 8px var(--mkt-pad-x);
  background: oklch(98% 0.006 85 / 0.84);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}

.ea-navbar.is-scrolled {
  border-bottom-color: var(--cream-300);
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
}

.ea-navbar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.ea-navbar__logo {
  display: flex;
  align-items: center;
}

.ea-navbar__logo img { height: 44px; width: auto; display: block; }
.ea-navbar__logo svg { width: 20px; height: 20px; fill: white; }

.ea-navbar__brand-name {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--ink-900);
}

.ea-navbar__links {
  display: flex;
  gap: 26px;
  font-size: 14px;
  color: var(--ink-700);
  font-weight: 500;
}

.ea-navbar__links a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast);
  position: relative;
  padding: 6px 0;
}
.ea-navbar__links a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--ink-900);
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-normal) var(--ease-out-expo);
}
.ea-navbar__links a:hover { color: var(--ink-900); }
.ea-navbar__links a:hover::after,
.ea-navbar__links a[aria-current="page"]::after { transform: scaleX(1); }
.ea-navbar__links a[aria-current="page"] { color: var(--ink-900); }

.ea-navbar__actions { display: flex; gap: 8px; align-items: center; }

/* Old nav-link compat (for views not yet updated) */
.ea-nav-link {
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-700);
  text-decoration: none;
  border-radius: var(--r-sm);
  transition: background 0.15s, color 0.15s;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-sans);
}

.ea-nav-link:hover { background: var(--cream-200); color: var(--ink-900); }

.ea-nav-link--cta {
  background: var(--brand-grad);
  color: white !important;
  padding: 8px 18px;
  border-radius: var(--r-sm);
  box-shadow: 0 4px 12px oklch(42% 0.15 270 / 0.25);
}

.ea-nav-link--cta:hover { opacity: 0.9; transform: translateY(-1px); }

/* ── Buttons ────────────────────────────────────────────────────── */
.ea-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-sans);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
  min-height: 44px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

/* Brand (teal→indigo gradient) — the One Voice CTA */
.ea-btn-brand, .ea-btn--primary {
  background: var(--brand-grad);
  color: white;
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 4px 12px oklch(42% 0.15 270 / 0.25);
}
.ea-btn-brand:hover, .ea-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 8px 24px oklch(42% 0.15 270 / 0.35), 0 2px 6px oklch(42% 0.15 270 / 0.2);
}
.ea-btn-brand:active, .ea-btn--primary:active { transform: translateY(0); }

/* Primary (ink dark) */
.ea-btn-primary {
  background: var(--ink-900);
  color: var(--cream-50);
  border-color: var(--ink-900);
}
.ea-btn-primary:hover { background: var(--ink-800); transform: translateY(-1px); box-shadow: var(--sh-md); }

/* Ghost */
.ea-btn-ghost, .ea-btn--ghost {
  background: transparent;
  color: var(--ink-700);
  border-color: var(--cream-300);
}
.ea-btn-ghost:hover, .ea-btn--ghost:hover {
  background: var(--cream-100);
  color: var(--ink-900);
}

/* Danger */
.ea-btn--danger {
  background: oklch(95% 0.04 27 / 0.5);
  border-color: oklch(60% 0.18 27 / 0.3);
  color: oklch(42% 0.16 27);
}
.ea-btn--danger:hover { background: oklch(92% 0.06 27 / 0.5); }

.ea-btn:focus-visible { outline: 3px solid var(--teal-500); outline-offset: 2px; }
.ea-btn svg { width: 16px; height: 16px; }

/* Size modifiers */
.ea-btn--sm { padding: 7px 12px; font-size: 12px; min-height: 32px; }
.ea-btn--lg { padding: 14px 22px; font-size: var(--fs-base); min-height: 52px; }

.ea-btn--white { background: white; color: var(--ink-900); }
.ea-btn--white:hover { transform: translateY(-1px); box-shadow: var(--sh-md); }

/* ── Cards ──────────────────────────────────────────────────────── */
/* Flat by default: sh-sm is the structural lift; hover elevation is
   earned only by explicitly interactive cards (.ea-card--hover). */
.ea-card {
  background: white;
  border: 1px solid var(--cream-300);
  border-radius: var(--r-md);
  padding: 20px;
  box-shadow: var(--sh-sm);
  transition: transform var(--dur-normal) var(--ease-out-expo),
              box-shadow var(--dur-normal) var(--ease-out-expo);
}
.ea-card--hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
}

.ea-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}

.ea-card-title, .ea-section-title {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--ink-900);
  letter-spacing: -0.01em;
}

.ea-card-sub, .ea-section-sub {
  font-size: var(--fs-sm);
  /* axe: beyaz kart zemininde ink-500 = 3,96:1 (AA alti). */
  color: var(--ink-600);
  margin-top: 2px;
}

/* ── Stats ──────────────────────────────────────────────────────── */
.ea-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}

.ea-stat {
  background: white;
  border: 1px solid var(--cream-300);
  border-radius: var(--r-md);
  padding: 20px 24px;
  position: relative;
  overflow: hidden;
}

.ea-stat-label {
  font-size: 12px;
  font-weight: 600;
  /* axe: beyaz kart zemininde ink-500 = 3,96:1 (AA alti).
     eascess-ui S1 ink-500'i normal metinde yasakliyor; ink-600 = 6,2:1.
     Ayni duzeltme .ea-table th icin daha once yapilmisti. */
  color: var(--ink-600);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ea-stat-label svg { width: 14px; height: 14px; }

.ea-stat-value {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 12px 0 4px;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}

.ea-stat-delta {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-600);
}
.ea-stat-delta.up   { color: oklch(50% 0.14 155); }
.ea-stat-delta.down { color: oklch(55% 0.18 27); }

.ea-stat-accent {
  position: absolute;
  right: -20px;
  bottom: -20px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: var(--brand-grad-soft);
  filter: blur(20px);
}

/* Legacy stat row layout (old views) */
.ea-stat.ea-stat--row { display: flex; align-items: center; gap: 1rem; }
.ea-stat__icon {
  width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; flex-shrink: 0;
}
.ea-stat__icon--sky    { background: oklch(95% 0.05 190 / 0.5); }
.ea-stat__icon--indigo { background: oklch(95% 0.05 270 / 0.5); }
.ea-stat__icon--purple { background: oklch(95% 0.05 320 / 0.5); }
.ea-stat__icon--cyan   { background: oklch(95% 0.05 190 / 0.4); }
.ea-stat__value {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--ink-900);
  line-height: 1;
  letter-spacing: -0.02em;
}
.ea-stat__label { font-size: 12px; color: var(--ink-500); margin-top: 2px; font-weight: 500; }

/* ── Tables ─────────────────────────────────────────────────────── */
.ea-table { width: 100%; border-collapse: collapse; font-size: 14px; }

.ea-table th,
.ea-table thead th {
  text-align: left;
  padding: 10px 16px;
  font-size: var(--fs-xs);
  font-weight: 600;
  /* --ink-500 krem üzerinde 3,7:1 — normal metin için AA'nın (4,5:1)
     altında kalıyordu. --ink-600 6,2:1 ile geçer. SKILL.md §1 */
  color: var(--ink-600);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--cream-300);
  background: var(--cream-100);
  white-space: nowrap;
}

.ea-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--cream-200);
  color: var(--ink-800);
  vertical-align: middle;
}

.ea-table tr:hover td { background: var(--cream-100); }
.ea-table tbody tr:last-child td,
.ea-table tr:last-child td { border-bottom: none; }

/* Satır içi eylem düğmeleri (Tara / Raporlar / Script · Sil).
   Bir düğme <form> içinde, diğerleri <a>. Form blok kutusu olduğu için
   içindeki düğme satır kutusuna oturuyor, taban çizgisi altındaki iniş
   boşluğu formu birkaç piksel uzatıyordu: düğmeler kayık görünüyordu.
   Formu da esnek kap yapıp payını sıfırlayınca üçü aynı hatta oturur. */
.ea-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: nowrap;
}

.ea-row-actions > form { display: flex; margin: 0; }

.ea-row-actions .ea-btn {
  padding: 8px 12px;
  font-size: var(--fs-xs);
  white-space: nowrap;
}

/* Dar ekranda taşmak yerine sarar; sardığında da sağa hizalı kalır. */
@media (max-width: 900px) {
  .ea-row-actions { flex-wrap: wrap; row-gap: 8px; }
}

/* ── Badges ─────────────────────────────────────────────────────── */
.ea-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}

.ea-badge-ok,      .ea-badge--success { background: oklch(85% 0.12 155 / 0.3);  color: oklch(35% 0.14 155); }
.ea-badge-wait,    .ea-badge--warning { background: oklch(88% 0.1 80 / 0.35);    color: oklch(40% 0.12 70); }
.ea-badge-err,     .ea-badge--danger  { background: oklch(88% 0.1 27 / 0.3);     color: oklch(42% 0.16 27); }
.ea-badge-neutral, .ea-badge--muted   { background: var(--cream-200);            color: var(--ink-700); }
.ea-badge--sky     { background: oklch(92% 0.07 190 / 0.4); color: oklch(42% 0.14 200); }

.ea-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ── Forms ──────────────────────────────────────────────────────── */
.ea-label, .form-label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-800);
  margin-bottom: 6px;
}

.ea-input, .ea-select, .ea-textarea, .form-control {
  width: 100%;
  padding: 12px 16px;
  /* 16px ALT SINIRDIR: daha küçük punto iOS Safari'de odaklanınca
     sayfayı zorla yakınlaştırır ve kullanıcıyı düzenden koparır. */
  font-size: var(--fs-base);
  font-family: var(--font-sans);
  color: var(--ink-900);
  background: white;
  border: 1px solid var(--cream-300);
  border-radius: var(--r-sm);
  min-height: 46px;
  transition: border-color 0.15s, box-shadow 0.15s;
  /* outline: none YASAK. Tarayıcının varsayılan halkası kaldırılıyorsa
     yerine en az 2px'lik GÖRÜNÜR bir alternatif konur; burada odak
     :focus-visible'da açık bir çerçeve olarak geri gelir. */
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.ea-input:focus, .ea-select:focus, .ea-textarea:focus, .form-control:focus {
  border-color: var(--teal-600);
  box-shadow: 0 0 0 3px oklch(72% 0.11 190 / 0.2);
}

.ea-input:focus-visible, .ea-select:focus-visible,
.ea-textarea:focus-visible, .form-control:focus-visible {
  outline-color: var(--indigo-700);
}

.ea-input::placeholder, .form-control::placeholder { color: var(--ink-400); }
.ea-input.is-invalid, .form-control.is-invalid { border-color: oklch(60% 0.18 27); }

/* ── Stepper ────────────────────────────────────────────────────── */
.ea-stepper { display: flex; gap: 12px; margin-bottom: 28px; }
.ea-step    { flex: 1; display: flex; align-items: center; gap: 12px; }

.ea-step-num {
  width: 32px; height: 32px;
  border-radius: 999px;
  display: grid; place-items: center;
  font-weight: 600; font-size: var(--fs-sm); flex-shrink: 0;
  background: var(--cream-200); color: var(--ink-500);
}
.ea-step-num.done   { background: var(--success);  color: white; }
.ea-step-num.active { background: var(--ink-900);  color: white; }
.ea-step-label { font-weight: 600; color: var(--ink-500); font-size: 14px; }
.ea-step-label.active, .ea-step-label.done { color: var(--ink-900); }
.ea-step-line { flex: 1; height: 2px; background: var(--cream-300); border-radius: 2px; }
.ea-step-line.done { background: var(--success); }

/* ── Code block ─────────────────────────────────────────────────── */
.ea-mono, .font-monospace { font-family: var(--font-mono); font-size: 13px; }
code { font-family: var(--font-mono); font-size: 13px; background: var(--cream-200); padding: 1px 6px; border-radius: 4px; }

.ea-code-block {
  background: var(--ink-900);
  border-radius: var(--r-md);
  padding: 18px;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--cream-100);
  line-height: 1.6;
  position: relative;
  overflow-x: auto;
}

/* ── Divider ────────────────────────────────────────────────────── */
.ea-divider, hr.ea-divider {
  height: 1px;
  background: var(--cream-300);
  border: none;
  margin: 20px 0;
}

/* ── Alert ──────────────────────────────────────────────────────── */
.ea-alert { padding: 12px 16px; border-radius: var(--r-sm); font-size: 14px; margin-bottom: 16px; }
.ea-alert--success { background: oklch(94% 0.06 155 / 0.35); border: 1px solid oklch(62% 0.14 155 / 0.3); color: oklch(35% 0.14 155); }
.ea-alert--danger  { background: oklch(95% 0.04 27 / 0.4);   border: 1px solid oklch(60% 0.18 27 / 0.25); color: oklch(42% 0.16 27); }

.alert-danger {
  background: oklch(95% 0.04 27 / 0.4);
  border: 1px solid oklch(60% 0.18 27 / 0.25);
  color: oklch(42% 0.16 27);
  padding: 12px 16px;
  border-radius: var(--r-sm);
  font-size: 14px;
  margin-bottom: 16px;
}

.text-danger { color: oklch(42% 0.16 27); font-size: 12px; }

/* ── Empty state ────────────────────────────────────────────────── */
.ea-empty { text-align: center; padding: 4rem 2rem; }
.ea-empty__icon  { font-size: 2.5rem; margin-bottom: 1rem; }
.ea-empty__title { font-size: var(--fs-base); font-weight: 600; color: var(--ink-900); margin: 0 0 6px; }
.ea-empty__desc  { font-size: 14px; color: var(--ink-500); margin: 0 0 1.5rem; }

/* ── Score ──────────────────────────────────────────────────────── */
.ea-score { display: inline-flex; align-items: baseline; gap: 2px; font-weight: 700; }
.ea-score--high { color: oklch(50% 0.14 155); }
.ea-score--mid  { color: oklch(52% 0.15 75); }
.ea-score--low  { color: oklch(55% 0.18 27); }

/* ── Hero (landing) ─────────────────────────────────────────────── */
.ea-hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 6vw, 72px);
  align-items: center;
  padding: clamp(44px, 8vh, 84px) var(--mkt-pad-x) clamp(56px, 9vh, 96px);
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 75% 60% at 12% 18%, oklch(94% 0.025 190 / 0.5), transparent 70%),
    radial-gradient(ellipse 55% 70% at 88% 82%, oklch(94% 0.03 270 / 0.32), transparent 70%),
    var(--cream-50);
}

.ea-hero__left { padding-top: 10px; }

.ea-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: white;
  border: 1px solid var(--cream-300);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-700);
  box-shadow: var(--sh-sm);
  margin-bottom: 22px;
}

.ea-hero__title {
  font-family: var(--font-display);
  font-size: clamp(54px, 7vw, 96px);
  line-height: 0.97;
  letter-spacing: -0.012em;
  margin: 0 0 22px;
  color: var(--ink-900);
  font-weight: 400;
  text-wrap: balance;
}

/* Italic Authority: solid Dusk Navy, never gradient text */
.ea-hero__title em,
.ea-hero__title span {
  font-style: italic;
  color: var(--indigo-700);
}

.ea-hero__desc {
  font-size: 20px;
  line-height: 1.65;
  color: var(--ink-900, #0f172a);
  max-width: 52ch;
  margin: 0 0 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.ea-hero__desc strong {
  color: var(--indigo-700);
  font-weight: 700;
}

/* One-line proof: the embed snippet as a quiet mono chip */
.ea-hero__snippet {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-700);
  background: white;
  border: 1px solid var(--cream-300);
  border-radius: 999px;
  padding: 9px 18px;
  box-shadow: var(--sh-sm);
  margin-bottom: 30px;
  white-space: nowrap;
  max-width: 100%;
  overflow-x: auto;
}
.ea-hero__snippet .tk-tag  { color: var(--teal-600); }
.ea-hero__snippet .tk-attr { color: var(--indigo-700); }

.ea-hero__actions { display: flex; gap: 12px; margin-bottom: 36px; flex-wrap: wrap; }

/* ── Hero entrance — staggered CSS animations ───────────────────── */
.ea-hero__eyebrow { animation: ea-fade-up 0.8s var(--ease-out-expo) 0.1s both; }
.ea-hero__title   { animation: ea-fade-up 0.9s var(--ease-out-expo) 0.2s both; }
.ea-hero__desc    { animation: ea-fade-up 0.8s var(--ease-out-expo) 0.32s both; }
.ea-hero__snippet { animation: ea-fade-up 0.8s var(--ease-out-expo) 0.4s both; }
.ea-hero__actions { animation: ea-fade-up 0.8s var(--ease-out-expo) 0.48s both; }
.ea-hero__right   { animation: ea-slide-right 1s var(--ease-out-expo) 0.25s both; }

/* ── Centered hero (first slide) ────────────────────────────────────
   Full-viewport opening: the headline stands centered on its own, then
   the interactive demo follows as the next scroll-revealed slide. */
.ea-hero--center {
  grid-template-columns: 1fr;
  min-height: calc(100vh - 72px);
  place-content: center;
  text-align: center;
  gap: 0;
}
.ea-hero--center .ea-hero__left { padding-top: 0; }
.ea-hero--center .ea-hero__desc,
.ea-hero--center .ea-hero__snippet {
  margin-left: auto;
  margin-right: auto;
}
.ea-hero--center .ea-hero__desc { max-width: 56ch; }
.ea-hero--center .ea-hero__actions,
.ea-hero--center .ea-hero__stats { justify-content: center; }
.ea-hero--center .ea-hero__stats {
  display: inline-flex;
  border-top: none;
  padding-top: 26px;
  margin-top: 8px;
}

/* ── Demo slide (revealed below the hero) ──────────────────────────── */
.ea-demo-section {
  padding: clamp(40px, 7vh, 84px) var(--mkt-pad-x) var(--mkt-pad-y);
  border-top: 1px solid var(--cream-200);
  background:
    radial-gradient(ellipse 70% 60% at 80% 0%, oklch(95% 0.035 270 / 0.5), transparent 70%);
}
.ea-demo-section__layout {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.ea-demo-section .ea-demo__frame-wrap { max-width: none; width: 100%; margin: 0; }
.ea-demo-section__title {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  margin: 0 0 16px;
}

/* Demo bilgi sütunu (sol) */
.ea-demo-info__lead {
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.65;
  color: var(--ink-600);
  max-width: 46ch;
  margin: 0 0 28px;
}
.ea-demo-info__list {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ea-demo-info__list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.ea-demo-info__list svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--teal-600);
}
.ea-demo-info__list strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-900);
  margin-bottom: 3px;
}
.ea-demo-info__list span {
  display: block;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-500);
}
.ea-demo-info__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--indigo-700);
  text-decoration: none;
}
.ea-demo-info__link svg { transition: transform .25s var(--ease-out-expo); }
.ea-demo-info__link:hover svg { transform: translateX(4px); }

/* Demo iframe: bölüm viewport'a sığsın ki tek bakışta görünüp düzgün otursun */
.ea-demo-section .ea-demo__iframe { height: clamp(440px, 56vh, 600px); }

.ea-hero__stats {
  display: flex;
  gap: clamp(20px, 3vw, 36px);
  align-items: center;
  padding-top: 22px;
  border-top: 1px solid var(--cream-300);
  animation: ea-fade-up 0.8s var(--ease-out-expo) 0.56s both;
}

.ea-hero__stat-val {
  font-family: var(--font-display);
  font-size: 27px;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}

.ea-hero__stat-label {
  font-size: 11px;
  color: var(--ink-600);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin-top: 3px;
}

/* ── Feature strip ──────────────────────────────────────────────── */
.ea-features {
  padding: var(--mkt-pad-y) var(--mkt-pad-x);
  border-top: 1px solid var(--cream-200);
  background:
    radial-gradient(ellipse 60% 50% at 50% 100%, oklch(95% 0.02 190 / 0.4), transparent),
    var(--cream-100);
}

.ea-features-head { text-align: center; margin-bottom: 56px; }

.ea-features-eyebrow {
  font-size: 12px;
  font-weight: 600;
  color: oklch(42% 0.15 200);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}

.ea-features-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  margin: 0;
}

.ea-features-title span,
.ea-features-title em {
  color: var(--indigo-700);
  font-style: italic;
}

.ea-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  max-width: 1100px;
  margin: 0 auto;
}

.ea-feature-item {
  display: flex;
  gap: 18px;
  padding: 30px 0;
  border-top: 1px solid var(--cream-300);
  align-items: flex-start;
  transition: transform 0.6s var(--ease-out-expo);
}
.ea-feature-item:hover { transform: translateY(-4px); }

.ea-feature-item:nth-child(odd)  { padding-right: 56px; }
.ea-feature-item:nth-child(even) { padding-left: 56px; border-left: 1px solid var(--cream-300); }

.ea-feature-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border: 1px solid var(--cream-300);
  box-shadow: var(--sh-sm);
  color: var(--ink-700);
  flex-shrink: 0;
  margin-top: 2px;
  transition: color 0.3s var(--ease-out-quart), border-color 0.3s var(--ease-out-quart);
}
.ea-feature-item:hover .ea-feature-icon { color: var(--indigo-700); border-color: oklch(42% 0.15 270 / 0.25); }

.ea-feature-icon svg { width: 18px; height: 18px; }

.ea-feature-title { font-size: 15px; font-weight: 600; color: var(--ink-900); margin: 0 0 6px; }
.ea-feature-desc  { font-size: 14px; color: var(--ink-700); line-height: 1.6; margin: 0; }

/* ── Integration steps (3 adımda canlıda) ───────────────────────── */
.ea-steps {
  padding: var(--mkt-pad-y) var(--mkt-pad-x);
  border-top: 1px solid var(--cream-200);
  background: var(--cream-50);
}

.ea-steps__layout {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

.ea-steps__eyebrow {
  font-size: 12px;
  font-weight: 600;
  color: oklch(42% 0.15 200);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}

.ea-steps__title {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  margin: 0 0 8px;
}

.ea-steps__title em { font-style: italic; color: var(--indigo-700); }

.ea-steps__list { margin-top: 26px; }

.ea-steps__item {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 16px;
  padding: 22px 0;
  align-items: start;
}
.ea-steps__item + .ea-steps__item { border-top: 1px solid var(--cream-200); }

.ea-steps__num {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}

.ea-steps__item-title { font-size: 15px; font-weight: 600; color: var(--ink-900); margin: 0 0 5px; }
.ea-steps__item-desc  { font-size: 14px; color: var(--ink-700); line-height: 1.6; margin: 0; max-width: 46ch; }

/* Code window */
.ea-codewin {
  background: var(--ink-900);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xl);
  overflow: hidden;
}

.ea-codewin__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid oklch(28% 0.012 260);
}

.ea-codewin__name {
  font-family: var(--font-mono);
  font-size: 12px;
  color: oklch(72% 0.012 260);
}

.ea-codewin__copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--cream-100);
  background: oklch(28% 0.012 260);
  border: 1px solid oklch(34% 0.012 260);
  border-radius: 7px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.ea-codewin__copy:hover { background: oklch(33% 0.012 260); }
.ea-codewin__copy:focus-visible { outline: 3px solid var(--teal-500); outline-offset: 2px; }
.ea-codewin__copy svg { width: 13px; height: 13px; }

.ea-codewin__body {
  padding: 24px 22px 26px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--cream-100);
  overflow-x: auto;
  margin: 0;
}

.ea-codewin .tk-tag  { color: oklch(78% 0.1 190); }
.ea-codewin .tk-attr { color: oklch(82% 0.06 85); }
.ea-codewin .tk-str  { color: oklch(80% 0.1 155); }
/* axe: koyu kod penceresi zemininde 4,4:1 (AA alti) — aciklama
   yorum satiri okunur olmali. 66% ile ~6:1. */
.ea-codewin .tk-dim  { color: oklch(66% 0.012 260); }

/* ── Footer ─────────────────────────────────────────────────────── */
.ea-footer {
  border-top: 1px solid var(--cream-300);
  background: var(--cream-100);
}

.ea-footer__grid {
  max-width: 1100px;
  margin: 0 auto;
  padding: 56px var(--mkt-pad-x) 40px;
  display: grid;
  /* Marka + Ürün + Kaynaklar + Yasal */
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
}

.ea-footer__brand-row { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.ea-footer__brand-row img { height: 32px; width: auto; display: block; }

.ea-footer__brand-name {
  font-family: var(--font-display);
  font-size: 21px;
  letter-spacing: -0.02em;
  color: var(--ink-900);
}

.ea-footer__tagline {
  font-size: 14px;
  color: var(--ink-700);
  line-height: 1.6;
  max-width: 34ch;
  margin: 0;
}

.ea-footer__heading {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-600);
  margin: 0 0 14px;
}

.ea-footer__links { display: flex; flex-direction: column; gap: 2px; }
.ea-footer__links a {
  font-size: 14px;
  color: var(--ink-700);
  padding: 5px 0;
  width: fit-content;
  transition: color var(--dur-fast);
}
.ea-footer__links a:hover { color: var(--ink-900); text-decoration: underline; text-underline-offset: 3px; }

.ea-footer__legal {
  border-top: 1px solid var(--cream-300);
}
.ea-footer__legal-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px var(--mkt-pad-x);
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-700);
}

.ea-footer__copyright {
  display: flex;
  gap: 6px 16px;
  flex-wrap: wrap;
  margin: 0;
  color: var(--ink-600);
}

/* Firma kimlik bloğu — footer'da ve dar layout'ların alt şeridinde.
   Mobilde satırlar ALT ALTA durur; "·" ayraçlı tek satır dar ekranda
   okunmaz hâle geliyor. Ayraçlar yalnızca yan yana dizildiklerinde
   (>=640px) ::before ile eklenir. */
.ea-company {
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1.6;
}

.ea-company__line {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
}

.ea-company__item--name { font-weight: 600; color: var(--ink-900); }

.ea-company a { text-decoration: underline; text-underline-offset: 2px; }

.ea-company__etbis { margin-top: 6px; }
.ea-company__etbis img { max-width: 100%; height: auto; }

@media (min-width: 640px) {
  .ea-company__line { flex-direction: row; flex-wrap: wrap; gap: 2px 10px; }
  .ea-company__item + .ea-company__item::before {
    content: "·";
    margin-right: 10px;
    color: var(--ink-500);
  }
}

/* Yasal bağlantı satırı — pazarlama footer'ı olmayan layout'lar için. */
.ea-legal-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  font-size: 13px;
}

.ea-legal-row a {
  color: var(--ink-600);
  /* Dokunma hedefi: satır yüksekliği ile birlikte 44px'e ulaşır. */
  padding: 11px 0;
  line-height: 1.4;
}

.ea-legal-row a:hover { color: var(--ink-900); text-decoration: underline; text-underline-offset: 3px; }

/* Dar layout'ların (panel, giriş, ödeme) alt şeridi. */
.ea-mini-footer {
  border-top: 1px solid var(--cream-300);
  background: var(--cream-100);
  color: var(--ink-600);
  font-size: 13px;
}

.ea-mini-footer__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px var(--mkt-pad-x) 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Auth layout ────────────────────────────────────────────────── */
/* Auth sayfaları ana sayfanın hero dilini taşır: solda serif anlatı
   (tek italik em vurgusu), sağda beyaz form kartı. Marka üst çubukta,
   zemin warm-cream + yumuşak ambient tintler. */
.auth-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse 50% 50% at 20% 80%, oklch(94% 0.03 190 / 0.4), transparent),
    radial-gradient(ellipse 40% 60% at 80% 20%, oklch(94% 0.035 270 / 0.3), transparent),
    var(--cream-50);
}

.auth-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--nav-h);
  padding: 8px var(--mkt-pad-x);
}

.auth-shell {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 460px);
  gap: clamp(40px, 7vw, 110px);
  align-items: center;
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(24px, 4vh, 48px) var(--mkt-pad-x);
}

.auth-side { animation: ea-fade-up 0.8s var(--ease-out-expo) 0.1s both; }

.auth-side__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.6vw, 56px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--ink-900);
  margin: 0 0 16px;
  text-wrap: balance;
}
.auth-side__title em { font-style: italic; color: var(--indigo-700); }

.auth-side__sub {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-700);
  max-width: 44ch;
  margin: 0;
}

.auth-side__points {
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.auth-side__points li  { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--ink-700); line-height: 1.45; }
.auth-side__points svg { flex-shrink: 0; margin-top: 2px; }

.auth-card-col { display: flex; justify-content: center; min-width: 0; }

.auth-legal {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 18px var(--mkt-pad-x) 22px;
  font-size: 12px;
  color: var(--ink-500);
}

.auth-card {
  width: 100%;
  max-width: 440px;
  background: white;
  border: 1px solid var(--cream-300);
  border-radius: var(--r-xl);
  padding: 40px 32px;
  box-shadow: var(--sh-xl);
  animation: ea-scale-in 0.6s var(--ease-out-expo) 0.05s both;
}

.auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }
.auth-brand-logo { height: 36px; width: auto; object-fit: contain; display: block; }

.auth-brand-icon {
  width: 36px; height: 36px;
  background: var(--brand-grad);
  border-radius: 9px;
  display: grid; place-items: center;
}
.auth-brand-icon svg { width: 20px; height: 20px; fill: white; }

.auth-brand-name {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--ink-900);
}

.auth-heading {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink-900);
  margin: 0 0 6px;
}

.auth-subheading {
  font-size: 14px;
  color: var(--ink-600);
  margin: 0 0 24px;
}

.form-group { margin-bottom: 14px; }

.row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.check-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-700);
  cursor: pointer;
}

.auth-link { font-size: 12px; color: var(--indigo-700); font-weight: 600; text-decoration: none; }
.auth-link:hover { text-decoration: underline; }

.btn-auth {
  width: 100%;
  padding: 14px;
  background: var(--brand-grad);
  border: none;
  border-radius: var(--r-sm);
  color: white;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
  box-shadow: 0 4px 12px oklch(42% 0.15 270 / 0.25);
  min-height: 48px;
}
.btn-auth:hover { transform: translateY(-1px); box-shadow: 0 6px 16px oklch(42% 0.15 270 / 0.35); }

.divider { display: flex; align-items: center; gap: 10px; margin: 22px 0; }
.divider-line { flex: 1; height: 1px; background: var(--cream-300); }
/* axe: beyaz zeminde ink-500 = 3,96:1 (AA alti). eascess-ui S1:
   ink-500 normal metinde kullanilmaz. */
.divider-text { font-size: 12px; color: var(--ink-600); }

.auth-footer-text { text-align: center; font-size: 13px; color: var(--ink-600); margin-top: 22px; }
.auth-footer-text a { color: var(--indigo-700); font-weight: 600; text-decoration: none; }

/* ── Breadcrumb ─────────────────────────────────────────────────── */
.ea-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--ink-500); margin-bottom: 20px; }
.ea-breadcrumb a { color: var(--ink-500); text-decoration: none; }
.ea-breadcrumb a:hover { color: var(--teal-600); }
.ea-breadcrumb__sep { color: var(--ink-400); }
.ea-breadcrumb__current { color: var(--ink-700); }

/* ── Accordion (app surfaces — Reports vb.) ─────────────────────── */
.ea-accordion-item { background: var(--cream-100); border: 1px solid var(--cream-300); border-radius: var(--r-sm); margin-bottom: 6px; overflow: hidden; }
.ea-accordion-trigger { width: 100%; padding: 14px 16px; background: transparent; border: none; color: var(--ink-900); font-family: var(--font-sans); font-size: 14px; display: flex; align-items: center; gap: 10px; cursor: pointer; text-align: left; transition: background 0.15s; }
.ea-accordion-trigger:hover { background: var(--cream-200); }
.ea-accordion-body { display: none; padding: 14px 16px; border-top: 1px solid var(--cream-300); font-size: 14px; }
.ea-accordion-body.open { display: block; }

/* ── FAQ accordion (marketing — animated) ───────────────────────── */
.ea-faq-list { display: flex; flex-direction: column; gap: 8px; }

.ea-faq-item {
  background: white;
  border: 1px solid var(--cream-300);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: box-shadow var(--dur-fast);
}
.ea-faq-item:has(.ea-faq-trigger[aria-expanded="true"]) { box-shadow: var(--sh-md); }

.ea-faq-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink-900);
  transition: background 0.15s;
}
.ea-faq-trigger:hover { background: var(--cream-100); }
.ea-faq-trigger:focus-visible { outline: 3px solid var(--teal-500); outline-offset: -3px; }

.ea-faq-trigger svg {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--ink-500);
  transition: transform var(--dur-normal) var(--ease-out-quart);
}
.ea-faq-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }

.ea-faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s var(--ease-out-quart);
}
.ea-faq-panel.open { grid-template-rows: 1fr; }
.ea-faq-panel > div { overflow: hidden; }

.ea-faq-body {
  padding: 0 20px 18px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-700);
  max-width: 68ch;
}

/* ── Page wrapper (legacy) ──────────────────────────────────────── */
.ea-page { flex: 1; padding: 28px 40px 40px; max-width: 1200px; margin: 0 auto; width: 100%; }
.ea-page--narrow { max-width: 640px; }

/* ── Scrollbar ──────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--cream-300); border-radius: 3px; }

/* ── Focus ring ─────────────────────────────────────────────────── */
:focus-visible { outline: 3px solid var(--teal-500); outline-offset: 3px; }

/* ── Marketing page utilities ───────────────────────────────────── */
.ea-mkt-section          { padding: var(--mkt-pad-y) var(--mkt-pad-x); }
.ea-mkt-section--hero    { padding: clamp(56px, 9vh, 88px) var(--mkt-pad-x) clamp(40px, 7vh, 64px); text-align: center; }
.ea-mkt-section--plans   { padding: 0 var(--mkt-pad-x) clamp(56px, 9vh, 80px); }
.ea-mkt-section--alt     { background: var(--cream-100); border-top: 1px solid var(--cream-200); border-bottom: 1px solid var(--cream-200); }
.ea-mkt-section--bordered-b { border-bottom: 1px solid var(--cream-200); }

.ea-mkt-inner         { max-width: 1100px; margin: 0 auto; }
.ea-mkt-inner--md     { max-width: 900px;  margin: 0 auto; padding-top: 56px; }
.ea-mkt-inner--narrow { max-width: 720px;  margin: 0 auto; }
.ea-mkt-inner--760    { max-width: 760px; }

.ea-mkt-eyebrow-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: white; border: 1px solid var(--cream-300);
  padding: 6px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: var(--ink-700);
  box-shadow: var(--sh-sm); margin-bottom: 22px;
}

.ea-mkt-title {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.5vw, 66px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 0 0 18px;
  font-weight: 400;
  text-wrap: balance;
}
.ea-mkt-title em { font-style: italic; color: var(--indigo-700); }

.ea-mkt-subtitle { font-size: 18px; color: var(--ink-700); max-width: 54ch; margin: 0 auto; line-height: 1.6; }

.ea-mkt-h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.5vw, 64px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 0 0 18px;
  font-weight: 400;
  text-wrap: balance;
}
.ea-mkt-h1 em { font-style: italic; color: var(--indigo-700); }

.ea-mkt-h2         { font-family: var(--font-display); font-size: clamp(28px, 3.4vw, 38px); font-weight: 400; letter-spacing: -0.02em; margin: 0 0 10px; }
.ea-mkt-h2--center { text-align: center; margin-bottom: 36px; }
.ea-mkt-lead       { font-size: 16px; color: var(--ink-700); line-height: 1.6; margin: 0 0 40px; max-width: 64ch; }
.ea-mkt-hr         { border: none; border-top: 1px solid var(--cream-300); margin-bottom: 56px; }

/* ── Pricing ────────────────────────────────────────────────────── */
.ea-pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  align-items: stretch; /* equal-height cards so CTAs share one baseline */
  max-width: 1280px;    /* 4 kart tek sırada nefes alsın (.ea-mkt-inner 1100px'ini aşar) */
  margin: 0 auto;
}

.ea-pricing-card {
  padding: 28px 24px;
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
}

.ea-pricing-card--featured {
  border-color: oklch(42% 0.15 270 / 0.45);
  position: relative;
  box-shadow: var(--sh-lg);
}

.ea-pricing-card--dark { background: var(--ink-900); border-color: var(--ink-800); }

.ea-pricing-badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--indigo-700); color: white;
  font-size: 12px; font-weight: 600; padding: 4px 16px;
  border-radius: 999px; white-space: nowrap;
  box-shadow: 0 4px 12px oklch(42% 0.15 270 / 0.3);
}

.ea-pricing-tier           { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 14px; color: var(--ink-600); }
.ea-pricing-tier--featured { color: var(--indigo-700); }
.ea-pricing-tier--dark     { color: var(--teal-500); }

.ea-pricing-price {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink-900);
  margin-bottom: 6px;
}
.ea-pricing-price--dark { color: white; }

.ea-pricing-period       { font-size: 13px; color: var(--ink-600); margin-bottom: 6px; }
.ea-pricing-period--dark { color: oklch(80% 0.02 260); }

/* KDV dahil nihai tutar — bireysel müşteriye satışta görünmesi zorunlu.
   Kontrast için --ink-700 (krem zeminde AA'yı geçer), --ink-500 değil. */
.ea-pricing-vat {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-700);
  margin-bottom: 22px;
}
.ea-pricing-vat strong { color: var(--ink-900); font-weight: 600; }
.ea-pricing-vat--dark { color: oklch(88% 0.015 260); }
.ea-pricing-vat--dark strong { color: #fff; }

.ea-pricing-vat-note {
  margin: 24px auto 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink-600);
}
.ea-pricing-vat-note a { color: var(--indigo-700); text-decoration: underline; text-underline-offset: 2px; }

/* CTA now sits at the card foot (after features) and margin-top:auto
   pins it to the bottom, so all three CTAs align on one baseline. */
.ea-pricing-cta { width: 100%; justify-content: center; margin-top: 24px; }

.ea-pricing-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid var(--cream-200);
  padding-top: 22px;
  margin-bottom: auto;
}
.ea-pricing-card--dark .ea-pricing-features { border-top-color: oklch(28% 0.012 260); }

.ea-pricing-feature       { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--ink-700); line-height: 1.45; }
.ea-pricing-feature svg   { flex-shrink: 0; margin-top: 2px; }
.ea-pricing-feature--dark { color: oklch(82% 0.015 260); }

/* Üst kademeye (Ultra) taşınan özellik: hafif üstü çizili + rozet.
   Renk AAA'yı korumak için çok soluklaştırılmaz; çizgi incedir. */
.ea-pricing-feature--excluded   { color: var(--ink-600); }
.ea-pricing-feature--excluded s {
  text-decoration-thickness: 1px;
  text-decoration-color: var(--ink-500);
}
.ea-pricing-feature__ultra-tag {
  align-self: center;
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--indigo-700);
  background: oklch(42% 0.15 270 / 0.08);
  padding: 1px 8px; border-radius: 999px;
  white-space: nowrap;
}

/* Yıllık planlar */
.ea-yearly-sub {
  text-align: center; font-size: 15px; color: var(--ink-600);
  margin: -22px 0 30px; /* h2--center'ın 36px alt boşluğunu sıkılaştır */
}
.ea-yearly-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}
.ea-yearly-save {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: none;
  color: oklch(35% 0.14 155);
  background: oklch(85% 0.12 155 / 0.3);
  padding: 2px 9px; border-radius: 999px;
  margin-left: 8px; vertical-align: middle;
}

/* ── Kurumsal paneli ─────────────────────────────────────────────
   Abonelik sayfasının EN SONUNDA duran, satın alma içermeyen bilgi +
   iletişim bloğu. Metin solda, çağrı sağda. Siyah zemin ve altın
   yaldız kenar işlemesi bu kademeyi diğer plan kartlarından ayırır —
   kasıtlı olarak sayfanın en ağır görsel öğesidir. */
.ea-ent {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 32px;
  margin-top: 24px;
  padding: 32px 40px;
  border-radius: var(--r-lg);
  border: 1px solid var(--gold-600);
  /* Düz panel kararı: düşen gölge ve iç parlama yok. Zemin gradienti
     VURGU olarak kalır (derinlik taklidi değil, yüzey rengi);
     premium his artık yaldız kenar işlemesi ve tipografiyle taşınır. */
  background: linear-gradient(152deg, oklch(19% 0.012 260) 0%, oklch(12% 0.008 260) 100%);
}

/* İç yaldız hattı — klasik çerçeve işlemesi: dış kenardan 6px içeride
   ince, soluk bir altın çizgi. Tamamen dekoratif, tıklamayı engellemez. */
.ea-ent::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid oklch(80% 0.1 91 / 0.32);
  border-radius: calc(var(--r-lg) - 6px);
  pointer-events: none;
}

/* NOT: üst kenardaki "ışık parlaması" düz panel kararıyla kaldırıldı —
   fiziksel ışığı taklit ediyordu. Yaldız artık yalnızca gerçek
   kenarlıklar ve tipografiyle taşınıyor. */

.ea-ent__body, .ea-ent__aside { position: relative; z-index: 1; }

.ea-ent__eyebrow {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: 12px;
}

/* Serif başlık — panelin "premium" tonunu taşıyan asıl öğe. */
.ea-ent__title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 34px);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: 0.004em;
  margin: 0 0 12px;
  color: oklch(94% 0.06 93);
}

/* Yaldız dökümü yalnızca background-clip destekleyen tarayıcıda; aksi
   halde yukarıdaki düz altın renk geçerli kalır (metin kaybolmaz). */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .ea-ent__title {
    background: linear-gradient(100deg,
      oklch(97% 0.04 95) 0%, var(--gold-400) 36%,
      oklch(97% 0.04 95) 62%, var(--gold-500) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.ea-ent__text {
  margin: 0;
  max-width: 64ch;
  font-size: 14px;
  line-height: 1.6;
  color: oklch(85% 0.012 260);
}

.ea-ent__meta {
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: oklch(74% 0.035 90);
}

.ea-ent__aside {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}

.ea-ent__cta {
  display: inline-flex; align-items: center; justify-content: center;
  white-space: nowrap;
  padding: 13px 30px;
  border-radius: 999px;
  font-size: 14px; font-weight: 700; letter-spacing: 0.02em;
  text-decoration: none;
  color: oklch(20% 0.03 85);
  /* Düz: yaldız dolgu vurgudur, altında gölge yoktur. */
  background: linear-gradient(135deg, oklch(88% 0.1 95), oklch(76% 0.13 88) 50%, oklch(68% 0.12 84));
  border: 1px solid oklch(67% 0.11 86);
  transition: background var(--dur-fast) var(--ease-out-expo),
              border-color var(--dur-fast) var(--ease-out-expo);
}
/* Geri bildirim yükselmeyle değil, yaldızın koyulaşmasıyla verilir. */
.ea-ent__cta:hover {
  background: linear-gradient(135deg, oklch(82% 0.11 94), oklch(70% 0.13 87) 50%, oklch(61% 0.11 83));
  border-color: oklch(58% 0.1 85);
}
.ea-ent__cta:focus-visible { outline: 2px solid var(--gold-300); outline-offset: 3px; }

.ea-ent__mail {
  font-size: 12px; letter-spacing: 0.02em;
  color: oklch(82% 0.05 90);
  text-decoration: none;
}
.ea-ent__mail:hover { color: var(--gold-300); text-decoration: underline; }
.ea-ent__mail:focus-visible { outline: 2px solid var(--gold-300); outline-offset: 3px; border-radius: 4px; }

/* Ekran okuyucuya özel metin */
.ea-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── WCAG page ──────────────────────────────────────────────────── */

/* Compliance levels: one bordered surface, three cells */
.ea-levels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: white;
  border: 1px solid var(--cream-300);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-sm);
}

.ea-level { padding: 42px 36px; position: relative; }
.ea-level + .ea-level { border-left: 1px solid var(--cream-200); }

.ea-level--target {
  background: linear-gradient(180deg, oklch(96.5% 0.018 155 / 0.55), transparent 60%);
}

.ea-level__letter {
  font-family: var(--font-display);
  font-size: 58px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.ea-level__letter--a   { color: var(--teal-600); }
.ea-level__letter--aa  { color: var(--indigo-700); }
.ea-level__letter--aaa { color: var(--success-deep); }

.ea-level__badge {
  position: absolute;
  top: 22px;
  right: 22px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
}
.ea-level__badge--law    { background: oklch(93% 0.04 270 / 0.6); color: var(--indigo-700); }
.ea-level__badge--target { background: oklch(92% 0.07 155 / 0.5); color: var(--success-deep); }

.ea-level__name { font-size: 16px; font-weight: 600; color: var(--ink-900); margin-bottom: 10px; }
.ea-level__desc { font-size: 14px; color: var(--ink-700); line-height: 1.65; margin: 0 0 26px; }

.ea-level__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.ea-level__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--ink-700);
  line-height: 1.55;
}
.ea-level__list svg { flex-shrink: 0; margin-top: 2px; }

/* POUR principles: 2×2 editorial grid with ghost letterforms */
.ea-pour-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: white;
  border: 1px solid var(--cream-300);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-sm);
}

.ea-pour-cell {
  position: relative;
  padding: 46px 42px 42px;
  overflow: hidden;
  box-shadow: inset -1px 0 0 var(--cream-200), inset 0 -1px 0 var(--cream-200);
  min-height: 230px;
}

.ea-pour-cell__ghost {
  position: absolute;
  top: -38px;
  right: -10px;
  font-family: var(--font-display);
  font-size: 190px;
  line-height: 1;
  color: var(--pour-tint, var(--cream-200));
  pointer-events: none;
  user-select: none;
}

.ea-pour-cell__kicker {
  position: relative;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-600);
  margin-bottom: 10px;
}

.ea-pour-cell__title {
  position: relative;
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--ink-900);
  margin: 0 0 10px;
}

.ea-pour-cell__desc {
  position: relative;
  font-size: 14px;
  color: var(--ink-700);
  line-height: 1.65;
  margin: 0;
  max-width: 48ch;
}

/* Scan coverage grid */
.ea-wcag-check-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: white;
  border: 1px solid var(--cream-300);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  margin-bottom: 48px;
}
.ea-wcag-check-cell  { padding: 34px 32px; box-shadow: inset -1px 0 0 var(--cream-200), inset 0 -1px 0 var(--cream-200); }
.ea-wcag-check-icon  {
  width: 38px; height: 38px; border-radius: 10px;
  background: white;
  border: 1px solid var(--cream-300);
  box-shadow: var(--sh-sm);
  display: grid; place-items: center;
  color: var(--ink-700); margin-bottom: 16px;
}
.ea-wcag-check-title { font-size: 14px; font-weight: 600; color: var(--ink-900); margin-bottom: 6px; }
.ea-wcag-check-desc  { font-size: 13.5px; color: var(--ink-700); line-height: 1.6; margin: 0; }

/* Dark CTA band */
.ea-wcag-cta {
  background: var(--ink-900);
  border-radius: var(--r-lg);
  padding: clamp(30px, 4vw, 44px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  box-shadow: var(--sh-lg);
}
.ea-wcag-cta__text    { color: white; }
.ea-wcag-cta__title   { font-family: var(--font-display); font-size: clamp(24px, 3vw, 30px); letter-spacing: -0.02em; margin-bottom: 8px; }
.ea-wcag-cta__desc    { font-size: 14.5px; color: oklch(82% 0.015 260); line-height: 1.55; max-width: 52ch; }
.ea-wcag-cta__actions { display: flex; gap: 10px; flex-shrink: 0; flex-wrap: wrap; }

/* ── Public test page (Sitenizi Test Edin) ──────────────────────── */
.ea-test {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(56px, 9vh, 88px) 24px 96px;
}

.ea-test-head { text-align: center; margin-bottom: 36px; }

.ea-test-head h1 {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 54px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--ink-900);
  margin: 0 0 16px;
  text-wrap: balance;
}
.ea-test-head h1 em { font-style: italic; color: var(--indigo-700); }

.ea-test-head p { font-size: 17px; color: var(--ink-700); margin: 0; line-height: 1.6; }

.ea-test-form-card {
  background: white;
  border: 1px solid var(--cream-300);
  border-radius: var(--r-lg);
  padding: 24px 26px 18px;
  box-shadow: var(--sh-md);
  transition: box-shadow var(--dur-fast);
}
.ea-test-form-card:focus-within { box-shadow: var(--sh-lg); }

.ea-test-form { display: flex; gap: 10px; flex-wrap: wrap; }
.ea-test-form .ea-input { flex: 1; min-width: 240px; font-family: var(--font-mono); font-size: var(--fs-base); }

.ea-test-meta {
  font-size: 12.5px;
  color: var(--ink-700);
  margin: 12px 0 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ea-test-error { color: var(--danger-deep); font-size: 13px; margin: 10px 0 0; }

/* Callout (rate limit, scan failure) */
.ea-callout {
  margin-top: 16px;
  padding: 18px 22px;
  border-radius: var(--r-md);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-800);
}
.ea-callout--danger {
  background: oklch(97% 0.025 25);
  border: 1px solid oklch(82% 0.07 25);
}
.ea-callout a { color: var(--indigo-700); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Result panel */
.ea-test-result {
  margin-top: 18px;
  background: white;
  border: 1px solid var(--cream-300);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}

.ea-test-result__head {
  display: flex;
  align-items: center;
  gap: clamp(20px, 4vw, 40px);
  padding: 28px clamp(20px, 4vw, 32px);
  flex-wrap: wrap;
}

/* Conic-gradient score ring (pure CSS) */
.ea-score-ring {
  --score: 0;
  --ring: var(--success);
  width: 128px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(var(--ring) calc(var(--score) * 1%), var(--cream-200) 0);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.ea-score-ring__inner {
  width: calc(100% - 22px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: white;
  display: grid;
  place-content: center;
  text-align: center;
}

.ea-score-ring__value {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}

.ea-score-ring__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-600);
  margin-top: 4px;
}

.ea-test-result__counts { display: flex; gap: clamp(24px, 4vw, 44px); flex-wrap: wrap; }

.ea-test-count__value {
  font-family: var(--font-display);
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.ea-test-count__value--danger  { color: var(--danger-deep); }
.ea-test-count__value--warning { color: var(--warning-deep); }

.ea-test-count__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-600);
  margin-top: 6px;
}

.ea-test-result__url {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-600);
  margin-top: 10px;
  word-break: break-all;
}

/* Issue list */
.ea-issues__head {
  padding: 16px clamp(20px, 4vw, 32px);
  border-top: 1px solid var(--cream-200);
  border-bottom: 1px solid var(--cream-200);
  background: var(--cream-100);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.ea-issues__title { font-size: 14px; font-weight: 600; color: var(--ink-900); }
.ea-issues__meta  { font-size: 12px; color: var(--ink-600); }

.ea-issue-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px clamp(20px, 4vw, 32px);
}
.ea-issue-row + .ea-issue-row { border-top: 1px solid var(--cream-200); }

.ea-sev {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 1px;
}
.ea-sev--critical { background: oklch(95% 0.035 25);  color: var(--danger-deep); }
.ea-sev--warning  { background: oklch(96% 0.045 80);  color: var(--warning-deep); }
.ea-sev--info     { background: var(--cream-200);     color: var(--ink-700); }

.ea-issue-row__code { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; color: var(--ink-800); margin-bottom: 3px; }
.ea-issue-row__desc { font-size: 13.5px; color: var(--ink-700); line-height: 1.55; }

.ea-test-clean {
  padding: 36px;
  text-align: center;
  border-top: 1px solid var(--cream-200);
}
.ea-test-clean svg { display: block; margin: 0 auto 10px; }
.ea-test-clean p { color: var(--ink-800); font-weight: 600; margin: 0; }

/* Dark conversion band */
.ea-test-cta {
  margin-top: 18px;
  background: var(--ink-900);
  border-radius: var(--r-lg);
  padding: 32px;
  text-align: center;
  color: white;
  box-shadow: var(--sh-lg);
}
.ea-test-cta__title { font-family: var(--font-display); font-size: 24px; letter-spacing: -0.02em; margin: 0 0 8px; }
.ea-test-cta__desc  { font-size: 13.5px; color: oklch(82% 0.015 260); margin: 0 0 20px; }

/* ── Docs layout ────────────────────────────────────────────────── */
.ea-docs-layout { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.ea-docs-nav {
  background: var(--cream-100); border-right: 1px solid var(--cream-200);
  padding: 32px 16px; position: sticky; top: 0;
  height: 100vh; overflow-y: auto;
}
.ea-docs-nav__heading         { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-700); margin-bottom: 10px; padding: 0 8px; }
.ea-docs-nav__heading--spaced { margin-top: 20px; }
.ea-docs-body     { padding: 40px 56px; max-width: 820px; }
.ea-docs-section  { margin-bottom: 56px; }
.ea-docs-h1       { font-family: var(--font-display); font-size: 42px; font-weight: 400; letter-spacing: -0.02em; margin: 0 0 12px; line-height: 1; }
.ea-docs-h2       { font-family: var(--font-display); font-size: 28px; font-weight: 400; letter-spacing: -0.02em; margin: 0 0 12px; }
.ea-docs-lead     { font-size: 16px; color: var(--ink-600); line-height: 1.6; margin: 0 0 24px; }
.ea-docs-p        { font-size: 15px; color: var(--ink-600); line-height: 1.6; margin: 0 0 20px; }
.ea-docs-p--sm    { font-size: 14px; color: var(--ink-600); line-height: 1.6; margin: 0 0 12px; }
.ea-docs-hr       { border: none; border-top: 1px solid var(--cream-300); margin-bottom: 56px; }
.ea-docs-tag      { background: var(--cream-200); color: var(--ink-700); font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 4px; font-family: var(--font-mono); }
.ea-docs-tag--post { background: oklch(88% 0.1 270 / 0.4); color: var(--indigo-700); }
.ea-docs-endpoint  { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ea-docs-step-list { display: flex; flex-direction: column; gap: 16px; }
.ea-docs-step      { display: flex; gap: 16px; align-items: flex-start; }
.ea-docs-step-num  { width: 32px; height: 32px; border-radius: 999px; background: var(--ink-900); color: white; display: grid; place-items: center; font-weight: 600; font-size: 13px; flex-shrink: 0; }
.ea-docs-step-title { font-size: 15px; font-weight: 600; color: var(--ink-900); margin-bottom: 4px; }
.ea-docs-step-desc  { font-size: 14px; color: var(--ink-600); margin: 0; line-height: 1.6; }
.ea-docs-feat-grid  { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.ea-docs-feat-item  { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--cream-100); border: 1px solid var(--cream-300); border-radius: var(--r-sm); }
.ea-docs-tag-pill   { display: inline-flex; align-items: center; gap: 6px; background: var(--brand-grad-soft); color: var(--indigo-700); padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 600; margin-bottom: 16px; }
.ea-docs-cta        { background: var(--brand-grad-soft); border: 1px solid oklch(72% 0.11 190 / 0.2); border-radius: var(--r-lg); padding: 32px; text-align: center; }
.ea-docs-cta__title { font-family: var(--font-display); font-size: 22px; letter-spacing: -0.02em; margin-bottom: 8px; }
.ea-docs-cta__desc  { font-size: 14px; color: var(--ink-600); margin: 0 0 18px; }
.ea-card--info      { padding: 16px 20px; display: flex; gap: 12px; align-items: flex-start; }

/* ── Demo (browser window mockup) ───────────────────────────────── */
.ea-demo__eyebrow {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--teal-600);
  margin-bottom: 10px;
}

.ea-demo__frame-wrap {
  max-width: 900px;
  margin: 0 auto;
  border: 1px solid var(--cream-300);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xl);
  overflow: hidden;
  background: white;
}

.ea-demo__browser-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--cream-100);
  border-bottom: 1px solid var(--cream-300);
}

.ea-demo__dots {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}

.ea-demo__dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: block;
}

.ea-demo__dots span:nth-child(1) { background: #fc615d; }
.ea-demo__dots span:nth-child(2) { background: #fdbc40; }
.ea-demo__dots span:nth-child(3) { background: #34c749; }

.ea-demo__url-bar {
  flex: 1;
  text-align: center;
  font-size: 12px;
  color: var(--ink-500);
  font-family: var(--font-mono);
  background: white;
  border: 1px solid var(--cream-300);
  border-radius: 6px;
  padding: 4px 10px;
}

.ea-demo__iframe {
  width: 100%;
  height: 680px;
  border: none;
  display: block;
}

/* ── AI CTA section ─────────────────────────────────────────────── */
.ea-ai-cta {
  padding: var(--mkt-pad-y) var(--mkt-pad-x);
  background: var(--cream-50);
  border-top: 1px solid var(--cream-200);
}

.ea-ai-cta__layout {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 72px);
  align-items: center;
}

.ea-ai-cta__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: white;
  border: 1px solid var(--cream-300);
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--indigo-700);
  box-shadow: var(--sh-sm);
  margin-bottom: 20px;
}

.ea-ai-cta__title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.6vw, 42px);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  margin: 0 0 14px;
}

.ea-ai-cta__title em {
  font-style: italic;
  color: var(--indigo-700);
}

.ea-ai-cta__desc {
  font-size: 15px;
  color: var(--ink-700);
  line-height: 1.65;
  margin-bottom: 28px;
  max-width: 48ch;
}

/* ── Widget panel mockup ─── */
.ea-ai-cta__panel-wrap {
  display: flex;
  justify-content: center;
}

.ea-ai-mock-panel {
  background: oklch(98.5% 0.006 85);
  border: 1px solid oklch(90% 0.01 80);
  border-radius: 16px;
  box-shadow: var(--sh-lg);
  width: 270px;
  overflow: hidden;
  transition: transform var(--dur-normal) var(--ease-out-expo), box-shadow var(--dur-normal) var(--ease-out-expo);
}
.ea-ai-mock-panel:hover { transform: translateY(-4px); box-shadow: var(--sh-xl); }

.ea-ai-mock-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--brand-grad);
}

.ea-ai-mock-panel__title {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
}

.ea-ai-mock-panel__actions {
  display: flex;
  gap: 5px;
}

.ea-ai-mock-panel__dot {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: rgba(255,255,255,0.22);
}

.ea-ai-mock-panel__body {
  padding: 14px;
}

.ea-ai-mock-panel__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  /* axe: 10px kalin, ink-500 = 3,8:1 (AA alti). */
  color: var(--ink-600);
  margin-bottom: 8px;
}

.ea-ai-mock-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 10px;
  background: var(--ink-900);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, transform 0.1s;
  margin-bottom: 10px;
}

.ea-ai-mock-btn:hover {
  background: var(--ink-800);
  transform: scale(1.01);
}

.ea-ai-mock-btn svg {
  width: 16px;
  height: 16px;
  fill: #fff;
  flex-shrink: 0;
}

.ea-ai-mock-panel__hint {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--ink-600);
  justify-content: center;
}

/* ── Scroll Reveal ──────────────────────────────────────────────── */
@keyframes ea-fade-up {
  from { opacity: 0; transform: translateY(56px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ea-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes ea-scale-in {
  from { opacity: 0; transform: scale(0.9) translateY(36px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes ea-slide-right {
  from { opacity: 0; transform: translateX(52px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes ea-slide-left {
  from { opacity: 0; transform: translateX(-52px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Elements start hidden; JS adds .ea-visible when they enter viewport */
[data-ea-reveal] {
  opacity: 0;
  will-change: transform, opacity;
}
[data-ea-reveal].ea-visible {
  animation-fill-mode: both;
  animation-timing-function: var(--ease-out-expo);
}
[data-ea-reveal="fade-up"].ea-visible   { animation-name: ea-fade-up; }
[data-ea-reveal="fade-in"].ea-visible   { animation-name: ea-fade-in; }
[data-ea-reveal="scale-in"].ea-visible  { animation-name: ea-scale-in; }
[data-ea-reveal="slide-right"].ea-visible { animation-name: ea-slide-right; }
[data-ea-reveal="slide-left"].ea-visible  { animation-name: ea-slide-left; }

/* ── Marketing scroll (html.ea-mkt) ─────────────────────────────────
   Yumuşak kaydırma + sticky navbar çapa offset'i. scroll-padding-top
   sayesinde sayfa içi hedefler (#planlar, #sss…) navbar'ın ALTINA değil
   tam hizasına oturur; --nav-h değişkenini site.js gerçek navbar
   yüksekliğiyle senkron tutar.

   Not: Önceki "slideshow" denemesi (scroll-snap-type: y mandatory) kökten
   kaldırıldı. Kök elemanda zorunlu snap, ilk yüklemede tarayıcıyı en yakın
   snap noktasına çekiyordu (sayfanın tepeden başlamama hatası: hero
   viewport'tan uzun olduğunda snap'ten muaf kalıyor ve sayfa 2. bölüme
   kilitleniyordu) ve kullanıcının scroll'unu ele geçiriyordu. Pürüzsüz
   his, snap ile değil smooth behavior + doğru offset ile sağlanır.
   Uygulama paneli (_AppLayout) .ea-mkt sınıfı taşımadığından etkilenmez. */
html.ea-mkt {
  scroll-padding-top: var(--nav-h);
  scroll-behavior: smooth;
}

/* ── Checkout (ödeme akışı) ─────────────────────────────────────── */
/* Dikkat dağıtmayan kabuk: yan menü ve pazarlama gezinmesi yoktur; yalnızca
   marka, güvenlik rozeti ve geri dönüş bağlantısı bulunur. Tüm değerler
   mevcut tasarım jetonlarından gelir — yeni renk/font/ölçek tanımlanmaz. */
.ea-checkout-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse 50% 50% at 20% 80%, oklch(94% 0.03 190 / 0.4), transparent),
    radial-gradient(ellipse 40% 60% at 80% 20%, oklch(94% 0.035 270 / 0.3), transparent),
    var(--cream-50);
}

.ea-checkout-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--nav-h);
  padding: 8px var(--mkt-pad-x);
  border-bottom: 1px solid var(--cream-200);
}

/* Güvenli ödeme rozeti — .ea-mkt-eyebrow-pill diliyle, gölgesiz */
.ea-checkout-secure {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-600);
}
.ea-checkout-secure svg { color: var(--success-deep); flex-shrink: 0; }

.ea-checkout-shell {
  flex: 1;
  width: 100%;
  max-width: 1060px;
  margin: 0 auto;
  padding: clamp(24px, 4vh, 44px) var(--mkt-pad-x) 48px;
}

.ea-checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 372px);
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
}

/* Sipariş özeti uzun formda görünür kalır */
.ea-checkout-summary { position: sticky; top: 24px; }

.ea-checkout-section + .ea-checkout-section { margin-top: 16px; }

.ea-checkout-legend {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--ink-900);
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}

/* İki sütunlu alan ızgarası; tek alanlar --full ile satırı kaplar */
.ea-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}
.ea-field-grid__full { grid-column: 1 / -1; }

/* Alan altı hata mesajı — .text-danger rengini kullanır, boşken yer kaplamaz */
.ea-field-error {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: oklch(42% 0.16 27);
}
.ea-field-error:empty { display: none; }

/* Faturalama dönemi seçimi — radyo grubu, kart görünümlü */
.ea-period-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.ea-period-option {
  position: relative;
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--cream-300);
  border-radius: var(--r-sm);
  background: white;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ea-period-option:hover { border-color: var(--teal-600); }
.ea-period-option input { position: absolute; opacity: 0; pointer-events: none; }
.ea-period-option:has(input:checked) {
  border-color: var(--indigo-700);
  box-shadow: 0 0 0 3px oklch(42% 0.15 270 / 0.14);
}
/* Klavye odağı görünür kalmalı — gizli radyo, etiketi işaretler */
.ea-period-option:has(input:focus-visible) {
  outline: 3px solid var(--teal-500);
  outline-offset: 2px;
}
.ea-period-option__name { font-size: 14px; font-weight: 600; color: var(--ink-900); }
.ea-period-option__meta { font-size: 12px; color: var(--ink-500); margin-top: 3px; }

/* Ön ekli alan (telefon ülke kodu) — ön ek alanın içindeymiş gibi görünür */
.ea-input-prefixed { display: flex; align-items: stretch; }

.ea-input-prefix {
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-600);
  background: var(--cream-100);
  border: 1px solid var(--cream-300);
  border-right: none;
  border-radius: var(--r-sm) 0 0 var(--r-sm);
  white-space: nowrap;
  flex-shrink: 0;
}
.ea-input-prefixed .ea-input { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
/* Odak halkası ön ekle birlikte hareket etsin */
.ea-input-prefixed:focus-within .ea-input-prefix { border-color: var(--teal-600); }

/* Kupon satırı: alan + uygula düğmesi */
.ea-coupon-row { display: flex; gap: 8px; align-items: flex-start; }
.ea-coupon-row .ea-input { flex: 1; min-width: 0; }

/* Sipariş özeti satırları */
.ea-summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--ink-700);
  padding: 7px 0;
}
.ea-summary-row__label { color: var(--ink-600); }
.ea-summary-row__value { font-weight: 600; color: var(--ink-800); white-space: nowrap; }
.ea-summary-row--discount .ea-summary-row__value { color: var(--success-deep); }

.ea-summary-row--total {
  font-size: 15px;
  color: var(--ink-900);
  padding-top: 14px;
  border-top: 1px solid var(--cream-300);
  margin-top: 8px;
}
.ea-summary-row--total .ea-summary-row__label { font-weight: 600; color: var(--ink-900); }
.ea-summary-row--total .ea-summary-row__value { font-size: 22px; font-weight: 700; color: var(--ink-900); }

/* Yükleniyor durumundaki düğme — devre dışı görünüm tüm .ea-btn türleri için */
.ea-btn[disabled], .ea-btn[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.ea-spinner {
  width: 15px;
  height: 15px;
  border: 2px solid oklch(100% 0 0 / 0.45);
  border-top-color: white;
  border-radius: 50%;
  animation: ea-spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes ea-spin { to { transform: rotate(360deg); } }

.ea-checkout-legal {
  padding: 20px var(--mkt-pad-x) 28px;
  text-align: center;
  font-size: 12px;
  color: var(--ink-500);
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Sonuç (başarı / hata) sayfaları — tek sütun, ortalanmış */
.ea-checkout-result { max-width: 560px; margin: 0 auto; text-align: center; }

.ea-result-icon {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  margin: 0 auto 20px;
}
.ea-result-icon--ok   { background: oklch(85% 0.12 155 / 0.3); color: var(--success-deep); }
.ea-result-icon--fail { background: oklch(88% 0.1 27 / 0.3);   color: var(--danger-deep); }

.ea-result-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  font-weight: 400;
  color: var(--ink-900);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.ea-result-desc { font-size: 14px; color: var(--ink-600); line-height: 1.6; margin: 0 0 24px; }

/* Sipariş künyesi — etiket/değer çiftleri */
.ea-result-meta { text-align: left; display: flex; flex-direction: column; gap: 2px; }

/* ── Plan tanıtım penceresi ─────────────────────────────────────── */
/* Plan değiştikten sonra bir kez gösterilir; yeni planın ayrıcalıklarını anlatır. */
.ea-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: oklch(18% 0.012 260 / 0.5);
  display: grid;
  place-items: center;
  padding: 20px;
  overflow-y: auto;
  animation: ea-modal-in var(--dur-fast) var(--ease-out-quart);
}
.ea-modal-backdrop[hidden] { display: none; }

.ea-modal {
  background: white;
  border: 1px solid var(--cream-300);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xl);
  width: 100%;
  max-width: 520px;
  padding: 28px;
  text-align: left;
  animation: ea-modal-rise var(--dur-normal) var(--ease-out-expo);
}

@keyframes ea-modal-in   { from { opacity: 0; } }
@keyframes ea-modal-rise { from { opacity: 0; transform: translateY(12px); } }

.ea-modal__eyebrow {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--teal-600);
  margin-bottom: 8px;
}
.ea-modal__title {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 400;
  color: var(--ink-900);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.ea-modal__desc { font-size: 14px; color: var(--ink-600); line-height: 1.6; margin: 0 0 20px; }

.ea-modal__perks { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 12px; }
.ea-modal__perk  { display: flex; gap: 11px; align-items: flex-start; font-size: 14px; color: var(--ink-800); }
.ea-modal__perk svg { flex-shrink: 0; margin-top: 2px; color: var(--indigo-700); }
.ea-modal__perk-title { font-weight: 600; color: var(--ink-900); display: block; }
.ea-modal__perk-desc  { font-size: 13px; color: var(--ink-600); }

/* ── Öncelikli destek rozeti (Ultra ve Kurumsal) ─────────────────── */
/* "Hafif parlak" vurgu: markanın kendi degradesi + yumuşak dış parıltı.
   Dikkat çeker ama panelin sakin diline sadık kalır. */
.ea-priority-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  color: white;
  background: var(--brand-grad);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22),
              0 0 14px oklch(62% 0.12 200 / 0.45),
              0 2px 6px oklch(42% 0.15 270 / 0.25);
  position: relative;
  overflow: hidden;
}
/* Yavaş geçen ışık huzmesi — parlaklığı "hafif" tutan tek hareket */
.ea-priority-badge::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.42) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: ea-sheen 4.5s var(--ease-out-quart) infinite;
}
@keyframes ea-sheen {
  0%, 62% { transform: translateX(-120%); }
  100%    { transform: translateX(120%); }
}
.ea-priority-badge svg { width: 13px; height: 13px; }

/* Öncelikli destek panelinin kendisi */
.ea-priority-panel {
  border: 1px solid oklch(72% 0.11 190 / 0.45);
  background:
    linear-gradient(135deg, oklch(72% 0.11 190 / 0.09), oklch(42% 0.15 270 / 0.09)),
    white;
}

/* Hareketi kapatanlarda parıltı durur, rozet düz kalır */
@media (prefers-reduced-motion: reduce) {
  .ea-priority-badge::after { animation: none; display: none; }
}

/* ================================================================
   DÜZ PANEL KATMANI
   ================================================================
   Ürün kararı (2026-08-11, bencium-controlled-ux-designer):
   panel "tam düz geçiş" yapar. Yükseklik/gölge ile hiyerarşi
   kurulmaz; hiyerarşi 1px kenarlık, zemin farkı, tipografi ölçeği
   ve boşlukla kurulur ("material honesty" + "functional layering").

   Kapsam BİLEREK .ea-app ve .ea-checkout-shell ile sınırlıdır —
   pazarlama sayfaları kendi görsel dilini korur. Bu yüzden ortak
   ilkeller (.ea-card, .ea-btn) burada eziliyor, tanımları
   değiştirilmiyor.

   İSTİSNA: focus halkaları ve gerçek katman öğeleri (modal,
   dropdown) dokunulmaz — onlar derinlik değil, işlev taşır.
   ================================================================ */

/* Yüzeyler: gölge yok, ayrım kenarlıkla. */
.ea-app .ea-card,
.ea-checkout-shell .ea-card {
  box-shadow: none;
}

/* Etkileşimli kart: yükselme yerine kenarlık + zemin değişimi. */
.ea-app .ea-card--hover:hover,
.ea-checkout-shell .ea-card--hover:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--ink-400);
  background: var(--cream-50);
}

/* Butonlar: marka gradienti VURGU olarak kalır (skill gradienti
   vurgu/zemin için serbest bırakır), düşen gölge ve iç parlama
   kalkar. Geri bildirim renk koyulaşmasıyla verilir. */
.ea-app .ea-btn,
.ea-checkout-shell .ea-btn {
  box-shadow: none;
}
.ea-app .ea-btn:hover,
.ea-app .ea-btn:active,
.ea-checkout-shell .ea-btn:hover,
.ea-checkout-shell .ea-btn:active {
  transform: none;
  box-shadow: none;
}
.ea-app .ea-btn-brand:hover,
.ea-app .ea-btn--primary:hover,
.ea-checkout-shell .ea-btn-brand:hover,
.ea-checkout-shell .ea-btn--primary:hover {
  background: var(--indigo-800);
}
.ea-app .ea-btn-primary:hover,
.ea-checkout-shell .ea-btn-primary:hover {
  background: var(--ink-700);
}

/* Focus göstergesi gölge DEĞİL erişilebilirlik aracıdır — korunur
   ve panelde her etkileşimli öğeye genişletilir. Panelde daha önce
   yalnızca .ea-btn ve .ea-input'ta görünür focus vardı. */
.ea-app a:focus-visible,
.ea-app button:focus-visible,
.ea-app [tabindex]:focus-visible,
.ea-app summary:focus-visible,
.ea-checkout-shell a:focus-visible,
.ea-checkout-shell button:focus-visible,
.ea-checkout-shell [tabindex]:focus-visible {
  outline: 3px solid var(--teal-500);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* Dokunma hedefi: WCAG 2.5.5 / skill kuralı 44×44px. .ea-btn tabanı
   zaten 44px; panelde inline stille 30px'e indirilen satır içi eylem
   butonlarındaki ezmeler view'lardan kaldırıldı. Bu kural, ileride
   yeniden ezilmesin diye tabanı panel kapsamında sabitler. */
.ea-app .ea-btn,
.ea-checkout-shell .ea-btn {
  min-height: 44px;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .ea-hero { grid-template-columns: 1fr; gap: 32px; }
  .ea-hero__right { display: none; } /* decorative browser mockup off on narrow viewports */
  .ea-steps__layout { grid-template-columns: 1fr; gap: 40px; }
  .ea-pricing-grid { grid-template-columns: repeat(2, 1fr); } /* 4 kart → 2x2 */
}

/* md — 900px: yatay gezinme yerini çekmeceye bırakır, iki sütunlu
   düzenler tek sütuna iner. Daha önce 980/960/860/768'de ayrı ayrı
   duran kurallar buraya toplandı; kırılma noktası sayısı üçe indi.
   Ayrıntı: .claude/skills/eascess-ui/SKILL.md §4 */
@media (max-width: 900px) {
  .ea-demo-section__layout { grid-template-columns: 1fr; gap: 36px; }
  .ea-demo-info__lead { max-width: none; }

  .auth-shell { grid-template-columns: 1fr; max-width: 560px; }
  .auth-side  { display: none; } /* dar ekranda anlatı gizlenir, kart odağa geçer */

  .ea-ent { grid-template-columns: 1fr; gap: 24px; padding: 28px 24px; }
  .ea-ent__cta { width: 100%; }

  /* Footer dört kolon 900px'in altında sıkışıyor: marka bloğu tam
     genişlik alır, üç bağlantı kolonu iki sütuna sarar. */
  .ea-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .ea-footer__grid > :first-child { grid-column: 1 / -1; }
  .ea-levels { grid-template-columns: 1fr; }
  .ea-level + .ea-level { border-left: none; border-top: 1px solid var(--cream-200); }
  .ea-demo__iframe { height: 560px; }
  .ea-ai-cta__layout { grid-template-columns: 1fr; gap: 40px; }
  .ea-ai-cta__panel-wrap { justify-content: flex-start; }

  /* Ödeme: tek sütun. Özet forma göre önce gelir — kullanıcı ne ödeyeceğini
     formu doldurmadan görür. Tek sütunda yapışkanlık anlamsızdır. */
  .ea-checkout-layout { grid-template-columns: 1fr; }
  .ea-checkout-summary { position: static; order: -1; }

  /* ── Eski 768px bloğundan taşınanlar ────────────────────────────
     Beş menü öğesi + iki CTA tek satırda 900px'in altında zaten
     sığmıyordu; yatay bağlantılar burada gizlenir ve yerini
     hamburger + çekmece menü alır (bkz. .ea-navbar__toggle). */
  .ea-feature-grid { grid-template-columns: 1fr; }
  .ea-feature-item:nth-child(odd)  { padding-right: 0; }
  .ea-feature-item:nth-child(even) { padding-left: 0; border-left: none; }
  .ea-navbar__links { display: none; }
  /* CTA'lar da çekmeceye taşınır: marka + iki buton + hamburger 320px'te
     tek satıra sığmaz ve navbar'ı taşırır. */
  .ea-navbar__actions { display: none; }
  .ea-hero__title { font-size: clamp(2.6rem, 11vw, 3.6rem); }
  .ea-hero__stats { gap: 18px; flex-wrap: wrap; }
  .ea-pricing-grid { grid-template-columns: 1fr; }
  .ea-yearly-grid { grid-template-columns: 1fr; }
  .ea-pour-grid { grid-template-columns: 1fr; }
  .ea-wcag-check-grid { grid-template-columns: 1fr; }
  .ea-docs-layout { grid-template-columns: 1fr; }
  .ea-docs-nav { height: auto; position: static; }
  .ea-docs-body { padding: 24px 20px; }
  .ea-test-result__head { justify-content: center; text-align: center; }
  .ea-test-result__counts { justify-content: center; }
}

/* sm — 640px: form ve kart düzenleri tek sütuna iner, ikincil süsler
   gizlenir. 640px SINIRIN ALTIDIR: aynı dosyadaki min-width:640px
   blokları tam 640'ta devreye girsin diye üst sınır 639.98px'tir. */
@media (max-width: 639.98px) {
  .ea-footer__grid { grid-template-columns: 1fr; gap: 28px; padding-top: 40px; }
  .ea-demo__iframe { height: 480px; }
  .ea-demo__url-bar { display: none; }
  .ea-ai-mock-panel { width: 100%; }

  /* Ödeme formu dar ekranda tek sütuna iner; kupon alanı alt alta sarar */
  .ea-field-grid { grid-template-columns: 1fr; }
  .ea-period-toggle { grid-template-columns: 1fr; }
  .ea-coupon-row { flex-wrap: wrap; }
  .ea-coupon-row .ea-btn { width: 100%; justify-content: center; }
}

/* ── Reduced motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
  html.ea-mkt { scroll-behavior: auto; } /* html kuralını specificity nedeniyle ezmesin */
  [data-ea-reveal] { opacity: 1; }
}

/* ================================================================
   Yasal metin sayfaları (.ea-legal)
   Mesafeli satış sözleşmesi, ön bilgilendirme formu, gizlilik/KVKK,
   iptal & iade, çerez politikası ve iletişim sayfası bu bloğu kullanır.

   Erişilebilirlik ürünü satan bir sitenin yasal sayfaları da WCAG 2.2 AA
   olmalıdır: okunabilir satır uzunluğu, gerçek başlık hiyerarşisi, yeterli
   satır yüksekliği ve mobilde taşmayan tablolar. Uzun Türkçe kelimeler dar
   ekranda satırı taşırmasın diye kırılma kuralları burada tanımlıdır.
   ================================================================ */
.ea-legal {
  /* 72ch ≈ 66–72 karakter: gövde metninde 80 karakter sınırının altında kalır. */
  max-width: 72ch;
  margin: 0 auto;
  padding: clamp(32px, 7vw, 72px) var(--mkt-pad-x) clamp(48px, 9vw, 96px);
  color: var(--ink-700);
  font-size: var(--fs-base);
  line-height: 1.75;
  overflow-wrap: break-word;
  hyphens: auto;
}

.ea-legal__eyebrow {
  font-size: var(--fs-sm);
  /* --ink-500 krem zeminde 4.5:1'i geçmiyor; yasal sayfalarda normal
     gövde metni için en açık ton --ink-600'dır. */
  color: var(--ink-600);
  margin: 0 0 8px;
}

.ea-legal h1 {
  font-family: var(--font-display);
  font-size: clamp(30px, 6vw, var(--fs-3xl));
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink-900);
  margin: 0 0 12px;
}

.ea-legal h2 {
  font-size: clamp(19px, 3.4vw, var(--fs-xl));
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-900);
  margin: 40px 0 12px;
}

.ea-legal h3 {
  font-size: clamp(16px, 2.6vw, var(--fs-lg));
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink-800);
  margin: 28px 0 8px;
}

.ea-legal p { margin: 0 0 16px; }

.ea-legal ul,
.ea-legal ol {
  margin: 0 0 16px;
  /* Madde numaraları/işaretleri dar ekranda dışarı taşmasın diye
     liste kutunun İÇİNDE hizalanır. */
  padding-left: 1.35em;
}

.ea-legal li { margin: 0 0 8px; }

.ea-legal a {
  color: var(--indigo-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ea-legal strong { color: var(--ink-900); font-weight: 600; }

.ea-legal dl { margin: 0 0 16px; }
.ea-legal dt { font-weight: 600; color: var(--ink-900); margin-top: 12px; }
.ea-legal dd { margin: 0 0 4px; }

/* Sözleşme metinlerindeki tablolar dar ekranda sayfayı değil, KENDİ
   kutusunu kaydırır — yatay sayfa kaydırması hiçbir genişlikte oluşmaz. */
.ea-legal__table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 20px;
  border: 1px solid var(--cream-300);
  border-radius: var(--r-sm);
}

.ea-legal__table-scroll:focus-visible {
  outline: 2px solid var(--indigo-700);
  outline-offset: 2px;
}

.ea-legal table {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.ea-legal th,
.ea-legal td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--cream-200);
  vertical-align: top;
}

.ea-legal th {
  font-weight: 600;
  color: var(--ink-900);
  background: var(--cream-100);
}

.ea-legal tr:last-child td { border-bottom: none; }

/* Taslak uyarısı — hukuki inceleme tamamlanana kadar görünür kalır. */
.ea-legal__draft {
  border: 1px solid var(--warning-deep);
  border-left-width: 4px;
  border-radius: var(--r-sm);
  background: oklch(97% 0.03 75);
  color: var(--ink-800);
  padding: 12px 16px;
  margin: 0 0 24px;
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.ea-legal__meta {
  margin: 40px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--cream-300);
  font-size: var(--fs-sm);
  color: var(--ink-600);
}

/* İletişim sayfasındaki kimlik listesi */
.ea-legal__identity {
  display: grid;
  gap: 4px 20px;
  margin: 0 0 24px;
}

@media (min-width: 640px) {
  .ea-legal__identity {
    grid-template-columns: minmax(140px, max-content) 1fr;
  }
  .ea-legal__identity dt { margin-top: 0; }
}

/* ── Ödeme öncesi sözleşme onayları ─────────────────────────────── */
/* Etiketin TAMAMI tıklanabilir; kutu + dolgu birlikte 44×44px'lik
   dokunma hedefi oluşturur (WCAG 2.2 — 2.5.8 Target Size, Minimum). */
.ea-consent {
  border: 1px solid var(--cream-300);
  border-radius: var(--r-md);
  padding: 14px 16px 10px;
  margin: 0;
  background: var(--cream-50);
}

.ea-consent__legend {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-600);
  padding: 0 6px;
}

.ea-consent-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  /* Dikey dolgu, 24px kutuyla birlikte satırı 44px'in üzerine taşır. */
  padding: 10px 4px;
  cursor: pointer;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-800);
}

.ea-consent-item input[type="checkbox"] {
  /* iOS'ta varsayılan onay kutusu dokunma için küçük kalıyor. */
  width: 24px;
  height: 24px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--indigo-700);
  cursor: pointer;
}

.ea-consent-item input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--indigo-700);
  outline-offset: 2px;
}

.ea-consent-item a {
  color: var(--indigo-700);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ea-consent-item strong { font-weight: 600; color: var(--ink-900); }

.ea-consent .ea-field-error { display: block; padding-left: 40px; }

.ea-consent__note {
  margin: 8px 4px 2px;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--ink-600);
}

/* ================================================================
   Mobil gezinme — hamburger + çekmece menü

   Beş menü öğesi (Ürün, WCAG 2.2, Fiyatlandırma, Sitenizi Test Edin,
   Belgeler) ve iki CTA dar ekranda tek satıra sığmıyor. 900px'in altında
   yatay bağlantılar gizlenir (bkz. .ea-navbar__links kuralı) ve yerini
   bu çekmece alır.

   Erişilebilirlik: odak tuzağı, aria-expanded, Esc ile kapanma ve arka
   plan kaydırma kilidi site.js → initMobileNav içinde yönetilir.
   ================================================================ */

/* Taban (mobil): düğme görünür. */
.ea-navbar__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Dokunma hedefi: 44×44px — SKILL.md §5 */
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  margin-left: auto;
  padding: 0;
  background: transparent;
  border: 1px solid var(--cream-300);
  border-radius: var(--r-sm);
  color: var(--ink-900);
  cursor: pointer;
}

.ea-navbar__toggle:focus-visible {
  outline: 2px solid var(--indigo-700);
  outline-offset: 2px;
}

.ea-navbar__toggle-bars {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 18px;
}

.ea-navbar__toggle-bars span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

/* Karartma katmanı — çekmecenin altında, sayfanın üstünde. */
.ea-nav-scrim {
  position: fixed;
  inset: 0;
  /* Katman sırası: karartma (999) < navbar (1000) < çekmece (1001).
     Navbar karartmanın ÜSTÜNDE kalır ki hamburger düğmesi tıklanabilir
     olsun; çekmece de navbar'ın üstünde durup kapatma düğmesini örtmesin. */
  z-index: 999;
  background: oklch(18% 0.012 260 / 0.45);
}

.ea-nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1001;
  width: min(88vw, 360px);
  background: var(--cream-50);
  border-left: 1px solid var(--cream-300);
  box-shadow: var(--sh-xl);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.ea-nav-drawer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-5) var(--sp-8);
}

.ea-nav-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-2);
}

.ea-nav-drawer__title {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-600);
}

.ea-nav-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  background: transparent;
  border: none;
  border-radius: var(--r-sm);
  color: var(--ink-700);
  cursor: pointer;
}

.ea-nav-drawer__close:focus-visible {
  outline: 2px solid var(--indigo-700);
  outline-offset: 2px;
}

.ea-nav-drawer__inner > a {
  display: flex;
  align-items: center;
  /* 44px'lik dokunma hedefi; hedefler arası boşluk gap ile 4px + dolgu. */
  min-height: 48px;
  padding: var(--sp-2) var(--sp-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-base);
  color: var(--ink-800);
}

.ea-nav-drawer__inner > a:hover { background: var(--cream-100); }

.ea-nav-drawer__inner > a:focus-visible {
  outline: 2px solid var(--indigo-700);
  outline-offset: -2px;
}

.ea-nav-drawer__inner > a[aria-current="page"] {
  color: var(--indigo-700);
  font-weight: 600;
  background: var(--cream-100);
}

.ea-nav-drawer__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--cream-300);
}

.ea-nav-drawer__actions .ea-btn,
.ea-nav-drawer__actions button {
  width: 100%;
  justify-content: center;
  min-height: 44px;
}

.ea-nav-drawer__actions form { width: 100%; }

/* Çekmece açıkken arka plan kaydırması kilitlenir. Konum korunur ki
   menü kapanınca kullanıcı okuduğu yere geri dönsün. */
body.ea-nav-open {
  overflow: hidden;
  touch-action: none;
}

body.ea-nav-open .ea-navbar { z-index: 1000; }

/* md ve üstü: yatay gezinme geri gelir, hamburger kaybolur. */
@media (min-width: 901px) {
  .ea-navbar__toggle { display: none; }
  .ea-nav-drawer,
  .ea-nav-scrim { display: none !important; }
}

/* ================================================================
   Plan karşılaştırma tablosu — mobilde yatay kaydırma
   Gerekçe ve alternatifin neden seçilmediği: Views/Home/Pricing.cshtml
   içindeki karar notu.
   ================================================================ */
.ea-compare { overflow: hidden; }

.ea-compare__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Kaydırma imkânı GÖRSEL olarak belli olsun: sağ kenarda, yalnızca
     kaydırılacak içerik varken beliren bir gölge. */
  background:
    linear-gradient(to right, var(--cream-50) 30%, transparent),
    linear-gradient(to left,  var(--cream-50) 30%, transparent) 100% 0,
    radial-gradient(farthest-side at 0    50%, oklch(18% 0.012 260 / 0.14), transparent),
    radial-gradient(farthest-side at 100% 50%, oklch(18% 0.012 260 / 0.14), transparent) 100% 0;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}

.ea-compare__scroll:focus-visible {
  outline: 2px solid var(--indigo-700);
  outline-offset: -2px;
}

.ea-compare__table {
  /* Sütunlar sıkışıp okunmaz hâle gelmesin: tablo gerekirse kabından
     geniş olur ve KENDİ kabında kaydırılır — sayfa kaydırılmaz. */
  min-width: 620px;
}

/* İlk kolon sabit: kaydırırken özellik adı ekranda kalır. */
.ea-compare__rowhead {
  position: sticky;
  left: 0;
  z-index: 1;
  text-align: left;
  font-size: var(--fs-sm);
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink-800);
  background: var(--cream-50);
  border-right: 1px solid var(--cream-200);
}

.ea-compare__table thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--cream-100);
  border-right: 1px solid var(--cream-300);
}

.ea-compare__hint {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-xs);
  color: var(--ink-600);
  text-align: center;
}

@media (min-width: 901px) {
  /* Masaüstünde tablo zaten sığar; ipucu satırı gereksiz gürültüdür. */
  .ea-compare__hint { display: none; }
}

/* ================================================================
   Ana sayfa — dar ekran düzeltmeleri
   ================================================================ */

/* Kod satırı kendi kabında kaydırılır; klavyeyle de kaydırılabildiği
   için odak görünür olmalıdır. */
.ea-hero__snippet:focus-visible {
  outline: 2px solid var(--indigo-700);
  outline-offset: 3px;
}

/* Kopyala düğmesi mobilde de rahat basılabilmeli: 44px'lik hedef. */
.ea-codewin__copy {
  min-height: 44px;
  min-width: 44px;
  padding: var(--sp-2) var(--sp-3);
}

/* Demoyu tam ekran açan bağlantı — yalnızca dar ekranda görünür. */
.ea-demo__fullscreen {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: var(--sp-2) var(--sp-4);
  border-top: 1px solid var(--cream-300);
  background: var(--cream-100);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--indigo-700);
}

.ea-demo__fullscreen:focus-visible {
  outline: 2px solid var(--indigo-700);
  outline-offset: -2px;
}

@media (max-width: 900px) {
  .ea-demo__fullscreen { display: flex; }
  /* Çerçeve içindeki demo dar ekranda kullanılamıyor; alan küçültülüp
     yerini tam ekran bağlantısı alıyor. */
  .ea-demo__iframe { height: 420px; }
}

@media (max-width: 639.98px) {
  /* İstatistik satırı: dört sütun yerine 2×2. */
  .ea-hero__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4) var(--sp-5);
    text-align: left;
  }
  .ea-hero--center .ea-hero__stats {
    display: grid;
    justify-items: center;
    text-align: center;
  }

  /* Ana sayfadaki kod penceresi başlığı dar ekranda sarsın. */
  .ea-codewin__bar { flex-wrap: wrap; gap: var(--sp-2); }
}

/* Fiyatlandırma: "En Çok Tercih Edilen" rozetli kart mobilde EN ÜSTE.
   Kart yükseklikleri eşitlenmez — tek sütunda anlamı yoktur. */
@media (max-width: 900px) {
  .ea-pricing-grid { align-items: start; }
  .ea-pricing-grid .ea-pricing-card--featured { order: -1; }
  .ea-yearly-grid  .ea-pricing-card--featured { order: -1; }
}

/* ================================================================
   Panel gezinmesi — çekmece (.ea-app, ≤900px / merdiven basamak 6)

   ÖNCESİ: yan menü üstte YATAY KAYDIRILAN bir şeride dönüyordu.
   Ölçüldü: sekiz menü öğesi 320px'te 742px'lik bir şerit oluşturuyor,
   yani ekranda aynı anda 2 öğe görünüyordu. Sayfa gövdesi taşmıyordu
   (şerit kendi içinde kayıyordu) ama kullanıcı "Abonelik" ya da
   "Destek"e ulaşmak için şeridi SAĞA KAYDIRMAK zorundaydı — var
   olduğunu bilmediği bir şeyi aramak zorunda kalıyordu.

   SONRASI: yan menü, pazarlama tarafında ZATEN kullanılan çekmece
   kalıbına geçer (bkz. .ea-nav-drawer / initMobileNav). Üstte sabit
   bir başlık + hamburger; menü soldan açılır, listeyi DİKEY ve
   eksiksiz gösterir. Hiçbir şey yatay kaydırılmaz, görünüm
   değiştirmek gerekmez, içerik tam genişlik alır.

   Yan menünün kendi görsel dili (dikey liste, bölüm başlıkları,
   kullanıcı kutusu) olduğu gibi korunur — çekmece onu taşır, yeniden
   tasarlamaz.

   Masaüstü: .ea-panel-header ve .ea-panel-scrim `display:none`,
   yan menü 260px'lik ızgara kolonunda sabit. Bu bölümdeki her kural
   `max-width: 900px` içindedir.
   ================================================================ */

/* Mobil panel başlığı — masaüstünde YOK (ızgara kolonu da üretmez). */
.ea-panel-header { display: none; }
.ea-panel-nav-close { display: none; }
.ea-panel-scrim { display: none; }

@media (max-width: 900px) {
  .ea-app {
    grid-template-columns: minmax(0, 1fr);
    background-attachment: scroll;
  }

  /* ── Sabit başlık: marka + hamburger ───────────────────────────── */
  .ea-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-4);
    padding-top: max(var(--sp-2), env(safe-area-inset-top));
    padding-left: max(var(--sp-4), env(safe-area-inset-left));
    padding-right: max(var(--sp-4), env(safe-area-inset-right));
    background: var(--cream-100);
    border-bottom: 1px solid var(--cream-300);
    position: sticky;
    top: 0;
    z-index: 60;
  }

  .ea-panel-header__logo { height: 30px; width: auto; display: block; }

  .ea-panel-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-width: 44px;
    min-height: 44px;
    padding: 0 var(--sp-3);
    background: none;
    border: 1px solid var(--cream-300);
    border-radius: var(--r-sm);
    color: var(--ink-800);
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
  }
  .ea-panel-nav-toggle svg { width: 20px; height: 20px; flex-shrink: 0; }
  .ea-panel-nav-toggle:focus-visible { outline: 2px solid var(--indigo-700); outline-offset: 2px; }

  /* ── Çekmeceye dönen yan menü ──────────────────────────────────── */
  .ea-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(86vw, 300px);
    max-width: 100%;
    height: auto;
    z-index: 70;
    border-right: 1px solid var(--cream-300);
    box-shadow: 0 0 40px oklch(18% 0.012 260 / 0.18);
    overflow-y: auto;
    /* Çekmece İÇİNDE de yatay kaydırma olmaz. `overflow-y: auto` tek
       başına yazılırsa spec gereği `overflow-x` de `auto`ya döner ve
       menü uzun bir etiket yüzünden yana kaydırılabilir hâle gelirdi —
       kaçtığımız davranışın küçük hâli. */
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding-top: max(24px, env(safe-area-inset-top));
    padding-bottom: max(24px, env(safe-area-inset-bottom));
    padding-left: max(16px, env(safe-area-inset-left));
    /* Kapalıyken `visibility: hidden` — görsel olarak gizlemekle
       kalmaz, içindeki bağlantıları SEKME SIRASINDAN da çıkarır.
       `transform` tek başına bunu yapmaz: ekran dışındaki menüye
       klavyeyle odak gidebilir ve kullanıcı görünmeyen bir listede
       kaybolur. */
    visibility: hidden;
    transform: translateX(-100%);
    /* YALNIZCA `transform` animasyonlanır. `visibility` BİLEREK
       geçişin dışındadır.

       ÖLÇÜLEN TUZAK: `visibility` `transition` listesine yazıldığında —
       süresi/gecikmesi 0s olsa bile — açılış sınıfı eklendikten hemen
       sonra hesaplanan değer hâlâ `hidden` dönüyor. `open()` içindeki
       `.focus()` o anda çalıştığı için tarayıcı odağı REDDEDİYOR ve
       klavye kullanıcısı çekmeceye hiç giremiyordu (odak hamburger
       düğmesinde kalıyordu; `focusin` iziyle doğrulandı).

       Bedeli: kapanışta çekmece kayarak değil anında kayboluyor.
       Açılış kayması korunur. Odak yönetimini kozmetiğe tercih
       ediyoruz — kapanışta odak zaten düğmeye dönüyor. */
    transition: transform var(--dur-fast) var(--ease-out-expo);
  }

  body.ea-panel-nav-open .ea-sidebar {
    visibility: visible;
    transform: translateX(0);
  }

  /* Çekmece içindeki kapat düğmesi — markanın yanında. */
  .ea-panel-nav-close {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin-left: auto;
    background: none;
    border: none;
    border-radius: var(--r-sm);
    color: var(--ink-700);
    cursor: pointer;
    flex-shrink: 0;
  }
  .ea-panel-nav-close svg { width: 20px; height: 20px; }
  .ea-panel-nav-close:hover { background: var(--cream-200); color: var(--ink-900); }
  .ea-panel-nav-close:focus-visible { outline: 2px solid var(--indigo-700); outline-offset: 2px; }

  /* ── Perde ─────────────────────────────────────────────────────── */
  .ea-panel-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 65;
    background: oklch(18% 0.012 260 / 0.45);
    border: 0;
    padding: 0;
  }
  .ea-panel-scrim[hidden] { display: none; }

  /* Çekmece açıkken arka plan kaydırması kilitlenir. */
  body.ea-panel-nav-open { overflow: hidden; }

  /* Menü öğeleri dokunma hedefi eşiğinde. */
  .ea-nav-item { min-height: 44px; }

  /* Yan menü etiketleri `--ink-500` kullanıyor: krem yüzeyde ÖLÇÜLEN
     kontrast 3,51:1, yani AA'nın 4,5:1 eşiğinin altında (axe doğruladı).
     Eski yatay şeritte bu üç etiket gizliydi (`display:none` /
     ekran-okuyucu-only), çekmecede GÖRÜNÜR hâle geldiler — yani bu
     ihlali mobilde benim değişikliğim açığa çıkardı, onu da ben
     kapatıyorum. `--ink-600` aynı palette ve 6,0:1 veriyor.

     Masaüstü BİLEREK dokunulmadı: aynı ihlal orada da var ama
     değişikliğimle ilgisi yok (1440px'te ölçüldü, birebir aynı 4 düğüm)
     ve istenmeyen görsel değişiklik yapmamak için ayrı bir karar olarak
     bırakıldı. */
  .ea-nav-section,
  .ea-brand-meta,
  .ea-user-meta { color: var(--ink-600); }

  .ea-main { padding: var(--sp-5) var(--sp-4) var(--sp-8); }
}

/* Panel kartlarındaki iki sütunlu ölçüm ızgaraları dar ekranda
   tek sütuna iner (Abonelik: YZ kotası + domain kullanımı). */
@media (max-width: 639.98px) {
  .ea-topbar { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .ea-topbar-actions { width: 100%; }
  .ea-topbar-actions .ea-btn { width: 100%; justify-content: center; }
}

/* ================================================================
   Panel tabloları — dar ekranda kendi kabında kaydırılır

   Tablolar .ea-card içinde `overflow:hidden` ile duruyordu: 320px'te
   sütunlar kırpılıyor, kullanıcı satırın devamını hiçbir şekilde
   göremiyordu. Artık tablo KENDİ kabında yatay kaydırılıyor; sayfa
   gövdesi yatay kaydırılmıyor.
   ================================================================ */
.ea-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* Klavye kullanıcısı da kaydırabilmeli — WCAG 2.1.1. */
.ea-table-scroll:focus-visible {
  outline: 2px solid var(--indigo-700);
  outline-offset: -2px;
}

.ea-table-scroll > .ea-table {
  /* Sütunlar okunmaz hâle gelecek kadar sıkışmasın. */
  min-width: 560px;
}

/* ==================================================================
   MOBİL KATMAN — 2026-09-11
   ==================================================================
   Bu blok, gerçek bir tarayıcı motorunda (Playwright + Chromium 153)
   320/375/414/768/1024/1440px genişliklerde ÖLÇÜLEREK yazıldı.
   Önceki turda ölçüm yapılamamıştı (AÇIK-M2/M4/M5); bu blok o üç
   maddeyi kapatır.

   KURAL: Bu bloktaki her şey `max-width` sorgusu içindedir ya da
   `env(safe-area-inset-*)` kullanır (masaüstünde değeri 0'dır).
   Dolayısıyla MASAÜSTÜ ÇIKTISI BİREBİR AYNI KALIR — 1440/1280/1024px
   geometri parmak izi karşılaştırmasıyla doğrulandı.
   ================================================================== */

/* ── 1. Izgara/esnek kutu taşma kilidi (KÖK SORUN) ────────────────
   ÖLÇÜM: 320px'de `section.ea-hero` içindeki track 510,5px,
   `.ea-steps__layout` 384px, `.ea-docs-layout` 564px çıkıyordu.

   NEDEN: `grid-template-columns: 1fr` aslında `minmax(auto, 1fr)`
   demektir. `auto` minimumu, ögenin min-content genişliğidir. İçeride
   `white-space: nowrap` taşıyan bir kod satırı (`.ea-hero__snippet`)
   ya da kırılamayan uzun bir dizgi varsa track KAPTAN GENİŞ olur.
   `.ea-hero` üstünde `overflow: hidden` olduğu için sonuç yatay
   kaydırma değil, METNİN EKRAN DIŞINDA KALMASIYDI: 320px'de
   `h1.ea-hero__title` sol kenarı -95px'ti, yani başlığın bir kısmı
   hiçbir şekilde okunamıyordu. Kullanıcının "yazılar eksik kalıyor"
   tarifi tam olarak budur.

   ÇÖZÜM: `minmax(0, 1fr)` + ızgara çocuklarında `min-width: 0`.
   Bu, track'in kaptan geniş olmasını yasaklar; geniş içerik artık
   KENDİ `overflow-x: auto` kabında kaydırılır. */
/* DİKKAT: `minmax(0, 1fr)` yalnızca ilgili düzenin ZATEN tek sütuna
   indiği kırılma noktasında yazılır. Aksi hâlde iki sütunlu bir düzen
   vaktinden önce tek sütuna düşer. İlk denemede hepsi 1024px'e
   yazılmıştı; ölçüm `.ea-demo-section__layout`un 1024px'te
   "356px 513px" yerine tek kolona düştüğünü gösterdi → düzeltildi.
   .ea-hero / .ea-hero--center / .ea-steps__layout → 1024px'te tek sütun
   diğerleri                                        →  900px'te tek sütun */
@media (max-width: 1024px) {
  .ea-hero,
  .ea-hero--center,
  .ea-steps__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Izgara/esnek çocukları min-content'e çakılıp kalmasın. */
  .ea-hero > *,
  .ea-steps__layout > *,
  .ea-docs-layout > *,
  .ea-demo-section__layout > *,
  .ea-ai-cta__layout > *,
  .ea-checkout-layout > *,
  .auth-shell > *,
  .ea-wcag-cta > *,
  .ea-test-form > * {
    min-width: 0;
  }
}

/* 900px'te tek sütuna inen düzenlerin taşma kilidi. Bu düzenler
   900–1024px arasında İKİ SÜTUN kalır; yukarıdaki blokta yer alamazlar. */
@media (max-width: 900px) {
  .ea-docs-layout,
  .ea-demo-section__layout,
  .ea-ai-cta__layout,
  .ea-checkout-layout,
  .auth-shell {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── 2. Çentik / ev düğmesi güvenli alanı ─────────────────────────
   `viewport-fit=cover` eklendi (dört layout'ta), böylece sayfa zemini
   çentiğin altına kadar uzanır. Bunun KARŞILIĞI olarak içeriğin
   güvenli alana çekilmesi ZORUNLUDUR; aksi hâlde çentikli cihazda
   içerik kırpılırdı. `env()` masaüstünde 0 döner → etkisi yok. */
.ea-nav-drawer {
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
}

.ea-footer__grid {
  padding-bottom: calc(40px + env(safe-area-inset-bottom));
}

/* Yatay (landscape) modda çentik sol/sağ kenarı yer. Sayfa dolgusu
   en az güvenli alan kadar olsun. */
@media (max-width: 1024px) and (orientation: landscape) {
  .ea-navbar,
  .ea-footer__grid,
  .ea-mkt-section,
  .ea-hero,
  .ea-steps {
    padding-left: max(var(--mkt-pad-x), env(safe-area-inset-left));
    padding-right: max(var(--mkt-pad-x), env(safe-area-inset-right));
  }
}

/* ── 3. Dokunma hedefleri — ÖLÇÜLEN ihlaller ──────────────────────
   375px'de ölçülen yükseklikler: footer bağlantıları 27px,
   `.ea-skip-link` 37px, `.ea-demo-info__link` 19px,
   `.ea-ai-mock-btn` 36px. Hepsi 44px eşiğinin altındaydı
   (WCAG 2.2 — 2.5.8 Hedef Boyutu). */
@media (max-width: 1024px) {
  /* Footer bağlantıları: 14px punto korunur, dolgu ile 44px'e çıkar. */
  .ea-footer__links { gap: 0; }
  .ea-footer__links a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 4px 0;
  }

  .ea-demo-info__link {
    min-height: 44px;
    padding: 6px 0;
  }

  .ea-ai-mock-btn {
    min-height: 44px;
  }
}

/* Atlama bağlantısı dokunma hedefi — YALNIZCA mobil.
   Masaüstünde 37px'lik mevcut yükseklik korunur; ölçümle doğrulandı
   ki bu kural global olduğunda masaüstü geometrisi değişiyordu. */
@media (max-width: 1024px) {
  .ea-skip-link {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* ── 4. Kahraman bölümü (ana sayfa) — mobil düzen ─────────────────
   ÖLÇÜM: 320x568'de `min-height: calc(100vh - 72px)` + dikey ortalama,
   hero'yu ekranın tamamına yayıyordu; CTA düğmeleri ve istatistikler
   katlama çizgisinin ALTINDA kalıyordu. Telefonda ilk ekranda
   yalnızca başlık görünüyordu.

   KARAR: mobilde tam ekran yüksekliği bırakıldı. Başlık + açıklama +
   birincil CTA tek ekrana sığsın; geri kalanı doğal akışta aksın. */
@media (max-width: 900px) {
  .ea-hero--center {
    min-height: auto;
    padding-top: clamp(28px, 6vh, 48px);
    padding-bottom: clamp(36px, 7vh, 56px);
    place-content: start;
  }

  /* Kod satırı: mobilde hap (pill) biçimi yerine tam genişlikte
     kaydırılabilir bir şerit. `inline-flex` + `nowrap` ikilisi
     hap biçiminde 510px istiyordu; blok hâline gelince kendi
     kabında kaydırılıyor ve track'i şişirmiyor. */
  .ea-hero__snippet {
    display: flex;
    width: 100%;
    max-width: 100%;
    border-radius: var(--r-sm);
    padding: 12px 14px;
    margin-bottom: 24px;
    justify-content: flex-start;
    text-align: left;
  }

  .ea-hero__actions {
    margin-bottom: 28px;
  }
}

/* 480px altı: CTA düğmeleri tam genişlik — başparmakla tek elle
   kullanımda yan yana iki düğme 320px'de 140px'e sıkışıyordu. */
/* NOT: kahraman butonlarının dikey dizilimi merdiven dışı bir değerde
   (479.98px) duruyordu; "Kırılma noktası merdiveni" bölümüne, basamak 2
   (430px) altına taşındı. Bkz. dosya sonundaki MERDİVEN bölümü. */

/* ── 5. Entegrasyon adımları — mobil ──────────────────────────────
   52px'lik numara kolonu 320px'de içeriğe 248px bırakıyordu. */
@media (max-width: 639.98px) {
  .ea-steps__item {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 12px;
    padding: 18px 0;
  }
  .ea-steps__num {
    font-size: 24px;
  }
  .ea-steps__item-desc {
    max-width: none;
  }
}

/* ── 6. Belgeler sayfası — mobil yeniden düzen ────────────────────
   ÖLÇÜM: /Home/Docs 320px'de 564px genişlikti (+244px taşma, 137 ögede
   taşma). Sitenin EN KÖTÜ sayfasıydı.

   Eski mobil davranış: yan menü `position: static; height: auto`
   oluyordu — yani 10 bağlantılık dikey liste İÇERİĞİN ÜSTÜNE
   yığılıyordu. Kullanıcı belgelere ulaşmak için önce bütün menüyü
   kaydırmak zorundaydı.

   KARAR: menü, panel (.ea-app) için zaten benimsenmiş olan kalıba
   uyacak şekilde YATAY KAYDIRILAN bir şerit olur. Menü kaybolmaz,
   içeriğin önünü de kesmez, sayfa kaydırıldıkça üstte yapışık kalır.
   Bu bilinçli bir düzen kararıdır — sıkıştırma değil. */
@media (max-width: 900px) {
  .ea-docs-layout {
    min-height: 0;
  }

  .ea-docs-nav {
    /* Dikey listeden yatay şeride. */
    display: flex;
    gap: 6px;
    height: auto;
    position: sticky;
    top: var(--nav-h);
    z-index: 20;
    padding: 10px var(--mkt-pad-x);
    border-right: none;
    border-bottom: 1px solid var(--cream-300);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    background: oklch(96% 0.008 85 / 0.94);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    scrollbar-width: thin;
  }

  /* Bölüm başlıkları ("Başlarken", "Widget", "API") şeritte yer
     kaplar ama bağlantı değildir. Görsel olarak gizlenir, ekran
     okuyucuda KALIR — bağlam kaybolmasın. */
  .ea-docs-nav__heading {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .ea-docs-nav .ea-nav-item {
    flex: 0 0 auto;
    min-height: 44px;
    white-space: nowrap;
    border: 1px solid var(--cream-300);
    background: var(--cream-50);
  }

  /* DİKKAT — ölçülen hata: `.ea-docs-nav .ea-nav-item` ile
     `.ea-nav-item.active` AYNI özgüllükte (0,2,0). Şerit kuralı dosyada
     daha sonra geldiği için `background`ı eziyor, ama `.active`in
     `color: white`ı ayakta kalıyordu → krem zemin üzerinde beyaz yazı,
     yani AKTİF SEKME GÖRÜNMEZ oluyordu (ekran görüntüsüyle yakalandı).
     Aktif çipin dolgusu burada açıkça yeniden yazılır. */
  .ea-docs-nav .ea-nav-item.active {
    background: var(--ink-900);
    color: white;
    border-color: var(--ink-900);
  }

  /* Klavye kullanıcısı şeridi kaydırabilmeli — WCAG 2.1.1. */
  .ea-docs-nav:focus-visible {
    outline: 2px solid var(--indigo-700);
    outline-offset: -2px;
  }

  .ea-docs-body {
    padding: 28px var(--mkt-pad-x) 48px;
    max-width: none;
  }

  /* Çapa bağlantısı yapışık şeridin altında kalmasın. */
  .ea-docs-section {
    scroll-margin-top: calc(var(--nav-h) + 72px);
  }

  /* Başlıklar mobilde daha makul ölçekte. */
  .ea-docs-h1 { font-size: clamp(28px, 8vw, 42px); line-height: 1.1; }
  .ea-docs-h2 { font-size: clamp(21px, 5.5vw, 28px); }

  /* Uç nokta satırı (METOD + yol) dar ekranda alt alta iner;
     yol uzun ve kırılamaz olduğu için yan yana taşıyordu. */
  .ea-docs-endpoint {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* İki kolonluk özellik ızgarası tek kolona. */
  .ea-docs-feat-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── 7. WCAG sayfası CTA'sı ───────────────────────────────────────
   ÖLÇÜM: `.ea-wcag-cta__actions` 320px'de 270px genişlikti, kabı
   220px. `flex-shrink: 0` küçülmesini engelliyordu. */
@media (max-width: 639.98px) {
  .ea-wcag-cta {
    padding: 24px 20px;
  }
  .ea-wcag-cta__actions {
    flex-shrink: 1;
    width: 100%;
    flex-direction: column;
  }
  .ea-wcag-cta__actions > .ea-btn {
    width: 100%;
    justify-content: center;
  }
  .ea-wcag-cta__desc {
    max-width: none;
  }
}

/* ── 8. Site testi formu ──────────────────────────────────────────
   ÖLÇÜM: `.ea-test-form .ea-input` üzerindeki `min-width: 240px`,
   218px'lik kapta taşmaya yol açıyordu. */
@media (max-width: 639.98px) {
  .ea-test-form .ea-input {
    min-width: 0;
    flex: 1 1 100%;
  }
  .ea-test-form .ea-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── 9. Uzun kırılamaz dizgiler ───────────────────────────────────
   Türkçe uzun kelimeler ve e-posta/URL gibi kırılamayan dizgiler dar
   ekranda satırı taşırır. Taban kuralda `overflow-wrap: break-word`
   vardı; `break-word` bazı durumlarda YETMEZ (tek uzun token).
   `anywhere` tek kelimelik URL'leri de kırar. */
@media (max-width: 639.98px) {
  .ea-legal p,
  .ea-legal li,
  .ea-legal td,
  .ea-docs-p,
  .ea-docs-lead,
  .ea-docs-step-desc {
    overflow-wrap: anywhere;
  }
}

/* ── 10. Auth katmanı dokunma hedefleri — ÖLÇÜLEN ihlaller ────────
   375px'de ölçüldü:
     `.auth-link` ("Şifremi unuttum?")        99,2 x 15   px
     `.ea-legal-row a`                       ...  x 40,2  px
     `.check-label input[type=checkbox]`      20  x 20    px
     `.ea-hero__snippet`                     335 x 43     px
   Hepsi mobil eşiğin (44px / kutu 24px) altındaydı.

   Masaüstüne dokunulmaması için tamamı `max-width: 1024px` içinde. */
@media (max-width: 1024px) {
  /* "Şifremi unuttum?" 15px yüksekliğindeydi — parmakla isabet
     ettirilemez. Punto büyütülmüyor (tasarım korunur), dokunma
     alanı dolguyla büyütülüyor. */
  .auth-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Yasal bağlantı satırı 40,2px'te kalmıştı; 44px'e tamamlanır. */
  .ea-legal-row a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 4px 0;
  }
  .ea-legal-row {
    gap: 0 18px;
  }

  /* Onay kutusu görsel kutusu en az 24px olmalı (eascess-ui §5).
     20px ölçülmüştü. Satır yüksekliği zaten 44px. */
  .check-label input[type="checkbox"],
  .check-label input[type="radio"] {
    width: 24px;
    height: 24px;
  }

  /* Kod şeridi kaydırılabilir bir bölge (tabindex=0) — 43px'ti. */
  .ea-hero__snippet {
    min-height: 44px;
  }
}

/* ── 11. Panel dokunma hedefleri — ÖLÇÜLEN ihlaller ───────────────
   Panel (.ea-app) 320/375/414/768px'te ölçüldü. Düzen sağlamdı
   (taşma yok, yan menü yatay şeride iniyor, tablo kendi kabında
   kaydırılıyor) ama iki etkileşimli öge eşiğin altındaydı:

     Çıkış düğmesi (_AppLayout, inline padding:4px)   24 x 24  px
     "Pro'ya Geç" / "Planı yükselt" (inline stil)     82 x 19  px

   İkisi de inline stille yazılmıştı; stil buraya taşındı. */

/* Çıkış düğmesi — eski inline stilin birebir karşılığı + hedef boyutu.
   Masaüstünde de 16px ikon görünümü korunur, yalnızca tıklanabilir
   alan büyür; ikon ortalanmış kalır. */
.ea-logout-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-500);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: var(--r-sm);
}
.ea-logout-btn:hover { color: var(--ink-900); background: var(--cream-200); }
.ea-logout-btn:focus-visible { outline: 2px solid var(--indigo-700); outline-offset: 2px; }

/* Kart içi metin bağlantısı (eski inline stilin karşılığı). */
.ea-inline-cta {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--indigo-700);
  text-decoration: none;
}
.ea-inline-cta:hover { text-decoration: underline; text-underline-offset: 3px; }
.ea-inline-cta:focus-visible { outline: 2px solid var(--indigo-700); outline-offset: 2px; }

@media (max-width: 1024px) {
  /* Dokunmalı ekranlarda 44×44. 1024px iPad yatay genişliğidir ve
     dokunmalıdır; 1280/1440 masaüstü olduğu için etkilenmez. */
  .ea-logout-btn {
    min-width: 44px;
    min-height: 44px;
  }

  .ea-inline-cta {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Yan menü öğeleri 901–1024px arasında hâlâ masaüstü kolonundaydı
     ve 39px ölçülüyordu. Dokunmalı genişlikte 44px'e çıkar.
     (≤900px'te zaten 44px — yatay şerit bloğunda tanımlı.) */
  .ea-sidebar .ea-nav-item {
    min-height: 44px;
  }
}

/* ── 12. Yatay kaydırma ipucu — tutarlı görsel dil ────────────────
   Ekran görüntüsü incelemesinde görüldü: belgeler şeridi ve kahraman
   kod satırı kaydırılabiliyor ama KAYDIRILABİLDİĞİ belli olmuyordu —
   kenardan kesilmiş gibi duruyorlardı. Kullanıcı sağda içerik
   olduğunu anlayamaz.

   Sitede bu sorun `.ea-compare__scroll` için zaten çözülmüştü
   (kenar gölgesi, `background-attachment: local/scroll` tekniği).
   Aynı teknik burada tekrar kullanılır ki site tek bir görsel dil
   konuşsun — kaydırılabilir her şerit aynı ipucunu verir.

   Teknik: `local` katman içerikle birlikte kayar (kenar örtüsü),
   `scroll` katman sabit kalır (gölge). Sonuç: gölge YALNIZCA o yönde
   kaydırılacak içerik varken görünür. */

@media (max-width: 900px) {
  .ea-docs-nav {
    background-image:
      linear-gradient(to right, var(--cream-100) 30%, transparent),
      linear-gradient(to left,  var(--cream-100) 30%, transparent),
      radial-gradient(farthest-side at 0    50%, oklch(18% 0.012 260 / 0.14), transparent),
      radial-gradient(farthest-side at 100% 50%, oklch(18% 0.012 260 / 0.14), transparent);
    background-position: 0 0, 100% 0, 0 0, 100% 0;
    background-repeat: no-repeat;
    background-size: 32px 100%, 32px 100%, 12px 100%, 12px 100%;
    background-attachment: local, local, scroll, scroll;
  }

  /* NOT: panel yan menüsü artık yatay şerit DEĞİL, çekmece — kaydırma
     ipucuna ihtiyacı kalmadı. Bkz. "Panel gezinmesi — çekmece". */
}

@media (max-width: 900px) {
  .ea-hero__snippet {
    background-image:
      linear-gradient(to right, white 30%, transparent),
      linear-gradient(to left,  white 30%, transparent),
      radial-gradient(farthest-side at 0    50%, oklch(18% 0.012 260 / 0.16), transparent),
      radial-gradient(farthest-side at 100% 50%, oklch(18% 0.012 260 / 0.16), transparent);
    background-position: 0 0, 100% 0, 0 0, 100% 0;
    background-repeat: no-repeat;
    background-size: 28px 100%, 28px 100%, 12px 100%, 12px 100%;
    background-attachment: local, local, scroll, scroll;
  }
}

/* ── 13. Ortalanmış kahraman metni — mobilde sola yaslanır ────────
   Ekran görüntüsünde görüldü: açıklama mobilde ORTALANMIŞ altı satır
   oluyordu. Ortalanmış uzun gövde metni, her satırın sol kenarı
   kaydığı için satır başını bulmayı zorlaştırır — disleksi ve düşük
   görme için ölçülebilir bir okuma maliyetidir (WCAG 1.4.8 aynı
   gerekçeyle tam yaslamayı yasaklar).

   Başlık ve istatistikler ortalı kalır (kısa, görsel denge taşır);
   YALNIZCA çok satırlı açıklama sola yaslanır. */
@media (max-width: 639.98px) {
  .ea-hero--center .ea-hero__desc {
    text-align: left;
  }
}

/* ── 14. Panel istatistik kartları — "sıkıştırma" hatasının kendisi ─
   EKRAN GÖRÜNTÜSÜYLE yakalandı; sayısal denetim kaçırmıştı, çünkü
   sayfa TAŞMIYORDU: kartlar taşmak yerine EZİLİYORDU.

   `.ea-stats { grid-template-columns: repeat(4, 1fr) }` bütün
   site.css'te TEK bir yerde geçiyordu — hiçbir duyarlı kuralı yoktu.
   390px'lik bir telefonda dört kart yan yana sıkışınca:
     · "Erişilebilirlik Skoru" → "ERİŞİLE SKORU" (kırpık)
     · "2.341"                 → "2.3"           (kırpık; --fs-4xl 49px,
                                                  kart içi ~124px)
     · açıklama metni satır başına TEK KELİME düşüyordu
   `.ea-stat`ın `overflow: hidden`ı taşan metni gizlediği için sayfa
   ölçümü temiz görünüyordu. Kullanıcının "sadece sıkıştırma gibi
   değil" uyarısı tam olarak bu.

   KARAR: 900px altında 2×2. Dört ölçüm birbiriyle karşılaştırmalı
   okunur, o yüzden tek sütuna indirilmedi — 2×2 hem karşılaştırmayı
   korur hem her karta okunabilir genişlik bırakır. */
@media (max-width: 900px) {
  .ea-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
  }

  .ea-stat {
    padding: var(--sp-4);
    min-width: 0;
  }

  /* Etiket ikonu metni daraltmasın, metin sarabilsin. */
  .ea-stat-label {
    align-items: flex-start;
    gap: var(--sp-2);
    letter-spacing: 0.04em;
  }
  .ea-stat-label svg { flex-shrink: 0; margin-top: 2px; }

  /* 49px'lik görüntü puntosu dar kartta rakamı kırpıyordu. */
  .ea-stat-value {
    font-size: var(--fs-2xl);
    margin: var(--sp-2) 0 var(--sp-1);
  }

  /* Dekoratif daire dar kartta metnin altında kalıyor; küçültülür. */
  .ea-stat-accent { width: 64px; height: 64px; right: -16px; bottom: -16px; }
}

/* Çok dar ekran (≤360px): iki sütun bile rakamı sıkıştırıyor.
   Kural merdivenin 1. basamağıdır; dosya sonundaki MERDİVEN
   bölümünde yaşıyor. */

/* ── 15. Deneme süresi bandı — dar ekranda dikey ─────────────────
   Ekran görüntüsünde görüldü: ikon + metin + CTA tek satırda
   sıkışınca metin ikonun etrafında kırpık sarıyor, "Pro'ya Geç"
   cümlenin ORTASINDA kalıyordu — okunuşu bozuyordu. */
.ea-trial-banner {
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: 0;
}
.ea-trial-banner__icon { flex-shrink: 0; }
.ea-trial-banner__text { font-size: var(--fs-sm); flex: 1; }
.ea-trial-banner__cta  { white-space: nowrap; }

@media (max-width: 639.98px) {
  .ea-trial-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
  }
  /* İkon dikey dizilimde başlığın yanında kalsın diye metinle
     birlikte okunur; tek başına satır kaplaması anlamsız olurdu. */
  .ea-trial-banner__icon { display: none; }
  .ea-trial-banner__text { flex: none; }
  .ea-trial-banner__cta  { white-space: normal; }
}

/* ── 16. Panel üst başlığı ────────────────────────────────────────
   `--fs-3xl` (39px) görüntü yazı tipiyle dar ekranda iki satıra
   taşıyor ve nefes alamıyordu. */
@media (max-width: 639.98px) {
  .ea-topbar-title {
    font-size: clamp(26px, 7vw, var(--fs-3xl));
    line-height: 1.1;
  }
}

/* Uzun ortalanmis pazarlama metinleri dar ekranda sola yaslanir.
   Gerekce bolum 13 ile ayni: ortalanmis cok satirli govde metninde her
   satirin sol kenari kayar, goz satir basini her seferinde yeniden
   arar. Baslik ortali kalir; yalnizca coksatirli aciklama sola yaslanir.
   Olcum: Fiyatlandirma sayfasinda bu paragraf 390px'te 8 SATIR. */
@media (max-width: 639.98px) {
  .ea-mkt-subtitle {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
  }
}

/* ================================================================
   KIRILMA NOKTASI MERDİVENİ — tek toplanma yeri

   Değerler :root'taki --bp-1 … --bp-9 merdiveninden gelir (dosyanın
   başı). Merdivenin ALTI YENİ basamağı burada yaşar; eski üç basamak
   (4=640, 6=900, 7=1024) kendi bölümlerinde kaldı çünkü davranışları
   değişmedi — yeni basamaklar onların ARASINA giriyor.

   Her yeni blok İKİ YANDAN kapalı bir banttır:
     @media (min-width: A) and (max-width: B)
   Bunun iki nedeni var:
     1) Bant, eski bir kuralın sonucunu yalnızca O ARALIKTA yumuşatır;
        aralığın dışındaki hiçbir genişlikte hiçbir şey değişmez.
     2) En geniş bant 1199.98px'te biter → 1280px ve 1440px masaüstü
        görünümü bu bölümden ETKİLENMEZ. (Ölçülebilir güvence: bu
        bölümdeki hiçbir @media 1200px ve üstünde eşleşmez.)

   Kural: yeni @media yazarken sayı uydurulmaz, merdivenden seçilir.
   ================================================================ */

/* ── Basamak 1 — 360px · en dar telefon ───────────────────────────
   İki sütunlu istatistik ızgarası 360px'in altında rakamı sıkıştırıyor
   (ölçülen: 49px punto, ~124px kart). Tek sütuna iner.
   (Eski yeri dosya sonuydu; merdiven tek yerde toplansın diye taşındı.) */
@media (max-width: 360px) {
  .ea-stats { grid-template-columns: minmax(0, 1fr); }
}

/* ── Basamak 2 — 430px · büyük telefon ────────────────────────────
   Kahraman bölümündeki iki buton 430px'in ALTINDA yan yana sığmıyor
   (ölçülen: 2 × ~168px + 12px boşluk = 348px > 320px iç genişlik);
   dikey dizilir ve tam genişlik alır. 430px ve üstünde yan yana
   kalırlar — dikey dizilim gereksiz yere yer yiyordu.

   Bu kural daha önce merdiven DIŞI bir değerde (479.98px) duruyordu;
   eşik 430px'e çekilerek merdivene alındı. */
@media (max-width: 429.98px) {
  .ea-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .ea-hero__actions > .ea-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── Basamak 3 — 520px · telefon yatay / küçük tablet ─────────────
   Footer 900px'te dört sütundan ikiye, 640px'te ikiden BİRE iniyordu.
   520–640 arasında iki bağlantı sütunu rahatça sığıyor (ölçülen:
   sütun başına ~240px); tek sütuna inme eşiği 520px'e indirilir.
   Sonuç: 4 → 2 → 2 → 1 yerine sert 4 → 2 → 1 sıçraması yok. */
@media (min-width: 520px) and (max-width: 639.98px) {
  .ea-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-8);
  }
  .ea-footer__grid > :first-child { grid-column: 1 / -1; }
}

/* ── Basamak 5 — 768px · tablet dikey (iPad) ──────────────────────
   900px'in altında kart ızgaraları TEK sütuna iniyordu: 768px'lik bir
   iPad'de dört fiyat kartı dört ekran boyu uzunluğunda bir şeride
   dönüşüyordu. 768–900 arasında iki sütunda durur.

   Kenarlıklı tek yüzey olan ızgaralar (.ea-levels, .ea-pour-grid,
   .ea-wcag-check-grid) BİLEREK dışarıda: hücre ayraçları satır/sütun
   sayısına göre kurgulandığı için ara basamakta ayraç artığı bırakır.
   Onların kademeli adımı basamak 9'da dolguyla veriliyor. */
/* Üst sınır 900px DAHİL: eski çapa kuralı `max-width: 900px` yazıyor,
   yani 900'ü kendi içine alıyor. Bant 899.98'de bitirildiğinde tam
   900px'te tek sütuna düşüp 901'de yeniden iki sütuna çıkıyordu —
   ölçülen, bir piksellik bir sıçrama. Bantların sınırları çapa
   kuralıyla AYNI kapsamda olmalı. */
@media (min-width: 768px) and (max-width: 900px) {
  .ea-pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ea-yearly-grid  { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Özellik ızgarası iki sütuna döner. Oluk 56px'ten 32px'e iner —
     dar bantta 56px'lik iç boşluk metne yer bırakmıyordu. */
  .ea-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ea-feature-item:nth-child(odd)  { padding-right: var(--sp-8); }
  .ea-feature-item:nth-child(even) {
    padding-left: var(--sp-8);
    border-left: 1px solid var(--cream-300);
  }
}

/* ── Basamak 8 — 1120px · küçük dizüstü ───────────────────────────
   Dört fiyat kartı 1025–1120 arasında sütun başına ~250px'e sıkışıyor:
   plan adı ile fiyat aynı satıra girmiyor. 2×2 düzeni bu banda da
   uzatılır; dört sütun yalnızca 1120px ve üstünde kalır.
   Sonuç: 4 → 2×2 → 1 (eskiden 1024'te ani 4 → 2 → 1). */
@media (min-width: 1025px) and (max-width: 1119.98px) {
  .ea-pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Basamak 9 — 1200px · geniş dizüstü eşiği ─────────────────────
   Düzen çökmeden ÖNCE dolgu daralır: kademeli geçişin son halkası.
   Kart sayısı değişmediği için kullanıcı "bir şey yerinden oynadı"
   hissi yaşamaz, yalnızca içerik nefes alır. */

/* Dört sütun hâlâ ayakta ama en dar hâlinde (1120–1200). */
@media (min-width: 1120px) and (max-width: 1199.98px) {
  .ea-pricing-card { padding: var(--sp-6) var(--sp-5); }
}

/* Üç hücreli uyum seviyesi yüzeyi en dar hâlinde (901–1200):
   42px/36px dolgu hücreye metin için yer bırakmıyordu. */
@media (min-width: 901px) and (max-width: 1199.98px) {
  .ea-level { padding: var(--sp-8) var(--sp-6); }
}

/* ── Bağlama duyarlı yardım metni (.ea-help) — YALNIZCA MOBİL ─────
   Kullanıcı hangi bölümdeyse yalnızca O bölümün açıklaması görünür;
   konuların tamamını listeleyen bir yığın hiçbir sayfada basılmaz.
   Konu LİSTESİ yalnızca Belgeler sayfasındaki gezinme şeridinde kalır.

   Masaüstünde `display: none`: görsel olarak da, ekran okuyucu için de
   yok sayılır. Böylece masaüstü davranışı hiç değişmez — panelin tüm
   görünür kuralları merdivenin 6. basamağının (900px) altındadır.

   Konum: sayfa başlığının hemen ALTI. Üst boşluk negatif çünkü
   .ea-topbar zaten alt boşluk bırakıyor; açıklama başlıkla aynı blokta
   okunmalı, ayrı bir kart gibi durmamalı.
   Ayrıntı: Views/Shared/_HelpPanel.cshtml */
.ea-help { display: none; }

@media (max-width: 900px) {
  .ea-help {
    display: block;
    margin: calc(-1 * var(--sp-3)) 0 var(--sp-5);
    padding: var(--sp-3) var(--sp-4);
    background: var(--cream-100);
    border-left: 3px solid var(--teal-500);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
  }

  .ea-help__body {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.6;
    /* --ink-700: krem yüzeyde 10,3:1 — AA'nın 4,5:1 eşiğinin çok üstünde. */
    color: var(--ink-700);
    /* Uzun Türkçe kelimeler 320px'te satırı taşırmasın. */
    overflow-wrap: anywhere;
  }

  /* Belgeler sayfasında panel, konu şeridi ile içerik arasına girer;
     şeridin alt kenarlığıyla çakışmasın diye üstten nefes alır. */
  .ea-docs-layout > .ea-help { margin-top: var(--sp-3); }
}

/* ================================================================
   Panel · Dashboard düzeni (.ea-dash-split, .ea-plan-strip)

   KÖK NEDEN — bu düzenler view'da INLINE STYLE ile yazılmıştı:
     <div style="display:grid;grid-template-columns:1.7fr 1fr;gap:20px">
   Inline stil, `!important` dışında HER @media kuralını ezer. Bu yüzden
   panelin mobil çalışması yapılırken bu ızgara hiç etkilenmedi ve
   393px'lik bir telefonda İKİ SÜTUN kalmaya devam etti:

     ölçülen 393px  → "214.703px 126.297px"
     "Widget Ayarları" kartı            126 px
     "Tümünü Gör" düğmesinin sağ kenarı 259 px (kart 214 px)

   Sayfa yatay KAYMIYORDU, çünkü kartlarda inline `overflow:hidden`
   var: taşan içerik kaydırılabilir olmak yerine KIRPILIYORDU. Yani
   sorun "gizli bir taşma" değil, gizlenmiş bir taşmaydı — kullanıcının
   "içerik sağdan kesiliyor" dediği şey tam olarak bu.

   ÇÖZÜM inline stili kaldırıp sınıfa taşımak. Sınıfların masaüstü
   değerleri eski inline değerlerin BİREBİR aynısıdır; mobil davranış
   yalnızca merdivenin 6. (900px) ve 4. (640px) basamaklarında eklenir.
   `overflow-x: hidden` ile üstü ÖRTÜLMEDİ; taşmanın kaynağı kaldırıldı.
   ================================================================ */

/* Masaüstü: eski inline değerlerin birebir karşılığı. */
.ea-dash-split {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 20px;
}

.ea-plan-strip {
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 0;
}
.ea-plan-strip__group { display: flex; align-items: center; gap: 8px; }
.ea-plan-strip__group:first-child { gap: 12px; }
.ea-plan-strip__meter { flex: 1; min-width: 200px; }
.ea-plan-strip__bar {
  flex: 1;
  height: 6px;
  background: var(--cream-300);
  border-radius: 999px;
  overflow: hidden;
  max-width: 160px;
}

.ea-card-head-row {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--cream-300);
}
.ea-card-head-row--tight { padding: 16px 20px; }

/* ── Merdiven basamak 6 (900px): ızgara tek sütuna iner ─────────── */
@media (max-width: 900px) {
  .ea-dash-split { grid-template-columns: minmax(0, 1fr); }

  /* `minmax(0, 1fr)` izin verse de ızgara çocuğunun kendi min-content
     tabanı vardır; tablo gibi geniş içerik kolonu yine şişirebilir. */
  .ea-dash-split > * { min-width: 0; }

  /* Başlık metni düğmeyi dışarı itmesin. */
  .ea-card-head-row__text { min-width: 0; }
  .ea-card-title,
  .ea-card-sub { overflow-wrap: anywhere; }
}

/* ── Merdiven basamak 4 (640px): başlık satırı ve şerit dikeye ──── */
@media (max-width: 639.98px) {
  /* "Tümünü Gör" / "Tam Ayarlar" kartın dışına taşıyordu; alt satıra
     iner ve tam genişlik alır. */
  .ea-card-head-row {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--sp-3);
  }
  .ea-card-head-row > .ea-btn {
    width: 100%;
    justify-content: center;
  }

  /* Plan/kota şeridi: dış kap sarıyordu ama İÇ satır sarmıyordu, bu
     yüzden "YZ Tarama … 0 / 500" kart sınırını aşıyordu. */
  .ea-plan-strip {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-3);
    padding: var(--sp-4);
  }
  .ea-plan-strip__group { flex-wrap: wrap; }
  .ea-plan-strip__meter { min-width: 0; width: 100%; }
  .ea-plan-strip__bar { max-width: none; }
}

/* ── Dokunma hedefleri (merdiven basamak 7 / 1024px) ─────────────
   Panel içi ikincil düğmeler (`padding:8px 12px`) ~34px ölçülüyordu.
   1024px ve altı dokunmalı kabul edilir (iPad yatay dâhil); 1280/1440
   masaüstü bu kuralın dışındadır. */
@media (max-width: 1024px) {
  .ea-app .ea-btn { min-height: 44px; }
}

/* ── Dashboard tema rengi seçicisi (.dash-swatch) ─────────────────
   Renk kutucukları view'da `width:20px;height:20px` inline yazılmıştı;
   ölçülen dokunma hedefi 20×20 px, eşiğin (44×44) çok altında. Inline
   stil @media ile ezilemediği için ölçüler sınıfa taşındı.

   Masaüstü değerleri eski inline değerlerin BİREBİR aynısı. Mobilde
   kutucuk 44px'e çıkar ve aralık 4px'ten 8px'e genişler (eascess-ui §5:
   hedefler arası en az 8px) — 44px'lik hedefler 4px aralıkla komşusuna
   değer, parmak yanlış rengi seçer. */
.dash-swatches { display: flex; gap: 4px; flex-wrap: wrap; }

.dash-swatch {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 2px solid white;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 0 1px var(--cream-300);
  transition: transform 0.15s;
}
.dash-swatch:focus-visible { outline: 2px solid var(--indigo-700); outline-offset: 2px; }

@media (max-width: 1024px) {
  .dash-swatches { gap: var(--sp-2); }
  .dash-swatch { width: 44px; height: 44px; }
}