/* =====================================================
   ONBOARDING / JOIN MEMBERSHIP
   Ukuran ringkas mengikuti proporsi halaman login Noir:
   kolom 380px, tombol & input 48px.
   ===================================================== */
.onb-body{background:var(--cream)}
.onb{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:94px 20px 32px}
.onb-logo img{width:96px;height:auto;display:block}
.onb-box{width:100%;max-width:380px;margin-top:110px;animation:onbIn .35s ease}
.onb-box[hidden]{display:none}
@keyframes onbIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.onb-title{font-size:22px;font-weight:600;line-height:1.25;color:#000}
.onb-sub{font-size:14px;font-weight:400;color:#6b6b6b;margin-top:4px}
.onb-sub b{color:#000;font-weight:600}

.onb-btn{display:flex;align-items:center;justify-content:center;width:100%;height:48px;margin-top:20px;padding:0 14px;border:0;border-radius:8px;background:var(--orange);color:#fff;font:600 14px 'Poppins',sans-serif;text-align:center;cursor:pointer;transition:filter .15s, transform .1s}
.onb-btn:hover{filter:brightness(1.07)}
.onb-btn:active{transform:scale(.99)}

.onb-or{display:flex;align-items:center;gap:12px;margin:22px 0;color:#555;font-size:13px}
.onb-or::before,.onb-or::after{content:"";flex:1;height:1px;background:#c9c1b3}

.onb-input-wrap{position:relative}
.onb-input{width:100%;height:48px;border:1px solid #e2dbcf;border-radius:8px;background:#fff;padding:0 48px 0 12px;font:400 15px 'Poppins',sans-serif;color:#000;outline:none;transition:border-color .15s, box-shadow .15s}
.onb-input::placeholder{color:#7a7a7a}
.onb-input:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(239,97,0,.15)}
.onb-input.sm{height:46px;font-size:14px;padding:0 12px}
.onb-input-wrap .onb-input.sm{padding-right:72px}
.onb-arrow{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:36px;height:36px;border:0;border-radius:6px;background:none;color:#555;display:grid;place-items:center;cursor:pointer;transition:background .15s,color .15s}
.onb-arrow svg{width:20px;height:20px}
.onb-arrow:hover{background:var(--orange);color:#fff}
.onb-show{position:absolute;right:12px;top:50%;transform:translateY(-50%);border:0;background:none;font:600 12px 'Poppins',sans-serif;color:var(--orange);cursor:pointer}

.onb-check{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:14px;color:#333;cursor:pointer;user-select:none}
.onb-check input{position:absolute;opacity:0;pointer-events:none}
.onb-check .box{flex:none;width:18px;height:18px;border-radius:4px;border:1.5px solid #9a9a9a;background:#fff;display:grid;place-items:center;transition:.15s}
.onb-check input:checked + .box{background:var(--orange);border-color:var(--orange)}
.onb-check input:checked + .box::after{content:"";width:8px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.onb-check input:focus-visible + .box{box-shadow:0 0 0 3px rgba(239,97,0,.25)}

.onb-terms{margin:26px -40px 0;text-align:center;font-size:12px;color:#6b6b6b}
.onb-terms a{text-decoration:underline;color:#333}
.onb-terms a:hover,.onb-link:hover{color:var(--orange)}

.onb-back{border:0;background:none;font:500 13px 'Poppins',sans-serif;color:#6b6b6b;cursor:pointer;margin-bottom:10px;padding:0}
.onb-back:hover{color:var(--orange)}
.onb-form{display:grid;gap:10px;margin-top:20px}
.onb-form .onb-btn{margin-top:6px}
.onb-err{display:none;margin-top:8px;font-size:12.5px;color:#c62828}
.onb-err.show{display:block}
.onb-note{margin-top:14px;background:#fff;border-left:3px solid var(--orange);border-radius:6px;padding:10px 12px;font-size:12.5px;color:#333}

.onb-privacy{margin-top:auto;padding-top:48px;font-size:12.5px;font-weight:500;color:var(--orange)}
.onb-privacy:hover{text-decoration:underline}

/* ---------- Daftar: pilih gender ---------- */
.onb-sub.dark{color:#000;font-size:13px}
.gender{border:0;padding:0;margin:20px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.g-card{position:relative;aspect-ratio:303/312;background:#fff;border-radius:10px;overflow:hidden;cursor:pointer;border:2px solid transparent;transition:border-color .15s, box-shadow .15s, transform .15s}
.g-card:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.08)}
.g-card input{position:absolute;opacity:0;pointer-events:none}
.g-label{position:absolute;top:10px;left:0;right:0;text-align:center;font-weight:600;font-size:15px;z-index:1}
.g-card.pria .g-label{color:#6791E3}
.g-card.wanita .g-label{color:#F9A4B9}
.g-card img{position:absolute;left:50%;bottom:0;width:114%;height:auto;transform:translateX(-50%);display:block}
.g-card.pria.on{border-color:#6791E3;box-shadow:0 0 0 3px rgba(103,145,227,.2)}
.g-card.wanita.on{border-color:#F9A4B9;box-shadow:0 0 0 3px rgba(249,164,185,.25)}
.g-card.on::after{content:"";position:absolute;top:10px;right:10px;width:20px;height:20px;border-radius:50%;background:var(--c) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/12px no-repeat}
.g-card.pria{--c:#6791E3}.g-card.wanita{--c:#F9A4B9}
.g-card input:focus-visible ~ .g-label{text-decoration:underline}
#form-daftar .onb-form{margin-top:12px}
#form-daftar .onb-btn{margin-top:12px}
/* tanggal lahir */
.lahir-label{display:block;font-size:12px;font-weight:500;color:#6b6b6b;margin:2px 0 6px 2px}
.lahir{display:grid;grid-template-columns:1fr 1.6fr 1.15fr;gap:8px}
.onb-select{appearance:none;-webkit-appearance:none;padding:0 30px 0 12px;cursor:pointer;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 10px center/14px no-repeat}
.onb-select.kosong{color:#7a7a7a}
.onb-select option{color:#000}
.onb-hint{font-size:11.5px;color:#6b6b6b;margin-top:-4px}
.onb-input.kode{letter-spacing:6px;font-weight:600}
.onb-input.kode::placeholder{letter-spacing:0;font-weight:400}

@media(max-width:620px){
  .onb{padding:56px 20px 24px}
  .onb-logo img{width:88px}
  .onb-box{margin-top:64px}
  .onb-terms{margin-left:0;margin-right:0}
  .onb-btn{font-size:13px;padding:0 10px}
  .onb-check{font-size:13px}
}

/* kartu ringkas member yang sudah masuk */
.akun-kartu{margin:22px 0 18px;background:#fff;border-radius:14px;padding:18px 20px;display:grid;gap:12px;box-shadow:0 1px 0 rgba(0,0,0,.04)}
.akun-kartu span{display:block;font-size:12px;color:#8a8a8a}
.akun-kartu b{font-size:30px;font-weight:800;color:var(--orange)}
.akun-kartu p{margin:2px 0 0;font-size:14px;color:#222;word-break:break-all}
.onb-input[readonly]{background:#f3f0ea;color:#777}
.onb-btn[disabled],.onb-arrow[disabled]{opacity:.6;cursor:wait}