/* =====================================================================
   HALAMAN /about-us: untuk penyelenggara + kalkulator biaya (3 Okt 2026)
   ===================================================================== */
.ab { --ink: #0d1b2e; --soft: #4d5c74; --muted: #8894a8; --line: #e4e9f0; --brand: #1e5bd6;
  background: #f5f7fb; font-family: "Plus Jakarta Sans", sans-serif; color: var(--ink); }
.ab *, .ab *::before, .ab *::after { box-sizing: border-box; }
.ab ul, .ab ol, .ab li { padding-right: 0; }
.ab h1, .ab h2, .ab h3 { white-space: normal; overflow: visible; color: var(--ink); }
.ab svg { width: 18px; height: 18px; flex: none; }

.ab-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 22px; border-radius: 14px; border: 0; font-family: inherit; font-size: 15px; font-weight: 800; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s; }
.ab-btn--light { background: #fff; color: #0b3d91 !important; }
.ab-btn--light:hover { background: #e8f0fe; }
.ab-btn--line { background: transparent; color: #fff !important; border: 1.5px solid rgba(255, 255, 255, .5); }
.ab-btn--line:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }
.ab-btn--primary { background: #0b7a3e; color: #fff !important; }
.ab-btn--primary:hover { background: #075c2e; }
.ab-btn--block { width: 100%; }
.ab-ctas { display: flex; flex-wrap: wrap; gap: 10px; }

/* hero */
.ab-hero { background: #0b3d91; color: #fff; padding: 56px 0 64px; position: relative; overflow: hidden; }
.ab-hero::before { content: ""; position: absolute; left: -140px; bottom: -220px; width: 520px; height: 520px; border-radius: 50%; background: rgba(255, 255, 255, .05); }
.ab-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 48px; align-items: center; position: relative; }
.ab-eyebrow { display: inline-block; font-size: 12.5px; font-weight: 800; letter-spacing: .1em; color: #9fbcf5; }
.ab-hero h1 { margin: 12px 0 14px; font-size: 44px; line-height: 1.12; font-weight: 800; letter-spacing: -.03em; color: #fff; }
.ab-hero p { margin: 0; font-size: 16.5px; line-height: 1.65; color: #dbe6ff; max-width: 540px; }
.ab-checks { list-style: none; margin: 22px 0 28px; display: grid; gap: 10px; }
.ab-checks li { display: flex; gap: 10px; align-items: center; font-size: 15px; font-weight: 700; color: #fff; }
.ab-checks svg { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: rgba(255, 255, 255, .16); }

/* kalkulator */
.ab-calc { background: #fff; color: var(--ink); border-radius: 22px; padding: 24px; box-shadow: 0 30px 60px rgba(4, 20, 56, .35); }
.ab-calc__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.ab-calc__head h2 { margin: 0; font-size: 19px; font-weight: 800; }
.ab-calc__rate { padding: 5px 10px; border-radius: 999px; background: #e8f0fe; color: #0f3a8f; font-size: 12px; font-weight: 800; white-space: nowrap; }
.ab-calc__field { display: block; margin: 0 0 10px; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: 14px; background: #f5f7fb; cursor: text; transition: border-color .15s, background .15s; }
.ab-calc__field:focus-within { border-color: var(--brand); background: #fff; }
.ab-calc__field > span:first-child { display: block; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.ab-calc__money { display: flex; align-items: baseline; gap: 6px; }
.ab-calc__money b { font-size: 16px; font-weight: 800; color: var(--soft); }
.ab-calc__money input { flex: 1; min-width: 0; width: 100%; height: 38px; margin: 0; padding: 0; border: 0; background: transparent; outline: none; box-shadow: none; font-family: inherit; font-size: 26px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.ab-calc__rows { margin: 14px 0 0; }
.ab-calc__rows > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.ab-calc__rows dt { margin: 0; color: var(--soft); font-weight: 600; }
.ab-calc__rows dd { margin: 0; font-weight: 800; color: var(--ink); white-space: nowrap; }
.ab-calc__rows .is-total dt, .ab-calc__rows .is-total dd { color: #0b7a3e; }
.ab-calc__sum { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 14px 0; padding: 14px 16px; border-radius: 14px; background: #0d1b2e; color: #fff; }
.ab-calc__sum span { font-size: 13.5px; font-weight: 700; color: #c9d8f5; }
.ab-calc__sum b { font-size: 21px; font-weight: 800; white-space: nowrap; }
.ab-calc__notes { list-style: none; margin: 0 0 16px; display: grid; gap: 6px; }
.ab-calc__notes li { position: relative; padding-left: 14px; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.ab-calc__notes li::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: #c9d3e3; }

/* seksi */
.ab-sec { padding: 64px 0; }
.ab-sec--white { background: #fff; }
.ab-sec--last { padding-bottom: 80px; }
.ab-head { max-width: 640px; margin: 0 auto 32px; text-align: center; }
.ab-head h2 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }
.ab-head p { margin: 8px 0 0; font-size: 15.5px; color: var(--soft); line-height: 1.6; }

.ab-steps { list-style: none; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: none; }
.ab-steps li { position: relative; padding: 22px; border-radius: 18px; background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.ab-steps__n { width: 38px; height: 38px; margin-bottom: 8px; border-radius: 12px; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; }
.ab-steps b { font-size: 16px; line-height: 1.35; }
.ab-steps li > span:last-child { font-size: 14px; line-height: 1.6; color: var(--soft); }

.ab-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ab-feat { padding: 22px; border-radius: 18px; background: #f5f7fb; border: 1px solid #eef1f6; }
.ab-feat__ico { width: 46px; height: 46px; border-radius: 14px; background: #e8f0fe; color: var(--brand); display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 14px; }
.ab-feat h3 { margin: 0 0 6px; font-size: 16.5px; font-weight: 800; line-height: 1.35; }
.ab-feat p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--soft); }

.ab-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.ab-logo { display: flex; align-items: center; justify-content: center; width: 170px; height: 90px; padding: 16px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.ab-logo img { max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(1); opacity: .8; transition: filter .2s, opacity .2s; }
.ab-logo:hover img { filter: none; opacity: 1; }

.ab-cta { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 40px; border-radius: 24px; background: #1e5bd6; color: #fff; }
.ab-cta h2 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.ab-cta p { margin: 8px 0 0; font-size: 15px; color: #dbe6ff; }
.ab-cta .ab-ctas { flex: none; }

@media (max-width: 1199.98px) {
  .ab-hero__grid { grid-template-columns: minmax(0, 1fr) 400px; gap: 32px; }
  .ab-hero h1 { font-size: 38px; }
  .ab-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
  .ab-hero { padding: 40px 0 48px; }
  .ab-hero__grid { grid-template-columns: 1fr; }
  .ab-calc { max-width: 520px; }
  .ab-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-cta { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 575.98px) {
  .ab-hero h1 { font-size: 30px; }
  .ab-hero p { font-size: 15px; }
  .ab-ctas { width: 100%; }
  .ab-ctas .ab-btn { flex: 1 1 100%; }
  .ab-calc { padding: 18px; border-radius: 20px; }
  .ab-sec { padding: 44px 0; }
  .ab-head h2 { font-size: 23px; }
  .ab-steps, .ab-feats { grid-template-columns: 1fr; }
  .ab-logo { width: calc(50% - 7px); height: 76px; }
  .ab-cta { padding: 26px 20px; border-radius: 20px; }
  .ab-cta h2 { font-size: 22px; }
}

/* =====================================================================
   /about-us (profil) & /biaya dipisah (4 Okt 2026)
   ===================================================================== */
.ab-btn--blue { background: var(--brand); color: #fff !important; }
.ab-btn--blue:hover { background: #0f3a8f; }
.ab-center { display: flex; justify-content: center; margin-top: 28px; }
.ab-kicker { display: inline-block; margin-bottom: 8px; font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); }
.ab-textlink { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-weight: 800; font-size: 14.5px; color: var(--brand) !important; text-decoration: none; }
.ab-textlink:hover { text-decoration: underline; }

/* hero tentang + foto pendiri */
.ab-hero__grid--about { grid-template-columns: minmax(0, 1fr) 380px; align-items: end; }
.ab-hero__p2 { margin-top: 12px !important; }
.ab-hero__grid--about .ab-ctas { margin-top: 26px; }
.ab-founder { position: relative; align-self: end; margin-bottom: -64px; text-align: center; }
.ab-founder img { display: block; width: 100%; max-width: 340px; height: auto; margin: 0 auto; }
.ab-founder__tag { position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%); display: flex; flex-direction: column; padding: 10px 16px; border-radius: 14px; background: #fff; color: var(--soft); font-size: 12.5px; font-weight: 600; white-space: nowrap; box-shadow: 0 14px 30px rgba(4, 20, 56, .25); }
.ab-founder__tag b { font-size: 15px; color: var(--ink); }

/* galeri */
.ab-gallery-wrap { background: #0b3d91; padding-bottom: 0; }
.ab-gallery { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 14px; align-items: end; transform: translateY(40px); margin-top: -10px; }
.ab-gallery img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 18px; box-shadow: 0 18px 40px rgba(4, 20, 56, .25); }
.ab-gallery img:nth-child(2) { aspect-ratio: 4 / 3; }
.ab-gallery-wrap + .ab-sec { padding-top: 104px; }

.ab-steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ab-feat__ico svg { width: 22px; height: 22px; }

/* metode bayar */
.ab-pays { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 28px; }
.ab-pays span { margin-right: 4px; font-size: 14px; font-weight: 700; color: var(--soft); }
.ab-pays b { padding: 7px 14px; border-radius: 999px; background: #f5f7fb; border: 1px solid var(--line); font-size: 13.5px; font-weight: 800; color: var(--ink); }

/* blok 2 kolom + catatan */
.ab-split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.ab-split__title { margin: 0 0 10px; font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }
.ab-split__text { margin: 0 0 18px; font-size: 15.5px; line-height: 1.65; color: var(--soft); }
.ab-note { padding: 24px; border-radius: 18px; background: #e8f0fe; border: 1px solid #cfdcf7; }
.ab-note b { display: block; margin-bottom: 6px; font-size: 16.5px; color: var(--ink); }
.ab-note p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--soft); }
.ab-numlist { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.ab-numlist li { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.5; }

/* rincian biaya */
.ab-fees { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ab-fee { padding: 26px 24px; border-radius: 20px; background: #fff; border: 1px solid var(--line); }
.ab-fee__who { display: inline-block; padding: 4px 10px; border-radius: 999px; background: #e8f0fe; color: #0f3a8f; font-size: 12px; font-weight: 800; }
.ab-fee__num { display: block; margin: 14px 0 4px; font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--brand); }
.ab-fee h3 { margin: 0 0 8px; font-size: 17px; font-weight: 800; }
.ab-fee p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--soft); }
.ab-fee--free .ab-fee__who { background: #e3f6ec; color: #0b7a3e; }
.ab-fee--free .ab-fee__num { color: #0b7a3e; }

/* add ons */
.ab-addon-group { margin-bottom: 36px; }
.ab-addon-group__title { margin: 0 0 14px; font-size: 19px; font-weight: 800; }
.ab-addon-group__note { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); }
.ab-plans { display: grid; gap: 16px; }
.ab-plans--1 { grid-template-columns: minmax(0, 420px); }
.ab-plans--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ab-plans--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ab-plan { padding: 22px; border-radius: 18px; background: #fff; border: 1px solid #cfdcf7; }
.ab-plan h4 { margin: 0 0 6px; font-size: 16.5px; font-weight: 800; color: var(--ink); }
.ab-plan__price { display: block; font-size: 24px; font-weight: 800; color: #d97706; letter-spacing: -.01em; }
.ab-plan__sub { display: block; margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--muted); }
.ab-plan ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 7px; }
.ab-plan li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--soft); }
.ab-plan li svg { width: 16px; height: 16px; margin-top: 2px; color: #0b7a3e; }

@media (max-width: 1199.98px) {
  .ab-hero__grid--about { grid-template-columns: minmax(0, 1fr) 320px; }
}
@media (max-width: 991.98px) {
  .ab-hero__grid--about { grid-template-columns: 1fr; }
  .ab-founder { max-width: 300px; margin: 8px auto -48px; }
  .ab-founder__tag { bottom: 64px; }
  .ab-split, .ab-fees { grid-template-columns: 1fr; }
  .ab-plans--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-steps--3 { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
  .ab-gallery { grid-template-columns: 1fr 1fr; transform: translateY(28px); }
  .ab-gallery img:nth-child(2) { grid-column: 1 / -1; grid-row: 1; }
  .ab-gallery-wrap + .ab-sec { padding-top: 76px; }
  .ab-split__title { font-size: 23px; }
  .ab-fee__num { font-size: 38px; }
  .ab-plans--2, .ab-plans--3 { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
  .ab-hero__grid--about { gap: 0; }
  .ab-founder { max-width: 230px; margin-top: 0; }
  .ab-founder__tag { bottom: 56px; }
  .ab-gallery img:nth-child(2) { aspect-ratio: 3 / 2; }
}
/* /about-us tanpa foto: hero satu kolom */
.ab-hero__solo { position: relative; max-width: 820px; }
.ab-hero__solo .ab-hero__text p { max-width: 720px; }
.ab-hero__solo .ab-ctas { margin-top: 26px; }
.ab-hero::before { pointer-events: none; }
.ab-hero__grid, .ab-hero__solo { z-index: 1; }