/* ==========================================================================
   RolexCasino — Midnight Blue
   Performans notu: animasyonlar yalnızca transform/opacity kullanır,
   blur filtresi yok; parlama efektleri hazır gradyanlarla çizilir.
   ========================================================================== */

:root {
  --bg-0: #04060c;
  --bg-1: #080d1a;
  --bg-2: #0c1426;
  --bg-3: #121d36;
  --bg-4: #1a2847;
  --glass: rgba(12, 20, 38, .82);
  --line: rgba(120, 150, 220, .09);
  --line-strong: rgba(120, 150, 220, .16);

  --text: #e8eeff;
  --text-dim: #98a6c8;
  --text-mute: #5f6f96;

  --accent: #2f7bff;
  --accent-hi: #6aa8ff;
  --cyan: #22d3ee;
  --accent-grad: linear-gradient(135deg, #1a5cff 0%, #2f7bff 40%, #22b8ee 100%);
  --accent-soft: rgba(var(--accent-rgb), .14);
  /* aynı renklerin saydam kullanımları: panelden tema değişince hepsi birlikte döner */
  --accent-rgb: 47, 123, 255;
  --accent-hi-rgb: 106, 168, 255;
  --cyan-rgb: 34, 211, 238;
  --aurora-a: 26, 77, 255;
  --aurora-b: 8, 145, 178;
  --aurora-c: 76, 29, 149;

  --green: #22c55e;
  --green-hi: #4ade80;
  --red: #ff4d6d;
  --violet: #8b5cf6;
  --gold: #f5c451;

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;

  --shadow: 0 14px 40px -12px rgba(0, 0, 0, .7);
  --glow: 0 0 0 1px rgba(var(--accent-rgb), .35), 0 10px 30px -8px rgba(var(--accent-rgb), .55);

  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Outfit', var(--font);
  --ease: cubic-bezier(.22, .8, .24, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  --topbar-h: 64px;
  --tabnav-h: 50px;
  --header-h: calc(var(--topbar-h) + var(--tabnav-h));
  --sidebar-w: 250px;
  --sidebar-w-mini: 76px;
  --gutter: clamp(16px, 2.4vw, 30px);
  --content-max: 1400px;
}

*, *::before, *::after { box-sizing: border-box; }
/* scrollbar-gutter: modal açılıp kaydırma kilitlenince sayfa yana kaymasın */
html { -webkit-text-size-adjust: 100%; background: var(--bg-0); scroll-padding-top: calc(var(--header-h) + 16px); scrollbar-gutter: stable; }
body { margin: 0; min-height: 100vh; font: 400 15px/1.5 var(--font); color: var(--text); background: var(--bg-0); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
/* Modal açıkken sayfa kilitlenir. Yalnızca overflow:hidden YETMİYOR: sayfayı kaydıran
   öğe <html>, body değil — arka plan pencere açıkken kayıyor, pencere kapanınca da
   başka bir yerde kalıyordun (telefonda "kayma" olarak hissediliyordu). position:fixed
   kaydırmayı gerçekten durdurur; app.js saklanan konumu `top` ile korur ve kapanışta
   aynı yere döndürür. Yan kayma olmasın diye html'de scrollbar-gutter: stable var. */
body.is-locked { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p, dl, dd { margin: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; line-height: 1.12; }
table { border-collapse: collapse; width: 100%; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; border-radius: 6px; }
::selection { background: rgba(var(--accent-rgb), .4); }
* { scrollbar-width: thin; scrollbar-color: var(--bg-4) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--bg-4); border-radius: 8px; }

.ico { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.skip-link { position: fixed; top: -80px; left: 16px; z-index: 999; padding: 10px 16px; border-radius: var(--radius-sm); background: var(--accent); color: #fff; font-weight: 700; }
.skip-link:focus { top: 12px; }
.muted { color: var(--text-mute); font-size: 13px; }

.text-accent {
  background: linear-gradient(90deg, var(--accent-hi), var(--cyan), var(--accent-hi));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Yazı gradyanının kayması (background-position) GPU'da çalışamaz: durmadan dönerken sayfadaki
     bütün animasyonları her karede ana iş parçacığına çekiyordu. Görünüm açılınca iki tur parlar,
     üzerine gelince yeniden. */
  animation: shimmer-text 6s linear 2;
}
.text-accent:hover { animation-name: shimmer-text-again; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-hi); }
.eyebrow .ico { width: 16px; height: 16px; }
.eyebrow__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }

/* dönen ışıklı çerçeve — GPU'da dönen bir katman, boyama yok */
.glow-border { position: relative; isolation: isolate; overflow: hidden; }
.glow-border::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -2;
  width: 200%;
  aspect-ratio: 1;
  translate: -50% -50%;
  background: conic-gradient(transparent 0 60%, var(--accent) 75%, var(--cyan) 85%, transparent 100%);
  animation: spin 6s linear infinite;
}
.glow-border::after { content: ''; position: absolute; inset: 1px; z-index: -1; border-radius: inherit; background: var(--gb-bg, var(--bg-1)); }

/* ---------- butonlar ---------- */
.btn {
  --h: 40px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--h);
  padding: 0 18px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: transform .2s var(--ease), box-shadow .25s var(--ease), background-color .2s, border-color .2s;
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .55; cursor: default; }
.btn .ico { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.btn:hover .ico { transform: translateX(3px); }
.btn--sm { --h: 34px; padding: 0 14px; font-size: 13px; }
.btn--lg { --h: 48px; padding: 0 24px; font-size: 15px; border-radius: 12px; }
.btn--block { display: flex; width: 100%; }

.btn--primary { color: #fff; background: var(--accent-grad); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 8px 22px -10px rgba(var(--accent-rgb), .9); }
.btn--primary::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .45) 48%, transparent 64%); transform: translateX(-120%); transition: transform .7s var(--ease); }
.btn--primary:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 0 0 1px rgba(var(--accent-hi-rgb), .5), 0 12px 30px -8px rgba(var(--accent-rgb), .9); }
.btn--primary:hover::after { transform: translateX(120%); }
.btn--ghost, .btn--line { background: var(--bg-3); border: 1px solid var(--line-strong); }
.btn--ghost:hover, .btn--line:hover { background: var(--bg-4); border-color: rgba(var(--accent-hi-rgb), .3); }
.btn--glass { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); }
.btn--glass:hover { background: rgba(255, 255, 255, .13); }
.btn--light { background: #fff; color: #0b1220; }

/* gönderim durumları: bekliyor → tamam */
.btn__label { display: inline-flex; align-items: center; gap: 8px; transition: opacity .2s, transform .3s var(--ease); }
.btn__spinner { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .3); border-top-color: #fff; opacity: 0; transform: scale(.4); transition: opacity .2s, transform .35s var(--ease-spring); }
.btn__done { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; }
.btn--state::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(135deg, #15973f, #22c55e); opacity: 0; transition: opacity .3s; }
.btn.is-busy, .btn.is-done { cursor: progress; }
.btn.is-busy:disabled, .btn.is-done:disabled { opacity: 1; }
.btn.is-busy .btn__label, .btn.is-done .btn__label { opacity: 0; transform: translateY(-10px); }
.btn.is-busy .btn__spinner { opacity: 1; transform: none; animation: spin .7s linear infinite; }
.btn.is-done::before { opacity: 1; }
.btn.is-done { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 10px 26px -10px rgba(34, 197, 94, .9); }
.btn.is-done .btn__done { animation: draw .45s var(--ease) .1s forwards; }

.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; color: var(--text-dim); transition: background-color .2s, color .2s; }
.icon-btn:hover { background: var(--bg-3); color: var(--text); }

.rail-btn { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--bg-3); border: 1px solid var(--line); color: var(--text-dim); transition: background-color .2s, color .2s, border-color .2s; }
.rail-btn:hover { background: var(--accent-soft); color: var(--accent-hi); border-color: rgba(var(--accent-hi-rgb), .3); }
.rail-btn .ico { width: 18px; height: 18px; }

.pill { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 20px; font-size: 10px; font-weight: 800; letter-spacing: .04em; }
.pill--accent { background: var(--accent-soft); color: var(--accent-hi); }
.pill--live { background: rgba(255, 77, 109, .15); color: #ff8aa0; }

.dot-live, .live-dot { display: inline-block; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: blink 1.4s ease-in-out infinite; }
.count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--red); color: #fff; font: 800 11px/1 var(--font); font-style: normal; }

/* ---------- sekme grupları & çipler ---------- */
.tabs, .seg { display: inline-flex; gap: 4px; max-width: 100%; padding: 4px; border-radius: 12px; background: var(--bg-1); border: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs__btn, .seg button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 9px; font-size: 13.5px; font-weight: 700; color: var(--text-dim); white-space: nowrap; transition: background-color .2s, color .2s; }
.tabs__btn:hover, .seg button:hover { color: var(--text); }
.tabs__btn.is-active, .seg button.is-active { background: var(--bg-3); color: var(--text); box-shadow: inset 0 0 0 1px rgba(var(--accent-hi-rgb), .25); }
.seg { display: flex; }
.seg button { flex: 1; }

/* aktif arka plan butonlar arasında kayar (iki seçenekli) */
.seg--glide { position: relative; }
.seg--glide button { position: relative; z-index: 1; }
.seg--glide button.is-active { background: none; box-shadow: none; }
.seg__glider { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 12px) / 2); border-radius: 9px; background: var(--bg-3); box-shadow: inset 0 0 0 1px rgba(var(--accent-hi-rgb), .28), 0 6px 18px -8px rgba(var(--accent-rgb), .8); transition: transform .45s var(--ease-spring); }
.seg--glide.is-second .seg__glider { transform: translateX(calc(100% + 4px)); }
.seg--inline { display: inline-flex; }
.seg--inline button { flex: none; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 4px; margin-bottom: 18px; }
.chips--scroll::-webkit-scrollbar { display: none; }
.chip { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; height: 40px; padding: 0 14px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); font-size: 13.5px; font-weight: 700; color: var(--text-dim); transition: background-color .2s, color .2s, border-color .2s, transform .2s var(--ease); }
.chip .ico { width: 17px; height: 17px; }
.chip em { font-style: normal; font-size: 11px; padding: 1px 7px; border-radius: 10px; background: var(--bg-4); color: var(--text-mute); }
.chip:hover { color: var(--text); transform: translateY(-2px); border-color: var(--line-strong); }
.chip.is-active { background: var(--accent-grad); border-color: transparent; color: #fff; box-shadow: 0 8px 22px -10px rgba(var(--accent-rgb), .9); }
.chip.is-active em { background: rgba(255, 255, 255, .2); color: #fff; }

.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.quick button { height: 34px; border-radius: 8px; background: var(--bg-3); font-size: 13px; font-weight: 700; color: var(--text-dim); transition: background-color .2s, color .2s; }
.quick button:hover { background: var(--accent-soft); color: var(--accent-hi); }

/* ---------- form ---------- */
.form { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; }
.field > span, .field > label, .field__top > label { font-size: 12.5px; font-weight: 700; color: var(--text-dim); }
.field > span small { font-weight: 500; color: var(--text-mute); }
.field__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.field__link { font-size: 12.5px; font-weight: 700; color: var(--accent-hi); }
.field__link:hover { text-decoration: underline; }
.field input, .input input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: var(--bg-0);
  outline: 0;
  transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .input input:focus { border-color: rgba(var(--accent-rgb), .7); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .14); }
.field.has-error input { border-color: var(--red); }
.field.has-error input:focus { box-shadow: 0 0 0 4px rgba(255, 77, 109, .14); }
.field.is-valid input { border-color: rgba(74, 222, 128, .4); }
.field em, .check__err { font-style: normal; font-size: 12px; color: var(--red); }
.field em:empty, .check__err:empty { display: none; }
.field em:not(:empty), .check__err:not(:empty), .form__error:not([hidden]) { animation: err-in .3s var(--ease); }
.form__error { padding: 10px 12px; border-radius: 10px; background: rgba(255, 77, 109, .12); border: 1px solid rgba(255, 77, 109, .22); color: #ff8aa0; font-size: 13px; }
.field__hint { font-size: 12px; color: var(--text-mute); }
.field.has-error .field__hint { display: none; }

/* ikonlu alan + şifre göster/gizle */
.field__control { position: relative; display: flex; align-items: center; }
.field__control > .ico { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--text-mute); pointer-events: none; transition: color .2s, transform .3s var(--ease-spring); }
.field__control > .ico + input { padding-left: 42px; }
.field__control:focus-within > .ico { color: var(--accent-hi); transform: scale(1.1); }
.field.is-valid .field__control > .ico { color: var(--green-hi); }
.field.has-error .field__control > .ico { color: var(--red); }
.field__control input[data-pw] { padding-right: 48px; }
.field__eye { position: absolute; right: 5px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; color: var(--text-mute); transition: color .2s, background-color .2s; }
.field__eye:hover { color: var(--text); background: var(--bg-3); }
.field__eye[aria-pressed="true"] { color: var(--accent-hi); }
.field__eye .ico { width: 18px; height: 18px; }
.field__caps { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--gold); animation: err-in .25s var(--ease); }
.field__caps .ico { width: 14px; height: 14px; }

/* tarayıcı otomatik doldurması koyu temayı bozmasın */
.field input:-webkit-autofill { -webkit-text-fill-color: var(--text); caret-color: var(--text); -webkit-box-shadow: 0 0 0 40px var(--bg-0) inset; transition: background-color 9999s; }
.field input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 40px var(--bg-0) inset, 0 0 0 4px rgba(var(--accent-rgb), .14); }

/* şifre gücü */
.pw-meter { display: flex; align-items: center; gap: 10px; }
.pw-meter__bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; flex: 0 0 132px; }
.pw-meter__bars i { height: 4px; border-radius: 4px; background: var(--bg-3); overflow: hidden; }
.pw-meter__bars i::after { content: ''; display: block; height: 100%; background: var(--pw, var(--red)); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease), background-color .3s; }
.pw-meter__bars i:nth-child(2)::after { transition-delay: 40ms; }
.pw-meter__bars i:nth-child(3)::after { transition-delay: 80ms; }
.pw-meter__bars i:nth-child(4)::after { transition-delay: 120ms; }
.pw-meter[data-level="1"] i:nth-child(-n+1)::after,
.pw-meter[data-level="2"] i:nth-child(-n+2)::after,
.pw-meter[data-level="3"] i:nth-child(-n+3)::after,
.pw-meter[data-level="4"] i::after { transform: none; }
.pw-meter[data-level="1"] { --pw: var(--red); }
.pw-meter[data-level="2"] { --pw: var(--gold); }
.pw-meter[data-level="3"] { --pw: var(--accent-hi); }
.pw-meter[data-level="4"] { --pw: var(--green-hi); }
.pw-meter small { font-size: 12px; color: var(--text-mute); }
.pw-meter:not([data-level="0"]) small { color: var(--pw); font-weight: 700; }
.field.has-error .pw-meter small { display: none; }

.input { position: relative; display: flex; align-items: center; }
.input > .ico { position: absolute; left: 13px; width: 18px; height: 18px; color: var(--text-mute); pointer-events: none; }
.input--search input { height: 44px; padding-left: 40px; background: var(--bg-2); border-color: var(--line); }

.select { position: relative; display: inline-flex; align-items: center; }
.select select { height: 42px; padding: 0 38px 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text); font-weight: 600; font-size: 14px; appearance: none; cursor: pointer; outline: 0; }
.select select:focus { border-color: rgba(var(--accent-rgb), .6); }
.select select option { background: var(--bg-2); }
.select > .ico { position: absolute; right: 12px; width: 16px; height: 16px; color: var(--text-mute); pointer-events: none; }

.check { position: relative; display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--text-dim); cursor: pointer; }
.check input { position: absolute; opacity: 0; }
.check__box { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; border-radius: 5px; border: 1.5px solid var(--line-strong); background: var(--bg-0); transition: border-color .2s, background-color .2s; }
.check input:checked + .check__box { border-color: var(--accent); background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 12px no-repeat; animation: check-pop .35s var(--ease-spring); }
.check input:focus-visible + .check__box { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
.check:hover .check__box { border-color: rgba(var(--accent-hi-rgb), .5); }
.field.has-error .check__box { border-color: var(--red); }
.check a { color: var(--accent-hi); font-weight: 600; }

.toggle { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-dim); cursor: pointer; }
.toggle input { position: absolute; opacity: 0; }
.toggle__ui { position: relative; width: 34px; height: 20px; border-radius: 20px; background: var(--bg-4); transition: background-color .2s; }
.toggle__ui::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .25s var(--ease-spring); }
.toggle input:checked + .toggle__ui { background: var(--accent); }
.toggle input:checked + .toggle__ui::after { transform: translateX(14px); }

.status { display: inline-block; padding: 3px 8px; border-radius: 6px; font-size: 12px; font-weight: 700; background: var(--bg-3); color: var(--text-dim); }
.status--completed, .status--won { background: rgba(34, 197, 94, .14); color: var(--green-hi); }
.status--pending, .status--open { background: rgba(245, 196, 81, .12); color: var(--gold); }
.status--rejected, .status--lost, .status--cancelled { background: rgba(255, 77, 109, .12); color: #ff8aa0; }

/* ---------- scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .8s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
/* Animasyonlar yalnızca alanı görünürken çalışır; duraklatılmış DOĞARLAR.
   content-visibility ile atlanan alt ağaçta (ekran dışındaki .cv bölümü, kapalı modal, kapalı
   destek paneli) oluşan animasyon başlayamıyor, atlanmış ağaca sonradan gelen stil (duraklat)
   da ulaşmıyor. Sayfada başka bir animasyon döndükçe Chrome bunlar yüzünden her karede bütün
   sayfanın stilini yeniden hesaplıyordu — lobi hiç boşa çıkmıyor, zayıf cihazda kasıyordu.
   [data-offpause]: app.js offIO ekrana yaklaşınca .is-on ekler, uzaklaşınca kaldırır. */
[data-offpause]:not(.is-on) *, [data-offpause]:not(.is-on) *::before, [data-offpause]:not(.is-on) *::after,
.modal:not(.is-open) *, .modal:not(.is-open) *::before, .modal:not(.is-open) *::after,
/* atlanmak üzere olan alan (app.js quiet): kapanırken çalışan animasyonlar önce durur */
.is-quieting *, .is-quieting *::before, .is-quieting *::after { animation-play-state: paused !important; }

/* ---------- animasyonlar ---------- */
@keyframes spin { to { rotate: 360deg; } }
/* SVG öğesinde ayrı "rotate" özelliği GPU'da çalışmaz (her kare ana iş parçacığında): SVG'ler bununla döner */
@keyframes spin-t { to { transform: rotate(360deg); } }
@keyframes shimmer-text { to { background-position: -200% 0; } }
@keyframes shimmer-text-again { to { background-position: -200% 0; } }
@keyframes blink { 50% { opacity: .3; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(12px); } }
@keyframes float-y { 50% { transform: translateY(-8px); } }
@keyframes card-in { from { opacity: 0; transform: translateY(16px) scale(.96); } }
@keyframes err-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes check-pop { 50% { transform: scale(1.22); } }
@keyframes draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; }
  .reveal { opacity: 1; transform: none; }
}