/* =========================================================
   ETALASE STUDIO: gaya halaman konten (artikel, layanan, portofolio)
   Dipakai bersama css/style.css oleh halaman dari bahan/template/halaman-seo.html.
   Salin ke site/css/konten.css saat membuat halaman konten pertama.
   Warna dari token di <style id="css-layar-pertama">; hijau hanya untuk tombol WhatsApp.
   ========================================================= */

/* Header desktop menempel (fixed): isi mulai di bawahnya */
.halaman{display:block}
@media (min-width:1024px){ .halaman{padding-top:var(--header-h)} }

.artikel{padding:clamp(20px, 1rem + 2vw, 48px) 0 var(--sec-pad)}
.artikel__wrap{max-width:calc(760px + var(--gutter) * 2)}

/* ---------- Breadcrumb ---------- */
.crumbs ol{display:flex; flex-wrap:wrap; align-items:center; gap:2px 0; font-size:1rem; color:var(--fg-2)}
.crumbs li{display:inline-flex; align-items:center}
.crumbs li + li::before{content:""; width:7px; height:7px; margin:0 12px 0 8px; border-top:1.5px solid currentColor; border-right:1.5px solid currentColor; transform:rotate(45deg); opacity:.6}
.crumbs a{display:inline-flex; align-items:center; min-height:44px; text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:4px}
.crumbs a:hover{text-decoration-color:var(--accent)}
.crumbs [aria-current]{color:var(--fg); font-weight:600}

/* ---------- Kepala artikel ---------- */
.artikel__head{margin-top:clamp(12px, .5rem + 1vw, 24px)}
.artikel__head h1{font-size:clamp(2.25rem, 1.6rem + 2.8vw, 4rem); font-weight:740; line-height:1.02; letter-spacing:-.03em}
.artikel__meta{margin-top:16px; font-size:1rem; color:var(--fg-2)}
.artikel__lead{margin-top:clamp(18px, .8rem + 1vw, 28px); font-size:var(--fs-lead); line-height:1.55}

/* ---------- Isi (teks panjang) ---------- */
.prosa{margin-top:var(--head-gap)}
.prosa > * + *, .prosa section > * + *{margin-top:1em}
.prosa section + section{margin-top:clamp(40px, 2rem + 2vw, 64px)}
.prosa h2, .artikel__faq h2{font-size:clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem); font-weight:700; line-height:1.1; letter-spacing:-.022em}
.prosa h3{margin-top:1.6em; font-size:clamp(1.25rem, 1.1rem + .6vw, 1.5rem); line-height:1.2}
.prosa h2 + p, .prosa h3 + p{margin-top:.7em}
.prosa a{color:var(--fg); font-weight:600; text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:4px; text-decoration-color:var(--accent)}
.prosa ul, .prosa ol{display:grid; gap:.5em; padding-left:1.4em}
.prosa ul{list-style:disc}
.prosa ol{list-style:decimal}
.prosa li::marker{color:var(--merah); font-weight:700}
.prosa blockquote{padding-left:20px; border-left:3px solid var(--merah); color:var(--fg-2)}

/* Tabel perbandingan: bisa digeser di HP tanpa melebarkan halaman */
.tabel{overflow-x:auto; border-radius:16px; background:var(--card); box-shadow:0 0 0 1px var(--line)}
.tabel table{width:100%; min-width:520px; border-collapse:collapse; font-size:1rem}
.tabel caption{padding:14px 16px 0; text-align:left; font-weight:700}
.tabel th, .tabel td{padding:12px 16px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line)}
.tabel thead th{font-weight:700; color:var(--fg-2)}
/* Kolom pendek tidak dilipat; hanya sel teks panjang (class teks) yang boleh turun baris */
.tabel th, .tabel td{white-space:nowrap}
.tabel .teks{white-space:normal; min-width:15em}
.tabel tbody tr:last-child > *{border-bottom:0}

/* ---------- FAQ (pakai .faq__list/.qa dari style.css) ---------- */
.artikel__faq{margin-top:clamp(56px, 3rem + 3vw, 96px)}
.artikel__faq .faq__list{margin-top:24px}

/* ---------- Kartu di halaman indeks (layanan/, artikel/) ---------- */
.prosa .kartu-daftar{list-style:none; padding:0; gap:16px}
.kartu{position:relative; padding:24px; border-radius:var(--r-card); background:var(--card); box-shadow:var(--shadow-card)}
.kartu > * + *{margin-top:.5em}
.prosa .kartu__judul{margin-top:0; font-size:var(--fs-h3); line-height:1.1}
.prosa .kartu__judul a{text-decoration-color:var(--merah)}
.kartu__judul a::after{content:""; position:absolute; inset:0; border-radius:inherit}
.kartu__harga{font-size:1rem; color:var(--fg-2)}
.kartu__harga b{color:var(--fg)}
@media (hover:hover){ .kartu{transition:transform .3s var(--ease-out)} .kartu:hover{transform:translateY(-2px)} }

/* ---------- Halaman 404 ---------- */
.galat{min-height:min(70svh, 720px)}
.galat__link{display:grid; margin-top:var(--head-gap); border-top:1.5px solid var(--fg)}
.galat__link a{display:flex; align-items:center; justify-content:space-between; min-height:64px; border-bottom:1px solid var(--line); font-family:var(--font-display); font-weight:650; font-size:clamp(1.375rem, 1.2rem + .8vw, 1.75rem); letter-spacing:-.02em; text-decoration:none}
.galat__link a::after{content:""; width:10px; height:10px; border-top:2px solid var(--merah); border-right:2px solid var(--merah); transform:rotate(45deg); margin-right:8px}
@media (hover:hover){ .galat__link a:hover{color:var(--merah)} }
.galat__wa{margin-top:32px}

/* ---------- Footer: baris link halaman ---------- */
.footer__halaman a{border-color:transparent; padding-inline:12px}