/* ============================================================
   Giriş kabuğu — DataFluvia AuthSplit kompozisyonu, Kidlio atmosferi.
   Sol: gece gökyüzü (yıldızlar, ay ışığı, maskot). Sağ: krem form sütunu.
   ============================================================ */
.auth-split {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}

/* ---------- Marka paneli ---------- */
.auth-brand {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding: 44px clamp(32px, 5vw, 72px);
  color: var(--k-night-ink-2);
  background:
    radial-gradient(120% 80% at 85% 110%, rgba(46, 139, 247, 0.32), transparent 60%),
    radial-gradient(70% 55% at 0% 0%, rgba(249, 115, 22, 0.12), transparent 65%),
    linear-gradient(165deg, var(--k-night-1) 0%, var(--k-night-2) 100%);
}
/* Alttaki yumuşak tepe — uygulamadaki gece arka planının yankısı. */
.auth-brand::after {
  content: '';
  position: absolute; z-index: -1;
  left: -10%; right: -10%; bottom: -38%;
  height: 60%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(89, 169, 255, 0.16), transparent);
}
.auth-brand > * { position: relative; }

.auth-brand__sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.auth-brand__moon {
  position: absolute; top: 9%; right: 11%;
  width: 60px; height: 60px; border-radius: 50%;
  /* Hilal: dolu disk yerine iç gölge — arka plana koyu yama düşmez. */
  box-shadow: inset 16px -8px 0 0 #FFE2A0, 0 0 70px 6px rgba(255, 217, 138, 0.16);
  transform: rotate(-20deg);
}

.auth-star, .hero-star {
  position: absolute;
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--k-night-star);
  box-shadow: 0 0 6px 1px rgba(255, 231, 168, 0.6);
  animation: twinkle 4s ease-in-out infinite;
}
.auth-star--0  { top: 8%;  left: 12%; animation-delay: .2s; }
.auth-star--1  { top: 15%; left: 46%; animation-delay: 1.4s; width: 2px; height: 2px; }
.auth-star--2  { top: 22%; left: 28%; animation-delay: 2.1s; }
.auth-star--3  { top: 6%;  left: 70%; animation-delay: .8s; width: 2px; height: 2px; }
.auth-star--4  { top: 30%; left: 88%; animation-delay: 3s; }
.auth-star--5  { top: 38%; left: 6%;  animation-delay: 1.1s; width: 2px; height: 2px; }
.auth-star--6  { top: 47%; left: 58%; animation-delay: 2.6s; }
.auth-star--7  { top: 55%; left: 92%; animation-delay: .5s; width: 2px; height: 2px; }
.auth-star--8  { top: 70%; left: 52%; animation-delay: 1.9s; }
.auth-star--9  { top: 72%; left: 44%; animation-delay: 3.4s; width: 2px; height: 2px; }
.auth-star--10 { top: 80%; left: 8%;  animation-delay: 2.3s; }
.auth-star--11 { top: 86%; left: 66%; animation-delay: .1s; width: 2px; height: 2px; }
.auth-star--12 { top: 12%; left: 92%; animation-delay: 1.7s; width: 4px; height: 4px; }
.auth-star--13 { top: 44%; left: 34%; animation-delay: 2.9s; width: 2px; height: 2px; }
@keyframes twinkle {
  0%, 100% { opacity: .25; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1.15); }
}

.auth-brand__lock { display: flex; align-items: baseline; gap: 12px; }
.auth-brand__tagline {
  padding: 4px 10px; border-radius: var(--k-r-pill);
  border: 1px solid rgba(195, 208, 228, 0.22);
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--k-night-ink-2);
}

.auth-brand__stage {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
  gap: 24px;
}
.auth-brand__headline {
  display: flex; flex-direction: column;
  font-family: var(--k-font-display); font-weight: 700;
  font-size: clamp(32px, 3.4vw, 48px); line-height: 1.08; letter-spacing: -0.025em;
  color: var(--k-night-ink);
}
.auth-brand__accent {
  background: linear-gradient(90deg, #59A9FF, #FFB27A);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.auth-brand__lede { margin-top: 16px; max-width: 30ch; font-size: 16px; }

.auth-brand__benefits { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; }
.auth-benefit {
  display: flex; gap: 12px; align-items: flex-start;
  opacity: 0; animation: rise .6s var(--k-ease) forwards;
}
.auth-benefit:nth-child(1) { animation-delay: .25s; }
.auth-benefit:nth-child(2) { animation-delay: .38s; }
.auth-benefit:nth-child(3) { animation-delay: .51s; }
.auth-benefit__icon {
  display: grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: 10px;
  background: rgba(89, 169, 255, 0.14); color: #8CC4FF;
}
.auth-benefit__title { display: block; font-weight: 800; color: var(--k-night-ink); }
.auth-benefit__detail { display: block; font-size: 14px; }

.auth-brand__hero { position: relative; margin: 0; justify-self: center; }
.auth-brand__hero img {
  position: relative; display: block;
  width: min(100%, 300px); height: auto;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.35));
  animation: float 6s ease-in-out infinite;
}
.auth-brand__glow {
  position: absolute; inset: 18% 10% 4%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 217, 138, 0.35), transparent);
  filter: blur(8px);
}
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-10px) rotate(1deg); } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.auth-brand__trust {
  display: flex; align-items: center; gap: 12px;
  max-width: 520px; padding: 14px 16px;
  border: 1px solid rgba(195, 208, 228, 0.14); border-radius: var(--k-r-md);
  background: rgba(255, 255, 255, 0.04);
  font-size: 14px;
}
.auth-brand__shield { display: grid; color: #4FD08F; flex: none; }

/* ---------- Form paneli ---------- */
.auth-pane {
  position: relative;
  display: flex; flex-direction: column;
  padding: 24px clamp(24px, 4vw, 56px);
  background:
    radial-gradient(60% 40% at 100% 0%, var(--k-primary-soft), transparent 70%),
    var(--k-bg);
}
.auth-pane__top { display: flex; justify-content: space-between; align-items: center; }
.auth-pane__body { flex: 1; display: grid; place-items: center; padding: 32px 0; }
.auth-col { width: 100%; max-width: 420px; animation: rise .5s var(--k-ease) both; }

.auth-kicker {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--k-accent); font-weight: 800; font-size: 13px; letter-spacing: .03em;
}
.auth-title { margin-top: 10px; font-size: 32px; line-height: 1.15; }
.auth-lede { margin-top: 8px; color: var(--k-ink-2); }

.auth-alert {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 24px; padding: 12px 14px;
  border-radius: var(--k-r-sm);
  background: var(--k-danger-soft); color: var(--k-danger);
  border: 1px solid color-mix(in srgb, var(--k-danger) 28%, transparent);
  font-weight: 700; font-size: 14px;
}
.auth-alert svg { flex: none; margin-top: 2px; }

.auth-form { display: grid; gap: 18px; margin-top: 28px; }
.auth-field { display: grid; gap: 7px; }
.auth-label { font-weight: 800; font-size: 14px; }
.auth-control { position: relative; }
.auth-control__icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  display: grid; color: var(--k-ink-quiet); pointer-events: none; transition: color .2s;
}
.auth-input {
  width: 100%; height: 50px;
  padding: 0 14px 0 44px;
  border: 1.5px solid var(--k-line-strong); border-radius: var(--k-r-md);
  background: var(--k-surface); color: var(--k-ink);
  font: inherit; font-size: 15px;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.auth-input--revealable { padding-right: 50px; }
.auth-input::placeholder { color: var(--k-ink-quiet); opacity: .8; }
.auth-input:hover { border-color: color-mix(in srgb, var(--k-primary) 45%, var(--k-line-strong)); }
.auth-input:focus-visible { outline: none; border-color: var(--k-primary); box-shadow: var(--k-focus); }
.auth-control:focus-within .auth-control__icon { color: var(--k-primary); }
.auth-field.is-invalid .auth-input { border-color: var(--k-danger); }
.auth-field.is-invalid .auth-control__icon { color: var(--k-danger); }
.auth-input:-webkit-autofill {
  -webkit-text-fill-color: var(--k-ink);
  -webkit-box-shadow: 0 0 0 40px var(--k-surface) inset;
  caret-color: var(--k-ink);
}

.auth-reveal {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center;
  width: 38px; height: 38px; padding: 0;
  border: 0; border-radius: var(--k-r-sm);
  background: transparent; color: var(--k-ink-quiet); cursor: pointer;
}
.auth-reveal[hidden] { display: none; }
.auth-reveal:hover { background: var(--k-surface-warm); color: var(--k-ink); }
.auth-reveal > span { display: grid; }
.auth-reveal__off { display: none !important; }
.auth-reveal[aria-pressed="true"] .auth-reveal__on { display: none !important; }
.auth-reveal[aria-pressed="true"] .auth-reveal__off { display: grid !important; }

.auth-error {
  display: flex; align-items: flex-start; gap: 6px;
  color: var(--k-danger); font-size: 13px; font-weight: 700;
}
.auth-error[hidden] { display: none; }
.auth-error svg { flex: none; margin-top: 2px; }

/* Buton: idle/busy cümleleri aynı ızgara hücresinde; genişlik sabit kalır. */
.auth-btn {
  position: relative;
  display: inline-flex; justify-content: center; align-items: center; gap: 10px;
  height: 52px; margin-top: 6px;
  border: 0; border-radius: var(--k-r-md);
  background: linear-gradient(180deg, var(--k-primary), var(--k-primary-strong));
  color: #fff; font-weight: 800; font-size: 16px; cursor: pointer;
  box-shadow: 0 10px 24px -12px rgba(26, 111, 245, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform .15s var(--k-ease), box-shadow .2s, filter .2s;
}
[data-theme="dark"] .auth-btn { background: linear-gradient(180deg, #4C9BFF, var(--k-primary-strong)); }
.auth-btn:hover { filter: brightness(1.05); box-shadow: 0 14px 28px -12px rgba(26, 111, 245, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.auth-btn:active { transform: translateY(1px) scale(.99); }
.auth-btn__label { display: grid; }
.auth-btn__label > span { grid-area: 1 / 1; transition: opacity .15s; }
.auth-btn__busy { opacity: 0; }
.auth-btn[aria-busy="true"] { cursor: progress; }
.auth-btn[aria-busy="true"] .auth-btn__idle { opacity: 0; }
.auth-btn[aria-busy="true"] .auth-btn__busy { opacity: 1; }
.auth-btn__dots { display: none; gap: 4px; }
.auth-btn[aria-busy="true"] .auth-btn__dots { display: inline-flex; }
.auth-btn__dots i {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  animation: bounce 1s ease-in-out infinite;
}
.auth-btn__dots i:nth-child(2) { animation-delay: .15s; }
.auth-btn__dots i:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%, 100% { transform: translateY(0); opacity: .6; } 50% { transform: translateY(-4px); opacity: 1; } }

.auth-foot {
  margin-top: 28px; padding-top: 20px;
  border-top: 1px dashed var(--k-line-strong);
  color: var(--k-ink-quiet); font-size: 14px;
}

/* ---------- Dar ekran: tek sütun, maskot ve fayda listesi gider ---------- */
@media (max-width: 1080px) {
  .auth-brand__stage { grid-template-columns: 1fr; }
  .auth-brand__hero { display: none; }
}
@media (max-width: 860px) {
  .auth-split { grid-template-columns: 1fr; }
  .auth-brand { gap: 20px; padding: 28px 24px; }
  .auth-brand__benefits, .auth-brand__trust, .auth-brand__lede { display: none; }
  .auth-brand__headline { font-size: 28px; }
}