/* =====================================================================
   OpenClass UMKM — Gaya halaman auth (login & register), layout split.
   Warna brand merah default. Dipakai bersama oleh auth/login.php & register.php.
   ===================================================================== */
:root { --brand:#e63946; --brand-dark:#c1121f; }
* { box-sizing:border-box; }
body { margin:0; font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; background:#eef0f4; color:#0f172a; }

.lg-shell { display:flex; min-height:100vh; max-width:1180px; margin:0 auto; background:#fff; }
@media (min-width:1220px){ .lg-shell{ margin:24px auto; min-height:calc(100vh - 48px); border-radius:1.5rem; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.12);} }

/* ── Panel kiri (form) ── */
.lg-left { flex:1 1 50%; display:flex; align-items:center; justify-content:center; padding:2.5rem 1.5rem; }
.lg-form { width:100%; max-width:380px; }
.lg-brand { margin-bottom:2rem; }
.lg-brand img { height:46px; width:auto; display:block; }
.lg-title { font-size:1.9rem; font-weight:800; letter-spacing:-.02em; margin:0 0 .4rem; }
.lg-sub { font-size:.86rem; color:#64748b; margin:0 0 1.6rem; }
.lg-sub a { color:var(--brand); font-weight:700; text-decoration:none; }
.lg-sub a:hover { text-decoration:underline; }

.lg-label { font-size:.78rem; font-weight:600; color:#475569; margin-bottom:.35rem; display:block; }
.lg-field { position:relative; margin-bottom:1rem; }
.lg-input { width:100%; border:1.5px solid #e5e7eb; background:#f8fafc; border-radius:.7rem;
  padding:.8rem 1rem; font-size:.9rem; color:#0f172a; transition:all .15s; }
.lg-input:focus { outline:none; background:#fff; border-color:var(--brand); box-shadow:0 0 0 3px rgba(230,57,70,.12); }
.lg-eye { position:absolute; right:.6rem; top:50%; transform:translateY(-50%); border:none; background:none;
  color:#94a3b8; cursor:pointer; padding:.35rem; font-size:1.05rem; line-height:1; }
.lg-eye:hover { color:var(--brand); }

.lg-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.3rem; }
.lg-check { display:flex; align-items:center; gap:.45rem; font-size:.82rem; color:#475569; cursor:pointer; user-select:none; }
.lg-check input { width:16px; height:16px; accent-color:var(--brand); }
.lg-forgot { font-size:.82rem; color:var(--brand); font-weight:700; text-decoration:none; }
.lg-forgot:hover { text-decoration:underline; }

/* Pilihan peran (register) */
.lg-roles { display:flex; gap:.7rem; margin-bottom:1.3rem; }
.lg-role { flex:1; cursor:pointer; position:relative; margin:0; }
.lg-role input { position:absolute; opacity:0; pointer-events:none; }
.lg-role .box { display:block; border:1.5px solid #e5e7eb; border-radius:.7rem; padding:.8rem; text-align:center; transition:all .15s; background:#f8fafc; }
.lg-role .box i { font-size:1.2rem; color:#94a3b8; display:block; margin-bottom:.25rem; }
.lg-role .box span { display:block; font-size:.82rem; font-weight:600; color:#475569; }
.lg-role input:checked + .box { border-color:var(--brand); background:#fff5f5; }
.lg-role input:checked + .box i, .lg-role input:checked + .box span { color:var(--brand); }

.lg-btn { width:100%; border:none; background:var(--brand); color:#fff; font-weight:700; font-size:.95rem;
  padding:.85rem; border-radius:.7rem; cursor:pointer; transition:all .15s; }
.lg-btn:hover { background:var(--brand-dark); transform:translateY(-1px); box-shadow:0 8px 20px rgba(230,57,70,.3); }

.lg-alert { background:#fef2f2; border:1px solid #fecaca; color:#b91c1c; font-size:.84rem;
  padding:.7rem .9rem; border-radius:.6rem; margin-bottom:1.2rem; display:flex; gap:.5rem; align-items:center; }

.lg-foot { text-align:center; font-size:.82rem; color:#94a3b8; margin-top:1.6rem; }
.lg-foot a { color:#475569; text-decoration:none; }
.lg-foot a:hover { color:var(--brand); }

/* ── Panel kanan (promo) ── */
.lg-right { flex:1 1 50%; position:relative; overflow:hidden; color:#fff; padding:2.5rem;
  background:linear-gradient(150deg, var(--brand) 0%, var(--brand-dark) 55%, #7a0c14 100%); }
.lg-right::after { content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse 55% 50% at 85% 8%, rgba(255,255,255,.18), transparent 60%); }
.lg-bottom { position:relative; display:flex; flex-direction:column; height:100%; }
.lg-support { position:relative; display:flex; justify-content:flex-end; }
.lg-support a { color:rgba(255,255,255,.9); font-size:.82rem; text-decoration:none; display:inline-flex; align-items:center; gap:.4rem;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); padding:.4rem .85rem; border-radius:999px; }
.lg-support a:hover { background:rgba(255,255,255,.22); }

.lg-card { position:relative; background:#fff; color:#0f172a; border-radius:1.1rem; padding:1.4rem;
  box-shadow:0 24px 50px rgba(0,0,0,.25); margin:2.2rem 0 0; max-width:380px; }
.lg-card h3 { font-size:1.15rem; font-weight:800; margin:0 0 .5rem; line-height:1.25; padding-right:66px; }
.lg-card p { font-size:.82rem; color:#64748b; margin:0 0 1rem; line-height:1.6; }
.lg-card-btn { display:inline-block; background:#0f172a; color:#fff; font-size:.8rem; font-weight:600;
  padding:.5rem 1rem; border-radius:999px; text-decoration:none; }
.lg-card-btn:hover { background:var(--brand); color:#fff; }

.lg-mock { position:absolute; right:-10px; top:-26px; width:150px; height:94px; border-radius:.8rem; transform:rotate(8deg);
  background:linear-gradient(135deg,#1e293b,#0f172a); color:#fff; padding:.6rem .7rem; box-shadow:0 14px 30px rgba(0,0,0,.3);
  border:1px solid rgba(255,255,255,.08); }
.lg-mock .mk-brand img { height:15px; width:auto; display:block; filter:brightness(0) invert(1); }
.lg-mock .mk-no { font-size:.6rem; letter-spacing:.12em; color:#cbd5e1; margin-top:1.2rem; }
.lg-mock .mk-chip { width:20px; height:14px; border-radius:3px; background:linear-gradient(135deg,#f59e0b,#d97706); margin-top:.2rem; }

.lg-stat { display:flex; align-items:center; gap:.6rem; margin-top:1rem; padding-top:.9rem; border-top:1px solid #f1f5f9; }
.lg-stat .ic { width:34px; height:34px; border-radius:.6rem; background:#fff5f5; color:var(--brand);
  display:flex; align-items:center; justify-content:center; font-size:1rem; }
.lg-stat .lb { font-size:.68rem; color:#94a3b8; }
.lg-stat .vl { font-size:1.05rem; font-weight:800; color:#0f172a; line-height:1.1; }

.lg-feat { position:relative; margin-top:auto; }
.lg-feat h2 { font-size:1.5rem; font-weight:800; letter-spacing:-.02em; margin:2.5rem 0 .6rem; }
.lg-feat p { font-size:.86rem; color:rgba(255,255,255,.85); line-height:1.7; max-width:420px; margin:0; }
.lg-dots { display:flex; gap:.4rem; margin-top:1.4rem; }
.lg-dots span { width:7px; height:7px; border-radius:999px; background:rgba(255,255,255,.4); }
.lg-dots span.on { width:20px; background:#fff; }

@media (max-width:991.98px){
  .lg-right { display:none; }
  .lg-left { flex-basis:100%; }
}