/* ---------- Tombol tambahan ---------- */
.btn.lg{padding:12px 20px;font-size:15px;border-radius:11px}
.btn.block{width:100%}
.btn svg{transition:transform .2s}
.btn:hover svg{transform:translateX(2px)}
.hbtn-cta{background:var(--gold);border-color:var(--gold);color:var(--navy-d)!important;text-decoration:none;font-weight:800}
.hbtn-cta:hover{background:#ecc25e}

/* ---------- Beranda: hero ---------- */
.lp-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:40px;align-items:center;min-height:min(560px,calc(100vh - 220px));padding:8px 0 28px}
.lp-kicker{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:5px 12px}
.lp-kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold)}
.lp-copy h1{font-size:clamp(2.6rem,6vw,4.4rem);line-height:1;letter-spacing:-.04em;margin:18px 0 10px;
  background:linear-gradient(120deg,var(--navy) 0 55%,#2d5fa3 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
:root[data-theme="dark"] .lp-copy h1{background:linear-gradient(120deg,#e6ecf5 0 50%,#8fb3ec 100%);-webkit-background-clip:text;background-clip:text}
.lp-lead{font-size:clamp(1.15rem,2vw,1.4rem);font-weight:700;color:var(--ink);margin:0}
.lp-sub{color:var(--muted);font-size:1.02rem;max-width:44ch;margin-top:12px}
.lp-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}

.lp-visual{position:relative;min-height:420px}
.lp-card{position:absolute;left:0;top:50%;width:64%;transform:translateY(-58%) rotate(-4deg);filter:drop-shadow(0 22px 30px rgba(21,33,58,.22))}
.lp-card .kts{cursor:default}

/* ilustrasi Face Recognition */
.fr-card{position:absolute;right:0;top:50%;width:38%;min-width:200px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:12px;box-shadow:0 26px 50px -18px rgba(15,27,51,.45);transform:translateY(-46%) rotate(3deg)}
.fr-top{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:800;color:var(--ink);margin-bottom:10px}
.fr-top svg{width:17px;height:17px;color:var(--link)}
.fr-live{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--ok)}
.fr-live i{width:7px;height:7px;border-radius:50%;background:var(--ok);animation:pulse 2s infinite}
.fr-frame{position:relative;aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:#0d1627}
.fr-face svg{width:100%;height:100%;display:block}
.fr-c{position:absolute;width:22%;height:18%;border:3px solid #2fbf7a}
.fr-c.tl{top:16%;left:18%;border-right:0;border-bottom:0;border-top-left-radius:8px}
.fr-c.tr{top:16%;right:18%;border-left:0;border-bottom:0;border-top-right-radius:8px}
.fr-c.bl{bottom:16%;left:18%;border-right:0;border-top:0;border-bottom-left-radius:8px}
.fr-c.br{bottom:16%;right:18%;border-left:0;border-top:0;border-bottom-right-radius:8px}
.fr-scan{position:absolute;left:18%;right:18%;height:2px;top:20%;background:linear-gradient(90deg,transparent,#2fbf7a,transparent);box-shadow:0 0 12px #2fbf7a;animation:frscan 2.4s ease-in-out infinite alternate}
@keyframes frscan{to{top:80%}}
.fr-ok{display:flex;gap:8px;align-items:center;margin-top:10px;background:var(--ok-bg);border-radius:10px;padding:7px 9px}
.fr-ok svg{width:18px;height:18px;color:var(--ok);flex:none}
.fr-ok b{display:block;font-size:12.5px;line-height:1.2;color:var(--ink)}
.fr-ok small{font-size:11px;color:var(--muted)}

/* ---------- Beranda: section ---------- */
.lp-sec{padding:44px 0 8px}
.lp-head{margin-bottom:20px}
.lp-eyebrow{display:block;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#b07d10;margin-bottom:6px}
:root[data-theme="dark"] .lp-eyebrow{color:var(--gold)}
.lp-head h2{font-size:clamp(1.4rem,2.6vw,1.9rem);letter-spacing:-.02em;line-height:1.2}
.lp-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.lp-steps li{display:flex;flex-direction:column;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;font-weight:700;line-height:1.35;box-shadow:var(--shadow)}
.lp-no{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:#fff;font-weight:800;font-size:14px}
:root[data-theme="dark"] .lp-no{background:var(--primary)}
.lp-feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.lp-feat{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:var(--shadow)}
.lp-feat h3{font-size:1rem;margin:12px 0 4px}
.lp-feat p{color:var(--muted);font-size:14px}
.lp-ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--line);color:var(--link)}
.lp-ic svg{width:21px;height:21px}
.lp-roles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.lp-role{display:flex;flex-direction:column;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;text-decoration:none;color:var(--ink)!important;box-shadow:var(--shadow);transition:border-color .15s,transform .15s}
.lp-role:hover{border-color:var(--primary);transform:translateY(-2px)}
.lp-role b{font-size:1.05rem;margin-top:6px}
.lp-role span:not(.lp-ic){color:var(--muted);font-size:14px;flex:1}
.lp-role em{font-style:normal;font-size:13px;font-weight:700;color:var(--link);display:inline-flex;align-items:center;gap:6px;margin-top:8px}
.lp-role em svg{width:14px;height:14px}
.lp-band{margin-top:48px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;background:var(--navy) var(--kawung);color:#fff;border-radius:18px;padding:28px 30px;box-shadow:0 20px 40px -22px rgba(15,27,51,.6)}
.lp-band h2{font-size:1.45rem;letter-spacing:-.01em}
.lp-band p{opacity:.8;margin-top:4px}
.lp-band .btn{background:var(--gold);border-color:var(--gold);color:var(--navy-d);font-weight:800}

/* ---------- Halaman Masuk ---------- */
.auth{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);background:var(--surface);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--pop-shadow);max-width:980px;margin:0 auto}
.auth-side{background:var(--navy) var(--kawung);color:#fff;padding:30px;display:flex;flex-direction:column;gap:18px}
.auth-back{color:#fff!important;opacity:.75;text-decoration:none;font-size:13.5px;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.auth-back:hover{opacity:1}
.auth-back svg{width:15px;height:15px}
.auth-brand{display:flex;gap:12px;align-items:center;margin-top:auto}
.auth-brand svg{width:44px;height:52px;flex:none}
.auth-brand b{display:block;font-size:1.6rem;letter-spacing:-.02em;line-height:1.1}
.auth-brand span{font-size:13px;opacity:.75}
.auth-tag{font-size:1.15rem;font-weight:700;line-height:1.35}
.auth-points{list-style:none;margin:0 0 auto;padding:0;display:grid;gap:9px;font-size:14px}
.auth-points li{display:flex;gap:9px;align-items:center;opacity:.9}
.auth-points svg{width:18px;height:18px;color:var(--gold);flex:none}
.auth-main{padding:32px 34px}
.auth-main h1{font-size:1.6rem;margin-bottom:2px}
.auth-note{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:13.5px;margin-bottom:16px}
.role-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:18px 0 18px}
.role-tile{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;padding:12px 6px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font:inherit;cursor:pointer;transition:border-color .15s,background .15s}
.role-tile:hover{border-color:#b9c6d9}
.role-tile .rt-ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--surface-2);color:var(--muted);margin-bottom:4px}
.role-tile .rt-ic svg{width:20px;height:20px}
.role-tile b{font-size:14px}
.role-tile small{font-size:11.5px;color:var(--muted);line-height:1.25}
.role-tile.on{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 7%,var(--surface));box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 16%,transparent)}
.role-tile.on .rt-ic{background:var(--primary);color:#fff}
.rt-saved{position:absolute;top:6px;right:6px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--ok-bg);color:var(--ok)}
.rt-saved svg{width:12px;height:12px}
.auth-form{display:grid;gap:14px}
.auth-form .saved-note{margin-top:0}
.auth-form .form-err:empty{display:none}
.auth-foot{margin-top:18px;font-size:13.5px;color:var(--muted)}

@media (max-width:880px){
  .lp-hero{grid-template-columns:1fr;gap:26px;min-height:0}
  .lp-visual{min-height:0;height:min(64vw,400px);max-width:620px;width:100%;margin:0 auto}
  .lp-steps{grid-template-columns:1fr 1fr}
  .lp-feats{grid-template-columns:1fr 1fr}
  .lp-roles{grid-template-columns:1fr 1fr}
  .auth{grid-template-columns:1fr}
  .auth-side{padding:22px 22px 20px;gap:12px}
  .auth-brand{margin-top:0}
  .auth-points{display:none}
}
@media (max-width:640px){
  .lp-copy h1{margin-top:14px}
  .lp-cta .btn{flex:1}
  .lp-visual{height:auto;display:flex;flex-direction:column;padding-bottom:8px}
  .lp-card{position:relative;top:auto;width:90%;transform:rotate(-3deg)}
  .fr-card{position:relative;top:auto;right:auto;align-self:flex-end;width:48%;min-width:0;margin-top:-12%;transform:rotate(3deg)}
  .lp-steps,.lp-feats,.lp-roles{grid-template-columns:1fr}
  .lp-steps li{flex-direction:row;align-items:center;padding:14px}
  .lp-no{flex:none}
  .lp-band{padding:22px}
  .lp-band .btn{width:100%}
  .auth{border-radius:16px}
  .auth-main{padding:22px 18px}
  .role-tiles{grid-template-columns:1fr 1fr}
  .auth-tag{font-size:1rem}
}