/* ==========================================================================
   KreatifPanel - Giris ekrani
   Bolunmus ekran duzeni + acik/koyu tema.
   Sadece Login.cshtml tarafindan kullanilir; AdminLTE'den bagimsizdir.
   ========================================================================== */

/* --- Tema degiskenleri: acik tema varsayilan --------------------------- */
:root {
    --kp-bg: #f1f4f9;
    --kp-surface: #ffffff;
    --kp-text: #101a2b;
    --kp-muted: #5d6b82;
    --kp-border: #dde3ed;
    --kp-input-bg: #ffffff;
    --kp-input-icon: #8a97ab;
    --kp-primary: #2563eb;
    --kp-primary-hover: #1d4ed8;
    --kp-primary-ring: rgba(37, 99, 235, .18);
    --kp-danger: #dc2626;
    --kp-danger-bg: rgba(220, 38, 38, .08);
    /* Hatali alanin odak halkasi - mavi halka hatayi gizliyordu */
    --kp-danger-ring: rgba(220, 38, 38, .22);
    /* Hata metni: --kp-danger beyaz kart uzerinde 4.38 kaliyordu */
    --kp-danger-text: #b91c1c;
    --kp-shadow: 0 18px 40px -20px rgba(16, 26, 43, .35);
    --kp-toggle-bg: rgba(16, 26, 43, .05);

    /* Marka paneli her iki temada da koyu kalir */
    --kp-brand-from: #1e3a8a;
    --kp-brand-to: #2563eb;
    --kp-brand-text: #ffffff;
    --kp-brand-muted: rgba(255, 255, 255, .72);
    --kp-brand-line: rgba(255, 255, 255, .16);
}

/* Sistem koyu tema - kullanici acik temayi acikca secmediyse */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --kp-bg: #0d141f;
        --kp-surface: #151f2e;
        --kp-text: #e7edf7;
        --kp-muted: #94a3b8;
        --kp-border: #253449;
        --kp-input-bg: #101a27;
        --kp-input-icon: #7b8ca3;
        --kp-primary: #4f8cff;
        --kp-primary-hover: #3b7bf5;
        --kp-primary-ring: rgba(79, 140, 255, .22);
        --kp-danger: #f87171;
        --kp-danger-bg: rgba(248, 113, 113, .1);
        --kp-danger-ring: rgba(248, 113, 113, .25);
        --kp-danger-text: #f87171;
        --kp-shadow: 0 18px 40px -18px rgba(0, 0, 0, .7);
        --kp-toggle-bg: rgba(255, 255, 255, .06);

        --kp-brand-from: #101c33;
        --kp-brand-to: #1e40af;
    }
}

/* Kullanicinin acikca sectigi koyu tema */
:root[data-theme="dark"] {
    --kp-bg: #0d141f;
    --kp-surface: #151f2e;
    --kp-text: #e7edf7;
    --kp-muted: #94a3b8;
    --kp-border: #253449;
    --kp-input-bg: #101a27;
    --kp-input-icon: #7b8ca3;
    --kp-primary: #4f8cff;
    --kp-primary-hover: #3b7bf5;
    --kp-primary-ring: rgba(79, 140, 255, .22);
    --kp-danger: #f87171;
    --kp-danger-bg: rgba(248, 113, 113, .1);
    --kp-danger-ring: rgba(248, 113, 113, .25);
    --kp-danger-text: #f87171;
    --kp-shadow: 0 18px 40px -18px rgba(0, 0, 0, .7);
    --kp-toggle-bg: rgba(255, 255, 255, .06);

    --kp-brand-from: #101c33;
    --kp-brand-to: #1e40af;
}

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

html,
body {
    height: 100%;
}

body.kp-login-page {
    margin: 0;
    background: var(--kp-bg);
    color: var(--kp-text);
    font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.kp-login {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    min-height: 100vh;
}

/* --- Sol: marka paneli -------------------------------------------------- */
.kp-brand {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 3rem;
    color: var(--kp-brand-text);
    background: linear-gradient(150deg, var(--kp-brand-from) 0%, var(--kp-brand-to) 100%);
}

/* Arka plandaki yumusak isik lekeleri */
.kp-brand::before,
.kp-brand::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.kp-brand::before {
    width: 26rem;
    height: 26rem;
    top: -8rem;
    right: -9rem;
    background: radial-gradient(circle, rgba(255, 255, 255, .16) 0%, transparent 70%);
}

.kp-brand::after {
    width: 20rem;
    height: 20rem;
    bottom: -7rem;
    left: -6rem;
    background: radial-gradient(circle, rgba(255, 255, 255, .1) 0%, transparent 70%);
}

.kp-brand > * {
    position: relative;
    z-index: 1;
}

.kp-brand__mark {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: .01em;
}

.kp-brand__logo {
    display: grid;
    place-items: center;
    /* Logo kendi karosunu tasiyor; ek cerceve yok */
    width: 2.75rem;
    height: 2.75rem;
}

.kp-brand__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.kp-brand__headline {
    max-width: 26rem;
    margin: 0 0 1rem;
    font-size: clamp(1.85rem, 2.4vw, 2.6rem);
    font-weight: 700;
    line-height: 1.2;
}

.kp-brand__sub {
    max-width: 28rem;
    margin: 0 0 2.25rem;
    color: var(--kp-brand-muted);
}

.kp-brand__list {
    display: grid;
    gap: .85rem;
    margin: 0;
    padding: 0;
    list-style: none;
    max-width: 28rem;
}

.kp-brand__list li {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    color: var(--kp-brand-muted);
}

.kp-brand__list i {
    margin-top: .3rem;
    font-size: .8rem;
    color: var(--kp-brand-text);
}

.kp-brand__foot {
    padding-top: 2rem;
    border-top: 1px solid var(--kp-brand-line);
    color: var(--kp-brand-muted);
    font-size: .875rem;
}

/* --- Sag: form ---------------------------------------------------------- */
.kp-pane {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
}

.kp-theme-toggle {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    display: inline-grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid var(--kp-border);
    border-radius: .75rem;
    background: var(--kp-toggle-bg);
    color: var(--kp-muted);
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}

.kp-theme-toggle:hover {
    color: var(--kp-text);
    border-color: var(--kp-primary);
}

.kp-theme-toggle:focus-visible {
    outline: none;
    border-color: var(--kp-primary);
    box-shadow: 0 0 0 4px var(--kp-primary-ring);
}

/* Aktif temaya gore ikonlardan biri gizlenir */
.kp-theme-toggle .kp-icon-dark {
    display: none;
}

:root[data-theme="dark"] .kp-theme-toggle .kp-icon-dark {
    display: block;
}

:root[data-theme="dark"] .kp-theme-toggle .kp-icon-light {
    display: none;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .kp-theme-toggle .kp-icon-dark {
        display: block;
    }

    :root:not([data-theme="light"]) .kp-theme-toggle .kp-icon-light {
        display: none;
    }
}

.kp-card {
    width: 100%;
    max-width: 25rem;
}

.kp-card__title {
    margin: 0 0 .4rem;
    font-size: 1.75rem;
    font-weight: 700;
}

.kp-card__sub {
    margin: 0 0 2rem;
    color: var(--kp-muted);
}

.kp-mobile-mark {
    display: none;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1.75rem;
    font-weight: 700;
    font-size: 1.1rem;
}

.kp-mobile-mark img {
    width: 1.5rem;
    height: 1.5rem;
    object-fit: contain;
}

/* --- Form alanlari ------------------------------------------------------ */
.kp-field {
    margin-bottom: 1.15rem;
}

.kp-field__label {
    display: block;
    margin-bottom: .45rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--kp-text);
}

.kp-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.kp-input-wrap > i {
    position: absolute;
    left: .95rem;
    font-size: .95rem;
    color: var(--kp-input-icon);
    pointer-events: none;
}

.kp-input {
    width: 100%;
    padding: .75rem 1rem .75rem 2.6rem;
    font: inherit;
    color: var(--kp-text);
    background: var(--kp-input-bg);
    border: 1px solid var(--kp-border);
    border-radius: .625rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.kp-input::placeholder {
    color: var(--kp-input-icon);
}

.kp-input:focus {
    outline: none;
    border-color: var(--kp-primary);
    box-shadow: 0 0 0 4px var(--kp-primary-ring);
}

.kp-input--password {
    padding-right: 2.9rem;
}

.kp-eye {
    position: absolute;
    right: .35rem;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: .5rem;
    background: transparent;
    color: var(--kp-input-icon);
    cursor: pointer;
}

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

.kp-eye:focus-visible {
    outline: none;
    color: var(--kp-primary);
    box-shadow: 0 0 0 3px var(--kp-primary-ring);
}

/* --- Dogrulama ozeti ---------------------------------------------------- */
.kp-alert {
    display: flex;
    gap: .6rem;
    margin-bottom: 1.25rem;
    padding: .8rem .9rem;
    color: var(--kp-danger);
    background: var(--kp-danger-bg);
    border: 1px solid var(--kp-danger);
    border-radius: .625rem;
    font-size: .9rem;
}

/* asp-validation-summary bos oldugunda hicbir sey gostermeyelim */
.kp-alert:not(:has(li)) {
    display: none;
}

.kp-alert ul {
    margin: 0;
    padding-left: 1.1rem;
}

.kp-alert i {
    margin-top: .18rem;
}

/* --- Buton -------------------------------------------------------------- */
.kp-btn {
    width: 100%;
    padding: .8rem 1rem;
    margin-top: .35rem;
    font: inherit;
    font-weight: 600;
    color: #fff;
    background: var(--kp-primary);
    border: 0;
    border-radius: .625rem;
    cursor: pointer;
    transition: background .15s ease, transform .05s ease;
}

.kp-btn:hover {
    background: var(--kp-primary-hover);
}

.kp-btn:active {
    transform: translateY(1px);
}

.kp-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--kp-primary-ring);
}

.kp-card__foot {
    margin: 1.75rem 0 0;
    color: var(--kp-muted);
    font-size: .8125rem;
    text-align: center;
}

/* --- Duyarli duzen ------------------------------------------------------ */
@media (max-width: 900px) {
    .kp-login {
        grid-template-columns: 1fr;
    }

    .kp-brand {
        display: none;
    }

    .kp-mobile-mark {
        display: flex;
    }

    .kp-pane {
        min-height: 100vh;
        padding: 4.5rem 1.25rem 2.5rem;
        align-items: flex-start;
    }

    .kp-card {
        margin: 0 auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
    }
}

/* --- Alan bazli hata ---------------------------------------------------- */
/* Butun mesajlar ustteki kutuda toplaniyordu; hangi alanin sorunlu oldugu
   belli olmuyordu. Artik alanin kendisi kirmizi, mesaji hemen altinda.
   .input-validation-error ve .field-validation-error siniflarini ASP.NET
   Core'un kendi tag helper'lari basiyor. */

.kp-input.input-validation-error {
    border-color: var(--kp-danger);
    background: var(--kp-danger-bg);
}

.kp-input.input-validation-error:focus {
    border-color: var(--kp-danger);
    /* Odak halkasi da kirmizi olsun; mavi halka hata durumunu gizliyordu */
    box-shadow: 0 0 0 4px var(--kp-danger-ring, rgba(220, 38, 38, .22));
}

/* Soldaki ikon da alanla ayni dili konussun */
.kp-input-wrap:has(.input-validation-error) > i {
    color: var(--kp-danger);
}

.kp-field__msg {
    display: block;
    margin-top: .4rem;
    color: var(--kp-danger-text, #b91c1c);
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.4;
}

/* Hata yokken tag helper bos bir span basiyor; ust bosluk kalmasin */
.kp-field__msg:empty {
    display: none;
}