:root{
  /* Primary */
  --navy-900:#0D1B2A;
  --navy-700:#102A43;
  --navy-500:#1E3A5F;
  --navy-300:#40698F;
  --navy-100:#E6EEF7;
  /* Accent */
  --gold-600:#D6AB4F;
  --gold-500:#E3834E;
  --gold-300:#F5DB8A;
  --gold-100:#FFF4DA;
  /* Semantic */
  --success:#28A745;
  --info:#0D6EFD;
  --warning:#F59E0B;
  --danger:#DC3545;
  --danger-ring:rgba(220,53,69,0.14);
  --neutral:#6C757D;
  /* Neutral */
  --gray-900:#212529;
  --gray-700:#495057;
  --gray-500:#ADB5BD;
  --gray-300:#DEE2E6;
  --gray-100:#F8F9FA;
  --white:#FFFFFF;
  /* Spacing (8pt grid) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;
  --sp-20:80px;
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px;
  --shadow-card:0 1px 2px rgba(13,27,42,0.06), 0 1px 3px rgba(13,27,42,0.08);
  --shadow-float:0 12px 32px rgba(13,27,42,0.16);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Poppins', sans-serif;
  color:var(--gray-900);
  background:var(--white);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none;}
ul{list-style:none;}

h1,h2,h3,h4{color:var(--navy-900); font-weight:700;}
.h2{font-size:24px; font-weight:600; line-height:1.3;}
.h3{font-size:20px; font-weight:600; color:var(--navy-700);}
.body-sm{font-size:12px; font-weight:400; color:var(--neutral);}
.caption{font-size:11px; font-weight:400; color:var(--neutral);}
.icon{width:18px; height:18px; flex-shrink:0;}

/* ===== Platform switcher (konsisten dgn landing page) ===== */
.platform-switcher{
  position:sticky; top:0; z-index:60;
  background:#111827;
  display:flex; align-items:center; justify-content:center;
  gap:var(--sp-2);
  padding:8px var(--sp-4);
  font-size:12px;
  height:40px;
  box-sizing:border-box;
}
.platform-switcher .ps-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 14px; border-radius:999px; color:#9CA3AF;
  font-weight:500; font-size:12.5px;
  transition:background-color .15s ease, color .15s ease;
}
.platform-switcher .ps-btn svg{ width:14px; height:14px; }
.platform-switcher .ps-btn:hover{ color:#fff; background:rgba(255,255,255,0.08); }
.platform-switcher .ps-btn.active{ background:#fff; color:#111827; font-weight:600; }

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-size:14px; font-weight:600;
  padding:13px 24px;
  border-radius:var(--radius-sm);
  transition:background-color .15s ease, border-color .15s ease;
  white-space:nowrap; width:100%;
}
.btn-primary{ background:var(--navy-700); color:var(--white); }
.btn-primary:hover{ background:var(--navy-900); }
.btn-secondary{ background:var(--white); color:var(--navy-700); border:1px solid var(--gray-300); }
.btn-secondary:hover{ background:var(--gray-100); }
.btn-text{ background:none; color:var(--navy-700); padding:0; font-weight:600; font-size:13px; width:auto; }
.btn-text:hover{ color:var(--gold-600); }

/* ===== Layout ===== */
.auth-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:44% 56%;
}

/* ----- Left brand panel ----- */
.auth-brand{
  position:relative;
  background:radial-gradient(120% 120% at 20% 15%, #16324D 0%, var(--navy-900) 60%);
  color:var(--white);
  padding:var(--sp-10) var(--sp-12);
  display:flex; flex-direction:column;
  overflow:hidden;
}
.brand-top{ position:relative; z-index:2; }
.brand-top .logo-mark{ display:flex; align-items:center; gap:2px; line-height:1; }
.brand-top .logo-mark span{ font-size:24px; font-weight:700; color:var(--white); letter-spacing:0.5px; }
.brand-top .logo-mark .accent{ color:var(--gold-500); }
.brand-top .logo-tag{ font-size:10px; color:#8AA0B8; letter-spacing:0.3px; margin-top:4px; }

.brand-middle{
  flex:1; display:flex; flex-direction:column; justify-content:center;
  position:relative; z-index:2;
}
.brand-copy{ max-width:400px; }
.brand-copy h1{
  color:var(--white); font-size:30px; line-height:1.3; font-weight:700;
}
.brand-copy p{ color:#AFC0D2; margin-top:var(--sp-4); font-size:14.5px; max-width:38ch; }

.brand-shield{
  position:relative; margin-top:var(--sp-10); width:220px; height:220px; z-index:2;
}

.brand-bottom{ position:relative; z-index:2; }
.brand-points{ display:flex; flex-direction:column; gap:var(--sp-4); margin-bottom:var(--sp-10); }
.brand-point{ display:flex; align-items:center; gap:var(--sp-3); }
.brand-point .pt-ic{
  width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.14);
  display:flex; align-items:center; justify-content:center; color:var(--gold-300); flex-shrink:0;
}
.brand-point b{ display:block; font-size:13px; color:var(--white); font-weight:600; }
.brand-point span{ font-size:11.5px; color:#8AA0B8; }

.brand-footer{ font-size:11.5px; color:#7C93AC; position:relative; z-index:2; }

.brand-orbit{ position:absolute; border:1px solid rgba(255,255,255,0.06); border-radius:50%; }
.orbit-1{ width:520px; height:520px; top:-160px; right:-220px; }
.orbit-2{ width:340px; height:340px; top:-70px; right:-140px; }
.orbit-dot{ position:absolute; width:8px; height:8px; border-radius:50%; background:var(--gold-500); top:-140px; right:60px; }

/* ----- Right form panel ----- */
.auth-form-side{
  display:flex; align-items:flex-start; justify-content:center; /* flex-start + margin:auto di .auth-card = tetap di tengah, tidak terpotong di layar pendek */
  padding:var(--sp-10) var(--sp-6);
  background:var(--white);
}
.auth-card{ width:100%; max-width:400px; margin:auto; transition:max-width .2s ease; }

/* Kartu melebar hanya saat tab Daftar aktif */
.auth-card:has(#panelDaftar.active){ max-width:520px; }

.auth-tabs{
  display:flex; background:var(--gray-100); border-radius:999px; padding:4px; margin-bottom:var(--sp-8);
}
.auth-tab{
  flex:1; text-align:center; padding:10px 0; border-radius:999px;
  font-size:13.5px; font-weight:600; color:var(--gray-700);
  transition:background-color .15s ease, color .15s ease;
}
.auth-tab.active{ background:var(--white); color:var(--navy-900); box-shadow:var(--shadow-card); }

.auth-card .lead{ margin-bottom:var(--sp-6); }
.auth-card .lead h2{ font-size:22px; }
.auth-card .lead p{ color:var(--neutral); font-size:13px; margin-top:6px; }

.field-group{ margin-bottom:var(--sp-5); }
.field-label{
  display:block; font-size:13px; font-weight:600; color:var(--navy-900);
  margin-bottom:var(--sp-2);
}
.field-input{
  display:flex; align-items:center; gap:var(--sp-3);
  border:1px solid var(--gray-300); border-radius:var(--radius-sm);
  padding:0 var(--sp-3); background:var(--white);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field-input:focus-within{
  border-color:var(--navy-500);
  box-shadow:0 0 0 3px rgba(30,58,95,0.12);
}
.field-input .icon{ color:var(--gray-500); width:16px; height:16px; }

.field-input input{
  border:none; outline:none; flex:1; min-width:0;
  font-family:inherit; font-size:14px;
  color:var(--gray-900); background:transparent; padding:12px 0;
}
.field-input input::placeholder{ color:var(--gray-500); }

.field-input .toggle-eye{ color:var(--gray-500); display:flex; align-items:center; }
.field-input .toggle-eye:hover{ color:var(--navy-700); }

/* Ikon mata: tercoret saat kata sandi tersembunyi, terbuka saat terlihat */
.toggle-eye .eye-open{ display:none; }
.toggle-eye.is-visible .eye-open{ display:block; }
.toggle-eye.is-visible .eye-off{ display:none; }

.field-hint{ font-size:11px; color:var(--neutral); margin-top:6px; }

/* ===== Error per kolom ===== */
.field-error{
  color:var(--danger);
  font-size:12px;
  line-height:1.4;
  margin-top:6px;
}

/* Kolom bermasalah: border merah */
.field-input.has-error{ border-color:var(--danger); }
.field-input.has-error:focus-within,
.select-custom.has-error.open{
  border-color:var(--danger);
  box-shadow:0 0 0 3px var(--danger-ring);
}

/* Hint disembunyikan selama pesan error tampil (hint muncul lagi saat error dihapus JS) */
.field-error ~ .field-hint{ display:none; }

/* ===== Dropdown custom (pekerjaan) ===== */
.select-custom{ position:relative; }

.select-trigger{
  flex:1; min-width:0;
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2);
  padding:12px 0; text-align:left;
  font-family:inherit; font-size:14px; color:var(--gray-900);
  outline:none;
}
.select-value{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.select-value.is-placeholder{ color:var(--gray-500); }
.select-trigger .chevron{ color:var(--gray-500); transition:transform .15s ease; }
.select-custom.open .chevron{ transform:rotate(180deg); }
.select-custom.open{
  border-color:var(--navy-500);
  box-shadow:0 0 0 3px rgba(30,58,95,0.12);
}

.select-menu{
  display:none;
  position:absolute; left:0; right:0; top:calc(100% + 6px);
  z-index:20;
  max-height:240px; overflow-y:auto;
  background:var(--white);
  border:1px solid var(--gray-300);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-float);
  padding:6px;
}
.select-custom.open .select-menu{ display:block; }

.select-menu li{
  padding:10px 12px;
  border-radius:6px;
  font-size:13.5px; color:var(--gray-900);
  cursor:pointer;
}
.select-menu li:hover{ background:var(--navy-100); }
.select-menu li.selected{
  background:var(--navy-100); color:var(--navy-700); font-weight:600;
}

/* ===== Checkbox, divider, tabs ===== */
.field-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-6); }
.checkbox-row{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--gray-700); }
.checkbox-row input[type="checkbox"]{
  appearance:none; width:16px; height:16px; border:1.5px solid var(--gray-300);
  border-radius:4px; display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0; cursor:pointer;
}
.checkbox-row input[type="checkbox"]:checked{
  background:var(--navy-700); border-color:var(--navy-700);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:11px;
}

.divider{
  display:flex; align-items:center; gap:var(--sp-3); margin:var(--sp-6) 0;
  color:var(--gray-500); font-size:12px;
}
.divider::before, .divider::after{ content:""; flex:1; height:1px; background:var(--gray-300); }

.auth-switch{ text-align:center; margin-top:var(--sp-6); font-size:13px; color:var(--gray-700); }

.form-panel{ display:none; }
.form-panel.active{ display:block; }

.auth-badges{ display:flex; align-items:center; gap:var(--sp-4); margin-top:var(--sp-8); }
.auth-badges .badge-item{ display:flex; align-items:center; gap:6px; font-size:11px; color:var(--neutral); }
.auth-badges .badge-item .icon{ width:14px; height:14px; color:var(--success); }

/* ===== Form Daftar: 2 kolom & lebih rapat (supaya tidak perlu scroll) ===== */
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:var(--sp-4);
}
.form-grid .span-2{ grid-column:1 / -1; }

#panelDaftar .lead{ margin-bottom:var(--sp-4); }
#panelDaftar .lead p{ margin-top:2px; }
#panelDaftar .field-group{ margin-bottom:var(--sp-3); }
#panelDaftar .field-label{ margin-bottom:6px; }
#panelDaftar .field-input input,
#panelDaftar .select-trigger{ padding:10px 0; }
#panelDaftar .auth-switch{ margin-top:var(--sp-4); }

/* Error di form Daftar tidak menambah tinggi halaman (tanpa scroll):
   pesan "melayang" di celah antar kolom, jadi tinggi form selalu tetap. */
#panelDaftar .field-group{ position:relative; margin-bottom:20px; }
#panelDaftar .field-error{
  position:absolute; left:0; top:100%;
  margin-top:2px;
  font-size:11.5px; line-height:1.3;
}

/* Kolom kata sandi: error menimpa posisi hint (hint disembunyikan tapi tetap makan ruang) */
#panelDaftar .has-hint .field-error{ top:auto; bottom:0; margin-top:0; }
#panelDaftar .has-hint .field-error ~ .field-hint{ display:block; visibility:hidden; }

/* Checkbox terms: error melayang di bawah checkbox */
#panelDaftar .terms-row{ position:relative; margin-bottom:22px; }
#panelDaftar .terms-row .field-error{ top:100%; margin-top:4px; }

/* ===== Responsive ===== */
@media (max-height:820px){
  .auth-form-side{ padding-top:var(--sp-6); padding-bottom:var(--sp-6); }
  .auth-tabs{ margin-bottom:var(--sp-5); }
}

@media (max-width:960px){
  .auth-shell{ grid-template-columns:1fr; }
  .auth-brand{ display:none; }
  .auth-form-side{ padding:var(--sp-10) var(--sp-4); }
}

/* Layar kecil: form Daftar kembali 1 kolom */
@media (max-width:560px){
  .form-grid{ grid-template-columns:1fr; }
}
/* Logo gambar di panel kiri */
.logo-mark img{ display:block; height:44px; width:auto; }