/* Reference-led revision: cinematic photography, clear medical identity, varied editorial rhythm. */
:root { --paper:#ffffff; --soft:#f7f1e4; --ink:#1a1a1a; --muted:#4a463e; --line:#e4dcc9; --gold-wash:#efe4cd; --header:86px; }
body { background:var(--paper); }
.shell { width:min(1320px,calc(100% - 112px)); }
.site-header { border-bottom:0; }
.header-inner { gap:35px; }
.brand { width:166px; }
.desktop-nav { margin-inline:auto; gap:35px; }
.desktop-nav a { font-size:12px; }
.header-cta { background:transparent; border:1px solid #a9aaa0; border-radius:0; min-height:43px; padding:12px 19px; gap:28px; }
.button { border-radius:0; }
.header-cta:hover { background:var(--cream); }

.home-page .questions-section { background:var(--paper); padding-block:100px; }
.home-page .questions-grid { grid-template-columns:.8fr 1.2fr; gap:12%; }
.home-page .questions-grid h2 { font-size:46px; }
.home-page .questions-grid header p { font-size:14px; }
.home-page .faq-item summary { font-size:13px; padding-block:23px; }
.home-page .faq-answer p { font-size:14px; }
.site-footer { padding-top:42px; }
.footer-top .brand { width:160px; }
/* Secondary pages carry the same editorial proportions and restrained controls. */
.page-hero { position:relative; overflow:hidden; padding-block:64px 0; background:var(--soft); }
.page-hero::after { content:'01 — 02 — 03'; position:absolute; right:5%; top:75px; font:400 12px Poppins,Arial,sans-serif; letter-spacing:.1em; color:var(--gold-text); }
.page-hero h1 { font-size:clamp(54px,5.8vw,83px); line-height:1.1; }
.phase-shortcuts { margin-top:48px; }
.consult-hero { padding-block:70px 94px; }
.consult-copy h1 { font-size:clamp(53px,6vw,86px); line-height:1.1; }
.consult-panel { border-radius:0; box-shadow:none; border:1px solid #e4dcc9; background:#f7f1e4; padding:37px; }
.consult-doctor { border-color:#e4dcc9; }
.topic-picker label span { background:var(--paper); border-radius:0; }
.consultation-link { background:var(--gold); }
.visit-section { background:var(--soft); }
.closing { background:#f7f1e4; }
@media(max-width:1100px) {
  .shell { width:calc(100% - 64px); }
  .desktop-nav { gap:22px; }
  .header-inner { gap:20px; }
  .brand { width:150px; }
  .home-page .questions-grid { gap:7%; }
  .home-page .questions-grid h2 { font-size:39px; }
}
@media(max-width:899px) {
  :root { --header:76px; }
  .brand { width:158px; }
  .home-page .questions-grid { grid-template-columns:1fr; gap:32px; }
  .page-hero::after { display:none; }
}
@media(max-width:760px) {
  .shell { width:calc(100% - 40px); }
  .header-inner { gap:15px; }
  .brand { width:150px; }
  .home-page .questions-section { padding-block:65px; }
  .home-page .questions-grid h2 { font-size:36px; }
  .home-page .questions-grid header p { font-size:16px; }
  .home-page .faq-item summary { font-size:15px; }
  .home-page .faq-answer p { font-size:16px; }
  .page-hero { padding-top:40px; }
  .page-hero h1 { font-size:46px; }
  .consult-hero { padding-block:42px 65px; }
  .consult-copy h1 { font-size:52px; }
  .consult-panel { padding:29px 23px; }
  .site-footer { padding-top:32px; }
}
@media(max-width:380px) {
  .shell { width:calc(100% - 32px); }
}

/* Kontrol: tombol dan text-link naik dari 10–12px. */
.button,
.text-link,
.desktop-nav a { font-size:var(--t-label); }

/* Body copy: 13–15px di desktop, 16px di ponsel → satu nilai. */
.home-page .questions-grid header p,
.home-page .faq-answer p { font-size:var(--t-body); line-height:var(--lh-body); }

/* Tier menengah yang sebelumnya tidak ada sama sekali. */
.home-page .faq-item summary { font-size:var(--t-lead); }

body::after {
  content:''; position:fixed; inset:0; z-index:9; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
@media print { body::after { display:none; } }

::selection { background:#efe4cd; color:var(--ink); }
:focus-visible { outline:2px solid var(--gold-text); outline-offset:3px; }
main p { text-wrap:pretty; }

/* ═══ Lapisan gerak ═══════════════════════════════════════════════════════
   ATURAN MENGIKAT: animasi tidak boleh menjadi syarat konten terlihat.
   Hanya transform, tidak pernah menaikkan opacity dari nol, tidak pernah
   bergantung pada JavaScript untuk terbaca. Aturan ini ada karena dua kali
   dalam pengembangan konten hilang permanen: baris tabel pembanding, lalu
   judul utama halaman. Bila animasi gagal berjalan, yang boleh hilang hanya
   geraknya. Jangan melonggarkan ini tanpa membaca DESIGN.md § Gerakan.

   Dua dari tiga bagian ada di sini; nomor 2 ditangani .will-reveal di
   style.css (geser 18px, 500ms). Sengaja tanpa penjenjangan per butir
   daftar: dua gerakan bertumpuk pada bidang yang sama terbaca sebagai
   efek, bukan sebagai halaman yang tenang.
   ──────────────────────────────────────────────────────────────────────── */

/* ─── 1. Pembuka: satu urutan pendek saat halaman terbuka ─── */
@media (prefers-reduced-motion:no-preference) {
  .lead-copy > *,
  .lead-figure { animation:enter .5s var(--ease) both; }
  .lead-copy > *:nth-child(2) { animation-delay:.06s; }
  .lead-copy > *:nth-child(3) { animation-delay:.12s; }
  .lead-copy > *:nth-child(4) { animation-delay:.18s; }
  .lead-copy > *:nth-child(5) { animation-delay:.24s; }
  .lead-figure { animation-delay:.1s; animation-duration:.7s; }
}

/* ─── 3. Tanda tangan: rambut emas menarik dirinya di atas daftar ───
   Garis atas kedua daftar sudah ada sebagai border. Emas menimpanya dari
   kiri ke kanan ketika daftar itu masuk layar: satu isyarat bahwa di sini
   ada pilihan yang dibuka, bukan sekadar kolom. Tanpa gerak, garisnya
   tetap ada dalam keadaan penuh. */
.needs-list,
.moments { position:relative; }
.needs-list::before,
.moments::before {
  content:''; position:absolute; inset:-1px 0 auto 0; height:1px;
  background:var(--gold); transform-origin:left; pointer-events:none;
}
@media (prefers-reduced-motion:no-preference) {
  .needs-list::before,
  .moments::before { transform:scaleX(0); transition:transform 1s var(--ease) .15s; }
  .needs-list.is-visible::before,
  .moments.is-visible::before { transform:scaleX(1); }
}
@media(max-width:899px) {
  /* Pada satu kolom border-top dilepas, jadi rambut emasnya ikut dilepas. */
  .needs-list::before,
  .moments::before { content:none; }
}

/* ─── Kontrol: umpan balik cepat, tekanan fisik saat ditekan ───
   Hover dan fokus adalah percakapan, bukan pertunjukan: 180ms terasa
   menjawab, 500ms terasa lamban. */
.button,.text-link { transition:transform .18s var(--ease),background-color .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease); }
.button:active { transform:scale(.985); }
.text-link:active { transform:translateY(1px); }
@media (prefers-reduced-motion:reduce) {
  .button,.text-link { transition:none; }
  .needs-list li,.moments li { transform:none; }
  .needs-list::before,.moments::before { transform:none; }
}

/* Penutup halaman sekunder memakai bidang terang yang sama. */
.closing { background:#f7f1e4; color:var(--ink); }
.closing h2 { color:var(--ink); }
.closing p:not(.eyebrow) { color:var(--muted); font-size:var(--t-body); line-height:var(--lh-body); }
.closing .button { background:var(--gold); color:var(--ink); border-color:transparent; }
.closing .button:hover { background:#d6b25e; }

/* Perjalanan Anda */
.eyebrow,
.process-overview figcaption { font-size:var(--t-micro); letter-spacing:.1em; }
.phase-shortcuts a { font-size:var(--t-label); }
.page-hero>.shell>p:not(.eyebrow) { font-size:var(--t-lead); line-height:1.7; }
.process-overview>p:not(.chapter-mark),
.process-steps p,
.care-note p { font-size:var(--t-body); line-height:var(--lh-body); }
.process-steps h3 { font-size:var(--t-sub); }

/* Konsultasi */
.consult-copy>p:not(.eyebrow) { font-size:var(--t-lead); line-height:1.7; }
.consult-steps h2 { font-size:var(--t-body); }
.consult-steps p,
.consult-panel>p,
.visit-grid>div>p:not(.eyebrow):not(.chapter-mark),
.privacy-note p { font-size:var(--t-body); line-height:var(--lh-body); }
.consult-doctor p { font-size:var(--t-small); }
.consult-doctor span,
.consult-panel .consult-note,
.opening-hours small { font-size:var(--t-micro); line-height:1.75; }
.topic-picker label span,
.opening-hours p,
.privacy-note summary,
address { font-size:var(--t-small); }
.contact-number { font-size:var(--t-small)!important; }
.opening-hours h3 { font-size:var(--t-label); }

/* FAQ di luar beranda memakai tier yang sama dengan beranda. */
.faq-item summary { font-size:var(--t-lead); }
.faq-answer p { font-size:var(--t-body); line-height:var(--lh-body); }

main .page-hero>.shell>p:not(.eyebrow) { max-width:70ch; }
main .page-hero>.shell>p:not(.eyebrow),
main .consult-copy>p:not(.eyebrow) { font-size:var(--t-lead); line-height:1.7; }
main .process-overview>p:not(.chapter-mark),
main .process-steps p,
main .care-note p,
main .consult-steps p,
main .consult-panel>p:not(.consult-note):not(.contact-number),
main .visit-grid>div>p:not(.eyebrow):not(.chapter-mark),
main .privacy-note p,
main .faq-answer p,
main .questions-grid header p,
main .closing p:not(.eyebrow) { font-size:var(--t-body); line-height:var(--lh-body); }
main .faq-item summary { font-size:var(--t-lead); }
main .visit-grid address { font-size:var(--t-small); }
main .consult-steps h2 { font-size:var(--t-body); }

/* Kolom kiri Perjalanan ikut tergulir sampai daftar langkah selesai.
   Setelah langkahnya diperdalam, kolom kanan jauh lebih panjang dan sisi kiri
   menyisakan ruang menganga. */
@media(min-width:900px) {
  .process-grid { align-items:start; }
  .process-overview { position:sticky; top:calc(var(--header) + 30px); }
}

/* Latar: putih murni bukan bagian sistem. DESIGN.md memakai putih hangat. */
.questions-section,
.process-section { background:var(--paper); }

/* Irama vertikal */
.questions-section.section,
.home-page .questions-section,
.visit-section.section,
.process-section.section { padding-block:var(--sp-section); }
.closing { padding-block:var(--sp-feature); }
.care-note { padding-block:calc(var(--sp-section) * .62); }

/* Skala judul: dua momen besar per halaman, sisanya satu tier. */
.home-page .questions-grid h2,
.process-overview h2,
.visit-section h2,
.questions-section h2,
.closing h2,
.consult-panel h2 { font-size:var(--h-section); }
.care-note h2 { font-size:var(--h-note); }

/* `.questions-grid header h2` (0,1,2) mengalahkan aturan tier di atas. */
.questions-grid header h2 { font-size:var(--h-section); }

/* Bidang privasi masih memakai putih murni. */
.privacy-note { background:var(--paper); }

/* Ketiga fase Perjalanan kini berlatar sama sehingga batas antar fase hilang.
   Fase tengah dibedakan — sekaligus menandai bagian Korea sebagai inti cerita. */
.process-section.phase-korea { background:var(--soft); }

/* Kolom kiri FAQ ikut tergulir sampai daftar pertanyaan habis. Setelah FAQ
   beranda bertambah menjadi tujuh, sisi kiri menyisakan ruang kosong panjang. */
@media(min-width:900px) {
  .questions-grid { align-items:start; }
  .questions-grid header { position:sticky; top:calc(var(--header) + 30px); }
}

/* Blok privasi sebelumnya menggantung di ruang kosong tanpa hubungan visual
   dengan daftar pertanyaan di atasnya. */
.privacy-note { border-top:1px solid var(--line); margin-top:8px; padding-top:26px; }
.privacy-note .shell > summary,
.privacy-note summary { font-size:var(--t-small); }

@media(max-width:899px) {
  .process-grid { display:grid; grid-template-columns:1fr; gap:40px; align-items:start; }
  .process-overview { position:static; }
  .process-steps p { max-width:62ch; }
}

/* Penanda tiga fase pada pembuka halaman sekunder tidak relevan di halaman 404. */
.error-page .page-hero::after { content:none; }

/* Revision 4: distinct surfaces, connected journey and varied information density. */
body::after { content:none; }
.site-header { background:var(--paper); }
.header-cta { background:var(--soft); border-color:var(--gold); }
.home-page .questions-section { background:#ffffff; }
.questions-grid header h2,.home-page .questions-grid h2 { font-size:clamp(30px,3vw,42px); }
.faq-item[open] { border-left:3px solid var(--gold); padding-inline:20px; background:var(--paper); }
.page-hero { background:var(--soft); border-bottom:1px solid #dccba4; }
.process-steps { border-top:3px solid var(--gold); }
.consult-panel { background:var(--soft); border:0; border-top:4px solid var(--gold); }
.topic-picker label span { background:var(--paper); }
.topic-picker input:checked+span { background:var(--gold-wash); border-color:var(--gold-text); color:var(--ink); }
/* Palang pengaman: apa pun yang terjadi pada aturan lain, teks yang menunggu
   reveal tetap kelihatan. Durasi disamakan dengan style.css. */
.will-reveal { opacity:1; transition:transform .5s var(--ease); }
@media(min-width:900px) and (max-height:850px) { .process-overview { position:static; } }
@media(max-width:760px) {
 .faq-item[open] { padding-inline:12px; }
}

/* Documentary scenes keep the people and interaction legible at every breakpoint. */
.process-overview figure img.korea-consultation-photo { object-position:50% 50%; }
.visit-grid figure img.consultation-session-photo { object-position:62% 50%; }
.mobile-quick-consult { display:none; }

@media(max-width:760px) {
 .visit-grid figure img.consultation-session-photo { object-position:61% 50%; }
 .mobile-quick-consult { display:flex; width:100%; margin-top:24px; justify-content:space-between; }
}


/* 1 — Pembuka */
.lead { padding-block:44px var(--sp-section); background:var(--paper); }
.lead-grid { display:grid; grid-template-columns:52fr 48fr; gap:6%; align-items:center; }
.route-eyebrow { font-size:var(--t-micro); letter-spacing:.2em; text-transform:uppercase; color:var(--gold-text); margin-bottom:26px; }
.route-eyebrow span { color:var(--accent,#f30100); margin-inline:5px; }
.lead h1 { font-size:clamp(2.625rem,5.2vw,4.5rem); line-height:1.06; letter-spacing:-.042em; color:var(--ink); }
.lead h1 em { font-style:normal; color:var(--gold-text); }
.lead-support { margin-top:26px; font-size:var(--t-lead); line-height:1.7; max-width:46ch; color:var(--ink); }
.lead-actions { display:flex; flex-wrap:wrap; align-items:center; gap:16px 28px; margin-top:34px; }
.lead-micro { margin-top:18px; font-size:var(--t-small); color:var(--muted); }
.lead-figure { margin:0; }

/* 2 — Kebutuhan */
.needs { background:var(--soft); padding-block:var(--sp-section); }
.needs-head { max-width:62ch; margin-bottom:40px; }
.needs-head h2 { font-size:var(--h-section); line-height:1.14; letter-spacing:-.035em; margin-bottom:16px; }
.needs-head p { font-size:var(--t-body); line-height:var(--lh-body); }
.needs-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line); }
.needs-list li { padding:26px 30px 28px 0; border-right:1px solid var(--line); }
.needs-list li:last-child { border-right:0; padding-right:0; }
.needs-list li+li { padding-left:30px; }
.needs-list h3 { font-size:var(--t-sub); line-height:1.25; margin-bottom:10px; }
.needs-list p { font-size:var(--t-small); line-height:1.65; }
.needs-foot { margin-top:32px; font-size:var(--t-body); color:var(--ink); }

/* 3 & 5 — Bab Jakarta, dengan penanda rute tipis */
.chapter { padding-block:var(--sp-section); }
.chapter-start { background:var(--paper); }
.chapter-return { background:var(--paper); }
.chapter-korea { background:var(--soft); }
.chapter-grid { display:grid; grid-template-columns:46fr 54fr; gap:7%; align-items:center; }
.chapter-grid.reverse .chapter-copy { order:1; }
.chapter-grid.reverse .chapter-figure { order:2; }
.chapter-mark { display:flex; align-items:center; gap:12px; font-size:var(--t-micro); letter-spacing:.18em; text-transform:uppercase; color:var(--gold-text); margin-bottom:20px; }
.chapter h2 { font-size:var(--h-section); line-height:1.14; letter-spacing:-.035em; }
.chapter-lede { margin-top:22px; font-size:var(--t-body); line-height:var(--lh-body); max-width:52ch; }
.chapter-support { margin-top:16px; font-size:var(--t-small); line-height:1.7; }
.chapter-points { list-style:none; margin:30px 0 0; padding:0; border-top:1px solid var(--line); }
.chapter-points li { padding:13px 0 13px 20px; border-bottom:1px solid var(--line); font-size:var(--t-small); line-height:1.6; color:var(--ink); position:relative; }
.chapter-points li::before { content:''; position:absolute; left:0; top:22px; width:9px; height:1px; background:var(--gold-text); opacity:.65; }
.chapter-copy .button { margin-top:30px; }
.chapter-place { margin-top:16px; font-size:var(--t-micro); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.chapter-figure { margin:0; }

/* 4 — Korea */
.chapter-head { max-width:64ch; margin-bottom:38px; }
.chapter-figure.wide { margin-bottom:40px; }
.moments { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line); }
.moments li { padding:24px 28px 26px 0; border-right:1px solid var(--line); }
.moments li:last-child { border-right:0; padding-right:0; }
.moments li+li { padding-left:28px; }
.moments h3 { font-size:var(--t-sub); line-height:1.25; margin-bottom:10px; }
.moments p { font-size:var(--t-small); line-height:1.65; }
.chapter-note { margin-top:30px; font-size:var(--t-small); color:var(--muted); }
.chapter-note b { color:var(--ink); font-weight:500; }

/* 7 — Ajakan */
.closing-invite { background:var(--soft); padding-block:var(--sp-feature); text-align:center; }
.closing-invite h2 { font-size:var(--h-feature); line-height:1.1; letter-spacing:-.04em; }
.invite-copy { margin:24px auto 0; max-width:52ch; font-size:var(--t-body); line-height:var(--lh-body); }
.invite-actions { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:16px 28px; margin-top:34px; }
.invite-note { margin-top:22px; font-size:var(--t-small); color:var(--muted); }

@media(max-width:900px) {
  .lead-grid,
  .chapter-grid { grid-template-columns:1fr; gap:34px; }
  .lead { padding-block:30px var(--sp-section); }
  .chapter-grid.reverse .chapter-copy { order:2; }
  .chapter-grid.reverse .chapter-figure { order:1; }
  .needs-list,
  .moments { grid-template-columns:1fr; border-top:0; }
  .needs-list li,
  .moments li { padding:18px 0; border-right:0; border-bottom:1px solid var(--line); }
  .needs-list li+li,
  .moments li+li { padding-left:0; }
  .needs-list li:last-child,
  .moments li:last-child { border-bottom:0; }
}

/* ═══ P0 — tombol utama melar di tablet ═══
   `width:100%` sebelumnya berlaku dari 900px ke bawah, sehingga tombol jadi
   821px di lebar 900 dan 689px di 768: balok emas selebar kolom. Lebar penuh
   adalah pola ponsel, bukan tablet. */
@media(min-width:561px) and (max-width:900px) {
  .lead-actions .button,
  .invite-actions .button { max-width:300px; }
}
@media(max-width:560px) {
  .lead-actions .button,
  .invite-actions .button { width:100%; }
}

/* Kepala bab Korea sebelumnya satu kolom sempit, menyisakan setengah lebar
   kosong di sebelahnya. Judul dan pengantar dipisah menjadi dua kolom. */
@media(min-width:901px) {
  .chapter-korea .chapter-head { max-width:none; display:grid; grid-template-columns:44fr 56fr; gap:7%; align-items:end; }
  .chapter-korea .chapter-head .chapter-mark { grid-column:1 / -1; }
  .chapter-korea .chapter-lede { margin-top:0; max-width:54ch; }
}

/* ═══ Penanda bab: nomor fase, bukan titik merah ═══
   Merah #F30100 dicabut dari peran penanda. Alasan awal memakainya lemah —
   warna itu ada di brand guide tetapi belum terpakai, dan "belum terpakai"
   bukan alasan untuk memakai. Ia warna alarm, dan menempelkannya di sebelah
   nama kota pada halaman yang tugasnya menenangkan orang cemas bekerja
   melawan tujuan halaman.

   Penggantinya nomor fase, yang sekaligus menyelesaikan masalah kedua:
   dua bab sama-sama bernama "Jakarta" dan sebelumnya tidak bisa dibedakan. */
.chapter-mark { gap:14px; flex-wrap:wrap; }
.chapter-num { font-family:Playfair,Georgia,serif; font-size:1.25rem; line-height:1; letter-spacing:0; color:var(--gold-text); font-variant-numeric:tabular-nums; }
.chapter-when { color:var(--muted); letter-spacing:.12em; }
.chapter-when::before { content:''; display:inline-block; width:18px; height:1px; background:var(--line); vertical-align:middle; margin-right:14px; }

/* Sisa peran merah ikut dilepas: garis label, titik rute, dan pemisah rute. */
.route-eyebrow span { color:var(--line); }

/* Accordion tidak menunjukkan dirinya bisa diklik. */
summary { cursor:pointer; }
/* Micro-interaction 500ms terasa lamban; rentang yang wajar 150–300ms. */
.button,.text-link { transition:transform .24s var(--ease),background-color .24s var(--ease),color .24s var(--ease),border-color .24s var(--ease); }
/* Cincin fokus dinaikkan ke 3px sesuai ambang aksesibilitas untuk pembaca 40+. */
a:focus-visible,summary:focus-visible,input:focus-visible,button:focus-visible { outline:3px solid var(--gold-text); outline-offset:4px; }
/* Teks fungsional di footer sebelumnya 9–10px, di bawah ambang keterbacaan. */
.footer-bottom,.footer-bottom a { font-size:var(--t-micro); }
.footer-top .text-link { font-size:var(--t-label); }
.footer-bottom a { min-height:44px; align-items:center; }

/* Tempo pendek: bagian untuk dipindai, bukan dibaca. */
.needs { padding-block:calc(var(--sp-section) * .68); }
.needs-head h2 { font-size:var(--h-note); }
.needs-head { margin-bottom:30px; }

/* Tempo panjang: bab Korea adalah puncak halaman. */
.chapter-korea { padding-block:calc(var(--sp-feature) * 1.12); }
.chapter-korea h2 { font-size:var(--h-feature); line-height:1.08; }
.chapter-korea .chapter-head { margin-bottom:46px; }

/* ── 2. Lantai teks isi 17 px ──
   Tier 15 px sebelumnya memuat mayoritas konten substantif: kedua modul tiga
   kolom, seluruh butir bab, dan catatan dokter. Untuk pembaca di atas 40 tahun
   itu tier yang salah. 15 px kembali ke fungsi caption. */
.needs-list p,
.moments p,
.chapter-points li,
.chapter-note,
.chapter-support { font-size:var(--t-body); line-height:var(--lh-body); }
.needs-list h3,
.moments h3 { margin-bottom:12px; }

/* Topik kebutuhan adalah konten untuk dipindai sebelum membaca proses. */
.needs-list li { padding:0; border-right:1px solid var(--line); }
.needs-list li:last-child { border-right:0; }
.need-copy { display:flex; flex-direction:column; height:100%; padding:26px 30px 24px 0; }
.needs-list li+li .need-copy { padding-left:30px; }
.needs-list li:last-child .need-copy { padding-right:0; }
.need-cue { margin-top:auto; padding-top:18px; display:inline-flex; align-items:center; gap:12px; font-size:var(--t-label); font-weight:500; color:var(--gold-text); }


/* ── 4. Dua nama untuk satu aksi ──
   Tombol melayang di ponsel disembunyikan ketika ajakan penutup sudah terlihat,
   supaya dua tombol bernama sama tidak muncul bersamaan dalam satu layar. */
.mobile-contact.is-hidden { visibility:hidden; opacity:0; pointer-events:none; transform:translateY(12px); }

@media(max-width:900px) {
  .needs-list li { border-right:0; border-bottom:1px solid var(--line); }
  .needs-list li:last-child { border-bottom:0; }
  .need-copy,
  .needs-list li+li .need-copy { padding:20px 0; }
  .chapter-korea { padding-block:var(--sp-feature); }
}

/* ═══ Tanpa panah ═══
   Glyph panah dicabut dari seluruh situs. Satu ikon yang sama ditempel di
   setiap tautan tanpa kecuali adalah pola mesin, dan teks tombolnya sudah
   menyebut tujuan. Afordansnya dipindahkan ke tempat yang lebih tepat:
   tombol punya bentuk sendiri, tautan teks punya garis yang bergerak. */
.button { justify-content:center; gap:0; }
.text-link { gap:0; border-bottom:1px solid var(--gold); }
.text-link:hover { border-bottom-color:var(--gold-text); }
.need-cue { border-bottom:1px solid var(--gold); align-self:flex-start; padding-bottom:5px; }


/* Empat temuan all-caps berasal dari satu string yang sama, diulang pada
   setiap slot foto. Ia teks sementara sampai aset masuk, jadi bobotnya
   diturunkan: huruf biasa, tanpa tracking, warna lebih redam. */

/* Teks pada kolom terakhir sebelumnya berhenti tepat di garis pemisah dan di
   tepi bidang. Padding kanan diberikan pada semua kolom, termasuk yang
   terakhir, sehingga tidak ada teks yang menempel garis. */
.needs-list li:last-child .need-copy,
.moments li:last-child { padding-right:30px; }
.needs-list li+li .need-copy,
.moments li+li { padding-left:34px; }
.chapter-points li { padding-right:16px; }

@media(max-width:900px) {
  .needs-list li:last-child .need-copy,
  .moments li:last-child,
  .needs-list li+li .need-copy,
  .moments li+li { padding-inline:0; }
}

/* Padding kanan diberikan pada setiap kolom, bukan hanya kolom terakhir:
   garis pemisah ada pada elemen li, sehingga tanpa ini teks kolom mana pun
   berhenti tepat di garisnya. */
.needs-list .need-copy { padding-right:30px; }
.moments li { padding-right:30px; }
@media(max-width:900px) {
  .needs-list .need-copy,
  .moments li { padding-right:0; }
}

/* ═══ Irama latar dan tangga judul — koreksi 13 September 2026 ═══════════
   Terukur sebelum perbaikan: bagian `pemulihan` (872px) dan `pertanyaan`
   (698px) sama-sama putih dan berdampingan, jadi 1.570px putih tanpa jeda
   tepat di paruh akhir halaman. Urutan latarnya kini berselang penuh:
   putih · krem · putih · krem · putih · krem · cream.

   Bagian penutup memakai --cream yang lebih pekat daripada --soft. Itu
   permukaan terdalam di halaman dan ia jatuh pada ajakan terakhir, jadi
   kedalaman warnanya sekaligus menandai bobotnya. */
.home-page .questions-section { background:var(--soft); }
.closing-invite { background:var(--cream); }

/* Judul FAQ sebelumnya dikunci di 42px, satu-satunya judul bagian yang
   keluar dari tangga. Dikembalikan ke tier yang sama dengan judul bab. */
.home-page .questions-grid header h2,
.home-page .questions-grid h2 { font-size:var(--h-section); }

/* Kolom kiri FAQ menyuruh pembaca "tanyakan langsung kepada tim" tanpa
   memberi cara melakukannya. Kalimat mati itu kini punya tujuan. */
.questions-ask { margin-top:26px; }

/* ═══ Penyatuan tiga halaman ═══════════════════════════════════════════════
   Langkah 1 — penanda bagian. Sebelumnya ada tiga cara menulis hal yang sama:
   `.chapter-mark` di beranda, `.chapter-location` dengan nomor dalam lingkaran
   di Proses, dan `.eyebrow` di Konsultasi. Kini satu pola. Nomornya opsional,
   dipakai hanya ketika isinya memang berurutan.

   Langkah 2 — penutup. `.closing` dan `.closing-inner` diganti komponen
   `.closing-invite` yang sudah dipakai beranda. Efek sampingnya bagus:
   main.js mencari `.closing-invite` untuk menyingkirkan CTA mengambang, dan
   sekarang perilaku itu ikut hidup di Proses dan Konsultasi. */
.closing-invite .chapter-mark { justify-content:center; margin-bottom:22px; }
.closing-invite h2 span { color:var(--gold-text); }
.closing-invite .invite-copy { margin-inline:auto; }

/* Langkah 3 — perlakuan foto. Beranda memakai bidang penuh kolom dengan sudut
   persegi dan keterangan miring di bawahnya; Proses dan Konsultasi memakai
   tinggi tetap, sudut membulat 3px, dan keterangan kapital berspasi. Satu
   perlakuan sekarang. Rasio dipilih sama dengan slot foto beranda (5:4) agar
   penggantian aset nanti tidak perlu menebak ulang. */
.chapter-figure img {
  width:100%; aspect-ratio:var(--ratio,5/4); height:auto; object-fit:cover;
  border-radius:0; display:block;
}
/* Ruang perawatan PIK: bingkai lama hanya menampilkan lukisan dinding. Ranjang
   dan lampu ada di bagian bawah foto, dan itulah yang membuatnya terbaca
   sebagai ruang perawatan, bukan wallpaper. */
.chapter-figure figcaption,
.process-overview figcaption,
.visit-grid figcaption {
  font-size:var(--t-micro); line-height:1.6; letter-spacing:0; text-transform:none;
  font-style:italic; color:var(--muted); margin-top:11px;
}
.process-overview figure { margin-top:34px; }

/* Langkah 4 — nomor dalam daftar. `.process-steps` sudah memakai angka Playfair
   emas polos; hanya ukurannya yang meleset. `.consult-steps` masih memakai
   lingkaran bergaris — dilepas, karena lingkaran itu satu-satunya sisa dialek
   lama dan tidak menambah informasi apa pun pada angkanya. */
.process-steps li::before,
.consult-steps li>span {
  font-family:Playfair,Georgia,serif; font-size:1.25rem; line-height:1;
  color:var(--gold-text); font-variant-numeric:tabular-nums;
}
.consult-steps li>span {
  border:0; border-radius:0; width:auto; min-width:1.6em; height:auto;
  display:block; padding-top:2px; text-align:left;
}

/* ─── Sepasang foto dokumenter ───
   Bukti pendampingan di Korea ada dan asli, tetapi hanya tersedia pada 1080px
   hasil kompresi WhatsApp. Satu bidang lebar 2:1 akan melebarkannya sampai
   lembek. Sepasang bujur sangkar menampilkannya pada ~44% lebar shell, di mana
   1080px justru berlebih. Wadahnya yang menyesuaikan aset, bukan sebaliknya —
   dan dua foto menceritakan lebih banyak daripada satu. */
.chapter-pair { display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,2.6vw,38px); margin-bottom:40px; }
@media(max-width:760px) { .chapter-pair { grid-template-columns:1fr; gap:28px; } }

/* ═══ Suara pasien ═══════════════════════════════════════════════════════
   Sebelumnya tujuh testimoni hidup sebagai gambar berisi teks di Taplink:
   tidak terbaca mesin pencari, pembaca layar, maupun agen AI, dan tidak bisa
   diperbesar oleh pembaca yang mengecilkan huruf. Di sini kutipannya teks.

   Tanpa bintang lima: Google mengabaikan rating yang dipasang sendiri sejak
   2019, dan di halaman klinik ia terbaca seperti e-commerce. Tanpa bingkai
   iPhone: itu bahasa Taplink. Yang tersisa hanya kalimatnya, diset Playfair
   supaya bobotnya datang dari tipografi, bukan dari dekorasi.

   Latar --soft; bagian FAQ dikembalikan ke putih supaya selang-selingnya utuh. */
.voices { background:var(--soft); padding-block:var(--sp-section); }
.voices-head { max-width:62ch; margin-bottom:44px; }
.voices-head h2 { font-size:var(--h-section); line-height:1.14; letter-spacing:-.035em; margin-bottom:16px; }
.voices-head p { font-size:var(--t-body); line-height:var(--lh-body); color:var(--muted); }
.voices-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line); }
.voices-list li { padding:30px 34px 0 0; border-right:1px solid var(--line); display:flex; flex-direction:column; }
.voices-list li:last-child { border-right:0; padding-right:0; }
.voices-list li+li { padding-left:34px; }
.voices-list blockquote { margin:0; flex:1; }
.voices-list blockquote p {
  font-family:Playfair,Georgia,serif; font-size:var(--t-sub); line-height:1.44;
  letter-spacing:-.015em; color:var(--ink); text-wrap:pretty;
}
.voices-by { margin-top:22px; font-size:var(--t-micro); letter-spacing:.16em; text-transform:uppercase; color:var(--gold-text); }
@media(max-width:899px) {
  .voices-list { grid-template-columns:1fr; border-top:0; }
  .voices-list li { padding:24px 0; border-right:0; border-bottom:1px solid var(--line); }
  .voices-list li+li { padding-left:0; }
  .voices-list li:last-child { border-bottom:0; }
}
/* FAQ kembali putih: testimoni kini berdiri di antara pemulihan dan FAQ,
   jadi dua bidang putih itu tidak lagi bersebelahan. */
.home-page .questions-section { background:var(--paper); }

/* Potret testimoni cukup besar untuk dikenali; kutipan tetap teks HTML. */
.voices-face { width:160px; height:200px; object-fit:cover; object-position:center; display:block; margin-bottom:24px; }

/* Copy and CTA revision: supporting links follow the reading flow. */
.chapter-detail { margin-top:24px; }
.chapter-place { text-transform:none; letter-spacing:normal; }
.clinic-visit { margin-top:24px; }
body:has(.mobile-menu[open]) .mobile-contact { visibility:hidden; pointer-events:none; }

.consult-copy h1 { font-size:clamp(2.625rem,5.2vw,4.5rem); }

.topic-picker legend { font-size:var(--t-small); line-height:1.6; margin-bottom:12px; color:var(--muted); }

/* Revision 10: concise entry, visible doctor identity and a real Jakarta location. */
.home-page .lead { padding-bottom:clamp(48px,5vw,72px); }
.home-page .lead-support { max-width:42ch; }
.home-page .lead-actions { margin-top:24px; }
.home-page .needs { padding-block:48px; }
.home-page .needs-head { margin-bottom:24px; max-width:none; }
.home-page .needs-head p { max-width:52ch; }
.doctor-intro { display:grid; grid-template-columns:104px minmax(0,1fr); gap:24px; margin-top:28px; padding-block:24px; border-block:1px solid var(--line); scroll-margin-top:0; }
.doctor-intro img { width:104px; height:156px; object-fit:cover; object-position:center top; }
.doctor-intro h3 { font-size:var(--t-sub); line-height:1.25; margin:6px 0; }
.doctor-role { font-size:var(--t-micro); line-height:1.6; color:var(--muted); }
.doctor-experience { font-size:var(--t-body); line-height:1.65; margin-top:12px; }
.clinic-facade img, .visit-grid .clinic-facade img { object-position:center bottom; }
.clinic-address { display:grid; grid-template-columns:1.2fr 1fr; gap:7%; border-top:1px solid var(--line); margin-top:40px; padding-top:28px; }
.clinic-address h3 { font:500 var(--t-body)/1.5 Poppins,Arial,sans-serif; margin-bottom:8px; }
.clinic-address address { font-style:normal; font-size:var(--t-body); line-height:1.7; color:var(--muted); }
.clinic-address-actions p { font-size:var(--t-small); line-height:1.7; margin-top:12px; color:var(--muted); max-width:38ch; }
.voice-context { font:500 1.125rem/1.5 Poppins,Arial,sans-serif; margin-bottom:18px; }
.home-page .voices-face { margin-bottom:16px; }
.home-page .questions-section { padding-block:clamp(56px,6vw,86px); }
@media(min-width:901px) {
  .home-page .needs-head { display:grid; grid-template-columns:1fr 1fr; gap:7%; align-items:center; }
  .home-page .needs-head h2 { margin-bottom:0; }
}
@media(max-width:900px) {
  .home-page .lead { padding-top:22px; }
  .home-page .lead-grid { gap:24px; }
  .home-page .route-eyebrow { margin-bottom:18px; }
  .home-page .lead-support { margin-top:18px; font-size:var(--t-body); line-height:1.65; }
  .home-page .lead-actions { gap:10px 22px; margin-top:20px; }
  .home-page .lead-actions .button { min-height:52px; }
  .clinic-address { grid-template-columns:1fr; gap:20px; }
  .doctor-intro { gap:18px; }
}
@media(max-width:560px) {
  .visit-grid { flex-direction:column; }
  .home-page .chapter-start .chapter-grid { display:flex; flex-direction:column; align-items:stretch; }
  .home-page .chapter-start .chapter-copy { order:1; }
  .home-page .clinic-facade { order:2; }
  .clinic-facade img { max-height:400px; aspect-ratio:4/5; }
  .doctor-intro { grid-template-columns:80px minmax(0,1fr); }
  .doctor-intro img { width:80px; height:120px; }
}

/* Testimonial portraits form a clear introduction to each patient's account. */
@media(max-width:899px) {
  .voices-list li { display:grid; grid-template-columns:128px minmax(0,1fr); column-gap:24px; row-gap:22px; padding-block:30px; }
  .home-page .voices-face { width:128px; height:160px; grid-column:1; grid-row:1; margin:0; }
  .voice-context { grid-column:2; grid-row:1; align-self:center; margin:0; }
  .voices-list blockquote, .voices-by { grid-column:1 / -1; }
  .voices-by { margin-top:0; }
}
@media(max-width:360px) {
  .voices-list li { grid-template-columns:112px minmax(0,1fr); column-gap:18px; }
  .home-page .voices-face { width:112px; height:140px; }
}

/* Anchor destinations begin at content, with one allowance for the sticky header.
   Suppress entrance translation around the active destination so it cannot
   move after the browser computes the native fragment scroll position. */
html { scroll-padding-top:calc(var(--header) + 16px); }
[id] { scroll-margin-top:0; }
.will-reveal:target,
.will-reveal:has(:target),
:target .will-reveal { transform:none; transition:none; }

/* Native fragment focus should not outline an entire non-interactive section. */
[tabindex="-1"]:focus { outline:none; }