/* E-commerSNex giriş ekranları: "uzay" arka planı ve konsol kartı (her zaman koyu). Yalnızca layouts/auth.php yükler. */
html.ec-auth-html { background: #04060f; color-scheme: dark; }
body.ec-auth { background: transparent; color: #dbe4f7; }
.ec-space, .ec-canvas, .ec-orbit, .ec-flash { position: fixed; pointer-events: none; }
.ec-space { inset: 0; z-index: -2; overflow: hidden; background: radial-gradient(120% 90% at 18% 0%, #0d1550 0%, #070a1e 48%, #03050c 100%); }
.ec-canvas { inset: 0; width: 100%; height: 100%; z-index: 0; }
.ec-neb { position: absolute; border-radius: 50%; will-change: transform; }
.ec-neb1 { width: 70vw; height: 60vw; left: -18vw; top: -22vw; background: radial-gradient(closest-side, rgba(56, 102, 255, .42), transparent); animation: ecDrift 38s ease-in-out infinite alternate; }
.ec-neb2 { width: 62vw; height: 56vw; right: -16vw; top: 18vh; background: radial-gradient(closest-side, rgba(124, 58, 237, .34), transparent); animation: ecDrift 46s ease-in-out -9s infinite alternate-reverse; }
.ec-neb3 { width: 50vw; height: 40vw; left: 30vw; bottom: -18vw; background: radial-gradient(closest-side, rgba(34, 170, 220, .2), transparent); animation: ecDrift 52s ease-in-out -20s infinite alternate; }
@keyframes ecDrift { to { transform: translate3d(5vw, 4vw, 0) scale(1.12); } }

/* gezegen ve yörünge halkaları */
.ec-orbit { --d: max(48vw, 560px); z-index: 0; left: -12vw; bottom: -46vh; width: var(--d); height: var(--d); }
.ec-planet { position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 68% 16%, #5b8cff 0%, #2c45c4 17%, #131c63 44%, #070a24 74%);
  box-shadow: inset -36px -48px 100px rgba(0, 0, 12, .85), inset 6px 8px 40px rgba(132, 181, 255, .35), 0 0 0 1px rgba(132, 181, 255, .28), 0 -6px 26px rgba(132, 181, 255, .45), 0 -30px 110px rgba(56, 102, 255, .4); }
.ec-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(150, 190, 255, .38); transform: rotateX(74deg) rotateZ(0deg); animation: ecSpin 90s linear infinite; }
.ec-ring::after { content: ""; position: absolute; left: 50%; top: -3px; width: 5px; height: 5px; margin-left: -3px; border-radius: 50%; background: #bcd3ff; box-shadow: 0 0 10px 2px rgba(132, 181, 255, .9); }
.ec-r1 { inset: -16%; }
.ec-r2 { inset: -34%; animation-duration: 140s; animation-direction: reverse; border-color: rgba(190, 165, 255, .32); }
.ec-r3 { inset: -56%; animation-duration: 210s; border-color: rgba(150, 190, 255, .2); }
@keyframes ecSpin { to { transform: rotateX(74deg) rotateZ(360deg); } }
@media (max-width: 1023px) {
  .ec-orbit { --d: 170vw; left: -35vw; bottom: -150vw; }
  .ec-ring { display: none; }
  .ec-planet { box-shadow: inset -20px -30px 80px rgba(0, 0, 12, .8), 0 0 0 1px rgba(132, 181, 255, .3), 0 -4px 18px rgba(132, 181, 255, .5), 0 -20px 70px rgba(56, 102, 255, .45); }
}

/* sol panel: uzaya açılan şeffaf alan; sağ sütun şeffaf */
body.ec-auth .ec-aside, body.ec-auth .ec-pane { background: transparent; position: relative; z-index: 2; }
body.ec-auth .ec-aside .auth-grid { display: none; }
body.ec-auth .ec-aside h2 { text-shadow: 0 2px 30px rgba(56, 102, 255, .55); }
body.ec-auth .ec-aside .text-slate-300, body.ec-auth .ec-aside .text-slate-300\/85, body.ec-auth .ec-aside .text-slate-400 { color: rgba(226, 234, 252, .86); text-shadow: 0 1px 12px rgba(3, 5, 20, .9); }
body.ec-auth .ec-aside .backdrop-blur-sm { backdrop-filter: blur(8px); background: rgba(10, 16, 44, .45); }

/* dil menüsü ve alt bilgi (koyu) */
body.ec-auth .ec-pane .bg-white, body.ec-auth .ec-pane .hover\:bg-slate-50:hover { background-color: rgba(10, 16, 44, .88); }
body.ec-auth .ec-pane .border-slate-200, body.ec-auth .ec-pane .border-slate-100 { border-color: rgba(93, 139, 255, .28); }
body.ec-auth .ec-pane .text-slate-700, body.ec-auth .ec-pane .text-slate-500 { color: #cfd8ee; }
body.ec-auth .ec-pane .text-slate-400 { color: #aab4c9; }
body.ec-auth .ec-pane .hover\:bg-slate-50:hover { background-color: rgba(93, 139, 255, .18); }
body.ec-auth .ec-pane .hover\:text-slate-700:hover, body.ec-auth .ec-pane .hover\:text-slate-900:hover { color: #fff; }
body.ec-auth .ec-pane .text-slate-950 { color: #f1f5ff; }
body.ec-auth .ec-pane .text-blue-600 { color: #84b5ff; }
body.ec-auth .ec-pane .bg-blue-50\/50 { background-color: rgba(93, 139, 255, .16); }

/* konsol kartı */
.ec-console { position: relative; padding: 24px 18px; border-radius: 18px; backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  background: linear-gradient(160deg, rgba(14, 20, 52, .72), rgba(7, 10, 28, .78));
  border: 1px solid rgba(93, 139, 255, .3);
  box-shadow: 0 0 0 1px rgba(5, 8, 24, .6), 0 24px 70px -24px rgba(0, 0, 0, .8), 0 0 60px -14px rgba(56, 102, 255, .55), inset 0 1px 0 rgba(255, 255, 255, .07);
  animation: ecIn .6s cubic-bezier(.22, 1, .36, 1) both; transition: transform .5s cubic-bezier(.5, 0, 1, .6), opacity .5s ease-in; }
@media (min-width: 420px) { .ec-console { padding: 28px 24px; } }
@media (min-width: 640px) { .ec-console { padding: 36px; } }
@keyframes ecIn { from { opacity: .3; transform: translateY(14px) scale(.985); } }
.ec-console::before { content: ""; position: absolute; inset: -1px; border-radius: 18px; pointer-events: none; --c: #84b5ff;
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / 18px 2px, linear-gradient(var(--c), var(--c)) 0 0 / 2px 18px,
    linear-gradient(var(--c), var(--c)) 100% 0 / 18px 2px, linear-gradient(var(--c), var(--c)) 100% 0 / 2px 18px,
    linear-gradient(var(--c), var(--c)) 0 100% / 18px 2px, linear-gradient(var(--c), var(--c)) 0 100% / 2px 18px,
    linear-gradient(var(--c), var(--c)) 100% 100% / 18px 2px, linear-gradient(var(--c), var(--c)) 100% 100% / 2px 18px;
  background-repeat: no-repeat; filter: drop-shadow(0 0 5px rgba(93, 139, 255, .9)); }
.ec-console::after { content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, #84b5ff, transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: ecScan 6s ease-in-out infinite; }
@keyframes ecScan { 0% { background-position: -40% 0; } 100% { background-position: 140% 0; } }
.ec-dot { position: absolute; top: 14px; right: 20px; width: 6px; height: 6px; border-radius: 50%; background: #34d399; box-shadow: 0 0 8px 2px rgba(52, 211, 153, .7); animation: ecBlink 2.4s ease-in-out infinite; }
@keyframes ecBlink { 50% { opacity: .35; } }

/* konsol içi koyu renk eşlemesi (görünümler Tailwind açık tema sınıfları kullanır) */
.ec-console :is(.text-slate-950, .text-slate-900, .text-slate-800) { color: #f1f5ff; }
.ec-console :is(.text-slate-700, .text-slate-600) { color: #d3dcf0; }
.ec-console :is(.text-slate-500, .text-slate-400) { color: #b4bccd; }
.ec-console :is(.text-blue-600, .text-blue-700, .text-brand-600) { color: #84b5ff; }
.ec-console :is(.hover\:text-blue-800, .hover\:text-slate-950, .hover\:text-slate-800):hover { color: #fff; }
.ec-console :is(.border-slate-100, .border-slate-200, .border-slate-300, .border-blue-200, .border-blue-200\/80, .border-slate-200\/80) { border-color: rgba(93, 139, 255, .32); }
.ec-console .border-rose-500 { border-color: #fb7185; }
.ec-console :is(.bg-slate-50, .bg-slate-100) { background-color: rgba(255, 255, 255, .06); }
.ec-console .bg-gradient-to-br { background-image: none; background-color: rgba(56, 102, 255, .1); }
.ec-console :is(.bg-white, input:not([type=checkbox]):not([type=radio]), select, textarea, .input) { background-color: rgba(5, 8, 24, .82); color: #f1f5ff; border-color: rgba(93, 139, 255, .32); }
.ec-console span.bg-white.shadow-sm { background-color: rgba(93, 139, 255, .3); color: #fff; box-shadow: 0 0 14px -2px rgba(93, 139, 255, .6); }
.ec-console code.bg-white { background-color: rgba(5, 8, 24, .6); color: #84b5ff; }
.ec-console input::placeholder { color: #7f8aa6; }
.ec-console .bg-slate-200 { background-color: rgba(132, 181, 255, .25); color: #dbe4f7; }
.ec-console .bg-slate-950 { background-color: rgba(93, 139, 255, .22); box-shadow: 0 0 0 1px rgba(132, 181, 255, .4) inset; }
.ec-console .hover\:bg-slate-800:hover { background-color: rgba(93, 139, 255, .4); }
.ec-console label:has(:checked) { background-color: rgba(56, 102, 255, .2); border-color: #84b5ff; }
.ec-console input:-webkit-autofill { -webkit-text-fill-color: #f1f5ff; box-shadow: 0 0 0 40px #070b22 inset; }
.ec-console .input:focus, .ec-console input:focus { border-color: #84b5ff; box-shadow: 0 0 0 3px rgba(93, 139, 255, .35), 0 0 22px -4px rgba(93, 139, 255, .7); outline: none; }
.ec-console .label { color: #cfd8ee; }
.ec-console .btn-primary { background: linear-gradient(180deg, rgba(255, 255, 255, .16), transparent), #2a55e8; border-color: rgba(132, 181, 255, .5); box-shadow: 0 10px 30px -10px rgba(56, 102, 255, .9); border-radius: .75rem; font-size: .875rem; }
.ec-console .btn-primary:hover { background: linear-gradient(180deg, rgba(255, 255, 255, .2), transparent), #3a66ff; }
.ec-console .btn-primary:focus-visible, .ec-console a:focus-visible, .ec-console button:focus-visible { outline: 2px solid #84b5ff; outline-offset: 2px; }
.ec-console .bg-rose-50 { background-color: rgba(244, 63, 94, .14); border-color: rgba(251, 113, 133, .5); color: #fecdd3; }
.ec-console .bg-emerald-50 { background-color: rgba(16, 185, 129, .14); border-color: rgba(52, 211, 153, .5); color: #a7f3d0; }
.ec-console .bg-amber-50 { background-color: rgba(245, 158, 11, .14); border-color: rgba(251, 191, 36, .5); color: #fde68a; }
.ec-console .bg-sky-50 { background-color: rgba(56, 189, 248, .14); border-color: rgba(125, 211, 252, .5); color: #bae6fd; }

/* submit sırasında ileri warp */
.ec-flash { inset: 0; z-index: 5; opacity: 0; background: radial-gradient(circle at 50% 50%, #fff 0, #9fc0ff 30%, rgba(56, 102, 255, .6) 70%); transition: opacity .5s ease-in; }
body.ec-warping .ec-flash { opacity: .85; }
body.ec-warping .ec-console { transform: scale(.94); opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .ec-neb, .ec-ring, .ec-console, .ec-console::after, .ec-dot { animation: none !important; transition: none !important; }
}