:root{
    --navy-900:#03143a;
    --navy-800:#062a6b;
    --navy-700:#08337f;
    --navy-500:#0a3d91;
    --yellow:#ffd200;
    --yellow-2:#ffe14d;
    --white:#ffffff;
    --text:#0d1b36;
    --muted:#6b7a93;
    --line:#dde4f0;
    --font:'Plus Jakarta Sans','Segoe UI',Roboto,Arial,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    font-family:var(--font);
    min-height:100vh;
    background:var(--page);background-attachment:fixed;color:var(--label);
    overflow-x:hidden;transition:background .35s,color .35s;
  }
  /* ===== Ukuran fleksibel: semua ikut tinggi & lebar layar ===== */
  :root{
    --pad:clamp(10px,2.4vh,22px);
    --h-tab:clamp(34px,5.2vh,46px);
    --h-ctl:clamp(38px,5.8vh,52px);
    --h-btn:clamp(40px,6.2vh,56px);
    --fs-label:clamp(12.5px,1.65vh,15px);
    --fs-in:clamp(13px,1.6vh,14.5px);
    --gap-label:clamp(5px,1.1vh,12px);
    --gap-field:clamp(10px,2.2vh,22px);
    --logo-h:clamp(30px,5.4vh,50px);
    --badge-h:clamp(38px,7vh,64px);
    --brand-mb:clamp(14px,4.6vh,56px);
    --tabs-mb:clamp(12px,2.6vh,26px);
    --row-mb:clamp(12px,3vh,30px);
    --terms-pt:clamp(10px,3.4vh,48px);
  }
  .layout{
    position:relative;min-height:100vh;
    display:grid;grid-template-columns:minmax(0,47fr) minmax(0,53fr);
    gap:var(--pad);padding:var(--pad);
  }

  /* ================= PANEL KIRI (latar desain + animasi) ================= */
  .side{
    position:relative;overflow:hidden;border-radius:24px;
    background:#0a2a9c url(../img/panel-bg.jpg) center/cover no-repeat;
    color:#fff;font-family:'Montserrat',var(--font);
    display:flex;flex-direction:column;justify-content:space-between;align-items:center;text-align:center;
    padding:clamp(26px,9vh,110px) 7% clamp(26px,10vh,120px);min-height:calc(100vh - 2 * var(--pad));
    animation:panelIn .9s cubic-bezier(.2,.9,.25,1) both;
  }
  @keyframes panelIn{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:none}}
  .side .bgzoom{ /* gambar latar bergerak pelan */
    position:absolute;inset:-4%;background:url(../img/panel-bg.jpg) center/cover no-repeat;
    animation:breathe 18s ease-in-out infinite alternate;z-index:0;
  }
  @keyframes breathe{from{transform:scale(1) translate(0,0)}to{transform:scale(1.08) translate(-1.5%,1.5%)}}
  /* gelembung kaca yang melayang */
  .bubble{position:absolute;border-radius:50%;z-index:1;pointer-events:none;
    background:radial-gradient(circle at 60% 25%,rgba(170,190,255,.55),rgba(30,110,220,.35) 28%,rgba(10,60,180,.25) 60%,rgba(5,30,120,.1));
    box-shadow:inset 0 -10px 30px rgba(0,20,90,.35),0 0 0 1px rgba(120,170,255,.18)}
  .bubble.b1{width:90px;height:90px;left:12%;top:58%;animation:floatY 9s ease-in-out infinite}
  .bubble.b2{width:46px;height:46px;right:16%;top:30%;animation:floatY 7s ease-in-out -2s infinite}
  .bubble.b3{width:24px;height:24px;left:30%;top:40%;opacity:.8;animation:floatY 6s ease-in-out -4s infinite}
  .bubble.b4{width:60px;height:60px;right:30%;bottom:10%;opacity:.7;animation:floatY 11s ease-in-out -1s infinite}
  @keyframes floatY{0%,100%{transform:translate(0,0)}50%{transform:translate(10px,-26px)}}
  .plus{position:absolute;z-index:1;width:22px;height:22px;opacity:.55;animation:twinkle 4s ease-in-out infinite}
  .plus:before,.plus:after{content:"";position:absolute;background:#fff;left:50%;top:50%;transform:translate(-50%,-50%)}
  .plus:before{width:100%;height:1.5px}.plus:after{width:1.5px;height:100%}
  .plus.p1{left:3.5%;top:4.5%}.plus.p2{left:9%;bottom:10%;opacity:.25;animation-delay:-2s}
  @keyframes twinkle{50%{opacity:.15;transform:rotate(90deg)}}
  #net{position:absolute;inset:0;width:100%;height:100%;z-index:1}

  .side-text{position:relative;z-index:2}
  .side h1{font-size:clamp(20px,min(2.85vw,5.2vh),46px);font-weight:800;line-height:1.1;letter-spacing:-.005em;animation:up .9s .2s both}
  .side .tag{font-size:clamp(13px,min(1.55vw,2.6vh),23px);font-weight:400;margin-top:clamp(4px,1vh,8px);animation:up .9s .35s both}
  .side h2{font-size:clamp(20px,min(3vw,5.2vh),46px);font-weight:700;line-height:1.15;animation:up .9s .5s both}
  .side p{font-size:clamp(13px,min(1.6vw,2.7vh),24px);font-weight:400;line-height:1.4;margin-top:clamp(8px,2vh,18px);opacity:.95;animation:up .9s .65s both}
  @keyframes up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

  /* ================= KARTU LOGIN (sesuai desain) ================= */
  :root{
    --primary:#00429b;          /* biru tombol & tab aktif */
    --primary-dark:#003380;
    --label:#1f2433;
    --ph:#9ea3b5;
    --border:#c9cdf3;
    --tab-bg:#eef1fc;
    --page:linear-gradient(135deg,#d9e9ff 0%,#fffcea 100%);
    --tab-btn:rgba(255,255,255,.75);
    --tab-btn-bd:#d3dbef;
    --tab-btn-hover:#ffffff;
    --tab-tx:#5b6478;
    --input-bg:#ffffff;
    --invalid-bg:#fff8f8;
    --alert-bg:#fff3f3;--alert-bd:#f3c2c2;--alert-tx:#b42323;
  }
  /* ================= DARK MODE ================= */
  html[data-theme="dark"]{
    color-scheme:dark;
    --page:#0b1120;
    --tab-btn:#111a2e;
    --tab-btn-bd:#2b3754;
    --tab-btn-hover:#18233d;
    --tab-tx:#aab3c7;
    --label:#e6eaf3;
    --ph:#8892a8;
    --border:#2b3754;
    --tab-bg:#151e33;
    --input-bg:#111a2e;
    --invalid-bg:#2a1418;
    --alert-bg:#2a1418;--alert-bd:#6b2a32;--alert-tx:#ffb4b4;
    --primary:#1f5fc4;--primary-dark:#2a6fdc;
  }
  .main{position:relative;display:flex;justify-content:center;padding:clamp(44px,7vh,64px) 5% clamp(8px,1.6vh,20px)}
  .card{
    position:relative;width:100%;max-width:clamp(340px,36vw,560px);
    min-height:100%;
    display:flex;flex-direction:column;justify-content:center;
    font-family:'Montserrat',var(--font);
    animation:pop .9s cubic-bezier(.2,.9,.25,1.1) .1s both;
  }
  @keyframes pop{from{opacity:0;transform:translateY(30px) scale(.96)}to{opacity:1;transform:none}}

  .brand{display:flex;align-items:center;gap:clamp(8px,1.4vh,14px);margin:auto 0 var(--brand-mb)}
  .card-logo{display:block;height:var(--logo-h);width:auto;max-width:72%}
  .logo-dark{display:none}
  html[data-theme="dark"] .logo-light{display:none}
  html[data-theme="dark"] .logo-dark{display:block}
  html[data-theme="dark"] .side{box-shadow:0 0 0 1px rgba(120,160,255,.08)}

  /* tombol ganti tema */
  .theme-btn{
    position:absolute;top:clamp(4px,1vh,12px);right:0;z-index:20;width:clamp(34px,5vh,44px);height:clamp(34px,5vh,44px);border-radius:50%;
    border:1.5px solid var(--border);background:var(--input-bg);color:var(--label);cursor:pointer;
    display:grid;place-items:center;transition:background .35s,border-color .35s,transform .3s;
  }
  .theme-btn:hover{transform:rotate(20deg);border-color:var(--primary)}
  .theme-btn svg{width:45%;height:45%}
  .theme-btn .moon{display:block}.theme-btn .sun{display:none}
  html[data-theme="dark"] .theme-btn .moon{display:none}
  html[data-theme="dark"] .theme-btn .sun{display:block;color:#ffd200}
  .badge{display:block;height:var(--badge-h);width:auto;animation:badgeGlow 3.5s ease-in-out infinite}
  @keyframes badgeGlow{50%{filter:drop-shadow(0 0 8px rgba(214,170,60,.55));transform:translateY(-2px)}}

  .label{display:block;font-size:var(--fs-label);font-weight:500;color:var(--label);margin-bottom:var(--gap-label)}

  /* ---------- tab jenis login ---------- */
  .tabs{position:relative;display:flex;gap:8px;margin-bottom:var(--tabs-mb)}
  .tabs button{
    position:relative;z-index:1;flex:1;min-width:0;height:var(--h-tab);padding:0 4px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    border:1px solid var(--tab-btn-bd);background:var(--tab-btn);
    box-shadow:0 1px 2px rgba(15,35,90,.06);
    font-family:inherit;font-size:clamp(12px,1.55vh,13.5px);font-weight:500;color:var(--tab-tx);border-radius:9px;
    transition:color .3s,background .25s,border-color .25s,transform .2s,box-shadow .25s;
  }
  .tabs button:hover{color:var(--label);background:var(--tab-btn-hover);border-color:var(--primary);transform:translateY(-1px);box-shadow:0 4px 10px rgba(15,35,90,.1)}
  .tabs button:active{transform:translateY(0)}
  .tabs button:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
  .tabs button.active{color:var(--white);font-weight:600;background:transparent;border-color:transparent;box-shadow:none;transform:none}
  .tabs .indicator{
    position:absolute;top:0;left:0;height:var(--h-tab);width:calc((100% - 16px)/3);border-radius:9px;
    background:var(--primary);box-shadow:0 6px 14px rgba(0,66,155,.3);
    transition:transform .4s cubic-bezier(.3,1.3,.5,1);
  }
  .swap{animation:swap .35s ease}
  @keyframes swap{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}

  .field{position:relative;margin-bottom:var(--gap-field)}
  .field input{
    width:100%;height:var(--h-ctl);padding:0 clamp(12px,1.6vh,16px);
    border:1.5px solid var(--border);border-radius:8px;background:var(--input-bg);
    font-family:inherit;font-size:var(--fs-in);color:var(--label);outline:none;
    transition:border-color .25s,box-shadow .25s,background .35s,color .35s;
  }
  .field.has-toggle input{padding-right:48px}
  .field input::placeholder{color:var(--ph)}
  .field input:focus{border-color:var(--primary);box-shadow:0 4px 14px rgba(0,66,155,.15)}
  .toggle{position:absolute;right:6px;bottom:calc((var(--h-ctl) - 34px) / 2);width:34px;height:34px;border:0;background:transparent;
          border-radius:8px;cursor:pointer;color:var(--ph);display:grid;place-items:center;transition:color .2s,background .2s}
  .toggle:hover{color:var(--primary);background:var(--tab-bg)}
  .toggle svg{width:19px;height:19px}
  .caps{display:none;font-size:12px;color:#b8860b;margin:calc(var(--gap-field) * -.6) 2px var(--gap-field)}
  .caps.show{display:block}

  .row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:2px 0 var(--row-mb);font-size:12.5px}
  .check{display:flex;align-items:center;gap:10px;cursor:pointer;color:var(--label);font-weight:500;user-select:none}
  .check input{width:18px;height:18px;accent-color:var(--primary);cursor:pointer}
  .forgot{color:var(--ph);text-decoration:underline;font-size:12px}
  .forgot:hover{color:var(--primary)}

  .btn{
    position:relative;width:100%;height:var(--h-btn);border:0;border-radius:8px;cursor:pointer;overflow:hidden;
    font-family:inherit;font-size:clamp(15px,2vh,17px);font-weight:700;color:var(--white);
    background:var(--primary);
    box-shadow:0 10px 24px rgba(0,66,155,.3);
    transition:background .25s,transform .15s,box-shadow .3s;
  }
  .btn:hover{background:var(--primary-dark);box-shadow:0 14px 30px rgba(0,66,155,.4);transform:translateY(-1px)}
  .btn:active{transform:translateY(1px)}
  .btn .ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.35);transform:scale(0);animation:ripple .6s linear;pointer-events:none}
  @keyframes ripple{to{transform:scale(4);opacity:0}}
  .btn:disabled{opacity:.75;cursor:wait}

  .field.invalid input{border-color:#d93a3a;background:var(--invalid-bg)}
  .alert{display:none;margin-bottom:18px;padding:11px 14px;border-radius:8px;font-size:13px;line-height:1.5;
         background:var(--alert-bg);border:1px solid var(--alert-bd);color:var(--alert-tx)}
  .alert.show{display:block;animation:shake .4s}
  @keyframes shake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}

  .terms{margin-top:auto;padding-top:var(--terms-pt);text-align:center;font-size:11.5px;color:var(--ph);line-height:1.5}
  .terms a{color:var(--label);text-decoration:none}
  .terms a:hover{text-decoration:underline}

  /* ---------- Tablet & HP: panel biru jadi banner di atas ---------- */
  @media (max-width:900px){
    :root{
      --h-tab:44px;--h-ctl:48px;--h-btn:50px;--fs-label:14px;
      --gap-label:8px;--gap-field:18px;--logo-h:40px;--badge-h:52px;
      --brand-mb:28px;--tabs-mb:22px;--row-mb:24px;--terms-pt:28px;
    }
    .layout{grid-template-columns:1fr;padding:12px;gap:4px}
    .side{min-height:0;padding:40px 24px;justify-content:center}
    .side h1{font-size:clamp(22px,6vw,34px)}
    .side .tag{font-size:clamp(13px,3.4vw,18px)}
    .side .bottom{display:none}
    .main{position:static;padding:22px 12px 16px}
    .card{max-width:520px;min-height:0}
    .field input{font-size:16px}
    .brand{margin-top:0}
    .theme-btn{top:22px;right:22px;width:38px;height:38px;background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.35);color:#fff}
    html[data-theme="dark"] .theme-btn{background:rgba(0,0,0,.25)}
  }
  @media (max-width:360px){
    :root{--logo-h:34px;--badge-h:44px}
    .tabs{gap:6px}
    .tabs .indicator{width:calc((100% - 12px)/3)}
    .row{font-size:11.5px}
  }
  /* Layar sangat pendek (HP landscape) */
  @media (max-height:520px) and (min-width:901px){
    .side .bottom{display:none}
    .side{justify-content:center}
  }
  @media (prefers-reduced-motion:reduce){
    *,*:before,*:after{animation:none!important;transition:none!important}
  }
  #btnLogin{margin-top:var(--row-mb)}

  /* Captcha */
  .cap-row{display:flex;gap:8px;align-items:center}
  .cap-row input{flex:1;min-width:0;text-transform:uppercase;letter-spacing:.18em;font-weight:600}
  /* ukuran gambar ditulis eksplisit (rasio 128:40): Safari iOS lama bisa membuat lebar 0 untuk gambar width:auto di dalam flex */
  .cap-img{height:var(--h-ctl);width:calc(var(--h-ctl) * 3.2);min-width:96px;flex:none;border:1.5px solid var(--border);border-radius:8px;background:#eef3ff;display:block;user-select:none}
  .cap-ref{width:var(--h-ctl);height:var(--h-ctl);flex:none;border:1.5px solid var(--border);background:var(--input-bg);color:var(--ph);border-radius:8px;font-size:20px;cursor:pointer;transition:color .2s,border-color .2s,transform .3s}
  .cap-ref:hover{color:var(--primary);border-color:var(--primary);transform:rotate(90deg)}
  /* HP: gambar kode + tombol muat ulang di baris atas, kotak isian selebar form di bawahnya (gambar jangan disembunyikan) */
  @media (max-width:420px){
    .cap-row{flex-wrap:wrap}
    .cap-img{order:1;flex:none;width:144px;height:45px;min-width:0;max-width:calc(100% - var(--h-ctl) - 8px);display:block!important;visibility:visible!important}
    .cap-ref{order:2}
    .cap-row input{order:3;flex:1 1 100%;letter-spacing:.1em}
  }