/* =========================================================================
   base.css — Tri Niaga Inovasi
   Lapisan fondasi sistem desain: design token (warna, tipografi, spacing)
   + reset/base ringan. Selaras dengan tampilan inline di index.html,
   sample.html, blog.html, dan thanks.html.

   Catatan:
   - Hanya berisi TOKEN + gaya dasar (body, heading, font, reset).
   - Gaya komponen bersama (tombol, kartu, badge, dll.) ditambahkan
     pada tugas 2.2 ke file yang sama.
   - Pendekatan mobile-first; hindari !important.
   ========================================================================= */

/* ===== DESIGN TOKENS (CSS CUSTOM PROPERTIES) ===== */
:root {
  /* --- Warna brand (navy + gold) --- */
  --navy:       #1B2A4A; /* primary brand, navbar, heading, section gelap */
  --navy-dark:  #0F1E35; /* footer, navbar saat scroll */
  --navy-mid:   #243B6A; /* hover state, gradien */
  --gold:       #C9A84C; /* aksen, CTA gold, highlight, border dekorasi */
  --gold-light: #E8D5A3; /* teks aksen di latar gelap, border halus */
  --gold-pale:  #F7F0DC; /* background ikon/section sangat ringan */

  /* --- Warna netral & utilitas --- */
  --gray-100:   #F8F9FA; /* background section selang-seling */
  --gray-200:   #E9ECEF; /* border, divider */
  --muted:      #6C757D; /* teks sekunder, label */
  --wa:         #25D366; /* tombol WhatsApp */
  --text:       #1A1A2E; /* body text utama */

  /* --- Warna status form (sample.html) --- */
  --success:        #1A7A3E; /* teks sukses */
  --success-bg:     #E7F8EE; /* latar sukses */
  --error:          #A32D2D; /* teks error */
  --error-bg:       #FCEBEB; /* latar error */

  /* --- Tipografi --- */
  --font-base: 'Segoe UI', 'Noto Sans', system-ui, sans-serif;

  --fs-base:    15px;   /* ukuran teks body */
  --lh-base:    1.65;   /* tinggi baris body */
  --fw-body:    400;    /* ketebalan teks body */
  --fw-heading: 800;    /* ketebalan heading */
  --heading-spacing: -0.3px; /* letter-spacing heading */

  /* Skala ukuran font (mobile-first) */
  --fs-tag:    11px;    /* label section uppercase */
  --fs-sm:     14px;    /* teks kecil / sub */
  --fs-lg:     1.25rem;
  --fs-xl:     1.6rem;  /* section title */
  --fs-h1:     2rem;    /* hero h1 di mobile (naik di desktop) */

  /* --- Skala spacing (kelipatan 4px) --- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;

  /* --- Radius & efek bersama --- */
  --radius-sm:  6px;
  --radius:     8px;   /* radius standar tombol & kartu */
  --radius-lg:  14px;
  --radius-pill: 50px;

  /* --- Target sentuh & layout --- */
  --touch-target: 44px; /* tinggi minimal kontrol interaktif */
}

/* ===== RESET RINGAN ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* ===== BASE: BODY ===== */
body {
  margin: 0;
  font-family: var(--font-base);
  font-weight: var(--fw-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--text);
  overflow-x: hidden; /* cegah scroll horizontal di mobile */
  /* Tambahan keamanan mobile layout */
  max-width: 100%;
  position: relative;
}

/* ===== BASE: TIPOGRAFI HEADING ===== */
h1, h2, h3, h4, h5, h6 {
  color: var(--navy);
  font-weight: var(--fw-heading);
  letter-spacing: var(--heading-spacing);
  line-height: 1.25;
}

/* ===== BASE: ELEMEN UMUM ===== */
a {
  color: var(--navy);
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto; /* gambar responsif & tidak gepeng */
}

/* Fokus terlihat untuk navigasi keyboard (aksesibilitas) */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* =========================================================================
   KOMPONEN BERSAMA (Tugas 2.2)
   Gaya komponen UI yang dipakai ulang lintas halaman (index, sample, blog,
   thanks). Nilai diambil PERSIS dari <style> inline tiap halaman agar saat
   inline duplikat dilepas (tugas 3.4) tampilan tidak berubah.

   Acuan: design.md "Komponen UI Bersama" + tech.md.
   Pendekatan mobile-first; hover dibungkus @media (hover: hover).
   ========================================================================= */

/* ===== LABEL SECTION (tag, title, sub) ===== */
/* Label kecil uppercase warna gold di atas judul section */
.section-tag {
  display: inline-block;
  color: var(--gold);
  font-size: var(--fs-tag);     /* 11px */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 6px;
}
.section-title {
  font-size: var(--fs-xl);      /* 1.6rem */
  font-weight: 800;
  margin-bottom: 8px;
}
.section-sub {
  color: var(--muted);
  font-size: var(--fs-sm);      /* 14px */
  margin-bottom: 0;
}

/* ===== TOMBOL DASAR BERSAMA ===== */
/* Pola umum: radius 8px, min-height 44px (target sentuh), inline-flex tengah. */

/* Primary navy — CTA utama gelap */
.btn-navy {
  background: var(--navy);
  color: #fff;
  border: 2px solid var(--navy);
  padding: 11px 24px;
  border-radius: var(--radius);          /* 8px */
  font-weight: 700;
  font-size: 14px;
  min-height: var(--touch-target);       /* 44px */
  transition: background .2s, transform .15s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Gold — CTA aksen (Minta Sampel) */
.btn-gold {
  background: var(--gold);
  color: var(--navy-dark);
  border: 2px solid var(--gold);
  padding: 11px 24px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 14px;
  min-height: var(--touch-target);
  transition: background .2s, transform .15s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Outline putih — dipakai di latar navy (hero) */
.btn-outline-white {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.45);
  padding: 11px 24px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 14px;
  min-height: var(--touch-target);
  transition: border-color .2s, background .2s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* WhatsApp — hijau, ikon bi-whatsapp */
.btn-wa {
  background: var(--wa);
  color: #fff;
  border: 2px solid var(--wa);
  padding: 11px 24px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 14px;
  min-height: var(--touch-target);
  transition: background .2s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

@media (hover: hover) {
  .btn-gold:hover         { background: #d4b356; transform: translateY(-2px); }
  .btn-navy:hover         { background: var(--navy-mid); transform: translateY(-2px); }
  .btn-outline-white:hover { border-color: #fff; background: rgba(255, 255, 255, 0.1); }
  .btn-wa:hover           { background: #20bc5c; transform: translateY(-2px); }
}

/* ===== VARIAN TOMBOL WHATSAPP ===== */
/* Outline WA full-width — opsi "Chat Langsung via WhatsApp" (sample.html) */
.btn-wa-alt {
  width: 100%;
  background: transparent;
  border: 1.5px solid var(--wa);
  color: var(--wa);
  padding: 11px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  min-height: var(--touch-target);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-decoration: none;
  transition: background .2s, color .2s;
}

/* WA solid full-width — CTA utama (thanks.html) */
.btn-wa-main {
  width: 100%;
  background: var(--wa);
  color: #fff;
  border: none;
  padding: 13px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 700;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  margin-bottom: 10px;
  transition: background .2s, transform .15s;
}

@media (hover: hover) {
  .btn-wa-alt:hover  { background: var(--wa); color: #fff; }
  .btn-wa-main:hover { background: #20bc5c; color: #fff; transform: translateY(-1px); }
}

/* ===== VARIAN TOMBOL OUTLINE NAVY / NETRAL ===== */
/* Outline navy full-width — "Jelajahi Katalog" (thanks.html) */
.btn-catalog {
  width: 100%;
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--navy);
  padding: 11px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  min-height: var(--touch-target);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-decoration: none;
  margin-bottom: 10px;
  transition: background .2s, color .2s;
}

/* Outline netral full-width — "Kembali ke Beranda" (thanks.html) */
.btn-home {
  width: 100%;
  background: transparent;
  color: var(--muted);
  border: 1.5px solid var(--gray-200);
  padding: 10px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 500;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  transition: border-color .2s, color .2s;
}

/* Outline navy produk — "Lihat Detail" pada kartu produk (index.html) */
.btn-detail {
  width: 100%;
  background: transparent;
  border: 1.5px solid var(--navy);
  color: var(--navy);
  padding: 8px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  min-height: 40px;
  transition: background .2s, color .2s;
}

/* Outline navy lebar — "Lihat Semua Produk" (index.html) */
.btn-all-produk {
  width: 100%;
  background: transparent;
  border: 2px solid var(--navy);
  color: var(--navy);
  padding: 12px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 700;
  min-height: var(--touch-target);
  transition: background .2s, color .2s;
}
@media (min-width: 768px) {
  .btn-all-produk { width: auto; padding: 12px 32px; }
}

@media (hover: hover) {
  .btn-catalog:hover    { background: var(--navy); color: #fff; }
  .btn-home:hover       { border-color: var(--muted); color: var(--text); }
  .btn-detail:hover     { background: var(--navy); color: #fff; }
  .btn-all-produk:hover { background: var(--navy); color: #fff; }
}

/* ===== NAVBAR BERSAMA ===== */
/* Navbar sticky latar navy + efek .scrolled (>50px) via JS. Markup nav
   distandarkan pada tugas 3; di sini hanya gaya yang sudah dipakai bersama. */
#mainNav {
  background: var(--navy);
  padding: 13px 0;
  transition: background .3s, box-shadow .3s;
  border-bottom: 1px solid rgba(201, 168, 76, 0.15);
}
#mainNav.scrolled {
  background: var(--navy-dark);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}
.navbar-brand {
  font-weight: 800;
  font-size: 17px;
  color: #fff !important; /* override warna brand Bootstrap */
  letter-spacing: -0.2px;
}
.navbar-brand span { color: var(--gold); }
.navbar-toggler {
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 8px 12px;
  min-height: 44px; /* Touch target yang memadai */
  display: flex;
  align-items: center;
  justify-content: center;
}
.navbar-toggler-icon { 
  filter: invert(1); 
  width: 1.2em;
  height: 1.2em;
}
.nav-link {
  color: rgba(255, 255, 255, 0.75) !important; /* override warna link Bootstrap */
  font-size: 14px;
  font-weight: 500;
  padding: 10px 14px !important;
  transition: color .2s;
}
.nav-link:hover { color: #fff !important; }

/* Menu mobile: garis pemisah di atas; hilang pada layar lg ke atas */
.navbar-collapse {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 10px;
  padding-top: 8px;
}
@media (min-width: 992px) {
  .navbar-collapse { border-top: none; margin-top: 0; padding-top: 0; }
}

/* Pil WA di navbar — hijau membulat */
.btn-nav-wa {
  background: var(--wa);
  color: #fff !important;
  border-radius: 20px;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 8px 18px !important;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 6px 14px;
  min-height: 40px;
}
@media (min-width: 992px) {
  .btn-nav-wa { margin: 0 0 0 8px; }
}

/* ===== KARTU: KEUNGGULAN ===== */
/* Border-top gold 3px + kotak ikon pada latar gold-pale (index.html) */
.card-unggulan {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-top: 3px solid var(--gold);
  border-radius: 10px;
  padding: 22px 18px;
  height: 100%;
  transition: transform .25s, box-shadow .25s;
}
.card-unggulan-icon {
  width: 46px;
  height: 46px;
  background: var(--gold-pale);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 14px;
}
.card-unggulan h5 { font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.card-unggulan p  { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.55; }
@media (hover: hover) {
  .card-unggulan:hover { transform: translateY(-5px); box-shadow: 0 10px 28px rgba(27, 42, 74, 0.1); }
}

/* ===== KARTU: TOPIK / KATEGORI (blog.html) ===== */
/* Pola sama dengan kartu keunggulan: border-top gold + ikon gold-pale */
.topik-card {
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-top: 3px solid var(--gold);
  border-radius: 10px;
  padding: 20px 18px;
  height: 100%;
  transition: transform .2s, box-shadow .2s;
}
.topik-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--gold-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 12px;
}
.topik-title { font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 5px; }
.topik-desc  { font-size: 12px; color: var(--muted); line-height: 1.6; margin: 0; }
@media (hover: hover) {
  .topik-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(27, 42, 74, 0.1); }
}

/* ===== KARTU: PRODUK (mobile list + desktop grid, index.html) ===== */
/* Mobile: layout list ringkas */
.produk-list-item {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.produk-thumb-mobile {
  width: 70px;
  height: 70px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--gold-pale), #e0d4b0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
}
.produk-info-mobile h6 { font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 2px; }
.produk-info-mobile .mat   { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.produk-info-mobile .price { font-size: 13px; font-weight: 700; color: var(--gold); }

/* Desktop: kartu grid */
.produk-card-desktop {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
  transition: transform .25s, box-shadow .25s;
}
.produk-card-desktop .produk-img {
  height: 180px;
  background: linear-gradient(135deg, var(--gold-pale), #dfd1a8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 52px;
  position: relative;
}
.produk-card-desktop .produk-body { padding: 18px; }
.produk-card-desktop h5      { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 3px; }
.produk-card-desktop .mat    { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.produk-card-desktop .price  { font-size: 14px; font-weight: 700; color: var(--gold); margin-bottom: 14px; }
@media (hover: hover) {
  .produk-card-desktop:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(27, 42, 74, 0.1); }
}

/* ===== KARTU: ARTIKEL (blog.html) ===== */
.artikel-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
  transition: transform .2s, box-shadow .2s;
}
.artikel-thumb {
  height: 160px;
  background: linear-gradient(135deg, var(--navy), var(--navy-mid));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  position: relative;
  overflow: hidden;
}
/* Styling untuk real image (Fase 2 - siap digunakan saat foto tersedia) */
.artikel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.artikel-body { padding: 16px 18px; }
.artikel-meta    { font-size: 11px; color: var(--muted); margin-bottom: 7px; }
.artikel-title   { font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 7px; line-height: 1.45; }
.artikel-excerpt { font-size: 12px; color: var(--muted); line-height: 1.6; margin-bottom: 14px; }
.artikel-link {
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap .2s, color .2s;
}
@media (hover: hover) {
  .artikel-card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(27, 42, 74, 0.1); }
  .artikel-link:hover { gap: 8px; color: var(--gold); }
}

/* ===== KARTU: TESTIMONI (latar navy, index.html) ===== */
/* Mobile: scroll-snap horizontal → desktop: grid 3 kolom (lihat utilitas) */
.card-testi {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(201, 168, 76, 0.2);
  border-radius: 12px;
  padding: 22px 20px;
  min-width: 272px;
  scroll-snap-align: start;
  flex-shrink: 0;
  transition: background .2s;
}
.testi-stars  { color: var(--gold); font-size: 14px; letter-spacing: 2px; margin-bottom: 12px; }
.testi-quote  { color: rgba(255, 255, 255, 0.8); font-size: 13px; line-height: 1.7; font-style: italic; margin-bottom: 16px; }
.testi-author { display: flex; align-items: center; gap: 10px; }
.testi-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--navy-mid);
  border: 2px solid rgba(201, 168, 76, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-light);
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.testi-name { font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 2px; }
.testi-role { font-size: 11px; color: rgba(255, 255, 255, 0.45); }

/* ===== KARTU KONTEN GENERIK & SIDEBAR (sample.html, thanks.html) ===== */
.content-card,
.sidebar-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  overflow: hidden;
}
/* Header kartu berlatar navy (judul kartu) */
.card-header-navy,
.sidebar-card-header,
.sidebar-card-head {
  background: var(--navy);
  color: #fff;
  padding: 11px 16px;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}
/* Badan kartu dengan padding standar */
.card-body-pad,
.sidebar-card-body { padding: 14px 16px; }

/* ===== BADGE ===== */
/* Badge kategori produk — latar navy (index.html).
   Tetap di-scope sesuai konteks agar identik dengan inline:
   versi mobile (dalam info) dan versi desktop (absolut di atas gambar). */
.produk-info-mobile .produk-badge {
  display: inline-block;
  background: var(--navy);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  margin-bottom: 5px;
}
.produk-card-desktop .produk-img .produk-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--navy);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
}

/* Badge artikel — latar gold di atas thumbnail (blog.html) */
.artikel-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--gold);
  color: var(--navy-dark);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 10px;
}

/* Badge hero — pil aksen di latar navy (proof/teaser) */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(201, 168, 76, 0.15);
  border: 1px solid rgba(201, 168, 76, 0.35);
  color: var(--gold-light);
  padding: 5px 13px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 18px;
}

/* Trust / proof badge — chip kepercayaan (sample.html) */
.trust-badges { display: flex; flex-wrap: wrap; gap: 7px; }
.trust-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 7px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}

/* ===== FOOTER BERSAMA ===== */
/* Latar navy-dark, multi-kolom (desktop) → ringkas (mobile). Markup footer
   distandarkan pada tugas 3; tahun © otomatis via JS. */
footer {
  background: var(--navy-dark);
  color: rgba(255, 255, 255, 0.65);
  padding: 52px 0 0;
}
.footer-brand { color: #fff; font-weight: 800; font-size: 17px; margin-bottom: 8px; }
.footer-brand span { color: var(--gold); }
.footer-desc { font-size: 13px; line-height: 1.7; margin-bottom: 16px; }
.footer-social { display: flex; gap: 8px; margin-bottom: 28px; }
.soc-btn {
  width: 34px;
  height: 34px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 15px;
  text-decoration: none;
  transition: background .2s, color .2s;
}
.footer-col-title {
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  margin-bottom: 14px;
}
.footer-col a {
  display: block;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  margin-bottom: 9px;
  text-decoration: none;
  transition: color .2s;
}
.footer-col p { font-size: 13px; line-height: 1.85; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 16px 0;
  margin-top: 8px;
}
.footer-copy { font-size: 12px; color: rgba(255, 255, 255, 0.3); }
@media (hover: hover) {
  .soc-btn:hover   { background: rgba(201, 168, 76, 0.25); color: var(--gold-light); }
  .footer-col a:hover { color: var(--gold-light); }
}

/* ===== BREADCRUMB (halaman dalam: sample, blog) ===== */
.breadcrumb-nav span    { color: rgba(255, 255, 255, 0.25); font-size: 12px; margin: 0 6px; }
.breadcrumb-nav strong  { color: rgba(255, 255, 255, 0.85); font-size: 12px; }

/* ===== MOTIF BATIK (SVG data-URI inline) ===== */
/* Overlay dekoratif opacity 0.07 pada hero & section navy */
.batik-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M24 4L44 24L24 44L4 24Z' fill='none' stroke='%23C9A84C' stroke-width='1'/%3E%3Ccircle cx='24' cy='24' r='6' fill='none' stroke='%23C9A84C' stroke-width='1'/%3E%3Ccircle cx='24' cy='24' r='1.5' fill='%23C9A84C'/%3E%3Ccircle cx='4'  cy='4'  r='2' fill='%23C9A84C'/%3E%3Ccircle cx='44' cy='4'  r='2' fill='%23C9A84C'/%3E%3Ccircle cx='4'  cy='44' r='2' fill='%23C9A84C'/%3E%3Ccircle cx='44' cy='44' r='2' fill='%23C9A84C'/%3E%3C/svg%3E");
  background-size: 48px 48px;
}

/* =========================================================================
   UTILITAS & HELPER RESPONSIF
   Pelengkap grid Bootstrap 5.3 (container/row/col-*). Hanya helper kecil
   yang dipakai lintas halaman; jangan menduplikasi utilitas Bootstrap.
   Breakpoint selaras Bootstrap: sm 576, md 768, lg 992, xl 1200.
   ========================================================================= */

/* Kelompok tombol CTA: tumpuk di mobile → sejajar mulai sm (576px).
   Dipakai di hero (.hero-btns), banner CTA (.cta-btns), strip (.strip-btns). */
.hero-btns,
.cta-btns,
.strip-btns {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (min-width: 576px) {
  .hero-btns  { flex-direction: row; flex-wrap: wrap; }
  .cta-btns   { flex-direction: row; justify-content: center; align-items: center; }
  .strip-btns { flex-direction: row; }
}

/* Carousel testimoni: scroll-snap horizontal (mobile) → grid 3 kolom (lg).
   Dipakai bersama oleh kartu .card-testi. */
.testi-scroll {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}
.testi-scroll::-webkit-scrollbar { height: 3px; }
.testi-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 3px; }
@media (min-width: 992px) {
  .testi-scroll {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow-x: visible;
    scroll-snap-type: none;
    gap: 20px;
  }
  .card-testi { min-width: 0; }
}

/* Petunjuk geser (hanya tampil di mobile, hilang mulai lg) */
.swipe-hint { color: rgba(255, 255, 255, 0.35); font-size: 11px; text-align: center; margin-top: 10px; }
@media (min-width: 992px) {
  .swipe-hint { display: none; }
}

/* Divider tipis selaras warna border token */
.section-divider { border-color: var(--gray-200); }

/* Animasi fade-up saat scroll (di-trigger menambah .visible via JS).
   Progressive enhancement: tanpa JS elemen tetap terlihat (lihat fallback). */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .55s ease, transform .55s ease;
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hormati preferensi pengguna yang mengurangi animasi (aksesibilitas) */
@media (prefers-reduced-motion: reduce) {
  .fade-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
  html { scroll-behavior: auto; }
}

/* =========================================================================
   AKSESIBILITAS: FOKUS KEYBOARD YANG JELAS
   Memastikan semua elemen interaktif memiliki indikator fokus yang terlihat
   jelas saat diakses menggunakan keyboard (Tab). Sesuai WCAG 2.1 Level AA.
   ========================================================================= */

/* Fokus default untuk semua elemen interaktif */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(201,168,76,0.2);
}

/* Fokus untuk tombol-tombol utama */
.btn-gold:focus-visible,
.btn-navy:focus-visible,
.btn-wa:focus-visible,
.btn-outline-white:focus-visible,
.btn-nav-wa:focus-visible,
.btn-submit:focus-visible,
.btn-wa-alt:focus-visible,
.btn-wa-main:focus-visible,
.btn-catalog:focus-visible,
.btn-home:focus-visible,
.btn-detail:focus-visible,
.btn-all-produk:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(201,168,76,0.25);
}

/* Fokus untuk navigasi */
.nav-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  background: rgba(201,168,76,0.15);
  border-radius: 6px;
}

/* Fokus untuk hamburger toggle */
.navbar-toggler:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(201,168,76,0.25);
}

/* Fokus untuk accordion button */
.accordion-button:focus-visible {
  box-shadow: 0 0 0 4px rgba(201,168,76,0.5);
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Fokus untuk checkbox produk custom (sample.html) */
.produk-option:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(27,42,74,0.2);
  background: rgba(27,42,74,0.08);
}

/* Fokus untuk form inputs */
.form-control:focus-visible,
.form-select:focus-visible {
  border-color: var(--navy);
  box-shadow: 0 0 0 4px rgba(27,42,74,0.12);
  outline: 2px solid transparent;
}

/* Fokus untuk kartu yang bisa diklik */
.card-unggulan:focus-visible,
.produk-card-desktop:focus-visible,
.topik-card:focus-visible,
.artikel-card:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(201,168,76,0.15);
  transform: translateY(-2px);
}

/* Fokus untuk link artikel */
.artikel-link:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
  text-decoration: underline;
  color: var(--gold);
}

/* Fokus untuk share buttons */
.share-btn:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(27,42,74,0.15);
}

/* Fokus untuk social media buttons */
.soc-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(201,168,76,0.25);
  background: rgba(201,168,76,0.25);
}

/* Fokus untuk footer links */
.footer-col a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  color: var(--gold-light);
  text-decoration: underline;
}

/* Skip to main content link (untuk screen reader & keyboard navigation) */
.skip-to-main {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--navy);
  color: #fff;
  padding: 12px 20px;
  text-decoration: none;
  z-index: 10000;
  border-radius: 0 0 8px 0;
  font-weight: 700;
  font-size: 14px;
  transition: top 0.2s ease;
}

.skip-to-main:focus-visible {
  top: 0;
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

/* Fokus untuk breadcrumb links */
.breadcrumb-nav a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  color: rgba(255,255,255,0.9);
  text-decoration: underline;
}

/* Hormati preferensi pengguna untuk fokus yang lebih halus */
@media (prefers-reduced-motion: reduce) {
  *:focus-visible {
    transition: none;
  }
}


/* =========================================================================
   MOBILE LAYOUT SAFETY (Task 12.1)
   Aturan tambahan untuk mencegah horizontal scroll di mobile viewport
   ========================================================================= */

/* Pastikan semua elemen tidak melebihi lebar viewport */
* {
  max-width: 100%;
}

/* Kecualikan elemen yang memang perlu lebar penuh atau lebih */
html,
body,
.container,
.container-fluid,
.row,
.col,
[class*="col-"] {
  max-width: none;
}

/* Pastikan gambar dan media responsif */
img,
video,
iframe,
embed,
object {
  max-width: 100%;
  height: auto;
}

/* Cegah teks panjang tanpa spasi menyebabkan overflow */
p,
h1, h2, h3, h4, h5, h6,
li,
td,
th,
div {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Cegah pre dan code menyebabkan horizontal scroll */
pre,
code {
  max-width: 100%;
  overflow-x: auto;
  word-wrap: break-word;
  white-space: pre-wrap;
}

/* Pastikan tabel responsif */
table {
  max-width: 100%;
  overflow-x: auto;
  display: block;
}

/* Container Bootstrap tidak boleh overflow */
.container,
.container-fluid {
  overflow-x: hidden;
}

/* Row Bootstrap dengan gutter negatif margin - pastikan tidak overflow */
.row {
  margin-left: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
  margin-right: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
  /* Pastikan parent container menampung margin negatif */
}

/* Cegah elemen fixed/absolute keluar dari viewport */
[style*="position: fixed"],
[style*="position: absolute"],
.fixed-top,
.fixed-bottom,
.sticky-top {
  max-width: 100vw;
}

/* Khusus untuk mobile viewport (< 768px) */
@media (max-width: 767px) {
  /* Pastikan tidak ada elemen yang terlalu lebar */
  body {
    min-width: 320px; /* Minimum viewport yang didukung */
  }
  
  /* Kurangi padding container di mobile untuk maksimalkan ruang */
  .container {
    padding-left: 15px;
    padding-right: 15px;
  }
  
  /* Pastikan hero dan section full-width tidak overflow */
  section,
  header,
  footer,
  main {
    max-width: 100%;
    overflow-x: hidden;
  }
  
  /* Tombol full-width di mobile tidak boleh overflow */
  .btn,
  button,
  [class*="btn-"] {
    max-width: 100%;
  }
  
  /* Form elements tidak boleh overflow */
  input,
  select,
  textarea,
  .form-control,
  .form-select {
    max-width: 100%;
    box-sizing: border-box;
  }
  
  /* Navbar collapse tidak boleh overflow */
  .navbar-collapse {
    max-width: 100%;
  }
  
  /* Card dan komponen lainnya */
  .card,
  .card-body,
  [class*="card-"] {
    max-width: 100%;
  }
  
  /* Pastikan flex container tidak overflow */
  .d-flex,
  [class*="flex-"] {
    flex-wrap: wrap;
  }
  
  /* Grid items tidak boleh overflow */
  [class*="col-"] {
    min-width: 0; /* Prevent flex items from overflowing */
  }
}

/* Khusus untuk viewport sangat kecil (320px - 375px) */
@media (max-width: 375px) {
  /* Kurangi font size sedikit untuk mencegah overflow */
  body {
    font-size: 14px;
  }
  
  /* Kurangi padding di elemen kecil */
  .btn,
  button {
    padding-left: 12px;
    padding-right: 12px;
  }
  
  /* Heading lebih kecil */
  h1 {
    font-size: 1.75rem;
  }
  
  h2 {
    font-size: 1.5rem;
  }
}

/* Debug mode - uncomment untuk melihat elemen yang overflow */
/*
* {
  outline: 1px solid red !important;
}
*/