/* ===============================
   BASE THEME — Typewriter Look (Refined)
   - Komentar ditambahkan per bagian
   - Background: pastel rainbow stripes (ringan, non-animated)
   =============================== */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');

/* === CSS Variables (Light & Dark) === */
/* Catatan: hanya warna & shadow yang disesuaikan—selector tetap sama */
:root{
  --font: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --radius: 16px;
  --radius-sm: 12px;

  /* Light palette */
  --bg: #f7f8fb;
  --bg-soft:#eef2f7;
  --card:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --accent:#1e40af;
  --accent-2:#3b82f6;
  --border:#e6e8ee;
  --divider:#e9edf3;

  /* Shadow lebih ringan (hemat GPU) */
  --shadow: 0 12px 28px rgba(17, 24, 39, .08);
  --shadow-sm: 0 6px 16px rgba(17, 24, 39, .06);

  --success:#16a34a;
  --warning:#d97706;
  --danger:#dc2626;

  --input-bg:#fff;
  --input-text:#111827;
  --input-border:#d7dce4;
  --ring: 0 0 0 4px rgba(59, 130, 246, .18);

  --z-splash: 9999;

  /* ===== Pastel stripes (light) =====
     Dua lapis repeating-linear-gradient: diagonal + halus horizontal
     Didesain sangat ringan & non-animated */
  --bg-stripes: 
    /* lapis diagonal warna pastel (45deg) */
    repeating-linear-gradient(
      45deg,
      rgba(255, 179, 186, .18) 0px,   rgba(255, 179, 186, .18) 14px,
      rgba(255, 223, 186, .18) 14px,  rgba(255, 223, 186, .18) 28px,
      rgba(255, 255, 186, .18) 28px,  rgba(255, 255, 186, .18) 42px,
      rgba(186, 255, 201, .18) 42px,  rgba(186, 255, 201, .18) 56px,
      rgba(186, 225, 255, .18) 56px,  rgba(186, 225, 255, .18) 70px,
      rgba(218, 186, 255, .18) 70px,  rgba(218, 186, 255, .18) 84px
    ),
    /* lapis garis lembut horizontal */
    repeating-linear-gradient(
      180deg,
      rgba(59, 130, 246, .05) 0, rgba(59,130,246,.05) 2px,
      transparent 2px, transparent 22px
    );
}
[data-theme="dark"]{
  /* Dark palette */
  --bg:#0b1220;
  --bg-soft:#0f172a;
  --card:#0e1629;
  --text:#e6eefb;
  --muted:#9fb0c9;
  --accent:#7aa2f7;
  --accent-2:#93c5fd;
  --border:#182238;
  --divider:#1c2944;

  --shadow: 0 20px 50px rgba(0,0,0,.45);
  --shadow-sm: 0 10px 24px rgba(0,0,0,.35);

  --success:#22c55e;
  --warning:#f59e0b;
  --danger:#ef4444;

  --input-bg:#0b1220;
  --input-text:#e6eefb;
  --input-border:#223454;
  --ring: 0 0 0 4px rgba(122, 162, 247, .22);

  /* ===== Pastel stripes (dark) =====
     Warna disesuaikan agar tidak menyilaukan */
  --bg-stripes:
    repeating-linear-gradient(
      45deg,
      rgba(122,162,247,.14) 0px,      rgba(122,162,247,.14) 14px,
      rgba(244,176,203,.13) 14px,     rgba(244,176,203,.13) 28px,
      rgba(250,222,126,.12) 28px,     rgba(250,222,126,.12) 42px,
      rgba(125,211,176,.14) 42px,     rgba(125,211,176,.14) 56px,
      rgba(147,197,253,.14) 56px,     rgba(147,197,253,.14) 70px,
      rgba(196,181,253,.14) 70px,     rgba(196,181,253,.14) 84px
    ),
    repeating-linear-gradient(
      180deg,
      rgba(122, 162, 247, .08) 0, rgba(122,162,247,.08) 2px,
      transparent 2px, transparent 22px
    );
}

/* ===== Reset & page ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:var(--font); color:var(--text);

  /* === Latar belakang dengan stripes pastel ===
     - Lapis 1: wash gradien untuk kedalaman
     - Lapis 2-3: stripes dari var(--bg-stripes)
     - Lapis 4: foto (opsional) — tetap ada agar kompatibel dengan aset lama */
  background:
    linear-gradient(180deg, rgba(255,255,255,.68), rgba(255,255,255,.68)),
    var(--bg-stripes),
    url('../assets/bg-office.jpg') center/cover no-repeat fixed;

  /* Sedikit hemat repaint di beberapa browser */
  background-attachment: fixed, fixed, fixed;
}
[data-theme="dark"] body{
  background:
    linear-gradient(180deg, rgba(9,14,26,.60), rgba(9,14,26,.60)),
    var(--bg-stripes),
    url('../assets/bg-office.jpg') center/cover no-repeat fixed;
  background-attachment: fixed, fixed, fixed;
}

.container{ max-width:1200px; margin-inline:auto; padding:24px; display:flex; flex-direction:column; min-height:100dvh }
.muted{ color:var(--muted) }

/* ===== Card ===== */
/* Kartu sedikit “glass” tapi blur kecil agar hemat */
.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:20px; box-shadow:var(--shadow);
  backdrop-filter: blur(5px);
}
.card.login-card{
  width:100%; max-width:640px;
  position:relative;
  /* Latar kartu login diberi lapis radial lembut */
  background:
    radial-gradient(60% 120% at 100% 0, rgba(30,64,175,.10), transparent 60%),
    var(--card);
}

/* Toggle tema dalam card */
.in-card-toggle{
  position:absolute; top:12px; right:12px;
  z-index:2;
}

/* ===== Grid ===== */
.grid-2{ display:grid; gap:12px }
.grid-3{ display:grid; gap:12px }
@media (min-width:1024px){
  .grid-2{ grid-template-columns: 1fr 1fr }
  .grid-3{ grid-template-columns: 1fr 1fr 1fr }
}
@media (min-width:600px) and (max-width:1023px){
  .container{ padding:20px }
  .card{ border-radius:14px }
}
@media (max-width:599px){
  .container{ padding:16px }
  .card{ padding:16px; border-radius: var(--radius-sm) }
}
.center-wrap{ flex:1; display:grid; place-items:center; padding:12px }

/* ===== Login grid ===== */
.login-grid{ display:grid; gap:16px; grid-template-columns: 1.1fr 1fr; align-items:start }
.login-hero{ padding-right:14px; border-right:1px dashed var(--divider) }
.login-hero h1{ margin:0 0 4px 0; font-size:22px }
.login-hero p{ margin:0 0 6px 0 }
.login-hero h2{ margin:8px 0 6px; font-size:22px }
.login-form{ padding-left:14px }
@media (max-width:900px){
  .login-grid{ grid-template-columns:1fr }
  .login-hero{ padding:0 0 12px 0; border-right:none; border-bottom:1px dashed var(--divider) }
  .login-form{ padding-left:0 }
}

/* ===== Inputs & eye inside ===== */
label{font-size:12px; color:var(--muted); display:block; margin:2px 0 6px}
.input{
  width:100%; padding:11px 14px; border:1px solid var(--input-border);
  background:var(--input-bg); color:var(--input-text);
  border-radius:12px; outline:none; transition:border-color .15s, box-shadow .15s, background .2s;
}
.input:focus{ border-color:var(--accent-2); box-shadow: var(--ring) }

.pw-wrapper{ position:relative }
.pw-wrapper .input{ padding-right:44px }
.pw-toggle{
  position:absolute; right:8px; top:69%; transform:translateY(-50%);
  width:32px; height:32px; display:grid; place-items:center;
  border-radius:10px; border:1px solid var(--input-border);
  background: linear-gradient(180deg, #f7f9ff, #eef4ff);
  color:#334155; cursor:pointer; box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .pw-toggle{ background:#0f1a31; color:#cfe0ff; border-color:#2b4575 }
.pw-toggle:active{ transform:translateY(-50%) scale(.96) }
.pw-toggle:focus-visible{ outline:none; box-shadow: var(--ring) }

/* ===== Buttons ===== */
/* Tombol gradient halus + bayangan ringan */
.btn{
  appearance:none; border:1px solid transparent; padding:12px 16px;
  border-radius:12px; cursor:pointer;
  background:linear-gradient(180deg, var(--accent-2), var(--accent));
  color:#fff; font-weight:600; letter-spacing:.1px;
  box-shadow:0 10px 24px rgba(30,64,175,.22);
  transition: transform .08s ease, box-shadow .18s ease, filter .2s ease;
  will-change: transform;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 14px 30px rgba(30,64,175,.30) }
.btn:active{ transform: translateY(0) scale(.98) }
.btn.block{ width:100% }
.btn.secondary{
  background: linear-gradient(180deg, #eef2f7, #e7edf7);
  color: var(--accent); border:1px solid #d7e3fb;
}
[data-theme="dark"] .btn.secondary{ background:#0f1a31; color:#cfe0ff; border-color:#2b4575 }
.btn.outline{ background:transparent; color:var(--accent-2); border:1px solid #cddaf5 }
.btn.danger{ background: linear-gradient(180deg, #ff6b6b, var(--danger)) }
.btn.success{ background: linear-gradient(180deg, #2ed07a, var(--success)) }
.btn:focus-visible{ outline:none; box-shadow:var(--ring) }

.btn-install{
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1;
  border-radius: 10px;
}
.hidden{ display:none !important }

/* ===== Switch (theme) ===== */
.switch{ display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); cursor:pointer; user-select:none }
.switch input{ appearance:none; width:46px; height:26px; background:#cbd5e1; border:1px solid #bfc9db; border-radius:999px; position:relative; transition: background .2s }
.switch input::after{
  content:""; position:absolute; top:2px; left:2px; width:22px; height:22px; background:#fff; border-radius:999px; box-shadow:var(--shadow-sm); transition: transform .2s
}
.switch input:checked{ background:#7aa2f7; border-color:#7aa2f7 }
.switch input:checked::after{ transform: translateX(20px) }

/* ===== Pills ===== */
.pill{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; font-size:12px; border-radius:999px; border:1px solid var(--divider); background:var(--card) }

/* ===== Minor & splash ===== */
.right{ display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.spacer{ height:8px }
.hidden{ display:none !important }

#splash{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.70); backdrop-filter: blur(3px); z-index:var(--z-splash); transition:opacity .25s }
[data-theme="dark"] #splash{ background:rgba(9,14,26,.70) }
.loader{ width:56px; height:56px; border-radius:50%; border:6px solid #e6e8ee; border-top-color:var(--accent-2); animation:spin 1s linear infinite; box-shadow:var(--shadow-sm) }
@keyframes spin{ to{ transform: rotate(360deg) } }

.alert{ padding:12px 14px; border-radius:12px; font-size:14px; background:linear-gradient(180deg,#fff3f3,#ffecec); color:#a81d1d; border:1px solid #ffd1d1 }
[data-theme="dark"] .alert{ background:#3a0b0b; color:#ffc1c1; border-color:#5a1515 }

footer{ margin-top:18px; text-align:center; color:var(--muted); font-size:12px }

/* ===== Compact on small screens ===== */
@media (max-width:480px){
  .btn{ padding:11px 14px }
  .input{ padding:11px 12px }
  .pw-toggle{ width:30px; height:30px; right:6px }
  .login-hero h1{ font-size:20px }
  .login-hero h2{ font-size:20px }
}