/* =========================================================
   WimoCP Tema · NOVA — Giriş / Kayıt / Şifremi unuttum (bölünmüş ekran)
   Sol: tam yükseklikte koyu mavi marka paneli (logo, başlık, sayfaya özel içerik, geometrik şekiller)
   Sağ: sade form alanı. 960px altında marka paneli gizlenir, logo formun üstüne gelir.
   ========================================================= */
:root { --danger: #dc2626; --danger-soft: rgb(220 38 38 / .08); --ok: #059669; --as-ink: #e6f1f8; --as-mute: rgb(230 241 248 / .68); }
[data-theme="dark"] { --danger: #f87171; --danger-soft: rgb(248 113 113 / .1); --ok: #34d399; }
.as [hidden] { display: none !important; }

.as-body { min-height: 100dvh; background: var(--surface); }
.as { display: grid; min-height: 100dvh; }
@media (min-width: 960px) { .as { grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); } }

/* ---------- Sol: marka paneli ---------- */
.as-brand { display: none; }
@media (min-width: 960px) {
  .as-brand {
    position: sticky; top: 0; height: 100dvh; overflow: hidden; isolation: isolate;
    display: flex; flex-direction: column; padding: 2.5rem 3.25rem;
    color: var(--as-ink);
    background:
      radial-gradient(60% 50% at 85% 10%, rgb(108 195 236 / .28), transparent 70%),
      radial-gradient(50% 45% at 0% 100%, rgb(16 185 129 / .16), transparent 70%),
      linear-gradient(160deg, #0e6a98 0%, #0c5a82 40%, #083b57 100%);
  }
  [data-theme="dark"] .as-brand { background: radial-gradient(60% 50% at 85% 10%, rgb(108 195 236 / .18), transparent 70%), radial-gradient(50% 45% at 0% 100%, rgb(16 185 129 / .1), transparent 70%), linear-gradient(160deg, #0b4a6b 0%, #082f45 55%, #061f2e 100%); }
}
/* İnce nokta dokusu */
.as-brand::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgb(255 255 255 / .14) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(80% 70% at 30% 40%, #000, transparent 85%); mask-image: radial-gradient(80% 70% at 30% 40%, #000, transparent 85%); }
.as-shapes { position: absolute; inset: 0; z-index: -1; pointer-events: none; --gs: #fff; }
.as-shapes .gs-ring { left: auto; right: -7rem; top: -5rem; width: 22rem; height: 22rem; opacity: .14; }
.as-shapes .gs-ring-dash { right: 12%; bottom: 18%; opacity: .25; }
.as-shapes .gs-square { right: 10%; top: 34%; opacity: .14; }
.as-shapes .gs-square-line { left: 8%; bottom: 14%; opacity: .22; }
.as-shapes .gs-dot { left: 62%; top: 16%; opacity: .5; }
.as-shapes .gs-dot2 { right: 30%; bottom: 10%; }
.as-shapes .gs-dots { left: auto; right: 6%; top: auto; bottom: 34%; opacity: .25; }
.as-shapes .gs-tri { left: 70%; top: 58%; opacity: .25; }
.as-shapes .gs-plus { right: 8%; top: 12%; opacity: .4; }
.as-shapes .gs-x { left: 46%; bottom: 8%; opacity: .35; }
.as-shapes svg { stroke: #fff; fill: none; }

.as-logo { color: #fff; }
.as-logo .logo-word, .as-logo .logo-word span { color: #fff; }
.as-logo .logo-word span { color: #9fdcf7; }
.as-brand-body { margin-block: auto; max-width: 30rem; padding-block: 2.5rem; }
.as-h { font-family: var(--font-display); font-size: clamp(2.3rem, 1.2rem + 2.2vw, 3.3rem); font-weight: 700; line-height: 1.06; letter-spacing: -.045em; color: #fff; text-wrap: balance; }
.as-h span { color: #9fdcf7; }
.as-p { margin-top: 1.1rem; font-size: 16.5px; line-height: 1.65; color: var(--as-mute); }
.as-brand-foot { display: flex; justify-content: space-between; gap: 1rem; font-size: 13px; color: var(--as-mute); }
.as-brand-foot span { display: inline-flex; align-items: center; gap: .4rem; }
.as-brand-foot svg { width: 1rem; height: 1rem; color: #6ee7b7; }

/* Cam kartlar (giriş) / onay listesi (kayıt) / adımlar (şifre) */
.as-glass, .as-perks, .as-steps { margin-top: 2.25rem; display: grid; gap: .7rem; list-style: none; padding: 0; }
.as-glass li, .as-perks li, .as-steps li {
  display: flex; align-items: center; gap: .9rem; padding: .85rem 1rem; border-radius: 16px;
  background: rgb(255 255 255 / .07); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .13), inset 0 1px 0 rgb(255 255 255 / .1);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform .5s var(--ui-spring), background-color .3s var(--ui-spring);
  animation: as-rise .8s var(--ui-spring) both;
}
.as-glass li:hover, .as-perks li:hover, .as-steps li:hover { transform: translateX(4px); background: rgb(255 255 255 / .1); }
.as-glass li:nth-child(1), .as-perks li:nth-child(1), .as-steps li:nth-child(1) { animation-delay: .25s; }
.as-glass li:nth-child(2), .as-perks li:nth-child(2), .as-steps li:nth-child(2) { animation-delay: .33s; }
.as-glass li:nth-child(3), .as-perks li:nth-child(3), .as-steps li:nth-child(3) { animation-delay: .41s; }
.as-perks li:nth-child(4) { animation-delay: .49s; }
.as-glass div, .as-perks div, .as-steps div { flex: 1; min-width: 0; }
.as-glass b, .as-perks b, .as-steps b { display: block; font-size: 14.5px; font-weight: 600; color: #fff; }
.as-glass small, .as-perks small, .as-steps small { display: block; margin-top: .1rem; font-size: 13px; color: var(--as-mute); }
.as-gi { width: 2.3rem; height: 2.3rem; flex-shrink: 0; display: grid; place-items: center; border-radius: 11px; color: #9fdcf7; background: rgb(255 255 255 / .1); }
.as-gi svg { width: 1.1rem; height: 1.1rem; }
.as-glass em { padding: .2rem .6rem; border-radius: 999px; font-style: normal; font-size: 12px; font-weight: 600; color: #6ee7b7; background: rgb(16 185 129 / .16); }
.as-perks li > span { width: 1.9rem; height: 1.9rem; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; color: #063247; background: #6ee7b7; }
.as-perks li > span svg { width: 1rem; height: 1rem; }
.as-steps li > span { width: 1.9rem; height: 1.9rem; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; font-size: 13.5px; font-weight: 700; color: #063247; background: #9fdcf7; }

/* ---------- Sağ: form alanı ---------- */
.as-main { display: flex; flex-direction: column; min-height: 100dvh; padding: 1.25rem 1.25rem 1.5rem; outline: none; }
@media (min-width: 640px) { .as-main { padding: 1.75rem 2.5rem 2rem; } }
.as-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.as-logo-m { font-size: 20px; }
@media (min-width: 960px) { .as-logo-m { visibility: hidden; } }
.as-top-actions { display: flex; align-items: center; gap: .35rem; }
.as-home { display: inline-flex; align-items: center; gap: .4rem; height: 2.4rem; padding-inline: .85rem; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--text-soft); transition: color .25s var(--ui-spring), background-color .25s var(--ui-spring); }
.as-home svg { width: 1rem; height: 1rem; transition: transform .45s var(--ui-spring); }
.as-home:hover { color: var(--text); background: var(--hover); }
.as-home:hover svg { transform: translateX(-3px); }
.as-theme { width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 50%; }
.as-theme svg { grid-area: 1 / 1; }
.as-top :is(a, button):focus-visible, .as-help a:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--hl); border-radius: 999px; }

.as-form { width: 100%; max-width: 25rem; margin: auto; padding-block: 2.5rem; }
.as-form-wide { max-width: 32rem; }
.as-eyebrow { display: inline-flex; align-items: center; gap: .45rem; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--hl); }
.as-eyebrow::before { content: ""; width: 1.25rem; height: 2px; border-radius: 2px; background: currentColor; }
.auth-h { margin-top: .7rem; font-family: var(--font-display); font-size: clamp(1.9rem, 1.4rem + 1.2vw, 2.4rem); font-weight: 700; line-height: 1.12; letter-spacing: -.04em; color: var(--text); }
.auth-h:focus { outline: none; }
.auth-p { margin-top: .6rem; font-size: 15.5px; line-height: 1.6; color: var(--text-muted); }
.auth-p b { color: var(--text); font-weight: 600; word-break: break-all; }
.auth-switch { margin-top: 1.75rem; font-size: 14.5px; color: var(--text-muted); }
.auth-switch a, .af-check a, .as-help a { font-weight: 600; color: var(--hl); }
.auth-switch a:hover, .af-check a:hover, .as-help a:hover { text-decoration: underline; text-underline-offset: 3px; }
.as-help { display: flex; align-items: center; justify-content: center; gap: .45rem; font-size: 13.5px; color: var(--text-muted); text-align: center; }
.as-help svg { width: 1rem; height: 1rem; color: var(--hl); flex-shrink: 0; }

/* Form parçaları sırayla gelir */
.as-form > *, .af > *, .af-step > * { animation: as-rise .7s var(--ui-spring) both; }
.as-form > :nth-child(2), .af-step > :nth-child(2) { animation-delay: .05s; }
.as-form > :nth-child(3), .af-step > :nth-child(3) { animation-delay: .1s; }
.af > :nth-child(1) { animation-delay: .14s; } .af > :nth-child(2) { animation-delay: .18s; } .af > :nth-child(3) { animation-delay: .22s; }
.af > :nth-child(4) { animation-delay: .26s; } .af > :nth-child(5) { animation-delay: .3s; } .af > :nth-child(n+6) { animation-delay: .34s; }
.as-brand-body { animation: as-rise .9s var(--ui-spring) .1s both; }
@keyframes as-rise { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } }

/* ---------- Form ---------- */
.af { margin-top: 2rem; display: grid; gap: 1.15rem; }
.af-row { display: grid; gap: 1.15rem; }
@media (min-width: 520px) { .af-row { grid-template-columns: 1fr 1fr; } }
.af-corp { display: grid; gap: 1.15rem; }
.af-corp:not([hidden]) { animation: as-rise .5s var(--ui-spring) both; }
.af-field { display: grid; gap: .45rem; min-width: 0; }
.af-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.af-label { font-size: 13.5px; font-weight: 600; color: var(--text); }
.af-link { display: inline-flex; align-items: center; gap: .35rem; font-size: 13px; font-weight: 600; color: var(--hl); }
.af-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.af-link svg { width: .95rem; height: .95rem; }

.af-control { position: relative; display: flex; align-items: center; height: 3.15rem; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-strong, var(--border)); transition: box-shadow .3s var(--ui-spring); }
.af-control:hover { box-shadow: inset 0 0 0 1px var(--text-faint, var(--border-strong)); }
.af-control:focus-within { box-shadow: inset 0 0 0 1.5px var(--hl), 0 0 0 4px rgb(12 90 130 / .12); }
[data-theme="dark"] .af-control { background: rgb(255 255 255 / .02); }
[data-theme="dark"] .af-control:focus-within { box-shadow: inset 0 0 0 1.5px var(--hl), 0 0 0 4px rgb(92 184 230 / .15); }
.af-control input { flex: 1; min-width: 0; height: 100%; padding: 0 1rem; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15px; color: var(--text); }
.af-control input::placeholder { color: var(--text-faint, var(--text-muted)); }
.af-ico { width: 1.05rem; height: 1.05rem; margin-left: 1rem; flex-shrink: 0; color: var(--text-muted); transition: color .3s var(--ui-spring); }
.af-ico + input { padding-left: .65rem; }
.af-control:focus-within .af-ico { color: var(--hl); }
.af-prefix { align-self: stretch; display: grid; place-items: center; padding-inline: .9rem; border-right: 1px solid var(--border); font-size: 14.5px; font-weight: 600; color: var(--text-soft); }

.af-eye { width: 2.4rem; height: 2.4rem; margin-right: .35rem; display: grid; place-items: center; border-radius: 10px; color: var(--text-muted); transition: color .2s var(--ui-spring), background-color .2s var(--ui-spring), transform .2s var(--ui-spring); }
.af-eye:hover { color: var(--text); background: var(--hover); }
.af-eye:active { transform: scale(.92); }
.af-eye:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--hl); }
.af-eye svg { width: 1.1rem; height: 1.1rem; grid-area: 1 / 1; transition: opacity .25s var(--ui-spring), transform .35s var(--ui-spring); }
.af-eye .ic-hide, .af-eye[aria-pressed="true"] .ic-show { opacity: 0; transform: scale(.6) rotate(-20deg); }
.af-eye[aria-pressed="true"] .ic-hide { opacity: 1; transform: none; }

.af-hint { display: flex; align-items: center; gap: .35rem; font-size: 12.5px; color: var(--text-muted); }
.af-hint svg { width: .9rem; height: .9rem; }
.af-caps { color: #b45309; }
[data-theme="dark"] .af-caps { color: #fbbf24; }

.af-err { display: flex; align-items: center; gap: .35rem; font-size: 12.5px; font-weight: 500; color: var(--danger); }
.af-err:not([hidden]) { animation: as-shake .35s var(--ui-spring); }
.af-err::before { content: ""; width: .4rem; height: .4rem; flex-shrink: 0; border-radius: 50%; background: currentColor; }
.af-field.is-invalid .af-control { box-shadow: inset 0 0 0 1.5px var(--danger), 0 0 0 4px var(--danger-soft); }
.af-field.is-invalid .af-ico { color: var(--danger); }
.af-field.is-valid .af-control:not(:focus-within) { box-shadow: inset 0 0 0 1px rgb(5 150 105 / .45); }
@keyframes as-shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

.af-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; }
.af-meter i { height: 4px; border-radius: 4px; background: var(--border); transition: background-color .4s var(--ui-spring); }
.af-meter[data-level="1"] i:nth-child(-n+1) { background: #ef4444; }
.af-meter[data-level="2"] i:nth-child(-n+2) { background: #f59e0b; }
.af-meter[data-level="3"] i:nth-child(-n+3) { background: #0ea5e9; }
.af-meter[data-level="4"] i { background: #10b981; }

.af-seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: .3rem; border: 0; border-radius: 14px; background: var(--section-muted); box-shadow: inset 0 0 0 1px var(--border); }
.af-seg::before { content: ""; position: absolute; top: .3rem; bottom: .3rem; left: .3rem; width: calc(50% - .3rem); border-radius: 11px; background: var(--surface); box-shadow: 0 1px 2px rgb(var(--shadow-color) / .08), 0 6px 14px -8px rgb(12 90 130 / .35), inset 0 0 0 1px var(--border); transition: transform .5s var(--ui-spring); }
.af-seg:has(input[value="corporate"]:checked)::before { transform: translateX(100%); }
.af-seg label { position: relative; z-index: 1; cursor: pointer; }
.af-seg input { position: absolute; opacity: 0; pointer-events: none; }
.af-seg span { height: 2.6rem; display: flex; align-items: center; justify-content: center; gap: .45rem; font-size: 14px; font-weight: 600; color: var(--text-muted); transition: color .3s var(--ui-spring); }
.af-seg span svg { width: 1rem; height: 1rem; }
.af-seg input:checked + span { color: var(--text); }
.af-seg input:focus-visible + span { border-radius: 11px; box-shadow: 0 0 0 2px var(--hl); }

.af-check { display: flex; align-items: flex-start; gap: .65rem; font-size: 13.5px; line-height: 1.5; color: var(--text-soft); cursor: pointer; }
.af-check input { appearance: none; -webkit-appearance: none; position: relative; flex-shrink: 0; width: 1.15rem; height: 1.15rem; margin-top: .1rem; border-radius: 6px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--border-strong, var(--border)); cursor: pointer; transition: background-color .25s var(--ui-spring), box-shadow .25s var(--ui-spring); }
.af-check input::after { content: ""; position: absolute; left: .38rem; top: .17rem; width: .3rem; height: .58rem; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .35s var(--ui-spring); }
.af-check input:checked { background: var(--navy-900); box-shadow: none; }
.af-check input:checked::after { transform: rotate(45deg) scale(1); }
.af-check input:focus-visible { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--hl); }
.af-check.is-invalid input { box-shadow: inset 0 0 0 1.5px var(--danger), 0 0 0 4px var(--danger-soft); }
.af-err-check { margin-top: -.6rem; padding-left: 1.8rem; }

.af-alert { display: flex; align-items: flex-start; gap: .6rem; padding: .85rem 1rem; border-radius: 14px; font-size: 13.5px; line-height: 1.5; }
.af-alert:not([hidden]) { animation: as-rise .5s var(--ui-spring) both; }
.af-alert svg { width: 1.05rem; height: 1.05rem; flex-shrink: 0; margin-top: .1rem; }
.af-alert.is-ok { color: var(--ok); background: rgb(16 185 129 / .08); box-shadow: inset 0 0 0 1px rgb(16 185 129 / .25); }
.af-alert.is-err { color: var(--danger); background: var(--danger-soft); box-shadow: inset 0 0 0 1px rgb(220 38 38 / .25); }
.af-alert b { color: var(--text); }

/* Gönder: tam genişlik, iç dairede ok (button-in-button), yükleniyor durumu */
.af-submit { position: relative; width: 100%; height: 3.15rem; justify-content: center; gap: .6rem; padding-right: .45rem; padding-left: 2.85rem; border-radius: 999px; transition: transform .25s var(--ui-spring), box-shadow .3s var(--ui-spring), background-color .25s var(--ui-spring); }
.af-submit:hover { box-shadow: 0 0 0 4px var(--shell), 0 14px 26px -14px rgb(12 90 130 / .7); }
.af-submit .go { margin-left: auto; width: 2.2rem; height: 2.2rem; color: #fff; background: rgb(255 255 255 / .16); transition: transform .45s var(--ui-spring), background-color .3s var(--ui-spring); }
.af-submit > span:not(.go) { margin-left: auto; }
.af-submit:hover .go { transform: translate(2px, -2px) scale(1.06); background: rgb(255 255 255 / .26); }
.af-submit:active { transform: scale(.98); }
[data-theme="dark"] .af-submit .go { color: var(--navy-900); background: rgb(12 90 130 / .12); }
.af-spin { position: absolute; left: 1.1rem; width: 1.1rem; height: 1.1rem; opacity: 0; transform: scale(.5); transition: opacity .25s var(--ui-spring), transform .35s var(--ui-spring); }
.af-submit.is-loading { pointer-events: none; }
.af-submit.is-loading .af-spin { opacity: 1; transform: none; animation: as-spin .8s linear infinite; }
.af-submit.is-loading .go { opacity: .4; }
@keyframes as-spin { to { transform: rotate(360deg); } }

.af-or { display: flex; align-items: center; gap: .9rem; margin-top: 1.5rem; font-size: 12.5px; color: var(--text-muted); }
.af-or::before, .af-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.af-alt { width: 100%; height: 3.15rem; margin-top: 1rem; justify-content: center; gap: .55rem; border-radius: 999px; transition: transform .25s var(--ui-spring), background-color .25s var(--ui-spring); }
.af-alt svg { width: 1.05rem; height: 1.05rem; }
.af-alt:active { transform: scale(.98); }
.af-alt[aria-disabled="true"] { opacity: .55; pointer-events: none; }

.af-done { display: grid; justify-items: start; }
.af-done-ico { width: 3.5rem; height: 3.5rem; margin-bottom: 1.5rem; display: grid; place-items: center; border-radius: 16px; color: var(--ok); background: rgb(16 185 129 / .1); box-shadow: 0 0 0 6px rgb(16 185 129 / .06); }
.af-done-ico svg { width: 1.6rem; height: 1.6rem; }
.af-done .auth-h { margin-top: 0; }
.af-done .af-alt { margin-top: 1.75rem; }
.af-back { margin-top: 1rem; }

@media (prefers-reduced-motion: reduce) {
  .as-form > *, .af > *, .af-step > *, .as-brand-body, .as-glass li, .as-perks li, .as-steps li, .af-alert, .af-corp, .af-err { animation: none !important; }
  .af-submit.is-loading .af-spin { animation-duration: 2s; }
}
@media (prefers-reduced-transparency: reduce) { .as-glass li, .as-perks li, .as-steps li { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(255 255 255 / .12); } }

/* Koyu panelde logo işareti beyaz */
.as-logo .logo-img { filter: brightness(0) invert(1); }