@charset "utf-8";
/* =============================================================================
   Skinara Aesthetic, desain contoh (klinik kecantikan fiktif)
   Sumber desain: stitch/12-klinik-kecantikan/ (DESIGN.md + PROMPTS-WEB/STATE)
   Diturunkan dari situs/05-klinik-utama-sadhawira/gaya.css lewat skrip tambal.

   MODE WARNA DIKUNCI TERANG. Seluruh rasio di bawah dihitung ULANG untuk palet
   ini dengan rumus WCAG (relative luminance), bukan disalin dari DESIGN.md dan
   bukan diwarisi dari situs 05 maupun 06.

   ⛔ AKSEN PAKET INI ISIAN SAJA, dan ini KEBALIKAN paket 05.
   Mawar #C08497 hanya 2,85:1 di atas latar. Ia GAGAL lantai 4,5:1 untuk teks DAN
   lantai 3:1 untuk garis kendali serta ikon fungsional. Jadi #C08497 tidak pernah
   menjadi warna teks, warna garis, warna ikon, maupun warna cincin fokus. Ia hanya
   ISIAN, dan teks di atasnya WAJIB TINTA #2B1F26 (5,27:1), putih di atasnya cuma
   3,00:1 dan gagal AA.
   Peran "boleh jadi teks/garis/ikon/cincin fokus" dipegang mawar-tua #9B5E71
   (4,71:1 di atas latar; putih di atasnya 4,96:1). Dua warna, dua peran, dan
   menukarnya adalah cacat kontras yang tidak menimbulkan galat apa pun.

   ⛔ RAMBU VERTIKAL KESEHATAN + KECANTIKAN (DESIGN.md paket ini, menang atas yang
   lain): tidak ada foto sebelum–sesudah, tidak ada testimoni pasien, tidak ada
   klaim hasil, tidak ada superlatif, dan TIDAK ADA nomor STR, SIP, atau izin
   klinik di mana pun. Kepercayaan dipikul harga terbuka, batas tiap perawatan,
   efek samping, nama dokter, dan alat yang disebut mereknya.

   DUA keluarga huruf: Cormorant Garamond 600 (judul) dan Inter 400/600 (isi).
   Hanya bobot itu yang diunduh, jadi TIDAK ADA font-weight 700 di berkas ini, 700 akan dipalsukan peramban (synthetic bold) dan rupanya melenceng dari brief.
   ========================================================================== */

@import url("aset/huruf/_font-face.css");

/* -----------------------------------------------------------------------------
   1. TOKEN, tiap warna punya PERAN dan RASIO TERHITUNG di sebelahnya.
   Angka di bawah DIHITUNG SENDIRI dengan rumus WCAG, bukan disalin dari brief.
   Catatan: berbeda dengan paket 02, angka di DESIGN.md paket ini TERBUKTI BENAR, 4,76 · 5,01 · 3,25 · 15,48 · 6,15 semuanya cocok sampai dua desimal.
   -------------------------------------------------------------------------- */
:root {
  /* Permukaan */
  --latar:        #FDF8F7;   /* alas halaman */
  --kertas:       #FFFFFF;   /* alas kartu di atas --latar */
  --sentuh:       #FAF3F2;   /* hover/tekan. SENGAJA sangat terang: mawar-tua di
                                atasnya 4,53:1 dan MASIH lulus AA sebagai teks.
                                Satu nada lebih gelap (#F8F0EF) menjatuhkannya ke
                                4,42:1 dan tautan di dalam baris yang sedang
                                di-hover berhenti lulus. Terhitung, bukan ditaksir. */

  /* Teks */
  --tinta:        #2B1F26;   /* 15,03:1 di atas --latar, teks utama, ukuran apa pun */
  --redup:        #6A5A62;   /* 6,13:1 di atas --latar, teks sekunder, LULUS AA.
                                LANTAI UKURANNYA 15px (DESIGN.md): seluruh palet ini
                                cuma merentang 15,03:1 dari tinta ke latar, jadi
                                tidak ada sisa jarak untuk dibelanjakan pada teks
                                sekunder yang lebih kecil atau lebih terang. */

  /* AKSEN, DUA warna, DUA peran. Menukarnya = cacat kontras tanpa galat. */
  --aksen:        #9B5E71;   /* 4,71:1 di atas --latar → BOLEH jadi warna teks,
                                garis kendali, ikon fungsional, dan cincin fokus.
                                Putih di atasnya 4,96:1 (lulus); TINTA di atasnya
                                cuma 3,19:1 → teks gelap di atas warna ini DILARANG. */
  --aksen-tekan:  #7E4A5A;   /* keadaan ditekan; putih di atasnya 6,97:1 */
  --aksen-isi:    #C08497;   /* ⛔ ISIAN SAJA. 2,85:1 di atas --latar → gagal 4,5:1
                                untuk teks DAN gagal 3:1 untuk garis serta ikon.
                                Teks di atasnya WAJIB TINTA (5,27:1); putih di
                                atasnya 3,00:1 dan gagal AA. Teks --redup di
                                atasnya cuma 2,15:1 → tidak pernah dipakai. */
  --aksen-isi-tekan:#B7788C;  /* isian yang ditekan; TINTA di atasnya 4,58:1 (lulus) */
  --aksen-alas:   #FAEFF1;   /* alas lembut. Teks di atasnya wajib TINTA (14,08:1);
                                --aksen di atasnya 4,41:1 → cukup untuk IKON (3:1)
                                dan untuk teks BESAR (≥24px, 3:1), TIDAK cukup
                                untuk teks isi biasa. */
  --nonaktif:     #EDE3E4;   /* alas kendali mati; --redup di atasnya 5,14:1 */

  /* Garis */
  --garis:        #EBDCDD;   /* 1,26:1, DEKORATIF saja (pemisah, border kartu;
                                DESIGN.md menyebut warna ini persis untuk kartu).
                                DILARANG untuk border kendali interaktif. */
  --garis-kendali:#6A5A62;   /* 6,13:1, border input, checkbox, tombol outline.
                                Mawar-tua #9B5E71 (4,71:1) juga sah di sini menurut
                                hitungan; yang dipakai warna netral supaya garis
                                kendali tidak terbaca sebagai aksi. */

  /* Semantik, dihitung terhadap --latar */
  --sukses:       #0F6B45;   /* 6,22:1 */
  --galat:        #B3261E;   /* 6,21:1 */
  --peringatan:   #7A4B00;   /* 7,04:1 */
  --sukses-alas:  #E6F1EB;   /* tinta di atasnya 13,68:1 */
  --galat-alas:   #FBEAE8;   /* tinta di atasnya 13,59:1 */
  --peringatan-alas:#F8EFDD; /* tinta di atasnya 13,86:1 */

  /* Huruf. DUA keluarga (DESIGN.md paket ini). Cormorant Garamond hanya bobot 600
     yang diunduh, Inter 400 dan 600. Rantai cadangan memuat huruf sistem yang
     pasti punya "·" dan "–" seandainya woff2-nya gagal turun. */
  --f-judul: "Cormorant Garamond", ui-serif, Georgia, "Times New Roman", serif;
  --f-isi:   "Inter", ui-sans-serif, system-ui, "Segoe UI", sans-serif;

  /* LANTAI UKURAN TEKS, jangan turun di bawah ini di mana pun.
     ⚠ BERBEDA dari situs 01–06: DESIGN.md paket ini menaikkan lantai teks sekunder
     ke 15px, jadi --t-kecil 0,9375rem (15px), bukan 0,875rem (14px). */
  --t-isi:   1rem;       /* 16px, teks isi */
  --t-kecil: 0.9375rem;  /* 15px, sekunder, LANTAI DESIGN.md, jangan diturunkan */
  --t-label: 0.75rem;    /* 12px, label huruf besar, hanya untuk label satu-dua
                            kata yang bukan kalimat (cip, label tab bar) */

  /* Ritme */
  --r1: .25rem; --r2: .5rem; --r3: .75rem; --r4: 1rem;
  --r5: 1.5rem; --r6: 2rem; --r7: 3rem; --r8: 4rem; --r9: 6rem;

  --radius: 12px;                   /* DESIGN.md: radius 12px, tanpa sudut tajam */
  --lebar-isi: 1240px;
  --tepi: 1.25rem;                  /* gutter, dipakai SEMUA section supaya sejajar */

  --bar-atas: 0px;
  --bar-bawah: calc(56px + env(safe-area-inset-bottom, 0px));
}

/* -----------------------------------------------------------------------------
   2. DASAR
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* Atribut `hidden` KALAH oleh `display` mana pun yang ditulis di CSS. Gejalanya
   mahal dan hanya terlihat setelah dirender: pesan galat formulir tampil sejak
   halaman dibuka karena .pesan menyetel display:flex. Satu aturan ini menutup
   seluruh kelasnya. */
[hidden] { display: none !important; }

html {
  /* Jangkar berhenti tepat di bawah bar, dan ini juga menyelamatkan elemen yang
     menerima fokus keyboard (teknik W3C C43 untuk WCAG 2.2 SC 2.4.11). */
  scroll-padding-top: calc(var(--bar-atas) + var(--r4));
  scroll-padding-bottom: calc(var(--bar-bawah) + var(--r4));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--latar);
  color: var(--tinta);
  font-family: var(--f-isi);
  font-size: var(--t-isi);
  line-height: 1.6;
  /* Ruang untuk bar tab bawah di mobile supaya isi terakhir tidak tertutup. */
  padding-bottom: var(--bar-bawah);
}

h1, h2, h3, h4 { font-family: var(--f-judul); font-weight: 600; line-height: 1.18; margin: 0; }
/* Cormorant Garamond bertubuh kecil (x-height rendah), jadi ukurannya dinaikkan
   sedikit dari situs 05 supaya bobot optiknya setara Inter di sebelahnya. */
h1 { font-size: clamp(2.375rem, 5.4vw, 3.75rem); letter-spacing: -0.005em; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); letter-spacing: -0.005em; }
h3 { font-size: clamp(1.1875rem, 2vw, 1.4375rem); }
p  { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }

/* HARGA DAN DURASI ADALAH DATA, BUKAN HIASAN (DESIGN.md). Karena itu .angka memakai
   --f-isi (Inter) 600 dengan angka TABULAR, BUKAN huruf judul. Cormorant Garamond
   angkanya old-style dan tingginya berbeda-beda; kolom rupiah tidak akan pernah
   sejajar dengannya. Angka besar di pita statistik dan di halaman galat memang
   Cormorant, dan keduanya menimpa aturan ini sendiri-sendiri. */
.angka { font-family: var(--f-isi); font-weight: 600; font-variant-numeric: tabular-nums;
         font-feature-settings: "tnum" 1, "lnum" 1; }

/* CINCIN FOKUS, 2px mawar-tua --aksen dengan offset 2px, persis yang didiktekan
   brief, dan hitungannya mengizinkannya: #9B5E71 4,71:1 di atas latar, jauh di atas
   lantai 3:1 untuk kendali. Yang TIDAK boleh adalah cincin ber-#C08497 (2,85:1).
   Dua tempat menimpanya, dan keduanya karena diukur:
   - di atas isian aksen #C08497, cincin --aksen cuma 1,65:1 → dipakai TINTA (5,27:1);
   - di atas footer bertinta, dipakai putih. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--aksen);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Lewati ke konten, wajib ada, dan wajib terlihat saat difokus. */
.lewati {
  position: absolute; left: var(--tepi); top: -100px; z-index: 100;
  background: var(--tinta); color: #fff; padding: var(--r3) var(--r4);
  border-radius: var(--radius); font-weight: 600; text-decoration: none;
}
.lewati:focus-visible { top: var(--r3); }

/* -----------------------------------------------------------------------------
   3. TATA LETAK
   -------------------------------------------------------------------------- */
.bungkus { width: 100%; max-width: var(--lebar-isi); margin-inline: auto; padding-inline: var(--tepi); }
.bagian { padding-block: var(--r7); }
.bagian + .bagian { border-top: 1px solid var(--garis); }
@media (min-width: 768px) { .bagian { padding-block: var(--r8); } }

.kepala-bagian { margin-bottom: var(--r5); max-width: 62ch; }
.kepala-bagian p { color: var(--redup); margin-top: var(--r2); }

.kisi { display: grid; gap: var(--r4); }
@media (min-width: 640px)  { .kisi-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .kisi-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
                             .kisi-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 640px) and (max-width: 899px) { .kisi-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Tiap anak kisi WAJIB boleh menyusut, kalau tidak isi yang lebar mendorong
   lebar halaman dan yang dilaporkan meluber justru elemen lain. */
.kisi > * { min-width: 0; }

/* -----------------------------------------------------------------------------
   4. PITA "DESAIN CONTOH", tidak bisa ditutup, wajib di tiap halaman
   -------------------------------------------------------------------------- */
.pita {
  background: var(--tinta); color: #fff;   /* 15,83:1 */
  font-size: 0.8125rem; text-align: center;
  padding: var(--r2) var(--tepi);
}

/* -----------------------------------------------------------------------------
   5. NAVBAR (desktop), di mobile digantikan bar tab bawah
   -------------------------------------------------------------------------- */
.navbar { border-bottom: 1px solid var(--garis); background: var(--latar); }
.navbar-isi { display: flex; align-items: center; gap: var(--r4); min-height: 64px; }
.wordmark {
  font-family: var(--f-judul); font-weight: 600; letter-spacing: .06em;
  font-size: 0.9375rem; text-decoration: none; white-space: nowrap;
}
.nav-tautan { display: none; gap: var(--r5); margin-inline: auto; }
.nav-tautan a { text-decoration: none; color: var(--redup); font-size: var(--t-kecil); }
.nav-tautan a:hover { color: var(--tinta); }
/* Item aktif TIDAK dibedakan warna saja, ada garis bawah tebal juga. */
.nav-tautan a[aria-current="page"] {
  color: var(--tinta); font-weight: 600;
  box-shadow: inset 0 -3px 0 0 var(--aksen);
}
@media (min-width: 900px) { .nav-tautan { display: flex; } }
.navbar .tombol { margin-left: auto; }
@media (min-width: 900px) { .navbar .tombol { margin-left: 0; } }

/* -----------------------------------------------------------------------------
   6. TOMBOL, target sentuh minimal 48px, tombol utama 52px di mobile
   -------------------------------------------------------------------------- */
.tombol {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--r2);
  min-height: 48px; padding: var(--r3) var(--r5);
  font-family: var(--f-isi); font-size: var(--t-kecil); font-weight: 600;
  border-radius: var(--radius); border: 1px solid transparent;
  text-decoration: none; cursor: pointer; background: none; color: var(--tinta);
  transition: background-color .15s ease, border-color .15s ease;
}
/* DESIGN.md paket ini menyebut tombol utama secara harfiah: isian aksen #C08497
   dengan teks TINTA #2B1F26 (5,27:1). Putih di atasnya 3,00:1 dan gagal AA. */
.tombol-utama { background: var(--aksen-isi); color: var(--tinta); }        /* 5,27:1 */
.tombol-utama:hover { background: var(--aksen-isi-tekan); }                 /* 4,58:1 */
.tombol-utama:active { background: var(--aksen-isi-tekan); }
.tombol-kedua { border-color: var(--garis-kendali); color: var(--tinta); }  /* 5,51:1 */
.tombol-kedua:hover { background: var(--sentuh); }
.tombol-blok { width: 100%; }
.tombol[disabled], .tombol[aria-disabled="true"] {
  background: var(--nonaktif); color: var(--redup); border-color: transparent;
  cursor: not-allowed;
}
.tombol-alasan { font-size: var(--t-kecil); color: var(--redup); margin-top: var(--r2); }

/* Keadaan memuat: tombol punya LABELNYA SENDIRI, bukan cuma spinner. */
.tombol[data-memuat="ya"] { pointer-events: none; }
.pemintal {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: putar .7s linear infinite; flex: none;
}
@keyframes putar { to { transform: rotate(360deg); } }

/* -----------------------------------------------------------------------------
   7. IKON, SVG sebaris, BUKAN emoji dan bukan font ikon.
   Brief menyebut Material Symbols; yang dipakai di sini SVG sebaris dengan bentuk
   yang sama maknanya. Alasannya bukan selera: font ikon berbasis ligatur
   menampilkan nama glyph sebagai teks mentah sebelum fontnya termuat, dan itu
   berarti kata "request_quote" sempat terbaca di layar pembeli.
   -------------------------------------------------------------------------- */
.ikon { width: 20px; height: 20px; flex: none; stroke: currentColor;
        fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ikon-besar { width: 28px; height: 28px; }
.ikon-redup { color: var(--redup); }
/* .ikon-aksen SAH di paket ini, TAPI hanya untuk --aksen #9B5E71 (4,71:1, jauh di
   atas lantai 3:1 untuk ikon fungsional). Ikon ber-#C08497 DILARANG: 2,85:1, di
   bawah lantai 3:1. Yang berubah hasil hitungannya, bukan aturannya. */
.ikon-aksen { color: var(--aksen); }

/* -----------------------------------------------------------------------------
   8. KARTU, border 1px, TANPA bayangan (DESIGN.md)
   -------------------------------------------------------------------------- */
.kartu {
  background: var(--kertas); border: 1px solid var(--garis);
  border-radius: var(--radius); padding: var(--r4);
}
.kartu h3 { margin-bottom: var(--r2); }
.kartu p { color: var(--redup); font-size: var(--t-kecil); }

.cip {
  display: inline-block; background: var(--aksen-isi); color: var(--tinta);  /* 5,27:1 */
  font-size: var(--t-label); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; padding: 2px var(--r2); border-radius: 999px;
}
.cip-netral { background: var(--nonaktif); color: var(--tinta); }
/* Cip bergaris: border --aksen #9B5E71 (4,71:1, di atas lantai 3:1) dengan teks
   tinta. Border ber-#C08497 DILARANG di sini, 2,85:1, di bawah lantai 3:1. */
.cip-garis {
  /* inline-flex, BUKAN inline-block warisan .cip: cip bergaris hampir selalu
     membawa ikon, dan sebagai inline-block ikonnya duduk di garis dasar teks lalu
     terlihat seperti glyph yang rusak. Terlihat jelas di kisi penjamin. */
  display: inline-flex; align-items: center; gap: var(--r2);
  background: var(--kertas); color: var(--tinta);
  border: 1px solid var(--aksen); text-transform: none; letter-spacing: 0;
  font-size: var(--t-kecil); padding: var(--r1) var(--r3);
}

.tautan-panah {
  display: inline-flex; align-items: center; gap: var(--r1);
  font-size: var(--t-kecil); font-weight: 600; text-decoration: none;
  color: var(--aksen); text-underline-offset: 3px;   /* 4,71:1, mawar-tua LULUS sebagai teks */
}
.tautan-panah:hover { text-decoration: underline; }

/* -----------------------------------------------------------------------------
   9. HERO
   -------------------------------------------------------------------------- */
.hero { display: grid; gap: var(--r5); align-items: center; }
@media (min-width: 900px) { .hero { grid-template-columns: 1.05fr .95fr; gap: var(--r7); } }
.hero-mata { font-size: var(--t-kecil); font-weight: 600; color: var(--redup); letter-spacing: .06em; text-transform: uppercase; }
.hero h1 { margin-block: var(--r3); }
.hero-sub { color: var(--redup); font-size: 1.0625rem; max-width: 56ch; }
.hero-aksi { display: flex; flex-wrap: wrap; gap: var(--r3); margin-top: var(--r5); }
.hero-aksi .tombol { min-height: 52px; }      /* aksi utama di mobile 52px */
.hero-statistik { display: flex; flex-wrap: wrap; gap: var(--r5); margin-top: var(--r5);
                  padding-top: var(--r4); border-top: 1px solid var(--garis); }
.hero-statistik div { min-width: 0; }
.hero-statistik .angka { font-size: 1.25rem; display: block; }
.hero-statistik span:last-child { font-size: var(--t-kecil); color: var(--redup); }
.hero-foto { border-radius: var(--radius); border: 1px solid var(--garis); overflow: hidden; }
.hero-foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* -----------------------------------------------------------------------------
   10. PITA STATISTIK BERAKSEN, SELURUH teks di atasnya wajib TINTA.
   Terhitung: tinta di atas mawar #C08497 5,27:1 LULUS, putih di atasnya 3,00:1
   GAGAL, dan --redup di atasnya 2,15:1 GAGAL TELAK. Persis KEBALIKAN paket 05.
   Inilah tempat menyalin keputusan warna paling mahal, dan ia sudah salah sekali.
   -------------------------------------------------------------------------- */
.pita-statistik { background: var(--aksen-isi); color: var(--tinta); padding-block: var(--r6); }
.pita-statistik .kisi { gap: var(--r5); grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 900px) { .pita-statistik .kisi { grid-template-columns: repeat(5, minmax(0,1fr)); } }
.pita-statistik .angka { font-size: clamp(1.5rem, 3vw, 2rem); display: block; }
.pita-statistik span:last-child { font-size: var(--t-kecil); }
/* Pita mawar ini TERANG. Cincin fokus --aksen di atasnya cuma 1,65:1 dan praktis
   lenyap, jadi di dalam pita cincinnya ditintakan (5,27:1), pengecualian yang ada
   karena diukur, bukan karena selera. Angka besarnya memakai Cormorant seperti
   diminta brief; .angka biasa memakai Inter. */
.pita-statistik :focus-visible { outline-color: var(--tinta); }
.pita-statistik .angka { font-family: var(--f-judul); }

/* Pita kalimat beraksen, sama aturannya, teks TINTA. */
.pita-aksen {
  background: var(--aksen-isi); color: var(--tinta); border-radius: var(--radius);
  padding: var(--r5); font-size: 1.0625rem;
}

/* -----------------------------------------------------------------------------
   11. BARIS DAFTAR NATIVE, padanan mobile untuk tabel dan dropdown.
   Tinggi minimal 56px. Dipakai juga di desktop karena polanya memang terbaca.
   -------------------------------------------------------------------------- */
.daftar { border: 1px solid var(--garis); border-radius: var(--radius); background: var(--kertas); }
.baris {
  display: flex; align-items: center; gap: var(--r3);
  min-height: 56px; padding: var(--r3) var(--r4);
  border-bottom: 1px solid var(--garis);
}
.baris:last-child { border-bottom: 0; }
.baris-isi { min-width: 0; flex: 1; }
/* Keduanya WAJIB blok. Sebagai span inline, judul dan keterangannya menyambung
   jadi satu paragraf dan barisnya berhenti terbaca sebagai baris daftar native, terlihat jelas di 390px, tidak terlihat sama sekali dari kode. */
.baris-label { display: block; font-weight: 600; font-size: var(--t-kecil); }
.baris-nilai { display: block; font-size: var(--t-kecil); color: var(--redup); }
/* Baris dua kolom (label kiri, nilai kanan) tetap sebaris: di situ keterangannya
   pendek dan memang berpasangan, bukan judul-dan-penjelasan. */
.baris > .baris-nilai:first-child { display: inline; }
/* TANPA nowrap. Nilai panjang seperti "Monday to Friday 08.00 to 17.00, Saturday
   08.00 to 13.00, GMT+7" tidak bisa membungkus dan mendorong lebar halaman:
   terukur meluber 54px di 320px pada situs 02, dan yang dilaporkan meluber justru
   <main>, bukan span penyebabnya. */
.baris-kanan { margin-left: auto; font-weight: 600; font-size: var(--t-kecil);
               text-align: right; min-width: 0; overflow-wrap: anywhere; }
.baris-kanan.angka { font-weight: 600; }
a.baris { text-decoration: none; }
a.baris:hover { background: var(--sentuh); }

/* -----------------------------------------------------------------------------
   12. TABEL, GARIS MENDATAR SAJA, tinggi baris 48px (DESIGN.md).
   Di bawah 768px tabel lebar tetap bisa digulir mendatar di dalam kotaknya
   sendiri; halamannya TIDAK ikut bergeser.
   -------------------------------------------------------------------------- */
.tabel-bungkus { overflow-x: auto; border: 1px solid var(--garis); border-radius: var(--radius);
                 background: var(--kertas); }
table { border-collapse: collapse; width: 100%; font-size: var(--t-kecil); }
th, td { text-align: left; padding: var(--r3) var(--r4); border-bottom: 1px solid var(--garis);
         height: 48px; }
th { font-weight: 600; background: var(--sentuh); white-space: nowrap; }  /* tinta 14,45:1 */
/* Angka lajur dua dan seterusnya dibandingkan lawan lajur → tabular. */
td:not(:first-child) { font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: 0; }
/* Tabel jadwal: kolom sisa kuota ditebalkan supaya angka yang dicari pasien
   menonjol tanpa harus diwarnai. */
.tabel-jadwal td:last-child { font-weight: 600; }
caption { caption-side: top; text-align: left; padding: var(--r3) var(--r4);
          font-size: var(--t-kecil); color: var(--redup); }

/* -----------------------------------------------------------------------------
   13. CAROUSEL GESER, kartu berikutnya mengintip, ada titik indikator
   -------------------------------------------------------------------------- */
.carousel {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 320px);
  gap: var(--r4); overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: var(--r3); scrollbar-width: thin;
  /* Geser mendatar ditangkap carousel, gulir tegak halaman tetap jalan. */
  touch-action: pan-y;
}
.carousel > * { scroll-snap-align: start; }
@media (min-width: 900px) {
  .carousel { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0,1fr));
              overflow: visible; scroll-snap-type: none; }
}
.titik { display: flex; gap: var(--r2); justify-content: center; margin-top: var(--r3); }
.titik span { width: 6px; height: 6px; border-radius: 50%; background: var(--garis-kendali); opacity: .35; }
.titik span[data-aktif="ya"] { opacity: 1; width: 18px; border-radius: 3px; }
@media (min-width: 900px) { .titik { display: none; } }

/* -----------------------------------------------------------------------------
   14. TIMELINE, tegak di mobile, mendatar di layar lebar.
   ⚠️ JUMLAH KOLOM WAJIB DITINJAU TIAP PAKET. Situs 01 lima langkah, 02 enam, 03
   delapan, 04 tiga, paket ini LIMA langkah pendaftaran daring. Pola border-atas per
   langkah dari situs 03 dipertahankan karena ia bekerja untuk berapa pun jumlah
   kolom, yang diubah hanya angka kolomnya.
   -------------------------------------------------------------------------- */
.timeline { position: relative; padding-left: 44px; }
.timeline::before {
  content: ""; position: absolute; left: 15px; top: 12px; bottom: 12px;
  width: 2px; background: var(--garis);
}
.langkah { position: relative; padding-bottom: var(--r5); }
.langkah:last-child { padding-bottom: 0; }
.langkah-nomor {
  position: absolute; left: -44px; top: 0; width: 32px; height: 32px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--aksen-isi); color: var(--tinta);     /* 5,27:1, W9 menyebutnya harfiah */
  font-family: var(--f-judul); font-weight: 600; font-size: var(--t-kecil);
}
.langkah h3 { font-size: 1.0625rem; }
.langkah p { color: var(--redup); font-size: var(--t-kecil); margin-top: var(--r1); }
@media (min-width: 900px) {
  .timeline { display: grid; grid-template-columns: repeat(5, minmax(0,1fr));
              gap: var(--r5) var(--r4); padding-left: 0; }
  .timeline::before { display: none; }        /* diganti border per langkah */
  .langkah { padding: calc(var(--r5) + 16px) 0 0; border-top: 2px solid var(--garis); }
  .langkah-nomor { left: 0; top: -16px; }
}

/* -----------------------------------------------------------------------------
   15. AKORDEON FAQ, <details> asli, jadi tetap bisa dibuka tanpa JavaScript
   -------------------------------------------------------------------------- */
.faq { border: 1px solid var(--garis); border-radius: var(--radius); background: var(--kertas); }
.faq details { border-bottom: 1px solid var(--garis); }
.faq details:last-child { border-bottom: 0; }
.faq summary {
  display: flex; align-items: center; gap: var(--r3); cursor: pointer;
  min-height: 56px; padding: var(--r3) var(--r4);
  font-weight: 600; font-size: var(--t-kecil); list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ikon { margin-left: auto; transition: transform .2s ease; }
.faq details[open] summary .ikon { transform: rotate(180deg); }
.faq .jawab { padding: 0 var(--r4) var(--r4); color: var(--redup); font-size: var(--t-kecil); }

/* -----------------------------------------------------------------------------
   16. FORMULIR, border kendali WAJIB --garis-kendali (6,13:1), bukan --garis (1,26:1)
   -------------------------------------------------------------------------- */
.bidang { display: block; margin-bottom: var(--r4); }
.bidang > label, .label { display: block; font-size: var(--t-kecil); font-weight: 600; margin-bottom: var(--r2); }
.kolom {
  width: 100%; min-height: 52px; padding: var(--r3);   /* DESIGN.md: kolom ≥52px */
  /* 16px WAJIB: di bawah itu Safari iOS ikut memperbesar layar saat kolom difokus. */
  font-size: var(--t-isi); font-family: var(--f-isi); color: var(--tinta);
  background: var(--kertas); border: 1px solid var(--garis-kendali);
  border-radius: var(--radius);
}
.kolom::placeholder { color: #6A5A62; }   /* 6,46:1 di atas --kertas putih */
textarea.kolom { min-height: 120px; resize: vertical; }
.bantuan { font-size: var(--t-kecil); color: var(--redup); margin-top: var(--r2); }
.bantuan-galat { color: var(--galat); font-weight: 600; }      /* 6,21:1 */
.bantuan-sukses { color: var(--sukses); font-weight: 600; }    /* 6,22:1 */
.kolom[aria-invalid="true"] { border-color: var(--galat); border-width: 2px; }
.kolom[disabled] { background: var(--nonaktif); color: var(--redup); cursor: not-allowed; }

/* Radio sebaris (W14: tiga pilihan dalam satu baris), target sentuh 48px penuh,
   dan yang terpilih ditandai border DAN alas, bukan warna titik saja. */
.pilihan { display: grid; gap: var(--r2); }
@media (min-width: 640px) { .pilihan { grid-auto-flow: column; grid-auto-columns: 1fr; } }
.pilihan label {
  display: flex; align-items: center; gap: var(--r2); min-height: 48px;
  padding: var(--r2) var(--r3); border: 1px solid var(--garis-kendali);
  border-radius: var(--radius); background: var(--kertas);
  font-size: var(--t-kecil); cursor: pointer;
}
/* accent-color menggambar isian kendali DAN centangnya putih. Putih di atas
   --aksen #9B5E71 4,96:1, jadi kendalinya memakai --aksen. Memakai --aksen-isi di
   sini akan memberi centang putih di atas 3,00:1, itulah kesalahan yang mudah. */
.pilihan input { width: 20px; height: 20px; accent-color: var(--aksen); flex: none; }
.pilihan label:has(input:checked) { border-color: var(--aksen); border-width: 2px; background: var(--aksen-alas); }

/* Segmented control, padanan mobile untuk radio 2 sampai 3 opsi */
.segmen { display: flex; border: 1px solid var(--garis-kendali); border-radius: var(--radius); overflow: hidden; }
.segmen button {
  flex: 1; min-height: 48px; border: 0; background: var(--kertas); cursor: pointer;
  font-family: var(--f-isi); font-size: var(--t-kecil); font-weight: 600; color: var(--tinta);
}
.segmen button + button { border-left: 1px solid var(--garis-kendali); }
.segmen button[aria-pressed="true"] { background: var(--aksen); color: #fff; }  /* 4,96:1 */

/* -----------------------------------------------------------------------------
   17. PESAN DALAM HALAMAN, supaya implementasi tidak jatuh ke alert() peramban.
   Tidak pernah membawa makna lewat warna saja: selalu ada ikon dan kata.
   -------------------------------------------------------------------------- */
.pesan {
  display: flex; gap: var(--r3); align-items: flex-start;
  padding: var(--r3) var(--r4); border-radius: var(--radius);
  border-left: 4px solid; font-size: var(--t-kecil);
}
.pesan-galat { background: var(--galat-alas); border-color: var(--galat); color: var(--tinta); }
.pesan-peringatan { background: var(--peringatan-alas); border-color: var(--peringatan); color: var(--tinta); }
.pesan-sukses { background: var(--sukses-alas); border-color: var(--sukses); color: var(--tinta); }
.pesan b { display: block; }

/* -----------------------------------------------------------------------------
   18. BAR TAB BAWAH (mobile), navigasi UTAMA di mobile, bukan hamburger
   -------------------------------------------------------------------------- */
.tab-bar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--kertas); border-top: 1px solid var(--garis);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tab-bar a {
  display: grid; place-items: center; gap: 2px;
  min-height: 56px; padding: var(--r2) var(--r1);
  text-decoration: none; color: var(--redup); font-size: var(--t-label);
}
/* Tab aktif dibedakan warna DAN tebal DAN garis atas, bukan warna saja. */
.tab-bar a[aria-current="page"] { color: var(--tinta); font-weight: 600; box-shadow: inset 0 3px 0 0 var(--aksen); }
.tab-bar .ikon { width: 22px; height: 22px; }
@media (min-width: 900px) { .tab-bar { display: none; } body { padding-bottom: 0; } }

/* -----------------------------------------------------------------------------
   19. BOTTOM SHEET, padanan mobile untuk dropdown
   -------------------------------------------------------------------------- */
.lapis { position: fixed; inset: 0; z-index: 50; background: rgba(43,31,38,.62); display: grid; align-items: end; }
.lapis[hidden] { display: none; }
.sheet {
  background: var(--kertas); border-radius: 12px 12px 0 0;
  padding-bottom: env(safe-area-inset-bottom, 0px); max-height: 80vh; overflow-y: auto;
}
.sheet-pegangan { width: 36px; height: 4px; background: var(--garis-kendali); opacity: .5;
                  border-radius: 2px; margin: var(--r3) auto; }
.sheet-kepala { display: flex; align-items: center; gap: var(--r3); padding: 0 var(--r4) var(--r3);
                border-bottom: 1px solid var(--garis); }
.sheet-kepala h3 { font-size: 1rem; }
.sheet-tutup { margin-left: auto; min-width: 48px; min-height: 48px; display: grid; place-items: center;
               background: none; border: 0; cursor: pointer; color: var(--tinta); }
@media (min-width: 900px) {
  .lapis { align-items: center; justify-items: center; }
  .sheet { border-radius: var(--radius); max-width: 480px; width: 100%; }
}

/* Lightbox foto */
.lightbox img { width: 100%; max-height: 80vh; object-fit: contain; background: #000; }

/* -----------------------------------------------------------------------------
   20. SKELETON MEMUAT, bukan spinner, supaya bentuk halaman sudah terbaca
   -------------------------------------------------------------------------- */
.tulang { background: var(--nonaktif); border-radius: var(--radius); position: relative; overflow: hidden; }
.tulang::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  animation: kilau 1.4s ease-in-out infinite;
}
@keyframes kilau { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.tulang-baris { height: 14px; margin-bottom: var(--r2); }
.tulang-judul { height: 28px; width: 60%; margin-bottom: var(--r3); }
.tulang-foto { aspect-ratio: 4 / 3; }

/* -----------------------------------------------------------------------------
   21. HALAMAN GALAT, ditinjau ULANG, bukan disalin. Yang dipakai di sini:
   angka besar BERWARNA --aksen #9B5E71 di atas latar = 4,71:1, lulus AA bahkan
   sebagai teks isi, apalagi sebagai teks besar. Yang HARAM di paket ini adalah
   angka ber-#C08497 (2,85:1) dan blok isian #C08497 dengan teks putih (3,00:1).
   Angkanya Cormorant Garamond 600, sesuai brief S6.
   -------------------------------------------------------------------------- */
.galat-kode { font-family: var(--f-judul); font-weight: 600; font-size: clamp(3.5rem, 13vw, 7rem);
              line-height: 1.05; display: block; color: var(--aksen); }   /* 4,71:1 */
/* :not(.galat-kode) WAJIB, cacat warisan dari situs 01. Tanpa itu aturan ini
   (0,1,1) menang atas .galat-kode (0,1,0) karena ditulis belakangan, dan angka
   besar 404/500 diam-diam mewarisi --redup alih-alih --aksen yang ditulis
   untuknya. Di paket ini akibatnya visual saja (redup tetap lulus), tapi pola
   yang sama menjatuhkan angka ke 2,56:1 di situs 06 dan 2,60:1 di situs 04.
   Lolos dari KETIGA audit: ketiganya membaca teks dan kotak, bukan warna. */
.galat-halaman p:not(.galat-kode) { color: var(--redup); }
.galat-aksi { display: flex; flex-wrap: wrap; gap: var(--r3); justify-content: center; }

/* Anak yang dipusatkan lewat place-items:center TIDAK melar: lebarnya lahir dari
   isinya sendiri, jadi satu paragraf panjang bisa melewati viewport, terukur
   10px di 320px pada situs 02, dan yang dilaporkan meluber cuma "p" tanpa kelas,
   mustahil ditebak dari kode. max-width:100% saja TIDAK menutupnya; grid-nya yang
   dicabut. Halaman galat di sini karena itu blok sejak awal, bukan grid. */
.galat-halaman { display: block; text-align: center; padding-block: var(--r9);
                 max-width: 56ch; margin-inline: auto; }
.galat-halaman > * + * { margin-top: var(--r4); }
.galat-halaman > * { max-width: 100%; }

/* -----------------------------------------------------------------------------
   22. FOOTER
   -------------------------------------------------------------------------- */
.footer { background: var(--tinta); color: #fff; padding-block: var(--r7); margin-top: var(--r7); }  /* 15,83:1 */
.footer a { color: #D9CDD1; text-decoration: none; font-size: var(--t-kecil); }  /* 10,25:1 */
.footer a:hover { color: #fff; text-decoration: underline; }
.footer h4 { font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; margin-bottom: var(--r3); }
.footer li { margin-bottom: var(--r2); }
.footer-atas { display: grid; gap: var(--r5); }
@media (min-width: 768px) { .footer-atas { grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--r6); } }
.footer-tentang { color: #D9CDD1; font-size: var(--t-kecil); margin-top: var(--r3); max-width: 40ch; }  /* 10,25:1 */
.footer-bawah {
  margin-top: var(--r6); padding-top: var(--r4); border-top: 1px solid #4A3A42;
  display: flex; flex-wrap: wrap; gap: var(--r3); justify-content: space-between;
  font-size: var(--t-kecil); color: #D9CDD1;
}
.footer :focus-visible { outline-color: #fff; }

/* -----------------------------------------------------------------------------
   23. UTILITAS
   -------------------------------------------------------------------------- */
.hanya-layar-baca {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.tumpuk-2 { display: grid; gap: var(--r2); }
.tumpuk-3 { display: grid; gap: var(--r3); }
.tumpuk-4 { display: grid; gap: var(--r4); }
.redup { color: var(--redup); }
.kecil { font-size: var(--t-kecil); }
@media (min-width: 900px) { .hanya-mobile { display: none !important; } }
@media (max-width: 899px) { .hanya-desktop { display: none !important; } }

/* -----------------------------------------------------------------------------
   24. GERAK DIKURANGI, hormati preferensi sistem
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .tulang::after { animation: none; }
}

/* -----------------------------------------------------------------------------
   25. FOTO, POTRET, DAN PENGGANTI FOTO
   Run Stitch paket ini memberi 12 foto: dua ruang tindakan dan SEPULUH potret.
   Sidik jari perseptual (jarak Hamming 16x16) atas kesepuluh potret: jarak
   terkecil 80, jauh di atas ambang 30, jadi kesepuluhnya memang orang berbeda,
   tidak seperti paket 07 yang sepuluh berkasnya ternyata empat orang.
   Yang dipakai LIMA potret dari export-mobile. Lima potret export-web DIBUANG
   (langkah 1 resep, karena ada pengganti setara): papan nama dadanya bertuliskan
   nama dokter LAIN, "Dr. Aisyah Putri", "Dr. Alya Zahara", yang bertabrakan
   dengan nama di brief, plus rak produk skincare bermerek di latarnya.
   Dua potret yang dipakai memuat SERTIFIKAT BERBINGKAI di dinding; keduanya
   ditambal bertepi lembut lalu dipotong keluar bingkai, karena situs ini tidak
   menampilkan dokumen kredensial dalam bentuk apa pun. Kelima dokter punya
   potret, jadi .potret-inisial tidak terpakai di halaman isi, ia tetap
   didefinisikan dan dipamerkan di /komponen supaya slotnya siap dipakai.
   -------------------------------------------------------------------------- */
.gambar-lebar, .foto-kosong {
  aspect-ratio: 4 / 3; width: 100%; object-fit: cover;
  border-radius: var(--radius); border: 1px solid var(--garis); background: var(--nonaktif);
}
.foto-kosong {
  display: grid; place-content: center; justify-items: center; gap: var(--r2);
  color: var(--redup);                                  /* 5,14:1 di atas --nonaktif */
  background-color: var(--nonaktif);
  background-image: linear-gradient(var(--garis) 1px, transparent 1px),
                    linear-gradient(90deg, var(--garis) 1px, transparent 1px);
  background-size: 16px 16px;
}
.foto-kosong span {
  font-family: var(--f-isi); font-weight: 600; font-size: var(--t-label);
  letter-spacing: .08em; background: var(--kertas); padding: 2px var(--r2);
  border-radius: 4px; border: 1px solid var(--garis); text-align: center;
}

.potret {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--radius); border: 1px solid var(--garis); margin-bottom: var(--r3);
}
.potret-inisial {
  display: grid; place-items: center; background: var(--aksen-alas); color: var(--aksen);
  font-family: var(--f-judul); font-weight: 600; font-size: 1.75rem; letter-spacing: .04em;
}

/* Tombol pembungkus foto yang bisa diperbesar, tetap terlihat sebagai gambar */
.foto-tombol { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.foto-tombol img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
                   border-radius: var(--radius); border: 1px solid var(--garis); }

/* Pengganti peta, tidak memuat peta pihak ketiga, jadi tidak ada pelacak. */
.peta {
  display: grid; place-content: center; justify-items: center; gap: var(--r3);
  aspect-ratio: 4 / 3; border-radius: var(--radius); border: 1px solid var(--garis);
  color: var(--redup); text-align: center; padding: var(--r4);
  background-color: var(--nonaktif);
  background-image: linear-gradient(var(--garis) 1px, transparent 1px),
                    linear-gradient(90deg, var(--garis) 1px, transparent 1px);
  background-size: 24px 24px;
}
.peta span { font-size: var(--t-kecil); max-width: 28ch; }

/* Dua kolom di layar lebar, satu kolom di mobile. */
@media (min-width: 900px) {
  [data-dua-kolom] { grid-template-columns: 1fr 1fr; align-items: start; }
  /* Alat: foto ruang laser di kiri, enam baris mesin yang lebih panjang di kanan. */
  .alat-tata { grid-template-columns: 1fr 1.15fr; gap: var(--r6) !important; }
  /* Janji temu: formulir di kiri, kartu ringkasan yang lebih sempit di kanan.
     align-items:start WAJIB, tanpa itu kartu ringkasan empat baris ikut melar
     setinggi formulir sepuluh kolom, dan yang terlihat pengunjung adalah kartu
     setengah kosong sepanjang layar. */
  .daftar-tata { grid-template-columns: 1.4fr 1fr; gap: var(--r6) !important;
                 align-items: start; }
}

/* -----------------------------------------------------------------------------
   27. RAPI-RAPI DI BAWAH 900px, semuanya hanya terlihat setelah dirender
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
  /* Tombol navbar membungkus jadi dua baris dan mendesak wordmark sampai nyaris
     tak terbaca. Di mobile aksi ini juga sudah ada di bar tab bawah, jadi di sini
     ia cukup ringkas: tanpa ikon, tanpa membungkus, padding lebih rapat. */
  .navbar .tombol { padding-inline: var(--r3); white-space: nowrap; font-size: var(--t-label); }
  .navbar .tombol .ikon { display: none; }
  .wordmark { font-size: 0.75rem; letter-spacing: .04em; }

  /* Aksi utama melebar penuh supaya lebarnya seragam dan mudah dijangkau jempol. */
  .hero-aksi { flex-direction: column; align-items: stretch; }
  .hero-aksi .tombol { width: 100%; }
}

/* -----------------------------------------------------------------------------
   28. PONSEL SEMPIT (≤ 380px), iPhone SE dan Android kecil
   Label tab turun ke 11px dan padding dirapatkan. Wordmark paket ini tiga kata,
   jadi ia ikut mengecil.
   -------------------------------------------------------------------------- */
@media (max-width: 380px) {
  :root { --tepi: 1rem; }
  .tab-bar a { font-size: 0.6875rem; padding-inline: 2px; min-width: 0; }
  .tab-bar a > :last-child { max-width: 100%; overflow-wrap: anywhere; text-align: center; line-height: 1.15; }
  .tab-bar .ikon { width: 20px; height: 20px; }
  .wordmark { font-size: 0.625rem; }

  /* TERUKUR, bukan ditaksir: di 320px wordmark panjang plus tombol berlabel panjang
     yang TIDAK boleh membungkus mendorong lebar halaman. Label tombol didiktekan
     brief dan diuji verbatim, jadi yang dicabut nowrap-nya. Diwarisi dari situs 03
     dan 04; wordmark paket ini "SKINARA AESTHETIC" dua kata tapi tetap panjang. */
  .navbar .tombol { white-space: normal; text-align: center; line-height: 1.2;
                    padding-inline: var(--r2); }
}

/* -----------------------------------------------------------------------------
   31. KOTAK IKON BERAKSEN, bingkai lembut untuk ikon penyortir dan kartu batas.
   Alasnya --aksen-alas dan ikonnya --aksen: 4,41:1, di atas lantai 3:1 untuk ikon.
   TEKS isi tidak pernah ditaruh di atas alas ini dengan warna aksen (4,41 < 4,5);
   inisial .potret-inisial boleh karena ukurannya 28px = teks besar (lantai 3:1).
   -------------------------------------------------------------------------- */
.ikon-kotak {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  border-radius: var(--radius); background: var(--aksen-alas); color: var(--aksen);
  margin-bottom: var(--r3);
}

/* -----------------------------------------------------------------------------
   32. TAB HARI, tautan sungguhan ke jadwal tiap hari, bukan tombol tanpa tujuan.
   Tanpa JavaScript ketujuhnya tetap bekerja, karena ketujuh tabel hari benar-benar
   ada di /dokter. Hari yang sedang ditampilkan ditandai ISIAN aksen + teks putih
   DAN aria-current, bukan warna saja.
   -------------------------------------------------------------------------- */
.hari-tab { display: flex; flex-wrap: wrap; gap: var(--r2); margin-bottom: var(--r5); }
.hari-tab a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: var(--r2) var(--r4); border-radius: 999px;
  border: 1px solid var(--garis-kendali); color: var(--tinta);
  font-size: var(--t-kecil); font-weight: 600; text-decoration: none;
}
.hari-tab a:hover { background: var(--sentuh); }
.hari-tab a[aria-current] { background: var(--aksen); border-color: var(--aksen); color: #fff; }  /* 4,96:1 */

/* -----------------------------------------------------------------------------
   34. BARIS INFO BERIKON, dipakai untuk rambu, syarat penjamin, dan petunjuk arah.
   Ikonnya --redup (5,51:1), bukan aksen: barisnya sering panjang dan ikon di sini
   berfungsi sebagai penanda jenis, bukan sebagai aksi.
   -------------------------------------------------------------------------- */
.info-baris { display: flex; gap: var(--r3); align-items: flex-start;
              font-size: var(--t-kecil); color: var(--redup); }
.info-baris .ikon { margin-top: 2px; }
.info-baris b { color: var(--tinta); }

/* Rambu batas, muncul di lima tempat dan sengaja seragam. Garis kirinya
   PERINGATAN (7,04:1), bukan aksen: ia bukan promosi, ia batas. */
.rambu {
  display: flex; gap: var(--r3); align-items: flex-start;
  background: var(--peringatan-alas); border-left: 4px solid var(--peringatan);
  border-radius: var(--radius); padding: var(--r3) var(--r4);
  font-size: var(--t-kecil); color: var(--tinta);
}

/* -----------------------------------------------------------------------------
   35. KARTU DOKTER, potret 1:1, cip spesialisasi, dua baris jadwal
   -------------------------------------------------------------------------- */
.dokter { display: grid; }
.dokter .potret, .dokter .potret-inisial { aspect-ratio: 1 / 1; }
.dokter h3 { font-size: 1.0625rem; }
.dokter .cip { margin-block: var(--r2); }
.dokter dl { display: grid; gap: var(--r2); margin: var(--r3) 0 0; font-size: var(--t-kecil); }
.dokter dl > div { display: flex; gap: var(--r2); align-items: flex-start; }
.dokter dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.dokter dd { margin: 0; color: var(--redup); min-width: 0; }

/* Cip berbentuk KALIMAT (pil status di hero, cip "hampir penuh"). Cip biasa memakai
   huruf besar semua dan itu benar untuk satu-dua kata; untuk satu kalimat penuh ia
   berhenti terbaca. Bentuknya sama, hurufnya tidak dipaksa. */
.cip-kalimat {
  display: inline-flex; align-items: center; gap: var(--r2);
  text-transform: none; letter-spacing: 0; font-size: var(--t-kecil);
  padding: var(--r2) var(--r4);
}

/* Lima kolom hanya di layar yang benar-benar cukup lebar. Di bawah itu ia turun ke
   tiga lalu dua, bukan memaksa lima kartu sempit yang judulnya patah tiap kata. */
/* Pil status hero berdiri sendiri di atas eyebrow. p{margin:0} membuat keduanya
   berdempetan sampai terbaca seperti satu blok, terlihat di 390px maupun 1440px,
   dan tidak terlihat sama sekali dari kode. */
.hero .cip { margin-bottom: var(--r3); }

/* Pesan "ini desain contoh" yang muncul sesudah tombol yang memang tidak punya
   tujuan nyata. Tersembunyi sampai ditekan, dan isinya ditulis JS. */
.pesan-contoh { margin-top: var(--r3); }

@media (min-width: 1100px) { .kisi-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 900px) and (max-width: 1099px) { .kisi-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 640px) and (max-width: 899px) { .kisi-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* =============================================================================
   36. TAMBAHAN KHUSUS PAKET 12, bentuk yang tidak ada di situs 05
   ========================================================================== */

/* 36a. Fakta hero: tiga fakta satu baris dipisah garis tegak tipis (W1).
   Garis tegaknya border, BUKAN karakter "|", karakter pemisah ikut terbaca
   pembaca layar sebagai "garis tegak" di tengah kalimat. */
/* ⚠ KISI, BUKAN FLEX-WRAP, dan ini hanya terlihat SESUDAH DIRENDER.
   Sebagai flex-wrap, butir ketiga jatuh ke baris kedua dan MEMBAWA garis tegaknya
   ikut turun, hasilnya garis vertikal menggantung di AWAL baris, memisahkan satu
   butir dari ketiadaan. Terukur di 1440px maupun 390px, dan ketiga audit buta
   terhadapnya. Sebagai kisi tiga kolom tiap butir tetap di kolomnya dan teks
   panjang membungkus di dalam kolom itu; di bawah 640px kisinya jadi satu kolom
   dan garisnya DICABUT, karena pemisah tegak antara dua baris bertumpuk tidak
   memisahkan apa pun. */
.fakta-hero { display: grid; gap: var(--r2); margin-top: var(--r5);
              padding-top: var(--r4); border-top: 1px solid var(--garis); }
.fakta-hero li { font-size: var(--t-kecil); color: var(--redup); min-width: 0; }
@media (min-width: 640px) {
  .fakta-hero { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .fakta-hero li { padding-inline: var(--r4); border-left: 1px solid var(--garis); }
  .fakta-hero li:first-child { padding-left: 0; border-left: 0; }
}

/* 36b. Penyortir niat, tiga kartu setara, tiap kartu berakhir dengan tautan
   berpanah. Panahnya IKON SVG, bukan karakter "→": U+2192 TIDAK ADA di cmap
   Inter maupun Cormorant Garamond subset latin (diperiksa dengan fontTools),
   jadi karakter itu akan jatuh ke huruf sistem dan rupanya melenceng. */
.penyortir .kartu { display: flex; flex-direction: column; }
.penyortir .kartu .tautan-panah { margin-top: auto; padding-top: var(--r4); }
.penyortir .kartu p { flex: 1; }

/* 36c. Kartu "yang bisa dan tidak bisa dicapai", baris terakhir DILARANG jadi
   catatan kaki. Ukurannya sama persis dengan baris di atasnya, hanya dipisah
   garis dan diberi label beraksen. Brief menyebut aturan ini dua kali. */
.kartu-batas dl { display: grid; gap: var(--r3); margin: var(--r3) 0 0; }
.kartu-batas dt { font-size: var(--t-kecil); font-weight: 600; color: var(--redup);
                  margin-bottom: 2px; }
.kartu-batas dd { margin: 0; font-size: var(--t-kecil); color: var(--tinta); }
.kartu-batas .batas { border-top: 1px solid var(--garis); padding-top: var(--r3); }
.kartu-batas .batas dt { display: flex; align-items: center; gap: var(--r2);
                         color: var(--aksen); }   /* 4,71:1 */

/* 36d. Tabel efek samping, empat kolom teks panjang. Tinggi baris dilonggarkan
   dan white-space dibiarkan normal supaya sel panjang tetap terbaca. Kolom
   pertama diberi lebar minimum supaya nama perawatan tidak patah tiap kata. */
.tabel-efek td, .tabel-efek th { height: auto; vertical-align: top; padding-block: var(--r4); }
.tabel-efek th { white-space: normal; }
.tabel-efek td:first-child { font-weight: 600; min-width: 13ch; }
.tabel-efek td:not(:first-child) { font-variant-numeric: normal; }

/* 36e. Tabel harga, kolom durasi dan harga rata KANAN dan tabular (DESIGN.md:
   harga dan durasi adalah DATA). Baris judul kategori memakai --aksen sebagai
   teks (4,71:1), bukan --aksen-isi (2,85:1). */
.tabel-harga td:nth-child(2), .tabel-harga th:nth-child(2),
.tabel-harga td:nth-child(3), .tabel-harga th:nth-child(3) { text-align: right; }
.tabel-harga td:nth-child(2), .tabel-harga td:nth-child(3) {
  font-family: var(--f-isi); font-weight: 600; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tabel-harga .kategori td {
  background: var(--sentuh); color: var(--aksen); font-weight: 600;   /* 4,53:1 */
  text-align: left; font-size: var(--t-kecil); letter-spacing: .02em;
}

/* 36f. Section pernyataan "yang sengaja tidak ada", alasnya sedikit berbeda dari
   --latar supaya terbaca sebagai pernyataan, bukan blok produk (W10). */
.bagian-pernyataan { background: var(--aksen-alas); }
.bagian-pernyataan .kartu { background: var(--kertas); }

/* 36g. Baris alat: ikon, nama mesin tebal, satu baris kegunaan. */
.alat-baris { display: flex; gap: var(--r3); align-items: flex-start;
              padding-block: var(--r3); border-bottom: 1px solid var(--garis); }
.alat-baris:last-child { border-bottom: 0; }
.alat-baris b { display: block; font-size: var(--t-isi); }
.alat-baris span { display: block; font-size: var(--t-kecil); color: var(--redup); margin-top: 2px; }

/* 36h. Kartu catatan bertepi aksen (W6). Border --aksen 4,71:1, di atas lantai
   3:1 untuk garis yang harus terlihat. Border ber-#C08497 akan 2,85:1 dan gagal. */
.kartu-catatan { border: 1px solid var(--aksen); border-radius: var(--radius);
                 padding: var(--r5); background: var(--kertas); margin-top: var(--r5); }
.kartu-catatan b { display: flex; align-items: center; gap: var(--r2); margin-bottom: var(--r3); }
.kartu-catatan p + p { margin-top: var(--r3); }
.kartu-catatan p { font-size: var(--t-kecil); color: var(--redup); }

/* 36i. Kisi kebijakan, delapan baris sebagai dua kolom berisi empat. */
.kebijakan { display: grid; gap: var(--r5); }
@media (min-width: 768px) { .kebijakan { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--r5) var(--r6); } }
.kebijakan > * { min-width: 0; }

/* 36j. Etalase komponen, kotak berlabel supaya tiap keadaan bisa disebut namanya. */
.etalase { display: grid; gap: var(--r5); }
.etalase-kotak { border: 1px solid var(--garis); border-radius: var(--radius);
                 padding: var(--r5); background: var(--kertas); }
.etalase-nama { font-size: var(--t-label); font-weight: 600; letter-spacing: .1em;
                text-transform: uppercase; color: var(--redup); margin-bottom: var(--r3); }

/* 36k. Cip durasi bergaris pada timeline (W9). */
.langkah .cip-garis { margin-top: var(--r3); }

/* 36l. Kartu dokter: potret 4:5, bukan 1:1, potret hasil olahan berukuran
   620x775 dan memaksanya jadi bujur sangkar memotong dagu di lebar sempit. */
.dokter .potret { aspect-ratio: 4 / 5; }
.dokter .potret-inisial { aspect-ratio: 4 / 5; }

/* 36m. Foto lebar section alat mengikuti rasio berkasnya (1200x670). */
.alat-tata .gambar-lebar { aspect-ratio: 16 / 9; }

/* 36n. ⚠ JEBAKAN NOMOR 2 DI RESEP, DITUTUP DI SATU TEMPAT.
   Tiap kotak yang memangkas isinya WAJIB berposisi. Keturunan position:absolute, dan .hanya-layar-baca adalah salah satunya, mengambil blok penampung dari
   LELUHUR BERPOSISI TERDEKAT, jadi di dalam kotak yang tidak berposisi ia LOLOS
   dari pemangkasan dan ikut menarik lebar dokumen. Satu span selebar 1px pernah
   menarik lebar halaman 263px melewati layar 390px, dan yang dilaporkan meluber
   bukan span itu. */
.tabel-bungkus, .carousel, .sheet, .artikel-gambar, .hero-foto { position: relative; }

/* 36o. Kolom tabel harga yang bisa digulir tetap punya penanda: caption dibaca
   pembaca layar, dan di bawah 768px kotaknya memang bergulir mendatar. */
.tabel-bungkus { -webkit-overflow-scrolling: touch; }