/* =====================================================================
   style-wegovy.css , komponen khusus halaman edukasi Wegovy.
   Dimuat SETELAH style-lp.css dan hanya menambahkan kelas baru;
   tidak ada selector style-lp.css yang ditimpa, sehingga kedua halaman
   tetap bisa berbagi stylesheet dasar yang sama.
   ===================================================================== */

/* ---------- HERO varian edukasi ---------- */
.eyebrow-hero {
    margin-bottom: 14px;
}


/* Tombol sekunder , mengantar ke kalkulator tanpa bersaing dengan CTA utama. */
.btn-ghost {
    background: transparent;
    color: var(--gold-ink);
    border: 1.5px solid var(--gold-line);
}

.btn-ghost:hover {
    background: var(--cream);
    border-color: var(--green);
    color: var(--green-dark);
}

/* ---------- Hero: foto produk ---------- */
/* Foto pen berformat bujur sangkar (1200x1200), sedangkan .hero-shot pada
   style-lp.css dipatok 4:3 dengan object-fit: cover. Tanpa penyesuaian ini
   bagian atas dan bawah botol akan terpotong. */
.hero-shot-produk {
    aspect-ratio: 1 / 1;
    max-width: 540px;
    margin-inline: auto;
    border-radius: 0;
    background: transparent;
}

/* <picture> bersifat inline: tanpa display:contents ia menyisipkan kotak
   tambahan yang membuat tinggi 100% pada <img> tidak terhitung benar. */
.hero-shot-produk picture {
    display: contents;
}

.hero-shot-produk img {
    object-fit: contain;
}

/* ---------- Section produk: foto pen berlatar transparan ---------- */
/* Foto berformat potret (800x1096), sedangkan .sol-shot pada style-lp.css
   dipatok 4:3 dengan object-fit: cover sehingga gambar akan terpotong.
   Rasio kotak disamakan persis dengan rasio foto (800/1096) supaya tidak
   ada ruang kosong di kiri-kanan: dengan object-fit: contain, kotak yang
   rasionya berbeda membuat gambar menyusut lebih kecil dari kotaknya.
   Latar dibuat transparan karena foto sudah tanpa background. */
.shot-produk {
    aspect-ratio: 800 / 1096;
    max-width: 440px;
    margin-inline: auto;
    border-radius: 0;
    background: transparent;
}

.shot-produk img {
    object-fit: contain;
}

/* ---------- CTA penutup: foto konsultasi ---------- */
/* Margin bawah 0: jarak ke tombol sudah diatur .final .btn (40px) pada
   style-lp.css, menambah margin di sini membuat celahnya menumpuk. */
/* Tinggi dipatok lewat aspect-ratio, bukan dibiarkan mengikuti rasio asli
   foto (1080x1350, potret) yang membuat section penutup setinggi 700px.
   Rasio 1:1 dipilih setelah 2:1 terbukti memotong terlalu banyak: pada
   foto potret, kotak selebar itu hanya menyisakan pita sempit di tengah.
   Lebar dibatasi 420px agar bujur sangkar tidak menjadi terlalu jangkung. */
.final-shot {
    max-width: 420px;
    margin: 40px auto 0;
    aspect-ratio: 1 / 1;
    border-radius: var(--r-lg);
    overflow: hidden;
    /* Bingkai tipis memisahkan foto dari latar teal section. */
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .28);
}

.final-shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
}

/* Pengaman agar label tombol tetap satu baris. Teks CTA yang membungkus
   membuat tinggi tombol berubah-ubah dan merusak keselarasan antar section;
   konteks tambahan ditaruh di .cta-sub, bukan dipanjangkan di dalam tombol. */
.btn {
    white-space: nowrap;
}

/* Pada layar sangat sempit, biarkan membungkus daripada tombol meluber
   melewati tepi layar. */
@media (max-width: 360px) {
    .btn {
        white-space: normal;
    }
}

/* ---------- Daftar fakta produk ---------- */
.fact-row {
    margin-top: 26px;
    border-top: 1px solid var(--line);
}

.fact {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    justify-content: space-between;
    align-items: baseline;
    padding: 13px 2px;
    border-bottom: 1px solid var(--line);
}

.fact-k {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mist);
}

.fact-v {
    font-family: var(--sans);
    font-size: 15.5px;
    font-weight: 600;
    color: var(--ink);
    text-align: right;
}

/* ---------- Kalkulator BMI ---------- */
.calc {
    max-width: 620px;
    margin: 36px auto 0;
    text-align: left;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 30px;
    box-shadow: 0 2px 20px rgba(31, 122, 138, .06);
}

.calc-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: 18px;
}

.calc-field label {
    display: block;
    margin-bottom: 8px;
    font-family: var(--sans);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink);
}

.calc-field input {
    width: 100%;
    padding: 14px 16px;
    font-family: var(--sans);
    font-size: 16px; /* >=16px: mencegah iOS auto-zoom saat field difokus. */
    color: var(--ink);
    background: var(--cream);
    border: 1.5px solid var(--line);
    border-radius: var(--r);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.calc-field input:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(41, 151, 170, .16);
}

.calc-fs {
    margin: 26px 0 0;
    padding: 0;
    border: none;
}

.calc-fs legend {
    padding: 0;
    margin-bottom: 12px;
    font-family: var(--sans);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink);
}

.calc-opt {
    font-weight: 400;
    color: var(--mist);
}

.calc-fs-warn legend {
    color: #8a5a12;
}

.chk {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    padding: 9px 0;
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.5;
    color: var(--slate);
    cursor: pointer;
}

.chk input {
    flex: none;
    width: 19px;
    height: 19px;
    margin: 1px 0 0;
    accent-color: var(--green);
    cursor: pointer;
}

.calc-fs-warn .chk input {
    accent-color: #b8860b;
}

.calc-btn {
    width: 100%;
    margin-top: 26px;
}

/* ---------- Hasil kalkulator ---------- */
.calc-out {
    max-width: 620px;
    margin: 24px auto 0;
    text-align: left;
    border-radius: var(--r-md);
    padding: 30px;
    border: 1px solid var(--line);
    border-left-width: 5px;
    background: #fff;
}

/* Tiga status hasil dibedakan lewat warna aksen kiri, bukan warna teks,
   supaya kontras isi tetap terjaga di semua kondisi. */
.calc-out.state-ok    { border-left-color: var(--green); background: #f2fafb; }
.calc-out.state-info  { border-left-color: #7a8a99; background: var(--cream); }
.calc-out.state-warn  { border-left-color: #b8860b; background: #fdf9ef; }
.calc-out.state-err   { border-left-color: #b3261e; background: #fdf2f1; }

.calc-msg {
    font-family: var(--sans);
    font-size: 15.5px;
    color: #8c1d18;
    margin: 0;
}

.calc-bmi {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 14px;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--line);
}

.calc-bmi-n {
    font-family: var(--serif);
    font-size: 44px;
    line-height: 1;
    color: var(--gold-ink);
}

.calc-bmi-l {
    font-family: var(--sans);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--mist);
}

.calc-title {
    font-family: var(--sans);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--ink);
    margin: 0 0 12px;
}

.calc-body p {
    font-family: var(--sans);
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--slate);
    margin: 0 0 12px;
}

.calc-body a {
    color: var(--gold-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.calc-cta {
    width: 100%;
    margin-top: 8px;
}

/* Kalimat langkah berikutnya: menghilangkan keraguan "lalu apa?" yang
   sering membuat pengunjung berhenti tepat sebelum menghubungi. */
.calc-next {
    margin: 14px 0 0;
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.6;
    color: var(--slate);
    text-align: center;
}

.calc-disc {
    margin: 16px 0 0;
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.6;
    color: var(--mist);
}

/* CTA sisipan di dalam alur baca. Diberi jarak lega supaya terbaca sebagai
   ajakan, bukan bagian dari paragraf sebelumnya. */
.cta-inline {
    margin-top: 30px;
    text-align: center;
}

.cta-sub {
    margin: 14px auto 0;
    max-width: 48ch;
    font-family: var(--sans);
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--mist);
}

/* Putih penuh: latar section gelap (--panel) membuat putih transparan
   jatuh di bawah ambang kontras teks normal. */
.sec-dark .cta-sub {
    color: var(--on-dark-2);
}

.calc-skip {
    margin: 18px auto 0;
    max-width: 52ch;
    font-family: var(--sans);
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--slate);
}

.calc-skip a {
    color: var(--gold-ink);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---------- Kartu kriteria ---------- */
.crit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 20px;
    margin-top: 36px;
}

.crit {
    background: #fff;
    border: 1px solid var(--line);
    border-top: 3px solid var(--green);
    border-radius: var(--r-md);
    padding: 26px 24px;
}

.crit-tag {
    font-family: var(--sans);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold-ink);
    margin: 0 0 10px;
}

.crit h3 {
    font-family: var(--sans);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.35;
    color: #145d6b;
    margin: 0 0 12px;
}

.crit p {
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.65;
    color: var(--slate);
    margin: 0;
}

/* ---------- Statistik uji klinis ---------- */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 20px;
    margin-top: 38px;
    text-align: left;
}

.stat {
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 28px 24px;
}

.stat-n {
    display: block;
    font-family: var(--serif);
    font-size: 40px;
    line-height: 1.05;
    color: var(--gold-ink);
    margin-bottom: 14px;
}

.stat-l {
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.6;
    color: var(--slate);
    margin: 0 0 14px;
}

/* Sumber studi selalu menempel pada angkanya , angka tanpa rujukan
   tidak boleh berdiri sendiri di halaman informasi medis. */
.stat-src {
    font-family: var(--sans);
    font-size: 12.5px;
    font-style: italic;
    color: var(--mist);
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

/* ---------- Callout ---------- */
.callout {
    margin-top: 34px;
    text-align: left;
    background: var(--cream);
    border: 1px solid var(--gold-line);
    border-left: 5px solid var(--gold-pale);
    border-radius: var(--r-md);
    padding: 28px;
}

.callout h3 {
    font-family: var(--sans);
    font-size: 17px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 12px;
}

.callout p {
    font-family: var(--sans);
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--slate);
    margin: 0 0 12px;
}

.callout p:last-child {
    margin-bottom: 0;
}

/* ---------- Titrasi dosis ---------- */
.dose-fig {
    margin: 38px 0 0;
}

.dose-fig img {
    display: block;
    width: 100%;
    max-width: 660px;
    height: auto;
    margin: 0 auto;
}

.dose-fig figcaption {
    margin-top: 18px;
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.6;
    /* Putih penuh: latar section gelap (--panel) membuat teks transparan
       jatuh di bawah ambang kontras. */
    color: var(--on-dark-2);
    opacity: .88;
}

/* ---------- Efek samping & kontraindikasi ---------- */
.risk-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 22px;
    margin-top: 36px;
}

.risk-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 28px 26px;
}

/* Kontraindikasi diberi aksen berbeda: ini informasi yang tidak boleh
   terbaca sebagai catatan kaki. */
.risk-card-hard {
    background: #fdf9ef;
    border-color: #e6d5ac;
}

.risk-card h3 {
    font-family: var(--sans);
    font-size: 17.5px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--ink);
    margin: 0 0 12px;
}

.risk-sub {
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.65;
    color: var(--slate);
    margin: 0 0 16px;
}

.risk-list {
    margin: 0;
    padding-left: 22px;
}

.risk-list li {
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.6;
    color: var(--slate);
    margin-bottom: 9px;
}

.risk-list li::marker {
    color: var(--gold-pale);
}

.risk-note {
    margin: 18px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.6;
    color: var(--mist);
}

/* ---------- Tabel perbandingan ---------- */
.tbl-scroll {
    margin-top: 34px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: #fff;
}

.cmp {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    text-align: left;
}

.cmp th,
.cmp td {
    padding: 15px 18px;
    font-family: var(--sans);
    font-size: 14.5px;
    line-height: 1.5;
    border-bottom: 1px solid var(--line);
}

.cmp thead th {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--on-dark);
    /* Teal tua, bukan var(--green): putih di atas #2997aa hanya 3.4:1.
       Header tabel berukuran 12.5px sehingga butuh minimal 4.5:1. */
    background: #145d6b;
    border-bottom: none;
}

.cmp tbody th {
    font-weight: 600;
    color: var(--ink);
    background: var(--cream);
    width: 30%;
}

.cmp tbody td {
    color: var(--slate);
}

.cmp tbody tr:last-child th,
.cmp tbody tr:last-child td {
    border-bottom: none;
}

/* Kolom Wegovy ditandai karena inilah pembeda faktualnya: satu-satunya
   yang indikasi resminya memang manajemen berat badan. */
.cmp-hl {
    font-weight: 700;
    color: #145d6b !important;
    background: #f2fafb;
}

/* ---------- CTA penutup ---------- */
.final-lede {
    max-width: 46ch;
    margin: 0 auto 30px;
    font-family: var(--sans);
    font-size: 16.5px;
    line-height: 1.7;
    /* Mengikuti pola .sec-dark .lede pada style-lp.css: putih penuh
       (--on-dark-2) dibantu text-shadow yang sudah dipasang di .final,
       bukan putih transparan yang menurunkan kontras lebih jauh. */
    color: var(--on-dark-2);
}

/* ---------- Responsif ---------- */
@media (max-width: 720px) {
    .calc,
    .calc-out {
        padding: 24px 20px;
    }

    .calc-bmi-n {
        font-size: 38px;
    }

    .stat-n {
        font-size: 34px;
    }

    .risk-card,
    .callout {
        padding: 24px 20px;
    }
}

/* Menghormati preferensi pengguna yang mengurangi animasi. */
@media (prefers-reduced-motion: reduce) {
    .calc-field input {
        transition: none;
    }
}

/* ---------- CTA melekat (mobile) ---------- */
/* Hanya tampil di layar sempit. Di desktop tombol dalam konten sudah
   cukup terlihat, sedangkan di mobile halaman ini sangat panjang. */
.stickybar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 95;
    display: none;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .97);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 22px rgba(3, 48, 56, .1);
    transform: translateY(100%);
    transition: transform .28s ease;
}

.stickybar.show {
    transform: translateY(0);
}

.stickybar-in {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 560px;
    margin: 0 auto;
}

.stickybar-txt {
    flex: 1;
    margin: 0;
    font-family: var(--sans);
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--slate);
}

.stickybar-txt strong {
    color: var(--gold-ink);
}

.stickybar-btn {
    flex: none;
    padding: 13px 20px;
    font-size: 14.5px;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .stickybar {
        display: block;
    }

    /* Ruang bawah agar isi halaman tidak tertutup bar. */
    body {
        padding-bottom: 78px;
    }
}

@media (max-width: 380px) {
    .stickybar-txt {
        display: none;
    }

    .stickybar-btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .stickybar {
        transition: none;
    }
}