/* =====================================================================
   Halaman masuk (login.html)
   Hanya memakai variabel tema yang sudah ada (--bg, --latar, --teks, --redup,
   --garis, --aksen, --link, --bahaya, --serif) sehingga otomatis menyatu dengan
   tema Kertas, Terang, Gelap, Kaca, dan Awan. Warna isian dan tombol tidak
   ditimpa di sini: biarkan style.css, tema-kaca.css, dan tema-awan.css yang mengatur.
   Berkas ini hanya mengatur ukuran, jarak, dan tata letak.
   Dimuat SETELAH css/style.css.
   ===================================================================== */

html:root body.login{
  padding-bottom:0;
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;
  font-size:14px;line-height:1.45;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
html:root body.login main{
  flex:1;display:flex;flex-direction:column;
  width:100%;max-width:420px;min-height:0;
  padding:max(28px,env(safe-area-inset-top)) 22px max(20px,env(safe-area-inset-bottom));
}

/* ---------- Merek ---------- */
.lg-merek{display:flex;justify-content:center;margin:clamp(0px,5vh,40px) 0 18px}
.lg-merek img{display:block;height:40px;width:auto;border-radius:0;box-shadow:none}
.lg-merek .logo-gelap{display:none}
:root[data-theme=gelap] .lg-merek .logo-terang,
:root[data-theme=awan] .lg-merek .logo-terang{display:none}
:root[data-theme=gelap] .lg-merek .logo-gelap,
:root[data-theme=awan] .lg-merek .logo-gelap{display:block}

/* ---------- Judul + jahitan benang merah (sama seperti header aplikasi) ---------- */
.lg-judul{
  font-family:var(--serif);font-size:clamp(22px,6.4vw,26px);line-height:1.2;font-weight:650;letter-spacing:-.02em;
  color:var(--teks);text-align:center;margin:0;text-wrap:balance;
}
.lg-judul::after{
  content:"";display:block;height:1px;width:72px;margin:12px auto 0;
  background-image:linear-gradient(90deg,var(--aksen) 0 5px,transparent 5px 10px);
  background-size:10px 1px;background-repeat:repeat-x;opacity:.9;
}

/* ---------- Subjudul + tautan informasi ---------- */
.lg-sub{margin:14px auto 0;max-width:34ch;font-size:14px;line-height:1.5;color:var(--redup);text-align:center;text-wrap:balance}
.lg-tautan{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 16px;margin-top:18px}
.lg-tautan a{font-size:12.5px;color:var(--redup);text-decoration:none;padding:6px 0;min-height:32px;display:inline-flex;align-items:center}
.lg-tautan a:hover{color:var(--teks);text-decoration:underline;text-underline-offset:2px}

/* ---------- Tautan antara masuk dan daftar, petunjuk, pesan sukses ---------- */
.lg-alih{margin:0;text-align:center;font-size:13.5px;color:var(--redup)}
.lg-alih a{color:var(--link,var(--aksen));font-weight:600;text-decoration:none;padding:8px 4px;display:inline-block}
.lg-alih a:hover{text-decoration:underline;text-underline-offset:2px}
.lg-petunjuk{margin:0;font-size:12px;line-height:1.4;color:var(--redup)}
.lg-form .galat.ok{background:color-mix(in srgb,var(--teks) 6%,transparent);border-color:var(--garis)}

/* ---------- Formulir ---------- */
.lg-form{display:grid;gap:14px;margin-top:22px}
.lg-f{display:grid;gap:6px}
.lg-baris{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.lg-f label{font-size:13px;font-weight:600;color:var(--teks);letter-spacing:-.005em;line-height:1.2}
.lg-f input{
  min-height:44px;padding:0 13px;font-size:16px;line-height:1.2;letter-spacing:-.01em;
  border-radius:10px;
}
.lg-f input::placeholder{font-size:15px}
#lupa{
  font-size:12.5px;font-weight:500;color:var(--link,var(--aksen));
  text-decoration:none;padding:2px 0;
}
#lupa:hover{text-decoration:underline}

.lg-form .galat{
  font-size:13px;line-height:1.4;padding:9px 12px;border-radius:8px;
  background:color-mix(in srgb,var(--bahaya) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--bahaya) 30%,transparent);
}
.lg-form .galat:empty{display:none}

.lg-aksi{display:grid;gap:8px;margin-top:2px}
.lg-aksi .btn{width:100%;min-height:44px;font-size:15px;letter-spacing:-.01em}

.lg-pisah{border:0;height:1px;background:var(--garis);margin:4px 0 0}

.lg-form .lg-setuju{
  font-size:12px;line-height:1.5;color:var(--redup);text-align:center;margin:0;
  text-wrap:balance;
}
.lg-form .lg-setuju a{color:var(--teks);font-weight:500;text-underline-offset:2px}

/* ---------- Pemilih bahasa: satu baris ringkas di bawah ---------- */
.lg-bahasa{
  margin-top:auto;padding:22px 0 0;border:0;
  display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
}
.lg-bahasa h3{margin:0;font-size:12px;font-weight:500;color:var(--redup)}
.lg-bahasa select{
  min-height:32px;padding:0 26px 0 10px;font:inherit;font-size:13px;
  color:var(--teks);background-color:transparent;border:1px solid var(--garis);border-radius:8px;cursor:pointer;
}
.lg-bahasa .hitung{display:none}
.lg-bahasa select:focus-visible{outline:2px solid var(--aksen);outline-offset:1px}

/* ---------- Layar lebar: kartu di tengah ---------- */
@media (min-width:600px){
  html:root body.login{justify-content:center;align-items:center;padding:32px 16px}
  html:root body.login main{
    flex:none;max-width:400px;padding:34px 32px 22px;
    border-radius:16px;box-shadow:0 0 0 1px var(--garis),0 10px 34px -14px rgba(0,0,0,.22);
  }
  .lg-f input{font-size:14.5px;min-height:42px}
  .lg-f input::placeholder{font-size:14px}
  .lg-aksi .btn{min-height:42px;font-size:14.5px}
  .lg-merek{margin-top:0}
  .lg-bahasa{margin-top:0}
}

@media (prefers-reduced-motion:no-preference){
  .lg-f input,.lg-aksi .btn{transition:border-color .15s,background-color .15s,box-shadow .15s,filter .15s}
}

/* ---------- Desktop lebar (>=960px): dua kolom ----------
   Kiri: bidang kertas dengan jaring benang merah (motif logo: titik-titik yang dijahit jadi satu).
   Kanan: formulir rata kiri. Warna hanya memakai variabel tema, jadi ikut Kertas/Terang/Gelap/Kaca/Awan.
   Gambar jaring dibuat dengan mask SVG, warnanya dari --aksen. */
@media (min-width:960px){
  html:root body.login{
    display:grid;grid-template-columns:5fr 4fr;grid-template-rows:minmax(100vh,auto);grid-template-rows:minmax(100dvh,auto);
    align-items:stretch;justify-content:stretch;padding:0;position:relative;
  }
  html:root body.login::before{content:"";grid-column:1;grid-row:1;border-right:1px solid var(--garis)}
  html:root body.login::after{
    content:"";position:fixed;top:0;bottom:0;left:0;width:55.5556%;pointer-events:none;
    background:var(--aksen);opacity:.82;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 840'%3E%3Cg stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-dasharray='8 7' fill='none'%3E%3Cline x1='120' y1='170' x2='440' y2='110'/%3E%3Cline x1='120' y1='170' x2='300' y2='235'/%3E%3Cline x1='120' y1='170' x2='270' y2='390'/%3E%3Cline x1='440' y1='110' x2='520' y2='340'/%3E%3Cline x1='440' y1='110' x2='300' y2='235'/%3E%3Cline x1='520' y1='340' x2='270' y2='390'/%3E%3Cline x1='520' y1='340' x2='390' y2='600'/%3E%3Cline x1='270' y1='390' x2='80' y2='540'/%3E%3Cline x1='270' y1='390' x2='390' y2='600'/%3E%3Cline x1='270' y1='390' x2='300' y2='235'/%3E%3Cline x1='80' y1='540' x2='190' y2='735'/%3E%3Cline x1='390' y1='600' x2='525' y2='715'/%3E%3Cline x1='390' y1='600' x2='190' y2='735'/%3E%3C/g%3E%3Cg fill='black'%3E%3Ccircle cx='120' cy='170' r='5.5'/%3E%3Ccircle cx='440' cy='110' r='5.5'/%3E%3Ccircle cx='520' cy='340' r='5.5'/%3E%3Ccircle cx='270' cy='390' r='9'/%3E%3Ccircle cx='80' cy='540' r='5.5'/%3E%3Ccircle cx='390' cy='600' r='5.5'/%3E%3Ccircle cx='525' cy='715' r='5.5'/%3E%3Ccircle cx='190' cy='735' r='5.5'/%3E%3Ccircle cx='300' cy='235' r='5.5'/%3E%3C/g%3E%3Ccircle cx='270' cy='390' r='20' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center/min(86%,620px) no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 840'%3E%3Cg stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-dasharray='8 7' fill='none'%3E%3Cline x1='120' y1='170' x2='440' y2='110'/%3E%3Cline x1='120' y1='170' x2='300' y2='235'/%3E%3Cline x1='120' y1='170' x2='270' y2='390'/%3E%3Cline x1='440' y1='110' x2='520' y2='340'/%3E%3Cline x1='440' y1='110' x2='300' y2='235'/%3E%3Cline x1='520' y1='340' x2='270' y2='390'/%3E%3Cline x1='520' y1='340' x2='390' y2='600'/%3E%3Cline x1='270' y1='390' x2='80' y2='540'/%3E%3Cline x1='270' y1='390' x2='390' y2='600'/%3E%3Cline x1='270' y1='390' x2='300' y2='235'/%3E%3Cline x1='80' y1='540' x2='190' y2='735'/%3E%3Cline x1='390' y1='600' x2='525' y2='715'/%3E%3Cline x1='390' y1='600' x2='190' y2='735'/%3E%3C/g%3E%3Cg fill='black'%3E%3Ccircle cx='120' cy='170' r='5.5'/%3E%3Ccircle cx='440' cy='110' r='5.5'/%3E%3Ccircle cx='520' cy='340' r='5.5'/%3E%3Ccircle cx='270' cy='390' r='9'/%3E%3Ccircle cx='80' cy='540' r='5.5'/%3E%3Ccircle cx='390' cy='600' r='5.5'/%3E%3Ccircle cx='525' cy='715' r='5.5'/%3E%3Ccircle cx='190' cy='735' r='5.5'/%3E%3Ccircle cx='300' cy='235' r='5.5'/%3E%3C/g%3E%3Ccircle cx='270' cy='390' r='20' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center/min(86%,620px) no-repeat;
  }
  html:root body.login main{
    grid-column:2;grid-row:1;position:relative;z-index:1;
    flex:none;width:100%;max-width:none;margin:0;justify-content:center;
    padding:56px clamp(40px,7vw,112px);border-radius:0;box-shadow:none;
  }
  body.login main > *{width:100%;max-width:392px}
  .lg-merek{justify-content:flex-start;margin:0 0 30px}
  .lg-merek img{height:44px}
  .lg-judul{text-align:left;font-size:30px}
  .lg-judul::after{margin:14px 0 0}
  .lg-sub{margin:16px 0 0;max-width:38ch;text-align:left;font-size:15px}
  .lg-form{margin-top:30px}
  .lg-f input{min-height:46px;font-size:15px}
  .lg-f input::placeholder{font-size:15px}
  .lg-aksi .btn{min-height:46px;font-size:15px}
  .lg-form .lg-setuju,.lg-alih{text-align:left}
  .lg-alih a{padding-left:2px}
  .lg-tautan{justify-content:flex-start;margin-top:24px}
  .lg-bahasa{justify-content:flex-start;margin-top:0;padding-top:28px}
  #captcha{justify-content:flex-start!important}
}