/* ============================================================
   LHW Site — base reset & chrome styles
   (dipindah dari <style> inline mockup + tambahan dropdown/carousel)
   ============================================================ */
@layer base {
  html, body { margin: 0; padding: 0; }
  body { overscroll-behavior: none; }
  main > :first-child { margin-top: 0 !important; }
  main > :last-child { margin-bottom: 0 !important; }
}
::-webkit-scrollbar { display: none; }

html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 5.5rem; }

@media (max-width: 767px) {
  .px-margin { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
  .gap-gutter { gap: 0.75rem !important; }
}

/* ---------- Dropdown navigasi (hover desktop + klik semua perangkat) ---------- */
.nav-dropdown { position: relative; }
.nav-dropdown-menu { display: none; }
.nav-dropdown.open > .nav-dropdown-menu,
.nav-dropdown:focus-within > .nav-dropdown-menu { display: flex; }
@media (hover: hover) and (pointer: fine) {
  .nav-dropdown:hover > .nav-dropdown-menu { display: flex; }
}
.nav-dropdown-btn[aria-expanded="true"] .nav-chev {
  transform: rotate(180deg);
}
.nav-chev { transition: transform 0.2s ease; }

/* ---------- Hero carousel (crossfade) ---------- */
.hero-slide { opacity: 0; pointer-events: none; transition: opacity 0.6s ease; }
.hero-slide.active { opacity: 1; pointer-events: auto; }
.hero-dot { transition: background-color 0.3s ease, border-color 0.3s ease; }

/* ---------- Tabel spesifikasi (oem-fitment, detail produk) ---------- */
.spec-table th {
  background: #12183d;
  color: #bcc3ff;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 12px;
  letter-spacing: 0.12em;
  font-weight: 700;
  text-transform: uppercase;
  text-align: left;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid rgba(167, 182, 191, 0.25);
  white-space: nowrap;
}
.spec-table td {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 16px;
  color: #dee0ff;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid rgba(167, 182, 191, 0.1);
}
.spec-table tr:nth-child(even) td { background: rgba(18, 24, 61, 0.45); }

/* ---------- Konten artikel (tips detail) ---------- */
.article-body {
  color: rgba(255,255,255,0.70);
  font-family: "DM Sans", sans-serif;
  font-size: 1rem;
  line-height: 1.75;
}
.article-body p { margin-bottom: 1.25rem; }
.article-body h2 {
  font-family: "Saira", sans-serif;
  font-size: 1.375rem;
  line-height: 1.3;
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  color: rgba(255,255,255,0.95);
  margin: 2.5rem 0 0.75rem;
  padding-left: 0.75rem;
  border-left: 2px solid #CC2929;
}
.article-body strong { color: rgba(255,255,255,0.90); font-weight: 600; }
.article-body em { color: rgba(255,255,255,0.85); }

/* ---------- Hero pendek (halaman dalam: tentang kami, kontak, dll.) ---------- */
.hero-short {
  background:
    repeating-linear-gradient(transparent, transparent 60px, rgba(255,255,255,0.015) 60px, rgba(255,255,255,0.015) 61px),
    repeating-linear-gradient(90deg, transparent, transparent 80px, rgba(255,255,255,0.015) 80px, rgba(255,255,255,0.015) 81px),
    linear-gradient(135deg, rgba(14,21,68,0.97) 0%, rgba(17,25,68,0.90) 100%);
}

/* ---------- Language toggle ---------- */
.lang-en { display: none; }
html[lang="en"] .lang-en { display: inline; }
html[lang="en"] .lang-id { display: none; }
/* Wrapper isi artikel berupa <div>: harus block (bukan inline) agar tata letaknya sama dengan .lang-id */
html[lang="en"] .article-body > .lang-en { display: block; }
.lang-btn {
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 9px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.45);
  background: transparent;
  cursor: pointer;
  line-height: 1.6;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.lang-btn:hover {
  color: #fff;
  border-color: rgba(255,255,255,0.4);
}
.lang-btn.lang-btn-active {
  background: #CC2929;
  border-color: #CC2929;
  color: #fff;
}