/* ============================================================
   LikedWin Auth — kırmızı halı sahnesi (sağ panel)
   Markup: app/partials/auth-panel.php · JS: assets/js/auth-stage.js
   Gradyan / ışık halesi YOK: tüm ışık katmanları düz rgba.
   Sahne ölçüleri cqh/cqw ile (container-type: size) → panel boyu ne
   olursa olsun halı, duvar, karakter ve kalabalık birlikte ölçeklenir.
   ============================================================ */

.auth-panel--stage {
    --ast-night: #0e1543;
    --ast-wall: #1842b6;
    --ast-wall-d: #1433a0;
    --ast-rug: #c8102e;
    --ast-rug-d: #8e0b22;
    --ast-gold: #e9b949;
    --ast-gold-d: #b98a22;
    --ast-floor: #0a0f33;
    background: var(--ast-night);
    padding: 44px 44px 0;
}
.auth-panel--stage::before,
.auth-panel--stage::after { content: none; }

.auth-panel-head { flex: none; max-width: 560px; }
.auth-panel--stage .auth-panel-brand { margin-bottom: 26px; }
.auth-panel--stage .auth-panel-welcome-title { font-size: 28px; margin: 0 0 12px; }
.auth-panel--stage .auth-panel-welcome-text { font-size: 15px; line-height: 1.65; margin: 0; color: rgba(255,255,255,.82); }

/* ---------- Sahne ---------- */
.ast {
    position: relative;
    flex: 1 1 auto;
    min-height: 380px;
    margin: 18px -44px 0;
    overflow: hidden;
    container-type: size;
    pointer-events: none;
    user-select: none;
}
.ast svg { max-width: none; }

/* Işık iskelesi + lambalar */
.ast-truss {
    position: absolute; left: 0; right: 0; top: 2cqh; height: 1.6cqh; min-height: 8px;
    background: #1c2468;
    border-top: 2px solid #2a3486; border-bottom: 2px solid #2a3486;
    display: flex; justify-content: space-around;
    z-index: 3;
}
.ast-lamp {
    position: relative; top: 100%;
    width: 3.6cqh; height: 4cqh; min-width: 18px; min-height: 20px;
    background: #262e70; border-radius: 3px 3px 8px 8px;
}
.ast-lamp::after {
    content: ""; position: absolute; left: 18%; right: 18%; bottom: 0; height: 22%;
    background: #fff3c4; border-radius: 0 0 6px 6px;
}

/* Logolu duvar (step-and-repeat) */
.ast-wall {
    position: absolute; left: 0; right: 0; top: 10cqh; bottom: 42cqh;
    background: var(--ast-wall);
    border-top: 6px solid var(--ast-gold);
    z-index: 1;
}
.ast-wall__pat { position: absolute; inset: 0; display: block; }
.ast-wall__pat use { fill: rgba(255,255,255,.2); }
.ast-wall__pat text {
    fill: rgba(255,255,255,.2);
    font: 800 17px 'Plus Jakarta Sans', sans-serif; letter-spacing: -.02em;
}
.ast-wall__trim {                                  /* duvarın dibindeki gölge bandı: düz koyu ton */
    position: absolute; left: 0; right: 0; bottom: 0; height: 3cqh; background: var(--ast-wall-d);
}

/* Spot huzmeleri — iskeleden inen düz, yarı saydam koniler; hafif tarama */
.ast-beams { position: absolute; inset: 0; z-index: 4; }
.ast-beam {
    position: absolute; top: 5cqh; left: calc(22% + var(--i) * 28%);
    width: 30cqh; height: 70cqh; margin-left: -15cqh;
    background: rgba(255, 246, 214, .07);
    clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
    transform-origin: 50% 0;
    animation: astBeam 7s ease-in-out infinite alternate;
    animation-delay: calc(var(--i) * -2.3s);
}
.ast-beam:nth-child(2) { animation-duration: 8.5s; }
@keyframes astBeam { from { rotate: -14deg; } to { rotate: 14deg; } }

/* Kırmızı halı: duvarın önünde, altın kenar şeritli */
.ast-carpet {
    position: absolute; left: 0; right: 0; bottom: 28cqh; height: 14cqh;
    background: var(--ast-rug);
    border-top: 3px solid var(--ast-gold);
    z-index: 2;
}
.ast-carpet__edge {
    position: absolute; left: 0; right: 0; bottom: 0; height: 2.2cqh;
    background: var(--ast-rug-d); border-top: 3px solid var(--ast-gold-d);
}

/* Poz noktası: halıdaki altın yıldız + düz ışık havuzu */
.ast-spot {
    position: absolute; left: 50%; bottom: 31.5cqh; width: 34cqh; height: 7cqh; margin-left: -17cqh;
    border-radius: 50%; background: rgba(255, 244, 210, .14);
    z-index: 2; transition: background-color .5s, scale .5s;
}
.ast-star-mark {
    position: absolute; left: 50%; bottom: 33.2cqh; width: 7cqh; height: 3.6cqh; margin-left: -3.5cqh;
    z-index: 2; display: grid; place-items: center;
}
.ast-star-mark svg { width: 100%; height: 100%; fill: var(--ast-gold); }
.ast.is-pose .ast-spot { background: rgba(255, 244, 210, .26); scale: 1.12; }

/* ---------- Yürüyen yıldız ---------- */
.ast-walker {
    --h: 50cqh;
    --step: .26s;
    position: absolute; left: 0; bottom: 34cqh; z-index: 5;
    transform: translateX(-120%);
    will-change: transform;
}
.ast-walker__body {
    position: relative; z-index: 1; transform-origin: 50% 100%;
    animation: astStepY var(--step) ease-in-out infinite alternate, astSway calc(var(--step) * 2) ease-in-out infinite alternate;
}
.ast-sprite {
    display: block; height: var(--h); width: calc(var(--h) * var(--fw, 390) / var(--fh, 520));
    background-image: var(--spr, none); background-repeat: no-repeat; background-position: 0 0;
}
.ast-sprite--4 { background-size: 400% 100%; animation: astFrames4 calc(var(--step) * 4) steps(4) infinite; }
.ast-sprite--8 { background-size: 800% 100%; animation: astFrames8 calc(var(--step) * 4) steps(8) infinite; }
@keyframes astFrames4 { from { background-position: 0 0; } to { background-position: 133.3333% 0; } }
@keyframes astFrames8 { from { background-position: 0 0; } to { background-position: 114.2857% 0; } }
@keyframes astStepY { from { translate: 0 0; } to { translate: 0 -2px; } }
@keyframes astSway  { from { rotate: -.7deg; } to { rotate: .7deg; } }

.ast-walker__shadow {
    position: absolute; left: 16%; right: 16%; bottom: calc(var(--h) * -.008); height: calc(var(--h) * .04);
    border-radius: 50%; background: rgba(40, 0, 10, .38);
}

/* Poz: yürüme durur, geçiş karesinde (bacaklar bitişik) donar */
.ast.is-pose .ast-walker__body { animation: none; }
.ast.is-pose .ast-sprite { animation: none; background-position: var(--pose, 28.5714%) 0; }

/* Poz etiketleri */
.ast-tag, .ast-chip {
    position: absolute; white-space: nowrap;
    font: 700 13px/1 'Plus Jakarta Sans', sans-serif; color: #0f172a;
    background: #fff; border-radius: 999px; padding: 8px 12px;
    box-shadow: 0 6px 16px rgba(5, 8, 30, .28);
    opacity: 0; translate: 0 8px; scale: .9;
    transition: opacity .35s, translate .35s, scale .35s;
    z-index: 2;
}
.ast-tag {
    left: 50%; bottom: calc(100% + 12px); margin-left: 0; transform: translateX(-50%);
    background: var(--ast-gold); color: #3a2600;
}
.ast-tag i { font-size: 11px; margin-right: 3px; }
.ast-chip i { margin-right: 4px; }
.ast-chip--1 { left: 88%; top: 8%;  } .ast-chip--1 i { color: #1842b6; }
.ast-chip--2 { left: 94%; top: 27%; } .ast-chip--2 i { color: #e5335b; }
.ast-chip--3 { left: 88%; top: 46%; } .ast-chip--3 i { color: #13a36e; }
.ast.is-pose .ast-tag,
.ast.is-pose .ast-chip { opacity: 1; translate: 0 0; scale: 1; }
.ast.is-pose .ast-tag    { transition-delay: .15s; }
.ast.is-pose .ast-chip--1 { transition-delay: .55s; }
.ast.is-pose .ast-chip--2 { transition-delay: .95s; }
.ast.is-pose .ast-chip--3 { transition-delay: 1.35s; }

/* ---------- Ön plan: zemin, ip hattı, hayranlar ---------- */
.ast-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 28cqh; background: var(--ast-floor); z-index: 6; }
.ast-crowd { position: absolute; left: 0; bottom: 0; width: 100%; height: 36cqh; display: block; z-index: 7; overflow: visible; }

.ast-rope { fill: none; stroke: var(--ast-rug); stroke-width: 9; stroke-linecap: round; }
.ast-rope--lo { stroke: var(--ast-rug-d); stroke-width: 13; }
.ast-post { fill: var(--ast-gold); }
.ast-post-hi { fill: #fff0bf; }

.ast-fan { animation: astFan var(--t, 2.6s) ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
@keyframes astFan { from { translate: 0 0; } to { translate: 0 -6px; } }
.ast-row--back  { opacity: .98; }

.ast-arm { fill: none; stroke-width: 15; stroke-linecap: round; stroke-linejoin: round; }
.ast-fingers { fill: none; stroke-width: 4.5; stroke-linecap: round; }
.ast-arm-g { transform-box: fill-box; }
.ast-arm-g--r { transform-origin: 0% 100%; }
.ast-arm-g--l { transform-origin: 100% 100%; }
.ast-arm-g.is-wave { animation: astWave var(--t, 1.8s) ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
.ast-arm-g.is-hold { animation: astHold var(--t, 2.4s) ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
@keyframes astWave { from { rotate: -10deg; } to { rotate: 12deg; } }
@keyframes astHold { from { rotate: -2deg; } to { rotate: 3deg; } }

.ast-screen { fill: #b9ccff; }
.ast-screen-rug { fill: #d8374f; }
.ast-screen-pop { fill: #ffffff; opacity: 0; animation: astPop var(--t, 5s) linear infinite; animation-delay: var(--d, 0s); }
@keyframes astPop { 0%, 90%, 100% { opacity: 0; } 92% { opacity: .95; } 95% { opacity: .3; } }
.ast.is-pose .ast-screen-pop { animation-duration: calc(var(--t, 5s) * .35); }

/* Kalabalıktan yükselen kalpler */
.ast-hearts { position: absolute; inset: 0; z-index: 8; }
.ast-hearts i {
    position: absolute; left: var(--x); bottom: 22cqh;
    font-size: clamp(14px, 2.6cqh, 22px); color: #ff4f7b; opacity: 0;
    animation: astRise 6s ease-out infinite; animation-delay: var(--dl);
}
.ast-hearts i.fa-star { color: var(--ast-gold); }
.ast-hearts i.fa-thumbs-up { color: #7fb0ff; }
@keyframes astRise {
    0%   { opacity: 0; translate: 0 0; scale: .6; }
    12%  { opacity: 1; scale: 1; }
    70%  { opacity: .9; }
    100% { opacity: 0; translate: 14px -30cqh; scale: 1.1; }
}

/* Paparazzi (köşelerde, yandan) */
.ast-pap { position: absolute; bottom: -2cqh; width: 30cqh; height: 39cqh; z-index: 9; }
.ast-pap svg { width: 100%; height: 100%; display: block; }
.ast-pap--l { left: -6cqh; }
.ast-pap--r { right: -6cqh; transform: scaleX(-1); }
.ast-pap__body { fill: #060a26; }
.ast-pap__cap  { fill: #1a2160; }
.ast-pap__arm  { fill: none; stroke: #060a26; stroke-width: 20; stroke-linecap: round; stroke-linejoin: round; }
.ast-pap__cam  { fill: #161b3d; }
.ast-pap__lens { fill: #3a4aa0; }
.ast-pap__flash {                                   /* flaş patlaması: düz beyaz yıldız */
    position: absolute; left: 73%; top: 3%; width: 16cqh; height: 16cqh; margin: -8cqh 0 0 -8cqh;
    background: #fff;
    clip-path: polygon(50% 0, 57% 40%, 100% 50%, 57% 60%, 50% 100%, 43% 60%, 0 50%, 43% 40%);
    opacity: 0; scale: .3;
}
.ast.is-pose .ast-pap__flash { animation: astSnap 1.15s steps(1) infinite; }
.ast.is-pose .ast-pap--r .ast-pap__flash { animation-delay: .5s; animation-duration: 1.35s; }
@keyframes astSnap {
    0%  { opacity: 1; scale: 1; rotate: 0deg; }
    8%  { opacity: .55; scale: .7; rotate: 12deg; }
    16% { opacity: 0; scale: .3; }
    100% { opacity: 0; }
}

/* Sahne flaşı: poz sırasında kısa beyaz parlamalar */
.ast-flash { position: absolute; inset: 0; background: #fff; opacity: 0; z-index: 10; }
.ast.is-pose .ast-flash { animation: astFlash 2.6s linear infinite .3s; }
@keyframes astFlash {
    0%, 100% { opacity: 0; }
    2%  { opacity: .22; }  5% { opacity: 0; }
    38% { opacity: 0; } 40% { opacity: .16; } 43% { opacity: 0; }
    70% { opacity: 0; } 72% { opacity: .2; } 74% { opacity: .05; } 76% { opacity: 0; }
}

/* Kısa ekranlarda başlık metni sahneye yer açsın */
@media (max-height: 760px) {
    .auth-panel--stage { padding-top: 32px; }
    .auth-panel--stage .auth-panel-brand { margin-bottom: 16px; }
    .auth-panel--stage .auth-panel-welcome-title { font-size: 24px; margin-bottom: 8px; }
    .auth-panel--stage .auth-panel-welcome-text { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .ast *, .ast *::before, .ast *::after { animation: none !important; transition: none !important; }
    .ast-walker { transform: translateX(calc(50cqw - 50%)); }
}