/* Canlandırma katmanı (21st.dev esinli: Aurora Background, Liquid Glass Button, Text Rotate, Spotlight Card, Shooting Stars)
   Saf CSS/JS, dış kaynak yok. Hareket azaltma tercihine saygı duyar. */

/* ---- Aurora arka plan ---- */
.aurora { position: fixed; inset: 0 0 38% 0; pointer-events: none; overflow: hidden; z-index: 1; mix-blend-mode: screen; opacity: .8;
  -webkit-mask-image: linear-gradient(#000 25%, transparent); mask-image: linear-gradient(#000 25%, transparent); }
.aurora i { position: absolute; width: 70vmax; height: 34vmax; border-radius: 50%; filter: blur(60px); opacity: .55; will-change: transform; }
.aurora i:nth-child(1) { left: -20vmax; top: -14vmax; background: radial-gradient(closest-side, rgba(52, 211, 153, .75), transparent); animation: aur-a 22s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { right: -24vmax; top: -10vmax; background: radial-gradient(closest-side, rgba(99, 102, 241, .7), transparent); animation: aur-b 28s ease-in-out infinite alternate; }
.aurora i:nth-child(3) { left: 20vw; top: -18vmax; background: radial-gradient(closest-side, rgba(240, 195, 106, .45), transparent); animation: aur-c 34s ease-in-out infinite alternate; }
@keyframes aur-a { to { transform: translate3d(30vw, 6vmax, 0) scale(1.2) rotate(8deg); } }
@keyframes aur-b { to { transform: translate3d(-34vw, 8vmax, 0) scale(.9) rotate(-10deg); } }
@keyframes aur-c { to { transform: translate3d(-20vw, 5vmax, 0) scale(1.3); } }

/* ---- Kayan yıldız ---- */
.shoot { position: fixed; top: 0; left: 0; width: 140px; height: 2px; pointer-events: none; z-index: 1; opacity: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 85%, rgba(255, 244, 214, 0)); border-radius: 2px;
  filter: drop-shadow(0 0 6px rgba(255, 236, 190, .9)); }

/* ---- Başlık parıltısı ---- */
.brand h1 { background: linear-gradient(100deg, #f6efe0 0%, #f6efe0 40%, #ffd98a 50%, #f6efe0 60%, #f6efe0 100%); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: title-shine 7s ease-in-out infinite; text-shadow: none; filter: drop-shadow(0 2px 14px rgba(5, 14, 20, .7)); }
@keyframes title-shine { 0%, 55% { background-position: 120% 0; } 100% { background-position: -120% 0; } }

/* ---- Metin döndürücü ---- */
.countdown { position: relative; display: block; overflow: hidden; height: 1.5em; line-height: 1.5em; }
.countdown .rot { display: block; white-space: nowrap; }
.countdown .rot.out { position: absolute; left: 0; top: 0; }

/* ---- Liquid glass ana düğme ---- */
.dock .btn.primary.big { --mx: 50%; --my: 50%; isolation: isolate; transition: transform .25s cubic-bezier(.2, .9, .3, 1.3), box-shadow .3s; }
.dock .btn.primary.big::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .25s;
  background: radial-gradient(120px circle at var(--mx) var(--my), rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 70%); mix-blend-mode: soft-light; }
.dock .btn.primary.big:hover::before { opacity: 1; }
.dock .btn.primary.big:hover { box-shadow: 0 0 0 8px rgba(240, 195, 106, .16), 0 18px 56px -8px rgba(240, 195, 106, .75), inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -8px 18px rgba(255, 255, 255, .25); }
.dock .btn.primary.big svg { transition: transform .5s cubic-bezier(.2, .9, .3, 1.4); }
.dock .btn.primary.big:hover svg { transform: rotate(72deg) scale(1.15); }

/* ---- Tıklama dalgası ---- */
.btn { position: relative; overflow: hidden; }
.ripple { position: absolute; border-radius: 50%; pointer-events: none; background: rgba(255, 255, 255, .45); transform: scale(0); animation: ripple .65s ease-out forwards; z-index: 3; }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }

/* ---- Spot ışıklı kartlar ---- */
.spot { --mx: 50%; --my: 50%; }
.spot:not(.card) { position: relative; }
.spot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(220px circle at var(--mx) var(--my), rgba(240, 195, 106, .16), transparent 70%); }
.spot:hover::after { opacity: 1; }

/* ---- Giriş animasyonları ---- */
@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes drop-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
.recent-list li { animation: rise .55s cubic-bezier(.2, .8, .3, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
.brand { animation: drop-in .9s .1s cubic-bezier(.2, .8, .3, 1) both; }
.account { animation: drop-in .9s .3s cubic-bezier(.2, .8, .3, 1) both; }
.tally { animation: rise .9s .5s cubic-bezier(.2, .8, .3, 1) both; }
.tally b { display: inline-block; }
.tally b.bump { animation: bump .6s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes bump { 35% { transform: scale(1.35); color: #fff2c4; text-shadow: 0 0 18px rgba(255, 214, 122, .9); } }

dialog[open] { animation: dlg-spring .42s cubic-bezier(.2, 1.15, .3, 1) both; }
@keyframes dlg-spring { from { opacity: 0; transform: translateY(24px) scale(.94); } to { opacity: 1; transform: none; } }
dialog[open] .field, dialog[open] .types, dialog[open] .swatches, dialog[open] .actions { animation: rise .5s cubic-bezier(.2, .8, .3, 1) both; }
dialog[open] .types { animation-delay: .06s; }
dialog[open] .swatches { animation-delay: .12s; }
dialog[open] .actions { animation-delay: .18s; }
.swatches label span, .types label span { transition: transform .25s cubic-bezier(.2, 1.4, .4, 1); }
.swatches label:hover span, .types label:hover span { transform: scale(1.14) rotate(-4deg); }
.card-icon svg, .wish-preview span svg { animation: sway 3.6s ease-in-out infinite; transform-origin: 50% 6%; }
@keyframes sway { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }

/* ---- Konfeti ---- */
.confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; }

@media (prefers-reduced-motion: reduce) {
  .aurora i, .shoot, .brand h1, .recent-list li, .brand, .account, .tally, .card-icon svg, .wish-preview span svg, dialog[open], dialog[open] * { animation: none !important; }
  .brand h1 { -webkit-text-fill-color: #f6efe0; }
}
@media (max-width: 760px) { .aurora i { filter: blur(40px); } .aurora { opacity: .42; } }

/* ================= 2. tur ================= */

/* ---- Dönen ışık kenarlığı (Border Beam) ---- */
@property --beam { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.beam:not(.card) { position: relative; }
.beam > .beam-ring { position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 2;
  background: conic-gradient(from var(--beam), transparent 0 70%, rgba(255, 224, 150, 0) 72%, #ffe29a 88%, #fff 96%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: beam 5s linear infinite; filter: drop-shadow(0 0 6px rgba(255, 214, 122, .8)); }
@keyframes beam { to { --beam: 360deg; } }

.card.tilt { transition: transform .12s ease-out; }

/* ---- Imleç yıldız izi + patlama ---- */
.spark { position: fixed; left: 0; top: 0; width: 10px; height: 10px; pointer-events: none; z-index: 60; opacity: 0;
  background: radial-gradient(circle, #fff 0 25%, rgba(255, 220, 140, .9) 40%, transparent 70%); border-radius: 50%; }

.card-text .w { display: inline-block; white-space: pre; }

/* ---- Bildirim ve menü ---- */
.toast.show { animation: toast-pop .55s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes toast-pop { from { transform: translate(-50%, -30px) scale(.85); } }
.menu:not(.hidden) { animation: rise .3s cubic-bezier(.2, .9, .3, 1) both; transform-origin: top right; }
.menu:not(.hidden) > * { animation: rise .35s cubic-bezier(.2, .9, .3, 1) both; }
.menu:not(.hidden) > *:nth-child(2) { animation-delay: .04s; }
.menu:not(.hidden) > *:nth-child(3) { animation-delay: .08s; }
.menu:not(.hidden) > *:nth-child(4) { animation-delay: .12s; }

/* ---- Yükleme ekranı ---- */
.loading-title { animation: load-pulse 2.2s ease-in-out infinite; }
@keyframes load-pulse { 50% { transform: scale(1.04); filter: drop-shadow(0 0 18px rgba(240, 195, 106, .7)); } }
.loading-bar i { background-image: linear-gradient(90deg, #e9b949, #fff2c4, #e9b949); background-size: 200% 100%; animation: bar-flow 1.2s linear infinite; }
@keyframes bar-flow { to { background-position: -200% 0; } }

/* ---- Düğme ve araç etkileşimleri ---- */
.tool { transition: transform .25s cubic-bezier(.2, 1.4, .4, 1), background .2s, color .2s; }
.tool:hover { transform: translateY(-2px) scale(1.12); }
#btnAuto[aria-pressed="true"] svg { animation: spin 6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn.primary:not(.big) { background-image: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); background-size: 250% 100%; background-position: 150% 0; background-repeat: no-repeat; transition: background-position .7s, background-color .2s; }
.btn.primary:not(.big):hover { background-position: -50% 0; }
.btn.outline, .btn.user { transition: transform .2s cubic-bezier(.2, 1.4, .4, 1), border-color .2s, background .2s, color .2s; }
.btn.outline:hover, .btn.user:hover { transform: translateY(-1px); }
.recent-list li button { transition: background .2s, transform .25s cubic-bezier(.2, 1.4, .4, 1); }
.recent-list li button:hover { transform: translateX(-3px); }
.recent-list li button svg { transition: transform .4s cubic-bezier(.2, 1.4, .4, 1); }
.recent-list li button:hover svg { transform: rotate(-12deg) scale(1.12); }

#scene { animation: scene-in 1.6s ease-out both; }
@keyframes scene-in { from { filter: brightness(.4) saturate(.6); } }

@media (prefers-reduced-motion: reduce) {
  .beam-ring, .toast.show, .menu *, .loading-title, .loading-bar i, #btnAuto svg, #scene, .spark { animation: none !important; }
}


/* ================= 2027 (canlı altın yazı) ================= */
.y27 { position: fixed; left: var(--edge, 24px); bottom: 74px; z-index: 3; pointer-events: none; transform: translate(var(--tx, 0), var(--ty, 0)); transition: transform .3s ease-out; }
.y27-row { display: flex; gap: .02em; font: italic 600 clamp(54px, 6.4vw, 96px)/1 var(--serif); letter-spacing: -.02em; filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .55)) drop-shadow(0 0 22px rgba(240, 195, 106, .35)); }
.y27-d { display: inline-block; opacity: 0; color: transparent; -webkit-text-fill-color: transparent;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .9) 50%, transparent 60%) 150% 0 / 250% 100% no-repeat,
              linear-gradient(180deg, #fff7d6 0%, #f7d489 28%, #e9b949 52%, #9a6a14 56%, #f0c36a 78%, #fff1bd 100%);
  -webkit-background-clip: text; background-clip: text;
  animation: y27-in 1s calc(.3s + var(--i) * .14s) cubic-bezier(.2, 1.3, .4, 1) forwards,
             y27-float 5s calc(1.6s + var(--i) * .3s) ease-in-out infinite,
             y27-sheen 5s calc(2.2s + var(--i) * .12s) ease-in-out infinite; }
@keyframes y27-in { from { opacity: 0; transform: translateY(40px) rotateX(70deg) scale(.6); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes y27-float { 50% { transform: translateY(-5px); } }
@keyframes y27-sheen { 0%, 60% { background-position: 150% 0, 0 0; } 100% { background-position: -50% 0, 0 0; } }
.y27-cap { margin: 2px 0 0 6px; font: 600 11px var(--sans); letter-spacing: .42em; text-transform: uppercase; color: var(--gold); opacity: 0; animation: rise .8s 1.2s both; text-shadow: 0 1px 10px rgba(0, 0, 0, .7); }
.y27-star { position: absolute; left: var(--x); top: var(--y); width: 14px; height: 14px; margin: -7px; opacity: 0; animation: twinkle 2.6s var(--d) ease-in-out infinite;
  background: radial-gradient(circle, #fff 0 18%, transparent 20%), linear-gradient(#fff, #fff) 50% 50% / 2px 100% no-repeat, linear-gradient(#fff, #fff) 50% 50% / 100% 2px no-repeat; filter: drop-shadow(0 0 5px #ffe29a); }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 50% { opacity: 1; transform: scale(1.1) rotate(45deg); } }
@media (max-width: 760px) {
  .y27 { left: auto; right: 16px; bottom: auto; top: 70px; text-align: right; }
  .y27-row { font-size: 40px; justify-content: flex-end; }
  .y27-cap { margin-right: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .y27-d, .y27-cap { animation: none !important; opacity: 1; }
  .y27-star { display: none; }
}

/* Yükleme ekranı: geyikleri ve kızağıyla hediye dağıtan Noel Baba */
.sleigh-scene { width: min(440px, 88vw); height: auto; overflow: visible; }
.sleigh-scene .fly { animation: sleigh-fly 4.2s ease-in-out infinite alternate; transform-box: view-box; }
.sleigh-scene .bob { animation: sleigh-bob 1.1s ease-in-out infinite; }
.sleigh-scene .leg { animation: leg-run 0.45s ease-in-out infinite alternate; transform-origin: center; transform-box: fill-box; }
.sleigh-scene .nose { animation: load-pulse 0.8s ease-in-out infinite; }
.sleigh-scene .gift { opacity: 0; }
.sleigh-scene .g1 { animation: gift-drop 2.4s ease-in 0.2s infinite; }
.sleigh-scene .g2 { animation: gift-drop 2.4s ease-in 1.0s infinite; }
.sleigh-scene .g3 { animation: gift-drop 2.4s ease-in 1.8s infinite; }
@keyframes sleigh-fly { from { transform: translate(150px, 8px); } to { transform: translate(380px, -4px); } }
@keyframes sleigh-bob { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-5px) rotate(1.5deg); } }
@keyframes leg-run { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
@keyframes gift-drop { 0% { opacity: 0; transform: translate(230px, 60px) rotate(0); } 10% { opacity: 1; } 100% { opacity: 0; transform: translate(250px, 150px) rotate(140deg); } }
@media (prefers-reduced-motion: reduce) { .sleigh-scene * { animation: none !important; } .sleigh-scene .fly { transform: translate(260px, 0); } }