/* ============================================================
   LANDING PAGE — PROGRAM TURUN BERAT BADAN
   Stylesheet mandiri. Sengaja TIDAK menumpang style.css homepage:
   halaman iklan butuh layout sendiri yang fokus ke satu konversi.

   Judul memakai Gilda Display, teks Albert Sans. Palet lihat :root
   di bawah.
   ============================================================ */

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

/* Palet Agneskin: teal #2997aa (warna logo & homepage) untuk tombol, latar
   section panel, dan elemen aksen; hitam untuk teks di latar terang; serta
   biru-abu terang untuk latar halaman.
   Nama variabel --green/--cream/--gold dipertahankan agar seluruh layout
   di bawah tidak perlu diubah — yang berganti hanya nilainya. */
:root {
    /* Elemen pekat di section terang (lingkaran angka, nama pasien di
       testimoni) — disamakan dengan warna tombol. */
    --green: #2997aa;
    --green-dark: #1f7a8a;

    /* Latar section panel (Problem, Dokter, Final CTA) — warnanya sama
       dengan tombol. #2997aa terlalu terang untuk teks putih (3.4:1),
       jadi seluruh teks di panel ini memakai nada gelap. */
    --panel: #2997aa;

    /* Biru-abu terang — latar berselang-seling antar section. */
    --cream: #f7fbfc;
    --cream-2: #e9f2f5;
    --line: #d3e3e8;
    --line-2: #dfebee;

    /* Teal — aksen: eyebrow, nomor, ikon, tombol CTA penutup. */
    --gold: #2997aa;
    /* Versi lebih gelap untuk teks kecil di latar terang: teal murni hanya
       mencapai kontras 3.3:1, sedangkan ini 4.6:1 (lolos WCAG AA). */
    --gold-ink: #1d7280;
    --gold-light: #3bb0c4;
    --gold-pale: #9fd7e1;
    /* Aksen di atas panel gelap: versi lebih cerah dari --gold-light agar
       teks kecil kapital tetap lolos AA (5.3:1, bukan 4.2:1). */
    --gold-on-panel: #5cc6d8;
    --gold-line: #b9dfe6;

    /* Teks di latar terang — hitam, bukan teal tua. Kontrasnya jauh lebih
       tinggi (20:1) dan warna teal tetap tampil lewat aksen & tombol. */
    --ink: #111111;
    --ink-2: #1f1f1f;
    --slate: #4a4a4a;
    --mist: #5c5c5c;
    --mist-2: #5c5c5c;

    /* Teks di atas panel #2997aa — putih.
       Kontrasnya 3.4:1, di bawah ambang WCAG AA (4.5:1), jadi ukuran &
       ketebalan huruf dijaga: judul besar, teks isi minimal 16.5px, dan
       diberi bayangan tipis agar tepi hurufnya tetap tegas. */
    --on-dark: #ffffff;
    --on-dark-2: #ffffff;
    --on-dark-3: #f2fafb;
    --on-dark-4: #eaf6f8;

    /* Warna tombol — teal Agneskin, nilai sama persis dengan --gold/--gold-dark
       di style.css homepage agar tombol kedua halaman identik. */
    --btn: #2997aa;
    --btn-dark: #1f7a8a;

    --r: 14px;
    --r-md: 18px;
    --r-lg: 24px;

    --serif: 'Gilda Display', Georgia, serif;
    --sans: 'Albert Sans', system-ui, -apple-system, sans-serif;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 24px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--sans);
    background: var(--cream);
    color: var(--slate);
    font-size: 16px;
    line-height: 1.65;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

/* Lebar isi mengikuti desain: 1100px, dengan padding 6vw seperti aslinya. */
.wrap {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

.wrap-md {
    max-width: 1000px;
}

.wrap-sm {
    max-width: 900px;
}

.wrap-xs {
    max-width: 760px;
}

/* ===== TIPOGRAFI ===== */
h1, h2, h3 {
    font-family: var(--serif);
    color: var(--ink);
    line-height: 1.2;
    font-weight: 400;
}

h1 {
    font-size: clamp(36px, 4.4vw, 58px);
    line-height: 1.12;
    text-wrap: balance;
}

.h-sec {
    font-size: clamp(28px, 3vw, 40px);
    text-wrap: balance;
}

/* Label kecil di atas judul — penanda section, huruf kapital berjarak. */
/* p.eyebrow (bukan .eyebrow) supaya tidak kalah spesifisitas dari
   `.split p` di section dua kolom, yang akan menimpa ukuran & warnanya. */
p.eyebrow,
.eyebrow {
    font-size: 12px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--gold-ink);
    margin-bottom: 18px;
    margin-top: 0;
    font-weight: 600;
}

/* Di panel #2997aa, aksen teal melebur dengan latarnya — pakai navy pekat. */
.sec-dark .eyebrow,
.final .eyebrow {
    color: var(--on-dark);
}

.lede {
    font-size: 16.5px;
    line-height: 1.7;
    color: var(--slate);
    margin-top: 18px;
    text-wrap: pretty;
}

/* ===== SECTION — terang & gelap berselang-seling ===== */
.sec {
    padding: 92px 6vw;
    background: var(--cream);
}

.sec-alt {
    background: var(--cream-2);
}

.sec-dark {
    background: var(--panel);
}

/* Teks putih di atas #2997aa kontrasnya 3.4:1. Bayangan tipis di bawah ini
   mempertegas tepi huruf tanpa mengubah warna latar maupun teksnya. */
.sec-dark,
.final {
    text-shadow: 0 1px 2px rgba(3, 48, 56, .32);
}

.sec-dark h2,
.sec-dark h3 {
    color: var(--on-dark);
}

.sec-dark .lede {
    color: var(--on-dark-2);
}

.sec-center {
    text-align: center;
}

.sec-center .lede {
    max-width: 62ch;
    margin-left: auto;
    margin-right: auto;
}

/* ===== TOMBOL ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 17px 34px;
    border-radius: 100px;
    font-family: var(--sans);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .01em;
    cursor: pointer;
    border: none;
    transition: background .18s ease, transform .18s ease;
    text-align: center;
}

/* Tombol utama: teal Agneskin, mengikuti .btn-primary di homepage.
   Teks putih di atas #2997aa kontrasnya 3.4:1, jadi huruf ditebalkan dan
   diberi bayangan tipis agar tepinya tetap tegas di layar terang. */
.btn-green {
    background: var(--btn);
    color: #fff;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(8, 58, 66, .4);
    box-shadow: 0 4px 20px rgba(41, 151, 170, .3);
}

.btn-green:hover {
    background: var(--btn-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(41, 151, 170, .45);
}

/* Ikon WhatsApp di dalam tombol ikut warna teks. */
.btn svg {
    flex-shrink: 0;
}

/* Tombol di latar gelap: emas, supaya tetap menonjol. */
/* Tombol penutup: warna sama dengan tombol lain, hanya lebih besar. */
/* Tombol penutup berdiri di atas panel #2997aa. Warnanya dibuat putih agar
   tetap terbaca sebagai tombol; teksnya teal tua (bukan --panel) supaya
   labelnya sendiri tetap kontras di atas putih. */
.btn-gold {
    background: #fff;
    color: #145d6b;
    font-weight: 700;
    font-size: 17px;
    padding: 18px 40px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .18);
}

.btn-gold:hover {
    background: var(--gold-pale);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .24);
}

.btn-sm {
    padding: 11px 22px;
    font-size: 14px;
}



/* ===== NAVBAR — hanya logo, mengikuti homepage =====
   Bedanya dengan homepage: di sana navbar melayang di atas hero gelap
   sehingga logonya putih. Hero halaman ini terang, jadi logo memakai warna
   teal/hitam sejak awal. Latar frosted muncul setelah di-scroll. */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 20px 6vw;
    transition: background .3s ease, padding .3s ease, box-shadow .3s ease;
}

.navbar.scrolled {
    background: rgba(247, 251, 252, .82);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line);
    padding: 12px 6vw;
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: 1100px;
    margin: 0 auto;
}

.logo {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

/* Font navbar sengaja mengikuti homepage (Cormorant Garamond + DM Sans),
   bukan font halaman ini (Gilda Display + Albert Sans), agar logo tampil
   identik dengan situs utama. */
.logo-main {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 22px;
    font-weight: 700;
    /* Teal versi gelap: teal tombol hanya 3.3:1 di latar terang. Ini 5.4:1. */
    color: var(--gold-ink);
    letter-spacing: 3px;
}

.logo-sub {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 10px;
    font-weight: 400;
    color: var(--slate);
    letter-spacing: 4px;
    text-transform: uppercase;
}

/* Tombol navbar — mengikuti .btn-nav homepage: pill teal, teks putih. */
.btn-nav {
    padding: 10px 24px;
    background: var(--btn);
    color: #fff;
    border-radius: 50px;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .3px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .18s ease;
}

.btn-nav:hover {
    background: var(--btn-dark);
}

/* ===== HERO — teks kiri, foto kanan ===== */
/* Hero berperan sekaligus sebagai section dan grid isinya, jadi tidak punya
   .wrap di dalamnya. Tanpa max-width, isinya melebar sampai tepi padding —
   di layar 1440px mulai dari x=86, sementara section lain mulai dari x=170.

   Latar dipasang lewat ::before yang melintang penuh, bukan pada .hero
   sendiri: kotak .hero kini dibatasi lebarnya, jadi latar yang menempel
   padanya tidak akan mencapai tepi layar. */
.hero {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap: 56px;
    align-items: center;
    max-width: calc(1100px + 12vw);
    margin: 0 auto;
    /* Padding atas memberi ruang untuk navbar fixed di atasnya. */
    padding: 124px 6vw 80px;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: var(--cream);
    z-index: -1;
}

.hero-lede {
    font-size: 18px;
    line-height: 1.65;
    color: var(--slate);
    margin-top: 22px;
    max-width: 52ch;
    text-wrap: pretty;
}

.hero-cta {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 34px;
    flex-wrap: wrap;
}

/* Foto hero & solusi: tinggi dikunci agar kolom tetap seimbang,
   object-fit menjaga proporsi wajah/ruangan tidak gepeng. */
.shot {
    border-radius: var(--r-lg);
    overflow: hidden;
}

.shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Tinggi tidak dipatok angka tetap: foto kedua section berformat lanskap
   (728x537 ≈ 4:3), jadi rasio kotaknya disamakan supaya isi frame utuh.
   Dengan tinggi tetap, di lebar 1024px foto hero terpotong sampai 40%. */
.hero-shot,
.sol-shot {
    aspect-ratio: 4 / 3;
    height: auto;
}

/* ===== PROBLEM — kartu transparan di atas latar hijau ===== */
.pain-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 20px;
    margin-top: 40px;
}

/* Judul tiap kartu berdiri di kotak putih sendiri, keterangannya di bawah
   langsung di atas panel teal. Kotak putih inilah yang memecah rentetan
   teks — tanpa perlu ikon tambahan. */
/* Grid baris tetap: baris pertama untuk kotak judul, baris kedua untuk
   keterangan. Dengan subgrid tidak tersedia luas, tinggi kotak judul
   diseragamkan lewat min-height agar keterangan tiap kartu mulai sejajar
   meski panjang judulnya berbeda (ada yang 1 baris, ada yang 2). */
/* Tiap poin = satu kartu utuh: bagian atas putih (judul), bagian bawah
   teal gelap (keterangan). Tanpa gap, dan sudut membulat hanya di sisi
   luar kartu — sisi yang bertemu dibuat siku agar keduanya menyatu. */
.pain {
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .22);
}

.pain h3 {
    font-family: var(--sans);
    font-size: 16px;
    font-weight: 700;
    /* Teal tua di atas putih: kontras 7.5:1. Teal biasa hanya 3.4:1. */
    color: #145d6b;
    line-height: 1.4;
    background: #fff;
    padding: 16px 20px;
    text-align: left;
    text-shadow: none;
    display: flex;
    align-items: center;
}

/* Bagian keterangan: latar lebih gelap dari panel agar teks putih terbaca
   (4.9:1) sekaligus memisahkan visual dari bagian judul di atasnya. */
.pain p {
    flex: 1;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--on-dark);
    background: rgba(3, 48, 56, .26);
    padding: 16px 20px;
}

/* ===== SOLUTION — dua kolom, foto kiri ===== */
.split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
    gap: 56px;
    align-items: center;
}

.split p:not(.eyebrow) {
    font-size: 16.5px;
    line-height: 1.7;
    color: var(--slate);
    margin-top: 14px;
    text-wrap: pretty;
}

.split p:not(.eyebrow):first-of-type {
    margin-top: 20px;
}

.split .btn {
    margin-top: 30px;
    padding: 15px 30px;
    font-size: 15px;
}

/* ===== HOW IT WORKS — 4 kartu bernomor ===== */
.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 22px;
    margin-top: 40px;
}

.step {
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 30px 26px;
}

.step-n {
    font-family: var(--serif);
    font-size: 34px;
    color: var(--gold);
    line-height: 1;
}

/* .step p.step-tag: `.step p` di bawah punya spesifisitas sama (0,1,1)
   dan urutannya lebih akhir, jadi selektor ini dinaikkan ke (0,2,1). */
.step p.step-tag {
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--mist-2);
    margin-top: 12px;
    line-height: 1.5;
}

.step h3 {
    font-family: var(--sans);
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
    margin-top: 8px;
    line-height: 1.35;
}

.step p {
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--slate);
    margin-top: 10px;
}

/* ===== SLOT FOTO — memecah rentetan teks =====
   Halaman ini sempat punya jarak 2500px tanpa satu gambar pun. Blok di
   bawah dipakai untuk menyisipkan foto di antara section teks.

   .photo-slot dipakai saat fotonya BELUM ada: menampilkan kotak bergaris
   putus-putus dengan keterangan, sengaja mencolok agar tidak lolos ke
   produksi. Begitu foto tersedia, ganti isinya dengan <img> biasa. */
.photo-band {
    margin: 0 auto;
    max-width: 1100px;
}

/* 4:3 mengikuti bentuk asli fotonya (1448x1086). Dengan 21:9, 43% tinggi
   foto terpotong — langit-langit dan lantai ruangan sama-sama hilang.
   max-width menahan agar di layar lebar fotonya tidak terlalu tinggi. */
.photo-band .shot {
    aspect-ratio: 4 / 3;
    max-width: 860px;
    margin: 0 auto;
}

.photo-band figcaption,
.photo-split figcaption {
    margin-top: 12px;
    font-size: 13px;
    color: var(--mist-2);
    text-align: center;
}

/* Dua kolom: foto di satu sisi, teks pendek di sisi lain. */
.photo-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: 48px;
    align-items: center;
}

/* 1:1 mengikuti bentuk asli fotonya (800x800). Dengan 4:5, sisi kiri-kanan
   terpotong 20% — tenaga medis di tepi kiri ikut terpangkas.
   max-width menahan agar di layar lebar fotonya tidak jadi terlalu besar
   dibanding teks di sebelahnya. */
.photo-split .shot {
    aspect-ratio: 1 / 1;
    max-width: 440px;
    width: 100%;
    justify-self: center;
}

.photo-split h3 {
    font-size: clamp(22px, 2.4vw, 30px);
    margin-bottom: 14px;
}

.photo-split p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--slate);
}

/* Kotak penanda foto yang belum diisi. */
.photo-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 100%;
    padding: 24px;
    background: #fff4f4;
    border: 2px dashed #e5a3a3;
    border-radius: var(--r-lg);
    text-align: center;
}

.photo-slot b {
    font-size: 14px;
    color: #b91c1c;
}

.photo-slot span {
    font-size: 13px;
    line-height: 1.55;
    color: #8a5a5a;
    max-width: 42ch;
}

/* ===== MEDICAL APPROACH — dua kolom: foto kiri, daftar 1-3 kanan ===== */
.approach-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
    gap: 56px;
    align-items: center;
}

/* Rasio mengikuti bentuk asli foto (1080x1350). Sempat dipaksa 4:3 di HP
   saat slot masih kosong — dengan foto potret asli, itu memotong 40%
   tingginya. max-width menahan agar tidak terlalu tinggi di layar lebar. */
.approach-shot {
    aspect-ratio: 4 / 5;
    max-width: 440px;
    width: 100%;
    justify-self: center;
}

.approach-split .lede {
    margin-bottom: 8px;
}

.approach-list {
    display: flex;
    flex-direction: column;
    margin-top: 28px;
}

/* Tiap poin: nomor dalam lingkaran di kiri, teks di kanan, dipisah garis. */
/* Tanpa garis pembatas: nomor dalam lingkaran sudah cukup memisahkan
   tiap poin, jadi jarak antar-poin saja yang dipakai. */
.approach {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px;
    align-items: start;
    padding: 14px 0;
}

.approach:first-child {
    padding-top: 0;
}

.approach:last-child {
    padding-bottom: 0;
}

.approach-n {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--serif);
    font-size: 19px;
}

.approach h3 {
    font-family: var(--sans);
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.35;
}

.approach p {
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--slate);
    margin-top: 6px;
}

/* ===== WHO IS IT FOR — checklist satu kolom =====
   Latar kartu dilepas: warnanya sama persis dengan latar section ini, jadi
   padding 16px atas-bawah hanya menambah tinggi tanpa terlihat sebagai
   kartu. Tiap poin sebelumnya 56px untuk teks 15.5px — sekarang serapat
   daftar biasa. */
.fit-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 32px auto 0;
    max-width: 620px;
}

.fit-item {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 7px 0;
    font-size: 15.5px;
    color: var(--ink-2);
    line-height: 1.55;
    text-align: left;
}

.fit-item::before {
    content: '✓';
    color: var(--gold-ink);
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
}

/* Catatan kecil di bawah blok konten. */
.note {
    font-size: 14px;
    color: var(--mist);
    text-align: center;
    margin-top: 24px;
    font-style: italic;
}

.note-plain {
    font-size: 13px;
    color: var(--mist-2);
    font-style: normal;
    margin-top: 24px;
}

/* ===== DOKTER — foto bulat di latar hijau ===== */
.doc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 320px));
    gap: 40px;
    justify-content: center;
    margin-top: 52px;
}

.doc {
    text-align: center;
}

.doc-shot {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
}

/* Foto dokter sudah dipotong jadi potret persegi (800x800) berisi wajah
   saja, jadi lingkarannya tidak perlu digeser lagi. Sumber aslinya adalah
   poster kredensial di ../dokter/ — di sana dokter hanya menempati ~35%
   sisi kanan frame, sehingga crop lingkaran mendarat di panel teks. */
.doc-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.doc h3 {
    font-size: 22px;
    color: var(--on-dark);
    margin-top: 22px;
}

.doc-role {
    font-size: 14px;
    letter-spacing: .08em;
    color: var(--on-dark-2);
    margin-top: 8px;
    font-weight: 500;
}

/* ===== TESTIMONI ===== */
.tst-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 22px;
    margin-top: 40px;
}

.tst {
    background: var(--cream-2);
    border-radius: var(--r-md);
    padding: 32px 28px;
    text-align: left;
}

.tst-q {
    font-family: var(--serif);
    font-size: 44px;
    line-height: .6;
    color: var(--gold);
    display: block;
}

.tst-txt {
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--ink-2);
    margin-top: 14px;
    font-style: italic;
}

/* Nama pasien: teal tombol hanya 3:1 di atas kartu abu, jadi pakai hitam
   seperti teks isi lainnya. Aksen teal sudah diwakili tanda kutip di atas. */
.tst-who {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    margin-top: 18px;
}

/* ===== FAQ — accordion pakai <details>, tanpa JavaScript ===== */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 44px;
    text-align: left;
}

.faq {
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
}

.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    list-style: none;
}

.faq summary::-webkit-details-marker {
    display: none;
}

/* Tanda +/− di kanan, berubah saat panel terbuka. */
.faq summary::after {
    content: '+';
    color: var(--gold);
    font-size: 20px;
    flex-shrink: 0;
    line-height: 1;
}

.faq[open] summary::after {
    content: '−';
}

.faq p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--slate);
    padding: 0 24px 22px;
}

/* ===== FINAL CTA ===== */
.final {
    padding: 100px 6vw;
    background: var(--panel);
    text-align: center;
}

.final h2 {
    font-size: clamp(30px, 3.4vw, 46px);
    color: var(--on-dark);
    text-wrap: balance;
    max-width: 22ch;
    margin: 0 auto;
}

/* Jarak dinaikkan dari 36px: tombol kini langsung di bawah judul, tidak
   lagi dipisah paragraf pengantar. */
.final .btn {
    margin-top: 40px;
}

.final-note {
    font-size: 13.5px;
    color: var(--on-dark-4);
    margin: 26px auto 0;
    max-width: 52ch;
}

/* ===== ANIMASI MASUK ===== */
.rise {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .55s ease, transform .55s ease;
}

.rise.in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .rise {
        opacity: 1;
        transform: none;
        transition: none;
    }

    html {
        scroll-behavior: auto;
    }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* Saat kartu berjajar (>768px), judul yang 2 baris membuat kotaknya lebih
   tinggi dari yang 1 baris — keterangannya jadi tidak sejajar antar-kartu.
   min-height menyamakannya. Di HP kartu menumpuk & semua judul 1 baris,
   jadi aturan ini justru menyisakan ruang kosong. */
@media (min-width: 769px) {
    .pain h3 {
        min-height: 77px;
    }
}

@media (max-width: 768px) {
    /* Padding section memakan 13% tinggi halaman di HP. Untuk traffic iklan,
       halaman yang lebih ringkas berarti pembaca lebih cepat sampai ke CTA. */
    .sec,
    .final {
        padding: 52px 6vw;
    }

    /* Jarak sebelum grid ikut dirapatkan di layar sempit. */
    .steps,
    .pain-grid,
    .tst-grid,
    .doc-grid {
        margin-top: 32px;
    }

    /* Padding atas memberi ruang untuk navbar fixed (67px di HP). Tanpa ini
       judul tertimpa navbar 27px sejak pil kategori dihapus. */
    .hero {
        padding: 92px 6vw 56px;
    }

    .steps,
    .tst-grid {
        grid-template-columns: 1fr;
    }

    /* Kartu problem tetap 2 kolom di HP: teksnya pendek, dan menumpuk
       4 kartu membuat section ini jadi yang terpanjang (1.250px). */
    .pain-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .pain h3 {
        font-size: 14.5px;
        padding: 12px 14px;
    }

    .pain p {
        font-size: 13.5px;
        padding: 12px 14px;
    }

    .approach-split {
        gap: 32px;
    }

    .photo-split {
        gap: 28px;
    }

    .split,
    .hero {
        gap: 36px;
    }

}

/* HP sangat sempit (<360px): 2 kolom membuat teks pecah berlebihan dan
   kartunya justru lebih tinggi (442px vs 380px). Kembali 1 kolom. */
@media (max-width: 360px) {
    .pain-grid {
        grid-template-columns: 1fr;
    }
}

/* HP sempit: logo + tombol tidak muat berdampingan (tombol meluber di
   320px). Keduanya dikecilkan, dan tagline logo disembunyikan. */
@media (max-width: 400px) {
    .navbar {
        padding: 14px 5vw;
    }

    .navbar.scrolled {
        padding: 10px 5vw;
    }

    .logo-main {
        font-size: 19px;
        letter-spacing: 2px;
    }

    .logo-sub {
        display: none;
    }

    .btn-nav {
        padding: 9px 16px;
        font-size: 13px;
    }
}

@media (max-width: 400px) {
    .btn {
        padding: 15px 22px;
        font-size: 15px;
    }

    .btn-gold {
        padding: 16px 26px;
        font-size: 16px;
    }

    .step,
    .tst,
    .pain {
        padding: 24px 20px;
    }
}