/* ==========================================================================
   Bimbel App — tambahan untuk mode pra-daftar
   Lencana "segera hadir", blok fitur menyusul, dan popup pendaftaran.
   Memakai token warna & tipografi dari site.css.
   ========================================================================== */

/* ---------- lencana ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  padding: 6px 13px; margin: 0 0 18px;
  border:1px solid rgba(200,164,77,.42); border-radius:999px;
  background: rgba(200,164,77,.08);
  color: var(--brass-hi); font-size:.76rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; line-height:1.2;
}
.eyebrow-dot{
  width:7px; height:7px; border-radius:50%; background: var(--brass-hi);
  box-shadow: 0 0 0 0 rgba(227,200,126,.55);
  animation: denyut 2.2s ease-out infinite;
}
@keyframes denyut{
  0%{ box-shadow: 0 0 0 0 rgba(227,200,126,.55); }
  70%{ box-shadow: 0 0 0 9px rgba(227,200,126,0); }
  100%{ box-shadow: 0 0 0 0 rgba(227,200,126,0); }
}

/* ---------- blok "segera hadir" ---------- */
.segera{ display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; }
@media (max-width: 860px){ .segera{ grid-template-columns:1fr; } }
.segera-card{
  background: var(--ink-2); border:1px solid var(--line); border-radius: var(--r-md);
  padding: 26px 24px; display:flex; flex-direction:column; gap:10px;
}
.segera-card h3{ font-size:1.12rem; letter-spacing:-.015em; }
.segera-card p{ color: var(--text-2); font-size:.945rem; margin:0; }
.tag{
  align-self:flex-start; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding: 4px 10px; border-radius:999px; border:1px solid var(--line-2); color: var(--text-2);
}
.tag-segera{ border-color: rgba(200,164,77,.5); color: var(--brass-hi); background: rgba(200,164,77,.08); }

/* tombol bergaya tautan (dipakai di footer) */
.linkish{
  background:none; border:0; padding:0; font: inherit; cursor:pointer;
  text-decoration:none; font-size:.9rem; color: var(--text-2);
}
.linkish:hover{ color: var(--brass-hi); }

/* ==========================================================================
   Popup pendaftaran
   Desktop: kartu di tengah. HP: lembar dari bawah, isi bisa digulir.
   ========================================================================== */
html.pd-kunci, html.pd-kunci body{ overflow:hidden; }

.pd{
  width: min(560px, calc(100% - 24px));
  max-height: min(92vh, 860px);
  max-height: min(92dvh, 860px);
  padding:0; margin:auto;
  border:1px solid var(--line-2); border-radius: var(--r-lg);
  background: var(--ink-2); color: var(--text);
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  overflow:hidden;
}
.pd::backdrop{ background: rgba(4,6,13,.74); backdrop-filter: blur(3px); }
/* cadangan untuk peramban tanpa <dialog> */
.pd.pd-cadangan[open]{ position:fixed; inset:0; z-index:200; }

.pd[open]{ display:flex; flex-direction:column; }
@media (prefers-reduced-motion: no-preference){
  .pd[open]{ animation: pd-masuk .28s cubic-bezier(.22,.75,.3,1); }
  @keyframes pd-masuk{ from{ opacity:0; transform: translateY(18px); } to{ opacity:1; transform:none; } }
}

@media (max-width: 600px){
  .pd{
    width:100%; max-width:100%;
    margin: auto 0 0;
    max-height: 94vh; max-height: 94dvh;
    border-radius: 22px 22px 0 0; border-bottom:0;
  }
}

.pd-isi{ position:relative; overflow-y:auto; overscroll-behavior: contain; padding: 30px 30px 26px; -webkit-overflow-scrolling: touch; }
@media (max-width: 600px){ .pd-isi{ padding: 26px 20px calc(22px + env(safe-area-inset-bottom)); } }

.pd-tutup{
  position:absolute; top:12px; right:12px;
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  background: transparent; color: var(--text-2);
  border:1px solid var(--line-2); font-size:1.05rem; cursor:pointer;
}
.pd-tutup:hover{ color: var(--text); border-color: var(--brass); }

.pd-judul{ font-size: clamp(1.45rem, 4.6vw, 1.75rem); letter-spacing:-.025em; margin: 0 52px 8px 0; outline:none; }
.pd-sub{ color: var(--text-2); font-size:.97rem; margin: 0 0 22px; }

.pd-f{ margin: 0 0 18px; border:0; padding:0; min-width:0; }
.pd-f > label, .pd-f > legend{
  display:block; font-weight:700; font-size:.9rem; margin-bottom:8px; padding:0; color: var(--text);
}
.pd-f legend span, .pd-f label span{ font-weight:500; color: var(--text-3); }

.pd-input{
  width:100%; display:block;
  font-family: var(--sans); font-size:16px; /* 16px: iOS tidak memperbesar layar saat fokus */
  color: var(--text); background: var(--ink);
  border:1px solid var(--line-2); border-radius:12px;
  padding: 13px 14px; line-height:1.3;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pd-input::placeholder{ color: var(--text-3); }
.pd-input:focus{ outline:none; border-color: var(--brass); box-shadow: 0 0 0 3px rgba(200,164,77,.22); }
.pd-input[aria-invalid="true"]{ border-color: var(--fail); }

.pd-bantu{ margin:7px 0 0; font-size:.8rem; color: var(--text-3); line-height:1.5; }
.pd-galat{ margin:7px 0 0; font-size:.82rem; color: var(--fail); line-height:1.5; }
.pd-saran{
  margin:7px 0 0; padding:0; background:none; border:0; cursor:pointer;
  font: inherit; font-size:.84rem; color: var(--brass-hi); text-decoration: underline; text-underline-offset:3px;
}

/* pilihan berbentuk keping (radio) */
.pd-keping{ display:flex; flex-wrap:wrap; gap:8px; }
.pd-keping label{ position:relative; cursor:pointer; }
.pd-keping input{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.pd-keping span{
  display:inline-block; padding: 10px 15px; border-radius:999px;
  border:1px solid var(--line-2); background: var(--ink);
  font-size:.9rem; font-weight:600; color: var(--text-2); line-height:1.25;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.pd-keping label:hover span{ border-color: rgba(200,164,77,.6); color: var(--text); }
.pd-keping input:checked + span{ background: var(--brass-dim); border-color: var(--brass); color: var(--brass-hi); }
.pd-keping input:focus-visible + span{ outline: 2px solid var(--brass-hi); outline-offset: 2px; }
.pd-f[aria-invalid="true"] .pd-keping span{ border-color: rgba(241,104,94,.6); }

.pd-setuju{ display:flex; gap:12px; align-items:flex-start; margin: 4px 0 6px; }
.pd-setuju input{ width:22px; height:22px; flex:0 0 22px; margin:1px 0 0; accent-color: var(--brass); }
.pd-setuju label{ font-size:.86rem; color: var(--text-2); line-height:1.55; }
.pd-setuju a{ color: var(--brass-hi); }

.pd-madu{ position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }

.pd-status{ margin: 12px 0 0; font-size:.88rem; line-height:1.55; }
.pd-status:empty{ display:none; }
.pd-status.galat{ color: var(--fail); }
.pd-status.info{ color: var(--brass-hi); }

.pd-kirim{ width:100%; margin-top:16px; }
.pd-kirim[disabled]{ opacity:.7; cursor:progress; }
.pd-catatan{ margin: 12px 0 0; font-size:.8rem; color: var(--text-3); text-align:center; }

/* langkah sukses */
.pd-centang{
  width:58px; height:58px; border-radius:50%; margin: 6px 0 16px;
  display:grid; place-items:center;
  background: var(--brass-dim); border:1px solid rgba(200,164,77,.5); color: var(--brass-hi);
}
.pd-ajak{ margin: 22px 0 0; padding: 18px; border:1px solid var(--line); border-radius: var(--r-md); background: var(--ink); }
.pd-ajak-judul{ font-weight:700; font-size:.95rem; margin:0 0 4px; }
.pd-ajak-sub{ font-size:.85rem; color: var(--text-2); margin:0 0 12px; }
.pd-link{ display:flex; gap:8px; }
.pd-link .pd-input{ font-size:.86rem; padding: 10px 12px; color: var(--text-2); }
.pd-link .btn{ flex:0 0 auto; }
.pd-aksi{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.pd-aksi .btn{ flex:1 1 180px; }
.pd-bawah{ display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between; align-items:center; margin-top:18px; }
.pd-bawah a, .pd-lain{
  font-size:.86rem; color: var(--text-2); background:none; border:0; padding:6px 0; cursor:pointer; font-family: inherit;
  text-decoration: underline; text-underline-offset:3px;
}
.pd-bawah a:hover, .pd-lain:hover{ color: var(--brass-hi); }

@media (prefers-reduced-motion: reduce){
  .eyebrow-dot{ animation:none; }
}

/* layar sempit: lencana tetap satu baris, label ambang batas tidak menimpa nama subtes */
@media (max-width: 400px){
  .eyebrow{ font-size:.7rem; letter-spacing:.06em; padding: 6px 11px; }
  .btn{ white-space: normal; text-align:center; }
}
@media (max-width: 480px){
  .skd-meta{ margin-bottom: 22px; }
}