<?php
session_start();

// ====== KONFIG UMUM ======
$error = $error ?? ""; // $error dari proses login backend Anda (kalau ada)
?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Login Mikhmon Online</title>
<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=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">
<style>
  :root{
    --bg-1:#29ABE2; --bg-2:#4ECDC4; --text:#0f172a; --muted:#64748b;
    --card:rgba(255,255,255,.12); --stroke:rgba(255,255,255,.22);
    --ring:rgba(41,171,226,.35); --ring-strong:#29ABE2;
    --shadow:0 30px 80px rgba(2,6,23,.25);
    --radius:22px;
  }
  @media (prefers-color-scheme: dark){
    :root{ --text:#e5e7eb; --muted:#94a3b8; --card:rgba(15,23,42,.45);
      --stroke:rgba(148,163,184,.22); --ring:rgba(78,205,196,.22);
      --shadow:0 40px 100px rgba(0,0,0,.55); }
  }
  *{box-sizing:border-box} html,body{height:100%}
  body{
    margin:0; font-family:'Nunito',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans',sans-serif;
    color:var(--text);
    background: radial-gradient(1200px 900px at 20% 10%, rgba(255,255,255,.25), transparent 60%),
                linear-gradient(135deg, var(--bg-1), var(--bg-2));
    display:grid; place-items:center; padding:18px; overflow:hidden;
  }
  .wrap{ width:min(100%, 1080px); margin:auto; display:grid; grid-template-columns:1fr; gap:28px; align-items:center }
  @media (min-width: 980px){ .wrap{ grid-template-columns: 1.2fr .8fr } }

  .hero{ color:#fff; text-shadow:0 10px 30px rgba(0,0,0,.35); padding:8px; display:none }
  @media (min-width:980px){ .hero{display:block} }
  .hero h1{ margin:0 0 10px; font-size: clamp(28px, 5vw, 56px); line-height:1.05; letter-spacing:.2px }
  .hero p{ margin:0; max-width:48ch; font-size: clamp(14px, 1.8vw, 18px); opacity:.95 }

  .card{ position:relative; width:min(100%, 560px); margin-inline:auto; isolation:isolate;
    background:var(--card); backdrop-filter: blur(18px) saturate(140%);
    border:1px solid var(--stroke); border-radius:var(--radius); box-shadow:var(--shadow); }
  .card-inner{ padding: clamp(20px, 3.6vw, 44px) }

  .brand{ display:flex; align-items:center; gap:14px; justify-content:center; margin-bottom:12px }
  .logo{ width:68px; aspect-ratio:1; border-radius:18px; overflow:hidden; display:grid; place-items:center;
         background:linear-gradient(120deg, rgba(255,255,255,.8), rgba(255,255,255,.35));
         box-shadow: 0 10px 24px rgba(2,6,23,.18)}
  .logo img{ width:70%; height:auto; display:block }
  .title{ text-align:center; margin:.2rem 0 0; font-weight:800; font-size:clamp(22px,3.6vw,28px) }
  .subtitle{ text-align:center; color:var(--muted); margin:6px 0 18px; font-weight:700 }

  form{ display:grid; gap:14px }
  .field{ display:grid; gap:8px }
  label{ font-weight:800; color:var(--muted); font-size:clamp(13px,1.6vw,14px) }
  .control{ position:relative }

  .input{
    width:100%; border-radius:14px; border:1px solid rgba(148,163,184,.35);
    background:linear-gradient(0deg, rgba(255,255,255,.65), rgba(255,255,255,.75));
    padding:14px 44px 14px 46px; color:#000; font-size:clamp(15px,2.6vw,16px);
    outline:none; transition: box-shadow .18s, border-color .18s, transform .06s;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
  }
  .input:focus{ border-color:var(--ring-strong); box-shadow: 0 0 0 5px var(--ring) }
  .ico{ position:absolute; left:14px; top:0; bottom:0; display:grid; place-items:center; width:24px; opacity:.85 }
  .toggle-pass{ position:absolute; right:10px; top:8px; background:transparent; border:none; cursor:pointer; padding:6px; border-radius:8px }
  .toggle-pass:focus{ outline:none; box-shadow:0 0 0 4px var(--ring) }

  .actions{ display:grid; gap:10px; margin-top:6px }
  .btn{
    appearance:none; border:none; cursor:pointer; border-radius:14px;
    background:linear-gradient(90deg, var(--bg-1), var(--bg-2)); color:#fff;
    padding:14px 16px; font-weight:900; font-size:clamp(16px,2.8vw,18px);
    box-shadow: 0 12px 24px rgba(2,6,23,.25);
  }
  .error{ display:none; border:1px solid rgba(239,68,68,.45); background:rgba(239,68,68,.12);
          color:#fff; background-image:linear-gradient(180deg, rgba(239,68,68,.9), rgba(239,68,68,.75));
          padding:10px 12px; border-radius:12px; text-align:center; font-size:14px;
          box-shadow:0 10px 30px rgba(239,68,68,.25) }
  .error.show{ display:block }

  .help{ text-align:center; color:var(--muted); font-size:clamp(12px,2.4vw,14px) }
  .help a{ color:#fff; text-decoration:none; font-weight:800; padding:2px 4px; border-radius:8px; background:rgba(255,255,255,.18) }
</style>
</head>
<body>

<div class="wrap">
  <section class="hero" aria-hidden="true">
    <h1>MIKHMON ONLINE</h1>
    <p>Panel manajemen Hotspot & PPPoE yang cepat dan ringan. © Laksamadi Guko <strong>Mod by Erwan Raap</strong>.</p>
  </section>

  <main class="card" role="main">
    <div class="card-inner">
      <div class="brand">
        <div class="logo"><img src="img/favicon.png" alt="" /></div>
        <div>
          <h2 class="title">MIKHMON</h2>
          <div class="subtitle">Mod by <strong>Erwan Raap Ros.6</strong></div>
        </div>
      </div>

      <!-- Form Login -->
      <form autocomplete="off" action="" method="post" novalidate id="loginForm">
        <div class="field">
          <label for="_username">Username</label>
          <div class="control">
            <span class="ico">👤</span>
            <input class="input" type="text" name="user" id="_username" placeholder="Masukkan username" required autofocus>
          </div>
        </div>

        <div class="field">
          <label for="_password">Password</label>
          <div class="control">
            <span class="ico">🔒</span>
            <input class="input" type="password" name="pass" id="_password" placeholder="Masukkan password" required>
            <button class="toggle-pass" type="button" aria-label="Tampilkan/Sembunyikan password">
              👁
            </button>
          </div>
        </div>

        <div class="actions">
          <button class="btn" type="submit" name="login">Login</button>
          <div class="error<?php echo !empty($error) ? ' show' : '' ?>" role="alert">
            <?php if (!empty($error)) echo htmlspecialchars($error, ENT_QUOTES, 'UTF-8'); else echo ' '; ?>
          </div>
        </div>

        <p class="help">Butuh bantuan? <a href="https://wa.me/6287863566132" target="_blank" rel="noopener">Hubungi Admin</a></p>
      </form>
    </div>
  </main>
</div>

<script>
  const pass = document.getElementById('_password');
  const eyeBtn = document.querySelector('.toggle-pass');
  if(eyeBtn){
    eyeBtn.addEventListener('click', () => {
      const show = pass.getAttribute('type') === 'password';
      pass.setAttribute('type', show ? 'text' : 'password');
    });
  }
</script>
</body>
</html>
