/* =========================================================
   APM LOGIN SKIN v2 — PT Anugerah Panji Mandiri
   Colorful, playful, cartoonable, animated. Tema perbarangan.
   ========================================================= */
:root{
  --apm-blue:#1f3a93; --apm-blue2:#2f55c4; --apm-blue3:#5b82f0;
  --apm-red:#e23b3b;  --apm-red2:#ff6b5e; --apm-amber:#ffb627;
  --apm-ink:#222a44;  --apm-muted:#8089a3; --apm-line:#e6e9f5;
}
*{ box-sizing:border-box; }

#header,#content,#footer{ all:unset; }

body{
  font-family:"Plus Jakarta Sans","Segoe UI",sans-serif !important;
  margin:0 !important; min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:24px; overflow-x:hidden; position:relative; text-align:left !important;
  background:
    radial-gradient(900px 600px at 12% 8%, rgba(124,158,255,.40), transparent 55%),
    radial-gradient(820px 620px at 88% 16%, rgba(255,154,120,.32), transparent 58%),
    radial-gradient(760px 600px at 78% 92%, rgba(255,196,90,.30), transparent 60%),
    radial-gradient(700px 600px at 22% 96%, rgba(120,196,168,.26), transparent 60%),
    linear-gradient(160deg,#eaf0ff 0%,#fdf6ff 46%,#fff3ea 78%,#fef0f0 100%);
  background-attachment:fixed;
}

/* pola titik animasi geser halus */
body::before{
  content:""; position:fixed; inset:-40px; z-index:0; pointer-events:none;
  background-image:radial-gradient(rgba(31,58,147,.13) 1.5px, transparent 1.5px);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(circle at 50% 45%, #000 30%, transparent 78%);
          mask-image:radial-gradient(circle at 50% 45%, #000 30%, transparent 78%);
  animation:drift 40s linear infinite;
}
@keyframes drift{ from{ transform:translate(0,0);} to{ transform:translate(28px,28px);} }

/* blob warna gerak */
.apm-blob{ position:fixed; border-radius:42% 58% 60% 40%/45% 45% 55% 55%; filter:blur(50px); opacity:.5; z-index:0; pointer-events:none; animation:morph 18s ease-in-out infinite; }
.apm-blob.b1{ width:380px; height:380px; top:-110px; left:-90px; background:var(--apm-blue3); }
.apm-blob.b2{ width:340px; height:340px; bottom:-110px; right:-80px; background:var(--apm-red2); animation-delay:-6s; }
.apm-blob.b3{ width:240px; height:240px; top:58%; left:5%; background:var(--apm-amber); opacity:.3; animation-delay:-11s; }
@keyframes morph{
  0%,100%{ transform:translate(0,0) rotate(0deg) scale(1); border-radius:42% 58% 60% 40%/45% 45% 55% 55%; }
  50%{ transform:translate(30px,-26px) rotate(180deg) scale(1.08); border-radius:60% 40% 45% 55%/55% 60% 40% 45%; }
}

/* ikon perbarangan kartun melayang */
.apm-float{ position:fixed; z-index:0; pointer-events:none; animation:bob 7s ease-in-out infinite; }
.apm-float svg{ width:100%; height:100%; }
.apm-float.f1{ width:60px; height:60px; top:16%; left:13%; color:var(--apm-blue); opacity:.35; animation-delay:-1s; }
.apm-float.f2{ width:48px; height:48px; top:74%; left:82%; color:var(--apm-red); opacity:.32; animation-delay:-3s; }
.apm-float.f3{ width:42px; height:42px; top:24%; left:84%; color:var(--apm-blue2); opacity:.3; animation-delay:-5s; }
.apm-float.f4{ width:40px; height:40px; top:82%; left:18%; color:var(--apm-amber); opacity:.4; animation-delay:-2.4s; }
@keyframes bob{ 0%,100%{ transform:translateY(0) rotate(-7deg);} 50%{ transform:translateY(-20px) rotate(7deg);} }

/* ===== KARTU ===== */
#header{ display:block; position:relative; z-index:2; width:100%; max-width:940px; }
.apm-login-wrap{
  display:grid; grid-template-columns:1.05fr 1fr;
  background:rgba(255,255,255,.9); backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.95); border-radius:30px; overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(31,58,147,.45);
  animation:cardIn .8s cubic-bezier(.16,1.1,.3,1) both;
}
@keyframes cardIn{ from{opacity:0; transform:translateY(34px) rotate(-1.2deg) scale(.95);} to{opacity:1; transform:translateY(0) rotate(0) scale(1);} }

/* panel kiri */
.apm-login-left{
  background:linear-gradient(155deg,var(--apm-blue) 0%,var(--apm-blue2) 55%,#3f6bd8 100%);
  color:#fff; padding:44px 38px; position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
}
.apm-login-left::after{ content:""; position:absolute; right:-70px; top:-70px; width:230px; height:230px; border-radius:50%; background:rgba(255,255,255,.09); }
.apm-login-left::before{ content:""; position:absolute; left:-50px; bottom:-50px; width:180px; height:180px; border-radius:50%; background:rgba(255,107,94,.32); }

/* maskot box paket */
.apm-mascot{ width:130px; height:130px; margin-bottom:8px; position:relative; z-index:1; animation:mascotIn .9s .3s cubic-bezier(.18,1.5,.4,1) both; }
.apm-mascot svg{ width:100%; height:100%; overflow:visible; }
.apm-mascot .arm{ transform-origin:center; animation:wave 2.4s ease-in-out infinite; transform-box:fill-box; transform-origin:left center; }
@keyframes wave{ 0%,100%{ transform:rotate(0deg);} 25%{ transform:rotate(-18deg);} 60%{ transform:rotate(8deg);} }
@keyframes mascotIn{ from{ opacity:0; transform:translateY(20px) scale(.6);} to{ opacity:1; transform:translateY(0) scale(1);} }

.apm-logo-mini{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:14px;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.25);
  padding:6px 12px 6px 6px; border-radius:999px; position:relative; z-index:1; width:max-content;
}
.apm-logo-mini .lm-badge{ width:30px; height:30px; border-radius:9px; background:#fff; display:flex; align-items:center; justify-content:center; overflow:hidden; font-weight:800; color:var(--apm-blue); font-size:.7rem; }
.apm-logo-mini .lm-badge img{ max-width:100%; max-height:100%; object-fit:contain; }
.apm-logo-mini span{ font-size:.74rem; font-weight:600; color:#fff; }

.apm-login-left h2{ margin:0 0 8px; font-size:1.6rem; font-weight:800; color:#fff !important; border:none !important; position:relative; z-index:1; line-height:1.25; }
.apm-login-left p.sub{ margin:0; font-size:.9rem; color:#dbe4ff; position:relative; z-index:1; }
.apm-info-box{
  margin-top:22px; padding:14px 16px; border-radius:16px;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.26);
  font-size:.82rem; line-height:1.55; position:relative; z-index:1;
  display:flex; gap:10px; align-items:flex-start;
}
.apm-info-box .ib-ic{ flex:0 0 22px; width:22px; height:22px; color:var(--apm-amber); }
.apm-info-box b{ color:#fff; }

/* panel kanan */
.apm-login-right{ padding:46px 40px; display:flex; flex-direction:column; justify-content:center; background:#fff; }
.apm-form-title{ font-size:1.5rem; font-weight:800; color:var(--apm-ink); margin:0 0 4px; }
.apm-form-sub{ font-size:.86rem; color:var(--apm-muted); margin:0 0 26px; }

.apm-field{ position:relative; margin-bottom:18px; transition:transform .3s cubic-bezier(.18,1.2,.4,1); }

/* zoom in pas field aktif (ada input di-focus di dalamnya) */
.apm-field:focus-within{ transform:scale(1.04) translateY(-2px); z-index:5; }

.apm-field input{
  width:100%; padding:15px 14px 15px 46px; font-size:.95rem; color:var(--apm-ink);
  background:#f7f9ff; border:2px solid var(--apm-line); border-radius:15px; outline:none;
  transition:border-color .25s, box-shadow .25s, background .25s;
}
.apm-field input:focus{
  border-color:var(--apm-blue2); background:#fff;
  box-shadow:0 0 0 4px rgba(47,85,196,.16), 0 12px 26px -12px rgba(47,85,196,.5);
  animation:apmZoomPulse .5s ease;
}

/* pulse halus pas pertama diklik */
@keyframes apmZoomPulse{
  0%{ transform:scale(1); }
  50%{ transform:scale(1.015); }
  100%{ transform:scale(1); }
}
.apm-field .apm-ic{ position:absolute; left:15px; top:50%; transform:translateY(-50%); width:19px; height:19px; color:#aab2cf; transition:color .2s, transform .2s; }
.apm-field input:focus ~ .apm-ic{ color:var(--apm-blue2); transform:translateY(-50%) scale(1.12); }
.apm-toggle-pass{ position:absolute; right:12px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:var(--apm-blue2); font-size:.75rem; font-weight:700; padding:4px 8px; border-radius:8px; }
.apm-toggle-pass:hover{ background:#eef2fd; }

/* tombol dengan ripple */
.apm-btn-login{
  position:relative; overflow:hidden;
  width:100%; padding:15px; font-size:1rem; font-weight:800; color:#fff;
  border:none; border-radius:15px; cursor:pointer; margin-top:6px;
  background:linear-gradient(120deg,var(--apm-blue) 0%,var(--apm-blue2) 50%,var(--apm-red) 160%);
  background-size:180% 180%;
  box-shadow:0 16px 30px -10px rgba(31,58,147,.6);
  transition:transform .15s, box-shadow .2s, background-position .5s;
}
.apm-btn-login:hover{ transform:translateY(-3px); background-position:100% 0; box-shadow:0 22px 38px -10px rgba(226,59,59,.5); }
.apm-btn-login:active{ transform:translateY(-1px) scale(.99); }
.apm-btn-login .ripple{ position:absolute; border-radius:50%; transform:scale(0); background:rgba(255,255,255,.5); animation:rip .6s linear; pointer-events:none; }
@keyframes rip{ to{ transform:scale(4); opacity:0; } }

.apm-version{ text-align:center; font-size:.72rem; color:var(--apm-muted); margin-top:20px; }

/* ===== RESPONSIVE ===== */
@media (max-width:780px){
  .apm-login-wrap{ grid-template-columns:1fr; max-width:430px; }
  .apm-login-left{ padding:34px 30px; text-align:center; align-items:center; }
  .apm-logo-mini{ margin-left:auto; margin-right:auto; }
  .apm-login-right{ padding:34px 30px; }
  .apm-blob{ filter:blur(40px); }
  .apm-float{ display:none; }
}
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }

/* ===== aurora pita cahaya isekai (gerak halus di belakang kartu) ===== */
body::after{
  content:""; position:fixed; inset:-20% -10% auto -10%; height:60%; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 80% at 20% 30%, rgba(124,158,255,.28), transparent 60%),
    radial-gradient(50% 70% at 70% 20%, rgba(255,154,120,.22), transparent 60%);
  filter:blur(30px); opacity:.9;
  animation:apmAurora 16s ease-in-out infinite alternate;
}
@keyframes apmAurora{
  0%{ transform:translateX(-4%) translateY(0) rotate(-2deg); }
  100%{ transform:translateX(5%) translateY(14px) rotate(2deg); }
}
@media (max-width:780px){ body::after{ height:42%; } }