<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,700;1,500&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

        :root {
            --gold:      #C9A84C;
            --gold-light:#E8C96D;
            --gold-dark: #8B6914;
            --gold-dim:  rgba(201,168,76,0.1);
            --ink:       #060503;
            --white:     #F8F6F0;
            --muted:     #6A6A5E;
            --border:    rgba(201,168,76,0.18);
            --border-md: rgba(201,168,76,0.38);
        }

        html, body { height: 100%; }

        body {
            font-family: 'DM Sans', sans-serif;
            background: var(--ink);
            color: var(--white);
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            overflow: hidden;
            position: relative;
        }

        #particleCanvas {
            position: fixed;
            inset: 0;
            z-index: 0;
            pointer-events: none;
        }

        .bg-layer {
            position: fixed; inset: 0; z-index: 1; pointer-events: none;
        }
        .bg-layer::before {
            content: '';
            position: absolute; inset: 0;
            background-image:
                linear-gradient(rgba(201,168,76,0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(201,168,76,0.03) 1px, transparent 1px);
            background-size: 56px 56px;
        }

        .glow {
            position: fixed; border-radius: 50%;
            filter: blur(100px); pointer-events: none; z-index: 1;
        }
        .glow-1 {
            width: 600px; height: 500px; opacity: 0.13;
            background: radial-gradient(ellipse, #C9A84C 0%, transparent 68%);
            top: -200px; left: -140px;
        }
        .glow-2 {
            width: 480px; height: 420px; opacity: 0.09;
            background: radial-gradient(ellipse, #8B6914 0%, transparent 68%);
            bottom: -160px; right: -100px;
        }
        .glow-3 {
            width: 320px; height: 320px; opacity: 0.05;
            background: radial-gradient(ellipse, #E8C96D 0%, transparent 70%);
            top: 50%; left: 50%; transform: translate(-50%, -50%);
        }

        .corner {
            position: fixed; width: 120px; height: 120px;
            pointer-events: none; opacity: 0.1; z-index: 1;
        }
        .corner-tl { top: 0; left: 0; border-top: 1px solid var(--gold-light); border-left: 1px solid var(--gold-light); }
        .corner-tr { top: 0; right: 0; border-top: 1px solid var(--gold-light); border-right: 1px solid var(--gold-light); }
        .corner-bl { bottom: 0; left: 0; border-bottom: 1px solid var(--gold-light); border-left: 1px solid var(--gold-light); }
        .corner-br { bottom: 0; right: 0; border-bottom: 1px solid var(--gold-light); border-right: 1px solid var(--gold-light); }

        /* ── Splash ── */
        .splash {
            position: fixed; inset: 0; background: var(--ink);
            z-index: 200;
            display: flex; flex-direction: column;
            align-items: center; justify-content: center; gap: 1.75rem;
            animation: splashOut 0.7s ease 2.6s forwards;
        }
        @keyframes splashOut { to { opacity: 0; pointer-events: none; } }

        .splash-logo-wrap {
            display: flex; align-items: center; gap: 1.25rem;
            animation: riseIn 0.9s cubic-bezier(0.22,1,0.36,1) 0.2s both;
        }
        .splash-logo-img {
            width: 64px; height: 64px; object-fit: contain;
            filter: drop-shadow(0 0 20px rgba(201,168,76,0.55));
        }
        .splash-logo-text { display: flex; flex-direction: column; gap: 2px; }
        .splash-pt {
            font-size: 0.65rem; font-weight: 400;
            letter-spacing: 0.4em; color: var(--gold); text-transform: uppercase;
        }
        .splash-name {
            font-family: 'Playfair Display', serif;
            font-size: 1.5rem; font-weight: 700; line-height: 1.15; color: var(--white);
        }
        .splash-tagline {
            display: inline-flex; align-items: center; gap: 7px;
            background: rgba(201,168,76,0.1); border: 1px solid rgba(201,168,76,0.3);
            border-radius: 100px; padding: 6px 18px;
            font-size: 0.68rem; font-weight: 500; letter-spacing: 0.2em;
            color: var(--gold-light); text-transform: uppercase;
            animation: riseIn 0.9s ease 0.8s both;
        }
        .splash-dot {
            width: 6px; height: 6px; border-radius: 50%; background: var(--gold-light);
            animation: pulse 2s ease infinite;
        }
        @keyframes pulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:0.4;transform:scale(0.7);} }

        .splash-progress {
            width: 200px; height: 1px; background: var(--border);
            position: relative; overflow: hidden;
            animation: riseIn 0.5s ease 1s both;
        }
        .splash-progress::after {
            content: ''; position: absolute; top: 0; left: -100%;
            width: 100%; height: 100%;
            background: linear-gradient(90deg, transparent, var(--gold-light), var(--gold));
            animation: progressRun 1.5s ease 1.1s forwards;
        }
        @keyframes progressRun { to { left: 100%; } }
        @keyframes riseIn { from{opacity:0;transform:translateY(18px);} to{opacity:1;transform:translateY(0);} }

        /* ── Wrapper ── */
        .wrapper {
            position: relative; z-index: 2;
            width: 100%; max-width: 520px; padding: 1.5rem;
            opacity: 0;
            animation: riseIn 0.9s cubic-bezier(0.22,1,0.36,1) 3.4s forwards;
        }

        /* ── Card ── */
        .card {
            background: rgba(12,9,4,0.92);
            backdrop-filter: blur(32px);
            border: 1px solid var(--border-md);
            border-radius: 22px;
            overflow: hidden;
            position: relative;
            box-shadow:
                0 0 0 1px rgba(201,168,76,0.06),
                0 8px 48px rgba(0,0,0,0.5),
                0 0 80px rgba(201,168,76,0.06);
        }
        .card::before {
            content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
            background: linear-gradient(90deg,
                transparent 5%, var(--gold-dark) 25%, var(--gold-light) 50%, var(--gold-dark) 75%, transparent 95%);
        }
        .card::after {
            content: ''; position: absolute;
            top: 0; left: 50%; transform: translateX(-50%);
            width: 70%; height: 120px;
            background: radial-gradient(ellipse at top, rgba(201,168,76,0.07), transparent 70%);
            pointer-events: none;
        }

        /* ── Hero ── */
        .card-hero {
            background: linear-gradient(170deg, rgba(201,168,76,0.1) 0%, rgba(6,5,3,0) 55%);
            border-bottom: 1px solid var(--border);
            padding: 2rem 2.5rem 1.75rem;
            text-align: center;
            position: relative;
        }
        .card-hero .bracket { position: absolute; width: 40px; height: 40px; opacity: 0.4; }
        .card-hero .bracket-tl { top: 14px; left: 14px; border-top: 1px solid var(--gold-light); border-left: 1px solid var(--gold-light); border-radius: 4px 0 0 0; }
        .card-hero .bracket-tr { top: 14px; right: 14px; border-top: 1px solid var(--gold-light); border-right: 1px solid var(--gold-light); border-radius: 0 4px 0 0; }

        .logo-row {
            display: flex; align-items: center; justify-content: center;
            gap: 1.2rem; margin-bottom: 1.2rem;
        }
        .logo-img {
            width: 58px; height: 58px; object-fit: contain;
            filter: drop-shadow(0 2px 16px rgba(201,168,76,0.4));
        }
        .logo-text { text-align: left; }
        .logo-label {
            font-size: 1.05rem; font-weight: 600;
            letter-spacing: 0.3em; color: var(--gold);
            text-transform: uppercase; margin-bottom: 2px; display: block;
        }
        .logo-main {
            font-family: 'Playfair Display', serif;
            font-size: 1.35rem; font-weight: 700;
            line-height: 1.15; color: var(--white); letter-spacing: 0.02em;
        }
        .logo-sub {
            font-family: 'Playfair Display', serif;
            font-size: 0.88rem; font-weight: 500; font-style: italic;
            color: var(--gold-light); letter-spacing: 0.04em;
            margin-top: 3px; display: block;
        }

        .hero-rule { display: flex; align-items: center; gap: 12px; margin: 1rem 0 0.75rem; }
        .hero-rule-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--border-md)); }
        .hero-rule-line.flip { background: linear-gradient(90deg, var(--border-md), transparent); }
        .hero-rule-center { display: flex; align-items: center; gap: 6px; }
        .hero-rule-diamond { width: 6px; height: 6px; background: var(--gold-dark); transform: rotate(45deg); }
        .hero-rule-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--gold-light); opacity: 0.5; }

        .hero-caption {
            font-size: 0.7rem; font-weight: 300;
            letter-spacing: 0.22em; color: var(--muted); text-transform: uppercase;
        }

        /* ── Body ── */
        .card-body { padding: 1.75rem 2.5rem 2.25rem; }

        .form-group { margin-bottom: 1.1rem; }

        label {
            display: block;
            font-size: 0.68rem; font-weight: 500;
            letter-spacing: 0.12em; color: var(--gold-light);
            text-transform: uppercase; margin-bottom: 0.5rem;
        }

        .input-wrap { position: relative; }
        .input-icon {
            position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
            color: var(--muted); font-size: 0.8rem; pointer-events: none; transition: color 0.2s;
        }
        .input-wrap:focus-within .input-icon { color: var(--gold); }

        .form-control {
            width: 100%;
            background: rgba(255,255,255,0.025);
            border: 1px solid var(--border);
            border-radius: 11px;
            padding: 12px 14px 12px 40px;
            color: var(--white);
            font-family: 'DM Sans', sans-serif;
            font-size: 0.9rem; font-weight: 300;
            outline: none; transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
        }
        .form-control::placeholder { color: rgba(106,106,94,0.5); }
        .form-control:focus {
            border-color: var(--gold);
            background: rgba(201,168,76,0.04);
            box-shadow: 0 0 0 3px rgba(201,168,76,0.1);
            color: var(--white);
        }
        .form-control.is-invalid { border-color: #c87272; }

        .toggle-pass {
            position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
            background: none; border: none; color: var(--muted);
            cursor: pointer; font-size: 0.8rem; padding: 4px; transition: color 0.2s;
        }
        .toggle-pass:hover { color: var(--gold); }

        .invalid-feedback {
            font-size: 0.7rem; color: #c87272;
            margin-top: 5px; display: flex; align-items: center; gap: 4px;
        }

        .btn-login {
            width: 100%; padding: 13px;
            background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 60%, #f5d56b 100%);
            border: none; border-radius: 11px;
            color: #0D0B07;
            font-family: 'DM Sans', sans-serif;
            font-size: 0.875rem; font-weight: 600; letter-spacing: 0.08em;
            cursor: pointer; transition: all 0.2s;
            display: flex; align-items: center; justify-content: center; gap: 8px;
            box-shadow: 0 4px 24px rgba(201,168,76,0.3), inset 0 1px 0 rgba(255,255,255,0.15);
            position: relative; overflow: hidden;
        }
        .btn-login::after {
            content: '';
            position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
            transition: left 0.4s;
        }
        .btn-login:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 8px 32px rgba(201,168,76,0.4); }
        .btn-login:hover::after { left: 160%; }
        .btn-login:active { transform: translateY(0); }

        .bottom-tag {
            text-align: center; margin-top: 1.5rem;
            font-size: 0.58rem; letter-spacing: 0.16em;
            color: rgba(201,168,76,0.55); text-transform: uppercase;
            display: flex; align-items: center; justify-content: center; gap: 8px;
        }
        .bottom-tag::before, .bottom-tag::after {
            content: ''; flex: 1; max-width: 40px; height: 1px;
            background: linear-gradient(90deg, transparent, rgba(201,168,76,0.35));
        }
        .bottom-tag::after { background: linear-gradient(90deg, rgba(201,168,76,0.35), transparent); }
    </style>
</head>

<body>

    <canvas id="particleCanvas"></canvas>

    <div class="splash">
        <div class="splash-logo-wrap">
            <img src="<?php echo e(asset('images/logo fix2.png')); ?>" alt="Logo" class="splash-logo-img">
            <div class="splash-logo-text">
                <span class="splash-pt">Login</span>
                <div class="splash-name">Portal Masuk</div>
            </div>
        </div>
        <div class="splash-tagline">
            <span class="splash-dot"></span>
            Silakan masuk untuk melanjutkan
        </div>
        <div class="splash-progress"></div>
    </div>

    <div class="bg-layer"></div>
    <div class="glow glow-1"></div>
    <div class="glow glow-2"></div>
    <div class="glow glow-3"></div>
    <div class="corner corner-tl"></div>
    <div class="corner corner-tr"></div>
    <div class="corner corner-bl"></div>
    <div class="corner corner-br"></div>

    <div class="wrapper">
        <div class="card">

            <div class="card-hero">
                <div class="bracket bracket-tl"></div>
                <div class="bracket bracket-tr"></div>

                <div class="logo-row">
                    <img src="<?php echo e(asset('images/logo fix2.png')); ?>" alt="Logo" class="logo-img">
                    <div class="logo-text">
                        <span class="logo-label">Selamat Datang</span>
                        <div class="logo-main">Portal Masuk</div>
                        <span class="logo-sub">Silakan login untuk melanjutkan</span>
                    </div>
                </div>

                <div class="hero-rule">
                    <div class="hero-rule-line"></div>
                    <div class="hero-rule-center">
                        <div class="hero-rule-dot"></div>
                        <div class="hero-rule-diamond"></div>
                        <div class="hero-rule-dot"></div>
                    </div>
                    <div class="hero-rule-line flip"></div>
                </div>

                <span class="hero-caption">Login</span>
            </div>

            <div class="card-body">
                <form method="POST" action="<?php echo e(route('login')); ?>">
                    <?php echo csrf_field(); ?>

                    <div class="form-group">
                        <label for="username">Username</label>
                        <div class="input-wrap">
                            <i class="fas fa-user input-icon"></i>
                            <input type="text"
                                class="form-control <?php $__errorArgs = ['username'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> is-invalid <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>"
                                id="username"
                                name="username"
                                value="<?php echo e(old('username')); ?>"
                                placeholder="Masukkan username Anda"
                                required autofocus>
                        </div>
                        <?php $__errorArgs = ['username'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                            <span class="invalid-feedback" role="alert">
                                <i class="fas fa-circle-exclamation"></i>
                                <strong><?php echo e($message); ?></strong>
                            </span>
                        <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                    </div>

                    <div class="form-group">
                        <label for="password">Password</label>
                        <div class="input-wrap">
                            <i class="fas fa-lock input-icon"></i>
                            <input type="password"
                                class="form-control <?php $__errorArgs = ['password'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> is-invalid <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>"
                                id="password"
                                name="password"
                                placeholder="Masukkan password"
                                required>
                            <button type="button" class="toggle-pass" id="togglePassword">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                        <?php $__errorArgs = ['password'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                            <span class="invalid-feedback" role="alert">
                                <i class="fas fa-circle-exclamation"></i>
                                <strong><?php echo e($message); ?></strong>
                            </span>
                        <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                    </div>

                    <div style="margin-top: 1.5rem;">
                        <button type="submit" class="btn-login">
                            <i class="fas fa-arrow-right-to-bracket"></i>
                            Login
                        </button>
                    </div>

                </form>
            </div>
        </div>

        <div class="bottom-tag">Portal Login · All rights reserved</div>
    </div>

    <script>
        document.getElementById('togglePassword').addEventListener('click', function () {
            const input = document.getElementById('password');
            const icon  = this.querySelector('i');
            if (input.type === 'password') {
                input.type = 'text';
                icon.className = 'fas fa-eye-slash';
            } else {
                input.type = 'password';
                icon.className = 'fas fa-eye';
            }
        });

        (function () {
            const canvas = document.getElementById('particleCanvas');
            const ctx    = canvas.getContext('2d');

            const COLORS = [
                [201, 168, 76],
                [232, 201, 109],
                [245, 213, 107],
                [255, 230, 120],
                [180, 140,  50],
                [220, 185,  80],
            ];

            const COUNT      = 280;
            const FPS_TARGET = 30;
            const FRAME_MS   = 1000 / FPS_TARGET;

            let W, H, particles, lastFrame = 0;

            function resize() {
                W = canvas.width  = window.innerWidth;
                H = canvas.height = window.innerHeight;
            }

            function rand(a, b) { return Math.random() * (b - a) + a; }

            function makeParticle() {
                const c     = COLORS[Math.floor(Math.random() * COLORS.length)];
                const angle = rand(0, Math.PI * 2);
                const spd   = rand(0.08, 0.38);
                return {
                    x:          rand(0, W),
                    y:          rand(0, H),
                    vx:         Math.cos(angle) * spd,
                    vy:         Math.sin(angle) * spd,
                    r:          rand(0.8, 3.0),
                    baseAlpha:  rand(0.25, 0.7),
                    phase:      rand(0, Math.PI * 2),
                    phaseSpeed: rand(0.018, 0.045),
                    color:      c,
                };
            }

            function initParticles() {
                particles = [];
                for (let i = 0; i < COUNT; i++) particles.push(makeParticle());
            }

            function draw(p, alpha) {
                if (alpha < 0.01) return;
                const [r, g, b] = p.color;
                ctx.beginPath();
                ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
                ctx.fillStyle = `rgba(${r},${g},${b},${alpha.toFixed(3)})`;
                ctx.fill();
                if (p.r > 1.8) {
                    const grad = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.r * 4);
                    grad.addColorStop(0, `rgba(${r},${g},${b},${(alpha * 0.25).toFixed(3)})`);
                    grad.addColorStop(1, `rgba(${r},${g},${b},0)`);
                    ctx.beginPath();
                    ctx.arc(p.x, p.y, p.r * 4, 0, Math.PI * 2);
                    ctx.fillStyle = grad;
                    ctx.fill();
                }
            }

            function update(p) {
                p.x += p.vx;
                p.y += p.vy;
                if (p.x < -5)    p.x = W + 5;
                if (p.x > W + 5) p.x = -5;
                if (p.y < -5)    p.y = H + 5;
                if (p.y > H + 5) p.y = -5;
                p.phase += p.phaseSpeed;
                if (p.phase > Math.PI * 2) p.phase -= Math.PI * 2;
                const alpha = p.baseAlpha * ((Math.sin(p.phase) + 1) / 2);
                draw(p, alpha);
            }

            function loop(ts) {
                requestAnimationFrame(loop);
                if (ts - lastFrame < FRAME_MS) return;
                lastFrame = ts;
                ctx.clearRect(0, 0, W, H);
                for (let i = 0; i < particles.length; i++) update(particles[i]);
            }

            resize();
            initParticles();
            requestAnimationFrame(loop);

            let resizeTimer;
            window.addEventListener('resize', function () {
                clearTimeout(resizeTimer);
                resizeTimer = setTimeout(function () { resize(); initParticles(); }, 200);
            });

            document.addEventListener('visibilitychange', function () {
                lastFrame = document.hidden ? Infinity : 0;
            });
        })();
    </script>
</body>
</html><?php /**PATH C:\laragon\www\SKK\resources\views/auth/login.blade.php ENDPATH**/ ?>