/* ================================================
   login.css — PKKMB Universitas Gunadarma
   ================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --pu-900:#1a003d;--pu-800:#2d0060;--pu-700:#4a0090;--pu-600:#6a00c8;
  --pu-500:#8b00ff;--pu-accent:#c77dff;
  --blue-700:#0B3D7A;--blue-600:#185FA5;--blue-50:#EFF5FC;--blue-100:#B5D4F4;
  --gray-50:#F8F9FA;--gray-100:#F1F3F5;--gray-200:#E9ECEF;--gray-300:#DEE2E6;
  --gray-400:#CED4DA;--gray-500:#ADB5BD;--gray-600:#6C757D;--gray-700:#495057;
  --gray-800:#343A40;--gray-900:#212529;
  --green-50:#EAF3DE;--green-100:#C0DD97;--green-700:#15803D;--green-800:#27500A;
  --amber-50:#FFFBF0;--amber-100:#FEF3C7;--amber-700:#B45309;--amber-800:#92400E;
  --red-50:#FFF5F5;--red-100:#FEE2E2;--red-700:#B91C1C;--red-800:#991B1B;
  --white:#fff;
  --font:'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif;
  --r-sm:6px;--r-md:10px;--r-lg:16px;--r-xl:24px;
  --shadow-card:0 32px 80px rgba(0,0,0,.45),0 8px 24px rgba(0,0,0,.25);
  --shadow-modal:0 24px 64px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.2);
  --t:.18s ease;
}
html,body{height:100%;font-family:var(--font);-webkit-font-smoothing:antialiased;line-height:1.6;}

/* ─── Page wrapper ──────────────────────────── */
.page-wrapper{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:2rem 5%;
  background:url('../assets/latarlogin.png') center/cover no-repeat;
  position:relative;
}
.page-wrapper::before{
  content:'';position:absolute;inset:0;
  background:rgba(6,0,22,.42);
  pointer-events:none;
}

/* ─── Login card ────────────────────────────── */
.login-card{
  display:grid;grid-template-columns:1.15fr 1fr;
  width:100%;max-width:1020px;
  position:relative;z-index:1;
  align-items:stretch;gap:3.5rem;
}

/* ─── Left panel ────────────────────────────── */
.panel-left{
  padding:2.5rem 0;display:flex;flex-direction:column;
  position:relative;color:#fff;
  justify-content:space-between;
}
.pl-brand{display:flex;align-items:center;gap:12px;margin-bottom:1.75rem;}
.pl-logo{width:48px;height:48px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,.25);}
.pl-logo svg{width:26px;height:26px;}
.pl-logo--img{background:transparent;box-shadow:none;}
.pl-logo--img img{width:48px;height:48px;object-fit:contain;display:block;}
.pl-brand-name{font-size:14px;font-weight:700;color:#fff;}
.pl-brand-sub{font-size:11.5px;color:rgba(255,255,255,.6);}
/* Glass box: Brand → PKKMB Program */
.pl-glass{
  flex:1;display:flex;flex-direction:column;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.15);
  border-radius:16px;
  padding:1.25rem 1.5rem;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  margin-bottom:1rem;
  overflow:visible;
}
.pl-brand{margin-bottom:.75rem;}
.pl-intro{margin-bottom:1rem;}
.pl-label{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:5px;}
.pl-title{font-size:2.6rem;font-weight:900;color:#fff;line-height:1.1;letter-spacing:-.02em;}
.pl-desc{font-size:13.5px;color:rgba(255,255,255,.65);margin-top:10px;line-height:1.75;max-width:360px;}

/* ─── Image Wheel ───────────────────────────── */
.iw-stage{
  position:relative;width:100%;
  flex:1;min-height:220px;
  margin:1.5rem 0;overflow:visible;
  display:flex;align-items:center;justify-content:center;
}
.iw-card{
  position:absolute;
  width:130px;height:175px;
  top:50%;left:50%;
  margin-top:-87px;margin-left:-65px;
  border-radius:16px;overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.65),0 4px 14px rgba(0,0,0,.45);
  border:2px solid rgba(255,255,255,.18);
  background:#1a003d;
  will-change:transform,opacity;
  backface-visibility:hidden;
}
.iw-card img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;}

.pl-stats{display:flex;gap:0;margin-bottom:1rem;}
.pl-stat{padding:9px 18px 9px 0;margin-right:18px;border-right:1px solid rgba(255,255,255,.15);}
.pl-stat:last-child{border-right:none;}
.pl-stat-val{display:block;font-size:15px;font-weight:800;color:#fff;}
.pl-stat-lbl{display:block;font-size:9.5px;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.08em;margin-top:2px;}
.pl-info-box{display:flex;align-items:flex-start;gap:9px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-md);padding:10px 13px;backdrop-filter:blur(6px);}
.pl-info-box svg{width:18px;height:18px;flex-shrink:0;margin-top:1px;}
.pl-info-box p{font-size:12px;color:rgba(255,255,255,.75);line-height:1.55;}

/* ─── Glow particles ────────────────────────── */
.glow-orb{position:fixed;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:0;opacity:.55;}
.glow-orb-1{width:420px;height:420px;background:radial-gradient(circle,#7b2d8b,transparent 70%);top:-100px;left:-80px;animation:orb-move-a 12s ease-in-out infinite;}
.glow-orb-2{width:350px;height:350px;background:radial-gradient(circle,#3d007a,transparent 70%);bottom:-80px;right:5%;animation:orb-move-b 15s ease-in-out infinite;}
.glow-orb-3{width:260px;height:260px;background:radial-gradient(circle,#c77dff,transparent 70%);top:40%;right:42%;animation:orb-move-c 10s ease-in-out infinite;opacity:.3;}
@keyframes orb-move-a{0%,100%{transform:translate(0,0);}50%{transform:translate(60px,40px);}}
@keyframes orb-move-b{0%,100%{transform:translate(0,0);}50%{transform:translate(-50px,-35px);}}
@keyframes orb-move-c{0%,100%{transform:translate(0,0);}50%{transform:translate(30px,-25px);}}

.glow-dot{position:fixed;border-radius:50%;pointer-events:none;z-index:0;}
.glow-dot-1{width:6px;height:6px;background:#c77dff;top:18%;left:22%;animation:dot-pulse 4s ease-in-out infinite;}
.glow-dot-2{width:4px;height:4px;background:#fff;top:65%;left:8%;animation:dot-pulse 5s ease-in-out infinite;animation-delay:1s;}
.glow-dot-3{width:5px;height:5px;background:#a78bfa;top:30%;right:8%;animation:dot-pulse 3.5s ease-in-out infinite;animation-delay:.5s;}
.glow-dot-4{width:3px;height:3px;background:#fff;bottom:25%;right:20%;animation:dot-pulse 6s ease-in-out infinite;animation-delay:2s;}
@keyframes dot-pulse{0%,100%{opacity:.2;transform:scale(1);}50%{opacity:1;transform:scale(1.8);}}

/* ─── Right panel (white card) ──────────────── */
.panel-right{
  background:#fff;border-radius:var(--r-xl);
  padding:2rem 2.25rem;
  box-shadow:var(--shadow-card);
  display:flex;flex-direction:column;justify-content:center;
  color:var(--gray-800);
  align-self:center;
}
.pr-header{display:flex;align-items:center;gap:14px;margin-bottom:1.25rem;padding-bottom:1.25rem;border-bottom:1px solid var(--gray-100);}
.pr-pkkmb-logo{width:52px;height:52px;object-fit:contain;flex-shrink:0;}
.pr-header h2{font-size:21px;font-weight:800;color:var(--gray-900);line-height:1.2;}
.pr-header p{font-size:13.5px;color:var(--gray-500);margin-top:4px;}

/* ─── Alerts ────────────────────────────────── */
.alert{display:none;align-items:flex-start;gap:9px;padding:10px 13px;border-radius:var(--r-md);font-size:13px;font-weight:500;margin-bottom:1rem;line-height:1.5;}
.alert.visible{display:flex;}
.alert svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;margin-top:2px;}
.alert-error  {background:var(--red-50);  border:1px solid #FCA5A5;color:var(--red-800);}
.alert-info   {background:var(--blue-50); border:1px solid var(--blue-100);color:#0C447C;}
.alert-success{background:var(--green-50);border:1px solid var(--green-100);color:var(--green-800);}

/* ─── Help box ──────────────────────────────── */
.help-box{display:flex;align-items:flex-start;gap:9px;background:var(--blue-50);border:1px solid var(--blue-100);border-radius:var(--r-md);padding:10px 13px;}
.help-box svg{width:15px;height:15px;fill:none;stroke:var(--blue-600);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;margin-top:2px;}
.help-box p{font-size:12.5px;color:#0C447C;line-height:1.55;}
.pr-footer{text-align:center;margin-top:1.25rem;font-size:11px;color:var(--gray-400);line-height:1.6;}

/* ─── Manual form ───────────────────────────── */
.manual-form{margin-bottom:1.25rem;}
.field-group{margin-bottom:1rem;}
.field-label{display:block;font-size:13.5px;font-weight:700;color:var(--gray-700);margin-bottom:6px;}
.field-wrap{position:relative;display:flex;align-items:center;}
.field-icon{position:absolute;left:12px;width:16px;height:16px;fill:none;stroke:var(--gray-400);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;}
.field-input{width:100%;padding:11px 40px 11px 38px;font-size:14px;font-family:var(--font);color:var(--gray-800);background:#f8f9fb;border:1.5px solid var(--gray-200);border-radius:var(--r-md);outline:none;transition:border-color .15s,box-shadow .15s,background .15s;}
.field-input::placeholder{color:var(--gray-400);}
.field-input:focus{border-color:#7B2D8B;box-shadow:0 0 0 3px rgba(123,45,139,.1);background:#fff;}
.field-hint{font-size:12px;color:var(--gray-500);margin-top:5px;}
.field-toggle{position:absolute;right:10px;background:none;border:none;cursor:pointer;padding:4px;color:var(--gray-400);display:flex;align-items:center;}
.field-toggle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.form-row-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;}
.meta-check{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--gray-600);cursor:pointer;}
.meta-check input[type=checkbox]{width:15px;height:15px;accent-color:#7B2D8B;cursor:pointer;}
.lupa-pass{font-size:13px;font-weight:700;color:#7B2D8B;text-decoration:none;}
.lupa-pass:hover{text-decoration:underline;}
.btn-manual-login{width:100%;padding:13px;font-size:15px;font-weight:700;font-family:var(--font);color:#fff;background:linear-gradient(135deg,#9b3dba 0%,#7B2D8B 60%,#5a1f6b 100%);border:none;border-radius:var(--r-md);cursor:pointer;transition:opacity .2s,box-shadow .2s,transform .15s;box-shadow:0 4px 18px rgba(123,45,139,.4);}
.btn-manual-login:hover{opacity:.92;box-shadow:0 6px 24px rgba(123,45,139,.55);transform:translateY(-1px);}

/* ─── Captcha ────────────────────────────────── */
.captcha-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.captcha-nums{display:flex;align-items:center;gap:8px;background:#f8f9fb;border:1.5px solid var(--gray-200);border-radius:var(--r-md);padding:9px 16px;flex-shrink:0;}
.cap-num{min-width:28px;height:28px;background:#7B2D8B;color:#fff;border-radius:6px;font-size:1rem;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 6px;}
.cap-op{font-size:1.1rem;font-weight:700;color:#475569;}
.cap-q{font-size:1.1rem;font-weight:800;color:#7B2D8B;}
.cap-input{width:100px!important;text-align:center;font-size:1rem!important;font-weight:700;padding-left:12px!important;padding-right:12px!important;}
.cap-input.cap-err{border-color:#ef4444!important;background:#fff0f0;}
@keyframes cap-shake{0%,100%{transform:translateX(0);}20%,60%{transform:translateX(-6px);}40%,80%{transform:translateX(6px);}}
.cap-shake{animation:cap-shake .4s ease;}

/* ─── Modal ──────────────────────────────────── */
.modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:999;align-items:center;justify-content:center;padding:1rem;backdrop-filter:blur(3px);}
.modal-bg.visible{display:flex;}
.modal-box{background:#fff;border-radius:var(--r-xl);width:100%;max-width:560px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow-modal);}
.modal-header{padding:1.25rem 1.5rem;border-bottom:1px solid var(--gray-100);display:flex;align-items:flex-start;gap:14px;flex-shrink:0;}
.modal-header-icon{width:44px;height:44px;border-radius:var(--r-md);background:var(--blue-50);border:1px solid var(--blue-100);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.modal-header-icon svg{width:22px;height:22px;fill:none;stroke:var(--blue-700);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.modal-header h3{font-size:16px;font-weight:800;color:var(--gray-900);line-height:1.2;}
.modal-header p{font-size:12.5px;color:var(--gray-500);margin-top:4px;}
.modal-body{flex:1;overflow-y:auto;padding:1.25rem 1.5rem;}
.modal-body::-webkit-scrollbar{width:5px;}
.modal-body::-webkit-scrollbar-track{background:var(--gray-100);}
.modal-body::-webkit-scrollbar-thumb{background:var(--gray-300);border-radius:10px;}
.modal-section-title{font-size:11px;font-weight:800;color:var(--blue-700);text-transform:uppercase;letter-spacing:.07em;padding:10px 0 6px;margin-top:4px;border-bottom:1px solid var(--blue-50);}
.modal-section-title:first-child{margin-top:0;}
.modal-rule{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px solid var(--gray-100);}
.modal-rule:last-child{border-bottom:none;}
.mr-icon{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;}
.mr-icon svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.mr-blue{background:var(--blue-50);color:var(--blue-700);}
.mr-red{background:var(--red-50);color:var(--red-700);}
.mr-amber{background:var(--amber-100);color:var(--amber-700);}
.modal-rule p{font-size:13px;color:var(--gray-600);line-height:1.55;}
.modal-rule strong{color:var(--gray-900);}
.modal-footer{padding:1rem 1.5rem 1.25rem;border-top:1px solid var(--gray-100);flex-shrink:0;}
.modal-check-row{display:flex;align-items:flex-start;gap:12px;cursor:pointer;padding:12px 14px;background:var(--gray-50);border:1.5px solid var(--gray-200);border-radius:var(--r-md);margin-bottom:12px;transition:border-color .15s,background .15s;user-select:none;}
.modal-check-row:hover{background:var(--blue-50);border-color:var(--blue-100);}
.modal-check-box{position:relative;width:20px;height:20px;flex-shrink:0;margin-top:1px;}
.modal-check-box input[type=checkbox]{position:absolute;opacity:0;width:100%;height:100%;cursor:pointer;margin:0;}
.modal-check-custom{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:5px;border:2px solid var(--gray-300);background:#fff;transition:all .15s;pointer-events:none;}
.modal-check-custom svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .12s;}
.modal-check-box input:checked~.modal-check-custom{background:#7B2D8B;border-color:#7B2D8B;}
.modal-check-box input:checked~.modal-check-custom svg{opacity:1;}
.modal-check-row span:last-child{font-size:13px;font-weight:500;color:var(--gray-700);line-height:1.55;}
.modal-footer-btns{display:flex;justify-content:stretch;}
.modal-btn-confirm{width:100%;padding:13px 20px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:14.5px;font-weight:800;font-family:var(--font);color:#fff;background:var(--gray-300);border:none;border-radius:var(--r-md);cursor:not-allowed;transition:background .2s,transform .15s;}
.modal-btn-confirm.active{background:#7B2D8B;cursor:pointer;}
.modal-btn-confirm.active:hover{background:#6a2578;transform:translateY(-1px);}
.modal-btn-confirm svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}

/* ─── Manual divider ─────────────────────────── */
.manual-divider{display:flex;align-items:center;gap:12px;margin:1rem 0;color:var(--gray-400);font-size:12px;}
.manual-divider::before,.manual-divider::after{content:'';flex:1;height:1px;background:var(--gray-200);}

/* ─── Responsive ─────────────────────────────── */
@media(max-width:860px){
  .login-card{grid-template-columns:1fr;max-width:460px;gap:0;min-height:unset;}
  .panel-left{padding:2rem 0 1rem;}
  .iw-stage{height:220px;}
  .iw-c3,.iw-c5{display:none;}
}
@media(max-width:520px){
  .page-wrapper{padding:1rem;}
  .panel-left{display:none;}
  .panel-right{border-radius:var(--r-lg);}
  .login-card{max-width:100%;}
  .modal-box{max-height:95vh;}
  .modal-bg{align-items:flex-end;padding:0;}
  .modal-box{border-radius:var(--r-lg) var(--r-lg) 0 0;max-height:92vh;margin-top:auto;}
}