@import url("tokens.css");

/* Global taban. Bölüm/bileşene özgü her şey ilgili .razor.css dosyasında (CSS isolation). */

html {
  scroll-behavior: smooth;
  /* overflow-x yalnızca html üzerinde; body'ye overflow VERİLMEZ —
     aksi halde window scroll event'i kesilir ve scroll-driven animasyonlar durur. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--ue-ink);
  color: var(--ue-text);
  font-family: var(--ue-font-body);
  -webkit-font-smoothing: antialiased;
}

section[id] { scroll-margin-top: var(--ue-nav-h); }
#top { scroll-margin-top: 0; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--ue-accent); }
::selection { background: var(--ue-accent); color: var(--ue-ink); }
input, textarea, button, select { font-family: inherit; }

:focus-visible {
  outline: 2px solid var(--ue-accent);
  outline-offset: 3px;
}

/* Blazor'un <FocusOnNavigate> bileşeni her gezinti sonrası sayfanın h1'ine
   programatik olarak odaklanır (ekran okuyucu kullanıcısı yeni sayfada nerede
   olduğunu bilsin diye). Bu odak halkası başlığın çevresinde görünür bir çerçeve
   bırakıyordu. Başlıklar tıklanabilir değil ve klavyeyle Tab'lanamaz
   (tabindex="-1"), yani halkayı gizlemek klavye kullanıcısından bilgi
   saklamıyor — odak yine oraya taşınıyor, yalnızca çizgi çizilmiyor. */
h1:focus-visible,
h1:focus,
[tabindex="-1"]:focus-visible,
[tabindex="-1"]:focus {
  outline: none;
}

img, video { max-width: 100%; }

/* --- Paylaşılan tipografi yardımcıları --- */

/* NOT: .ue-upper YALNIZCA İngilizce düğümlerde kullanılır.
   text-transform:uppercase Türkçe'de i→I dönüşümünü bozar (İ olmalı).
   Türkçe başlıklar içerikte elle büyük harf yazılır: "ETKİNLİK BİTER." */
.ue-upper { text-transform: uppercase; }

.ue-eyebrow {
  font-size: 11px;
  letter-spacing: .28em;
  color: var(--ue-text-3);
}

.ue-display {
  font-family: var(--ue-font-display);
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: .92;
  margin: 0;
}

.ue-accent { color: var(--ue-accent); }

.ue-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border-radius: var(--ue-radius-pill);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .12em;
  padding: 17px 28px;
  transition: background var(--ue-dur-color) ease,
              color var(--ue-dur-color) ease,
              border-color var(--ue-dur-color) ease;
}

.ue-pill--solid { background: var(--ue-accent); color: var(--ue-ink); }
.ue-pill--solid:hover { background: var(--ue-text); color: var(--ue-ink); }

.ue-pill--ghost { border: 1px solid rgba(242, 240, 234, .28); color: var(--ue-text); }
.ue-pill--ghost:hover {
  border-color: var(--ue-text);
  background: rgba(242, 240, 234, .06);
  color: var(--ue-text);
}

/* --- Neon yazı (yeniden kullanılabilir) ---
   Metin harf harf <span>'lere bölünür (bkz. Shared/NeonText.razor); her harf
   kendi yanma gecikmesini (--on) ve titreme ritmini (--fd/--fdur) taşır.
   Işık hâlesi em cinsinden, böylece punto küçülünce ışık da küçülür. */

.ue-neon {
  display: block;
  --neon-glow: 0 0 .02em rgba(255, 255, 255, .9),
               0 0 .06em rgba(255, 255, 255, .90),
               0 0 .13em rgba(255, 255, 255, .50),
               0 0 .24em rgba(255, 255, 255, .1);
  --neon-dim: rgba(242, 240, 234, .22);
}

.ue-neon--accent {
  color: var(--ue-accent);
  --neon-glow: 0 0 .02em rgba(255, 255, 255, .9),
               0 0 .06em rgba(223, 255, 75, .90),
               0 0 .13em rgba(223, 255, 75, .50),
               0 0 .24em rgba(223, 255, 75, .1);
  --neon-dim: rgba(223, 255, 75, .2);
}

/* Kelime bütünlüğü: satır sonu harf ortasında değil kelime arasında oluşsun.
   Aradaki boşluk margin ile veriliyor — Razor etiket arası tek boşluğu kırpar. */
.ue-neon-word {
  display: inline-block;
  white-space: nowrap;
}

.ue-neon-word:not(:last-child) { margin-right: .26em; }

.ue-neon-ch {
  display: inline-block;
  animation: ue-neon-strike .5s var(--on, 0ms) both;
}

/* Yalnızca bir kısım harf sürekli titrer — gerçek bozuk tabelalarda da öyle.
   Titreme, harfin kendi yanmasından SONRA başlar; yoksa ilk (ışıklı) karesi
   yanma animasyonunu ezer ve harf sırası gelmeden yanmış görünür. */
.ue-neon-ch--flicker {
  animation-name: ue-neon-strike, ue-neon-flicker;
  animation-duration: .5s, var(--fdur, 5s);
  animation-delay: var(--on, 0ms), calc(var(--on, 0ms) + 520ms + var(--fd, 0ms));
  animation-fill-mode: both, none;
  animation-iteration-count: 1, infinite;
  animation-timing-function: ease, linear;
}

@keyframes ue-neon-strike {
  0%   { color: var(--neon-dim); text-shadow: none; }
  45%  { color: var(--neon-dim); text-shadow: none; }
  55%  { color: inherit; text-shadow: var(--neon-glow); }
  62%  { color: var(--neon-dim); text-shadow: none; }
  100% { color: inherit; text-shadow: var(--neon-glow); }
}

@keyframes ue-neon-flicker {
  0%, 26%   { color: inherit; text-shadow: var(--neon-glow); }
  27%, 30%  { color: var(--neon-dim); text-shadow: none; }
  31%, 33%  { color: inherit; text-shadow: var(--neon-glow); }
  34%, 36%  { color: var(--neon-dim); text-shadow: none; }
  37%, 64%  { color: inherit; text-shadow: var(--neon-glow); }
  65%, 68%  { color: var(--neon-dim); text-shadow: none; }
  69%, 87%  { color: inherit; text-shadow: var(--neon-glow); }
  88%, 90%  { color: var(--neon-dim); text-shadow: none; }
  91%, 100% { color: inherit; text-shadow: var(--neon-glow); }
}

/* --- TV parazit efekti (yeniden kullanılabilir) ---
   Kullanımı: elemana .ue-glitch + data-text="<metin>", metni .ue-glitch-copy
   içine al. Klon katmanlar ::before/::after ile kurulur ve hover'da yatay
   dilimler halinde ayrışır — sinyalini kaybeden bir tüplü ekran gibi.
   Klonlar sözde-eleman olduğu için ekran okuyucuya ulaşmaz.

   Renkler --glitch-a / --glitch-b ile ayarlanır; dolgulu düğmelerde zemin
   açık olduğu için koyu bir çift kullanılır. */

.ue-glitch {
  position: relative;
  --glitch-a: var(--ue-accent);
  --glitch-b: #FF3B6B;
}

.ue-glitch-copy { position: relative; z-index: 2; }

.ue-glitch::before,
.ue-glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  white-space: nowrap;
}

.ue-glitch::before { color: var(--glitch-a); }
.ue-glitch::after { color: var(--glitch-b); }

.ue-glitch:hover::before,
.ue-glitch:focus-visible::before,
.ue-glitch-host:hover .ue-glitch::before,
.ue-glitch-host:focus-visible .ue-glitch::before {
  opacity: .9;
  animation: ue-tv-a .42s steps(2, end) 1;
}

.ue-glitch:hover::after,
.ue-glitch:focus-visible::after,
.ue-glitch-host:hover .ue-glitch::after,
.ue-glitch-host:focus-visible .ue-glitch::after {
  opacity: .9;
  animation: ue-tv-b .42s steps(2, end) 1;
}

.ue-glitch:hover .ue-glitch-copy,
.ue-glitch:focus-visible .ue-glitch-copy,
.ue-glitch-host:hover .ue-glitch-copy,
.ue-glitch-host:focus-visible .ue-glitch-copy {
  animation: ue-tv-jitter .42s steps(3, end) 1;
}

@keyframes ue-tv-a {
  0%   { transform: translate(0); clip-path: inset(0 0 0 0); }
  15%  { transform: translate(-3px, -1px); clip-path: inset(0 0 62% 0); }
  30%  { transform: translate(2px, 1px);   clip-path: inset(55% 0 18% 0); }
  45%  { transform: translate(-2px, 0);    clip-path: inset(20% 0 45% 0); }
  60%  { transform: translate(3px, -1px);  clip-path: inset(70% 0 0 0); }
  75%  { transform: translate(-1px, 1px);  clip-path: inset(35% 0 35% 0); }
  100% { transform: translate(0); clip-path: inset(0 0 0 0); }
}

@keyframes ue-tv-b {
  0%   { transform: translate(0); clip-path: inset(0 0 0 0); }
  15%  { transform: translate(3px, 1px);   clip-path: inset(45% 0 20% 0); }
  30%  { transform: translate(-2px, -1px); clip-path: inset(0 0 70% 0); }
  45%  { transform: translate(2px, 1px);   clip-path: inset(65% 0 0 0); }
  60%  { transform: translate(-3px, 0);    clip-path: inset(25% 0 40% 0); }
  75%  { transform: translate(1px, -1px);  clip-path: inset(10% 0 60% 0); }
  100% { transform: translate(0); clip-path: inset(0 0 0 0); }
}

@keyframes ue-tv-jitter {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(1px, -1px); }
  40% { transform: translate(-1px, 0); }
  60% { transform: translate(1px, 1px); }
  80% { transform: translate(-1px, -1px); }
}

/* Dolgulu düğme: zemin asit yeşili, klonlar koyu olmalı ki görünsünler. */
.ue-pill--solid .ue-glitch,
.ue-pill--solid.ue-glitch {
  --glitch-a: #0A0A0B;
  --glitch-b: #FF3B6B;
}

/* Giriş animasyonu — bölümler ortak kullanır */
@keyframes ue-rise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ue-rise { animation: ue-rise var(--ue-dur-enter) var(--ue-ease) both; }

/* Ekran okuyucu için */
.ue-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}