/* ============================================================
   VARIABEL — prefix --hh- agar tidak bentrok dengan Bootstrap
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

/* ============================================================
   FONT LOKAL — "Comic Strip" (wordmark logo)
   ============================================================
   Dipakai KHUSUS untuk tulisan nama merek "Happy Holidays" — bukan
   pengganti Poppins/Inter. aturan-kerja 1.3 "tidak ada font ketiga"
   berbicara soal judul & isi SEKSI; logo/wordmark memang lazim berhuruf
   sendiri, terpisah dari sistem tipografi konten (persis logo smiley yang
   juga tidak ikut token warna seksi). Dipasang di tiga tempat lewat blok
   36: baris logo header (.brand-logo), logo footer (.hh-foot__brand).

   Berkas: fonts/comic-strip-regular.ttf — disalin 11 September 2026 dari
   D:\font\Comic Strip Regular\designgraffiticomicstrip.ttf, mengikuti
   gaya wordmark lama "HAPPY HOLIDAYS" merah bergelembung komik.
   ============================================================ */
@font-face {
  font-family: "Comic Strip";
  src: url("../fonts/comic-strip-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Kode root lama */
/* :root {
  --hh-navbar-bg: #0f7b6c;
  --hh-navbar-color: #fff;
  --hh-navbar-hover: rgb(0 0 0 / 20%);
} */

/* ============================================================
   PALET C — Merah–Kuning
   Takaran: krem/putih 70% · navy 20% · merah 7% · kuning 3%
   ============================================================ */
:root {
  --hh-red:       #C8102E;   /* merah wordmark  — navbar, label   */
  --hh-red-dark:  #9B0C23;   /* hover / tekan                     */
  --hh-yellow:    #FFD400;   /* kuning smiley   — tombol CTA      */
  --hh-ink:       #1B2A3A;   /* teks & seksi gelap                */
  --hh-surface:   #FFF9EC;   /* krem hangat     — seksi selingan  */
  --hh-muted:     #6B7280;   /* teks sekunder                     */
  --hh-wa:        #25D366;   /* hijau WhatsApp                    */
  --hh-line:      #E7E2D6;   /* garis pemisah                     */
  --hh-white:     #FFFFFF;

  /* Latar kuning pudar untuk hover kartu (.hh-svc/.hh-doc/.hh-team, 17
     September 2026) — bukan --hh-yellow penuh: teks abu (--hh-muted) di
     atas kuning penuh kontrasnya di bawah 3:1. Satu sumber di sini supaya
     ketiga kartu tetap sewarna kalau nilainya nanti diubah. */
  --hh-hover-kuning: color-mix(in srgb, var(--hh-yellow) 18%, var(--hh-white));

  /* komponen --hh-ink, dipakai saat butuh alpha: rgb(var(--hh-ink-rgb) / 90%) */
  --hh-ink-rgb:    27 42 58;
  --hh-white-rgb: 255 255 255;

  /* peran di navbar — dipakai aturan yang sudah ada */
  --hh-navbar-bg:    var(--hh-red);
  --hh-navbar-color: #fff;
  --hh-navbar-hover: rgb(0 0 0 / 18%);

}

/* Ditulis :root:root agar menang atas inline style Cassiopeia */
:root:root {
  --cassiopeia-font-family-headings: "Poppins", system-ui, sans-serif;
  --cassiopeia-font-family-body:     "Inter", system-ui, sans-serif;
  --cassiopeia-font-weight-headings: 700;
  --cassiopeia-font-weight-normal:   400;
}


/* ============================================================
   TOKEN JARAK · HURUF · BENTUK
   Nilai baku dari aturan-kerja.md bagian 1.2–1.4.
   Sudah dipanggil blok 10 (scroll-margin) dan blok 11 (dropdown);
   akan dipakai seluruh seksi halaman mulai blok 12.
   ============================================================ */
:root {
  /* jarak — hanya tujuh nilai, tidak ada nilai kedelapan */
  --sp-1: .25rem;    /*  4px */
  --sp-2: .5rem;     /*  8px */
  --sp-3: 1rem;      /* 16px */
  --sp-4: 1.5rem;    /* 24px */
  --sp-5: 2rem;      /* 32px */
  --sp-6: 3rem;      /* 48px — jarak antar seksi di mobile  */
  --sp-7: 4.5rem;    /* 72px — jarak antar seksi di desktop */

  /* Jarak tepi baku header. 100% dihitung terhadap .container-header
     (selebar layar), jadi nilainya sama untuk bar merah maupun baris
     logo — itu yang membuat tepi kiri & kanan keduanya sejajar. */
  --hh-inset: max(var(--sp-3), (100% - 1320px) / 2);

  /* huruf */
  --fs-xs:   .78rem;
  --fs-sm:   .875rem;
  --fs-base: 1rem;
  --fs-lg:   1.15rem;
  --fs-h3:   1.35rem;
  --fs-h2:   clamp(1.6rem, 3.2vw, 2.2rem);
  --fs-h1:   clamp(2rem, 5vw, 3.2rem);

  /* Bentuk. Seluruh situs bersudut siku — keputusan desain, bukan kelalaian.
     Nilai lengkung aslinya disimpan di komentar supaya bisa dikembalikan
     dengan mengubah tiga angka ini saja, tanpa menyentuh satu aturan pun.
     Semula: --r-sm 6px · --r-md 12px · --r-pill 999px */
  --r-sm:   0;       /* input, label      */
  --r-md:   0;       /* kartu             */
  --r-pill: 0;       /* tombol CTA, badge */

  --shadow-card: 0 2px 10px rgb(27 42 58 / 8%);
  --shadow-lift: 0 8px 24px rgb(27 42 58 / 14%);
}
/* ===== 1. BARIS LOGO ===== */
.container-header .site-description {
  color: var(--headercolor);
  opacity: .75;
}

/* ===== 2. BAR MENU: berwarna + melebar penuh ===== */
.container-header .container-nav {
  background-color: var(--hh-navbar-bg);
  max-width: none;
  align-items: stretch;
  padding-block: 0;
  padding-inline: var(--hh-inset);
}

.container-header .container-nav .mod-menu {
  color: var(--hh-navbar-color);
}

/* <nav> pembungkus dari layout collapse-metismenu */
.container-header .container-nav nav {
  flex: 1;
  margin-top: 0;
  padding: 0;
}

/* ===== 3. ITEM MENU ===== */
.container-header .mod-menu > li + li {
  margin-left: 0;
}

.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span {
  display: flex;
  align-items: center;
  position: relative;
  padding: .8rem 1rem;
  font-size: .875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
  text-decoration: none;
}

.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li.active > a {
  background-color: transparent;
  text-decoration: none;
}

/* garis bawah item aktif — aturan metismenu Cassiopeia lebih spesifik (0,4,1) */
.container-header .metismenu.mod-menu .metismenu-item.active > a {
  text-decoration: none;
}

/* matikan garis bawaan Cassiopeia — kita gambar sendiri di bawah */
.container-header .mod-menu > li::after,
.container-header .metismenu > li > button::before {
  display: none;
}

/* garis bawah yang melebar dari tengah ke tepi */
.container-header .mod-menu > li > a::after {
  content: "";
  display: block;
  opacity: 1;
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 0;
  height: 3px;
  background: currentColor;
  transition: left .18s ease, right .18s ease;
}

.container-header .mod-menu > li > a:hover::after,
.container-header .mod-menu > li.active > a::after {
  left: 0;
  right: 0;
}

@media (width >= 992px) {
  .container-header .mod-menu > li {
    display: flex;
  }
}

/* ===== 4. DAFTAR | LOGIN ===== */
/* tiga lapis harus flex: TinyMCE menyisipkan .mod-custom dan <p> */
.container-header .container-search,
.container-header .container-search .mod-custom,
.container-header .container-search .mod-custom > p {
  display: flex;
  align-items: stretch;
  margin: 0;
}

.container-header .container-search a {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .8rem .9rem;
  font-size: .875rem;
  color: var(--hh-navbar-color);
  font-weight: 600;
  text-decoration: none;
  transition: opacity .15s;
}

.container-header .container-search a:hover {
  opacity: .7;
}

/* ikon digambar lewat CSS, kebal dari pembersihan TinyMCE */
.container-header .container-search a::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-inline-end: .45rem;
}

.container-header .container-search a[href*="registration"]::before {
  content: "\f007";
}

.container-header .container-search a[href*="login"]::before {
  content: "\f2f6";
}

/* ============================================================
   7. PERAPIAN
   ============================================================ */

/* <li> metismenu punya padding .5em 1em & font 1.1rem bawaan Cassiopeia */
.container-header .metismenu.mod-menu .metismenu-item {
  padding: 0;
  font-size: inherit;
}

/* Baris logo & info memakai rumus inset yang sama dengan bar merah.
   max-width dilepas karena Cassiopeia mengunci grid-child di 1320px
   tanpa jarak tepi minimum — itu sumber selisih 16px di bawah 1352px.
   Tepi mulai ditambah --sp-3 agar brand sejajar dengan TEKS menu,
   yang memang menjorok 1rem oleh padding <a>-nya sendiri. */
.container-header .grid-child:not(.container-nav) {
  max-width: none;
  padding-inline: calc(var(--hh-inset) + var(--sp-3)) var(--hh-inset);
}

/* ===== TOMBOL PESAN SEKARANG ===== */
.container-header .container-search a.btn-pesan {
  /* background: #fff;
  color: var(--hh-navbar-bg); */
  background: var(--hh-yellow);
  color: var(--hh-ink);
  border-radius: var(--r-pill);
  padding: .45rem 1.2rem;
  align-self: center;
  transition: transform .15s, box-shadow .15s;
}

.container-header .container-search a.btn-pesan:hover {
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgb(0 0 0 / 25%);
}

/* ikon WhatsApp — keluarga font & weight berbeda dari ikon solid */
.container-header .container-search a.btn-pesan::before {
  content: "\f232";
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
}

/* ============================================================
   8. LOGO SMILEY DI NAVBAR
   ============================================================ */
/* Grid 2 kolom: ikon di kolom kiri melintasi dua baris,
   judul & tagline di kolom kanan sehingga tepi kirinya sejajar */
.container-header .navbar-brand {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "ikon judul"
    "ikon tagline";
  column-gap: .6rem;
  align-items: center;
  justify-items: start;
}

.container-header .navbar-brand::before {
  content: "";
  grid-area: ikon;
  width: 1.15em;
  height: 1.15em;
  background: url("../images/logo-smiley.png") center / contain no-repeat;
}

/* Warna merah ditambahkan 16 September 2026 (permintaan warna brand).
   Perlu selektor 3-kelas karena Cassiopeia dan colors.css sendiri sudah
   punya ".container-header .navbar-brand a { color: var(--headercolor) }"
   (spesifisitas 0,2,1) yang menang atas ".container-header .brand-logo"
   biasa (0,2,0) — makanya ditambah ".navbar-brand" di sini supaya jadi
   0,3,0 dan benar-benar menang. Font Comic Strip cuma satu warna (bukan
   color-font — sudah diverifikasi baca tabel TTF-nya): nilai color di
   sini mewarnai SELURUH bentuk huruf termasuk siluet/bayangan komiknya
   sendiri, bukan dua lapis warna terpisah seperti gambar acuan lama.
   Draf dua-warna (merah utama + siluet hitam terpisah, vektor sungguhan)
   ada di outputs/happy-holidays-wordmark-merah-siluet-hitam.svg kalau
   nanti benar-benar mau tampilan dua warna. */
.container-header .navbar-brand .brand-logo {
  grid-area: judul;
  color: var(--hh-red);
}

.container-header .site-description {
  grid-area: tagline;
}

/* ============================================================
   9. INFO KONTAK DI KANAN HEADER
   ============================================================ */

/* Cassiopeia memaksa warna putih di baris ini — tak terlihat di header putih */
.container-header .container-below-top {
  color: var(--hh-ink);
}

.container-header .header-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.35;
}

.container-header .header-info .hi-phone {
  font-family: "Poppins", sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--hh-red);
  text-decoration: none;
}

.container-header .header-info .hi-phone::before {
  content: "\f095";                      /* fa-phone */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: .85em;
  margin-inline-end: .4rem;
}

.container-header .header-info .hi-hours {
  font-size: .85rem;
  color: var(--hh-muted);
}

/* ============================================================
   10. NAVIGASI ANCHOR (one-page)
   ============================================================ */
html {
  scroll-behavior: smooth;
}

.hh-sec {
  scroll-margin-top: var(--sp-4);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}


/* ============================================================
   11. DROPDOWN SUBMENU
   ============================================================ */

/* tombol induk disamakan bentuknya dengan item menu biasa */
.container-header .metismenu.mod-menu > li > .mm-toggler {
  padding: .8rem 1rem;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
}

/* panel dropdown diposisikan tepat di bawah tombol */
.container-header .metismenu.mod-menu > li > .mm-collapse {
  top: 100%;
  left: 0;
}

.container-header .metismenu.mod-menu .mm-collapse {
  background-color: var(--hh-red-dark);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  box-shadow: var(--shadow-lift);
  padding-block: var(--sp-1);
}

/* item di dalam dropdown */
.container-header .metismenu.mod-menu .mm-collapse > li > a {
  display: flex;
  padding: .6rem 1rem;
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 500;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s;
}

.container-header .metismenu.mod-menu .mm-collapse > li > a:hover {
  background-color: rgb(0 0 0 / 22%);
}

/* --- Desktop: naikkan baris info agar sejajar dengan logo --- */
@media (width >= 992px) {
  .container-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  /* baris logo dan baris info ditumpuk di sel grid yang sama */
  .container-header > .grid-child:not(.container-nav) {
    grid-row: 1;
    grid-column: 1;
  }

  .container-header .container-nav {
    grid-row: 2;
    grid-column: 1;
  }

  .container-header .container-below-top {
    justify-content: flex-end;
    align-items: center;
  }

  /* sisi kanan baris logo dibuat tembus klik agar telepon tetap bisa ditekan */
  .container-header > .grid-child:not(.container-nav):not(.container-below-top) {
    pointer-events: none;
  }

  .container-header .navbar-brand {
    pointer-events: auto;
  }
}


/* ============================================================
   12. PONDASI SEKSI
   ============================================================ */

/* Seksi dilebarkan sampai tepi layar. Cassiopeia sudah punya
   .full-width (template.css baris 14866), tapi kelas itu tidak bisa
   ditambahkan dari panel modul — jadi posisinya yang ditunjuk.

   HANYA posisi ini yang bisa. main-top & main-bottom TIDAK ada di sini
   karena index.php baris 211-218 merendernya di DALAM .container-component,
   bukan sebagai anak langsung .site-grid — jadi keduanya tidak pernah bisa
   melebar penuh. Seksi beranda memakai lima posisi di bawah, beberapa
   modul berbagi satu posisi dan diurutkan lewat kolom Ordering. */
.site-grid > .container-banner,
.site-grid > .container-top-a,
.site-grid > .container-top-b,
.site-grid > .container-bottom-a,
.site-grid > .container-bottom-b {
  grid-column: full-start / full-end;

  /* .grid-child bawaan Cassiopeia adalah flex ARAH BARIS, sehingga dua modul
     dalam satu posisi berjajar ke samping dan masing-masing hanya separuh
     lebar. Seksi kita selalu selebar penuh, jadi arahnya dibalik ke kolom —
     inilah yang membuat Ordering di panel modul benar-benar menumpuk. */
  flex-direction: column;

  /* Cassiopeia memberi .container-banner `margin-bottom: 2rem`
     (template.min.css, spesifisitas 0,1,0). Di situs ini posisi banner
     berisi hero selebar layar, sehingga 2rem itu muncul sebagai pita
     putih 32px antara hero dan seksi di bawahnya — putih, bukan krem,
     karena marginnya di luar kedua seksi. Jarak antar seksi sudah diurus
     `padding-block: var(--sp-7)` milik .hh-sec, jadi margin ini murni
     sisa dan dinolkan. Selektor di atas bernilai (0,2,0) — menang tanpa
     !important. */
  margin-bottom: 0;
}

/* Bungkus modul dinetralkan. DUA lapis, bukan satu seperti di dokumen:
   .card memberi latar, garis, sudut 4px dan margin 8px;
   .card-body memberi padding 16px. */
.site-grid .card,
.site-grid .card > .card-body {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* Kerangka baku tiap seksi — aturan-kerja 3.1 */
.hh-sec {
  padding-block: var(--sp-7);
}

.hh-sec--surface {
  background: var(--hh-surface);
}

.hh-sec--ink {
  background: var(--hh-ink);
  color: var(--hh-white);
}

/* Pembatas isi. Rumusnya sama dengan header, jadi judul seksi sejajar
   dengan tombol navbar dan dengan isi artikel di kolom utama. */
.hh-wrap {
  padding-inline: var(--hh-inset);
}

.hh-eyebrow {
  margin: 0 0 var(--sp-2);
  color: var(--hh-red);
  font-family: var(--cassiopeia-font-family-headings);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.hh-sec--ink .hh-eyebrow {
  color: var(--hh-yellow);
}

.hh-title {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-h2);
  line-height: 1.15;
}

.hh-lead {
  max-width: 62ch;
  margin: 0 0 var(--sp-6);
  color: var(--hh-muted);
  font-size: var(--fs-lg);
}

.hh-sec--ink .hh-lead {
  color: rgb(var(--hh-white-rgb) / 78%);
}

.hh-grid {
  display: grid;
  gap: var(--sp-4);
  /* Di bawah 992px jumlah kolom ditentukan lebar kartu, bukan titik henti
     baru — aturan-kerja 1.5 melarang menambah breakpoint. Hasilnya:
     1 kolom sampai ~695px, 2 kolom 696-991px (tablet). */
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

@media (width >= 992px) {
  .hh-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .hh-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   13. KARTU DESTINASI
   Pola kartu klasik: foto di atas tanpa peredup, teks di bawahnya.
   Gradien dan judul bertumpuk sudah dibuang — pada foto rombongan
   yang ramai, peredup itu menutupi justru bagian yang jadi buktinya.
   ============================================================ */
.hh-dest {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hh-line);
  background: var(--hh-white);
  box-shadow: var(--shadow-card);
  color: var(--hh-ink);
  text-decoration: none;
  transition: box-shadow .2s ease, transform .2s ease;
}

.hh-dest:hover {
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
}

/* semua baris disamakan tingginya, bukan hanya kartu dalam satu baris */
.hh-grid:has(.hh-dest) {
  grid-auto-rows: 1fr;
}

/* pembungkus tersendiri: pembesaran saat hover dipangkas di sini,
   supaya foto tidak melebar menutupi teks di bawahnya. Garis bawahnya
   memisahkan area foto dari teks, karena sisi foto kini seputih kartu. */
.hh-dest__media {
  overflow: hidden;
  border-bottom: 1px solid var(--hh-line);
  background: var(--hh-white);
}

/* Rasio foto aslinya terentang 1,373-1,730 — selisih 26%. Supaya semua
   gambar tampil seukuran, berkasnya sudah dipotong ke 31:20 (1,55).
   Angka itu dipilih karena berada di tengah rentang, jadi biayanya paling
   murah: rata-rata 6,9% dan yang terparah 11,4%. Kotak 16:9 akan membuang
   sampai 22,8%. Karena rasio berkas sudah sama dengan rasio kotak,
   `cover` di sini tidak memotong apa pun lagi. */
.hh-dest__img {
  display: block;
  width: 100%;
  aspect-ratio: 31 / 20;
  object-fit: cover;
  transition: transform .45s ease;
}

.hh-dest:hover .hh-dest__img {
  transform: scale(1.05);
}

.hh-dest__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--sp-4);
}

.hh-dest__where {
  margin: 0 0 var(--sp-1);
  color: var(--hh-red);
  font-family: var(--cassiopeia-font-family-headings);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.hh-dest__name {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-h3);
  line-height: 1.25;
}

.hh-dest__desc {
  margin: 0 0 var(--sp-3);
  color: var(--hh-muted);
  font-size: var(--fs-sm);
  line-height: 1.65;
}

/* didorong ke dasar kartu supaya sejajar walau panjang teks berbeda */
.hh-dest__cta {
  margin-top: auto;
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* ikon digambar lewat CSS — aturan 3.5 */
.hh-dest__cta::before {
  content: "\f232";
  margin-inline-end: .45em;
  color: var(--hh-wa);
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
}

.hh-dest:hover .hh-dest__cta {
  color: var(--hh-red);
}

@media (prefers-reduced-motion: reduce) {
  .hh-dest,
  .hh-dest__img { transition: none; }
  .hh-dest:hover { transform: none; }
  .hh-dest:hover .hh-dest__img { transform: none; }
}

/* ============================================================
   14. KARTU LAYANAN
   ============================================================ */
.hh-svc {
  display: block;
  padding: var(--sp-5);
  border: 1px solid var(--hh-line);
  background: var(--hh-white);
  color: inherit;
  text-decoration: none;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease,
    background-color .2s ease;
}

.hh-svc:hover {
  border-color: transparent;
  background: var(--hh-hover-kuning);
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
}

.hh-svc__title {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-h3);
  line-height: 1.25;
}


/* Ikon berupa gambar asli, bukan lagi content: attr() + Font Awesome
   (16 September 2026 — sama alasannya dengan .hh-daftar-ikon di blok 28:
   <img> aman dari pembersihan TinyMCE, lihat panduan-merawat.md). Sumber
   dari D:\asset_joomla_happyholidays\layanan\{no_rounded_no_text,with-visa}.
   Pemetaan TIDAK 1:1 dengan judul kartu — diputuskan bersama user:
   "Paket Tour Lengkap" pakai gambar pesawat (tiket-pesawat.png) dan
   "Dokumen Lainnya" pakai gambar rombongan (paket-tour.png), karena set
   ikon yang ada tidak punya gambar dokumen sendiri. Paspor dan Visa
   masing-masing dapat gambar sendiri (paspor.png / visa.png) — beda dari
   .hh-daftar-ikon yang masih pakai satu gambar gabungan paspor-visa.png. */
.hh-svc__ikon {
  flex: none;
  display: block;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: var(--r-pill);
}


.hh-svc__desc {
  margin: 0;
  color: var(--hh-muted);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  .hh-svc { transition: none; }
  .hh-svc:hover { transform: none; }
}

/* ============================================================
   15. TIM & KONTAK
   ============================================================ */
/* Kartu sengaja bersudut siku — tanpa border-radius. */
.hh-team {
  /* Warna latar kotak foto tim. Merah adalah bawaannya; dua warna lain
     diberikan lewat nth-child di bawah. Ditaruh di sini, bukan langsung
     di ::before, supaya yang berganti cuma satu nilai. */
  --hh-inisial: color-mix(in srgb, var(--hh-red) 20%, var(--hh-white));

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-4);
  border: 1px solid var(--hh-line);
  background: var(--hh-white);
  text-align: center;
  transition: background-color .2s ease;
}

/* Kartunya sendiri bukan tautan (cuma tombol WhatsApp di dalamnya yang
   bisa diklik), tapi tetap diberi hover — sama seperti .hh-svc/.hh-doc,
   17 September 2026 — supaya ketiga jenis kartu "pilih satu" di beranda
   terasa satu sistem yang sama, bukan tiga perilaku berbeda. */
.hh-team:hover {
  background: var(--hh-hover-kuning);
}

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

/* Dulu inisial satu huruf lewat CSS content: attr(data-inisial) — diganti
   16 September 2026 dengan foto customer service generik (sama untuk
   ketiga orang, bukan foto asli tiap orang), dari
   D:\asset_joomla_happyholidays\kontak\customer-service.png, disusutkan
   ke images/assets/tim/. Tetap lewat background-image di ::before, bukan
   <img> di HTML: fotonya cuma dekorasi berulang yang sama untuk semua
   kartu, jadi tidak perlu tiga alt="" kosong di HTML, dan warna kotak
   nth-child di bawah tetap tampak dari balik latar transparan foto. */
.hh-team::before {
  content: "";
  display: block;
  width: 4.5rem;
  height: 4.5rem;
  margin-bottom: var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--hh-inisial) url("../../../../../images/assets/tim/customer-service.png?v=20260917") bottom / cover no-repeat;
}

/* Tiga warna bergilir, bukan satu aturan per orang.

   Versi lama proyek ini pernah memakai .hh-team--lina, .hh-team--mely,
   .hh-team--ely — satu kelas per orang, dan menambah orang keempat berarti
   membuka user.css. Itu yang dihapus 10 September (panduan-merawat bagian 6),
   jadi jangan dihidupkan lagi dalam bentuk lain.

   nth-child menjaganya: orang keempat memakai warna pertama lagi, kesepuluh
   juga, tanpa satu baris pun ditambahkan.

   color-mix dipakai supaya nilai warnanya tetap satu sumber: kalau --hh-red
   diganti, ketiga kadar di bawah ikut sendiri. Cara lain — menyimpan ulang
   tiap warna sebagai tiga angka rgb seperti --hh-ink-rgb — berarti menulis
   nilai yang sama di dua tempat, dan itu yang dilarang aturan-kerja 1.1.
   Situs ini memang sudah menuntut peramban modern (:has() di blok 16 dan 99,
   media query rentang di seluruh berkas), jadi color-mix tidak menambah
   syarat baru.

   Kadar tiap warna berbeda karena kuning jauh lebih terang daripada merah
   pada kepekatan yang sama, disetel supaya ketiganya sama kuat dilihat —
   luminansi 0,69 · 0,80 · 0,74. (Angka rasio kontras huruf-navy yang dulu
   ada di sini sudah tidak relevan sejak ::before berhenti menulis huruf —
   16 September 2026, lihat komentar di atas — tapi luminansi tiga warnanya
   sendiri belum pernah diubah.) */
.hh-team:nth-child(3n+2) {
  --hh-inisial: color-mix(in srgb, var(--hh-yellow) 55%, var(--hh-white));
}

.hh-team:nth-child(3n+3) {
  --hh-inisial: color-mix(in srgb, var(--hh-wa) 38%, var(--hh-white));
}


.hh-team__name {
  margin: 0;
  font-size: var(--fs-h3);
}

.hh-team__phone {
  margin: 0;
  color: var(--hh-muted);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

/* Teks memakai --hh-ink, bukan putih. Putih di atas #25D366 hanya
   1,98:1 — masalah yang sama dengan putih di atas kuning. */
.hh-team__wa {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 2.75rem;
  margin-top: var(--sp-2);
  padding-inline: var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--hh-wa);
  color: var(--hh-ink);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  transition: filter .15s ease;
}

.hh-team__wa::before {
  content: "\f232";
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
  font-size: 1.15em;
}

/* color WAJIB diulang saat :hover — tanpa itu a:hover Cassiopeia (0,1,1)
   menang atas .hh-team__wa (0,1,0) dan tulisannya jadi merah di atas hijau.
   Penjelasan lengkap di blok 21, di atas .hh-hero__wa:hover. */
.hh-team__wa:hover {
  filter: brightness(.93);
  color: var(--hh-ink);
}

.hh-office {
  margin: var(--sp-6) 0 0;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--hh-line);
  color: var(--hh-muted);
  font-size: var(--fs-sm);
  text-align: center;
}

.hh-office a {
  color: inherit;
}

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

/* ============================================================
   20. SUDUT SIKU — MENETRALKAN RADIUS BOOTSTRAP
   ============================================================ */

/* Token --r-* di blok 0 hanya mengurus komponen buatan kita sendiri.
   Sisanya datang dari Bootstrap bawaan Cassiopeia.

   Perhatikan namanya: Cassiopeia mem-build Bootstrap TANPA awalan bs-,
   sehingga --bs-border-radius menjadi --border-radius. Ini jebakan yang
   sama persis dengan --navbar-color di aturan-kerja 2.1 — bedanya kali
   ini tabrakannya memang kita kehendaki. Menyetel skala global di sini
   membuat 104 aturan Bootstrap ikut siku sekaligus: alert, badge,
   pagination, dropdown, card, accordion, modal. */
:root:root {
  --border-radius:      0;
  --border-radius-sm:   0;
  --border-radius-lg:   0;
  --border-radius-xl:   0;
  --border-radius-xxl:  0;
  --border-radius-pill: 0;
}

/* Dua komponen tidak menurunkan nilainya dari skala di atas — keduanya
   menulis .25rem langsung di dalam aturannya sendiri, sehingga harus
   ditimpa di tempatnya. Ditemukan dengan memindai computed style tiap
   elemen di beranda, halaman daftar artikel, dan halaman artikel. */
.btn {
  --btn-border-radius: 0;
}

.navbar-toggler {
  --navbar-toggler-border-radius: 0;
}

/* ============================================================
   23. GALERI PROMO — REEL YANG BISA DIGESER
   ============================================================ */

/* Judul yang hanya untuk pembaca layar dan mesin pencari: tetap ada di DOM,
   tidak memakan ruang. clip-path lebih aman daripada display:none — yang
   terakhir membuat isinya ikut hilang dari pohon aksesibilitas.

   Ditulis ganda menjadi (0,2,0) supaya menang atas aturan komponen berkelas
   tunggal yang ditulis lebih belakangan — misalnya .hh-title yang menyetel
   position:relative dan padding-bottom untuk garis merahnya. Utilitas harus
   menang di mana pun ia dipasang; ini cara menaikkannya tanpa !important,
   sesuai aturan-kerja 2.3. */
.hh-sr-only.hh-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.hh-reel {
  position: relative;
}

/* Inti penggeserannya. scroll-snap membuat tiap flyer berhenti rapi di tepi
   kiri, dan di layar sentuh geser sudah jadi gerakan bawaan browser — tidak
   ada pustaka carousel yang perlu dimuat. */
.hh-reel__jalur {
  display: flex;
  gap: var(--sp-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;

  /* Batang gulir bawaan disembunyikan.

     Semula "thin". Chrome di Windows tetap menggambar batang setinggi 12px
     yang selalu terlihat — sebuah garis abu-abu selebar jalur, tepat di
     bawah deretan flyer. Bentuknya tidak ada di tempat lain di situs ini,
     dan mata membacanya sebagai cacat, bukan sebagai alat.

     Yang hilang cuma gambarnya, bukan kemampuannya: jalur ini tetap bisa
     digeser dengan jari, roda mouse mendatar, panah papan ketik (jalur
     punya tabindex), dan dua tombol panah di desktop. Tandanya pun tetap
     ada — flyer berikutnya sengaja MENGINTIP di tepi kanan (lihat
     .hh-reel__item). */
  scrollbar-width: none;              /* Firefox */

  /* ruang bagi bayangan kartu supaya tidak terpotong tepi jalur */
  padding-block: var(--sp-1);
}

/* Chrome, Edge, Safari — tidak menuruti scrollbar-width sebelum Chrome 121,
   dan pada versi lama hanya bentuk ini yang dipatuhi. */
.hh-reel__jalur::-webkit-scrollbar {
  display: none;
}

.hh-reel__jalur:focus-visible {
  outline: 3px solid var(--hh-red);
  outline-offset: 4px;
}

/* Lebar dipilih agar flyer berikutnya selalu MENGINTIP di tepi kanan. Tanpa
   itu tidak ada tanda bahwa reel masih bisa digeser. Di 375px, 78vw menyisakan
   ~22% untuk yang berikutnya; di jalur isi 1320px, 400px memuat 3,2 kartu. */
.hh-reel__item {
  flex: 0 0 clamp(240px, 78vw, 400px);
  scroll-snap-align: start;
  display: block;
  border: 1px solid var(--hh-line);
  background: var(--hh-white);
  line-height: 0;
  transition: box-shadow .2s ease;
}

.hh-reel__item:hover,
.hh-reel__item:focus-visible {
  box-shadow: var(--shadow-lift);
}

/* Kotak dikunci 1:1 supaya semua ubin sama tinggi, tapi gambarnya contain —
   BUKAN cover. Flyer memuat harga dan tanggal sampai ke tepi; memotongnya
   akan membuang justru yang dicari pembaca. Sebelas dari tiga belas berkas
   memang sudah 1:1, dua sisanya 4:5 dan hanya menyisakan pita tipis di sisi. */
.hh-reel__img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

/* ----- panah ----- */

/* Disembunyikan secara bawaan: tanpa JavaScript panah tidak berguna, dan
   reel tetap bisa digeser. Kelas --siap dipasang oleh skrip. */
.hh-reel__nav {
  display: none;
}

@media (width >= 992px) {
  .hh-reel--siap .hh-reel__nav {
    position: absolute;
    top: 50%;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    transform: translateY(-50%);
    border: 0;
    background: var(--hh-red);
    color: var(--hh-white);
    cursor: pointer;
    transition: background-color .15s ease, opacity .15s ease;
  }

  .hh-reel--siap .hh-reel__nav:hover:not(:disabled) {
    background: var(--hh-red-dark);
  }

  .hh-reel--siap .hh-reel__nav:disabled {
    opacity: .3;
    cursor: default;
  }

  /* Panah menjorok keluar jalur, tapi hanya sejauh --sp-3. Jarak tepi halaman
     mengecil sampai 16px di layar sempit (lihat --hh-inset), jadi menjorok
     32px membuat panah keluar layar dan memunculkan gulir horizontal —
     terukur di 1024px sebelum ini diperbaiki. 16px selalu aman karena tidak
     pernah melebihi jarak tepi terkecil yang mungkin. */
  .hh-reel--siap .hh-reel__nav--mundur { inset-inline-start: calc(-1 * var(--sp-3)); }
  .hh-reel--siap .hh-reel__nav--maju   { inset-inline-end:   calc(-1 * var(--sp-3)); }

  /* Panah digambar lewat CSS, bukan tag kosong (aturan 3.5). */
  .hh-reel__nav::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 1rem;
  }

  .hh-reel__nav--mundur::before { content: "\f053"; }   /* fa-chevron-left  */
  .hh-reel__nav--maju::before   { content: "\f054"; }   /* fa-chevron-right */
}

@media (prefers-reduced-motion: reduce) {
  .hh-reel__jalur { scroll-behavior: auto; }
  .hh-reel__item  { transition: none; }
}

/* --- Mobile: --- */
/* --- Mobile: info kontak disembunyikan, brand ditumpuk di tengah --- */
@media (width <= 991.98px) {
  .container-header .container-below-top {
    display: none;
  }

  /* pembungkus baris logo ikut ditengahkan */
  .container-header > .grid-child:not(.container-nav) {
    justify-content: center;
  }

  /* denah grid diubah: satu kolom, tiga baris */
  .container-header .navbar-brand {
    grid-template-columns: 1fr;
    grid-template-areas:
      "ikon"
      "judul"
      "tagline";
    justify-items: center;
    text-align: center;
    row-gap: .2rem;
    margin-inline-end: 0;
  }

  /* logo diperbesar karena kini berdiri sendiri di atas */
  .container-header .navbar-brand::before {
    width: 2.2em;
    height: 2.2em;
  }
}

/* ============================================================
   16. STICKY — hanya bar merah yang ikut menempel
   ============================================================
   Yang dibuat sticky adalah <header>, bukan .container-nav.

   Alasannya: elemen sticky selalu dibatasi containing block-nya.
   .container-nav adalah anak — dan di >=992px juga grid item — dari
   .container-header, jadi ruang geraknya cuma setinggi header itu
   sendiri: menempel sebentar lalu ikut tergulung hilang. Sebaliknya
   <header> adalah anak langsung <body>, ruang geraknya sepanjang
   halaman.

   Supaya yang terlihat menempel hanya bar merah, header ditarik ke
   atas sejauh tinggi baris logo lewat top negatif. Baris logo
   tergulung habis, bar merah berhenti persis di tepi atas viewport.

   --hh-headroom HARUS sama dengan tinggi baris logo (diukur di
   browser: 98px pada >=992px, 136px di bawahnya). Kalau ukuran logo,
   judul, atau tagline diubah, nilai ini ikut disesuaikan: kelebihan
   menyisakan celah di atas bar, kekurangan menyisakan potongan baris
   logo yang menggantung. */

:root {
  --hh-headroom: 136px;   /* tinggi baris logo — mobile & tablet */
  --hh-navbar-h: 53px;    /* tinggi bar merah  — mobile & tablet */
}

@media (width >= 992px) {
  :root {
    --hh-headroom: 98px;
    --hh-navbar-h: 47px;
  }
}

.container-header {
  position: sticky;
  top: calc(-1 * var(--hh-headroom));
  z-index: 1000;
}

/* pemisah dari konten yang lewat di bawahnya */
.container-header .container-nav {
  box-shadow: 0 2px 8px rgb(0 0 0 / 18%);
}

/* Anchor tidak lagi mendarat di balik bar. Menyatu dengan
   .hh-sec { scroll-margin-top } di seksi 10 — jarak akhir dari tepi
   atas = scroll-padding-top + scroll-margin-top, jadi keduanya saling
   melengkapi, bukan bertabrakan. */
html {
  scroll-padding-top: var(--hh-navbar-h);
}


/* ============================================================
   17. FOOTER
   ============================================================
   Cassiopeia memberi <footer class="container-footer footer full-width">
   latar gradien --cassiopeia-color-primary → --cassiopeia-color-hover
   (template.css baris 13415). Nilainya datang dari panel Template Style,
   bukan dari token kita — kalau dibiarkan, satu-satunya blok di halaman
   yang warnanya di luar palet justru yang paling bawah.

   Spesifisitas: .footer bernilai (0,1,0). Di sini dipakai
   .container-footer.footer = (0,2,0) — dua kelas pada elemen yang sama,
   cara menaikkan nilai tanpa !important sesuai aturan-kerja 2.3.
   ============================================================ */

/* Empat token di bawah ini satu-satunya tempat yang menentukan footer
   terang atau gelap. Nilai lamanya, kalau mau dikembalikan navy:

     --hh-kaki-bg      var(--hh-ink)
     --hh-kaki-teks    var(--hh-white)
     --hh-kaki-lembut  rgb(var(--hh-white-rgb) / 72%)
     --hh-kaki-aksen   var(--hh-yellow)
     --hh-kaki-garis   rgb(var(--hh-white-rgb) / 14%)

   Empat belas deklarasi warna di seluruh blok ini membaca dari sini, jadi
   tidak ada satu pun yang perlu dicari satu per satu.

   Kontras terhadap krem #FFF9EC: teks 13,9:1 · lembut 4,6:1 · aksen 5,6:1.
   Kuning tidak dipakai sama sekali — di atas krem 1,4:1, larangan keras
   aturan-kerja 1.1. */
.container-footer.footer {
  --hh-kaki-bg:     var(--hh-surface);
  --hh-kaki-teks:   var(--hh-ink);
  --hh-kaki-lembut: var(--hh-muted);
  --hh-kaki-aksen:  var(--hh-red);
  --hh-kaki-garis:  var(--hh-line);

  margin-top: 0;
  background: var(--hh-kaki-bg);
  background-image: none;
  color: var(--hh-kaki-teks);
}

/* .grid-child bawaan adalah flex, max-width 1320px, padding 2.5rem .5em
   (template.css 14003 + 13422). Anak flex-nya cuma satu — .mod-custom —
   jadi flex tidak menghasilkan apa pun selain menahan lebar (aturan-kerja
   2.7). Dijadikan block supaya pembatas isi diurus .hh-foot__wrap dengan
   rumus --hh-inset yang sama dengan seluruh seksi lain: footer jadi lurus
   sejajar dengan navbar dan judul seksi, bukan meleset .5em. */
.container-footer.footer .grid-child {
  display: block;
  max-width: none;
  padding: 0;
}

.hh-foot {
  padding-block: var(--sp-7) var(--sp-5);
}

.hh-foot__wrap {
  padding-inline: var(--hh-inset);
}

/* Di bawah 992px jumlah kolom ditentukan lebar kolom, bukan titik henti
   baru — aturan-kerja 1.5. Hasilnya: 1 kolom sampai ~500px, 2 kolom di
   tablet, 4 kolom di desktop. */
.hh-foot__grid {
  display: grid;
  gap: var(--sp-6) var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

@media (width >= 992px) {
  .hh-foot__grid {
    gap: var(--sp-5);
    grid-template-columns: 1.7fr 1fr 1fr 1.1fr;
  }
}

/* ----- kolom brand ----- */

.hh-foot__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-3);
  font-family: var(--cassiopeia-font-family-headings);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1;
}

/* Logo lewat CSS, bukan <img>: TinyMCE tidak bisa menyentuhnya, dan
   ukurannya dalam em sehingga ikut mengecil bersama wordmark tanpa satu
   aturan mobile pun (aturan-kerja 2.5). Jalur relatif terhadap letak
   user.css, bukan halaman (aturan-kerja 2.8).

   Berkasnya SATU dengan yang dipakai navbar di blok 8 — logo-smiley.png.
   Kalau logo diganti, cukup timpa berkas itu dan header serta footer ikut
   berubah bersamaan. */
.hh-foot__brand::before {
  content: "";
  flex: none;
  width: 1.7em;
  height: 1.7em;
  background: url("../images/logo-smiley.png") center / contain no-repeat;
}

.hh-foot__tagline {
  max-width: 44ch;
  margin: 0 0 var(--sp-4);
  color: var(--hh-kaki-lembut);
  font-size: var(--fs-sm);
  line-height: 1.65;
}

.hh-foot__meta,
.hh-foot__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Grid dua kolom supaya baris kedua alamat rata dengan baris pertama,
   tidak menyelip di bawah ikon. */
.hh-foot__meta-item {
  display: grid;
  grid-template-columns: 1.5em 1fr;
  margin-bottom: var(--sp-2);
  color: var(--hh-kaki-lembut);
  font-size: var(--fs-sm);
  line-height: 1.55;
}

.hh-foot__meta-item::before {
  color: var(--hh-kaki-aksen);
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

.hh-foot__meta-item--alamat::before  { content: "\f3c5"; }   /* fa-location-dot */
.hh-foot__meta-item--telepon::before { content: "\f095"; }   /* fa-phone        */
.hh-foot__meta-item--email::before   { content: "\f0e0"; }   /* fa-envelope     */
.hh-foot__meta-item--jam::before     { content: "\f017"; }   /* fa-clock        */

/* ----- kolom tautan ----- */

/* Judul kolom mengikuti .hh-eyebrow: kecil, kapital, merah — hanya
   sebagai penanda kolom, bukan judul yang harus dibaca lebih dulu. */
.hh-foot__head {
  margin: 0 0 var(--sp-3);
  color: var(--hh-kaki-aksen);
  font-family: var(--cassiopeia-font-family-headings);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hh-foot__item {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

/* .footer a:not(.btn) bernilai (0,2,1) dan memaksa color: currentColor.
   Selektor di bawah bernilai (0,3,0) — tiga kelas mengalahkan dua kelas,
   jumlah elemen tidak ikut dibandingkan selama kelasnya sudah menang. */
.container-footer.footer .hh-foot__link {
  color: var(--hh-kaki-teks);
  text-decoration: none;
  transition: color .15s ease;
}

/* (0,4,0) — mengalahkan .footer a:not(.btn):hover yang (0,3,1). */
.container-footer.footer .hh-foot__link:hover,
.container-footer.footer .hh-foot__link:focus-visible {
  color: var(--hh-kaki-aksen);
}

/* ----- kolom WhatsApp ----- */

/* Ikon menempati kolom pertama dan membentang dua baris, nama dan nomor
   menumpuk di kolom kedua. */
.container-footer.footer .hh-foot__wa {
  display: grid;
  grid-template-columns: 1.6em 1fr;
  align-items: center;
  gap: 0 var(--sp-2);
  color: var(--hh-kaki-teks);
  text-decoration: none;
  transition: color .15s ease;
}

.hh-foot__wa::before {
  content: "\f232";                    /* fa-whatsapp */
  grid-row: span 2;

  /* Bukan --hh-wa. Hijau WhatsApp #25D366 di atas krem cuma 1,89:1 —
     di atas navy tadinya 7,36:1. Bentuk gelembungnya sendiri sudah
     mengenali WhatsApp tanpa bantuan warna, dan hijau tetap dipakai
     utuh di setiap tombol WhatsApp yang berupa bidang penuh. */
  color: var(--hh-kaki-teks);
  font-family: "Font Awesome 6 Brands";
  font-size: 1.5em;
  font-weight: 400;
}

.hh-foot__wa-name {
  font-size: var(--fs-sm);
  font-weight: 600;
}

.hh-foot__wa-num {
  color: var(--hh-kaki-lembut);
  font-size: var(--fs-xs);
}

.container-footer.footer .hh-foot__wa:hover,
.container-footer.footer .hh-foot__wa:focus-visible {
  color: var(--hh-kaki-aksen);
}

/* ----- baris hak cipta ----- */

.hh-foot__legal {
  margin: var(--sp-6) 0 0;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--hh-kaki-garis);
  color: var(--hh-kaki-lembut);
  font-size: var(--fs-sm);
  text-align: center;
}


/* ============================================================
   18. KARTU ARTIKEL
   ============================================================
   Sepola dengan kartu destinasi di blok 13 — foto di atas, teks di
   bawah, seluruh kartu satu tautan. Sengaja tidak digabung dengan
   .hh-dest lewat kelas bersama: keduanya kebetulan mirip sekarang,
   tapi kartu artikel akan tumbuh sendiri (baris meta, tanggal, tag)
   dan menggabungkan dua hal yang cuma mirip membuat perubahan pada
   satu ikut menarik yang lain.

   Markup-nya bukan mod_custom melainkan override mod_articles di
   templates/cassiopeia_extended/html/mod_articles/hh_cards*.php,
   sehingga daftar ini ikut berubah sendiri setiap ada artikel baru.
   ============================================================ */

/* Kartu artikelnya sendiri kini memakai .hh-post — kelas yang sama dengan
   kartu di halaman /artikel (blok 24). Satu jenis isi hanya boleh punya satu
   tampilan; dua tampilan membuat pembaca merasa berpindah situs dan membuat
   setiap perubahan harus dikerjakan dua kali. Yang tersisa di blok ini hanya
   tombol "Lihat Semua", yang memang cuma ada di beranda. */

/* ----- tombol Lihat Semua ----- */

.hh-art__more {
  margin: var(--sp-6) 0 0;
  text-align: center;
}

/* Bahasa tombolnya disamakan dengan "Pesan Sekarang" di navbar (blok 7):
   kuning, teks navy, pil, terangkat saat disentuh. Kuning hanya boleh
   berpasangan dengan --hh-ink — di atas putih rasionya 1,4:1. */
.hh-art__all {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: var(--sp-5);
  border-radius: var(--r-pill);
  background: var(--hh-yellow);
  color: var(--hh-ink);
  font-family: var(--cassiopeia-font-family-headings);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}

/* color WAJIB diulang saat :hover — tanpa itu a:hover Cassiopeia (0,1,1)
   menang atas .hh-art__all (0,1,0) dan tulisannya jadi merah di atas kuning.
   Penjelasan lengkap di blok 21, di atas .hh-hero__wa:hover. */
.hh-art__all:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgb(0 0 0 / 25%);
  color: var(--hh-ink);
}

@media (prefers-reduced-motion: reduce) {
  .hh-art__all { transition: none; }
  .hh-art__all:hover { transform: none; }
}


/* ============================================================
   19. CTA PENUTUP
   ============================================================ */
.hh-cta {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}

/* Di seksi gelap judul harus ikut terang — .hh-title sendiri tidak
   menyetel warna, dan Cassiopeia memberi h2 warna --bodycolor. */
.hh-sec--ink .hh-title {
  color: var(--hh-white);
}

.hh-title--besar {
  font-size: var(--fs-h1);
}

.hh-cta .hh-lead {
  margin-inline: auto;
}

.hh-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 3.25rem;
  padding-inline: var(--sp-6);
  border-radius: var(--r-pill);
  background: var(--hh-yellow);
  color: var(--hh-ink);
  font-family: var(--cassiopeia-font-family-headings);
  font-size: var(--fs-lg);
  font-weight: 600;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}

.hh-cta__btn::before {
  content: "\f232";
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
  font-size: 1.2em;
}

/* color WAJIB diulang saat :hover — tanpa itu a:hover Cassiopeia (0,1,1)
   menang atas .hh-cta__btn (0,1,0) dan tulisannya jadi merah di atas kuning.
   Penjelasan lengkap di blok 21, di atas .hh-hero__wa:hover. */
.hh-cta__btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
  color: var(--hh-ink);
}

.hh-cta__alt {
  margin: var(--sp-4) 0 0;
  color: var(--hh-muted);
  font-size: var(--fs-sm);
}

.hh-cta__alt a {
  color: var(--hh-red);
}

@media (prefers-reduced-motion: reduce) {
  .hh-cta__btn { transition: none; }
  .hh-cta__btn:hover { transform: none; }
}


/* ============================================================
   21. HERO
   ============================================================ */
/* Jalur gambar dihitung dari letak user.css, bukan dari halaman:
   .../cassiopeia_extended/css/  →  naik 5 tingkat  →  akar situs
   css → cassiopeia_extended → site → templates → media → /joomla/

   FOTO CERAH sejak 19 September 2026 — mengikuti wireframe klien. Dulu
   foto Danau Toba bernuansa gelap di bawah gradien navy 72–88%; sekarang
   foto Toba siang hari (sumber: D:\asset_joomla_happyholidays\banner_light.png,
   1983×793) yang tampil hampir apa adanya, teks tetap putih.
   (Hari yang sama sempat dicoba versi gradien PUTIH + teks navy; klien
   lebih suka wireframe-nya — foto cerah penuh, teks putih.)

   Teks putih langsung di atas langit & awan terlalu pucat: diukur dengan
   simulasi `cover` pada tata letak nyata (1440px dan 375px), 10% piksel
   paling terang di belakang judul hanya 1,5:1 tanpa pelindung apa pun.
   Karena itu ada DUA pelindung yang sengaja dibuat setipis mungkin:
     1. gradien navy tipis — di desktop hanya di sisi kiri (habis di 75%
        lebar, jadi danau, bukit, dan matahari di kanan tetap 100% cerah);
        di ponsel tegak, karena teksnya memenuhi lebar dan jatuh di langit;
     2. text-shadow navy halus pada teks (lihat __brand, __judul, __sub,
        __lihat) — menggelapkan sekitar huruf saja, bukan fotonya.
   Dengan gradien ini judul mencapai median ± 4,4:1 (desktop) / 4,2:1
   (ponsel), subjudul ± 7:1 / 4:1; sisanya ditanggung bayangan teks.
   Menipiskan gradien lagi = judul kembali hilang di atas awan.

   Berkas lama (hero-danau-toba-900.jpg / -1672.jpg) SENGAJA tidak dihapus.
   Untuk kembali ke hero gelap: pulihkan kedua url() dan gradien navy
   72–88% dari _docs/user.css.pulih blok 21. */
.hh-hero {
  display: grid;
  align-items: center;
  min-height: clamp(26rem, 74vh, 42rem);
  /* navy, bukan putih: latar sementara selagi foto dimuat — teksnya putih */
  background-color: var(--hh-ink);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--hh-white);

  /* Mobile lebih dulu: berkas 900×793 (98 KB, potongan tengah foto pada
     resolusi asli — layar ponsel tegak, jadi kiri-kanan toh terpotong
     `cover`) dan gradien tegak: paling pekat di atas, tempat eyebrow &
     judul jatuh di langit; menipis ke bawah, ke danau yang sudah gelap. */
  background-image:
    linear-gradient(to bottom,
      rgb(var(--hh-ink-rgb) / 50%)   0%,
      rgb(var(--hh-ink-rgb) / 35%)  60%,
      rgb(var(--hh-ink-rgb) / 25%) 100%),
    url("../../../../../images/assets/hero/hero-danau-toba-terang-900.jpg");
}

@media (width >= 992px) {
  /* Desktop: berkas 1983×793 (260 KB, resolusi asli — tidak diperbesar)
     dan gradien mendatar — tipis di kiri tempat teks berada, habis sama
     sekali di 75% lebar.

     TINGGI = SISA LAYAR PERTAMA (19 September 2026). Dulu 74vh dengan
     batas atas 42rem (672px): di monitor 24" 1920×1080 (tinggi jendela
     ±950px) hero berhenti ±135px sebelum dasar layar, sehingga seksi krem
     & banner kartu nama di bawahnya ikut mengintip dan hero terlihat
     "menggantung". Sekarang hero mengisi persis tinggi jendela dikurangi
     header — header-nya sticky dan tingginya 145px di SEMUA lebar desktop
     (diukur 992–2560px). Kalau tinggi header berubah (logo diperbesar,
     baris info ditambah), angka 145px ini ikut disesuaikan.
     Batas bawah 26rem tetap (laptop pendek: isi hero yang menentukan).
     Batas atas 75rem (1200px) hanya penjaga untuk monitor tegak/sangat
     tinggi — fotonya cuma 793px tinggi aslinya, lebih dari itu makin buram.
     Di 1920×950 hero jadi ±805px: foto diperbesar hanya 1,5%. */
  .hh-hero {
    min-height: clamp(26rem, calc(100vh - 145px), 75rem);
    background-image:
      linear-gradient(100deg,
        rgb(var(--hh-ink-rgb) / 50%)   0%,
        rgb(var(--hh-ink-rgb) / 30%)  45%,
        rgb(var(--hh-ink-rgb) /  0%)  75%),
      url("../../../../../images/assets/hero/hero-danau-toba-terang-1983.jpg");
  }
}

/* Bayangan teks bersama untuk semua teks putih di atas foto. Tidak
   dipasang di .hh-hero (diwariskan) karena tombol WhatsApp bertulisan
   navy di atas hijau — bayangan gelap di situ malah membuat hurufnya
   kabur. */
.hh-hero__brand,
.hh-hero__judul,
.hh-hero__sub,
.hh-hero__lihat {
  text-shadow:
    0 1px 2px  rgb(var(--hh-ink-rgb) / 55%),
    0 2px 18px rgb(var(--hh-ink-rgb) / 45%);
}

.hh-hero__isi {
  max-width: 40rem;
}

/* Tanpa ikon: smiley sudah berdiri di navbar tepat di atas seksi ini,
   jadi mengulangnya cuma menggandakan lambang yang sama dua kali.
   flex & gap ikut dilepas karena tidak ada lagi anak yang disejajarkan. */
.hh-hero__brand {
  margin: 0 0 var(--sp-3);
  color: var(--hh-yellow);
  font-family: var(--cassiopeia-font-family-headings);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hh-hero__judul {
  margin: 0 0 var(--sp-3);
  color: var(--hh-white);
  font-size: var(--fs-h1);
  line-height: 1.1;
}

/* putih penuh, bukan 88% seperti versi hero gelap: di atas foto cerah,
   putih transparan ikut memucat bersama langit di belakangnya */
.hh-hero__sub {
  margin: 0 0 var(--sp-5);
  color: var(--hh-white);
  font-size: var(--fs-lg);
}

.hh-hero__aksi {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin: 0;
}

.hh-hero__wa,
.hh-hero__lihat {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 3.25rem;
  padding-inline: var(--sp-5);
  border-radius: var(--r-pill);
  font-family: var(--cassiopeia-font-family-headings);
  font-size: var(--fs-base);
  font-weight: 600;
  text-decoration: none;
  transition: transform .15s ease, background-color .15s ease;
}

/* teks --hh-ink, bukan putih: putih di atas #25D366 hanya 1,98:1 */
.hh-hero__wa {
  background: var(--hh-wa);
  color: var(--hh-ink);
}

.hh-hero__wa::before {
  content: "\f232";
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
  font-size: 1.2em;
}

/* Garis putih penuh (dulu 70%) — sama alasannya dengan __sub. Latar navy
   tipis 15% menahan tulisannya tetap terbaca kalau tombol ini jatuh di
   atas bagian foto yang terang (di ponsel, tombol ini turun ke baris
   sendiri). */
.hh-hero__lihat {
  border: 2px solid var(--hh-white);
  background-color: rgb(var(--hh-ink-rgb) / 15%);
  color: var(--hh-white);
}

/* disentuh = latar navy menebal, bukan memutih: putih di atas foto cerah
   justru membuat tulisannya tenggelam */
.hh-hero__lihat:hover {
  background-color: rgb(var(--hh-ink-rgb) / 35%);
}

.hh-hero__wa:hover,
.hh-hero__lihat:hover {
  transform: translateY(-2px);
}

/* Warna tulisan WAJIB diulang saat :hover. Cassiopeia punya
   `a:hover { color: var(--link-hover-color) }` (template.min.css,
   spesifisitas 0,1,1) yang mengalahkan .hh-hero__wa / .hh-hero__lihat
   (0,1,0) — akibatnya tulisan kedua tombol berubah MERAH saat disorot:
   merah di atas hijau WhatsApp nyaris tak terbaca. Ketahuan dari
   tangkapan layar klien 19 September 2026. Selektor :hover di bawah
   bernilai 0,2,0, jadi menang tanpa !important. */
.hh-hero__wa:hover   { color: var(--hh-ink); }
.hh-hero__lihat:hover { color: var(--hh-white); }

@media (prefers-reduced-motion: reduce) {
  .hh-hero__wa,
  .hh-hero__lihat { transition: none; }

  .hh-hero__wa:hover,
  .hh-hero__lihat:hover { transform: none; }
}

/* ============================================================
   22. PENGUATAN WARNA
   Aksen memperkuat rasa, bukan rasio. Porsi merah hanya naik
   0,21% -> 0,25%; angka itu baru bergerak lewat seksi berlatar
   warna penuh lebar (lihat audit-desain.md bagian 4A).
   ============================================================ */

/* --- Garis merah di bawah judul seksi --- */
.hh-title {
  position: relative;
  padding-bottom: var(--sp-3);
}

.hh-title::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 3.5rem;
  height: 4px;
  background: var(--hh-red);
}

/* di seksi navy, merah kurang terbaca — dialihkan ke kuning */
.hh-sec--ink .hh-title::after {
  background: var(--hh-yellow);
}

/* .hh-cta satu-satunya yang judulnya ditengahkan (blok 19) */
.hh-cta .hh-title::after {
  inset-inline-start: 50%;
  transform: translateX(-50%);
}

/* --- Pita merah di tepi atas kartu layanan --- */
.hh-svc {
  border-top: 3px solid var(--hh-red);
}

/* --- Ajakan di kartu destinasi jadi tombol --- */
.hh-dest__cta {
  align-self: flex-start;
  padding: .45rem .95rem;
  border: 1px solid var(--hh-line);
  border-radius: var(--r-pill);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.hh-dest:hover .hh-dest__cta {
  border-color: var(--hh-red);
  background: var(--hh-red);
  color: var(--hh-white);
}

.hh-dest:hover .hh-dest__cta::before {
  color: var(--hh-white);
}

/* ============================================================
   24. HALAMAN DAFTAR ARTIKEL — /artikel
   ============================================================
   Markup-nya override com_content di
   templates/cassiopeia_extended/html/com_content/category/blog*.php.

   .hh-post dipakai bersama oleh DUA tempat: daftar di halaman ini dan
   enam kartu di beranda (override mod_articles/hh_cards_items.php).
   Semula keduanya punya kelas sendiri dengan alasan "perannya berbeda",
   tapi yang terlihat pembaca justru jadi dua tampilan untuk satu jenis
   isi — terasa seperti berpindah situs. Satu kelas, satu tampilan.

   Bedanya hanya tingkat judul: di sini <h2>, di beranda <h3> karena
   kartunya berada di bawah <h2> judul seksi (aturan 3.3). Karena itu
   aturan di bawah menyebut .hh-post__title, bukan h2 atau h3.
   ============================================================ */

/* ----- kolom komponen dilebarkan sampai tepi layar -----

   Blok 12 melebarkan POSISI MODUL (banner, top-a, …) karena seksi beranda
   memang modul. Halaman ini bukan modul melainkan komponen, dan
   .container-component tidak punya kelas .full-width — Cassiopeia
   mengunci lebarnya di 1320px lewat .grid-child.

   Penunjuknya memakai :has() supaya HANYA halaman ini yang melebar.
   Halaman komponen lain (login, pencarian, artikel tunggal) tetap
   berada di kolom teks yang sempit, dan memang harus begitu: teks
   panjang selebar 1320px sulit dibaca.

   Tidak memakai trik margin negatif 50vw. 100vw menghitung lebar
   scrollbar sebagai bagian layar, sehingga halaman mendapat gulir
   horizontal — yang dilarang daftar periksa aturan-kerja bagian 6.

   .grid-child ditulis IKUT walau tidak menyaring apa pun: dua kelas pada
   elemen yang sama menaikkan nilai ke (0,4,0). Lawannya bukan .grid-child
   yang polos, melainkan aturan Cassiopeia

       body:not(.has-sidebar-left) .site-grid .container-component
       { grid-column-start: main-start }

   yang bernilai (0,3,1) — tanpa kelas keempat, penunjuk kita (0,3,0) kalah
   dan pita kepala berhenti di 1320px. Cara menaikkannya tanpa !important
   ini persis contoh di aturan-kerja 2.3. */
.site-grid > .grid-child.container-component:has(.hh-blog) {
  grid-column: full-start / full-end;
  max-width: none;

  /* .grid-child bawaan adalah flex ARAH BARIS. Dibalik ke kolom supaya
     <main> memakai seluruh lebar, sama seperti alasan di blok 12. */
  flex-direction: column;
}

/* Cassiopeia memberi <main> margin-top 1rem. Di halaman komponen biasa itu
   napas antara navbar dan teks; di sini ia menyisakan garis putih 16px di
   atas pita navy, sehingga pita terlihat seperti tidak terpasang rapat. */
.site-grid > .grid-child.container-component:has(.hh-blog) > main {
  margin-top: 0;
}

/* Pesan sistem tetap sejajar dengan isi halaman, tidak menempel ke tepi. */
.site-grid > .grid-child.container-component:has(.hh-blog) > #system-message-container {
  padding-inline: var(--hh-inset);
}

/* ----- pita kepala ----- */

/* .hh-sec memberi jarak --sp-7 (72px). Untuk kepala halaman itu terlalu
   lapang: pita ini menempel langsung di bawah navbar, bukan seksi yang
   perlu dipisahkan dari tetangganya. */
.hh-blog__head {
  padding-block: var(--sp-6);
}

.hh-blog__trail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-3);
  font-family: var(--cassiopeia-font-family-headings);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hh-blog__crumb {
  color: var(--hh-pita-lembut);
  text-decoration: none;
}

.hh-blog__crumb:hover {
  color: var(--hh-pita-aksen);
}

.hh-blog__crumb--now {
  color: var(--hh-pita-aksen);
}

/* Garis miring digambar CSS dan hanya muncul di remah kedua — kalau
   nanti ada remah ketiga, pemisahnya ikut sendiri tanpa diketik. */
.hh-blog__crumb + .hh-blog__crumb::before {
  content: "/";
  margin-inline-end: var(--sp-2);
  color: var(--hh-pita-lembut);
}

/* Judul halaman satu tingkat lebih besar dari judul seksi: ini <h1>,
   bukan <h2>. Garis bawahnya merah lewat aturan dasar .hh-title::after di
   blok 22 — pita ini terang, jadi tidak ada yang perlu dialihkan. */
.hh-blog__h1 {
  font-size: var(--fs-h1);
}

/* Deskripsi kategori datang dari editor, jadi isinya <p> — bukan teks
   telanjang seperti .hh-lead di seksi lain. Margin bawaan <p> dinolkan
   supaya jarak ke baris topik tetap yang kita tentukan. */
.hh-blog__lead {
  margin-bottom: 0;
}

.hh-blog__lead p {
  margin: 0;
}

.hh-blog__lead p + p {
  margin-top: var(--sp-2);
}

/* ----- badan halaman ----- */

.hh-blog__body {
  background: var(--hh-surface);
}

/* ----- baris topik ----- */

.hh-blog__filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--hh-line);
}

.hh-blog__filter-label {
  margin: 0;
  color: var(--hh-muted);
  font-family: var(--cassiopeia-font-family-headings);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hh-blog__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Tinggi 2.75rem = 44px, sasaran sentuh yang sama dengan tautan footer
   dan tombol WhatsApp di seksi Tim. */
.hh-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 2.75rem;
  padding-inline: var(--sp-4);
  border: 1px solid var(--hh-line);
  background: var(--hh-white);
  color: var(--hh-ink);
  font-family: var(--cassiopeia-font-family-headings);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.hh-chip:hover {
  border-color: var(--hh-red);
  background: var(--hh-red);
  color: var(--hh-white);
}

/* Topik yang sedang dibuka memakai navy, bukan merah: merah sudah dipakai
   untuk keadaan disentuh, dan dua merah berdampingan menghapus bedanya. */
.hh-chip--now {
  border-color: var(--hh-ink);
  background: var(--hh-ink);
  color: var(--hh-white);
}

.hh-chip__n {
  color: var(--hh-muted);
  font-size: var(--fs-xs);
  font-weight: 500;
}

.hh-chip:hover .hh-chip__n,
.hh-chip--now .hh-chip__n {
  color: rgb(var(--hh-white-rgb) / 72%);
}

/* ----- kartu artikel ----- */

.hh-post {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hh-line);
  background: var(--hh-white);
  box-shadow: var(--shadow-card);
  color: var(--hh-ink);
  text-decoration: none;
  transition: box-shadow .2s ease, transform .2s ease;
}

.hh-post:hover {
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
}

.hh-post__media {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--hh-line);
}

/* Rasio dikunci 31:20 — sama dengan kartu destinasi dan kartu artikel
   beranda, karena sumber fotonya berkas yang sama. */
.hh-post__img {
  display: block;
  width: 100%;
  aspect-ratio: 31 / 20;
  object-fit: cover;
  transition: transform .45s ease;
}

.hh-post:hover .hh-post__img {
  transform: scale(1.05);
}

/* Penanda tanggal menempel di sudut foto.
   Halaman rujukan memakai lingkaran; di sini kotak, karena seluruh situs
   bersudut siku (token --r-* = 0 di blok 0). Bentuknya ikut bahasa situs,
   perannya sama: tanggal terbaca sebelum judul dibaca.
   Merah di atasnya juga menaikkan porsi merah yang menurut audit-desain
   bagian 3.1 masih 33x di bawah target. */
.hh-post__date {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  padding-block: var(--sp-2);
  background: var(--hh-red);
  color: var(--hh-white);
  font-family: var(--cassiopeia-font-family-headings);
  line-height: 1.05;
}

.hh-post__day {
  font-size: var(--fs-h3);
  font-weight: 700;
}

.hh-post__month {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hh-post__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--sp-4);
}

.hh-post__cat {
  margin: 0 0 var(--sp-2);
  color: var(--hh-red);
  font-family: var(--cassiopeia-font-family-headings);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.hh-post__title {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-h3);
  line-height: 1.25;
}

.hh-post__meta {
  margin: 0 0 var(--sp-2);
  color: var(--hh-muted);
  font-size: var(--fs-xs);
}

.hh-post__excerpt {
  margin: 0 0 var(--sp-4);
  color: var(--hh-muted);
  font-size: var(--fs-sm);
  line-height: 1.65;
}

/* Didorong ke dasar kartu supaya tombolnya sejajar walau judul dan
   cuplikan berbeda panjang. Bahasanya sama dengan ajakan di kartu
   destinasi (blok 22): kotak bergaris yang terisi merah saat disentuh. */
.hh-post__cta {
  align-self: flex-start;
  margin-top: auto;
  padding: .45rem .95rem;
  border: 1px solid var(--hh-line);
  font-family: var(--cassiopeia-font-family-headings);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

/* Panah, bukan ikon lain: tautan ini menuju halaman di situs yang sama.
   Titik-kodenya dari media/vendor/fontawesome-free/css/fontawesome.css. */
.hh-post__cta::after {
  content: "\f061";                    /* fa-arrow-right */
  display: inline-block;
  margin-inline-start: .45em;
  color: var(--hh-red);
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  transition: transform .2s ease, color .2s ease;
}

.hh-post:hover .hh-post__cta {
  border-color: var(--hh-red);
  background: var(--hh-red);
  color: var(--hh-white);
}

.hh-post:hover .hh-post__cta::after {
  color: var(--hh-white);
  transform: translateX(.25em);
}

/* Artikel yang belum tayang hanya terlihat oleh yang boleh menyuntingnya.
   Ditandai supaya tidak dikira sudah terbit. */
.hh-post--draf {
  border-color: var(--hh-red);
}

.hh-post--draf .hh-post__cat::after {
  content: " · belum tayang";
}

/* ----- keadaan kosong, daftar judul, halaman ----- */

.hh-blog__kosong {
  margin: 0;
  padding: var(--sp-5);
  border: 1px solid var(--hh-line);
  background: var(--hh-white);
  color: var(--hh-muted);
  text-align: center;
}

.hh-blog__links {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--hh-line);
}

.hh-blog__links-label {
  margin: 0 0 var(--sp-2);
  color: var(--hh-muted);
  font-family: var(--cassiopeia-font-family-headings);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hh-blog__links-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hh-blog__link {
  display: block;
  padding-block: var(--sp-2);
  color: var(--hh-ink);
  font-weight: 500;
  text-decoration: none;
}

.hh-blog__link:hover {
  color: var(--hh-red);
}

.hh-blog__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

.hh-blog__counter {
  margin: 0;
  color: var(--hh-muted);
  font-size: var(--fs-sm);
}

/* Kalau artikelnya belum cukup untuk dua halaman, penomoran tidak muncul
   dan yang tersisa hanya hitungannya — ditengahkan supaya tidak terlihat
   seperti sisa elemen yang lupa dihapus. */
.hh-blog__counter--solo {
  margin-top: var(--sp-5);
  text-align: center;
}

/* Sudut penomoran halaman sudah siku lewat blok 20; di sini hanya
   warnanya yang disamakan dengan chip topik. */
.hh-blog__pages .pagination {
  gap: var(--sp-2);
  margin: 0;
}

.hh-blog__pages .page-link {
  min-width: 2.75rem;
  padding: .6rem .75rem;
  border: 1px solid var(--hh-line);
  background: var(--hh-white);
  color: var(--hh-ink);
  font-family: var(--cassiopeia-font-family-headings);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: center;
}

.hh-blog__pages .page-link:hover {
  border-color: var(--hh-red);
  background: var(--hh-red);
  color: var(--hh-white);
}

.hh-blog__pages .page-item.active .page-link {
  border-color: var(--hh-ink);
  background: var(--hh-ink);
  color: var(--hh-white);
}

.hh-blog__pages .page-item.disabled .page-link {
  border-color: var(--hh-line);
  background: var(--hh-surface);
  color: var(--hh-muted);
}

@media (prefers-reduced-motion: reduce) {
  .hh-post,
  .hh-post__img,
  .hh-post__cta,
  .hh-post__cta::after,
  .hh-chip { transition: none; }

  .hh-post:hover,
  .hh-post:hover .hh-post__img,
  .hh-post:hover .hh-post__cta::after { transform: none; }
}


/* ============================================================
   25. HALAMAN SATU ARTIKEL
   ============================================================
   Markup-nya override com_content di
   templates/cassiopeia_extended/html/com_content/article/default.php.

   Yang paling menentukan di blok ini cuma satu angka: --hh-baca, lebar
   maksimum kolom isi.

   Sebelumnya 62ch (±630px), dengan alasan panjang baris: mata kehilangan
   awal baris berikutnya kalau barisnya terlalu panjang. Sekarang `none` —
   kolom mengikuti lebar .hh-wrap (1320px), sama dengan halaman Layanan
   Paspor & Visa. Alasannya konsistensi: dua halaman yang memakai pita
   kepala yang sama dan kerangka yang sama tidak lagi berbeda lebar isinya.

   Harganya terukur: baris prosa naik dari ±74 karakter ke ±156 karakter di
   layar 1425px. Kalau nanti terasa kepanjangan, isi lagi angkanya di satu
   tempat di bawah ini — tidak ada aturan lain yang perlu ikut diubah.
   ============================================================ */

:root {
  /* none = ikut lebar .hh-wrap (1320px). Isi angka (mis. 62ch atau 90ch)
     kalau prosa mau ditahan lagi ke lebar baca. */
  --hh-baca: none;
}

/* Kolom komponen dilebarkan sampai tepi layar, pola yang sama dengan blok 24,
   supaya pita kepala artikel menempel rapat ke navbar. */
.site-grid > .grid-child.container-component:has(.hh-artikel) {
  grid-column: full-start / full-end;
  max-width: none;
  flex-direction: column;
}

.site-grid > .grid-child.container-component:has(.hh-artikel) > main {
  margin-top: 0;
}

.site-grid > .grid-child.container-component:has(.hh-artikel) > #system-message-container {
  padding-inline: var(--hh-inset);
}

/* ----- pita kepala ----- */

.hh-artikel__kepala {
  padding-block: var(--sp-6);
}

.hh-artikel__trail {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-sm);
}

.hh-artikel__crumb {
  color: var(--hh-pita-lembut);
  text-decoration: none;
}

.hh-artikel__crumb:hover {
  color: var(--hh-pita-aksen);
}

.hh-artikel__crumb--now {
  color: var(--hh-pita-aksen);
}

.hh-artikel__crumb + .hh-artikel__crumb::before {
  content: "/";
  margin-inline-end: var(--sp-2);
  color: var(--hh-pita-lembut);
}

/* Judul memakai seluruh lebar pita, sama seperti isi di bawahnya.

   Sebelumnya dibatasi 22ch — sisa dari masa kolom isi 630px. Setelah kolom
   melebar, batas itu memaksa judul 46 karakter pecah jadi dua baris padahal
   ruang sisanya masih 35px. Judul dibaca sekali lalu dipindai, bukan diikuti
   baris demi baris, jadi lebar penuh tidak mengganggu; yang menahannya cukup
   lebar .hh-wrap. */
.hh-artikel__judul {
  max-width: none;
  margin: 0;
  font-size: var(--fs-h1);
  line-height: 1.12;
}

.hh-artikel__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin: var(--sp-4) 0 0;
  color: var(--hh-pita-lembut);
  font-size: var(--fs-sm);
}

.hh-artikel__baca::before {
  content: "\f017";                    /* fa-clock */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-inline-end: var(--sp-2);
}

/* ----- badan artikel ----- */

.hh-artikel__kolom {
  max-width: var(--hh-baca);
  margin-inline: auto;
  padding-block: var(--sp-6) var(--sp-7);
}

/* Pengaman kalau --hh-baca diisi angka lagi: halaman yang isinya kartu
   syarat tidak boleh ikut menyempit. Ditahan di 630px, butir sependek
   "Tiket pesawat" terbungkus kotak yang kelewat sempit sementara butir
   panjang pecah jadi tiga baris. Selama --hh-baca bernilai none, aturan
   ini tidak mengubah apa pun. */
.hh-artikel__kolom:has(.hh-syarat) {
  max-width: none;
}

/* Gambar tampil pada ukuran berkasnya — tidak direntangkan, tidak dipotong.

   Dua aturan dibuang di sini. `width: 100%` memaksa foto selebar kolom:
   china-great-wall.jpg yang 796px direntangkan ke 1320px berarti 1,66× dan
   terlihat buram. `aspect-ratio: 16 / 9` + `object-fit: cover` memotong sisi
   atas dan bawah foto supaya pas ke rasio itu — foto rombongan kehilangan
   kepala dan kaki barisan terluarnya.

   Gantinya `width: auto` + `max-width: 100%`: berkas kecil tampil apa adanya
   (796×514 tetap 796×514), berkas besar mengecil sampai selebar kolom
   (1320px). Tidak pernah lebih besar dari resolusi aslinya.

   Karena tinggi gambar sekarang mengikuti rasio berkasnya, atribut width dan
   height harus benar (aturan 3.4). Di default.php angkanya dibaca dari berkas
   lewat getimagesize, bukan lagi tebakan 1200×675. */
.hh-artikel__gambar {
  margin: 0 0 var(--sp-6);
}

.hh-artikel__gambar img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
}

.hh-artikel__gambar figcaption {
  margin-top: var(--sp-2);
  color: var(--hh-muted);
  font-size: var(--fs-sm);
}

/* Ukuran badan teks dinaikkan dari 16px ke 1.0625rem dan jarak barisnya ke
   1.75. Untuk teks panjang, jarak baris jauh lebih menentukan kenyamanan
   daripada ukuran hurufnya. */
.hh-artikel__isi {
  font-size: 1.0625rem;
  line-height: 1.75;
}

.hh-artikel__isi > * + * {
  margin-top: var(--sp-4);
}

/* Sub-judul diberi jarak atas jauh lebih besar daripada jarak bawahnya,
   sehingga secara visual menempel pada paragraf yang dijudulinya, bukan
   mengambang di tengah. */
.hh-artikel__isi h2,
.hh-artikel__isi h3 {
  margin-bottom: var(--sp-2);
  line-height: 1.25;
}

.hh-artikel__isi > h2 + *,
.hh-artikel__isi > h3 + * {
  margin-top: var(--sp-2);
}

.hh-artikel__isi > * + h2 {
  margin-top: var(--sp-6);
}

.hh-artikel__isi > * + h3 {
  margin-top: var(--sp-5);
}

.hh-artikel__isi h2 {
  font-size: var(--fs-h3);
}

.hh-artikel__isi h3 {
  font-size: var(--fs-lg);
}

.hh-artikel__isi ul,
.hh-artikel__isi ol {
  padding-inline-start: var(--sp-5);
}

.hh-artikel__isi li + li {
  margin-top: var(--sp-2);
}

.hh-artikel__isi strong {
  color: var(--hh-ink);
}

.hh-artikel__isi a {
  color: var(--hh-red);
  text-underline-offset: .2em;
}

.hh-artikel__isi blockquote {
  margin: var(--sp-5) 0;
  padding-inline-start: var(--sp-4);
  border-inline-start: 4px solid var(--hh-red);
  color: var(--hh-muted);
  font-style: italic;
}

.hh-artikel__isi img {
  max-width: 100%;
  height: auto;
}

/* Paragraf penutup di ketiga artikel contoh ditulis miring sebagai catatan
   dari penulis. Diberi latar krem supaya terbaca sebagai catatan, bukan
   sebagai bagian isi yang setara. */
.hh-artikel__isi > p > em:only-child {
  display: block;
  padding: var(--sp-4);
  background: var(--hh-surface);
  border-inline-start: 4px solid var(--hh-yellow);
  font-style: normal;
  color: var(--hh-muted);
}

/* ----- kaki ----- */

.hh-artikel__kaki {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--hh-line);
}

.hh-artikel__ajakan {
  margin: 0 0 var(--sp-3);
  font-family: var(--cassiopeia-font-family-headings);
  font-size: var(--fs-h3);
}

/* Teks memakai --hh-ink, bukan putih. Putih di atas #25D366 hanya 1,98:1 —
   masalah yang sama dengan putih di atas kuning (alasan lengkap di blok 15). */
.hh-artikel__wa {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 2.75rem;
  padding-inline: var(--sp-4);
  background: var(--hh-wa);
  color: var(--hh-ink);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
}

.hh-artikel__wa::before {
  content: "\f232";                    /* fa-whatsapp */
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
  font-size: 1.15em;
}

.hh-artikel__balik {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin-inline-start: var(--sp-3);
  color: var(--hh-muted);
  font-size: var(--fs-sm);
  text-decoration: none;
}

.hh-artikel__balik::before {
  content: "\f060";                    /* fa-arrow-left */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-inline-end: var(--sp-2);
  font-size: .85em;
}

.hh-artikel__balik:hover {
  color: var(--hh-red);
}


/* ============================================================
   26. KARTU LAYANAN DOKUMEN — Paspor & Visa
   ============================================================
   Berbeda peran dengan .hh-svc di blok 14. Blok 14 adalah ringkasan
   enam layanan; kartu di sini adalah pintu masuk ke dua halaman rinci
   yang punya URL sendiri. Karena itu isinya lebih banyak — ada poin
   singkat dan tombol "Baca Selengkapnya" — bukan sekadar kartu yang
   bisa diklik langsung ke WhatsApp seperti .hh-svc.

   Sampai 16 September 2026 ikonnya panel krem lebar (31:10) di atas
   kartu, terpisah dari judul. Diganti 17 September (kartunya dikeluhkan
   "kebesaran lebarnya" untuk isi sesedikit itu) jadi ikon kecil sebaris
   dengan judul, persis pola .hh-svc__title di blok 14 — class-nya tetap
   dipisah (.hh-doc__judul, bukan dipakaikan .hh-svc__title) dengan
   alasan yang sama seperti pemisahan class lain di sini: isinya beda,
   dan mengubah salah satu tidak boleh diam-diam mengubah yang lain.

   Latar seksinya putih; kartunya juga putih. Seksi Layanan tepat di
   atasnya juga putih. Menjadikan seksi ini krem akan bertabrakan dengan
   Destinasi di bawahnya yang sudah memakai --hh-surface.
   ============================================================ */

.hh-doc {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hh-line);
  background: var(--hh-white);
  box-shadow: var(--shadow-card);
  transition: box-shadow .2s ease, transform .2s ease, background-color .2s ease;
}

.hh-doc:hover {
  background: var(--hh-hover-kuning);
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
}

.hh-doc__isi {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--sp-5);
}

.hh-doc__judul {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-h3);
  line-height: 1.25;
}

/* Ikon berupa gambar asli, bukan lagi content: attr() + Font Awesome
   (16 September 2026 — alasan sama dengan blok 14 & 28: <img> aman dari
   pembersihan TinyMCE). Paspor & Visa di sini pakai gambar yang sama
   persis dengan kartu ringkasan di blok 14 (paspor.png / visa.png) —
   beda dari .hh-daftar-ikon di blok 28 yang masih pakai satu gambar
   gabungan paspor-visa.png. Ukurannya disamakan dengan .hh-svc__ikon
   (2,6rem tetap, bukan clamp lagi) sejak ikonnya pindah ke sebaris
   dengan judul, 17 September 2026. */
.hh-doc__gambar {
  flex: none;
  display: block;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: var(--r-pill);
}

.hh-doc__desc {
  margin: 0 0 var(--sp-3);
  color: var(--hh-muted);
  font-size: var(--fs-sm);
  line-height: 1.65;
}

/* Baris isi singkat: memberi tahu apa yang menanti di balik tombol,
   supaya "Baca Selengkapnya" bukan janji kosong. */
.hh-doc__poin {
  margin: 0 0 var(--sp-4);
  color: var(--hh-red);
  font-family: var(--cassiopeia-font-family-headings);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .04em;
}

/* Tombol garis, bukan kuning penuh. Kuning takarannya hanya 3% dan sudah
   dipakai tiga tombol lain di halaman ini — navbar, Lihat Semua Artikel,
   dan CTA penutup. "Baca Selengkapnya" juga bukan aksi utama: yang utama
   tetap menghubungi lewat WhatsApp. Tombol garis menempatkannya satu
   tingkat di bawah, sesuai perannya. */
.hh-doc__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  min-height: 2.75rem;
  border: 1.5px solid var(--hh-ink);
  border-radius: var(--r-pill);
  color: var(--hh-ink);
  font-family: var(--cassiopeia-font-family-headings);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.hh-doc__btn::after {
  content: "\f061";                    /* fa-arrow-right */
  margin-inline-start: .5em;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: .85em;
}

/* Merah saat disentuh, sama dengan tombol kartu destinasi (.hh-dest__cta),
   kartu artikel (.hh-post__cta), chip topik, dan tombol halaman — semuanya
   memakai tiga baris yang sama persis. Sebelumnya navy: satu-satunya tombol
   di situs yang berperilaku beda, dan itu terbaca sebagai cacat, bukan
   variasi. Merah tetap di takaran 7% karena hanya muncul saat disentuh. */
.hh-doc__btn:hover,
.hh-doc__btn:focus-visible {
  border-color: var(--hh-red);
  background: var(--hh-red);
  color: var(--hh-white);
}

@media (prefers-reduced-motion: reduce) {
  .hh-doc,
  .hh-doc__btn { transition: none; }
  .hh-doc:hover { transform: none; }
}


/* ============================================================
   27. KARTU SYARAT DOKUMEN — paspor & visa per negara
   ============================================================
   Dipakai di dalam naskah artikel (.hh-artikel__isi), bukan di modul.
   Susunannya menyalin situs lama: pita berwarna berisi lambang dan nama,
   lalu daftar dokumen bercentang, lalu kotak catatan.

   SATU HAL YANG SENGAJA TIDAK DISALIN: warna pita. Situs lama memberi
   tiap negara warna sendiri — China merah, Taiwan ungu, paspor biru.
   Delapan pita berbeda warna dalam satu halaman melanggar aturan takaran
   di aturan-kerja 1.1 (krem/putih 70% · navy 20% · merah 7% · kuning 3%),
   dan yang paling merugikan: benderanya sendiri sudah berwarna, sehingga
   pita berwarna justru membuat benderanya tenggelam. Pita dibuat netral
   supaya bendera menjadi satu-satunya sumber warna — negara tetap
   dikenali sekejap, palet tetap utuh.

   Pita ini semula navy. Diterangkan menjadi putih supaya halaman Visa
   dan Paspor tidak lagi dipotong delapan pita gelap dari atas ke bawah.
   Yang menjaga kepala tetap terbaca sebagai kepala sekarang bukan warna
   gelapnya, melainkan dua hal: latarnya putih sementara badannya krem,
   dan ada garis --hh-line di antaranya.

   Kalau warna per negara tetap diinginkan, cukup tambahkan satu aturan
   per negara pada .hh-syarat__kepala; strukturnya sudah siap menerima.
   ============================================================ */

.hh-syarat {
  overflow: hidden;
  border: 1px solid var(--hh-line);
  box-shadow: var(--shadow-card);
}

/* Blok 25 memberi jarak antar anak langsung .hh-artikel__isi sebesar
   --sp-4. Kartu ini butuh lebih lega supaya tiap negara terbaca sebagai
   satuan tersendiri, bukan satu daftar panjang. */
.hh-artikel__isi > .hh-syarat + .hh-syarat,
.hh-artikel__isi > * + .hh-syarat {
  margin-top: var(--sp-5);
}

/* ----- pita kepala ----- */

.hh-syarat__kepala {
  display: flex;
  align-items: center;
  gap: var(--sp-4);

  /* 5.6rem = bendera 3:2 tertinggi (57,5px) + padding atas-bawah. Menjaga
     kedelapan pita sama tinggi sesudah aspect-ratio dilepas dari lambang:
     bendera 2:1 cuma 43px, tanpa ini tiga kartunya jadi lebih pendek. */
  min-height: 5.6rem;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--hh-line);
  background: var(--hh-white);
}

/* Bendera datang dengan dua rasio berbeda: lima berkas 3:2 dan tiga
   berkas 2:1 (New Zealand bahkan 1200x600). object-fit: contain di dalam
   kotak tetap membuat semuanya sejajar tanpa ada yang gepeng.

   TANPA latar dan tanpa padding. Versi pertama memberi chip putih di
   sekelilingnya, khawatir bendera berbidang putih — Jepang, Korea — lenyap
   ke dalam pita. Kekhawatiran itu keliru: kesembilan berkas ternyata
   sudah punya tepi gelap sendiri (diperiksa piksel sudutnya — #000000 untuk
   lima bendera, #000042 Australia, #003800 paspor), jadi bendera sudah
   berbingkai dari sananya. Chip putih justru menambah bingkai kedua dan
   membuat lambang terlihat seperti tempelan.

   Sesudah pita diterangkan, Jepang dilaporkan "seperti menyatu" — tinggal
   bulatan merah melayang di atas putih. Tepi gelapnya diukur ulang, dan
   klaim di atas ternyata tetap benar: kesembilan berkas memang punya tepi
   gelap, Jepang 21:1 terhadap putih. Yang menghabiskannya bukan warna
   pita, melainkan penyusutan:

     lebar sumber 275px  →  ditampilkan 86px  =  skala 0,314
     tepi gelap 1px      →  0,31px  →  dilebur antialias jadi nyaris putih

   Sub-piksel. Di atas navy selisihnya masih terbaca karena bidang
   benderanya sendiri yang kontras; di atas putih tidak ada yang tersisa.

   BINGKAI KERAS SUDAH DICOBA DAN DITOLAK. Satu garis 1px ink 35% memang
   mengembalikan batasnya, tapi garis itu ikut mengelilingi paspor dan
   enam bendera yang tidak membutuhkannya — dan di sanalah ia terlihat
   sebagai kotak yang ditempelkan. Persoalannya kedalaman, bukan garis,
   jadi yang dipakai bayangan: tak terlihat di atas paspor hijau tua yang
   tepinya sudah gelap, cukup untuk memisahkan bidang putih Jepang dan
   Korea dari pita.

   aspect-ratio DAN object-fit DILEPAS. Keduanya membuat gambar 2:1
   (Australia, Dubai, New Zealand — 1200x600) menyisakan 7,5px kosong di
   atas dan bawah kotak 3:2, dan bayangan yang mengelilingi kotak akan
   menggantung 7,5px jauhnya dari benderanya. Dengan lebar tetap dan
   height: auto, setiap lambang memakai rasio aslinya sendiri sehingga
   bayangannya menempel persis. Tidak ada risiko halaman melompat: setiap
   <img> sudah membawa width dan height (aturan-kerja 3.4).

   Tinggi pita yang tadinya dijaga aspect-ratio sekarang dijaga min-height
   pada .hh-syarat__kepala — kedelapan kartu tetap sama tinggi walau
   benderanya tidak lagi sama tinggi. */
.hh-artikel__isi .hh-syarat__lambang {
  flex: none;
  width: 3.8rem;
  height: auto;
  box-shadow: 0 1px 3px rgb(var(--hh-ink-rgb) / 28%);
}

.hh-syarat--visa .hh-syarat__lambang {
  width: 5.4rem;
}

/* (0,2,0) — dua kelas mengalahkan .hh-artikel__isi h2 yang (0,1,1),
   sehingga ukuran dan warna judul di dalam pita tidak ikut aturan
   umum isi artikel. */
.hh-artikel__isi .hh-syarat__judul {
  margin: 0;
  color: var(--hh-ink);
  font-size: var(--fs-lg);
  line-height: 1.25;
}

.hh-syarat--visa .hh-syarat__judul {
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ----- badan ----- */

.hh-syarat__isi {
  padding: var(--sp-4) var(--sp-5);
  background: var(--hh-surface);
}

/* Butir bawaan dimatikan dan diganti ikon. Selektornya (0,2,0) supaya
   menang atas .hh-artikel__isi ul yang (0,1,1) dan menyetel
   padding-inline-start. */
.hh-artikel__isi .hh-syarat__daftar {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hh-syarat__daftar > li {
  position: relative;
  padding-inline-start: 1.9em;
}

/* Ikon lewat CSS, bukan tag <i> — TinyMCE membuang tag kosong
   (aturan 3.5), dan naskah ini memang disunting lewat TinyMCE.
   Titik-kode diambil dari fontawesome.css di proyek ini. */
.hh-syarat__daftar > li::before {
  position: absolute;
  inset-inline-start: 0;
  top: .1em;
  color: var(--hh-red);
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

/* Centang untuk paspor: daftarnya berupa berkas yang harus disiapkan
   dan dicoret satu per satu. */
.hh-syarat__daftar > li::before {
  content: "\f00c";                    /* fa-check */
}

/* Titik lingkaran untuk visa: daftarnya lebih panjang dan bukan
   daftar periksa, jadi penandanya dibuat lebih tenang. */
.hh-syarat--visa .hh-syarat__daftar > li::before {
  content: "\f192";                    /* fa-circle-dot */
  top: .28em;
  font-size: .72em;
}

/* ----- kotak catatan ----- */

.hh-syarat__nb {
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-inline-start: 4px solid var(--hh-red);
  background: var(--hh-white);
}

.hh-syarat__nb p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.65;
}

.hh-syarat__nb p + p {
  margin-top: var(--sp-2);
}

/* Kuning untuk catatan yang sifatnya peringatan keras — "semua surat
   harus asli". Kuning selalu berpasangan dengan teks --hh-ink, dan di
   sini hanya dipakai sebagai garis, bukan latar. */
.hh-syarat__nb--tegas {
  border-inline-start-color: var(--hh-yellow);
}

/* ============================================================
   28. SEKSI TENTANG KAMI — banner cetak + teks yang bisa dirayapi
   ============================================================
   Banner cetak Happy Holidays ditengahkan di atas, teks HTML selebar
   penuh di bawahnya.

   Pembagian gambar/teks itu bukan selera. Seluruh isi banner — nama,
   alamat, telepon, daftar layanan, nama destinasi — adalah teks yang
   dipanggang ke dalam gambar, dan mesin pencari tidak bisa membacanya
   (aturan 3.4). Blok teks di bawahnya menuliskan ulang isi yang sama
   sebagai teks sungguhan: itulah yang dirayapi Google, sementara
   bannernya bekerja sebagai gambar.

   Konsekuensinya blok teks wajib berisi kalimat yang benar-benar
   menjelaskan, bukan hiasan. Kalau isinya dipangkas jadi dua kata,
   seksi ini kehilangan seluruh alasan keberadaannya.

   Cetakan aslinya 2414x1760 dan 7 MB — jauh di atas batas 200 KB
   aturan 3.4. Yang dipasang versi 1200x875 (196 KB) dengan srcset 660px
   untuk layar sempit.
   ============================================================ */

/* Satu angka yang menentukan seksi ini: 900px, lebar kotak banner.

   Bukan selebar .hh-wrap (1320px) — berkasnya cuma 1200px, dan
   membentang penuh membuatnya kehilangan sifat "cetakan yang dipajang".
   Bukan pula 636px seperti versi dua kolom sebelumnya: di lebar itu
   baris layanan di dalam banner terukur 6,8px dan tidak terbaca sama
   sekali. Di 900px angkanya 9,7px — masih kecil, tapi terbaca, dan
   masih di bawah resolusi berkasnya sehingga tidak buram. */
.hh-banner__gambar {
  max-width: 900px;
  margin: 0 auto var(--sp-6);
}

/* Bingkai putih + garis + bayangan, sama dengan kartu .hh-doc di blok 26.
   Banner ini berlatar putih, dan seksinya krem — tanpa garis, tepi
   gambarnya lenyap ke dalam latar. Sudutnya siku mengikuti --r-md: 0. */
.hh-banner__gambar img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--hh-white);
  border: 1px solid var(--hh-line);
  box-shadow: var(--shadow-card);
}

.hh-banner__teks > * + * {
  margin-top: var(--sp-4);
}

.hh-banner__teks p {
  margin: 0;
  line-height: 1.75;
}

/* Daftar layanan, disalin dari baris hitam di banner cetak, sebagai
   badge ikon + label — bukan daftar centang teks lagi (permintaan 15
   September 2026, meniru tata letak enam kartu ikon di kartu nama lama).
   Tiga tingkat lebar (16 September 2026): satu baris penuh (6 kolom) di
   desktop lebar (>=1200px); tiga kolom/dua baris di tablet & desktop
   sempit (992-1199.98px, ini yang dulu jadi baku "desktop"); dua kolom
   di ponsel (<=991.98px, blok mobile 99). Basis (tanpa media query) =
   tingkat tablet, supaya kalau blok 99 gagal ke-load, tampilan tetap
   masuk akal. */
.hh-daftar-ikon {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4) var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (width >= 1200px) {
  .hh-daftar-ikon {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.hh-daftar-ikon__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  text-align: center;
}

/* Ikon berupa gambar asli, bukan lagi CSS + content: attr() (versi itu
   terasa kaku/flat). <img> aman dari plugin TinyMCE (tidak seperti
   <iframe>, lihat panduan-merawat.md), jadi tidak butuh trik content:
   attr(). Sumber gambar dari D:\asset_joomla_happyholidays\layanan:
   percobaan pertama (15 Sep) badge kaca/gradien bersudut bulat, dipotong
   + latar dibuat transparan di sini; diganti 16 Sep dengan versi
   "no_rounded_no_text" — kotak penuh warna, sudah siku, tidak perlu
   diproses lagi — biar sejalan dengan --r-md: 0 di seluruh situs. */
.hh-daftar-ikon__label {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
}

.hh-daftar-ikon__gambar {
  display: block;
  width: 4.6rem;
  height: auto;
  border-radius: var(--r-md);
}

/* Baris NAP (nama-alamat-telepon). Ditulis sebagai teks, bukan diambil
   dari gambar, supaya sama persis dengan yang ada di footer — mesin
   pencari lokal membandingkan ketiganya antar halaman. */
.hh-banner__kontak {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--hh-line);
  font-size: var(--fs-sm);
}

.hh-banner__baris {
  color: var(--hh-muted);
  text-decoration: none;
}

a.hh-banner__baris:hover {
  color: var(--hh-red);
}

.hh-banner__baris::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-inline-end: var(--sp-2);
  color: var(--hh-red);
}

.hh-banner__baris--alamat::before  { content: "\f3c5"; }   /* fa-location-dot */
.hh-banner__baris--telepon::before { content: "\f095"; }   /* fa-phone        */
.hh-banner__baris--surel::before   { content: "\f0e0"; }   /* fa-envelope     */

/* ============================================================
   29. KARTU ARMADA — Sewa Bus & Transportasi Wisata
   ============================================================
   Bentuknya sengaja sama persis dengan kartu destinasi blok 13: foto
   31:20 di atas, label merah, nama, deskripsi, tombol WhatsApp di dasar.
   Dua seksi yang sama-sama "pilih satu, lalu tanya lewat WhatsApp"
   memang harus terlihat sama.

   Kelasnya tetap dipisah, bukan memakai ulang .hh-dest, dengan alasan
   yang sama seperti blok 26 dipisah dari blok 14: isinya berbeda —
   destinasi punya negara, armada punya jenis dan jumlah kursi — dan
   menyetel salah satunya nanti tidak boleh diam-diam mengubah yang lain.
   Harganya ~50 baris yang mirip; itu lebih murah daripada satu perubahan
   pada seksi destinasi yang tanpa sengaja menggeser kartu armada.

   Fotonya foto pabrikan, bukan armada sendiri. Karena itu tidak ada satu
   pun kalimat di seksi ini yang mengaku "ini kendaraan kami" — teksnya
   bicara jenis dan kapasitas, bukan unit tertentu. Kalau nanti ada foto
   kendaraan sungguhan, tukar berkasnya saja; tata letaknya tidak berubah.
   ============================================================ */

.hh-armada {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hh-line);
  background: var(--hh-white);
  box-shadow: var(--shadow-card);
  color: var(--hh-ink);
  text-decoration: none;
  transition: box-shadow .2s ease, transform .2s ease;
}

.hh-armada:hover {
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
}

/* semua baris disamakan tingginya, bukan hanya kartu dalam satu baris */
.hh-grid:has(.hh-armada) {
  grid-auto-rows: 1fr;
}

.hh-armada__media {
  overflow: hidden;
  border-bottom: 1px solid var(--hh-line);
  background: var(--hh-white);
}

/* Berkasnya sudah dipotong ke 31:20 seperti foto destinasi, jadi `cover`
   di sini tidak memotong apa pun lagi. Foto pabrikan hampir selalu 3:2
   (1,50) — dipotong ke 1,55 biayanya 3,2%, dan kendaraannya tetap utuh
   di dalam bingkai. */
.hh-armada__img {
  display: block;
  width: 100%;
  aspect-ratio: 31 / 20;
  object-fit: cover;
  transition: transform .45s ease;
}

.hh-armada:hover .hh-armada__img {
  transform: scale(1.05);
}

.hh-armada__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--sp-4);
}

/* Jenis dan jumlah kursi — pertanyaan pertama setiap penyewa, jadi
   ditaruh di atas nama, bukan disembunyikan di dalam deskripsi. */
.hh-armada__jenis {
  margin: 0 0 var(--sp-1);
  color: var(--hh-red);
  font-family: var(--cassiopeia-font-family-headings);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.hh-armada__nama {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-h3);
  line-height: 1.25;
}

.hh-armada__desc {
  margin: 0 0 var(--sp-3);
  color: var(--hh-muted);
  font-size: var(--fs-sm);
  line-height: 1.65;
}

/* didorong ke dasar kartu supaya sejajar walau panjang teks berbeda */
.hh-armada__cta {
  align-self: flex-start;
  margin-top: auto;
  padding: .45rem .95rem;
  border: 1px solid var(--hh-line);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

/* ikon digambar lewat CSS — aturan 3.5 */
.hh-armada__cta::before {
  content: "\f232";                    /* fa-whatsapp */
  margin-inline-end: .45em;
  color: var(--hh-wa);
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
}

.hh-armada:hover .hh-armada__cta {
  border-color: var(--hh-red);
  background: var(--hh-red);
  color: var(--hh-white);
}

/* Latar tombol jadi merah saat kartu disentuh; ikon hijau WhatsApp di
   atas merah turun ke kontras 1,8:1. Diputihkan supaya tetap terbaca. */
.hh-armada:hover .hh-armada__cta::before {
  color: var(--hh-white);
}

@media (prefers-reduced-motion: reduce) {
  .hh-armada,
  .hh-armada__img { transition: none; }
  .hh-armada:hover { transform: none; }
  .hh-armada:hover .hh-armada__img { transform: none; }
}

/* ============================================================
   30. TETANGGA & ARTIKEL TERKAIT — di bawah satu artikel
   ============================================================
   Markupnya di com_content/article/default.php, melanjutkan blok 25.

   Dua bagian dengan tugas berbeda:

   .hh-artikel__nav     — kartu tipis berisi dua tautan, "Sebelumnya" dan
                          "Berikutnya". Gunanya menandai batas: isi artikel
                          berakhir di garis atas kartu ini, dan apa pun di
                          bawahnya sudah bicara tentang tulisan lain.
   .hh-artikel__terkait — tiga kartu .hh-post, kelas yang sama persis
                          dengan kartu di halaman daftar dan di beranda.

   Kenapa kartu, bukan sekadar garis: di halaman selebar 1320px sebuah
   garis tipis hilang begitu saja, dan dua tautan telanjang di bawah
   paragraf terakhir terbaca seperti bagian dari artikel. Latar putih di
   atas krem, garis, dan bayangan tipis --shadow-card membuatnya terbaca
   sebagai satu benda tersendiri — sama seperti setiap kartu lain di situs
   ini. Sudutnya tetap siku mengikuti --r-md: 0.
   ============================================================ */

.hh-artikel__nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  margin-top: var(--sp-7);
  border: 1px solid var(--hh-line);
  background: var(--hh-white);
  box-shadow: var(--shadow-card);
}

/* Garis pemisah hanya muncul kalau kedua sisi ada. Kalau artikelnya yang
   paling awal atau paling akhir, satu-satunya tautan mengisi kartu penuh
   tanpa garis menggantung. */
.hh-artikel__nav-sisi + .hh-artikel__nav-sisi {
  border-inline-start: 1px solid var(--hh-line);
}

.hh-artikel__nav-sisi {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-4);
  color: var(--hh-ink);
  text-decoration: none;
  transition: background-color .2s ease;
}

.hh-artikel__nav-sisi:hover {
  background: var(--hh-surface);
}

/* Sisi "Berikutnya" dibalik: teks rata kanan dan gambar di kanan, supaya
   arah bacanya sama dengan arah panahnya. */
.hh-artikel__nav-sisi--maju {
  justify-content: flex-end;
  text-align: end;
}

.hh-artikel__nav-gambar {
  flex: none;
  width: 5.5rem;
  aspect-ratio: 1;
  height: auto;
  object-fit: cover;
  border: 1px solid var(--hh-line);
}

.hh-artikel__nav-teks {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
}

.hh-artikel__nav-label {
  color: var(--hh-red);
  font-family: var(--cassiopeia-font-family-headings);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ikon digambar lewat CSS — aturan 3.5 */
.hh-artikel__nav-sisi--mundur .hh-artikel__nav-label::before,
.hh-artikel__nav-sisi--maju .hh-artikel__nav-label::after {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  transition: transform .2s ease;
  display: inline-block;
}

.hh-artikel__nav-sisi--mundur .hh-artikel__nav-label::before {
  content: "\f060";                    /* fa-arrow-left */
  margin-inline-end: .5em;
}

.hh-artikel__nav-sisi--maju .hh-artikel__nav-label::after {
  content: "\f061";                    /* fa-arrow-right */
  margin-inline-start: .5em;
}

.hh-artikel__nav-sisi--mundur:hover .hh-artikel__nav-label::before {
  transform: translateX(-3px);
}

.hh-artikel__nav-sisi--maju:hover .hh-artikel__nav-label::after {
  transform: translateX(3px);
}

/* Judul tetangga dibatasi dua baris. Judul artikel di situs ini bisa 46
   karakter; tanpa batas, satu sisi kartu tumbuh tiga baris sementara
   sisi lainnya satu, dan garis pemisahnya jadi terlihat miring. */
.hh-artikel__nav-judul {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-family: var(--cassiopeia-font-family-headings);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.35;
}

.hh-artikel__nav-sisi:hover .hh-artikel__nav-judul {
  color: var(--hh-red);
}

/* ----- artikel terkait ----- */

.hh-artikel__terkait {
  margin-top: var(--sp-7);
}

/* Ukurannya --fs-h3, sama dengan <h2> di dalam naskah artikel: ini
   penanda bagian, bukan judul halaman kedua. */
.hh-artikel__terkait-judul {
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-h3);
  line-height: 1.25;
}

@media (prefers-reduced-motion: reduce) {
  .hh-artikel__nav-sisi,
  .hh-artikel__nav-label::before,
  .hh-artikel__nav-label::after { transition: none; }

  .hh-artikel__nav-sisi--mundur:hover .hh-artikel__nav-label::before,
  .hh-artikel__nav-sisi--maju:hover .hh-artikel__nav-label::after { transform: none; }
}

/* ============================================================
   31. PENANDA MENU AKTIF — pasangan js/user.js
   ============================================================
   Kelas .active pada <li> datang dari dua arah, dan keduanya memakai
   tampilan yang sama persis:

     · Joomla, di sisi server, untuk halaman tersendiri (/artikel)
     · js/user.js, di sisi browser, untuk seksi beranda yang sedang dibaca

   Di desktop penandanya sudah ada sejak blok 3: garis putih 3px yang
   melebar dari tengah ke tepi bawah item.

   Di layar sempit garis itu dimatikan (blok mobile di bawah) karena menu
   berubah menjadi daftar menurun — garis bawah selebar layar terbaca
   sebagai pemisah antar item, bukan sebagai penanda. Penggantinya pita
   kuning di tepi kiri, yang dipasang di sini supaya bentuknya ditulis satu
   kali saja; blok mobile tinggal memberinya lebar.

   Pita ini memakai ::before, sedangkan garis desktop memakai ::after. Dua
   pseudo-element berbeda, jadi keduanya tidak pernah berebut satu properti
   yang sama — tidak ada yang perlu dibatalkan saat lebar layar berubah.

   Lebar 0 di sini berarti "belum kelihatan di mana pun". Hanya blok mobile
   yang menaikkannya menjadi 4px, jadi di desktop pita ini tidak pernah
   muncul walau item-nya aktif — persis seperti garis blok 3 yang menganggur
   dengan left:50% right:50% selama item belum aktif.
   ============================================================ */

.container-header .mod-menu > li > a::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 0;
  background: var(--hh-yellow);
  transition: width .18s ease;
}

@media (prefers-reduced-motion: reduce) {
  .container-header .mod-menu > li > a::before { transition: none; }
}


/* ============================================================
   32. PITA KEPALA TERANG — halaman artikel & halaman dokumen
   ============================================================
   Pita kepala di /artikel, di setiap halaman artikel, dan di halaman
   Layanan Paspor & Visa dulu memakai .hh-sec--ink: latar navy, teks putih,
   aksen kuning. Sekarang terang.

   KENAPA TIDAK CUKUP MENGUBAH .hh-sec--ink. Waktu blok ini ditulis, kelas
   itu masih dipakai seksi CTA penutup di beranda. CTA menyusul diterangkan
   di blok 33 dengan latar putih, bukan krem, supaya tidak melebur dengan
   seksi Artikel yang tepat di atasnya. Dua latar terang yang berbeda,
   jadi tetap dua kelas.

   .hh-sec--ink sendiri sengaja tidak dihapus. Tidak ada lagi yang memakainya,
   tapi ia satu-satunya cara membuat seksi gelap kalau nanti dibutuhkan —
   cukup tempelkan kelasnya, warna teks dan aksennya sudah ikut terurus.

   YANG MEMBUAT INI HAMPIR TIDAK PERLU ATURAN BARU. Aturan dasar seksi sudah
   ditulis untuk latar terang sejak awal:

     .hh-eyebrow      → --hh-red
     .hh-lead         → --hh-muted
     .hh-title::after → --hh-red
     .hh-title        → tanpa warna, jadi ikut induknya

   .hh-sec--ink-lah yang menimpa keempatnya menjadi putih dan kuning. Begitu
   pita tidak lagi memakai kelas itu, keempatnya kembali sendiri ke warna
   terang tanpa satu baris pun aturan tambahan. Yang tersisa hanya remah
   jejak dan baris tanggal, yang memang punya warnanya sendiri — keduanya
   sekarang membaca token di bawah ini.

   Tiga token itu satu-satunya tempat yang perlu disunting kalau pita mau
   dikembalikan gelap. Nilai lamanya:

     --hh-pita-bg      var(--hh-ink)
     --hh-pita-teks    var(--hh-white)
     --hh-pita-lembut  rgb(var(--hh-white-rgb) / 72%)
     --hh-pita-aksen   var(--hh-yellow)

   dan border-bottom dilepas. Tidak ada berkas lain yang ikut berubah.

   KONTRAS, diukur terhadap --hh-surface #FFF9EC:

     --hh-ink   teks judul & isi   13,9:1
     --hh-muted remah & tanggal     4,6:1
     --hh-red   aksen & remah kini  5,6:1

   Kuning sengaja tidak dipakai sama sekali di sini: di atas krem rasionya
   1,4:1 — larangan keras aturan-kerja 1.1.
   ============================================================ */

.hh-sec--pita {
  --hh-pita-bg:     var(--hh-surface);
  --hh-pita-teks:   var(--hh-ink);
  --hh-pita-lembut: var(--hh-muted);
  --hh-pita-aksen:  var(--hh-red);

  background: var(--hh-pita-bg);
  color: var(--hh-pita-teks);

  /* Isi halaman di bawah pita berlatar putih. Tanpa garis ini batas krem
     ke putih hanya selisih tipis dan pita berhenti terbaca sebagai kepala. */
  border-bottom: 1px solid var(--hh-line);
}


/* ============================================================
   33. SEKSI CTA TERANG — penutup beranda
   ============================================================
   Seksi "Ceritakan Rencana Perjalanan Anda" dulu navy lewat .hh-sec--ink.

   PUTIH, BUKAN KREM. Yang tepat di atasnya adalah seksi Artikel, dan seksi
   itu .hh-sec--surface — krem. Kalau CTA ikut krem, dua seksi berturut-turut
   berwarna sama dan batasnya hilang sama sekali; pembaca tidak lagi melihat
   CTA sebagai ajakan tersendiri, cuma sebagai ekor seksi artikel. Footer di
   bawahnya juga krem. Putih di antara dua krem yang membuat urutannya
   terbaca: krem - putih - krem.

   Garis --hh-line di atas dan di bawah menegaskan batas itu, karena selisih
   krem #FFF9EC ke putih #FFFFFF sendirian cuma 1,05:1 — nyaris tidak
   terlihat di layar yang kalibrasinya biasa saja.

   TOMBOLNYA TIDAK DIUBAH. Kuning dengan teks navy, tetap seperti dulu.
   Bukan kelalaian: .hh-art__all di seksi Artikel sudah tombol kuning di
   atas latar krem sejak awal, jadi kuning-di-atas-terang memang sudah
   perbendaharaan situs ini. Yang dilarang aturan-kerja 1.1 adalah teks
   kuning di atas terang, bukan bidang kuning — dan teks di dalam tombol
   ini navy, 12:1.

   Yang berubah selain latar cuma dua: baris "Atau telepon kantor kami"
   dan bayangan tombol saat disentuh. Sisanya — eyebrow merah, judul navy,
   lead abu, garis bawah judul merah — datang sendiri dari aturan dasar
   begitu .hh-sec--ink dilepas, persis seperti pita kepala di blok 32.
   ============================================================ */

.hh-sec--cta {
  border-block: 1px solid var(--hh-line);
  background: var(--hh-white);
  color: var(--hh-ink);
}


/* ============================================================
   34. PETA & ALAMAT — kantor di Google Maps
   ============================================================
   Posisi bottom-b, persis peta modul aturan-kerja.md 4.3. Modul
   [Home] Peta & Alamat (id 123) — satu-satunya seksi yang isinya bukan
   markup kita sendiri: bingkainya `.hh-peta`, isinya <iframe> dari Google.

   KENAPA IFRAME-NYA TIDAK DITEMPEL LEWAT TinyMCE. Konfigurasi TinyMCE situs
   ini membuang <iframe> begitu saja (invalid_elements berisi "iframe",
   sama seperti <script> dan <applet>). Modul ini ditulis langsung ke
   database, bukan lewat area visual — kalau nanti disunting ulang lewat
   admin, WAJIB lewat System → Global Configuration → Default Editor →
   None dulu (aturan-kerja 3.6 poin 2), lalu periksa iframe-nya masih ada
   di DOM sesudah disimpan. Naskah cadangannya ada di
   _docs/modul-home-peta.html.

   KENAPA TIDAK PERLU PEMUAT LAZY BUATAN SENDIRI. Seksi ini seksi TERAKHIR
   sebelum footer, jadi atribut `loading="lazy"` bawaan HTML sudah cukup:
   peramban tidak memuat iframe-nya sampai pembaca menggulir hampir ke
   dasar halaman. Tidak perlu skrip pemuat tambahan di user.js.

   RASIO GAMBAR, BUKAN TINGGI TETAP. `aspect-ratio` dipakai supaya peta
   selebar penuh di layar mana pun tanpa terpotong atau menyisakan bidang
   kosong. 16:9 di desktop; blok MOBILE mengubahnya ke 4:3 karena di
   layar sempit 16:9 hanya setinggi 211px pada lebar 375px — terlalu
   pendek untuk peta yang masih berguna.

   TAUTAN "Buka Rute" DI BAWAH PETA bukan hiasan: itu jalan keluar kalau
   iframe-nya diblokir pemblokir iklan/pelacak, dan satu-satunya cara
   membuka petunjuk arah di aplikasi Google Maps sungguhan di ponsel.
   Ikon pin-nya memakai &#xf3c5; — kode yang sama dengan "penanda lokasi"
   di panduan-merawat.md, sudah diverifikasi ada di Font Awesome versi
   situs ini.

   .hh-sec--peta HANYA menambah satu garis di dasar seksi. Tanpa itu,
   seksi ini (krem, `.hh-sec--surface`) menempel langsung ke footer (krem
   juga, blok 17) dan batasnya hilang — masalah yang sama yang dipecahkan
   blok 32 untuk pita kepala. Batas atasnya sudah cukup jelas sendiri:
   seksi CTA tepat di atasnya (blok 33) putih dengan `border-block`.
   ============================================================ */

.hh-sec--peta {
  border-bottom: 1px solid var(--hh-line);
}

.hh-peta {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
}

.hh-peta__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.hh-peta__aksi {
  margin: var(--sp-4) 0 0;
  text-align: center;
}

.hh-peta__tautan {
  color: var(--hh-red);
  font-weight: 600;
  text-decoration: none;
}

/* Ikon digambar lewat CSS — aturan 3.5 — bukan <i>, yang dibuang TinyMCE. */
.hh-peta__tautan::before {
  content: "\f3c5";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-inline-end: var(--sp-2);
}

.hh-peta__tautan:hover {
  text-decoration: underline;
}


/* ============================================================
   35. IKON SOSIAL DI FOOTER — Facebook & Instagram
   ============================================================
   Ditambahkan 11 September 2026, di kolom brand [Global] Footer (id 115),
   sesudah daftar alamat/telepon/jam. Dua tombol bulat berikon, bukan tombol
   berteks — pola sama dengan tombol bulat mana pun di situs ini.

   MONOKROM, BUKAN WARNA ASLI FACEBOOK/INSTAGRAM. Persis alasan .hh-foot__wa
   di atas tidak memakai --hh-wa: bentuk logonya sendiri sudah cukup dikenali
   tanpa bantuan warna, dan biru Facebook atau gradien Instagram bukan bagian
   palet situs (aturan-kerja 1.1). Warnanya membaca token --hh-kaki-* yang
   sama dengan seluruh footer, jadi ikut berubah kalau footer diterangkan/
   digelapkan ulang (lihat blok 17).

   rel="me" pada kedua tautan: penanda identitas antar-situs (dipakai mesin
   pencari & alat verifikasi profil) bahwa akun Facebook dan Instagram itu
   milik situs ini. Kerja SEO yang sesungguhnya — supaya pencarian di Google
   bisa menghubungkan Instagram ke situs ini dan sebaliknya — dilakukan
   sameAs pada data terstruktur, bukan tautan ini: lihat parameter "Social
   Media Accounts" plugin System - Schema.org (Extensions → Plugins) dan
   blok Organization di templates/cassiopeia_extended/index.php.

   Tombolnya kotak (var(--r-pill) bernilai 0 hari ini, blok 0) — ikut aturan
   "seluruh situs bersudut siku" yang sama dengan tombol CTA dan WhatsApp,
   tanpa satu deklarasi pun ditulis khusus untuk ini.
   ============================================================ */

.hh-foot__sosial {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

/* .container-footer.footer di depan — (0,3,0) — supaya menang atas
   .footer a:not(.btn) bawaan Cassiopeia (0,2,1) yang memaksa color:
   currentColor. Pola sama persis dengan .hh-foot__link dan .hh-foot__wa
   di atas (aturan-kerja 2.3). Tanpa awalan ini warnanya diam-diam kalah
   dan ikon terlihat hitam, bukan mengikuti --hh-kaki-teks. */
.container-footer.footer .hh-foot__sosial-tautan {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--hh-kaki-garis);
  border-radius: var(--r-pill);
  color: var(--hh-kaki-teks);
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease;
}

/* Ikon dari data-ikon, bukan kelas per akun — pola sama dengan aturan-kerja
   bagian 6 (data-ikon tim/layanan/dokumen): menambah akun sosial baru nanti
   tidak akan menuntut user.css disunting lagi, cukup satu <a> baru dengan
   data-ikon-nya sendiri. */
.hh-foot__sosial-tautan::before {
  content: attr(data-ikon);
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
  font-size: 1.1rem;
}

.container-footer.footer .hh-foot__sosial-tautan:hover,
.container-footer.footer .hh-foot__sosial-tautan:focus-visible {
  color: var(--hh-kaki-aksen);
  border-color: var(--hh-kaki-aksen);
}


/* ============================================================
   36. WORDMARK "HAPPY HOLIDAYS" — font Comic Strip
   ============================================================
   Ditambahkan 11 September 2026. Font-nya sendiri dideklarasikan di atas
   berkas ini (@font-face, dekat @import). Dipasang di dua tempat — baris
   logo header dan logo footer — bukan di mana pun teks "Happy Holidays"
   disebut:

     .brand-logo       header, ".container-header .navbar-brand" —
                        satu-satunya elemen judul di sana, ukurannya
                        sudah diatur navbar-brand (2rem desktop, blok 99
                        mengubahnya jadi 1.4rem di ponsel)
     .hh-foot__brand    footer, ikon smiley + "Happy Holidays" (blok 17)

   YANG SENGAJA DILEWATI, dan alasannya:
   - .hh-hero__brand — label kecil huruf besar semua di atas judul hero
     (blok 21, font-size .875rem + letter-spacing). Ukuran sekecil itu
     dengan huruf komik akan sulit dibaca; label ini tetap Poppins.
   - <h2 class="hh-title"> di seksi "Tentang & Banner" yang isinya
     kebetulan nama merek — kelas itu dipakai SEMUA judul seksi di
     beranda. Mengubah huruf di sana berarti mengubah judul semua seksi
     lain juga.
   - Baris hak cipta footer, alt gambar, judul tab peramban — teks biasa/
     tidak terlihat, bukan tampilan logo.

   Kalau salah satu di atas ternyata mau ikut diubah, tambahkan kelasnya
   ke selektor di bawah — jangan menambah `font-family` langsung ke
   `.hh-title` atau `.hh-hero__brand`, supaya seksi lain tidak ikut kena.

   font-weight dipatok 400: berkasnya cuma satu berat, membiarkan browser
   menebalkan sendiri (bold sintetis) akan membuat guratannya pecah. */
.brand-logo,
.hh-foot__brand {
  font-family: "Comic Strip", var(--cassiopeia-font-family-headings);
  font-weight: 400;
}

/* Warna merah — permintaan warna brand 16 September 2026, alasan lengkap
   & catatan soal font satu-warna ini ada di komentar
   ".container-header .navbar-brand .brand-logo" (blok 8). Footer-nya
   ditulis terpisah di sini (bukan digabung ke selektor .brand-logo di
   atas) karena footer tidak butuh spesifisitas ekstra seperti header —
   biar tidak ada satu pun aturan warna yang jadi mati/tidak kepakai. */
.hh-foot__brand {
  color: var(--hh-red);
}

/* Efek "tinggi & ramping" ala CorelDraw (diminta 15 September 2026):
   huruf diregangkan vertikal dan dirapatkan horizontal lewat transform,
   bukan font-stretch — font satu berkas ini tidak punya varian
   condensed, jadi font-stretch tidak berpengaruh. transform-origin kiri
   supaya sisi kiri wordmark tetap sejajar dengan logo smiley di
   sebelahnya, tidak ikut bergeser saat diregangkan.

   .brand-logo aman ditransformasi langsung — isinya cuma teks, ikon
   smiley ada di elemen lain (::before milik .navbar-brand, blok 8).
   Footer beda: ikon smiley ada di ::before milik .hh-foot__brand SENDIRI
   (blok 17), jadi kalau elemen itu yang ditransformasi ikonnya ikut
   gepeng. Makanya footer butuh pembungkus <span class="hh-foot__brand-text">
   di sekitar teksnya saja (lihat modul [Global] Footer). */
.brand-logo,
.hh-foot__brand-text {
  display: inline-block;
  transform: scaleY(1.22) scaleX(0.92);
  transform-origin: left center;
}


/* ===== 5. MOBILE — harus paling bawah ===== */
@media (width <= 991.98px) {
  .container-header .container-nav {
    padding-inline: 0;
  }

  /* di mobile brand ditengahkan, jadi tepinya harus simetris lagi */
  .container-header .grid-child:not(.container-nav) {
    padding-inline: var(--sp-3);
  }

  /* jarak antar seksi lebih rapat di layar sempit — aturan-kerja 1.2 */
  .hh-sec {
    padding-block: var(--sp-6);
  }

  .hh-foot {
    padding-block: var(--sp-6) var(--sp-4);
  }

  /* Sasaran sentuh tautan footer disamakan dengan tombol WhatsApp di seksi
     Tim, 2.75rem (44px). Tanpa ini jarak antar tautan cuma 29px — terlalu
     rapat untuk jempol, padahal tautan inilah jalur pemesanan. Baris alamat
     & telepon di kolom brand sengaja tidak ikut: keduanya grid dua kolom,
     min-height akan melepas ikon dari baris teksnya. */
  .container-footer.footer .hh-foot__list .hh-foot__link {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
  }

  .container-footer.footer .hh-foot__list .hh-foot__wa {
    min-height: 2.75rem;
  }

  .hh-foot__item {
    margin-bottom: 0;
  }

  /* hamburger ke kanan + lebih ramping */
  .container-header .navbar-toggler {
    margin-inline-start: auto;
    margin-inline-end: 1rem;
    margin-block: .6rem;
    padding: .2rem .5rem;
    font-size: 1.15rem;
    line-height: 1.4;
  }

  /* Daftar|Login ikut buka-tutup bersama hamburger */
  .container-header .container-search {
    display: none;
  }

  .container-header .container-nav:has(.navbar-collapse.show) .container-search,
  .container-header .container-nav:has(.navbar-collapse.collapsing) .container-search {
    display: flex;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
  }

    /* di mobile Daftar & Login menumpuk ke bawah */
  .container-header .container-search .mod-custom,
  .container-header .container-search .mod-custom > p {
    flex-direction: column;
    width: 100%;
  }

    /* item menu selebar layar — <li> bawaan metismenu display:flex */
  .container-header .metismenu.mod-menu .metismenu-item {
    display: block;
  }

  /* --- penanda item aktif (blok 31) --- */

  /* Garis bawah animasi tidak cocok untuk menu vertikal: selebar layar,
     ia terbaca sebagai pemisah antar item, bukan sebagai penanda. */
  .container-header .mod-menu > li > a::after {
    display: none;
  }

  /* Penggantinya pita kuning di tepi kiri. Bentuknya sudah ditulis di
     blok 31; di sini ia tinggal diberi lebar. */
  .container-header .mod-menu > li.active > a::before {
    width: 4px;
  }

  /* Pita saja terlalu tipis untuk dilihat sekilas sambil menggulir, jadi
     latarnya ikut digelapkan. --hh-navbar-hover memang lahir untuk peran
     ini: satu-satunya penggelap yang dipakai di dalam bar merah.

     Blok 3 menyetel .active > a menjadi transparent dengan spesifisitas
     yang sama persis (0,3,2). Seri, dan yang ditulis belakangan menang —
     itu sebabnya aturan ini harus tetap berada di blok mobile paling
     bawah, bukan dipindah ke atas. */
  .container-header .mod-menu > li.active > a {
    background-color: var(--hh-navbar-hover);
  }

  /* garis pembatas di bawah baris hamburger */
  .container-header .navbar-collapse {
    border-top: 1px solid rgb(255 255 255 / 25%);
  }

  /* tombol dipisah dari daftar menu, dan diberi napas ke bawah */
  .container-header .container-search a.btn-pesan {
    margin-block: .75rem 1.25rem;
  }

    /* nama situs & tagline dikecilkan di layar sempit */
  .container-header .navbar-brand {
    font-size: 1.4rem;
  }

  .container-header .site-description {
    font-size: .85rem;
  }

  /* Cassiopeia mengunci position:relative !important di bawah 992px;
     user.css dimuat terakhir sehingga seri specificity ini kita menangkan */
  .container-header {
    position: sticky !important;
  }

  /* saat bar menempel, daftar hamburger tidak boleh melewati layar */
  .container-header .navbar-collapse {
    max-height: calc(100vh - var(--hh-navbar-h));
    max-height: calc(100dvh - var(--hh-navbar-h));
    overflow-y: auto;
  }

  /* --- halaman daftar artikel (blok 24) --- */

  /* pita kepala lebih rapat: di layar sempit 72px terasa seperti halaman
     kosong sebelum isinya muncul */
  .hh-blog__head {
    padding-block: var(--sp-5);
  }

  /* label "Telusuri menurut topik" naik ke barisnya sendiri, supaya chip
     tidak terjepit di sisa lebar dan setiap chip tetap 44px */
  .hh-blog__filter {
    gap: var(--sp-2);
  }

  .hh-blog__filter-label {
    flex-basis: 100%;
  }

  .hh-blog__nav {
    justify-content: center;
  }

  /* --- seksi Tentang Kami (blok 28) --- */

  /* Dua kolom: label sudah dipendekkan ("Paket Tour", bukan "Paket Tour
     Inbound & Outbound"), jadi muat berdampingan tanpa pecah baris di
     343px — beda dengan daftar teks lama yang perlu satu kolom penuh. */
  .hh-daftar-ikon {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Baris kontak menumpuk — tiga butir berdampingan tidak muat, dan
     yang pecah di tengah kehilangan ikonnya dari barisnya sendiri. */
  .hh-banner__kontak {
    flex-direction: column;
  }

  /* --- tetangga artikel (blok 30) --- */

  /* Dua sisi menumpuk. auto-fit di desktop tidak cukup: minmax(0, 1fr)
     tidak pernah memaksa pindah baris, jadi di 343px kedua sisi tetap
     berjajar dan judulnya tersisa dua kata. */
  .hh-artikel__nav {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Garisnya ikut berputar: yang memisahkan sekarang atas-bawah, bukan
     kiri-kanan. */
  .hh-artikel__nav-sisi + .hh-artikel__nav-sisi {
    border-inline-start: 0;
    border-block-start: 1px solid var(--hh-line);
  }

  /* Sisi "Berikutnya" tidak lagi dibalik: di satu kolom, dua sisi yang
     berlawanan arah membuat gambar melompat kiri-kanan tanpa alasan. */
  .hh-artikel__nav-sisi--maju {
    flex-direction: row-reverse;
    justify-content: flex-end;
    text-align: start;
  }

  /* --- seksi Peta & Alamat (blok 34) --- */

  /* 16:9 pada lebar 375px hanya setinggi 211px — terlalu pendek untuk peta
     yang masih berguna. 4:3 memberi ruang vertikal lebih tanpa mengubah
     lebar, yang memang sudah selebar layar. */
  .hh-peta {
    aspect-ratio: 4 / 3;
  }
}