@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{--ink:#173653;--muted:#728295;--blue:#0868c9;--line:#dce6ef;--pale:#f5f8fc;--white:#fff;--shadow:0 22px 65px rgba(25,55,86,.10)}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,Arial,sans-serif;color:var(--ink)}
body{background:var(--pale);font-size:15px}
.form-page{min-height:100vh}
.page-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:38px 22px}
.card{width:min(100%,720px);background:var(--white);border:1px solid #e1eaf2;border-radius:28px;padding:48px 42px;box-shadow:var(--shadow)}
h1{font-size:clamp(27px,4vw,38px);line-height:1.2;letter-spacing:-.04em;margin:0 0 22px;font-weight:750;color:#173653}
h2{font-size:27px;letter-spacing:-.035em;margin:0 0 10px;color:#173653}
.sub{font-size:16px;line-height:1.8;color:var(--muted);margin:0 0 30px}
label{display:block;font-size:16px;font-weight:700;color:#23445f;margin:24px 0 10px}
input,select,textarea{display:block;width:100%;min-height:58px;border:1px solid var(--line);border-radius:17px;background:#fbfdff;padding:0 20px;font:16px Inter,Arial,sans-serif;color:var(--ink);outline:none;transition:.18s}
textarea{padding:14px;min-height:150px}
input::placeholder{color:#9aaaba}
input:focus,select:focus,textarea:focus{border-color:#4b9cdb;box-shadow:0 0 0 4px rgba(44,139,210,.12)}
input[readonly]{background:#f7f9fc;color:#718398}
.hint{font-size:13px;line-height:1.7;color:#8191a2;margin:9px 0 0}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:58px;padding:0 22px;border:0;border-radius:17px;background:#eaf4fd;color:#1262a4;text-decoration:none;font:700 16px Inter,Arial,sans-serif;cursor:pointer;transition:.18s}
.btn:hover{filter:brightness(.98);transform:translateY(-1px)}
.btn.primary{background:var(--blue);color:#fff;box-shadow:0 8px 18px rgba(8,104,201,.14)}
.btn.light{background:#edf6fd;color:#1262a4;border:1px solid #d8eaf8}
.btn.danger{background:#b53b45;color:white}
.btn.full{width:100%;margin-top:26px}
.inline{display:flex;gap:16px;margin-top:14px}
.inline>*{flex:1}
.hidden{display:none!important}
.notice{padding:14px 16px;border-radius:13px;background:#fff5e6;color:#855d20;font-size:14px;line-height:1.6;margin-bottom:18px}
.notice.success{background:#eaf7ef;color:#267348}
.notice.error{background:#fff0f0;color:#a12e36}
.place-help{margin:24px 0;padding:21px;border:1px solid #e2ebf3;border-radius:18px;background:#f8fbfe;color:var(--ink);font-size:14px;line-height:1.75}
.place-help strong{display:block;font-size:16px;margin-bottom:10px}
.place-help ol{padding-left:21px;margin:8px 0 18px}
.place-help li{padding:3px 0;color:#61758a}
.place-guide{display:block;width:100%;height:auto;border:1px solid #dce7f0;border-radius:13px;margin:18px 0;background:#fff}
.place-help .btn{margin-top:6px}
.place-help .hint{margin-top:12px}
.success-mark{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#e9f7ef;color:#21834d;font-size:28px;margin-bottom:22px}
.center{text-align:center}
.small-link{display:inline-block;color:#1268b5;font-weight:650;text-decoration:none;margin-top:20px}
.review-cta{margin-top:26px}
.divider{height:1px;background:#e6edf3;margin:28px 0}
.password-wrap{position:relative}
.password-wrap input{padding-right:62px}
.eye-btn{position:absolute;right:10px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:#72879b;font-size:23px;cursor:pointer}
#reader{margin-top:16px;overflow:hidden;border-radius:14px}
#admin-area{margin-top:6px}
#admin-area h2{margin-top:0}

/* VIDEO PANDUAN PLACE ID */
.video-frame{width:100%;margin:18px 0 20px;padding:7px;border:1px solid #e0e8f0;border-radius:17px;background:#fff;box-shadow:0 12px 28px rgba(22,53,83,.16),0 3px 8px rgba(22,53,83,.08);overflow:hidden}
.place-guide-video{display:block;width:100%;height:auto;max-height:560px;object-fit:contain;border-radius:11px;background:#111;box-shadow:0 4px 13px rgba(0,0,0,.20)}
#heading{font-size:clamp(27px,4vw,38px);line-height:1.2;letter-spacing:-.04em;margin:0 0 18px;font-weight:750;color:#173653}
#desc{font-size:16px;line-height:1.8;color:var(--muted);margin:0 0 28px}

/* HALAMAN KARTU BELUM AKTIF */
.inactive-icon{width:82px;height:82px;margin:4px auto 25px;display:grid;place-items:center;border-radius:50%;background:#fff0f0;border:1px solid #ffe0e0}
.inactive-icon span{color:#e04444;font-size:53px;line-height:1;font-weight:500}
.inactive-title{text-align:center;margin-bottom:13px}
.inactive-description{text-align:center;margin-bottom:25px}
.inactive-info{padding:19px 21px;background:#f5f8fc;border:1px solid #e5edf5;border-radius:17px}
.inactive-info-label{color:#8493a3;font-size:11px;font-weight:700;letter-spacing:.08em;margin-bottom:9px}
.inactive-info-value{display:flex;align-items:center;gap:9px;color:#52677d;font-size:15px;font-weight:650}
.status-dot{width:9px;height:9px;border-radius:50%;background:#e04444;flex-shrink:0}
.inactive-footnote{margin:19px 8px 0;text-align:center;color:#8191a2;font-size:13px;line-height:1.7}
#inactive .btn{margin-top:24px}

/* INPUT PIN REAKTIVASI */
.reactivate-pin-wrapper{margin-top:20px}
.reactivate-pin-wrapper label{margin-top:0}
.reactivate-pin-wrapper input{margin-bottom:4px}

@media(max-width:600px){
  .page-wrap{padding:24px 16px}
  .card{padding:30px 22px;border-radius:24px}
  .sub{font-size:15px;margin-bottom:24px}
  label{font-size:15px;margin-top:21px}
  input,select{min-height:56px;font-size:15px}
  .inline{gap:10px}
  .btn{font-size:15px;min-height:56px}
  .place-help{padding:17px}
  .place-guide{border-radius:10px}
  .page-wrap{min-height:100svh;padding:max(18px,env(safe-area-inset-top)) 14px max(18px,env(safe-area-inset-bottom))}
  .card{width:100%;padding:26px 19px;border-radius:22px}
  #heading{font-size:28px}
  #desc{font-size:15px;line-height:1.7;margin-bottom:22px}
  .video-frame{padding:5px;border-radius:14px}
  .place-guide-video{width:100%;max-height:70svh;border-radius:9px}
  .inline{flex-direction:row}
  .inactive-icon{width:74px;height:74px;margin-bottom:22px}
  .inactive-icon span{font-size:48px}
  .inactive-info{padding:17px}
}
@media(max-width:360px){
  .card{padding:22px 15px}
  .inline{flex-direction:column}
  .inline>*{width:100%}
}

/* VALIDASI PLACE ID DAN LINK GOOGLE REVIEW */
.input-status-wrap {
  position: relative;
}

.input-status-wrap input {
  padding-right: 55px;
}

.input-status {
  position: absolute;
  right: 17px;
  top: 50%;
  transform: translateY(-50%);
  width: 25px;
  height: 25px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 800;
  pointer-events: none;
}

.input-status.valid {
  display: flex;
  color: #16834b;
  background: #e5f7ec;
}

.input-status.invalid {
  display: flex;
  color: #c43c3c;
  background: #fff0f0;
}