/* Giriş / kayıt — neumorfik (soft UI) tema */
:root {
    --nm-bg: #2b2b2b;
    --nm-bg-mid: #303030;
    --nm-dark: #222222;
    --nm-light: #3a3a3a;
    --nm-text: #f0f0f0;
    --nm-muted: #9a9a9a;
    --nm-placeholder: #7d7d7d;
    --nm-google-bg: #f8f9fa;
    --nm-google-text: #3c4043;
    --nm-font: "Segoe UI", system-ui, -apple-system, sans-serif;
    --nm-inset: inset 5px 5px 12px var(--nm-dark), inset -5px -5px 12px var(--nm-light);
    --nm-outset-lg: 8px 8px 18px var(--nm-dark), -6px -6px 16px rgba(80, 80, 80, 0.35);
    --nm-pill: 9999px;
    /* Ana sayfa header ile aynı (main.css body.dark-mode --header-strip-*) */
    --header-strip-bg: #2a2a2a;
    --header-strip-border: #404040;
    --auth-panel-surface: rgba(42, 42, 42, 0.68);
    --auth-panel-border: #404040;
    --auth-panel-inner: rgba(42, 42, 42, 0.45);
    --auth-panel-blur: 18px;
    /* Ana sayfa ile aynı ince gri scrollbar: assets/css/main.css — body.dark-mode */
    --auth-scrollbar-w: 8px;
    --auth-scrollbar-track: #2a2a2a;
    --auth-scrollbar-thumb: #555555;
    --auth-scrollbar-thumb-hover: #666666;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    min-height: 100%;
    margin: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body.auth-page {
    font-family: var(--nm-font);
    color: var(--nm-text);
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    min-height: 100svh;
    min-height: -webkit-fill-available;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding:
        clamp(1rem, 4vmin, 2rem)
        clamp(0.75rem, 3vmin, 1.125rem)
        max(5.25rem, 11vmin);
    background: var(--nm-bg);
    -webkit-font-smoothing: antialiased;
    position: relative;
    overflow-x: hidden;
    overflow-x: clip;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--auth-scrollbar-thumb) var(--auth-scrollbar-track);
}

/* main.css body.dark-mode::-webkit-scrollbar* ile aynı (gri, ince, ok yok) */
body.auth-page::-webkit-scrollbar,
html:has(body.auth-page)::-webkit-scrollbar {
    width: var(--auth-scrollbar-w);
}

body.auth-page::-webkit-scrollbar-track,
html:has(body.auth-page)::-webkit-scrollbar-track {
    background: var(--auth-scrollbar-track);
}

body.auth-page::-webkit-scrollbar-thumb,
html:has(body.auth-page)::-webkit-scrollbar-thumb {
    background: var(--auth-scrollbar-thumb);
    border-radius: 4px;
}

body.auth-page::-webkit-scrollbar-thumb:hover,
html:has(body.auth-page)::-webkit-scrollbar-thumb:hover {
    background: var(--auth-scrollbar-thumb-hover);
}

body.auth-page::-webkit-scrollbar-button,
html:has(body.auth-page)::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

body.auth-page::-webkit-scrollbar-corner,
html:has(body.auth-page)::-webkit-scrollbar-corner {
    background: var(--auth-scrollbar-track);
}

html:has(body.auth-page) {
    scrollbar-width: thin;
    scrollbar-color: var(--auth-scrollbar-thumb) var(--auth-scrollbar-track);
}

body.auth-page::before {
    display: none;
}

/* Tam ekran: /svg oyun logoları + header ile aynı site logosu (saydam) */
.auth-bg-wallpaper {
    position: fixed;
    inset: 0;
    z-index: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    min-height: 100svh;
    min-height: -webkit-fill-available;
    pointer-events: none;
    overflow: hidden;
    background: var(--nm-bg);
}

.auth-bg-wallpaper__decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.auth-bg-wallpaper__mosaic {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(2.05rem, 8.2vmin, 3rem), 1fr));
    grid-auto-rows: minmax(clamp(2.05rem, 8.2vmin, 3rem), auto);
    gap: clamp(3px, 1vmin, 8px);
    align-content: start;
    justify-items: stretch;
    align-items: stretch;
    /* Alt boşluk küçük: eski max(22vh) uzaklaştırınca altta logo kalmıyordu */
    padding: clamp(6px, 1.5vmin, 12px) clamp(4px, 1vmin, 10px) clamp(8px, 2vmin, 18px);
    /* Mozaik: hafif karartma — /svg logoları tam seçilmesin, arka plan hissi */
    filter: brightness(0.82) contrast(0.92);
}

.auth-bg-wallpaper__tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    aspect-ratio: 1;
    opacity: 0.11;
    overflow: hidden;
    border-radius: 3px;
}

.auth-bg-wallpaper__tile-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    transform:
        translate(var(--auth-tx, 0px), var(--auth-ty, 0px))
        rotate(var(--auth-rot, 0deg))
        skewX(var(--auth-skx, 0deg))
        scaleX(var(--auth-sx, 1))
        scale(var(--auth-s, 0.88));
    transform-origin: center center;
}

.auth-bg-wallpaper__tile:nth-child(3n) {
    opacity: 0.09;
}

.auth-bg-wallpaper__tile:nth-child(5n) {
    opacity: 0.12;
}

.auth-bg-wallpaper__tile:nth-child(7n) {
    opacity: 0.1;
}

.auth-bg-wallpaper__tile img {
    width: 64%;
    height: 64%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    filter: grayscale(100%) brightness(0.56) contrast(0.76);
}

/* Site logosu filigranı kaldırıldı */
.auth-bg-wallpaper__mark,
.auth-bg-wallpaper__site-svg {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.auth-bg-wallpaper__veil {
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        radial-gradient(ellipse 86% 70% at 50% 44%, rgba(43, 43, 43, 0.46) 0%, rgba(43, 43, 43, 0.72) 50%, rgba(43, 43, 43, 0.97) 100%),
        linear-gradient(180deg, rgba(34, 34, 34, 0.56) 0%, transparent 28%, transparent 72%, rgba(34, 34, 34, 0.62) 100%);
    pointer-events: none;
}

@media (max-width: 520px) {
    .auth-bg-wallpaper__mosaic {
        grid-template-columns: repeat(auto-fill, minmax(clamp(1.9rem, 10vmin, 2.65rem), 1fr));
        grid-auto-rows: minmax(clamp(1.9rem, 10vmin, 2.65rem), auto);
        gap: clamp(3px, 1vmin, 7px);
        padding-bottom: clamp(8px, 3vh, 20px);
    }

}

.auth-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.auth-wrap {
    width: 100%;
    max-width: min(420px, 100%);
    position: relative;
    z-index: 3;
    padding: 0 clamp(8px, 2.5vw, 14px);
    box-sizing: border-box;
}

.auth-wrap.auth-wide {
    max-width: min(520px, 100%);
}

/* Giriş sayfası: form dar / kısa panel — üst maskot aynı kalır */
body.auth-page-login .auth-wrap {
    max-width: min(400px, 94vw);
}

body.auth-page-login .auth-panel {
    padding: clamp(1.1rem, 3.5vmin, 1.5rem) clamp(0.9rem, 3vmin, 1.2rem) clamp(1.2rem, 3.5vmin, 1.5rem);
}

body.auth-page-login .auth-brand-nm {
    --auth-rim-pill-max: 100%;
}

body.auth-page-login .auth-title-nm {
    margin-bottom: 16px;
    padding: 8px 14px;
}

body.auth-page-login .auth-field {
    margin-bottom: 14px;
}

body.auth-page-login .auth-btn-submit {
    padding: 14px 20px;
}

/* Tüm form + logo + başlık: duvar kağıdı ile uyumlu tek cam panel */
.auth-panel {
    position: relative;
    background: var(--auth-panel-surface);
    -webkit-backdrop-filter: blur(var(--auth-panel-blur));
    backdrop-filter: blur(var(--auth-panel-blur));
    border: 1px solid var(--auth-panel-border);
    border-radius: clamp(18px, 4vmin, 26px);
    padding: clamp(1.25rem, 4.2vmin, 1.85rem) clamp(1rem, 3.5vmin, 1.4rem) clamp(1.35rem, 4vmin, 1.75rem);
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    isolation: isolate;
}

.auth-panel .auth-brand-nm {
    margin-bottom: clamp(0.85rem, 2.5vmin, 1.15rem);
}

.auth-panel .auth-logo-rim:not(.is-message-opening):not(.is-message-open) {
    background: var(--auth-panel-inner);
    box-shadow:
        inset 0 2px 12px rgba(0, 0, 0, 0.38),
        0 1px 0 rgba(255, 255, 255, 0.05);
}

.auth-panel .auth-title-nm {
    background: var(--auth-panel-inner);
    box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.32);
}

.auth-panel .auth-input-pill {
    background: rgba(42, 42, 42, 0.72);
    box-shadow: var(--nm-inset);
}

.auth-panel .auth-alert {
    background: rgba(42, 42, 42, 0.78);
    box-shadow: var(--nm-inset);
}

.auth-panel .auth-turnstile {
    background: transparent;
    box-shadow: none;
}

.auth-panel .auth-remember {
    background: var(--auth-panel-inner);
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.28);
}

.auth-panel .auth-check {
    background: var(--auth-panel-inner);
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.28);
}

.auth-panel .password-strength {
    background: var(--auth-panel-inner);
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.28);
}

.auth-panel .strength-bar {
    background: rgba(42, 42, 42, 0.65);
}

@media (prefers-reduced-motion: reduce) {
    .auth-panel {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: var(--header-strip-bg);
    }
}

.auth-brand-nm {
    --auth-rim-size: clamp(46px, 10vmin, 52px);
    --auth-mascot-size: clamp(30px, 7vmin, 34px);
    --auth-rim-pill-radius: 9999px;
    --auth-rim-pill-max: 100%;
    --auth-bubble-max: 100%;
    --auth-brand-slot-h: var(--auth-rim-size);
    --auth-rim-ease: cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: var(--auth-brand-slot-h);
    min-height: var(--auth-brand-slot-h);
    flex-shrink: 0;
    box-sizing: border-box;
}

.auth-brand-nm > .auth-logo-rim {
    position: relative;
    top: auto;
    left: auto;
    margin: 0;
    transform: none;
    -webkit-transform: none;
}

.auth-logo-rim {
    --auth-panel-dur: 5s;
    --auth-panel-ease: cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    display: grid;
    grid-template-columns: var(--auth-rim-size) 0fr;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    max-width: var(--auth-rim-size);
    height: var(--auth-rim-size);
    min-height: var(--auth-rim-size);
    padding: 5px;
    gap: 0;
    border-radius: 50%;
    background: linear-gradient(165deg, rgba(42, 44, 50, 0.98) 0%, rgba(24, 25, 30, 1) 55%, rgba(16, 17, 22, 1) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    overflow: hidden;
    contain: layout style;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    transition:
        max-width var(--auth-panel-dur) var(--auth-panel-ease),
        grid-template-columns var(--auth-panel-dur) var(--auth-panel-ease),
        border-radius calc(var(--auth-panel-dur) * 0.9) var(--auth-panel-ease),
        gap calc(var(--auth-panel-dur) * 0.45) var(--auth-panel-ease),
        padding calc(var(--auth-panel-dur) * 0.35) var(--auth-panel-ease),
        box-shadow 0.5s ease,
        background 0.5s ease,
        border-color 0.5s ease;
}

.auth-logo-rim.is-panel-animating {
    will-change: max-width;
}

.auth-logo-anchor {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--auth-mascot-size);
    height: var(--auth-mascot-size);
    margin: 0;
    padding: 0;
    pointer-events: none;
}

.auth-logo-rim.is-message-opening,
.auth-logo-rim.is-message-open {
    max-width: var(--auth-rim-pill-max);
    grid-template-columns: var(--auth-rim-size) 1fr;
    padding: 5px 8px 5px 5px;
    border-radius: var(--auth-rim-pill-radius);
    gap: 7px;
    background: linear-gradient(165deg, rgba(48, 50, 56, 0.98) 0%, rgba(28, 29, 34, 1) 50%, rgba(18, 19, 24, 1) 100%);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.auth-logo-rim.is-message-closing {
    max-width: var(--auth-rim-size);
    grid-template-columns: var(--auth-rim-size) 0fr;
    padding: 5px;
    gap: 0;
    border-radius: 50%;
    background: var(--auth-panel-inner);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow:
        inset 0 2px 12px rgba(0, 0, 0, 0.32),
        0 1px 0 rgba(255, 255, 255, 0.05);
}

.auth-brand-nm--success .auth-logo-rim.is-message-open,
.auth-brand-nm--success .auth-logo-rim.is-message-opening {
    background: linear-gradient(165deg, rgba(38, 72, 50, 0.98) 0%, rgba(22, 48, 34, 1) 55%, rgba(14, 34, 24, 1) 100%);
    border-color: rgba(120, 210, 150, 0.24);
}

.auth-speech-bubble {
    position: relative;
    box-sizing: border-box;
    min-width: 0;
    height: calc(var(--auth-rim-size) - 10px);
    max-height: calc(var(--auth-rim-size) - 10px);
    padding: 0 10px;
    border-radius: var(--auth-rim-pill-radius);
    background: linear-gradient(160deg, rgba(72, 74, 80, 0.55) 0%, rgba(26, 28, 32, 0.82) 100%);
    border: 1px solid transparent;
    box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.22);
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    transform: translate3d(0, 0, 0);
    transition:
        opacity 0.55s var(--auth-panel-ease) 3.35s,
        border-color 0.4s ease 3.2s;
}

.auth-logo-rim.is-message-opening .auth-speech-bubble,
.auth-logo-rim.is-message-open .auth-speech-bubble {
    opacity: 1;
    border-color: rgba(255, 255, 255, 0.1);
}

.auth-logo-rim.is-message-closing .auth-speech-bubble {
    opacity: 0;
    border-color: transparent;
    transition: opacity 0.35s ease;
}

.auth-speech-bubble__text {
    display: block;
    margin: 0;
    width: 100%;
    font-size: clamp(0.62rem, 2.5vw, 0.72rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: #f4f4f6;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transform: translate3d(-10px, 0, 0);
    transition:
        opacity 0.5s var(--auth-panel-ease) 3.65s,
        transform 0.5s var(--auth-panel-ease) 3.65s;
}

.auth-logo-rim.is-message-opening .auth-speech-bubble__text,
.auth-logo-rim.is-message-open .auth-speech-bubble__text {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.auth-logo-rim.is-message-closing .auth-speech-bubble__text {
    opacity: 0;
    transform: translate3d(-8px, 0, 0);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.auth-logo-rim.is-message-opening .auth-logo-wave-wrap,
.auth-logo-rim.is-message-open .auth-logo-wave-wrap,
.auth-logo-rim.is-message-closing .auth-logo-wave-wrap {
    flex-shrink: 0;
}

.auth-brand-nm--success .auth-logo-rim.is-message-open .auth-speech-bubble,
.auth-brand-nm--success .auth-logo-rim.is-message-opening .auth-speech-bubble {
    background: linear-gradient(160deg, rgba(50, 104, 70, 0.55) 0%, rgba(20, 44, 30, 0.78) 100%);
    border-color: rgba(130, 220, 160, 0.22);
}

.auth-brand-nm--success .auth-speech-bubble__text {
    color: #eefef4;
}

.auth-logo-wave-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 0;
    width: var(--auth-mascot-size);
    height: var(--auth-mascot-size);
}

.auth-ghost-mascot {
    display: block;
    width: var(--auth-mascot-size);
    height: var(--auth-mascot-size);
    overflow: visible;
}

.auth-ghost-mascot .auth-ghost-body {
    transform: rotate(-7deg);
    transform-origin: 32px 34px;
    transform-box: view-box;
}

.auth-ghost-mascot .auth-ghost-arm {
    transform-origin: 42px 30px;
    transform-box: view-box;
}

.auth-logo-rim.is-ghost-arm-active .auth-ghost-body {
    -webkit-animation: auth-ghost-body-bob 2.2s ease-in-out infinite;
    animation: auth-ghost-body-bob 2.2s ease-in-out infinite;
}

.auth-logo-rim.is-message-open .auth-site-logo {
    max-width: 34px;
    max-height: 34px;
}

.auth-site-logo {
    display: block;
    width: auto;
    height: auto;
    max-width: 36px;
    max-height: 36px;
    object-fit: contain;
    object-position: center center;
    margin: 0;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    vertical-align: middle;
}

@-webkit-keyframes auth-ghost-arm-wave {
    0%,
    100% {
        -webkit-transform: rotate(-12deg);
        transform: rotate(-12deg);
    }
    20% {
        -webkit-transform: rotate(38deg);
        transform: rotate(38deg);
    }
    40% {
        -webkit-transform: rotate(-6deg);
        transform: rotate(-6deg);
    }
    60% {
        -webkit-transform: rotate(34deg);
        transform: rotate(34deg);
    }
    80% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }
}

@keyframes auth-ghost-arm-wave {
    0%,
    100% {
        transform: rotate(-12deg);
    }
    20% {
        transform: rotate(38deg);
    }
    40% {
        transform: rotate(-6deg);
    }
    60% {
        transform: rotate(34deg);
    }
    80% {
        transform: rotate(4deg);
    }
}

@-webkit-keyframes auth-ghost-body-bob {
    0%,
    100% {
        -webkit-transform: rotate(-7deg) translateY(0);
        transform: rotate(-7deg) translateY(0);
    }
    50% {
        -webkit-transform: rotate(-7deg) translateY(-2px);
        transform: rotate(-7deg) translateY(-2px);
    }
}

@keyframes auth-ghost-body-bob {
    0%,
    100% {
        transform: rotate(-7deg) translateY(0);
    }
    50% {
        transform: rotate(-7deg) translateY(-2px);
    }
}

@media (min-width: 769px) {
    .auth-brand-nm {
        --auth-rim-size: clamp(44px, 9vmin, 50px);
        --auth-mascot-size: 32px;
    }

    .auth-site-logo {
        max-width: 32px;
        max-height: 32px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-logo-rim {
        --auth-panel-dur: 0.01ms;
    }

    .auth-logo-rim,
    .auth-speech-bubble,
    .auth-speech-bubble__text {
        transition: none !important;
    }

    .auth-logo-rim.is-panel-animating {
        will-change: auto;
    }

    .auth-logo-rim.is-ghost-arm-active .auth-ghost-body {
        -webkit-animation: none;
        animation: none;
    }
}

.auth-title-nm {
    text-align: center;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--nm-muted);
    margin: 0 0 22px;
    padding: 10px 16px;
    border-radius: var(--nm-pill);
    background: var(--nm-bg);
    box-shadow: var(--nm-inset);
}

.auth-field {
    margin-bottom: 18px;
}

.auth-label-nm {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--nm-muted);
    margin: 0 0 8px 10px;
}

.auth-label-nm--field {
    text-align: left;
    text-transform: none;
    letter-spacing: 0.1em;
    margin: 0 0 8px 4px;
}

.auth-input-shell {
    position: relative;
}

.auth-input-pill {
    width: 100%;
    border: none;
    border-radius: var(--nm-pill);
    padding: 16px 22px;
    background: var(--nm-bg);
    color: var(--nm-text);
    font-size: 0.95rem;
    text-align: center;
    box-shadow: var(--nm-inset);
    outline: none;
    transition: box-shadow 0.2s ease, color 0.15s ease;
}

.auth-input-pill--left {
    text-align: left;
    padding-left: 20px;
}

.auth-input-pill--pwd {
    padding-right: 48px;
}

.auth-input-pill:focus {
    box-shadow:
        inset 6px 6px 14px #1a1a1a,
        inset -4px -4px 12px #3d3d3d,
        0 0 0 1px rgba(255, 255, 255, 0.05);
}

.auth-input-pill::placeholder {
    color: var(--nm-placeholder);
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    text-transform: uppercase;
}

.auth-eye-nm {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--nm-muted);
    padding: 10px 12px;
    border-radius: var(--nm-pill);
    cursor: pointer;
}

.auth-eye-nm:hover {
    color: var(--nm-text);
}

.auth-input-row {
    position: relative;
}

.auth-input-row > .fa,
.auth-input-row > .fas {
    display: none;
}

.auth-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 520px) {
    .auth-row-2 {
        grid-template-columns: 1fr;
    }
}

.btn-google {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 22px;
    border: none;
    border-radius: var(--nm-pill);
    background: linear-gradient(180deg, #ef5350 0%, #e54b3c 42%, #d23f2f 100%);
    color: #fff;
    font-weight: 700;
    font-size: 0.92rem;
    letter-spacing: 0.03em;
    cursor: pointer;
    text-decoration: none;
    margin: 0 0 14px;
    box-shadow:
        0 4px 18px rgba(229, 75, 60, 0.55),
        0 1px 0 rgba(255, 255, 255, 0.18) inset;
    transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.btn-google:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow:
        0 6px 22px rgba(229, 75, 60, 0.65),
        0 1px 0 rgba(255, 255, 255, 0.22) inset;
}

.btn-google:active {
    transform: translateY(0);
    filter: brightness(0.96);
    box-shadow:
        0 2px 10px rgba(180, 40, 30, 0.45),
        0 1px 0 rgba(255, 255, 255, 0.12) inset;
}

.btn-google__icon {
    flex-shrink: 0;
    font-size: 1.15rem;
    line-height: 1;
    color: #fff;
}

.btn-google--inactive {
    opacity: 0.78;
    filter: saturate(0.9);
}

.btn-google--inactive:hover {
    filter: saturate(0.95) brightness(1.02);
}

/* Eski çok renkli SVG (varsa) */
.btn-google .google-g {
    flex-shrink: 0;
    display: block;
}

.btn-google .google-g path {
    fill: #fff;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0 18px;
    color: var(--nm-muted);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

.auth-turnstile {
    margin: 14px 0 18px;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    text-align: center;
    min-height: 65px;
    overflow: visible;
}

.auth-turnstile .cf-turnstile {
    display: inline-block;
    vertical-align: middle;
    min-width: 300px;
    min-height: 65px;
    line-height: 0;
}

.auth-turnstile iframe {
    display: block;
    margin: 0 auto;
    border: none !important;
    min-height: 65px;
}

.auth-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0 16px;
    font-size: 0.86rem;
}

.auth-forgot-only {
    text-align: center;
    margin: 6px 0 18px;
}

.auth-forgot-only a {
    color: var(--nm-text);
    text-decoration: underline;
    text-underline-offset: 4px;
    font-size: 0.88rem;
    font-weight: 500;
}

.auth-forgot-only a:hover {
    color: #fff;
}

.auth-remember {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--nm-muted);
    cursor: pointer;
    user-select: none;
    padding: 8px 12px;
    border-radius: var(--nm-pill);
    background: var(--nm-bg);
    box-shadow: var(--nm-inset);
}

.auth-remember input {
    accent-color: #5eb0ff;
    width: 16px;
    height: 16px;
}

.auth-link {
    color: #9ecfff;
    text-decoration: none;
    font-weight: 600;
}

.auth-link:hover {
    text-decoration: underline;
}

.auth-btn-submit,
.btn-primary-auth {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 24px;
    border: none;
    border-radius: var(--nm-pill);
    background: linear-gradient(145deg, #343434, #2d2d2d);
    color: #fff;
    font-weight: 700;
    font-size: 0.88rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: var(--nm-outset-lg);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.auth-btn-submit:hover:not(:disabled),
.btn-primary-auth:hover:not(:disabled) {
    transform: translateY(-1px);
}

.auth-btn-submit:active:not(:disabled),
.btn-primary-auth:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: var(--nm-inset);
}

.auth-btn-submit:disabled,
.btn-primary-auth:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.auth-footer-text {
    text-align: center;
    margin-top: 22px;
    font-size: 0.88rem;
    color: var(--nm-muted);
}

.auth-bottom-link {
    text-align: center;
    margin-top: 20px;
}

.auth-bottom-link a {
    color: var(--nm-muted);
    text-decoration: none;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
}

.auth-bottom-link a:hover {
    color: var(--nm-text);
    text-decoration: underline;
}

body.auth-page .auth-page-footer.auth-page-footer--bar {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* Telif: açık gri, küçük; yalnızca yazı üzerinde metin imleci + seçim */
.auth-page-footer.auth-page-footer--bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding:
        10px
        max(14px, env(safe-area-inset-right, 0px))
        max(8px, env(safe-area-inset-bottom, 0px))
        max(14px, env(safe-area-inset-left, 0px));
    border: none;
    border-radius: 0;
    background: var(--header-strip-bg);
    color: #c5cad6;
    font-weight: 500;
    font-size: clamp(0.4rem, 1.05vmin, 0.5rem);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.35;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    box-shadow: none;
    -webkit-font-smoothing: antialiased;
    pointer-events: auto;
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
}

.auth-page-footer.auth-page-footer--bar .auth-page-footer__text {
    cursor: text;
    user-select: text;
    -webkit-user-select: text;
    color: #c8ced9;
}

.auth-page-footer.auth-page-footer--bar .auth-page-footer__text::selection {
    background: rgba(94, 176, 255, 0.35);
    color: #f0f4fa;
}

.auth-page-footer.auth-page-footer--bar .auth-page-footer__text::-moz-selection {
    background: rgba(94, 176, 255, 0.35);
    color: #f0f4fa;
}

.auth-alert {
    padding: 14px 16px;
    border-radius: 18px;
    margin-bottom: 18px;
    font-size: 0.88rem;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.45;
    background: var(--nm-bg);
    box-shadow: var(--nm-inset);
}

.auth-alert-error {
    color: #ffb4b4;
}

.auth-alert-success {
    color: #b8f5c8;
}

.auth-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 8px 0 16px;
    font-size: 0.82rem;
    color: var(--nm-muted);
    line-height: 1.45;
    padding: 12px 14px;
    border-radius: 16px;
    background: var(--nm-bg);
    box-shadow: var(--nm-inset);
}

.auth-check input {
    margin-top: 3px;
    accent-color: #5eb0ff;
}

.password-strength {
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 14px;
    background: var(--nm-bg);
    box-shadow: var(--nm-inset);
}

.strength-bar {
    height: 5px;
    border-radius: var(--nm-pill);
    background: var(--nm-bg);
    box-shadow: var(--nm-inset);
    overflow: hidden;
}

.strength-level {
    height: 100%;
    width: 0;
    border-radius: var(--nm-pill);
    transition: width 0.2s ease, background 0.2s ease;
}

.strength-weak { background: #e57373; width: 33%; }
.strength-medium { background: #ffb74d; width: 66%; }
.strength-strong { background: #81c784; width: 100%; }

.strength-text {
    font-size: 0.72rem;
    color: var(--nm-muted);
    margin-top: 6px;
}

.auth-card {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

.auth-heading {
    text-align: center;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--nm-muted);
    margin: 0 0 22px;
    padding: 10px 16px;
    border-radius: var(--nm-pill);
    background: var(--nm-bg);
    box-shadow: var(--nm-inset);
}

.auth-toggle-eye {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--nm-muted);
    padding: 10px 12px;
    border-radius: var(--nm-pill);
    cursor: pointer;
}

.auth-toggle-eye:hover {
    color: var(--nm-text);
}

@media (max-width: 1024px) {
    a,
    button,
    input,
    select,
    textarea,
    label,
    [role="button"],
    [onclick] {
        -webkit-tap-highlight-color: transparent;
        tap-highlight-color: transparent;
        touch-action: manipulation;
    }
}

/* ── Site teması: karanlık / aydınlık mod (ana sayfa ile uyumlu) ── */

.auth-theme-toggle {
    position: fixed;
    top: max(14px, env(safe-area-inset-top, 0px));
    right: max(14px, env(safe-area-inset-right, 0px));
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.auth-theme-toggle .toggle-icon {
    position: relative;
    width: 18px;
    height: 18px;
}

.auth-theme-toggle .sun-icon,
.auth-theme-toggle .moon-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

body.auth-page.dark-mode {
    --nm-bg: #0b0c10;
    --nm-bg-mid: #121318;
    --nm-dark: #08090c;
    --nm-light: #1a1c23;
    --nm-text: #e8eaed;
    --nm-muted: #94a3b8;
    --nm-placeholder: #64748b;
    --header-strip-bg: #14151a;
    --header-strip-border: #2d3139;
    --auth-panel-surface: rgba(20, 21, 26, 0.9);
    --auth-panel-border: #2d3139;
    --auth-panel-inner: rgba(26, 28, 35, 0.72);
    --auth-scrollbar-track: #14151a;
    --auth-scrollbar-thumb: #3d4451;
    --auth-scrollbar-thumb-hover: #4b5563;
    --nm-inset: inset 4px 4px 10px #08090c, inset -3px -3px 8px #1a1c23;
    --nm-outset-lg: 6px 6px 16px rgba(0, 0, 0, 0.45), -4px -4px 12px rgba(40, 44, 52, 0.2);
}

body.auth-page.light-mode {
    --nm-bg: #e9ecef;
    --nm-bg-mid: #f3f4f6;
    --nm-dark: #d1d5db;
    --nm-light: #ffffff;
    --nm-text: #111827;
    --nm-muted: #6b7280;
    --nm-placeholder: #9ca3af;
    --header-strip-bg: #ffffff;
    --header-strip-border: rgba(74, 158, 255, 0.18);
    --auth-panel-surface: rgba(255, 255, 255, 0.94);
    --auth-panel-border: rgba(74, 158, 255, 0.15);
    --auth-panel-inner: rgba(243, 244, 246, 0.95);
    --auth-scrollbar-track: #e9ecef;
    --auth-scrollbar-thumb: #c5cad3;
    --auth-scrollbar-thumb-hover: #a8b0bc;
    --nm-inset: inset 3px 3px 8px #d1d5db, inset -2px -2px 6px #ffffff;
    --nm-outset-lg: 4px 4px 14px rgba(0, 0, 0, 0.08), -2px -2px 8px rgba(255, 255, 255, 0.9);
}

body.auth-page.dark-mode .auth-theme-toggle {
    background: rgba(20, 21, 26, 0.88);
    border-color: #2d3139;
}

body.auth-page.dark-mode .auth-theme-toggle:hover {
    background: #1a1c23;
    border-color: #3d4451;
}

body.auth-page.dark-mode .auth-theme-toggle .sun-icon {
    color: #fbbf24;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-90deg);
}

body.auth-page.dark-mode .auth-theme-toggle .moon-icon {
    color: #cbd5e1;
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg);
}

body.auth-page.light-mode .auth-theme-toggle {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(74, 158, 255, 0.2);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

body.auth-page.light-mode .auth-theme-toggle:hover {
    background: #ffffff;
    border-color: rgba(74, 158, 255, 0.35);
}

body.auth-page.light-mode .auth-theme-toggle .sun-icon {
    color: #f59e0b;
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg);
}

body.auth-page.light-mode .auth-theme-toggle .moon-icon {
    color: #6b7280;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg);
}

body.auth-page.light-mode .auth-bg-wallpaper {
    background: #e9ecef;
}

body.auth-page.light-mode .auth-bg-wallpaper__mosaic {
    filter: brightness(1.05) contrast(0.88);
}

body.auth-page.light-mode .auth-bg-wallpaper__tile img {
    filter: grayscale(100%) brightness(0.42) contrast(0.7);
}

body.auth-page.light-mode .auth-bg-wallpaper__veil {
    background:
        radial-gradient(ellipse 86% 70% at 50% 44%, rgba(233, 236, 239, 0.35) 0%, rgba(233, 236, 239, 0.72) 50%, rgba(233, 236, 239, 0.96) 100%),
        linear-gradient(180deg, rgba(220, 224, 228, 0.5) 0%, transparent 28%, transparent 72%, rgba(220, 224, 228, 0.55) 100%);
}

body.auth-page.dark-mode .auth-bg-wallpaper {
    background: #0b0c10;
}

body.auth-page.dark-mode .auth-bg-wallpaper__veil {
    background:
        radial-gradient(ellipse 86% 70% at 50% 44%, rgba(11, 12, 16, 0.5) 0%, rgba(11, 12, 16, 0.78) 50%, rgba(11, 12, 16, 0.97) 100%),
        linear-gradient(180deg, rgba(8, 9, 12, 0.58) 0%, transparent 28%, transparent 72%, rgba(8, 9, 12, 0.62) 100%);
}

body.auth-page.light-mode .auth-panel {
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

body.auth-page.light-mode .auth-panel .auth-input-pill {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: var(--nm-inset);
    color: #111827;
}

body.auth-page.light-mode .auth-input-pill:focus {
    border-color: rgba(74, 158, 255, 0.45);
    box-shadow:
        inset 3px 3px 8px #e5e7eb,
        inset -2px -2px 6px #ffffff,
        0 0 0 2px rgba(74, 158, 255, 0.12);
}

body.auth-page.light-mode .auth-divider::before,
body.auth-page.light-mode .auth-divider::after {
    background: rgba(0, 0, 0, 0.08);
    box-shadow: none;
}

body.auth-page.light-mode .auth-link {
    color: #2563eb;
}

body.auth-page.light-mode .auth-forgot-only a {
    color: #374151;
}

body.auth-page.light-mode .auth-forgot-only a:hover {
    color: #111827;
}

body.auth-page.light-mode .auth-alert-error {
    color: #b91c1c;
    background: #fef2f2;
}

body.auth-page.light-mode .auth-alert-success {
    color: #15803d;
    background: #f0fdf4;
}

body.auth-page.light-mode .auth-btn-submit,
body.auth-page.light-mode .btn-primary-auth {
    background: linear-gradient(145deg, #ff7a1a, #ff6b00);
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(255, 107, 0, 0.28);
}

body.auth-page.light-mode .auth-btn-submit:hover:not(:disabled),
body.auth-page.light-mode .btn-primary-auth:hover:not(:disabled) {
    filter: brightness(1.04);
    box-shadow: 0 6px 20px rgba(255, 107, 0, 0.34);
}

body.auth-page.dark-mode .auth-btn-submit,
body.auth-page.dark-mode .btn-primary-auth {
    background: linear-gradient(145deg, #ff7a1a, #e65f00);
    box-shadow: 0 4px 18px rgba(255, 107, 0, 0.22);
}

body.auth-page.dark-mode .auth-btn-submit:hover:not(:disabled),
body.auth-page.dark-mode .btn-primary-auth:hover:not(:disabled) {
    filter: brightness(1.05);
}

body.auth-page.light-mode .auth-logo-rim {
    border-color: rgba(74, 158, 255, 0.15);
    background: #ffffff;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

body.auth-page.light-mode .auth-logo-rim.is-message-opening,
body.auth-page.light-mode .auth-logo-rim.is-message-open {
    background: linear-gradient(165deg, #ffffff 0%, #f3f4f6 55%, #e9ecef 100%);
    border-color: rgba(74, 158, 255, 0.22);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

body.auth-page.light-mode .auth-logo-rim.is-message-closing {
    background: #ffffff;
    border-color: rgba(74, 158, 255, 0.15);
}

body.auth-page.light-mode .auth-speech-bubble {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.95) 0%, rgba(243, 244, 246, 0.98) 100%);
}

body.auth-page.light-mode .auth-speech-bubble__text {
    color: #1f2937;
    text-shadow: none;
}

body.auth-page.light-mode .auth-title-nm,
body.auth-page.light-mode .auth-heading {
    color: #6b7280;
    background: var(--auth-panel-inner);
}

body.auth-page.light-mode .auth-turnstile,
body.auth-page.dark-mode .auth-turnstile {
    background: none;
    border: none;
    box-shadow: none;
}