/* login.css — halaman masuk publik: panel kiri terang (branding + model), panel kanan form. */

.lg{min-height:100vh}
.lg-shell{display:grid;grid-template-columns:minmax(0,42%) minmax(0,58%);min-height:100vh}

/* ------------------------------------------------------------ panel kiri */
.lg-aside{background:#f4f5f7;color:#0a0a0a;display:flex;flex-direction:column;
  padding:40px 48px 48px;position:relative;overflow:hidden}
.lg-aside::before{content:"";position:absolute;right:-140px;top:-120px;width:460px;height:460px;
  background:radial-gradient(circle at center, rgba(10,10,10,.07), transparent 70%);pointer-events:none}
.lg-aside::after{content:"";position:absolute;right:40px;bottom:40px;width:150px;height:150px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M4 26V7l7 9 5-6 5 6 7-9v19h-4V15l-3 4-5-6-5 6-3-4v11z' fill='%230a0a0a' fill-opacity='0.045'/></svg>") no-repeat center/contain;
  pointer-events:none}
.lg-aside-top{display:flex;align-items:center;gap:10px}
.lg-aside .lg-mark{width:24px;height:24px;fill:#0a0a0a;stroke:none}
.lg-aside .lg-word{font:700 15px/1 var(--lp-display);letter-spacing:-.01em;color:#0a0a0a}
.lg-aside-body{margin-top:auto}
.lg-h1{font:600 clamp(30px,3.2vw,43px)/1.03 var(--lp-display);letter-spacing:-.028em;
  margin:0 0 22px;max-width:14ch;color:#0a0a0a}
.lg-points{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:10px}
.lg-points li{position:relative;padding-left:24px;font-size:13.5px;color:#3a3f46;line-height:1.5}
.lg-points li::before{content:"";position:absolute;left:2px;top:4px;width:8px;height:4px;
  border-left:1.7px solid #0a0a0a;border-bottom:1.7px solid #0a0a0a;transform:rotate(-45deg)}
.lg-models{border-top:1px solid rgba(10,10,10,.14);padding-top:16px}
.lg-models-title{font:600 11px/1 var(--lp-body);letter-spacing:.12em;text-transform:uppercase;
  color:#6b7280;margin:0 0 12px}
.lg-model-list{display:flex;flex-direction:column;gap:8px}
.lg-model-item{display:flex;align-items:center;gap:10px;font:500 12.5px/1.3 var(--lp-mono);color:#15181c;
  min-height:34px}
.lg-logo{width:17px;height:17px;flex:none;fill:currentColor}
.lg-model-item .lg-chip{width:30px;height:30px;flex:none;display:grid;place-items:center;
  border:1px solid rgba(10,10,10,.16);border-radius:8px;background:rgba(10,10,10,.03)}
.lg-model-item .lg-up{margin-left:auto;font:400 11px/1.3 var(--lp-mono);color:#7b828c;
  max-width:52%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-aside-foot{margin-top:26px;font-size:11.5px;color:#7b828c}

/* ------------------------------------------------------------ panel form */
/* watermark M: hanya mobile (desktop punya watermark sendiri di panel kiri).
   stroke dimatikan: body punya kelas .lp -> aturan landing.css '.lp svg{stroke:currentColor;stroke-width:1.75}'
   mewarisi stroke putih tebal (~19px setelah skala) ke glyph. */
.lg-wm{display:none}
body .lg-wm,body .lg-wm path{stroke:none}

.lg-main{display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:48px 24px;background:var(--lp-paper)}
.lg-card{width:100%;max-width:400px}
.lg-brand-mobile{display:none;align-items:center;gap:9px;margin-bottom:26px}
.lg-brand-mobile .lg-mark{width:22px;height:22px;fill:var(--lp-ink);stroke:none}
.lg-brand-mobile .lg-word{font:700 14px/1 var(--lp-display);letter-spacing:-.01em}
.lg-eyebrow{font:600 11.5px/1 var(--lp-body);letter-spacing:.14em;text-transform:uppercase;
  color:var(--lp-faint);margin:0 0 12px}
.lg-title{font:600 27px/1.15 var(--lp-display);letter-spacing:-.022em;margin:0 0 8px}
.lg-sub{margin:0 0 26px;color:var(--lp-mute);font-size:14px;line-height:1.55;text-wrap:balance}

.lg-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:48px;
  background:#fff;border:1px solid #fff;border-radius:10px;
  font:600 14.5px/1 var(--lp-body);cursor:pointer;text-decoration:none;
  transition:transform .12s ease, box-shadow .18s ease, background .18s ease}
.lp a.lg-google,.lp a.lg-google:hover{color:#111}
.lg-google:hover{background:#f2f3f5;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.lg-google:active{transform:translateY(1px) scale(.995)}
.lg-google svg{width:18px;height:18px;flex:none}
.lg-google[aria-disabled="true"]{background:#e2e4e7;border-color:#e2e4e7;cursor:not-allowed}
.lp a.lg-google[aria-disabled="true"]{color:#5b6269}
.lp a.lg-google[aria-disabled="true"]:hover{background:#e2e4e7;box-shadow:none}

.lg-div{display:flex;align-items:center;gap:12px;margin:22px 0;color:var(--lp-faint);
  font:600 10.5px/1 var(--lp-body);letter-spacing:.12em;text-transform:uppercase}
.lg-div::before,.lg-div::after{content:"";flex:1;height:1px;background:var(--lp-line)}

.lg-check{display:flex;align-items:flex-start;gap:11px;cursor:pointer;margin:22px 0 6px;
  font-size:12.8px;line-height:1.5;color:var(--lp-mute);position:relative;
  min-height:44px;padding:2px 0}
.lg-check input{appearance:none;-webkit-appearance:none;width:20px;height:20px;flex:none;margin:0;
  border:1px solid #3a4046;border-radius:5px;background:var(--lp-panel);cursor:pointer;
  transition:background .15s ease,border-color .15s ease}
.lg-check input:hover{border-color:#4a5158}
.lg-check input:checked{background:var(--lp-accent);border-color:var(--lp-accent);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8.4l3 3 6-6.6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-size:13px 13px;background-position:center;background-repeat:no-repeat}
.lg-check input:focus-visible{outline:2px solid var(--lp-accent);outline-offset:2px}
.lg-check a{color:var(--lp-ink);text-decoration:underline;text-underline-offset:2px}
.lg-alert a,.lp-alert a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.lg-hint{font-size:12.4px;color:var(--lp-faint);margin:0 0 10px;min-height:0}
.lg-hint.is-err{color:#e88a99}
.lg-hint.is-ok{color:var(--lp-ok)}
.lg-shake{animation:lgshake .32s ease}
@keyframes lgshake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}
  50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}

.lg-alt{margin-top:16px;font-size:12.5px;color:var(--lp-mute);line-height:1.6}
.lg-alt a{color:var(--lp-ink);text-decoration:underline;text-underline-offset:2px}
.lg-dev{display:block;width:100%;margin-top:12px;height:40px;border-radius:9px;
  border:1px solid var(--lp-line);background:transparent;color:var(--lp-ink);cursor:pointer;
  font:600 13px/1 var(--lp-body);transition:background .15s ease,border-color .15s ease}
.lg-dev:hover{background:var(--lp-panel);border-color:#3a4046}
.lg-foot{margin-top:24px;font-size:12.4px;color:var(--lp-faint);line-height:1.65;
  border-top:1px solid var(--lp-line-soft);padding-top:16px}
.lg-foot a{color:var(--lp-ink);text-decoration:underline;text-underline-offset:2px}
.lg-foot a:hover{color:#fff}
.lg-lang{display:flex;justify-content:flex-end;margin-bottom:10px}

/* ------------------------------------------------------------- responsif */
@media (max-width:1020px){
  .lg-shell{grid-template-columns:1fr}
  .lg-aside{display:none}
  .lg-main{min-height:100vh;padding:32px 20px;justify-content:center}
  .lg-brand-mobile{display:flex}
}
@media (max-width:520px){
  .lg-main{padding:24px 16px 32px}
  .lg-brand-mobile{margin-bottom:22px}
  .lg-title{font-size:23px}
  .lg-sub{font-size:13.5px;margin-bottom:22px}
  .lg-google{height:46px;font-size:14px}
  .lg-card{max-width:100%}
  .lg-check{font-size:12.4px}
  .lg-foot{margin-top:22px}
}

.lg-cf{margin:0 0 12px}
.lg-cf[hidden]{display:none}
.lg-cf iframe{margin:0 auto;display:block}

/* halaman ban: badge, daftar identitas, tautan keluar */
.lg-ban-badge{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 11px;border-radius:999px;
  background:rgba(224,74,98,.14);border:1px solid rgba(224,74,98,.35);color:#ffb3bf;
  font-size:12.5px;font-weight:600;margin:2px 0 12px}
.lg-ban-badge svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lg-ban-kv{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:12.6px;margin:0 0 16px;
  padding:12px 13px;border:1px solid var(--lp-line);border-radius:12px;background:rgba(255,255,255,.02)}
.lg-ban-kv dt{color:var(--lp-faint)}
.lg-ban-kv dd{margin:0;word-break:break-word;color:var(--lp-ink)}
.lg-back{display:inline-block;margin-top:14px;font-size:12.6px;color:var(--lp-faint);text-decoration:none}
.lg-back:hover{color:var(--lp-ink)}

/* --------------------------------------------------- sentuh mobile login (48px ala apmix) */
@media (max-width:520px){
  .lg-main{padding-top:18px}
  .lg-lang-btn{min-width:44px;min-height:36px}
  .lg-check a{padding:3px 0}
  .lg-google{height:48px}
  .lg-check{min-height:44px;align-items:center}
  .lg-check input{width:19px;height:19px}
  .lg-check span{font-size:13px;line-height:1.5}
}

/* =====================================================================
   MOBILE REFRESH v2 — halaman masuk
   Struktur kartu: .lg-top (logo + bahasa) · .lg-body · .lg-foot
   Alur: centang persetujuan -> (verifikasi) -> tombol Google.
   ===================================================================== */
.lg-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.lg-top .lg-lang{margin:0 0 10px 0;margin-left:auto}
.lg-sub-m{display:none}
.lg-google{margin-top:2px}

/* kotak persetujuan (semua ukuran): hint di bawahnya */
.lg-check{margin:22px 0 0}

@media (max-width:1020px){
  .lg-main{padding:0;align-items:stretch;justify-content:flex-start;position:relative;overflow:hidden;
    min-height:100vh;min-height:100dvh}
  .lg-wm{display:block;position:absolute;right:-16%;top:48%;transform:translateY(-50%);
    width:min(88vw,430px);height:auto;fill:#c04257;stroke:none;opacity:.30;pointer-events:none}
  .lg-card{z-index:1;position:relative;max-width:440px;margin:0 auto;display:flex;flex-direction:column;
    min-height:100vh;min-height:100dvh;padding:12px 20px calc(20px + env(safe-area-inset-bottom,0px))}

  .lg-top{min-height:52px}
  .lg-top .lg-lang{margin:0}
  .lg-brand-mobile{display:flex;margin:0}
  .lg-brand-mobile .lg-mark{width:24px;height:24px}
  .lg-brand-mobile .lg-word{font-size:15px}
  .lg-top .lp-lang{height:40px}
  .lg-top .lp-lang-btn{min-width:42px;height:32px;font-size:12.5px}

  .lg-body{margin-top:auto;margin-bottom:auto;padding:28px 0}
  .lg-eyebrow{margin-bottom:12px}
  .lg-title{font-size:30px;line-height:1.1;margin:0 0 10px}
  .lg-sub-m{display:block;margin:0 0 26px;font-size:14.5px;line-height:1.55;color:var(--lp-mute)}

  .lp-alert{margin:0 0 16px;max-width:none}

  /* persetujuan: kartu yang seluruhnya bisa diketuk */
  .lg-check{margin:12px 0 0;padding:0;border:0;border-radius:0;background:transparent;min-height:44px;align-items:flex-start}
  .lg-check input{width:22px;height:22px;margin-top:1px;border-radius:6px}
  .lg-check span,.lg-check span span{font-size:13.5px;line-height:1.55}
  .lg-check a{padding:4px 0;color:var(--lp-ink)}
  .lg-check:has(input.lg-shake){animation:lgshake .32s ease}
  .lg-hint{margin:0 2px 10px;min-height:0;font-size:12.6px}

  .lg-cf{margin:0 0 14px}

  /* tombol Google: besar, terang saat siap, redup saat belum bisa dipakai */
  .lg-google,.lg-google:hover{height:54px;border-radius:12px;font-size:15px;margin-top:0;
    box-shadow:0 10px 28px rgba(0,0,0,.4)}
  .lg-google svg{width:20px;height:20px}
  .lp a.lg-google[aria-disabled="true"],
  .lp a.lg-google[aria-disabled="true"]:hover{background:#1b1f25;border-color:#262b32;color:#7d858f;box-shadow:none}
  .lg-google[aria-disabled="true"] svg{filter:grayscale(1) opacity(.55)}

  .lg-alt{margin-top:12px;text-align:center;font-size:13px}
  .lg-dev{height:48px;border-radius:12px;margin-top:14px}

  .lg-foot{margin-top:0;padding-top:16px;font-size:12.4px;text-align:left}
  .lg-foot a[href="/"]{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--lp-mute);
    text-decoration:none}
  .lg-foot a[href="/"]::before{content:"\2190";font-size:15px;line-height:1}
  .lg-foot a[href="/"]:hover{color:var(--lp-ink)}
  .lg-foot div[style]{margin-top:2px !important}
}

@media (max-width:520px){
  .lg-main{padding:0}
  .lg-card{padding:10px 20px calc(18px + env(safe-area-inset-bottom,0px))}
  .lg-title{font-size:28px}
  .lg-check{min-height:60px;align-items:flex-start}
}

/* Turnstile (300px) pada layar <= 340px: kecilkan sedikit agar tidak terpotong */
@media (max-width:340px){
  .lg-cf iframe{transform:scale(.88);transform-origin:left center;margin:0}
  .lg-cf{height:58px}
}