<?php
session_start();

// Zaten giriş yapmışsa dashboard'a yönlendir
if (isset($_SESSION['kul_id']) && !empty($_SESSION['kul_id'])) {
    header('Location: dashboard.php');
    exit;
}
?>
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>• ✦ •  𝙏 𝙋𝘼𝙉𝙀𝙇 • ✦ • </title>
    <link rel="shortcut icon" href="assets/media/logo.png">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500;600;700&family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html,
        body {
            width: 100%;
            min-height: 100%;
            overflow-x: hidden;
        }

        body {
            min-height: 100vh;
            font-family: 'Poppins', Arial, sans-serif;
            background:
                radial-gradient(circle at 18% 18%, rgba(214, 106, 26, .18), transparent 24%),
                radial-gradient(circle at 80% 22%, rgba(190, 88, 22, .11), transparent 25%),
                radial-gradient(circle at 54% 78%, rgba(116, 53, 18, .18), transparent 28%),
                linear-gradient(135deg, #060403 0%, #130b05 48%, #060403 100%);
            color: #f4ddc7;
        }

        body::before {
            content: '';
            position: fixed;
            inset: 0;
            z-index: -3;
            background:
                linear-gradient(90deg, transparent 0 47%, rgba(220, 111, 30, .10) 48% 51%, transparent 52% 100%),
                linear-gradient(0deg, transparent 0 47%, rgba(190, 83, 20, .08) 48% 51%, transparent 52% 100%),
                radial-gradient(circle, rgba(220, 118, 36, .12) 0 2px, transparent 3px);
            background-size: 220px 220px, 270px 270px, 120px 120px;
            filter: blur(7px);
            opacity: .58;
            animation: bgLinesDrift 42s linear infinite;
        }

        body::after {
            content: '';
            position: fixed;
            inset: 0;
            z-index: -2;
            background:
                repeating-linear-gradient(0deg, rgba(255, 200, 140, .018) 0 1px, transparent 1px 4px),
                rgba(0, 0, 0, .62);
            backdrop-filter: blur(1px);
        }

        /* Soft turuncu hacker tema: düşük maliyetli CSS, GIF/video yok */
        .bg-motion,
        .bg-lines,
        .bg-glow {
            position: fixed;
            inset: -8%;
            pointer-events: none;
            will-change: transform, opacity;
        }

        .bg-motion {
            z-index: -4;
            background:
                radial-gradient(circle at 16% 18%, rgba(214, 106, 26, .18), transparent 9%),
                radial-gradient(circle at 78% 24%, rgba(190, 88, 22, .14), transparent 11%),
                radial-gradient(circle at 65% 78%, rgba(135, 61, 18, .16), transparent 10%),
                radial-gradient(circle at 30% 82%, rgba(160, 72, 18, .10), transparent 12%);
            filter: blur(18px);
            opacity: .70;
            animation: bgSoftMove 26s ease-in-out infinite alternate;
        }

        .bg-lines {
            z-index: -3;
            background:
                linear-gradient(90deg, transparent 0 46%, rgba(220, 111, 30, .10) 48% 50%, transparent 53% 100%),
                linear-gradient(0deg, transparent 0 46%, rgba(190, 83, 20, .08) 48% 50%, transparent 53% 100%),
                radial-gradient(circle, rgba(220, 118, 36, .13) 0 2px, transparent 3px);
            background-size: 230px 230px, 270px 270px, 125px 125px;
            filter: blur(7px);
            opacity: .52;
            animation: bgLinesDrift 38s linear infinite;
        }

        .bg-glow {
            z-index: -2;
            background: linear-gradient(120deg, transparent 20%, rgba(220, 111, 30, .08) 45%, transparent 70%);
            opacity: .45;
            transform: translateX(-18%);
            animation: bgGlowSweep 18s ease-in-out infinite alternate;
        }

        @keyframes bgSoftMove {
            0% { transform: translate3d(-1.5%, -1%, 0) scale(1); }
            100% { transform: translate3d(1.5%, 1%, 0) scale(1.04); }
        }

        @keyframes bgLinesDrift {
            0% { transform: translate3d(0, 0, 0); background-position: 0 0, 0 0, 0 0; }
            100% { transform: translate3d(-2.5%, -2%, 0); background-position: 230px 230px, -270px 270px, 125px -125px; }
        }

        @keyframes bgGlowSweep {
            0% { transform: translateX(-18%) rotate(0deg); opacity: .24; }
            100% { transform: translateX(18%) rotate(1deg); opacity: .48; }
        }

        @media (prefers-reduced-motion: reduce) {
            .bg-motion,
            .bg-lines,
            .bg-glow {
                animation: none !important;
            }
        }

        .login-page {
            min-height: 100vh;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
        }

        .login-container {
            position: relative;
            width: 100%;
            max-width: 445px;
            background: linear-gradient(180deg, rgba(22, 11, 5, .94), rgba(8, 5, 2, .96));
            border: 1px solid rgba(214, 106, 26, .32);
            border-radius: 18px;
            padding: 48px 42px 40px;
            box-shadow:
                0 28px 80px rgba(0, 0, 0, .58),
                0 0 42px rgba(214, 106, 26, .12),
                inset 0 0 0 1px rgba(255, 255, 255, .035);
            text-align: center;
            overflow: hidden;
        }

        .login-container::before {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            background:
                linear-gradient(90deg, transparent, rgba(214, 106, 26, .08), transparent),
                repeating-linear-gradient(90deg, rgba(214, 106, 26, .035) 0 1px, transparent 1px 18px);
            opacity: .55;
        }

        .login-container::after {
            content: '';
            position: absolute;
            top: 14px;
            left: 18px;
            right: 18px;
            color: rgba(231, 151, 82, .42);
            font-family: 'Orbitron', 'Poppins', Arial, sans-serif;
            font-size: 10px;
            letter-spacing: 2px;
            text-align: left;
            pointer-events: none;
        }

        .login-logo {
            display: none;
        }

        .login-title {
            position: relative;
            margin: 0 0 30px;
            font-family: 'Orbitron', 'Poppins', Arial, sans-serif;
            font-size: 30px;
            line-height: 1.2;
            font-weight: 700;
            letter-spacing: 2px;
            color: #d8792c;
            text-shadow:
                0 0 12px rgba(216, 121, 44, .36),
                0 0 26px rgba(216, 121, 44, .14);
        }

        .login-title::after {
            content: '';
            display: block;
            width: 78px;
            height: 2px;
            margin: 14px auto 0;
            border-radius: 999px;
            background: linear-gradient(90deg, transparent, #d8792c, transparent);
            box-shadow: 0 0 16px rgba(216, 121, 44, .42);
        }

        .login-subtitle,
        .form-label {
            display: none;
        }

        .login-form {
            position: relative;
            width: 100%;
            z-index: 1;
        }

        .form-group {
            position: relative;
            margin-bottom: 22px;
        }

        .password-wrap {
            position: relative;
        }

        .form-control {
            width: 100%;
            height: 50px;
            border: 1px solid rgba(216, 121, 44, .32);
            border-radius: 11px;
            background: rgba(9, 6, 3, .88);
            color: #fff0df;
            font-size: 15px;
            padding: 0 52px 0 18px;
            outline: none;
            box-shadow: inset 0 0 18px rgba(216, 121, 44, .05);
            transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
        }

        .form-control::placeholder {
            color: rgba(255, 212, 166, .52);
        }

        .form-control:focus {
            background: rgba(13, 8, 4, .94);
            border-color: #d8792c;
            box-shadow:
                0 0 0 4px rgba(216, 121, 44, .12),
                0 0 22px rgba(216, 121, 44, .11),
                inset 0 0 18px rgba(216, 121, 44, .06);
        }

        .toggle-password {
            position: absolute;
            top: 50%;
            right: 14px;
            transform: translateY(-50%);
            width: 28px;
            height: 28px;
            border: 0;
            background: transparent;
            color: #e6a166;
            cursor: pointer;
            font-size: 16px;
            line-height: 28px;
            opacity: .85;
        }

        .toggle-password:hover {
            opacity: 1;
            text-shadow: 0 0 12px rgba(216, 121, 44, .45);
        }

        .btn {
            width: 100%;
            height: 54px;
            border: 0;
            border-radius: 11px;
            cursor: pointer;
            color: #fff;
            font-family: 'Poppins', Arial, sans-serif;
            font-size: 16px;
            font-weight: 700;
            letter-spacing: .4px;
            background: linear-gradient(90deg, #8b001c 0%, #d8792c 52%, #b00025 100%);
            box-shadow:
                0 12px 24px rgba(216, 121, 44, .18),
                0 0 28px rgba(216, 121, 44, .10);
            transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
        }

        .btn:hover {
            transform: translateY(-1px);
            box-shadow:
                0 16px 30px rgba(216, 121, 44, .24),
                0 0 34px rgba(216, 121, 44, .14);
            filter: brightness(1.05);
        }

        .btn:disabled {
            cursor: not-allowed;
            opacity: .75;
            transform: none;
        }

        .login-footer p {
            position: relative;
            z-index: 1;
            margin: 26px 0 0 !important;
            color: rgba(255, 210, 165, .68) !important;
            font-size: 12px !important;
            font-weight: 600;
            text-shadow: 0 0 12px rgba(216, 121, 44, .12);
        }

        .alert {
            position: relative;
            z-index: 1;
            width: 100%;
            margin: 0 0 18px;
            padding: 11px 14px;
            border-radius: 10px;
            font-size: 13px;
            font-weight: 600;
            text-align: left;
        }

        .alert-success {
            background: rgba(22, 97, 47, .20);
            color: #80ffad;
            border: 1px solid rgba(95, 255, 149, .30);
        }

        .alert-warning {
            background: rgba(130, 86, 0, .20);
            color: #ffd36b;
            border: 1px solid rgba(255, 205, 91, .32);
        }

        .alert-danger {
            background: rgba(116, 53, 18, .24);
            color: #ffbd86;
            border: 1px solid rgba(216, 121, 44, .32);
        }

        #matrix-bg {
            display: none !important;
        }

        @media (max-width: 576px) {
            .login-page {
                padding: 18px;
            }

            .login-container {
                max-width: 380px;
                padding: 38px 24px 32px;
                border-radius: 17px;
            }

            .login-container::after {
                top: 12px;
                left: 14px;
                right: 14px;
                font-size: 9px;
                letter-spacing: 1.5px;
            }

            .login-title {
                font-size: 25px;
                margin-bottom: 26px;
            }

            .form-control,
            .btn {
                height: 50px;
            }
        }


        /* Soft turuncu ayar: fazla parlaklık ve mobil yük azaltıldı */
        @media (max-width: 768px) {
            body::before,
            .bg-motion,
            .bg-lines,
            .bg-glow {
                animation: none !important;
                transform: none !important;
            }

            .login-container {
                box-shadow: 0 22px 58px rgba(0, 0, 0, .55), 0 0 24px rgba(216, 121, 44, .10);
            }
        }


        /* =====================================================
           FINAL MAVİ GİRİŞ TEMASI + HAFİF MAVİ AKIŞ EFEKTİ
           Performans için video/canvas yok, sadece düşük maliyetli CSS.
        ===================================================== */
        :root {
            --login-blue: #00aaff;
            --login-blue-soft: #28d7fe;
            --login-blue-dark: #003b73;
            --login-blue-deep: #020712;
        }

        body {
            background:
                radial-gradient(circle at 18% 18%, rgba(0, 170, 255, .18), transparent 24%),
                radial-gradient(circle at 80% 22%, rgba(40, 215, 254, .12), transparent 25%),
                radial-gradient(circle at 54% 78%, rgba(0, 95, 180, .18), transparent 28%),
                linear-gradient(135deg, #020712 0%, #071a2d 48%, #020712 100%) !important;
            color: #dff7ff !important;
        }

        body::before {
            background:
                linear-gradient(90deg, transparent 0 47%, rgba(0, 170, 255, .10) 48% 51%, transparent 52% 100%),
                linear-gradient(0deg, transparent 0 47%, rgba(40, 215, 254, .08) 48% 51%, transparent 52% 100%),
                radial-gradient(circle, rgba(0, 170, 255, .13) 0 2px, transparent 3px) !important;
            background-size: 230px 230px, 280px 280px, 130px 130px !important;
            filter: blur(7px) !important;
            opacity: .55 !important;
            animation: bgLinesDrift 44s linear infinite !important;
        }

        body::after {
            background:
                repeating-linear-gradient(0deg, rgba(120, 220, 255, .018) 0 1px, transparent 1px 4px),
                rgba(0, 0, 0, .60) !important;
            backdrop-filter: blur(1px) !important;
        }

        .bg-motion {
            background:
                radial-gradient(circle at 16% 18%, rgba(0, 170, 255, .20), transparent 10%),
                radial-gradient(circle at 78% 24%, rgba(40, 215, 254, .15), transparent 12%),
                radial-gradient(circle at 65% 78%, rgba(0, 90, 180, .18), transparent 11%),
                radial-gradient(circle at 30% 82%, rgba(0, 140, 255, .12), transparent 12%) !important;
            filter: blur(18px) !important;
            opacity: .72 !important;
            animation: bgSoftMove 28s ease-in-out infinite alternate !important;
        }

        .bg-lines {
            background:
                linear-gradient(90deg, transparent 0 46%, rgba(0, 170, 255, .10) 48% 50%, transparent 53% 100%),
                linear-gradient(0deg, transparent 0 46%, rgba(40, 215, 254, .08) 48% 50%, transparent 53% 100%),
                radial-gradient(circle, rgba(0, 170, 255, .13) 0 2px, transparent 3px) !important;
            background-size: 240px 240px, 285px 285px, 130px 130px !important;
            filter: blur(7px) !important;
            opacity: .50 !important;
            animation: bgLinesDrift 42s linear infinite !important;
        }

        .bg-glow {
            background: linear-gradient(115deg, transparent 18%, rgba(0, 170, 255, .13) 42%, rgba(255,255,255,.09) 50%, rgba(40, 215, 254, .13) 58%, transparent 78%) !important;
            opacity: .50 !important;
            transform: translateX(-20%) !important;
            animation: blueFlowSweep 14s ease-in-out infinite alternate !important;
        }

        .login-page {
            position: relative !important;
            isolation: isolate !important;
        }

        .login-page::before {
            content: '' !important;
            position: fixed !important;
            inset: -40% !important;
            z-index: -1 !important;
            pointer-events: none !important;
            background: linear-gradient(120deg,
                transparent 34%,
                rgba(0, 170, 255, .07) 43%,
                rgba(255, 255, 255, .06) 50%,
                rgba(40, 215, 254, .08) 57%,
                transparent 66%) !important;
            transform: translate3d(-18%, 0, 0) rotate(8deg) !important;
            animation: blueBackFlow 11s ease-in-out infinite alternate !important;
            will-change: transform, opacity !important;
        }

        @keyframes blueFlowSweep {
            0% { transform: translate3d(-24%, 0, 0) rotate(0deg); opacity: .24; }
            100% { transform: translate3d(24%, 0, 0) rotate(1deg); opacity: .52; }
        }

        @keyframes blueBackFlow {
            0% { transform: translate3d(-20%, -2%, 0) rotate(8deg); opacity: .28; }
            100% { transform: translate3d(20%, 2%, 0) rotate(8deg); opacity: .50; }
        }

        .login-container {
            background: linear-gradient(180deg, rgba(4, 15, 30, .94), rgba(1, 7, 16, .97)) !important;
            border-color: rgba(0, 170, 255, .38) !important;
            box-shadow:
                0 28px 80px rgba(0, 0, 0, .58),
                0 0 44px rgba(0, 170, 255, .15),
                inset 0 0 0 1px rgba(255, 255, 255, .035) !important;
        }

        .login-container::before {
            background:
                linear-gradient(90deg, transparent, rgba(0, 170, 255, .09), transparent),
                repeating-linear-gradient(90deg, rgba(0, 170, 255, .035) 0 1px, transparent 1px 18px) !important;
            opacity: .58 !important;
        }

        .login-container::after {
            color: rgba(120, 220, 255, .42) !important;
        }

        .login-title {
            color: var(--login-blue-soft) !important;
            text-shadow:
                0 0 10px rgba(40, 215, 254, .55),
                0 0 24px rgba(0, 170, 255, .25) !important;
        }

        .login-title::after {
            background: linear-gradient(90deg, transparent, var(--login-blue-soft), transparent) !important;
            box-shadow: 0 0 18px rgba(40, 215, 254, .55) !important;
        }

        .form-control {
            border-color: rgba(0, 170, 255, .38) !important;
            background: rgba(2, 10, 22, .88) !important;
            color: #e9fbff !important;
            box-shadow: inset 0 0 18px rgba(0, 170, 255, .055) !important;
        }

        .form-control::placeholder {
            color: rgba(180, 235, 255, .55) !important;
        }

        .form-control:focus {
            background: rgba(4, 16, 32, .96) !important;
            border-color: var(--login-blue-soft) !important;
            box-shadow:
                0 0 0 4px rgba(0, 170, 255, .13),
                0 0 24px rgba(40, 215, 254, .15),
                inset 0 0 18px rgba(0, 170, 255, .07) !important;
        }

        .toggle-password {
            color: #8ceaff !important;
        }

        .toggle-password:hover {
            text-shadow: 0 0 12px rgba(40, 215, 254, .55) !important;
        }

        .btn {
            background: linear-gradient(90deg, #006dff 0%, #00aaff 52%, #0053c7 100%) !important;
            box-shadow:
                0 12px 24px rgba(0, 170, 255, .22),
                0 0 28px rgba(40, 215, 254, .13) !important;
        }

        .btn:hover {
            box-shadow:
                0 16px 30px rgba(0, 170, 255, .28),
                0 0 36px rgba(40, 215, 254, .18) !important;
        }

        .login-footer p {
            color: rgba(190, 240, 255, .72) !important;
            text-shadow: 0 0 12px rgba(40, 215, 254, .16) !important;
        }

        .alert-success {
            background: rgba(0, 108, 60, .20) !important;
            color: #87ffc3 !important;
            border-color: rgba(95, 255, 185, .30) !important;
        }

        .alert-warning {
            background: rgba(0, 105, 150, .18) !important;
            color: #9cecff !important;
            border-color: rgba(40, 215, 254, .32) !important;
        }

        .alert-danger {
            background: rgba(0, 65, 120, .24) !important;
            color: #aeeeff !important;
            border-color: rgba(0, 170, 255, .35) !important;
        }

        @media (max-width: 768px) {
            .bg-glow {
                animation: blueFlowSweep 18s ease-in-out infinite alternate !important;
                opacity: .32 !important;
            }
            .login-page::before {
                animation: blueBackFlow 16s ease-in-out infinite alternate !important;
                opacity: .30 !important;
            }
            .bg-motion,
            .bg-lines {
                animation: none !important;
                transform: none !important;
            }
            .login-container {
                box-shadow: 0 22px 58px rgba(0, 0, 0, .55), 0 0 26px rgba(0, 170, 255, .14) !important;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .bg-glow,
            .login-page::before {
                animation: none !important;
            }
        }

    

        /* =====================================================
           FINAL MOR GİRİŞ TEMASI + ŞİMŞEKLİ ADMIN PANEL YAZISI
           Sadece görsel tasarım değiştirir; login JS/PHP yapısına dokunmaz.
        ===================================================== */
        :root {
            --login-purple: #8b2cff;
            --login-purple-soft: #c86bff;
            --login-purple-hot: #ff4dff;
            --login-purple-deep: #090012;
            --login-cyan-flash: #e9fbff;
        }

        html,
        body {
            background: #080012 !important;
        }

        body {
            color: #f4e8ff !important;
            background:
                radial-gradient(circle at 18% 18%, rgba(155, 70, 255, .24), transparent 24%),
                radial-gradient(circle at 82% 20%, rgba(255, 77, 255, .12), transparent 25%),
                radial-gradient(circle at 54% 78%, rgba(88, 0, 160, .24), transparent 30%),
                linear-gradient(135deg, #050008 0%, #16002d 48%, #050008 100%) !important;
        }

        body::before {
            background:
                linear-gradient(90deg, transparent 0 47%, rgba(180, 82, 255, .12) 48% 51%, transparent 52% 100%),
                linear-gradient(0deg, transparent 0 47%, rgba(255, 77, 255, .07) 48% 51%, transparent 52% 100%),
                radial-gradient(circle, rgba(200, 107, 255, .16) 0 2px, transparent 3px) !important;
            background-size: 240px 240px, 300px 300px, 135px 135px !important;
            filter: blur(7px) !important;
            opacity: .62 !important;
            animation: purpleLinesFlow 34s linear infinite !important;
        }

        body::after {
            background:
                repeating-linear-gradient(0deg, rgba(230, 190, 255, .025) 0 1px, transparent 1px 4px),
                rgba(0, 0, 0, .62) !important;
            backdrop-filter: blur(1px) !important;
        }

        .bg-motion {
            background:
                radial-gradient(circle at 15% 18%, rgba(139, 44, 255, .24), transparent 10%),
                radial-gradient(circle at 78% 24%, rgba(255, 77, 255, .15), transparent 12%),
                radial-gradient(circle at 65% 78%, rgba(94, 0, 180, .20), transparent 11%),
                radial-gradient(circle at 30% 82%, rgba(180, 82, 255, .12), transparent 12%) !important;
            filter: blur(18px) !important;
            opacity: .72 !important;
            animation: purpleSoftFloat 24s ease-in-out infinite alternate !important;
        }

        .bg-lines {
            background:
                linear-gradient(90deg, transparent 0 46%, rgba(180, 82, 255, .12) 48% 50%, transparent 53% 100%),
                linear-gradient(0deg, transparent 0 46%, rgba(255, 77, 255, .08) 48% 50%, transparent 53% 100%),
                radial-gradient(circle, rgba(200, 107, 255, .15) 0 2px, transparent 3px) !important;
            background-size: 250px 250px, 310px 310px, 140px 140px !important;
            filter: blur(7px) !important;
            opacity: .56 !important;
            animation: purpleLinesFlow 32s linear infinite !important;
        }

        .bg-glow {
            background: linear-gradient(115deg,
                transparent 18%,
                rgba(139, 44, 255, .14) 40%,
                rgba(255,255,255,.10) 50%,
                rgba(255, 77, 255, .16) 58%,
                transparent 78%) !important;
            opacity: .50 !important;
            transform: translateX(-20%) !important;
            animation: purpleGlowSweep 10s ease-in-out infinite alternate !important;
        }

        .login-page {
            position: relative !important;
            isolation: isolate !important;
        }

        .login-page::before {
            content: '' !important;
            position: fixed !important;
            inset: -35% !important;
            z-index: -1 !important;
            pointer-events: none !important;
            background: linear-gradient(120deg,
                transparent 35%,
                rgba(139, 44, 255, .08) 43%,
                rgba(255, 255, 255, .07) 50%,
                rgba(255, 77, 255, .10) 57%,
                transparent 66%) !important;
            animation: purpleBackFlow 12s ease-in-out infinite alternate !important;
            will-change: transform, opacity !important;
        }

        .login-container {
            background: linear-gradient(180deg, rgba(18, 0, 34, .95), rgba(5, 0, 12, .98)) !important;
            border-color: rgba(200, 107, 255, .44) !important;
            box-shadow:
                0 28px 80px rgba(0, 0, 0, .62),
                0 0 46px rgba(139, 44, 255, .20),
                0 0 80px rgba(255, 77, 255, .08),
                inset 0 0 0 1px rgba(255, 255, 255, .04) !important;
        }

        .login-container::before {
            background:
                linear-gradient(90deg, transparent, rgba(200, 107, 255, .10), transparent),
                repeating-linear-gradient(90deg, rgba(200, 107, 255, .04) 0 1px, transparent 1px 18px) !important;
            opacity: .62 !important;
        }

        .login-container::after {
            color: rgba(220, 180, 255, .42) !important;
        }

        .login-title {
            position: relative !important;
            display: inline-block !important;
            color: #f7eaff !important;
            background: linear-gradient(90deg, #ffffff 0%, #d9a7ff 28%, #ff4dff 50%, #b45cff 72%, #ffffff 100%) !important;
            background-size: 220% auto !important;
            -webkit-background-clip: text !important;
            background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            text-shadow:
                0 0 8px rgba(255, 255, 255, .25),
                0 0 16px rgba(200, 107, 255, .50),
                0 0 34px rgba(139, 44, 255, .32) !important;
            animation:
                titlePurpleMove 4.2s linear infinite,
                titleLightningFlicker 3.4s steps(1, end) infinite !important;
        }

        .login-title::before {
            content: '⚡' !important;
            position: absolute !important;
            left: -28px !important;
            top: 47% !important;
            transform: translateY(-50%) rotate(-10deg) !important;
            font-size: 20px !important;
            -webkit-text-fill-color: #fff !important;
            color: #fff !important;
            text-shadow:
                0 0 8px #fff,
                0 0 18px #c86bff,
                0 0 30px #8b2cff !important;
            opacity: .75 !important;
            animation: boltPulse 1.8s ease-in-out infinite !important;
        }

        .login-title::after {
            content: '' !important;
            position: absolute !important;
            left: 50% !important;
            bottom: -14px !important;
            transform: translateX(-50%) !important;
            width: 92px !important;
            height: 2px !important;
            margin: 0 !important;
            border-radius: 999px !important;
            background: linear-gradient(90deg, transparent, #ffffff, #c86bff, transparent) !important;
            box-shadow: 0 0 18px rgba(200, 107, 255, .70) !important;
            animation: underlineFlash 2.7s ease-in-out infinite !important;
        }

        .form-control {
            border-color: rgba(200, 107, 255, .42) !important;
            background: rgba(9, 0, 20, .88) !important;
            color: #fff !important;
            box-shadow: inset 0 0 18px rgba(200, 107, 255, .06) !important;
        }

        .form-control::placeholder {
            color: rgba(235, 210, 255, .58) !important;
        }

        .form-control:focus {
            background: rgba(13, 0, 28, .96) !important;
            border-color: var(--login-purple-soft) !important;
            box-shadow:
                0 0 0 4px rgba(139, 44, 255, .15),
                0 0 24px rgba(200, 107, 255, .18),
                inset 0 0 18px rgba(200, 107, 255, .08) !important;
        }

        .toggle-password {
            color: #e2b6ff !important;
        }

        .toggle-password:hover {
            text-shadow: 0 0 12px rgba(200, 107, 255, .65) !important;
        }

        .btn {
            background: linear-gradient(90deg, #5f00d8 0%, #a927ff 48%, #ff4dff 100%) !important;
            box-shadow:
                0 12px 24px rgba(139, 44, 255, .26),
                0 0 32px rgba(255, 77, 255, .14) !important;
            position: relative !important;
            overflow: hidden !important;
        }

        .btn::before {
            content: '' !important;
            position: absolute !important;
            top: 0 !important;
            left: -75% !important;
            width: 50% !important;
            height: 100% !important;
            background: linear-gradient(115deg, transparent, rgba(255,255,255,.45), transparent) !important;
            transform: skewX(-18deg) !important;
            animation: buttonShinePurple 3.8s ease-in-out infinite !important;
            pointer-events: none !important;
        }

        .btn:hover {
            box-shadow:
                0 16px 30px rgba(139, 44, 255, .34),
                0 0 40px rgba(255, 77, 255, .20) !important;
        }

        .login-footer p {
            color: rgba(235, 210, 255, .75) !important;
            text-shadow: 0 0 12px rgba(200, 107, 255, .20) !important;
        }

        .alert-success {
            background: rgba(40, 120, 70, .20) !important;
            color: #95ffc4 !important;
            border-color: rgba(95, 255, 185, .30) !important;
        }

        .alert-warning {
            background: rgba(88, 0, 160, .22) !important;
            color: #e0b7ff !important;
            border-color: rgba(200, 107, 255, .32) !important;
        }

        .alert-danger {
            background: rgba(100, 0, 70, .25) !important;
            color: #ffd2f7 !important;
            border-color: rgba(255, 77, 255, .34) !important;
        }

        @keyframes purpleSoftFloat {
            0% { transform: translate3d(-1.5%, -1%, 0) scale(1); }
            100% { transform: translate3d(1.6%, 1.2%, 0) scale(1.045); }
        }

        @keyframes purpleLinesFlow {
            0% { transform: translate3d(0, 0, 0); background-position: 0 0, 0 0, 0 0; }
            100% { transform: translate3d(-2.5%, -2%, 0); background-position: 250px 250px, -310px 310px, 140px -140px; }
        }

        @keyframes purpleGlowSweep {
            0% { transform: translate3d(-24%, 0, 0) rotate(0deg); opacity: .22; }
            100% { transform: translate3d(24%, 0, 0) rotate(1deg); opacity: .54; }
        }

        @keyframes purpleBackFlow {
            0% { transform: translate3d(-18%, -2%, 0) rotate(8deg); opacity: .24; }
            100% { transform: translate3d(18%, 2%, 0) rotate(8deg); opacity: .48; }
        }

        @keyframes titlePurpleMove {
            0% { background-position: 0% center; }
            100% { background-position: 220% center; }
        }

        @keyframes titleLightningFlicker {
            0%, 8%, 10%, 100% {
                filter: brightness(1);
                text-shadow: 0 0 8px rgba(255,255,255,.25), 0 0 16px rgba(200,107,255,.50), 0 0 34px rgba(139,44,255,.32);
            }
            9% {
                filter: brightness(1.9);
                text-shadow: 0 0 7px #fff, 0 0 20px #fff, 0 0 38px #c86bff, 0 0 60px #ff4dff;
            }
            42% {
                filter: brightness(1.45);
                text-shadow: 0 0 8px #fff, 0 0 18px #c86bff, 0 0 42px #8b2cff;
            }
            43% { filter: brightness(.95); }
            44% { filter: brightness(1.65); }
        }

        @keyframes boltPulse {
            0%, 100% { opacity: .55; transform: translateY(-50%) rotate(-10deg) scale(.95); }
            45% { opacity: 1; transform: translateY(-50%) rotate(-6deg) scale(1.12); }
            48% { opacity: .35; }
            51% { opacity: 1; }
        }

        @keyframes underlineFlash {
            0%, 100% { opacity: .65; width: 82px; }
            50% { opacity: 1; width: 116px; }
        }

        @keyframes buttonShinePurple {
            0%, 42% { left: -80%; opacity: 0; }
            52% { opacity: .9; }
            70%, 100% { left: 130%; opacity: 0; }
        }

        @media (max-width: 768px) {
            body::before,
            .bg-motion,
            .bg-lines,
            .bg-glow,
            .login-page::before {
                animation-play-state: running !important;
            }

            .bg-motion,
            .bg-lines {
                animation-duration: 46s !important;
                opacity: .34 !important;
            }

            .bg-glow,
            .login-page::before {
                animation-duration: 18s !important;
                opacity: .30 !important;
            }

            .login-container {
                box-shadow: 0 22px 58px rgba(0, 0, 0, .58), 0 0 30px rgba(139, 44, 255, .18) !important;
            }
        }

        @media (max-width: 576px) {
            .login-title {
                font-size: 26px !important;
            }
            .login-title::before {
                left: -22px !important;
                font-size: 17px !important;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .login-title,
            .login-title::before,
            .login-title::after,
            .btn::before,
            .bg-motion,
            .bg-lines,
            .bg-glow,
            .login-page::before {
                animation: none !important;
            }
        }
</style>
</head>
<body>
    <!-- Eski matrix alanı gizlendi, giriş sistemi bozulmasın diye kaldırılmadı -->
    <canvas id="matrix-bg"></canvas>
    <div class="bg-motion"></div>
    <div class="bg-lines"></div>
    <div class="bg-glow"></div>

    <div class="login-page">
        <div class="login-container">
            <!-- Logo alanı gizli bırakıldı -->
            <div class="login-logo">
                <img src="assets/media/logo2.png" alt="Dalton Panel">
            </div>

            <!-- Başlık -->
            <h1 class="login-title">Admin Panel</h1>
            <p class="login-subtitle">Panele erişmek için şifrenizi girin</p>

            <!-- Hata Mesajı -->
            <div id="alertBox" style="display:none;" class="alert"></div>

            <!-- Giriş Formu - SADECE ŞİFRE -->
            <form id="loginForm" class="login-form">
                <div class="form-group">
                    <label class="form-label">Panel Şifresi</label>
                    <div class="password-wrap">
                        <input type="password" name="panel_sifre" id="password" class="form-control" placeholder="Şifre" required autocomplete="off">
                        <button type="button" class="toggle-password" id="togglePassword" aria-label="Şifreyi göster/gizle">👁️</button>
                    </div>
                </div>

                <input type="hidden" name="sifre_giris" value="1">

                <button type="submit" class="btn btn-primary btn-lg">
                    <span id="btn-text">Giriş Yap</span>
                    <span id="btn-loading" style="display: none;">Giriş yapılıyor...</span>
                </button>
            </form>

            <!-- Alt Bilgi -->
            <div class="login-footer">
                <p>• ✦ • T Panel © 2026 · PLATINIUM | ULTRA</p>
            </div>
        </div>
    </div>

    <script>
        const togglePassword = document.getElementById('togglePassword');
        const passwordInput = document.getElementById('password');

        togglePassword.addEventListener('click', function() {
            const isPassword = passwordInput.type === 'password';
            passwordInput.type = isPassword ? 'text' : 'password';
            this.textContent = isPassword ? '🙈' : '👁️';
        });

        document.getElementById('loginForm').addEventListener('submit', async function(e) {
            e.preventDefault();

            const btnText = document.getElementById('btn-text');
            const btnLoading = document.getElementById('btn-loading');
            const alertBox = document.getElementById('alertBox');
            const submitBtn = this.querySelector('button[type="submit"]');

            btnText.style.display = 'none';
            btnLoading.style.display = 'inline';
            submitBtn.disabled = true;
            alertBox.style.display = 'none';

            try {
                const formData = new FormData(this);
                const response = await fetch('test_login.php', {
                    method: 'POST',
                    body: formData
                });

                const data = await response.json();

                if (data.sonuc === 'tamam') {
                    alertBox.className = 'alert alert-success';
                    alertBox.innerHTML = '✓ Giriş başarılı! Yönlendiriliyorsunuz...';
                    alertBox.style.display = 'block';
                    setTimeout(() => window.location.href = 'dashboard.php', 1000);
                } else if (data.sonuc === 'bos') {
                    alertBox.className = 'alert alert-warning';
                    alertBox.innerHTML = '⚠ Lütfen şifre girin!';
                    alertBox.style.display = 'block';
                } else {
                    alertBox.className = 'alert alert-danger';
                    alertBox.innerHTML = '✕ Geçersiz şifre! Lütfen doğru şifreyi girin.';
                    alertBox.style.display = 'block';
                }
            } catch (error) {
                alertBox.className = 'alert alert-danger';
                alertBox.innerHTML = '✕ Bağlantı hatası! Lütfen tekrar deneyin.';
                alertBox.style.display = 'block';
                console.error(error);
            } finally {
                btnText.style.display = 'inline';
                btnLoading.style.display = 'none';
                submitBtn.disabled = false;
            }
        });
    </script>
</body>
</html>
