/* =========================
   YKChatBot Login (App-like)
   - minimal text
   - premium glass + logo stage
   - background aligned with new dark layout
   ========================= */

:root {
    --ink: #0f172a;
    --muted: #64748b;
    /* form + glass */
    --border: rgba(148,163,184,.26);
    --shadow: 0 26px 70px rgba(2,6,23,.16);
    /* layout-aligned aurora background */
    --bg: #0b1220;
    --bg2: #0f172a;
    --aV: rgba(124,58,237,.18); /* violet */
    --aC: rgba(34,211,238,.12); /* cyan */
    --aG: rgba(16,185,129,.08); /* green */
    /* button */
    --btn1: #4f46e5;
    --btn2: #06b6d4;
    /* micro-gold for rim/glow */
    --gold: rgba(212,175,55,.18);
}

* {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    color: var(--ink);
    background: radial-gradient(1100px 720px at 12% 12%, var(--aV), transparent 60%), radial-gradient(900px 560px at 88% 18%, var(--aC), transparent 58%), radial-gradient(1000px 680px at 60% 95%, var(--aG), transparent 55%), linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
}

/* container spacing a bit tighter for "app" vibe */
.container.py-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

/* =========================
   SHELL (premium glass)
   ========================= */
.auth-shell {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 22px;
    background: rgba(255,255,255,.78);
    box-shadow: 0 30px 90px rgba(0,0,0,.35);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

    /* premium edge */
    .auth-shell::before {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: 24px;
        pointer-events: none;
        background: linear-gradient(135deg, rgba(255,255,255,.26), rgba(34,211,238,.12), rgba(124,58,237,.12), rgba(255,255,255,.12));
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        padding: 1px;
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: .85;
    }

/* =========================
   LEFT (minimal form)
   ========================= */
.auth-left {
    padding: 44px 44px;
    background: radial-gradient(900px 520px at 10% 0%, rgba(124,58,237,.06), transparent 55%), radial-gradient(700px 420px at 95% 10%, rgba(34,211,238,.05), transparent 55%), linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.74));
}

    /* top row: hide "Güvenli giriş" badge */
    .auth-left .badge.rounded-pill {
        display: none;
    }

.brand-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(148,163,184,.28);
    background: rgba(255,255,255,.64);
    font-weight: 800;
    letter-spacing: .2px;
    color: #0b1220;
    position: relative;
}

    .brand-badge::after {
        content: "";
        position: absolute;
        inset: -1px;
        border-radius: 999px;
        border: 1px solid var(--gold);
        pointer-events: none;
        opacity: .75;
    }

.brand-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, #111827, #64748b);
    box-shadow: 0 0 0 6px rgba(2,6,23,.06);
}

/* Minimal header */
.auth-title {
    margin-top: 18px;
    margin-bottom: 6px;
    font-weight: 950;
    letter-spacing: -0.95px;
    line-height: 1.08;
    font-size: 2.05rem;
    color: #0b1220;
}

.auth-sub {
    margin: 0;
    color: var(--muted);
    font-size: 1.02rem;
}

/* Reduce text density */
.divider {
    display: none;
}

form .small.text-secondary {
    display: none;
}

/* Labels */
.form-label {
    font-weight: 750;
    color: #0f172a;
    margin-bottom: .45rem;
    font-size: .92rem;
}

/* Unified input component */
.input-group {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(2,6,23,.06);
    transition: box-shadow .2s ease, transform .2s ease;
}

.input-group-text {
    border: 1px solid rgba(148,163,184,.28);
    border-right: 0;
    background: rgba(255,255,255,.88);
    color: #334155;
    padding-left: 14px;
    padding-right: 14px;
}

.form-control {
    border: 1px solid rgba(148,163,184,.28);
    border-left: 0;
    background: rgba(255,255,255,.92);
    height: 52px;
    font-size: 1.02rem;
    color: #0f172a;
}

    .form-control::placeholder {
        color: rgba(15,23,42,.38);
    }

/* Password toggle integrated */
#pwToggle {
    border: 1px solid rgba(148,163,184,.28) !important;
    border-left: 0 !important;
    background: rgba(255,255,255,.88) !important;
    border-radius: 0;
    color: #334155;
}

    #pwToggle:hover {
        background: rgba(255,255,255,.96) !important;
    }

.form-control:focus {
    background: #fff;
    border-color: rgba(124,58,237,.40);
    box-shadow: 0 0 0 .28rem rgba(124,58,237,.12);
}

.input-group:has(.form-control:focus) {
    box-shadow: 0 18px 44px rgba(124,58,237,.10);
    transform: translateY(-1px);
}

/* helper row */
.helper-row {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px dashed rgba(148,163,184,.35);
}

.form-check-label {
    color: #334155;
    font-weight: 650;
}

.form-check-input {
    width: 1.12rem;
    height: 1.12rem;
    border-color: rgba(148,163,184,.45);
}

    .form-check-input:checked {
        background-color: rgba(124,58,237,.95);
        border-color: transparent;
    }

/* CTA button */
.btn-brand {
    --bs-btn-color: #fff;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-border-color: transparent;
    background: radial-gradient(120% 180% at 20% 0%, rgba(255,255,255,.34), transparent 45%), linear-gradient(135deg, var(--btn1), var(--btn2));
    box-shadow: 0 16px 40px rgba(124,58,237,.18);
    font-weight: 900;
    padding: .96rem 1rem;
    border-radius: 16px;
    letter-spacing: .2px;
    position: relative;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

    .btn-brand::after {
        content: "";
        position: absolute;
        inset: -60%;
        background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%);
        transform: rotate(12deg) translateX(-22%);
        opacity: .55;
    }

    .btn-brand:hover {
        transform: translateY(-2px);
        box-shadow: 0 22px 55px rgba(124,58,237,.22);
        filter: brightness(1.02);
    }

    .btn-brand:active {
        transform: translateY(0);
    }

/* Validation */
.validation-summary-errors {
    border: 1px solid rgba(239,68,68,.22);
    background: rgba(239,68,68,.05);
    color: #991b1b;
    padding: 10px 12px;
    border-radius: 16px;
}

    .validation-summary-errors ul {
        margin: 0;
        padding-left: 18px;
    }

/* =========================
   RIGHT (logo stage)
   ========================= */
.auth-right {
    position: relative;
    min-height: 520px;
    background: radial-gradient(900px 520px at 30% 20%, rgba(255,255,255,.16), transparent 60%), radial-gradient(700px 420px at 80% 30%, rgba(34,211,238,.18), transparent 58%), radial-gradient(900px 620px at 55% 95%, rgba(124,58,237,.20), transparent 60%), linear-gradient(135deg, rgba(6,10,22,.96), rgba(15,23,42,.86));
}

    /* floating shapes */
    .auth-right::before {
        content: "";
        position: absolute;
        inset: -120px -120px auto auto;
        width: 340px;
        height: 340px;
        border-radius: 80px;
        transform: rotate(18deg);
        background: rgba(255,255,255,.10);
    }

    .auth-right::after {
        content: "";
        position: absolute;
        inset: auto auto -150px -150px;
        width: 420px;
        height: 420px;
        border-radius: 100px;
        transform: rotate(-14deg);
        background: rgba(255,255,255,.08);
    }

.hero {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 34px;
    color: #fff;
}

    /* keep clean */
    .hero h4, .hero p {
        display: none;
    }

.hero-card {
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 14px 14px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.hero-ico {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(212,175,55,.18);
}

.hero-img {
    width: 100%;
    max-width: 320px;
    height: auto;
    filter: drop-shadow(0 22px 48px rgba(0,0,0,.45)) drop-shadow(0 0 18px rgba(255,215,0,.20));
}

/* Footer subtle */
.text-center.text-secondary {
    color: rgba(161,161,170,.70) !important;
}

/* Responsive */
@media (max-width: 991.98px) {
    .auth-left {
        padding: 32px 22px;
    }

    .auth-right {
        min-height: 420px;
    }
}

@media (max-width: 767.98px) {
    .auth-right {
        display: none;
    }

    .auth-shell {
        border-radius: 18px;
    }
}