* { box-sizing:border-box; }
body { margin:0; min-height:100vh; display:flex; flex-wrap:wrap; background:var(--ground); color:var(--ink);
       font-family:var(--sans); -webkit-font-smoothing:antialiased; }
.serif { font-family:var(--serif); }
::selection { background:#F2DDA4; color:var(--ink); }
input { caret-color:var(--navy); }
::placeholder { color:#697382; opacity:1; }

/* -- panel arsip (kiri) -- */
.arsip { flex:1 1 460px; background:var(--navy); color:var(--teks-terang); border-right:3px solid var(--emas);
         padding:56px 64px; display:flex; flex-direction:column; justify-content:space-between; gap:48px; }
.merek { display:flex; align-items:center; gap:13px; }
.lambang { width:34px; height:34px; flex:none; overflow:visible; }
/* halaman dibuka: pita penanda turun ke halamannya, lalu baris disorot spidol dari kiri -- sekali */
.lambang-sorot { transform-origin:left center; transform-box:fill-box; }
.lambang-pita { transform-box:fill-box; }
@media (prefers-reduced-motion: no-preference) {
  .lambang-pita { animation:lambang-pita .5s var(--mulus) .15s both; }
  .lambang-sorot { animation:lambang-sapu .8s var(--mulus) .5s both; }
}
@keyframes lambang-pita { from { transform:translateY(-6px); opacity:0; } }
@keyframes lambang-sapu { from { transform:scaleX(0); } }
.merek-teks { display:flex; flex-direction:column; gap:1px; }
.merek-nama { font-size:21px; font-weight:700; line-height:1.1; letter-spacing:-0.01em; }
.merek-nama span { color:var(--emas-terang); }
.merek-sub { font-size:12px; color:#A3B1C2; letter-spacing:.1em; text-transform:uppercase; }
.slogan { display:flex; flex-direction:column; gap:20px; max-width:460px; }
.slogan h1 { margin:0; font-size:40px; line-height:1.15; font-weight:600; letter-spacing:-0.01em; }
.slogan p { margin:0; font-size:16.5px; line-height:1.6; color:#C5D0DE; }
.fakta { margin:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px;
         border-top:1px solid rgba(255,255,255,.14); padding-top:24px; }
.fakta div { display:flex; flex-direction:column; gap:4px; }
.fakta dt { font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#A3B1C2; }
.fakta dd { margin:0; font-size:15px; line-height:1.35; }
.fakta dd.serif { font-size:24px; font-weight:600; }

/* -- formulir (kanan) -- */
.bidang { flex:999 1 520px; min-width:0; display:flex; align-items:center; justify-content:center; padding:56px 24px; }
form { width:100%; max-width:400px; display:flex; flex-direction:column; gap:24px; }
.judul { display:flex; flex-direction:column; gap:6px; }
.judul h2 { margin:0; font-size:30px; font-weight:600; color:var(--navy-pekat); }
.judul p { margin:0; font-size:15px; color:var(--ink2); }
.isian { display:flex; flex-direction:column; gap:16px; }
.kolom { display:flex; flex-direction:column; gap:6px; }
.kolom label { font-size:13.5px; font-weight:600; color:var(--ink2); }
.kolom input { width:100%; height:46px; padding:0 14px; border:1px solid var(--tepi-input); border-radius:6px;
               background:var(--kertas); font:inherit; font-size:16px; color:var(--ink);
               transition:border-color var(--t-cepat), box-shadow var(--t) var(--mulus); }
.kolom input:hover:not(:focus) { border-color:#B9B1A0; }
.kolom input:focus { outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(22,55,94,.28); }
.kolom input[aria-invalid=true] { border-color:var(--galat-input); }
.sandi { position:relative; display:flex; }
.sandi input { padding-right:76px; }
.lihat { position:absolute; right:4px; top:4px; height:38px; min-width:64px; padding:0 10px; border:0; border-radius:4px;
         background:transparent; font:inherit; font-size:13.5px; font-weight:600; color:var(--navy); cursor:pointer; }
.lihat { transition:background var(--t-cepat); }
.lihat:hover { background:#EEF2F7; }
.ingat { display:flex; align-items:center; gap:10px; min-height:44px; font-size:15px; color:var(--ink2); cursor:pointer; }
.ingat input { width:18px; height:18px; margin:0; accent-color:var(--navy); }
.galat { display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border:1px solid var(--galat-tepi);
         background:var(--galat-latar); border-radius:6px; font-size:14.5px; line-height:1.45; color:var(--galat); }
.galat svg { flex:none; margin-top:1px; }
.galat p { margin:0; }
.bantu-kolom, .galat-kolom { margin:0; font-size:13px; line-height:1.5; }
.bantu-kolom { color:var(--ink2); }
.galat-kolom { padding-left:18px; color:var(--galat); }
.tombol { height:48px; border:0; border-radius:6px; background:var(--navy); color:#FFFFFF; font:inherit; font-size:16px;
          font-weight:600; cursor:pointer; box-shadow:inset 0 -2px 0 var(--navy-tua); }
.tombol { transition:background var(--t-cepat), transform var(--t) var(--pegas), box-shadow var(--t) var(--mulus); }
.tombol:hover { background:var(--navy-tua); }
@media (hover: hover) {
  .tombol:not([disabled]):hover { transform:translateY(var(--angkat)); box-shadow:inset 0 -2px 0 #081B33, var(--bayang-angkat); }
}
.tombol:not([disabled]):active { transform:scale(.985); box-shadow:none; transition-duration:var(--t-cepat), .06s, .06s; }
.tombol[disabled] { opacity:.7; cursor:progress; }
button:focus-visible, input[type=checkbox]:focus-visible { outline:3px solid var(--emas-terang); outline-offset:2px; }
.catatan { margin:0; padding-top:18px; border-top:1px solid var(--garis); font-size:14px; line-height:1.55; color:var(--redup); }
.pindah-akun { margin:0; font-size:15px; line-height:1.5; color:var(--ink2); }
.pindah-akun a { color:var(--navy); font-weight:600; text-underline-offset:3px; }
.pindah-akun a:hover { text-decoration-thickness:2px; }
.pindah-akun a:focus-visible { outline:3px solid var(--emas-terang); outline-offset:3px; }

/* ponsel: panel arsip jadi pita ringkas di atas */
@media (max-width: 760px) {
  body { align-content:flex-start; }
  .arsip { flex-basis:100%; border-right:0; border-bottom:3px solid var(--emas); padding:32px 20px 26px; gap:22px; justify-content:flex-start; }
  .merek-sub, .slogan p, .fakta { display:none; }
  .lambang { width:30px; height:30px; }
  .merek-nama { font-size:19px; }
  .slogan h1 { font-size:23px; line-height:1.25; }
  .bidang { align-items:flex-start; padding:28px 20px 40px; }
  form { gap:18px; }
  .judul h2 { font-size:26px; }
  .kolom input { height:48px; }
}
.sprite { position:absolute; width:0; height:0; overflow:hidden; }