:root {
    --accent:#0b5bd7;
    --muted:#6b7280;
    --bg:#f3f4f6;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{
    height:100%;
    font-family:Inter,Arial,sans-serif;
    background:var(--bg) url('bagus.jpg') center/cover no-repeat; /* background diam */
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
  }

  /* === SLIDER GAMBAR BERJALAN === */
  .slider-container{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100px;
    overflow:hidden;
    background:rgba(255,255,255,0.8);
    backdrop-filter:blur(3px);
    box-shadow:0 2px 8px rgba(0,0,0,0.1);
    z-index:10;
  }
  .slider-track{
    display:flex;
    width:calc(250px * 10); /* 5 gambar x 2 loop */
    animation:slide 30s linear infinite;
  }
  .slider-track img{
    width:250px;
    height:100px;
    object-fit:cover;
    border-radius:8px;
    margin-right:10px;
  }
  @keyframes slide{
    0%{transform:translateX(0);}
    100%{transform:translateX(-50%);}
  }

  /* === TEKS BERJALAN === */
  .marquee {
    position:fixed;
    top:100px;
    left:0;
    width:100%;
    background:var(--accent);
    color:#fff;
    font-weight:600;
    padding:6px 0;
    overflow:hidden;
    white-space:nowrap;
    z-index:9;
  }
  .marquee span{
    display:inline-block;
    padding-left:100%;
    animation:scrollText 15s linear infinite;
  }
  @keyframes scrollText {
    0% { transform:translateX(0); }
    100% { transform:translateX(-100%); }
  }

  /* === KONTEN LOGIN === */
  .wrap{max-width:420px;margin-top:180px;padding:20px;width:100%;}
  .card{
    background:#fff;
    border-radius:12px;
    padding:20px;
    box-shadow:0 8px 30px rgba(10,20,40,0.1);
  }
  .brand{display:flex;align-items:center;gap:12px;margin-bottom:8px}
  .logo{width:44px;height:44px;border-radius:8px;background:#e6eefc;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--accent)}
  h1{font-size:20px;margin:8px 0}
  .subtitle{color:var(--muted);font-size:14px;margin-bottom:14px}
  .label{font-weight:600;margin:10px 0 6px}
  .input-row{display:flex;gap:8px;align-items:center;margin-bottom:10px}
  .input{
    flex:1;padding:12px;border:1px solid #e6e9ee;border-radius:10px;font-size:16px;outline:none;
  }
  .input:focus{box-shadow:0 6px 18px rgba(11,91,215,0.06);border-color:var(--accent)}
  .icon-btn{background:transparent;border:0;cursor:pointer;font-size:18px}
  .btn{width:100%;padding:12px;border-radius:10px;border:0;cursor:pointer;font-weight:700}
  .btn.primary{background:var(--accent);color:#fff}
  .btn.primary:disabled{opacity:.5;cursor:not-allowed}
  .small{font-size:13px;color:var(--muted);margin-top:10px;text-align:center}