/**
 * Starlit-tempmail — ziyaretçi giriş ekranı stilleri.
 *
 * Sorumluluk: Yıldızlı uzay arka planı, kayan yıldız animasyonları, giriş kartı ve
 * özel onay kutusu. Yalnızca oturum AÇILMAMIŞ ziyaretçilere yüklenir; panel kullanıcısı
 * bu kuralların hiçbirini indirmez.
 *
 * Daha önce `index.php` içinde satır içi `<style>` bloğuydu; şablonu 200 satır şişiriyor
 * ve tarayıcı önbelleğinden hiç yararlanamıyordu.
 */

html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }

        body.login-page-body {
            /* Giriş ekranında siyah-silver vurgu */
            --mcs-accent: #ffffff;
            --mcs-accent-hover: #e8e8e8;
            --mcs-accent-rgb: 255, 255, 255;
            position: fixed; inset: 0; z-index: 9999;
            display: flex; align-items: center; justify-content: center; padding: 20px;
            background:
                radial-gradient(1200px 600px at 50% -10%, rgba(255, 255, 255, 0.04), transparent 60%),
                radial-gradient(900px 500px at 50% 110%, rgba(255, 255, 255, 0.02), transparent 60%),
                linear-gradient(180deg, #000000 0%, #000000 100%);
            overflow: hidden;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }

        /* Yayılan / parıldayan yıldız katmanları — yoğun */
        .mcs-login-stars {
            position: absolute; inset: -50%; pointer-events: none; opacity: 0.7;
            background-image:
                radial-gradient(1.6px 1.6px at 5% 12%, #fff, transparent),
                radial-gradient(1px 1px at 14% 64%, #cfe8ff, transparent),
                radial-gradient(2px 2px at 22% 31%, #fff, transparent),
                radial-gradient(1px 1px at 28% 88%, #fff, transparent),
                radial-gradient(1.4px 1.4px at 35% 18%, #cfe8ff, transparent),
                radial-gradient(1px 1px at 41% 72%, #fff, transparent),
                radial-gradient(1.8px 1.8px at 48% 44%, #fff, transparent),
                radial-gradient(1px 1px at 55% 9%, #cfe8ff, transparent),
                radial-gradient(1.3px 1.3px at 61% 84%, #fff, transparent),
                radial-gradient(1px 1px at 67% 27%, #fff, transparent),
                radial-gradient(1.7px 1.7px at 73% 59%, #fff, transparent),
                radial-gradient(1px 1px at 80% 14%, #cfe8ff, transparent),
                radial-gradient(1.4px 1.4px at 86% 77%, #fff, transparent),
                radial-gradient(1px 1px at 91% 38%, #fff, transparent),
                radial-gradient(1.6px 1.6px at 96% 66%, #fff, transparent),
                radial-gradient(1px 1px at 8% 47%, #fff, transparent),
                radial-gradient(1px 1px at 50% 95%, #cfe8ff, transparent),
                radial-gradient(1.2px 1.2px at 33% 55%, #fff, transparent);
            background-repeat: repeat; background-size: 34% 34%;
            animation: mcs-twinkle 5s ease-in-out infinite alternate, mcs-spread 22s ease-in-out infinite alternate;
        }
        .mcs-login-stars-2 {
            opacity: 0.5; background-size: 26% 26%;
            animation: mcs-twinkle 7s ease-in-out infinite alternate-reverse, mcs-drift 30s linear infinite;
        }
        .mcs-login-stars-3 {
            opacity: 0.4; background-size: 44% 44%;
            animation: mcs-twinkle 4s ease-in-out infinite alternate, mcs-spread 28s ease-in-out infinite alternate-reverse;
        }
        @keyframes mcs-twinkle { from { opacity: 0.3; } to { opacity: 0.85; } }
        @keyframes mcs-spread { from { transform: scale(1) rotate(0deg); } to { transform: scale(1.3) rotate(7deg); } }
        @keyframes mcs-drift { from { transform: translate(0,0); } to { transform: translate(-8%,-5%); } }

        /* Kayan yıldızlar — daha çok ve daha sık */
        .mcs-login-shoot {
            position: absolute; left: -12%; width: 150px; height: 2px; pointer-events: none;
            background: linear-gradient(90deg, transparent, #fff, transparent);
            border-radius: 2px; opacity: 0;
            filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.85));
            animation: mcs-shoot 4s ease-in infinite;
        }
        .mcs-login-shoot { top: 10%; animation-delay: 0s; animation-duration: 3.5s; }
        .mcs-login-shoot-2 { top: 26%; animation-delay: 1.2s; animation-duration: 4.2s; }
        .mcs-login-shoot-3 { top: 44%; animation-delay: 2.1s; animation-duration: 3.8s; width: 120px; }
        .mcs-login-shoot-4 { top: 64%; animation-delay: 0.7s; animation-duration: 5s; width: 170px; }
        .mcs-login-shoot-5 { top: 80%; animation-delay: 3s; animation-duration: 4.5s; width: 130px; }
        @keyframes mcs-shoot {
            0% { transform: translate(0,0) rotate(16deg); opacity: 0; }
            6% { opacity: 0.95; }
            26% { transform: translate(125vw, 42vh) rotate(16deg); opacity: 0; }
            100% { opacity: 0; }
        }

        .starlit-login-container {
            position: relative; z-index: 1; width: 100%; max-width: 380px;
        }

        .starlit-login-card {
            background: #000000;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 18px; padding: 34px 30px 26px;
            box-shadow: 0 24px 70px rgba(0, 0, 0, 0.8);
        }

        .mcs-login-logo-icon {
            width: 64px; height: 64px; margin: 0 auto 14px;
            display: flex; align-items: center; justify-content: center;
            filter: drop-shadow(0 8px 22px rgba(255, 255, 255, 0.15));
            animation: mcs-heart-beat 2.4s ease-in-out infinite;
        }
        .mcs-login-logo-icon svg { display: block; }
        @keyframes mcs-heart-beat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.12); } 28% { transform: scale(1); } 42% { transform: scale(1.08); } 56% { transform: scale(1); } }

        .login-brand { font-size: 20px; font-weight: 800; color: #e8e8e8; margin: 0 0 4px; letter-spacing: -0.3px; text-align: center; }
        .login-subtitle { font-size: 13px; color: rgba(255, 255, 255, 0.38); margin: 0 0 24px; text-align: center; }

        .starlit-form-group { display: flex; flex-direction: column; margin-bottom: 0; }
        .starlit-form-group label { font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.55); margin: 12px 0 6px; text-align: left; text-transform: none; letter-spacing: normal; }
        
        .starlit-input {
            width: 100%; box-sizing: border-box; padding: 12px 14px;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 10px; color: #e8e8e8; font-size: 14px;
            outline: none; transition: border-color .15s, box-shadow .15s;
        }
        .starlit-input:focus { border-color: var(--mcs-accent); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18); }

        .login-remember-row { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; font-size: 13px; color: rgba(255, 255, 255, 0.55); }
        
        .rememberme-label { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
        .rememberme-label input { width: 16px; height: 16px; accent-color: var(--mcs-accent); cursor: pointer; margin: 0; }

        .forgot-password-link { font-size: 12px; color: rgba(255, 255, 255, 0.4); text-decoration: none; transition: color 0.15s; }
        .forgot-password-link:hover { color: #e8e8e8; }

        .login-error-alert {
            margin-top: 14px; padding: 10px 12px; border-radius: 9px;
            background: rgba(255, 80, 80, 0.12); border: 1px solid rgba(255, 80, 80, 0.3);
            color: #ff8a8a; font-size: 12.5px; text-align: left;
        }

        .login-btn-row {
            margin-top: 18px;
        }
        .login-btn-row .starlit-btn {
            width: 100%; padding: 13px;
            background: var(--mcs-accent); color: #000000;
            border: none; border-radius: 11px; font-size: 14px; font-weight: 700;
            cursor: pointer; transition: background .15s, transform .05s;
        }
        .login-btn-row .starlit-btn:hover { background: var(--mcs-accent-hover); }
        .login-btn-row .starlit-btn:active { transform: scale(0.99); }

        .login-footer-desc {
            text-align: center; margin-top: 18px;
            font-size: 12px; color: rgba(255, 255, 255, 0.3);
        }

        /* Custom Remember Me Checkbox */
        .mcs-remember-checkbox-wrapper {
            display: flex;
            align-items: center;
            position: relative;
            cursor: pointer;
            user-select: none;
            gap: 8px;
        }
        
        .mcs-remember-checkbox-wrapper input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0;
        }

        .mcs-custom-checkmark {
            height: 16px;
            width: 16px;
            background-color: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 4px;
            position: relative;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            display: inline-block;
        }

        .mcs-remember-checkbox-wrapper:hover input ~ .mcs-custom-checkmark {
            border-color: rgba(255, 255, 255, 0.4);
            background-color: rgba(255, 255, 255, 0.1);
        }

        .mcs-remember-checkbox-wrapper input:checked ~ .mcs-custom-checkmark {
            background-color: #ffffff;
            border-color: #ffffff;
            box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
        }

        .mcs-custom-checkmark:after {
            content: "";
            position: absolute;
            display: none;
        }

        .mcs-remember-checkbox-wrapper input:checked ~ .mcs-custom-checkmark:after {
            display: block;
        }

        .mcs-remember-checkbox-wrapper .mcs-custom-checkmark:after {
            left: 5px;
            top: 1px;
            width: 4px;
            height: 8px;
            border: solid #000000;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }

/* Telefonlarda kart görünür alanı asla aşmaz; sayfa kaydırılabilir kalır. */
@media (max-width: 600px) {
    html,
    body {
        min-height: 100%;
        height: auto;
    }

    body.login-page-body {
        position: relative;
        min-height: 100dvh;
        box-sizing: border-box;
        align-items: flex-start;
        overflow-x: hidden;
        overflow-y: auto;
        padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
    }

    .starlit-login-container {
        max-width: 440px;
        margin: auto;
    }

    .starlit-login-card {
        border-radius: 16px;
        padding: 28px 20px 22px;
        box-shadow: 0 16px 42px rgba(0, 0, 0, 0.65);
    }

    .mcs-login-logo-icon {
        width: 56px;
        height: 56px;
        margin-bottom: 12px;
    }

    .login-brand {
        font-size: 22px;
    }

    .login-subtitle {
        font-size: 14px;
        line-height: 1.45;
        margin-bottom: 18px;
    }

    .starlit-form-group label {
        font-size: 13px !important;
        margin-top: 14px;
    }

    .starlit-input {
        min-height: 48px;
        padding: 12px 14px;
        font-size: 16px;
    }

    .login-remember-row {
        gap: 12px;
        align-items: flex-start;
        font-size: 14px;
    }

    .forgot-password-link {
        font-size: 13px;
        text-align: right;
    }

    .mcs-custom-checkmark {
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
    }

    .mcs-remember-checkbox-wrapper .mcs-custom-checkmark:after {
        left: 6px;
        top: 2px;
    }

    .login-btn-row {
        margin-top: 20px !important;
    }

    .login-btn-row .starlit-btn {
        min-height: 50px;
        font-size: 16px;
    }
}

@media (max-width: 360px) {
    .starlit-login-card {
        padding: 24px 16px 20px;
    }

    .login-remember-row {
        flex-direction: column;
    }

    .forgot-password-link {
        padding-left: 26px;
        text-align: left;
    }
}