/* ==========================================================================
   CariPasangan — design system
   Tone warna mengikuti lovecare.id: pink lembut + navy.
   ========================================================================== */

:root {
  /* brand — pink */
  --brand-50:  #fff5f9;
  --brand-100: #fde4ef;
  --brand-200: #fbcfe0;
  --brand-300: #f9a8cb;
  --brand-400: #f472b6;
  --brand-500: #ec4899;   /* aksi utama */
  --brand-600: #db2777;   /* hover */
  --brand-700: #be185d;

  /* ink — navy */
  --ink-900: #16304f;
  --ink-800: #1e3a5f;
  --ink-700: #274a73;

  /* netral */
  --body: #64748b;
  --muted: #94a3b8;
  --line: #f3e4ec;
  --line-soft: #f8eef3;
  --field: #e6d7e0;
  --card: #ffffff;
  --page: #ffffff;
  --page-tint: #fff5f9;
  --ok: #10b981;
  --off: #cbd5e1;
  --dark-chip: #16304f;

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --shell: 1280px;
  --gutter: 32px;
  --radius: 20px;
  --shadow-card: 0 2px 14px rgba(22, 48, 79, .05);
  --shadow-lift: 0 14px 34px rgba(236, 72, 153, .13);
  --shadow-float: 0 24px 60px rgba(22, 48, 79, .13);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink-900);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }

a { color: var(--brand-600); text-decoration: none; transition: color .15s ease, opacity .15s ease; }
a:hover { color: var(--brand-700); }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 3px; border-radius: 8px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.shell { max-width: var(--shell); margin: 0 auto; padding-inline: var(--gutter); }
.shell--narrow { max-width: 1040px; }

/* --- wordmark ------------------------------------------------------------- */

.wordmark {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--ink-900);
}

.wordmark--nav { font-size: 26px; letter-spacing: .18em; }
.wordmark--auth { font-size: clamp(44px, 7.5vw, 68px); letter-spacing: .1em; color: var(--brand-600); }

.tagline { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--brand-600); }

/* --- top nav -------------------------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--brand-100);
  border-bottom: 1px solid var(--brand-200);
}

.topbar__inner { display: flex; align-items: center; gap: 28px; min-height: 76px; padding-block: 12px; }

.topbar__links {
  display: flex;
  align-items: center;
  gap: 30px;
  flex: 1;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
}

.topbar__links a { color: var(--ink-800); }
.topbar__links a:hover { color: var(--brand-600); }

.topbar__links a[aria-current='page'] {
  color: var(--brand-600);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
}

.topbar__actions { display: flex; align-items: center; gap: 12px; }

.lang {
  display: flex;
  align-items: center;
  gap: 2px;
  border: 1.5px solid var(--brand-300);
  border-radius: 999px;
  padding: 3px;
  background: #fff;
}

.lang__link {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-800);
  padding: 5px 14px;
  border-radius: 999px;
  line-height: 1;
}

.lang__link[aria-current='true'] { background: var(--brand-500); color: #fff; }

.topbar__actions form { display: flex; margin: 0; }

.nav-burger { display: none; color: var(--ink-900); font-size: 24px; padding: 6px 10px; }

/* Bahasa + Masuk/Daftar di dalam burger — hanya tampil di mobile. */
.topbar__links-foot { display: none; }

/* --- buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  padding: 13px 26px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  text-align: center;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.btn:hover { transform: translateY(-1px); }

.btn--primary { background: var(--brand-500); color: #fff; box-shadow: 0 6px 18px rgba(236, 72, 153, .28); }
.btn--primary:hover { background: var(--brand-600); color: #fff; box-shadow: 0 10px 24px rgba(236, 72, 153, .34); }

.btn--outline { border-color: var(--brand-400); color: var(--brand-600); background: #fff; }
.btn--outline:hover { border-color: var(--brand-500); background: var(--brand-50); color: var(--brand-700); }

.btn--outline-light { border-color: var(--ink-800); color: var(--ink-900); }
.btn--outline-light:hover { border-color: var(--brand-500); color: var(--brand-600); }

.btn--solid-light { background: var(--brand-500); color: #fff; box-shadow: 0 6px 18px rgba(236, 72, 153, .26); }
.btn--solid-light:hover { background: var(--brand-600); color: #fff; }

.btn--lg { font-size: 16px; padding: 17px 34px; }
.btn--block { display: flex; width: 100%; }
.btn--rect { border-radius: 14px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

/* --- section furniture ---------------------------------------------------- */

.section { padding-block: 76px; }
.section--tint { background: var(--page-tint); }

.section-head { text-align: center; max-width: 820px; margin: 0 auto; }

.pill {
  display: inline-block;
  background: var(--brand-100);
  color: var(--brand-700);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 9px 20px;
  border-radius: 999px;
  margin-bottom: 24px;
}

.display {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(38px, 5.4vw, 58px);
  line-height: 1.08;
  letter-spacing: -.005em;
  color: var(--ink-900);
}

.section-sub { font-size: 17px; color: var(--body); margin-top: 18px; max-width: 720px; margin-inline: auto; }

/* --- cards ---------------------------------------------------------------- */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-card);
}

.badge {
  align-self: flex-start;   /* cegah melebar penuh di dalam flex column */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 5px 13px;
  border-radius: 999px;
}

.badge--required { background: var(--brand-500); color: #fff; }
.badge--safety { background: var(--dark-chip); color: #fff; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

.chip {
  background: var(--brand-50);
  border: 1px solid var(--brand-200);
  color: var(--brand-700);
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: 999px;
}

/* --- keunggulan ----------------------------------------------------------- */

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 48px; }

.feature {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 28px;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Garis aksen tipis di tepi atas, tumbuh saat hover */
.feature::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-400), var(--brand-600));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}

/* Hover/fokus: kartu langsung berubah warna jadi pink lembut, bukan cuma
   terangkat — supaya jelas terlihat mana yang sedang disorot. */
.feature:hover,
.feature:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  border-color: var(--brand-300);
  background: linear-gradient(180deg, var(--brand-100) 0%, var(--brand-50) 100%);
}

.feature:hover::before,
.feature:focus-within::before { transform: scaleX(1); }
.feature:hover .feature__title, .feature:focus-within .feature__title { color: var(--brand-700); }
.feature:hover .chip, .feature:focus-within .chip { background: #fff; border-color: var(--brand-300); }

/* Kartu "Wajib" tampil sama persis dengan kartu lain saat tidak disorot —
   pembedanya cukup badge. Sebelumnya latar pink & garis aksennya permanen,
   sehingga kartu terlihat seolah selalu dalam keadaan hover. */

/* Kartu biasa (langkah "Cara Kerja") juga ikut berubah warna saat disorot. */
.card--hover { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; }

.card--hover:hover,
.card--hover:focus-within {
  transform: translateY(-4px);
  border-color: var(--brand-300);
  background: linear-gradient(180deg, var(--brand-100) 0%, var(--brand-50) 100%);
  box-shadow: var(--shadow-lift);
}

.feature__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }

.feature__icon {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 16px;
  background: var(--brand-100);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .18s ease, transform .18s ease;
}

.feature:hover .feature__icon { background: var(--brand-500); transform: scale(1.06); }

.feature__icon svg {
  width: 26px; height: 26px;
  stroke: var(--brand-600);
  fill: none; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .18s ease;
}

.feature:hover .feature__icon svg { stroke: #fff; }

.feature__title { font-size: 18px; font-weight: 800; margin-bottom: 8px; color: var(--ink-900); }
.feature__body { font-size: 15px; color: var(--body); }
.feature .chips { margin-top: auto; padding-top: 20px; }

/* --- FAQ accordion -------------------------------------------------------- */

.accordion { display: flex; flex-direction: column; gap: 12px; }

.qa {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.qa[open] { border-color: var(--brand-200); box-shadow: var(--shadow-card); }

.qa__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  font-size: 17px;
  font-weight: 800;
  color: var(--ink-900);
  cursor: pointer;
  list-style: none;
  transition: color .15s ease, background .15s ease;
}

/* Sembunyikan segitiga bawaan <details> */
.qa__q::-webkit-details-marker { display: none; }
.qa__q::marker { content: ''; }

.qa__q:hover { color: var(--brand-600); background: var(--brand-50); }
.qa[open] .qa__q { color: var(--brand-600); }

.qa__icon {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--brand-100);
  color: var(--brand-600);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  transition: transform .25s ease, background .18s ease, color .18s ease;
}

.qa[open] .qa__icon { transform: rotate(45deg); background: var(--brand-500); color: #fff; }

.qa__a { padding: 0 24px 24px; font-size: 16px; color: var(--body); animation: qa-in .22s ease; }

@keyframes qa-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* --- paket ---------------------------------------------------------------- */

.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  align-items: stretch;
  margin-top: 56px;
}

.plan {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 36px 32px 32px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}

.plan--featured { border: 2px solid var(--brand-400); box-shadow: var(--shadow-lift); }

.plan__ribbon {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand-500);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 7px 20px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(236, 72, 153, .3);
}

.plan__name {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--body);
  display: flex;
  align-items: center;
  gap: 8px;
}

.plan--featured .plan__name { color: var(--brand-600); }

.plan__price {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 52px;
  line-height: 1.1;
  margin-top: 10px;
  color: var(--ink-900);
}

.plan__per { font-size: 15px; color: var(--body); }

.durations { display: flex; gap: 14px; margin-top: 14px; }

.duration {
  position: relative;
  flex: 1;
  background: var(--brand-50);
  border: 1.5px solid transparent;
  border-radius: 16px;
  padding: 14px 10px 16px;
  text-align: center;
  transition: background .15s ease, border-color .15s ease;
}

.duration[aria-pressed='true'] { background: var(--brand-100); border-color: var(--brand-500); }
.duration__label { font-size: 13px; color: var(--body); font-weight: 600; }

.duration__price {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 34px;
  line-height: 1.15;
  color: var(--brand-600);
}

.duration__tag {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand-500);
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.plan__note { font-size: 14px; color: var(--muted); margin-top: 12px; }

/* Pembeda tiga paket: baris meta di bawah harga */
.plan__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.plan__perday {
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-600);
  background: var(--brand-50);
  border: 1px solid var(--brand-200);
  padding: 4px 12px;
  border-radius: 999px;
}

.plan__save {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  background: var(--ok);
  padding: 4px 12px;
  border-radius: 999px;
}

.plan--free { background: linear-gradient(180deg, #fbfdff 0%, #fff 60%); }
.plan--free .plan__price { color: var(--body); }

.plan__same {
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-700);
  background: var(--brand-50);
  border: 1px dashed var(--brand-300);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 26px 0 0;
  text-align: center;
}

.plan__feats { margin: 26px 0 28px; border-top: 1px solid var(--line-soft); }

.plan__feats li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15px;
  padding: 14px 2px;
  border-bottom: 1px solid var(--line-soft);
}

.plan__feats li::before { flex: none; font-weight: 700; line-height: 1.5; }
.plan__feats li.yes::before { content: '✓'; color: var(--ok); }
.plan__feats li.no::before { content: '✕'; color: var(--off); }
.plan__feats li.no { color: var(--muted); }

.plan .btn { margin-top: auto; }
.plan__footnote { text-align: center; font-size: 14px; color: var(--body); margin-top: 34px; }

/* --- auth ----------------------------------------------------------------- */

.auth-body { background: var(--page-tint); }

.auth-body--hero {
  background:
    linear-gradient(160deg, var(--brand-200) 0%, var(--brand-100) 55%, var(--brand-50) 100%) no-repeat top center / 100% 520px,
    var(--page-tint);
}

.auth-wrap {
  position: relative;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 56px 20px 72px;
  overflow: hidden;
}

.auth-body--hero .auth-wrap::before {
  content: '';
  position: absolute;
  top: -170px;
  right: -190px;
  width: 620px;
  height: 620px;
  border: 1.5px solid rgba(236, 72, 153, .16);
  border-radius: 50%;
  pointer-events: none;
}

.auth-body--plain .auth-wrap { align-items: center; padding-block: 72px; }

.auth-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 650px;
  background: var(--card);
  border-radius: 28px;
  padding: 56px clamp(24px, 5vw, 60px) 48px;
  box-shadow: var(--shadow-float);
  text-align: center;
}

.auth-card--login { max-width: 620px; box-shadow: 0 10px 40px rgba(22, 48, 79, .08); }
.auth-card .tagline { display: block; margin-top: 14px; }
.auth-lede { font-size: 17px; color: var(--body); line-height: 1.75; margin-top: 26px; }
.auth-sub { font-size: 17px; color: var(--body); margin-top: 8px; }
.auth-inner { max-width: 500px; margin: 0 auto; }

.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  background: #fff;
  border: 1.5px solid var(--field);
  border-radius: 14px;
  padding: 18px 20px;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink-900);
  box-shadow: 0 1px 3px rgba(22, 48, 79, .05);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.btn-google:hover { border-color: var(--brand-400); box-shadow: 0 4px 14px rgba(236, 72, 153, .16); }
.btn-google svg { width: 22px; height: 22px; flex: none; }

.verify-slot { margin: 34px auto 0; display: flex; justify-content: center; min-height: 66px; }
.verify-note { font-size: 15px; color: var(--body); margin-top: 18px; }

.verify-fallback {
  width: 100%;
  max-width: 380px;
  border: 1px dashed var(--field);
  border-radius: 12px;
  background: var(--brand-50);
  padding: 16px 18px;
  font-size: 13.5px;
  color: var(--body);
  text-align: left;
  line-height: 1.5;
}

.divider { display: flex; align-items: center; gap: 18px; margin: 34px 0; color: var(--muted); font-size: 14px; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.divider--star { color: var(--brand-400); font-size: 15px; }

.requirements {
  background: var(--brand-50);
  border-left: 4px solid var(--brand-500);
  border-radius: 12px;
  padding: 24px 26px;
  text-align: left;
}

.requirements h2 { font-size: 16px; font-weight: 800; color: var(--brand-700); margin-bottom: 12px; }
.requirements p { font-size: 15px; color: var(--body); line-height: 1.7; }
.requirements p + p { margin-top: 16px; }

.auth-foot { margin-top: 34px; font-size: 15px; color: var(--body); }
.auth-foot a { font-weight: 800; }

/* --- form fields ---------------------------------------------------------- */

.field { text-align: left; margin-bottom: 22px; }
.field__label { display: block; font-size: 15px; font-weight: 800; margin-bottom: 9px; color: var(--ink-900); }

.input {
  width: 100%;
  font: inherit;
  font-size: 16px;
  padding: 16px 18px;
  border: 1.5px solid var(--field);
  border-radius: 14px;
  background: #fff;
  color: var(--ink-900);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.input::placeholder { color: var(--muted); }
.input:focus { border-color: var(--brand-500); box-shadow: 0 0 0 4px rgba(236, 72, 153, .12); }
.input[aria-invalid='true'] { border-color: #e11d48; }

.field__hint { font-size: 13.5px; color: var(--muted); margin-top: 8px; }
.field__error { display: block; font-size: 13px; color: #e11d48; margin-top: 7px; }

.notice { border-radius: 12px; padding: 14px 16px; font-size: 14px; line-height: 1.55; text-align: left; margin-top: 20px; }
.notice--info { background: #eef2ff; color: #3730a3; }
.notice--warn { background: #fff7ed; color: #9a3412; }
.notice--error { background: #fff1f2; color: #9f1239; }
.notice[hidden] { display: none; }

/* --- hero & landing ------------------------------------------------------- */

.hero {
  background: linear-gradient(165deg, var(--brand-200) 0%, var(--brand-100) 48%, var(--brand-50) 100%);
  color: var(--ink-900);
  padding-block: 92px 120px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Lengkung lembut ke section putih di bawahnya, seperti lovecare.id */
.hero::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -150px;
  transform: translateX(-50%);
  width: 140%;
  height: 230px;
  background: var(--page);
  border-radius: 50% 50% 0 0;
}

.hero .shell { position: relative; z-index: 1; }
.hero .display { color: var(--ink-900); }
.hero p { color: var(--ink-700); font-size: 18px; margin-top: 20px; max-width: 640px; margin-inline: auto; }
.hero__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }

.prose-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 46px; }

.step__n {
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 600;
  color: var(--brand-500);
  line-height: 1;
  margin-bottom: 12px;
}

.legal { max-width: 820px; margin-inline: auto; }
.legal h3 { font-size: 18px; font-weight: 800; margin: 26px 0 8px; color: var(--ink-900); }
.legal p { font-size: 16px; color: var(--body); }

/* --- privasi & syarat ----------------------------------------------------- */

.doc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }

.doc-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.doc-card:hover,
.doc-card:focus-within {
  transform: translateY(-4px);
  border-color: var(--brand-300);
  background: linear-gradient(180deg, var(--brand-100) 0%, var(--brand-50) 100%);
  box-shadow: var(--shadow-lift);
}

.doc-card__n {
  width: 34px; height: 34px;
  flex: none;
  border-radius: 10px;
  background: var(--brand-100);
  color: var(--brand-700);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800;
  margin-bottom: 16px;
}

.doc-card:hover .doc-card__n, .doc-card:focus-within .doc-card__n { background: var(--brand-500); color: #fff; }
.doc-card h3 { font-size: 17px; font-weight: 800; color: var(--ink-900); margin: 0 0 8px; }
.doc-card p { font-size: 15px; color: var(--body); line-height: 1.7; }

/* --- timeline cara kerja -------------------------------------------------- */

.timeline { position: relative; margin: 52px auto 0; max-width: 880px; padding-left: 76px; }

/* Garis vertikal penghubung antar langkah */
.timeline::before {
  content: '';
  position: absolute;
  left: 27px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: linear-gradient(180deg, var(--brand-300), var(--brand-100));
}

.tl { position: relative; padding-bottom: 22px; }
.tl:last-child { padding-bottom: 0; }

.tl__marker {
  position: absolute;
  left: -76px;
  top: 22px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--brand-300);
  color: var(--brand-600);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
  z-index: 1;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.tl__card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 28px 30px;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.tl:hover .tl__card, .tl:focus-within .tl__card {
  border-color: var(--brand-300);
  box-shadow: var(--shadow-lift);
  transform: translateY(-3px);
}

.tl:hover .tl__marker, .tl:focus-within .tl__marker {
  background: var(--brand-500);
  border-color: var(--brand-500);
  color: #fff;
  transform: scale(1.05);
}

.tl__step {
  display: block;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-600);
  margin-bottom: 8px;
}

.tl__title { font-size: 21px; font-weight: 800; color: var(--ink-900); margin-bottom: 10px; }
.tl__body { font-size: 15.5px; color: var(--body); line-height: 1.7; }

.tl__notes { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }

.tl__notes li {
  position: relative;
  padding-left: 20px;
  font-size: 14.5px;
  color: var(--body);
  line-height: 1.65;
}

.tl__notes li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-300);
}

.tl__link { margin-top: 16px; font-size: 15px; font-weight: 700; }

/* Daftar tampil / tersembunyi */
.reveal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 20px;
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: 14px;
  padding: 20px 22px;
}

.reveal__label {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}

.reveal__list { display: flex; flex-direction: column; gap: 9px; }

.reveal__item { display: flex; gap: 9px; align-items: flex-start; font-size: 14.5px; }
.reveal__item::before { flex: none; font-weight: 800; line-height: 1.5; }
.reveal__item--yes { color: var(--ink-900); }
.reveal__item--yes::before { content: '✓'; color: var(--ok); }
.reveal__item--no { color: var(--muted); }
.reveal__item--no::before { content: '✕'; color: var(--off); }

/* Sepasang kartu: Reguler vs Premium, atau Interest vs Report */
.minipair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }

.minicard {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
}

.minicard--premium { border-color: var(--brand-300); background: var(--brand-50); }

.minicard__name {
  display: block;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

.minicard--premium .minicard__name { color: var(--brand-600); }

.minicard__quota {
  display: block;
  font-size: 17px;
  font-weight: 800;
  color: var(--ink-900);
  margin-bottom: 14px;
}

.minicard__list { display: flex; flex-direction: column; gap: 8px; }

.minicard__list li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  color: var(--body);
  line-height: 1.6;
}

.minicard__list li::before { content: '·'; position: absolute; left: 4px; color: var(--brand-400); font-weight: 800; }
.minicard--premium .minicard__list li::before { content: '✓'; left: 0; font-size: 12px; color: var(--ok); }

.actioncard {
  background: var(--brand-50);
  border: 1px solid var(--brand-200);
  border-left: 3px solid var(--brand-500);
  border-radius: 14px;
  padding: 20px;
}

.actioncard--warn { background: #fff7f8; border-color: #fecdd3; border-left-color: #e11d48; }
.actioncard h3 { font-size: 15.5px; font-weight: 800; color: var(--ink-900); margin-bottom: 8px; }
.actioncard--warn h3 { color: #9f1239; }
.actioncard p { font-size: 14.5px; color: var(--body); line-height: 1.65; }

/* Langkah dengan ilustrasi: teks kiri, mockup kanan */
.tl__card--split { display: grid; grid-template-columns: 1fr 300px; gap: 28px; align-items: start; }
.tl__visual { position: relative; }

/* --- mockup ilustrasi (statis, bukan komponen fungsional) ----------------- */

.mock {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(22, 48, 79, .08);
  margin: 0;
  font-size: 13.5px;
}

.mock-stack { display: flex; flex-direction: column; gap: 16px; }

.mock__bar {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--brand-700);
  color: #fff;
  padding: 12px 16px;
  font-weight: 800;
  font-size: 14px;
}

.mock__bar svg { width: 17px; height: 17px; stroke: #fff; fill: none; stroke-width: 1.8; stroke-linejoin: round; }

.mock__body { padding: 14px 16px 16px; }
.mock__to { color: var(--muted); font-size: 12.5px; margin-bottom: 10px; }
.mock__to strong { color: var(--ink-900); }

.mock__letter {
  background: #f6f4f2;
  border-radius: 10px;
  padding: 13px 14px;
  margin-bottom: 14px;
}

.mock__letter p { color: var(--ink-800); line-height: 1.75; font-size: 13.5px; }
.mock__letter p + p { margin-top: 9px; }

.mock__btn {
  display: block;
  text-align: center;
  padding: 10px 14px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 13.5px;
}

.mock__btn--solid { background: var(--brand-700); color: #fff; }
.mock__btn--ghost { background: #f4f4f5; color: var(--ink-800); border: 1px solid var(--line); }
.mock__btn--danger { background: #fff; color: #b91c1c; border: 1px solid #fecaca; }
.mock__btn--danger-solid { background: #b91c1c; color: #fff; }

.mock__row { display: flex; gap: 10px; }
.mock__row .mock__btn { flex: 1; }
.mock__row--pad { padding: 0 16px 16px; }

/* Notifikasi */
.mock__notif-head { display: flex; align-items: center; gap: 9px; padding: 13px 16px 0; }
.mock__notif-head strong { font-size: 12.5px; letter-spacing: .06em; color: var(--ink-900); }
.mock__notif-head em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--muted); }

.mock__badge {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--brand-700);
  display: flex; align-items: center; justify-content: center;
}

.mock__badge svg { width: 16px; height: 16px; stroke: #fff; fill: none; stroke-width: 1.8; stroke-linejoin: round; }

.mock__title { font-size: 15px; font-weight: 800; color: var(--ink-900); margin-bottom: 6px; }
.mock__title--danger { color: #b91c1c; }
.mock__text { font-size: 13px; color: var(--body); line-height: 1.6; margin-bottom: 14px; }

/* Chat */
.mock__chat-head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--line-soft); }
.mock__chat-head strong { display: block; font-size: 15px; color: var(--ink-900); }
.mock__chat-head em { font-style: normal; font-size: 12px; color: var(--muted); }
.mock__avatar { width: 34px; height: 34px; border-radius: 50%; background-color: #e2dcde; flex: none; }

.mock__chat-log { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; }

.mock__bubble {
  align-self: flex-start;
  max-width: 86%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--ink-800);
}

.mock__bubble--saya { align-self: flex-end; background: var(--brand-700); border-color: var(--brand-700); color: #fff; }

.mock__chat-input { display: flex; align-items: center; gap: 8px; padding: 0 16px 14px; }

.mock__field {
  flex: 1;
  background: #f4f4f5;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 14px;
  font-size: 12.5px;
  color: var(--muted);
}

.mock__send {
  width: 32px; height: 32px;
  flex: none;
  border-radius: 50%;
  background: var(--brand-700);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}

/* Formulir laporan */
.mock--report { background: #e9e7e8; border-color: #ddd8da; padding: 12px; }
.mock--report .mock__body { background: #fff; border-radius: 12px; }

.mock__opts { display: flex; flex-direction: column; margin-bottom: 14px; }

.mock__opts li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
  color: var(--ink-800);
}

.mock__opts li:last-child { border-bottom: 0; }
.mock__opts i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #d4d4d8; flex: none; }
.mock__opts li.is-on i { border-color: #b91c1c; background: #b91c1c; box-shadow: inset 0 0 0 2.5px #fff; }

@media (max-width: 900px) {
  .tl__card--split { grid-template-columns: 1fr; gap: 22px; }
  .tl__visual { max-width: 320px; }
}

/* Ringkasan cara kerja di beranda */
.howto-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }

/* --- panel keamanan ------------------------------------------------------- */

/* Panel lembut: latar pink sangat muda dengan teks navy. Versi sebelumnya
   memakai gradien pink pekat penuh — terlalu menyilaukan untuk blok sebesar
   ini, terutama di layar terang. */
.safety {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  padding: 44px 42px;
  margin-top: 60px;
  background: linear-gradient(135deg, var(--brand-50) 0%, var(--brand-100) 100%);
  border: 1px solid var(--brand-200);
  color: var(--ink-900);
}

.safety::after {
  content: '';
  position: absolute;
  right: -120px; bottom: -190px;
  width: 420px; height: 420px;
  border: 1.5px solid rgba(236, 72, 153, .14);
  border-radius: 50%;
  pointer-events: none;
}

.safety__head { display: flex; align-items: flex-start; gap: 18px; position: relative; z-index: 1; }

.safety__icon {
  flex: none;
  width: 52px; height: 52px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--brand-200);
  display: flex; align-items: center; justify-content: center;
}

.safety__icon svg {
  width: 27px; height: 27px;
  stroke: var(--brand-600); fill: none; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}

.safety__title {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.15;
  margin-bottom: 10px;
  color: var(--ink-900);
}

.safety__body { font-size: 16px; line-height: 1.7; color: var(--body); max-width: 760px; }

.safety__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 32px;
  position: relative;
  z-index: 1;
}

.safety__step {
  background: #fff;
  border: 1px solid var(--brand-200);
  border-radius: 16px;
  padding: 22px 20px;
  text-align: center;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.safety__step:hover { border-color: var(--brand-400); transform: translateY(-3px); box-shadow: var(--shadow-lift); }

/* Tahap terakhir ditandai lebih tegas karena sanksinya permanen */
.safety__step:last-child { border-color: var(--brand-400); background: var(--brand-50); }

.safety__step b {
  display: block;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--brand-600);
}

.safety__step:last-child b { color: var(--brand-700); }
.safety__step span { font-size: 14px; color: var(--body); }

/* Daftar poin keamanan & privasi */
.safety__points {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
  margin-top: 28px;
  position: relative;
  z-index: 1;
}

.safety__points li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 15px;
  color: var(--body);
  line-height: 1.65;
}

.safety__points li::before {
  content: '✓';
  flex: none;
  font-weight: 800;
  color: var(--ok);
  line-height: 1.5;
}

/* Callout syarat minimum */
.callout {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--brand-50);
  border: 1px solid var(--brand-200);
  border-left: 4px solid var(--brand-500);
  border-radius: 16px;
  padding: 24px 26px;
  margin-top: 22px;
}

.callout__icon { flex: none; width: 26px; height: 26px; }
.callout__icon svg { width: 26px; height: 26px; stroke: var(--brand-600); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.callout h3 { font-size: 17px; font-weight: 800; color: var(--ink-900); margin-bottom: 6px; }
.callout p { font-size: 15px; color: var(--body); line-height: 1.7; }

/* --- lonceng notifikasi --------------------------------------------------- */

.bell { position: relative; }

.bell__btn {
  position: relative;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--brand-300);
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s ease, background .15s ease;
}

.bell__btn:hover { border-color: var(--brand-500); background: var(--brand-50); }

.bell__btn svg {
  width: 20px; height: 20px;
  stroke: var(--ink-800); fill: none; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

.bell__dot {
  position: absolute;
  top: -5px; right: -5px;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: #e11d48;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--brand-100);
}

.bell__panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: min(340px, calc(100vw - 32px));
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 20px 46px rgba(22, 48, 79, .16);
  z-index: 60;
  overflow: hidden;
}

.bell__panel[hidden] { display: none; }

.bell__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
}

.bell__head form { margin: 0; }
.bell__readall { font-size: 13.5px; font-weight: 700; color: var(--brand-600); }
.bell__readall:hover { color: var(--brand-700); }

.bell__list { max-height: 340px; overflow-y: auto; }

.bell__item a {
  display: block;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
  color: inherit;
}

.bell__item a:hover { background: var(--brand-50); }
.bell__item.is-unread a { background: var(--brand-50); }

.bell__title {
  display: block;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--ink-900);
  margin-bottom: 3px;
}

.bell__item.is-unread .bell__title::before {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brand-500);
  margin-right: 8px;
  vertical-align: middle;
}

.bell__body { display: block; font-size: 13.5px; color: var(--body); }
.bell__time { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }
.bell__empty { padding: 26px 18px; text-align: center; color: var(--muted); font-size: 14px; }

.bell__all {
  display: block;
  padding: 14px 18px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 700;
  background: var(--brand-50);
}

/* Halaman notifikasi */
.notif-list { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }

.notif {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: border-color .15s ease, background .15s ease;
}

.notif a { display: block; padding: 18px 20px; color: inherit; }
.notif:hover { border-color: var(--brand-300); background: var(--brand-50); }
.notif.is-unread { border-left: 3px solid var(--brand-500); }
.notif__title { display: block; font-size: 16px; font-weight: 800; color: var(--ink-900); margin-bottom: 4px; }
.notif__body { display: block; font-size: 14.5px; color: var(--body); }
.notif__time { display: block; font-size: 13px; color: var(--muted); margin-top: 6px; }
.notif--empty { padding: 34px; text-align: center; color: var(--muted); }

/* --- filter admin --------------------------------------------------------- */

.filters {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 22px;
  margin-bottom: 20px;
}

.filters__row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.filters__row + .filters__row { margin-top: 14px; }

.filters__field { display: flex; flex-direction: column; gap: 6px; min-width: 170px; }
.filters__field--grow { flex: 1; min-width: 240px; }
.filters__field > span { font-size: 12.5px; font-weight: 800; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.filters__field .input { padding: 12px 14px; font-size: 15px; }

.filters__actions { display: flex; gap: 10px; align-items: center; }
.filters__hint { font-size: 13px; color: var(--muted); margin-top: 14px; line-height: 1.6; }

/* --- Trust Score ---------------------------------------------------------- */

.profil-grid { display: grid; grid-template-columns: 320px 1fr; gap: 34px; align-items: start; }

.trust {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  position: sticky;
  top: 100px;
}

.trust__head {
  background: var(--brand-700);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  font-size: 16px;
  font-weight: 800;
}

.trust__head b { font-size: 22px; }
.trust__body { padding: 20px 18px 18px; }

.trust__bar { height: 12px; background: var(--brand-100); border-radius: 999px; overflow: hidden; }
.trust__bar i { display: block; height: 100%; background: var(--brand-700); border-radius: 999px; transition: width .3s ease; }

.trust__status { font-size: 14px; font-weight: 700; color: var(--muted); text-align: center; margin: 14px 0 16px; }
.trust__status.is-ok { color: #047857; }

.trust__list { display: flex; flex-direction: column; gap: 8px; }

.trust__list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--brand-50);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14.5px;
  color: var(--ink-900);
}

.trust__list li b { color: var(--brand-700); font-weight: 800; }
.trust__list li.is-off { background: #fafafa; color: var(--muted); }
.trust__list li.is-off b { color: var(--brand-200); }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field-row .field { margin-bottom: 22px; }

/* --- kartu kandidat ------------------------------------------------------- */

.kandidat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; margin-top: 34px; }

.kandidat {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.kandidat:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--brand-300); }

.kandidat__foto,
.profil-kartu__foto {
  height: 190px;
  background-color: #ece5e7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #a99ba0;
  font-size: 14px;
  border-radius: 14px;
  margin: 12px 12px 0;
}

.profil-kartu__foto svg { width: 34px; height: 34px; stroke: currentColor; fill: none; stroke-width: 1.6; }

.kandidat__isi { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.kandidat__nama { font-size: 22px; font-weight: 800; color: var(--ink-900); margin-bottom: 8px; }

.verif {
  align-self: flex-start;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #047857;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.verif--sm { font-size: 11.5px; padding: 3px 9px; margin: 0 0 0 8px; display: inline-block; }

.kandidat__meta { display: flex; flex-direction: column; gap: 4px; font-size: 14.5px; color: var(--body); margin-bottom: 14px; }
.kandidat__meta li:first-child { color: var(--ink-900); }

.cocok {
  align-self: flex-start;
  background: var(--brand-100);
  color: var(--brand-700);
  font-size: 13px;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.kandidat__aksi { display: flex; gap: 10px; margin-top: auto; }
.kandidat__aksi .btn { flex: 1; padding: 11px 14px; font-size: 14px; }

/* --- detail kandidat ------------------------------------------------------ */

.detail-grid { display: grid; grid-template-columns: 1fr 340px; gap: 34px; align-items: start; }

.disclosure {
  background: var(--brand-50);
  border-left: 3px solid var(--brand-600);
  border-radius: 12px;
  padding: 22px 24px;
}

.disclosure h2 { font-size: 16px; font-weight: 800; color: var(--brand-700); margin-bottom: 12px; }
.disclosure__yes { font-size: 15px; color: var(--ink-900); line-height: 1.9; margin-bottom: 14px; }
.disclosure__no { display: flex; flex-direction: column; gap: 8px; font-size: 15px; color: var(--body); }

.hidden-tag {
  background: #e8e6e7;
  color: #8a8287;
  font-size: 13px;
  padding: 3px 12px;
  border-radius: 999px;
  display: inline-block;
}

.bio-box, .cocok-box, .perkenalan {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 24px;
  margin-top: 18px;
}

.bio-box h3, .perkenalan h3 { font-size: 17px; font-weight: 800; color: var(--ink-900); margin-bottom: 10px; }
.bio-box p, .cocok-box p, .perkenalan p { font-size: 15px; color: var(--body); line-height: 1.7; }
.cocok-box .cocok { margin-bottom: 10px; }

.profil-kartu {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  position: sticky;
  top: 100px;
}

.profil-kartu__isi { padding: 20px 22px 22px; }
.profil-kartu__isi h2 { font-size: 24px; font-weight: 800; color: var(--ink-900); }
.profil-kartu__kampus { font-size: 15px; color: var(--body); margin-bottom: 16px; }

.profil-kartu__data { display: flex; flex-direction: column; }
.profil-kartu__data > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: 14.5px; }
.profil-kartu__data dt { color: var(--body); }
.profil-kartu__data dd { margin: 0; color: var(--ink-900); font-weight: 700; text-align: right; }

.profil-kartu__kaki { padding-top: 14px; font-size: 14px; color: var(--body); }

.empty-state {
  background: #fff;
  border: 1px dashed var(--brand-300);
  border-radius: 18px;
  padding: 40px 28px;
  text-align: center;
  margin-top: 30px;
}

.empty-state p { color: var(--body); margin-bottom: 10px; }
.empty-state .btn { margin-top: 12px; }

@media (max-width: 940px) {
  .profil-grid, .detail-grid { grid-template-columns: 1fr; }
  .trust, .profil-kartu { position: static; }
}

@media (max-width: 640px) {
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .kandidat-grid { grid-template-columns: 1fr; }
  .kandidat__aksi { flex-direction: column; }
}

/* --- foto buram & formulir profil ----------------------------------------- */

/* Berkas yang dimuat sudah buram dari server; ini hanya mengatur ukurannya. */
.kandidat__foto, .profil-kartu__foto { position: relative; overflow: hidden; }

.kandidat__foto img,
.profil-kartu__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kandidat__foto span,
.profil-kartu__foto span {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, .82);
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--body);
}

.profil-kartu__foto svg { position: relative; z-index: 1; }

.foto-terbuka { width: 100%; border-radius: 12px; margin-top: 6px; }

.foto-banding { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.foto-banding figure { margin: 0; }
.foto-banding img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.foto-banding figcaption { font-size: 11.5px; color: var(--muted); text-align: center; margin-top: 5px; }

.form-sec {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand-600);
  padding-bottom: 8px;
  margin: 6px 0 18px;
  border-bottom: 1px solid var(--line);
}

.form-card .form-sec:not(:first-of-type) { margin-top: 14px; }

.check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--ink-900);
  background: var(--brand-50);
  border: 1px solid var(--brand-200);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 20px;
  cursor: pointer;
}

.check input { width: 18px; height: 18px; accent-color: var(--brand-500); flex: none; }
.blok-ktp[hidden] { display: none; }

.mini-list { display: flex; flex-direction: column; gap: 8px; }
.mini-list li { font-size: 14.5px; }

.dash-grid { display: grid; grid-template-columns: 1fr 320px; gap: 28px; align-items: start; }
.dash-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 100px; }

@media (max-width: 940px) {
  .dash-grid { grid-template-columns: 1fr; }
  .dash-side { position: static; }
}

/* --- menu akun di nav ----------------------------------------------------- */

.usermenu { position: relative; }

.usermenu__btn {
  display: flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  border: 1.5px solid var(--brand-300);
  border-radius: 999px;
  padding: 4px 12px 4px 4px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.usermenu__btn:hover { border-color: var(--brand-500); box-shadow: 0 3px 12px rgba(236, 72, 153, .14); }

.usermenu__avatar {
  width: 32px; height: 32px;
  flex: none;
  border-radius: 50%;
  background: var(--brand-500);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800;
  overflow: hidden;
}

.usermenu__avatar img { width: 100%; height: 100%; object-fit: cover; }
.usermenu__avatar--lg { width: 44px; height: 44px; font-size: 18px; }

.usermenu__nama { font-size: 14.5px; font-weight: 700; color: var(--ink-900); max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usermenu__caret { font-size: 13px; color: var(--muted); line-height: 1; }

.usermenu__panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: min(280px, calc(100vw - 32px));
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 20px 46px rgba(22, 48, 79, .16);
  z-index: 60;
  overflow: hidden;
}

.usermenu__panel[hidden] { display: none; }

.usermenu__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: var(--brand-50);
  border-bottom: 1px solid var(--line);
}

.usermenu__head strong { display: block; font-size: 15px; color: var(--ink-900); }
.usermenu__head em { display: block; font-style: normal; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }

.usermenu__list { display: flex; flex-direction: column; padding: 6px; }
.usermenu__list form { margin: 0; }

.usermenu__list a,
.usermenu__list button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 13px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-800);
  text-align: left;
}

.usermenu__list a:hover,
.usermenu__list button:hover { background: var(--brand-50); color: var(--brand-700); }

.usermenu__list svg {
  width: 18px; height: 18px;
  flex: none;
  stroke: currentColor; fill: none; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

.usermenu__list .is-admin { color: var(--brand-600); border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; margin-top: 4px; padding-top: 13px; }
.usermenu__list .is-keluar { color: #9f1239; }
.usermenu__list .is-keluar:hover { background: #fff1f2; color: #9f1239; }

/* --- riwayat pendidikan & media sosial ------------------------------------ */

.edu {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px 8px;
  margin-bottom: 14px;
  background: #fff;
}

.edu legend {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand-600);
  padding: 2px 10px;
  background: var(--brand-50);
  border-radius: 999px;
}

.tahun-row { display: flex; align-items: center; gap: 8px; }
.tahun-row .input { text-align: center; }
.tahun-row span { color: var(--muted); }

.check--hapus { background: #fff1f2; border-color: #fecdd3; color: #9f1239; margin: 10px 0 14px; }
.check--hapus input { accent-color: #e11d48; }

.edu__buang { margin-bottom: 14px; }

.sosial-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

#tambah-pendidikan[disabled] { opacity: .55; cursor: not-allowed; }

@media (max-width: 640px) {
  .sosial-grid { grid-template-columns: 1fr; }
  .usermenu__nama { display: none; }
  .usermenu__btn { padding: 4px; }
  .usermenu__panel { right: -8px; }
}

/* --- upgrade & pembayaran ------------------------------------------------- */

.bayar-step { margin-top: 28px; }

.bayar-step > h2 {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 19px;
  font-weight: 800;
  color: var(--ink-900);
  margin-bottom: 14px;
}

.bayar-step > h2 span {
  width: 28px; height: 28px;
  flex: none;
  border-radius: 50%;
  background: var(--brand-500);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}

.paket-pilih { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.paket-opsi {
  display: block;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 16px;
  padding: 18px 20px;
  color: inherit;
  transition: border-color .15s ease, background .15s ease;
}

.paket-opsi:hover { border-color: var(--brand-300); color: inherit; }
.paket-opsi.is-on { border-color: var(--brand-500); background: var(--brand-50); }

.paket-opsi__nama { display: block; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.paket-opsi.is-on .paket-opsi__nama { color: var(--brand-600); }
.paket-opsi__harga { display: block; font-family: var(--serif); font-size: 34px; font-weight: 600; color: var(--ink-900); line-height: 1.2; }
.paket-opsi__hari { display: block; font-size: 13px; color: var(--body); }

.rekening {
  background: var(--brand-50);
  border: 1px solid var(--brand-200);
  border-radius: 16px;
  padding: 8px 20px;
  margin-bottom: 12px;
}

.rekening__baris {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--brand-100);
  font-size: 15px;
}

.rekening__baris:last-child { border-bottom: 0; }
.rekening__baris span { color: var(--body); }
.rekening__baris strong { color: var(--ink-900); font-size: 16px; }
.rekening__nomor { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; }
.rekening__baris--total strong { color: var(--brand-600); font-size: 20px; }

.bayar-status {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 16px;
  padding: 22px 24px;
  margin-top: 22px;
}

.bayar-status h2 { font-size: 18px; font-weight: 800; color: #92400e; margin-bottom: 8px; }
.bayar-status p { font-size: 15px; color: var(--body); line-height: 1.65; }

.bayar-kartu {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 24px;
  margin-bottom: 14px;
}

.bayar-kartu__head { margin-bottom: 12px; }
.bayar-kartu__head strong { display: block; font-size: 17px; color: var(--ink-900); }
.bayar-kartu__aksi { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; align-items: flex-start; }
.bayar-kartu__aksi form { margin: 0; }

.bayar-kartu__bukti { display: block; text-align: center; }
.bayar-kartu__bukti img { width: 100%; border: 1px solid var(--line); border-radius: 12px; }
.bayar-kartu__bukti span { display: block; font-size: 12.5px; color: var(--brand-600); margin-top: 6px; font-weight: 700; }

/* Status pembayaran di dashboard */
.bayar-lacak {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 12px;
  padding: 14px 16px;
}

.bayar-lacak__badge {
  display: inline-block;
  background: #92400e;
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  padding: 4px 11px;
  border-radius: 999px;
  margin-bottom: 9px;
}

.bayar-lacak p { font-size: 14px; color: var(--body); margin-bottom: 4px; }

.bayar-riwayat { display: flex; flex-direction: column; gap: 9px; }

.bayar-riwayat li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13.5px;
}

.bayar-riwayat__kiri strong { display: block; color: var(--ink-900); }
.bayar-riwayat__kiri em { font-style: normal; font-size: 12px; color: var(--muted); }

.bayar-riwayat__catatan {
  display: block;
  font-size: 12.5px;
  color: #9f1239;
  background: #fff1f2;
  border-radius: 8px;
  padding: 8px 10px;
  margin-top: -3px;
}

/* --- modal batas kuota ---------------------------------------------------- */

/* Overlay .modal ini KHUSUS untuk <div class="modal"> (popup kuota).
   Elemen <dialog class="modal"> punya perilaku tampil/sembunyi sendiri —
   jangan disentuh, agar tidak selalu terlihat. */
.modal:not(dialog) {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(22, 48, 79, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal:not(dialog)[hidden] { display: none; }

.modal__kotak {
  position: relative;
  background: #fff;
  border-radius: 22px;
  padding: 32px 34px;
  max-width: 460px;
  width: 100%;
  box-shadow: 0 30px 70px rgba(22, 48, 79, .3);
  animation: modal-masuk .22s ease;
}

@keyframes modal-masuk {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to { opacity: 1; transform: none; }
}

.modal__tutup {
  position: absolute;
  top: 12px; right: 14px;
  font-size: 26px;
  line-height: 1;
  color: var(--muted);
  padding: 4px 10px;
}

.modal__tutup:hover { color: var(--ink-900); }
.modal__judul { font-size: 23px; font-weight: 800; color: var(--ink-900); margin-bottom: 10px; }
.modal__kotak > p { font-size: 15px; color: var(--body); line-height: 1.7; }

.modal__poin { display: flex; flex-direction: column; gap: 9px; margin: 18px 0 22px; }

.modal__poin li {
  display: flex;
  gap: 10px;
  font-size: 14.5px;
  color: var(--ink-800);
}

.modal__poin li::before { content: '✓'; color: var(--ok); font-weight: 800; flex: none; }
.modal__aksi { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 700px) {
  .paket-pilih { grid-template-columns: 1fr; }
  .bayar-kartu { grid-template-columns: 1fr; }
  .modal__kotak { padding: 26px 22px; }
  .modal__aksi .btn { flex: 1; }
}

/* --- surat ---------------------------------------------------------------- */

.surat-list { display: flex; flex-direction: column; gap: 12px; }

.surat {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand-300);
  border-radius: 14px;
  padding: 18px 20px;
}

.surat--accepted { border-left-color: var(--ok); }
.surat--rejected, .surat--expired { border-left-color: var(--off); opacity: .78; }

.surat__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.surat__head strong { font-size: 16px; color: var(--ink-900); }

.surat__status { font-size: 12px; font-weight: 800; padding: 4px 11px; border-radius: 999px; background: var(--brand-50); color: var(--brand-700); border: 1px solid var(--brand-200); }
.surat__status--accepted { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.surat__status--rejected, .surat__status--expired { background: #f5f5f5; color: var(--muted); border-color: #e5e5e5; }

.surat__cuplik { font-size: 15px; color: var(--body); line-height: 1.65; }
.surat__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: 13px; color: var(--muted); }

.surat-baca {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 30px 32px;
  margin-top: 22px;
}

.surat-baca p { font-family: var(--serif); font-size: 19px; line-height: 1.75; color: var(--ink-900); white-space: pre-line; overflow-wrap: anywhere; word-break: break-word; }

.surat-aksi { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.surat-aksi form { margin: 0; }

/* --- percakapan ----------------------------------------------------------- */

.obrol-list { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }

.obrol {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.obrol.is-tutup { opacity: .72; }
.obrol__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.obrol__head strong { font-size: 17px; color: var(--ink-900); }
.obrol__meta { font-size: 13.5px; color: var(--muted); margin-top: 4px; }

.tag-mutual {
  background: var(--brand-500);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 999px;
}

.chat-grid { display: grid; grid-template-columns: 1fr 320px; gap: 28px; align-items: start; }

.chat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.chat-head__nama { font-size: 26px; font-weight: 800; color: var(--ink-900); }
.chat-head__meta { font-size: 14px; color: var(--muted); margin-top: 4px; }

.chat-notice {
  background: var(--brand-50);
  border: 1px solid var(--brand-200);
  border-radius: 12px;
  padding: 13px 16px;
  font-size: 14px;
  color: var(--body);
  margin-bottom: 16px;
}

.chat-log {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  max-height: 460px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat-empty { color: var(--muted); text-align: center; padding: 30px 0; font-size: 14.5px; }

.bubble {
  max-width: 78%;
  align-self: flex-start;
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: 14px 14px 14px 4px;
  padding: 11px 15px;
}

.bubble--saya {
  align-self: flex-end;
  background: var(--brand-500);
  border-color: var(--brand-500);
  border-radius: 14px 14px 4px 14px;
}

.bubble p { font-size: 15px; line-height: 1.6; color: var(--ink-900); white-space: pre-line; overflow-wrap: anywhere; word-break: break-word; }
.bubble--saya p { color: #fff; }
.bubble span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 5px; }
.bubble--saya span { color: rgba(255, 255, 255, .8); }

.chat-form { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.chat-form .input { flex: 1; min-width: 200px; }

.chat-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 100px; }

.side-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 22px;
}

.side-card h2 { font-size: 17px; font-weight: 800; color: var(--ink-900); margin-bottom: 10px; }
.side-card p { font-size: 14px; color: var(--body); line-height: 1.65; margin-bottom: 12px; }
.side-card--danger { border-color: #fecdd3; }
.side-card--danger h2 { color: #9f1239; }

.side-ok { color: #047857; font-weight: 700; }
.side-wait { color: #92400e; background: #fffbeb; border: 1px solid #fcd34d; border-radius: 10px; padding: 12px 14px; }

.report-box summary { list-style: none; cursor: pointer; display: inline-flex; }
.report-box summary::-webkit-details-marker { display: none; }

@media (max-width: 940px) {
  .chat-grid { grid-template-columns: 1fr; }
  .chat-side { position: static; }
}

/* --- chat dua kolom (messenger) ------------------------------------------- */

.chat-app {
  display: grid;
  grid-template-columns: 340px 1fr;
  height: min(74vh, 680px);
  margin-top: 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.chat-app__sidebar { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--line); }
.chat-app__main { display: flex; flex-direction: column; min-width: 0; }

/* daftar */
.chatlist__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 18px 10px; }
.chatlist__head strong { font-size: 18px; color: var(--ink-900); }
.chatlist__count { color: var(--muted); font-weight: 600; }
.chatlist__unread { font-size: 12px; font-weight: 700; color: var(--brand-700); background: var(--brand-100); padding: 4px 10px; border-radius: 999px; }

.chatlist__tools { display: flex; gap: 8px; padding: 4px 14px 12px; border-bottom: 1px solid var(--line); }
.chatlist__search { position: relative; flex: 1; display: flex; align-items: center; }
.chatlist__search svg { position: absolute; left: 12px; width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.chatlist__search .input { padding: 10px 12px 10px 34px; font-size: 14px; width: 100%; }
.chatlist__tools > .input { width: 118px; padding: 10px 10px; font-size: 13.5px; }

.chatlist { list-style: none; margin: 0; padding: 6px; flex: 1; overflow-y: auto; }
.chatlist__item a {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: 12px; text-decoration: none;
}
.chatlist__item a:hover { background: var(--brand-50); }
.chatlist__item.is-active a { background: var(--brand-50); box-shadow: inset 3px 0 0 var(--brand-500); }
.chatlist__item.is-closed .chatlist__avatar { opacity: .6; }

.chatlist__avatar {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand-400), var(--brand-600));
  color: #fff; font-weight: 800; font-size: 16px;
}
.chatlist__body { flex: 1; min-width: 0; }
.chatlist__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.chatlist__top b { font-size: 14.5px; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chatlist__top em { font-style: normal; font-size: 11.5px; color: var(--muted); flex: none; }
.chatlist__snippet { display: block; font-size: 13px; color: var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chatlist__badge {
  flex: none; min-width: 20px; height: 20px; padding: 0 6px;
  display: grid; place-items: center;
  background: var(--brand-500); color: #fff; font-size: 11px; font-weight: 800; border-radius: 999px;
}
.chatlist__empty { padding: 26px 16px; text-align: center; color: var(--muted); font-size: 14px; }

/* welcome */
.chat-welcome { align-items: center; justify-content: center; text-align: center; padding: 30px; background: var(--page-tint); }
.chat-welcome__box { max-width: 340px; }
.chat-welcome__icon { width: 90px; height: 90px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 24px; background: #fff; box-shadow: var(--shadow-card); }
.chat-welcome__icon svg { width: 46px; height: 46px; fill: none; stroke: var(--brand-400); stroke-width: 1.6; }
.chat-welcome__title { font-family: var(--serif); font-size: 26px; font-weight: 600; color: var(--ink-900); }
.chat-welcome__sub { color: var(--muted); margin-top: 6px; }

/* thread */
.chat-thread { min-height: 0; }
.thread__head { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.thread__back { display: none; color: var(--ink-800); }
.thread__back svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
.thread__avatar { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--brand-400), var(--brand-600)); color: #fff; font-weight: 800; }
.thread__id { flex: 1; min-width: 0; }
.thread__id b { display: block; font-size: 16px; color: var(--ink-900); }
.thread__id em { font-style: normal; font-size: 12.5px; color: var(--muted); }
.thread__actions { flex: none; }
.btn--sm { padding: 8px 14px; font-size: 13px; }
.chip-wait { font-size: 12.5px; font-weight: 700; color: #92400e; background: #fffbeb; border: 1px solid #fcd34d; border-radius: 999px; padding: 6px 12px; }

.thread__notice { margin: 12px 20px 0; padding: 10px 14px; background: var(--brand-50); border-radius: 12px; font-size: 13px; color: var(--ink-700); }
.thread__mutual { display: flex; gap: 14px; margin: 12px 20px 0; padding: 14px; background: var(--brand-50); border: 1px solid var(--brand-200); border-radius: 14px; }
.thread__foto { width: 54px; height: 54px; border-radius: 12px; object-fit: cover; flex: none; }
.thread__mutual-data strong { display: block; color: var(--brand-700); font-size: 13.5px; margin-bottom: 6px; }
.thread__mutual-data dl { display: grid; gap: 3px; margin: 0; }
.thread__mutual-data dl > div { display: flex; gap: 8px; font-size: 13.5px; }
.thread__mutual-data dt { color: var(--muted); min-width: 74px; }
.thread__mutual-data dd { margin: 0; color: var(--ink-900); }

.chat-thread .chat-log {
  flex: 1; min-height: 0; overflow-y: auto;
  margin: 0; padding: 18px 20px;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--page-tint); border: none; border-radius: 0;
}
.chat-thread .chat-form { margin: 0; padding: 14px 20px; border-top: 1px solid var(--line); flex-wrap: nowrap; }
.chat-thread .chat-form .input { min-width: 0; }

.thread__report-btn {
  align-self: flex-start;
  margin: 0 20px 16px;
  background: none; border: none; cursor: pointer;
  font-size: 13px; font-weight: 700; color: #9f1239; padding: 6px 0;
}
.thread__report-btn:hover { color: #e11d48; text-decoration: underline; }
.btn--danger-solid { background: #e11d48; color: #fff; box-shadow: 0 6px 18px rgba(225,29,72,.26); }
.btn--danger-solid:hover { background: #be123c; color: #fff; }

@media (max-width: 760px) {
  .chat-app { grid-template-columns: 1fr; height: auto; min-height: 60vh; }
  .chat-app--thread .chat-app__sidebar { display: none; }
  .chat-app--list .chat-app__main { display: none; }
  .chat-app--thread { height: min(80vh, 720px); }
  .thread__back { display: inline-flex; }
  .chatlist { max-height: 62vh; }
}

/* --- panel admin: statistik & tabel --------------------------------------- */

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 34px 0 8px; }

.stat { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; }
.stat b { display: block; font-family: var(--serif); font-size: 34px; font-weight: 600; color: var(--brand-600); line-height: 1.1; }
.stat span { font-size: 13.5px; color: var(--body); }

/* Satu blok besar per bagian, supaya Pengguna dan Tim jelas terpisah */
.panel {
  margin-top: 34px;
  padding-top: 30px;
  border-top: 2px solid var(--brand-100);
}

.panel--staff { border-top-color: var(--ink-900); }

.panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.panel__title { font-size: 24px; font-weight: 800; color: var(--ink-900); }
.panel--staff .panel__title::before { content: '🛡 '; }
.panel__sub { font-size: 14.5px; color: var(--body); margin-top: 6px; max-width: 560px; }
.panel__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.panel__count { color: var(--muted); font-size: 14px; margin-bottom: 14px; }

.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: #fff; }

table.users { width: 100%; border-collapse: collapse; min-width: 860px; }

table.users th,
table.users td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14.5px;
  vertical-align: middle;
}

table.users th {
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  background: var(--brand-50);
}

.panel--staff table.users th { background: #f1f5f9; }
table.users tr:last-child td { border-bottom: 0; }
table.users tbody tr:hover td { background: var(--brand-50); }
.panel--staff table.users tbody tr:hover td { background: #f8fafc; }

.td-sub { color: var(--muted); font-size: 13px; }
.tbl-empty { text-align: center; color: var(--muted); padding: 36px; }

.tag { display: inline-block; font-size: 11.5px; font-weight: 800; padding: 4px 10px; border-radius: 999px; }
.tag--premium { background: var(--brand-500); color: #fff; }
.tag--regular { background: var(--brand-50); color: var(--brand-700); border: 1px solid var(--brand-200); }
.tag--admin { background: var(--ink-800); color: #fff; }
.tag--super { background: var(--brand-700); color: #fff; }
.tag--suspend { background: #fff1f2; color: #9f1239; border: 1px solid #fecdd3; }
.tag--you { background: var(--brand-100); color: var(--brand-700); margin-left: 6px; }

.row-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.row-actions form { margin: 0; }

.mini {
  display: inline-flex;
  align-items: center;
  font-size: 12.5px;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--brand-300);
  color: var(--brand-600);
  background: #fff;
  cursor: pointer;
  white-space: nowrap;
}

.mini:hover { background: var(--brand-50); color: var(--brand-700); }
.mini--danger { border-color: #fecdd3; color: #9f1239; }
.mini--danger:hover { background: #fff1f2; color: #9f1239; }

/* Kolom perpanjang paket dipisah visual dari kolom CRUD */
.col-premium { background: var(--brand-50); border-left: 1px solid var(--brand-100); border-right: 1px solid var(--brand-100); }
table.users tbody tr:hover td.col-premium { background: var(--brand-100); }
.mini--plan { border-color: var(--ok); color: #047857; }
.mini--plan:hover { background: #ecfdf5; color: #047857; }
.mini--warn { border-color: #fcd34d; color: #92400e; }
.mini--warn:hover { background: #fffbeb; color: #92400e; }
.mini__badge { margin-left: 6px; background: #92400e; color: #fff; border-radius: 999px; padding: 1px 6px; font-size: 10.5px; }

/* Masa aktif */
.masa { font-weight: 800; color: var(--ink-900); font-size: 14px; }
.masa--kritis { color: #b45309; }
.tag--warn { background: #fffbeb; color: #92400e; border: 1px solid #fcd34d; margin-top: 4px; }

/* --- peringatan bertahap -------------------------------------------------- */

.stages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 26px 0 20px; }

.stage {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 16px;
  text-align: center;
}

.stage b { display: block; font-family: var(--serif); font-size: 28px; font-weight: 600; color: var(--muted); }
.stage span { display: block; font-size: 13.5px; color: var(--body); margin-top: 4px; }
.stage em { display: block; font-size: 11.5px; font-weight: 800; font-style: normal; margin-top: 8px; text-transform: uppercase; letter-spacing: .06em; }

.stage.is-done { background: #fffbeb; border-color: #fcd34d; }
.stage.is-done b, .stage.is-done em { color: #92400e; }
.stage--warn2.is-done { background: #fff7ed; border-color: #fdba74; }
.stage--warn2.is-done b, .stage--warn2.is-done em { color: #9a3412; }
.stage--danger.is-done { background: #fff1f2; border-color: #fda4af; }
.stage--danger.is-done b, .stage--danger.is-done em { color: #9f1239; }

.statusbox {
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 14.5px;
  color: #065f46;
}

.statusbox--warn { background: #fff7ed; border-color: #fdba74; color: #9a3412; }
.statusbox--danger { background: #fff1f2; border-color: #fda4af; color: #9f1239; }

.warn-list { display: flex; flex-direction: column; gap: 12px; }

.warn {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid #fcd34d;
  border-radius: 14px;
  padding: 18px 20px;
}

.warn__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }

.warn__level { font-size: 12px; font-weight: 800; padding: 4px 11px; border-radius: 999px; background: #fffbeb; color: #92400e; border: 1px solid #fcd34d; }
.warn__level--2 { background: #fff7ed; color: #9a3412; border-color: #fdba74; }
.warn__level--3 { background: #fff1f2; color: #9f1239; border-color: #fda4af; }

.warn__action { font-size: 13.5px; font-weight: 700; color: var(--ink-900); }
.warn__time { font-size: 12.5px; color: var(--muted); margin-left: auto; }

.warn__reason {
  font-size: 15px;
  color: var(--body);
  line-height: 1.65;
  background: var(--brand-50);
  border-radius: 10px;
  padding: 12px 14px;
  white-space: pre-line;
}

.warn__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.warn__foot form { margin: 0; }

.role__locked { font-size: 13.5px; color: var(--muted); align-self: center; }

textarea.input { resize: vertical; min-height: 110px; font-family: inherit; line-height: 1.6; }

/* --- kelola peran --------------------------------------------------------- */

.role-bar { display: flex; gap: 12px; margin: 28px 0 8px; flex-wrap: wrap; }
.role-bar__form { display: flex; gap: 12px; flex: 1; min-width: 280px; }
.role-bar__form .input { flex: 1; }

.role {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 24px;
  margin-top: 18px;
}

.role__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.role__name { font-size: 17px; font-weight: 800; color: var(--ink-900); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.role__meta { font-size: 13px; font-weight: 400; color: var(--muted); }
.role__meta code { background: var(--brand-50); padding: 2px 7px; border-radius: 6px; font-size: 12.5px; }
.role__toggle { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--body); }

.role__note {
  font-size: 13.5px;
  color: var(--body);
  background: var(--brand-50);
  border-left: 3px solid var(--brand-400);
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 14px;
}

.role__foot { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.btn--danger { border-color: #fecdd3; color: #9f1239; }
.btn--danger:hover { background: #fff1f2; border-color: #fda4af; color: #9f1239; }
.hidden-form { display: none; }

/* Sakelar aktif/nonaktif */
.switch { position: relative; display: inline-block; width: 46px; height: 26px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }

.switch i {
  position: absolute; inset: 0;
  background: var(--off);
  border-radius: 999px;
  transition: background .18s ease;
}

.switch i::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: transform .18s ease;
}

.switch--on i { background: var(--brand-500); }
.switch--on i::after { transform: translateX(20px); }
.switch--locked { cursor: not-allowed; opacity: .75; }

/* Daftar modul & aksi */
.modules { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }

.module {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  transition: border-color .15s ease, background .15s ease;
}

.module.is-on { border-color: var(--brand-200); background: var(--brand-50); }

.module__head { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 800; color: var(--ink-900); cursor: pointer; }

.module__actions { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; padding-left: 28px; }
.module:not(.is-on) .module__actions { opacity: .45; }

.module__action { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--body); cursor: pointer; }

.module input[type="checkbox"],
.filters input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--brand-500);
  cursor: pointer;
  flex: none;
}

/* --- footer --------------------------------------------------------------- */

.site-foot {
  background: var(--page-tint);
  border-top: 1px solid var(--line);
  margin-top: 60px;
  color: var(--body);
}

.site-foot__top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
  padding-block: 64px 40px;
}

.site-foot .wordmark { font-size: 24px; color: var(--brand-600); margin-bottom: 16px; }
.site-foot__about { font-size: 15px; line-height: 1.7; max-width: 330px; margin-bottom: 24px; }
.site-foot__contact { display: flex; flex-direction: column; gap: 14px; }
.site-foot__contact li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; }

.site-foot__contact svg {
  flex: none;
  width: 20px; height: 20px;
  stroke: var(--brand-500);
  fill: none; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  margin-top: 2px;
}

.site-foot__contact a { color: var(--body); }
.site-foot__contact a:hover { color: var(--brand-600); }

.site-foot__col h2 { font-size: 17px; font-weight: 800; color: var(--ink-900); margin-bottom: 20px; }
.site-foot__col li + li { margin-top: 13px; }
.site-foot__col a { color: var(--body); font-size: 15px; }
.site-foot__col a:hover { color: var(--brand-600); }

.site-foot__social-title { font-size: 17px; font-weight: 800; color: var(--ink-900); margin: 34px 0 16px; }

.socials { display: flex; gap: 18px; }

.socials a {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-800);
  transition: color .15s ease, transform .15s ease;
}

.socials a:hover { color: var(--brand-500); transform: translateY(-2px); }
.socials svg { width: 22px; height: 22px; fill: currentColor; }

.site-foot__bottom {
  border-top: 1px solid var(--line);
  padding-block: 26px;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* --- responsive ----------------------------------------------------------- */

/* Nav dilipat mulai 1060px. Diukur langsung di browser: wordmark (258) +
   empat tautan (337) + toggle & tombol (319) + gap/padding = ~1033px.
   Ambang diberi sedikit kelonggaran di atas angka itu. */
@media (max-width: 1060px) {
  .topbar__inner { position: relative; justify-content: space-between; }
  .topbar__links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--brand-100);
    border-bottom: 1px solid var(--brand-200);
    padding: 8px 0 16px;
    box-shadow: 0 14px 28px rgba(22, 48, 79, .08);
  }
  .topbar__links.is-open { display: flex; }
  .topbar__links a { padding: 13px 32px; width: 100%; }
  .nav-burger { display: block; order: 3; }
  .topbar__actions { order: 2; }

  /* Bahasa & Masuk/Daftar pindah ke dalam menu burger. */
  .topbar__links-foot {
    display: flex; flex-direction: column; gap: 10px;
    padding: 14px 32px 6px; margin-top: 8px;
    border-top: 1px solid var(--brand-200);
  }
  .topbar__links-foot .lang { align-self: flex-start; }
  /* ID/EN: tamu tetap di bar atas; hanya disembunyikan (pindah ke burger)
     saat sudah login. */
  .topbar--auth .topbar__actions > .lang { display: none; }
  .topbar__actions > .btn { display: none; }   /* tombol Masuk/Daftar versi atas */
}

@media (max-width: 1100px) {
  .plans { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  /* Kartu ke-3 melebar penuh di baris kedua supaya tidak menggantung */
  .plans > :last-child { grid-column: 1 / -1; max-width: 460px; margin-inline: auto; width: 100%; }
}

@media (max-width: 1040px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .prose-grid { grid-template-columns: repeat(2, 1fr); }
  .doc-grid { grid-template-columns: repeat(2, 1fr); }
  .site-foot__top { grid-template-columns: 1fr 1fr; gap: 36px; }
  .safety { padding: 36px 30px; }
  .safety__title { font-size: 28px; }
}

@media (max-width: 900px) {
  .plans { grid-template-columns: minmax(0, 440px); gap: 40px; justify-content: center; }
  .plans > :last-child { grid-column: auto; max-width: none; }
  .safety__steps { grid-template-columns: 1fr; gap: 12px; }
}

@media (max-width: 640px) {
  :root { --gutter: 18px; }
  .section { padding-block: 48px; }
  .feature-grid, .prose-grid, .doc-grid { grid-template-columns: 1fr; }

  /* --- rapikan tipografi di layar kecil --- */
  .display { font-size: clamp(27px, 7.4vw, 36px); line-height: 1.16; }
  .section-sub { font-size: 15.5px; margin-top: 14px; }
  .pill { font-size: 11px; padding: 8px 16px; margin-bottom: 18px; }

  .card, .feature { padding: 22px 20px; }
  .feature-grid, .prose-grid, .doc-grid { gap: 14px; margin-top: 30px; }
  .feature__icon { width: 46px; height: 46px; border-radius: 14px; }
  .feature__icon svg { width: 23px; height: 23px; }
  .feature__head { margin-bottom: 14px; }
  .feature__title { font-size: 17px; }

  /* Tombol lebar penuh supaya mudah ditekan jempol */
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
  .btn--lg { padding: 15px 24px; font-size: 15px; }

  /* Paket */
  .plans { grid-template-columns: 1fr; gap: 34px; margin-top: 42px; }
  .plan { padding: 30px 22px 26px; border-radius: 20px; }
  .plan__price { font-size: 44px; }
  .plan__feats li { font-size: 14.5px; padding: 12px 2px; }

  /* Keamanan */
  .safety { padding: 30px 22px; border-radius: 20px; margin-top: 40px; }
  .safety__head { flex-direction: column; gap: 14px; }
  .safety__title { font-size: 24px; }
  .safety__body { font-size: 15px; }
  .safety__steps { margin-top: 24px; }
  .safety__step { padding: 18px 16px; }
  .safety__step b { font-size: 26px; }
  .callout { flex-direction: column; gap: 10px; padding: 20px; }
  .auth-card { padding: 40px 22px 36px; border-radius: 22px; }
  .auth-wrap { padding: 32px 16px 56px; }
  .auth-body--hero { background-size: 100% 400px; }
  .hero { padding-block: 64px 90px; }

  .topbar__inner { flex-wrap: nowrap; gap: 10px; padding-block: 12px; }
  .wordmark--nav { font-size: 18px; letter-spacing: .1em; }
  .topbar__actions { gap: 6px; flex-wrap: nowrap; }
  .topbar__actions .btn { padding: 9px 14px; font-size: 13.5px; }
  .lang__link { padding: 5px 10px; font-size: 12px; }
  .nav-burger { font-size: 21px; padding: 4px 6px; }
  /* Nama pengguna disembunyikan agar ikon muat satu baris; avatar tetap. */
  .usermenu__nama { display: none; }
  .usermenu__btn { padding: 5px 8px 5px 5px; }

  .site-foot__top { grid-template-columns: 1fr; gap: 32px; padding-block: 44px 30px; }
  .site-foot__bottom { justify-content: center; text-align: center; }

  /* Panel admin di layar kecil */
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .stat { padding: 16px 18px; }
  .stat b { font-size: 28px; }
  .panel__head { flex-direction: column; gap: 12px; }
  .panel__actions { width: 100%; }
  .panel__actions .btn { flex: 1; }
  .filters { padding: 16px 18px; }
  .filters__field { min-width: 100%; }
  .filters__actions { width: 100%; }
  .filters__actions .btn { flex: 1; }
  .role-bar__form { flex-direction: column; }
  .module__actions { padding-left: 0; gap: 12px 16px; }
  /* Panel notifikasi & chat: jadikan panel lebar-layar agar tidak terpotong. */
  .bell__panel {
    position: fixed;
    top: 72px;
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
  }
  .qa__q { padding: 18px; font-size: 16px; }
  .qa__a { padding: 0 18px 20px; }

  /* Timeline: garis dan marker dirapatkan agar kartu tetap lega */
  .timeline { padding-left: 46px; margin-top: 34px; }
  .timeline::before { left: 17px; }
  .tl__marker { left: -46px; top: 18px; width: 36px; height: 36px; font-size: 17px; border-width: 1.5px; }
  .tl__card { padding: 20px 18px; border-radius: 16px; }
  .tl__title { font-size: 18px; }
  .tl__body { font-size: 15px; }
  .reveal { grid-template-columns: 1fr; gap: 16px; padding: 16px 18px; }
  .minipair { grid-template-columns: 1fr; gap: 12px; }
  .safety__points { grid-template-columns: 1fr; gap: 10px; }
  .howto-mini { grid-template-columns: 1fr; gap: 14px; margin-top: 28px; }
}

@media (max-width: 380px) {
  .wordmark--nav { font-size: 16px; }
  .bell__btn { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
  .btn:hover, .feature:hover { transform: none; }
}

/* --- paginasi ------------------------------------------------------------- */

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink-800);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.pagination__link:hover {
  background: var(--brand-50);
  border-color: var(--brand-300);
  color: var(--brand-600);
}

.pagination__link.is-active {
  background: var(--brand-500);
  border-color: var(--brand-500);
  color: #fff;
  cursor: default;
}

.pagination__link.is-disabled {
  color: var(--off);
  background: #fff;
  cursor: not-allowed;
}

.pagination__link--nav { font-size: 20px; font-weight: 700; }

.pagination__dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 38px;
  color: var(--muted);
}

/* --- banner keunggulan ---------------------------------------------------- */

.hero-banner {
  background: linear-gradient(165deg, var(--brand-200) 0%, var(--brand-100) 48%, var(--brand-50) 100%);
  overflow: hidden;
  padding-block: 72px 84px;
}

.hero-banner__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 56px;
  align-items: center;
}

.hero-banner__copy { text-align: left; }

.pill--light { background: #fff; color: var(--brand-700); box-shadow: var(--shadow-card); }

.hero-banner__title { text-align: left; margin: 18px 0 0; }
.hl { color: var(--brand-600); }

.hero-banner__body {
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink-700);
  margin-top: 20px;
  max-width: 48ch;
}

.hero-banner__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.hero-banner__trust { margin-top: 22px; font-size: 13.5px; font-weight: 600; color: var(--body); }

.hero-banner__art { display: flex; justify-content: center; }

.mockup {
  width: 100%;
  max-width: 440px;
  margin: 0;
  background: #fff;
  border-radius: 20px;
  box-shadow: var(--shadow-float);
  overflow: hidden;
}

.mockup__bar {
  display: flex;
  gap: 8px;
  padding: 14px 16px;
  background: var(--brand-50);
  border-bottom: 1px solid var(--line);
}
.mockup__bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--brand-300); }

.mockup__body { padding: 22px; display: flex; flex-direction: column; gap: 14px; }

.mockup__card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: var(--brand-50);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.mockup__avatar {
  width: 46px; height: 46px; flex: none;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-300), var(--brand-500));
}
.mockup__lines { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.mockup__lines b { font-size: 15px; color: var(--ink-900); }
.mockup__lines em { font-style: normal; font-size: 12.5px; color: var(--muted); }
.mockup__check {
  width: 26px; height: 26px; flex: none;
  border-radius: 50%;
  background: var(--ok); color: #fff;
  display: grid; place-items: center;
  font-size: 14px; font-weight: 700;
}
.mockup__row { display: flex; gap: 10px; }
.mockup__row span { height: 12px; flex: 1; border-radius: 6px; background: var(--line); }
.mockup__row span:last-child { flex: .6; }
.mockup__chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.mockup__chips span {
  font-size: 12px; font-weight: 700;
  color: var(--brand-700); background: var(--brand-100);
  padding: 6px 12px; border-radius: 999px;
}

/* --- kartu paket ---------------------------------------------------------- */

.pcards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 44px;
  align-items: start;
}

.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px;
  box-shadow: var(--shadow-card);
}

.pcard--featured { border-color: var(--brand-400); box-shadow: var(--shadow-lift); }

.pcard__ribbon {
  position: absolute; top: 0; right: 0;
  background: var(--brand-500); color: #fff;
  font-size: 12px; font-weight: 800; letter-spacing: .03em;
  padding: 7px 16px;
  border-radius: 0 var(--radius) 0 14px;
}

.pcard__head { margin-bottom: 16px; }
.pcard__name {
  font-family: var(--serif);
  font-size: 23px; font-weight: 600;
  color: var(--ink-900); line-height: 1.25; margin: 0;
}

.pcard__level {
  display: flex; align-items: center; gap: 10px;
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--brand-50);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 13.5px; font-weight: 700; color: var(--ink-800);
}
.pcard__level svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--brand-500); stroke-width: 1.7; }

.pcard__feats { list-style: none; margin: 4px 0 0; padding: 0; flex: 1; }
.pcard__feats li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 14.5px; padding: 11px 2px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-800);
}
.pcard__feats li:last-child { border-bottom: 0; }
.pcard__feats li::before { flex: none; font-weight: 700; line-height: 1.5; }
.pcard__feats li.yes::before { content: '✓'; color: var(--ok); }
.pcard__feats li.no::before { content: '✕'; color: var(--off); }
.pcard__feats li.no { color: var(--muted); }

.pcard__foot { margin-top: 22px; }
.pcard__price {
  display: flex; flex-direction: column; gap: 2px;
  padding: 16px;
  margin-bottom: 16px;
  background: var(--brand-50);
  border-radius: 14px;
}
.pcard__discount {
  align-self: flex-start;
  margin-bottom: 6px;
  background: #e11d48; color: #fff;
  font-size: 12px; font-weight: 800;
  padding: 4px 10px; border-radius: 8px;
}
.pcard__was { color: var(--muted); font-size: 14px; }
.pcard__now {
  font-family: var(--serif);
  font-size: 32px; font-weight: 600;
  color: var(--ink-900); line-height: 1.1;
}
.pcard__per { font-size: 12.5px; color: var(--body); margin-top: 4px; }
.pcard__note { font-size: 12px; color: var(--muted); text-align: center; margin: 10px 0 0; }

/* --- form admin: grid & checkbox ------------------------------------------ */

.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
.field-grid--3 { grid-template-columns: repeat(3, 1fr); }
.check { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--ink-800); cursor: pointer; }
.check input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--brand-500); }
.form-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 8px; }

@media (max-width: 900px) {
  .hero-banner__grid { grid-template-columns: 1fr; gap: 36px; }
  .pcards { grid-template-columns: 1fr; }
  .field-grid, .field-grid--3 { grid-template-columns: 1fr; }
}

/* --- modal <dialog> (khusus elemen <dialog>, jangan bentrok dg .modal overlay div) --- */

dialog.modal {
  width: min(560px, calc(100vw - 32px));
  max-width: min(560px, calc(100vw - 32px));
  padding: 0;
  border: none;
  border-radius: 22px;
  box-shadow: var(--shadow-float);
  background: var(--card);
  color: var(--ink-900);
}
dialog.modal::backdrop { background: rgba(22, 48, 79, .45); }

.modal__card { padding: 26px 32px 34px; text-align: left; }

.modal__close { position: absolute; top: 12px; right: 14px; margin: 0; z-index: 2; }
.modal__eyebrow { display: block; font-size: 13px; font-weight: 700; color: var(--muted); }
.modal__x {
  border: none; background: none; cursor: pointer;
  font-size: 28px; line-height: 1; color: var(--muted);
  padding: 4px 8px; border-radius: 8px;
}
.modal__x:hover { color: var(--ink-900); background: var(--brand-50); }

.modal__title { font-family: var(--serif); font-size: 30px; font-weight: 600; margin: 6px 0 10px; }
.modal__lede { font-size: 14.5px; color: var(--body); margin: 0 0 22px; }

.modal .field { margin-bottom: 14px; }
.modal__link { display: inline-block; margin: 4px 0 6px; font-size: 14px; font-weight: 700; color: var(--brand-600); }
.modal__link:hover { color: var(--brand-700); }
.modal__check { margin: 12px 0 22px; align-items: flex-start; }

@media (max-width: 480px) {
  .modal__card { padding: 24px 20px 28px; }
  .modal__title { font-size: 25px; }
}

/* --- modal konfirmasi ----------------------------------------------------- */

dialog.confirm { width: min(440px, calc(100vw - 32px)); max-width: min(440px, calc(100vw - 32px)); }
.confirm__card { text-align: center; padding: 30px 30px 26px; }
.confirm__icon {
  width: 56px; height: 56px; margin: 0 auto 16px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brand-50); color: var(--brand-600);
}
.confirm__icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.confirm.is-danger .confirm__icon { background: #fff1f2; color: #e11d48; }
.confirm__title { font-size: 22px; margin: 0 0 8px; }
.confirm__msg { font-size: 15px; color: var(--body); line-height: 1.6; margin: 0 0 22px; overflow-wrap: anywhere; }
.confirm__actions { display: flex; gap: 10px; }
.confirm__actions .btn { flex: 1; }
.confirm.is-danger .confirm__actions .btn--primary { background: #e11d48; box-shadow: 0 6px 18px rgba(225,29,72,.26); }
.confirm.is-danger .confirm__actions .btn--primary:hover { background: #be123c; }

/* --- checkout /upgrade ---------------------------------------------------- */

.checkout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 24px;
  align-items: start;
  margin-top: 24px;
}
.checkout__main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.checkout__side { position: sticky; top: 96px; }

.co-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 24px 26px;
  box-shadow: var(--shadow-card);
}
.co-card__title { font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--ink-900); margin: 0 0 16px; }

/* kartu radio paket */
.paket-radio-list { display: flex; flex-direction: column; gap: 14px; }
.paket-radio {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 14px;
  padding: 18px 18px 18px 16px;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.paket-radio:hover { border-color: var(--brand-300); }
.paket-radio.is-on { border-color: var(--brand-500); background: var(--brand-50); }
.paket-radio input { position: absolute; opacity: 0; width: 0; height: 0; }

.paket-radio__dot {
  width: 20px; height: 20px; margin-top: 3px;
  border: 2px solid var(--field); border-radius: 50%;
  position: relative; flex: none;
}
.paket-radio.is-on .paket-radio__dot { border-color: var(--brand-500); }
.paket-radio.is-on .paket-radio__dot::after {
  content: ''; position: absolute; inset: 3px;
  background: var(--brand-500); border-radius: 50%;
}

.paket-radio__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.paket-radio__name { font-weight: 800; font-size: 16px; color: var(--ink-900); }
.paket-radio__level { font-size: 12.5px; color: var(--muted); }
.paket-radio__feats { margin: 8px 0 4px; }
.paket-radio__feats li { font-size: 13.5px; padding: 6px 2px; }
.paket-radio__price { margin-top: 6px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.paket-radio__price s { color: var(--muted); font-size: 14px; }
.paket-radio__price b { font-size: 20px; color: var(--brand-600); font-weight: 800; }
.paket-radio__price em { font-style: normal; font-size: 12.5px; color: var(--body); }

/* ringkasan (panel kanan) */
.ringkasan {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px 26px;
  box-shadow: var(--shadow-card);
}
.ringkasan__title { font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--ink-900); margin: 0 0 18px; }
.ringkasan__label { display: block; font-size: 13px; font-weight: 700; color: var(--ink-800); margin: 16px 0 7px; }
.ringkasan .input { padding: 13px 14px; font-size: 15px; }

.diskon-box { display: flex; gap: 8px; }
.diskon-box .input { flex: 1; text-transform: uppercase; }
.diskon-box .btn { padding: 0 20px; white-space: nowrap; }

.diskon-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--brand-50); border: 1px solid var(--brand-200);
  border-radius: 12px; padding: 12px 14px; font-size: 14px; color: var(--ink-800);
}
.diskon-chip__x { border: none; background: none; cursor: pointer; font-size: 20px; line-height: 1; color: var(--muted); }
.diskon-chip__x:hover { color: var(--brand-600); }

.promo-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; margin-top: 12px;
  padding: 12px 14px; border: none; border-radius: 12px; cursor: pointer;
  background: linear-gradient(90deg, #7c3aed, var(--brand-500));
  color: #fff; font-size: 13.5px; font-weight: 700; text-align: left;
}
.promo-banner:hover { filter: brightness(1.05); }
.promo-banner__timer {
  flex: none; background: rgba(255,255,255,.22); border-radius: 999px;
  padding: 4px 10px; font-variant-numeric: tabular-nums; font-size: 12.5px;
}

.ringkasan__rows { margin: 20px 0 18px; border-top: 1px solid var(--line); padding-top: 16px; }
.ringkasan__row { display: flex; justify-content: space-between; align-items: baseline; font-size: 14.5px; color: var(--body); padding: 6px 0; }
.ringkasan__row b { color: var(--ink-900); font-weight: 700; }
.ringkasan__row.is-hidden { display: none; }
.ringkasan__row--total { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.ringkasan__row--total span { font-size: 16px; font-weight: 800; color: var(--ink-900); }
.ringkasan__row--total b { font-family: var(--serif); font-size: 28px; font-weight: 600; color: var(--brand-600); }

@media (max-width: 900px) {
  .checkout { grid-template-columns: 1fr; }
  .checkout__side { position: static; }
}

/* --- cari kandidat -------------------------------------------------------- */

.cari-box {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  box-shadow: var(--shadow-card);
  margin: 24px 0 10px;
}
.cari-box__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.cari-box .input { padding: 12px 14px; font-size: 14.5px; }
.cari-box__usia { display: flex; gap: 10px; }
.cari-box__usia .input { width: 100%; }
.cari-box__aksi { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

.cari-box--locked {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--brand-50); border-color: var(--brand-200); flex-wrap: wrap;
}

@media (max-width: 760px) {
  .cari-box__grid { grid-template-columns: 1fr; }
}