/* ============================================================
   EkstraLazım — Marka Token'ları + Ortak Bileşenler
   Kaynak: docs/brand.md (tek gerçek). Renk/font değişikliği ÖNCE
   brand.md'de kararlaştırılır, sonra buraya işlenir.
   ============================================================ */

:root{
  /* Renkler */
  --el-gece:#161210;        /* zemin — gece barı espresso siyahı */
  --el-gece-2:#1f1915;      /* kart zemini */
  --el-tungsten:#ffb03a;    /* ANA MARKA RENGİ — tungsten ampul amberi */
  --el-neon:#ff5a36;        /* ikincil aksan — neon tabela turuncusu */
  --el-krem:#f3ece2;        /* koyu zeminde metin — sıcak beyaz */
  --el-gri:#a89a8c;         /* ikincil metin */
  --el-fis:#f7f1e3;         /* adisyon kağıdı — form/kart yüzeyi */
  --el-fis-ink:#241d18;     /* kağıt üstü mürekkep */
  --el-onay:#3ecf8e;        /* başarı / onay damgası */

  /* Tipografi */
  --el-font-display:'Anton',sans-serif;          /* başlık — DAİMA UPPERCASE */
  --el-font-body:'IBM Plex Sans',sans-serif;     /* gövde */
  --el-font-mono:'IBM Plex Mono',monospace;      /* fiş/veri/etiket/buton */

  --el-radius:14px;
  --el-radius-fis:4px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--el-gece);
  color:var(--el-krem);
  font-family:var(--el-font-body);
  line-height:1.55;
  overflow-x:hidden;
}
/* atmosfer: loş tungsten ışığı + grain */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(255,176,58,.14), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(255,90,54,.07), transparent 55%),
    var(--el-gece);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;opacity:.05;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}
a{color:var(--el-tungsten)}
.wrap{max-width:680px;margin:0 auto;padding:0 20px}

/* Wordmark */
.logo{font-family:var(--el-font-display);font-size:1.35rem;letter-spacing:.02em;text-transform:uppercase;color:var(--el-krem);text-decoration:none}
.logo em{font-style:normal;color:var(--el-tungsten)}

/* Başlıklar */
h1,h2,h3.display{font-family:var(--el-font-display);text-transform:uppercase;line-height:1.05}
h2{font-size:clamp(1.9rem,7vw,2.8rem);margin-bottom:28px}
.kicker{
  font-family:var(--el-font-mono);font-size:.75rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--el-neon);margin-bottom:10px;
}

/* Butonlar */
.btn{
  display:inline-block;font-family:var(--el-font-mono);font-weight:700;
  font-size:.95rem;padding:16px 26px;border-radius:var(--el-radius);
  text-decoration:none;border:0;cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease;
}
.btn-primary{background:var(--el-tungsten);color:var(--el-fis-ink);box-shadow:0 6px 24px rgba(255,176,58,.25)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(255,176,58,.35)}
.btn-ghost{background:transparent;color:var(--el-krem);border:1px solid rgba(243,236,226,.25)}
.btn-ghost:hover{border-color:var(--el-tungsten);color:var(--el-tungsten)}

/* Chip (çoklu seçim) */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  font-family:var(--el-font-mono);font-size:.8rem;font-weight:500;
  border:1.5px solid var(--el-fis-ink);border-radius:999px;
  padding:8px 14px;background:transparent;color:var(--el-fis-ink);cursor:pointer;
  transition:all .12s ease;user-select:none;
}
.chip[aria-pressed=true]{background:var(--el-fis-ink);color:var(--el-fis)}

/* Adisyon fişi kartı (marka imzası — form/onay/rapor hep bu kart) */
.adisyon{
  background:var(--el-fis);color:var(--el-fis-ink);
  border-radius:var(--el-radius-fis);position:relative;
  font-family:var(--el-font-mono);
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  max-width:480px;margin:0 auto;
}
.adisyon::before,.adisyon::after{
  content:"";position:absolute;left:0;right:0;height:10px;
  background-image:radial-gradient(circle at 8px -2px, transparent 7px, var(--el-fis) 8px);
  background-size:16px 10px;background-repeat:repeat-x;
}
.adisyon::before{top:-9px}
.adisyon::after{bottom:-9px;transform:scaleY(-1)}

/* Onay damgası */
.stamp{
  display:inline-block;font-family:var(--el-font-display);font-size:2rem;text-transform:uppercase;
  color:var(--el-onay);border:4px solid var(--el-onay);border-radius:8px;padding:10px 22px;
  transform:rotate(-6deg);animation:el-stamp .45s cubic-bezier(.2,2.2,.4,1) both;
}
@keyframes el-stamp{from{opacity:0;transform:rotate(-6deg) scale(2.2)}to{opacity:1;transform:rotate(-6deg) scale(1)}}

/* Marquee şeridi */
.marquee{
  border-top:1px solid rgba(255,176,58,.25);border-bottom:1px solid rgba(255,176,58,.25);
  padding:13px 0;overflow:hidden;white-space:nowrap;
  background:rgba(255,176,58,.05);
}
.marquee-track{display:inline-block;animation:el-scroll 28s linear infinite}
.marquee span{
  font-family:var(--el-font-display);font-size:1.05rem;text-transform:uppercase;
  letter-spacing:.08em;color:var(--el-tungsten);margin-right:14px;
}
.marquee span::after{content:"•";margin-left:14px;color:var(--el-neon)}
@keyframes el-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none}
  .stamp{animation:none}
}