/*
 * base.css — token desain, reset, tipografi, tombol, formulir, utilitas.
 *
 * Palet diambil apa adanya dari situs lama (kuning #f4b711 sebagai warna merek,
 * arang #303036 sebagai warna gelap) lalu diperluas dengan turunan netral supaya
 * kontras dan hierarki lebih rapi.
 */

/* ══ Token ════════════════════════════════════════════════════════════════ */
:root {
  /* Warna merek */
  --c-primary: #f4b711;
  --c-primary-deep: #f4b301;
  --c-primary-soft: #efb126;
  --c-primary-tint: #fff7e2;
  --c-primary-dim: rgba(244, 183, 17, 0.14);

  /* Netral */
  --c-ink: #303036;
  --c-ink-deep: #17171b;
  --c-ink-soft: #5b5b66;
  --c-muted: #8a8a96;
  --c-border: #e8e8e8;
  --c-border-soft: #f0f0f1;
  --c-surface: #f6f6f7;
  --c-surface-2: #fbfbfc;
  --c-base: #fff;

  /* Semantik */
  --c-success: #12855b;
  --c-danger: #cf2e2e;
  --c-wa: #25d366;
  --c-shopee: #ee4d2d;
  --c-tokopedia: #03ac0e;

  /* Tipografi */
  --f-display: "Plus Jakarta Sans", "Jakarta Fallback", ui-sans-serif, system-ui,
    -apple-system, "Segoe UI", sans-serif;
  --f-body: "Inter", "Inter Fallback", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", sans-serif;

  /* Skala tipografi (fluida) */
  --t-xs: 0.8125rem;
  --t-sm: 0.875rem;
  --t-base: 1rem;
  --t-md: clamp(1.0625rem, 0.3vw + 1rem, 1.125rem);
  --t-lg: clamp(1.125rem, 0.5vw + 1rem, 1.375rem);
  --t-xl: clamp(1.375rem, 1vw + 1.1rem, 1.75rem);
  --t-2xl: clamp(1.625rem, 1.6vw + 1.2rem, 2.25rem);
  --t-3xl: clamp(2rem, 2.6vw + 1.3rem, 3rem);
  --t-4xl: clamp(2.375rem, 4vw + 1.3rem, 3.9rem);

  /* Ruang */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-sec: clamp(3.5rem, 7vw, 6.5rem);

  /* Bentuk */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-full: 999px;

  /* Bayangan */
  --sh-sm: 0 1px 2px rgba(23, 23, 27, 0.06), 0 1px 3px rgba(23, 23, 27, 0.05);
  --sh-md: 0 4px 12px rgba(23, 23, 27, 0.07), 0 2px 4px rgba(23, 23, 27, 0.04);
  --sh-lg: 0 12px 32px rgba(23, 23, 27, 0.1), 0 4px 8px rgba(23, 23, 27, 0.04);
  --sh-xl: 0 28px 64px rgba(23, 23, 27, 0.14), 0 8px 16px rgba(23, 23, 27, 0.05);
  --sh-brand: 0 10px 30px rgba(244, 183, 17, 0.32);

  /* Tata letak */
  --w-container: 1240px;
  --w-narrow: 780px;
  --pad-x: clamp(1rem, 4vw, 2.5rem);
  --h-header: 76px;
  /* Tinggi pita atas; dipakai sebagai offset sticky negatif header. */
  --h-topbar: 41px;

  /* Gerak */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.28s;

  /* Lapisan */
  --z-drawer: 90;
  --z-header: 80;
  --z-float: 70;
  --z-mega: 60;
}

/* ══ Reset ════════════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--h-header) + 1rem);
}

body {
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: 1.7;
  color: var(--c-ink);
  background: var(--c-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
  overflow-x: clip;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}

hr {
  border: 0;
  border-top: 1px solid var(--c-border);
  margin: var(--s-8) 0;
}

:target {
  scroll-margin-top: calc(var(--h-header) + 1rem);
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══ Tipografi ════════════════════════════════════════════════════════════ */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--f-display);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.022em;
  color: var(--c-ink-deep);
  text-wrap: balance;
}

h1 {
  font-size: var(--t-4xl);
}

h2 {
  font-size: var(--t-3xl);
}

h3 {
  font-size: var(--t-xl);
}

h4 {
  font-size: var(--t-lg);
}

p {
  text-wrap: pretty;
}

strong,
b {
  font-weight: 650;
}

small {
  font-size: var(--t-sm);
}

/* ══ Fokus ════════════════════════════════════════════════════════════════
 * Cincin fokus dipertahankan tebal & kontras: aksesibilitas keyboard tidak
 * dikorbankan demi estetika.
 */
:focus-visible {
  outline: 3px solid var(--c-primary);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.is-dark :focus-visible,
.hero :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--c-primary);
}

::selection {
  background: var(--c-primary);
  color: var(--c-ink-deep);
}

/* ══ Tata letak dasar ═════════════════════════════════════════════════════ */
.container {
  width: 100%;
  max-width: var(--w-container);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.container--narrow {
  max-width: var(--w-narrow);
}

.site-main {
  display: block;
  min-height: 40vh;
}

.sec {
  padding-block: var(--s-sec);
}

.sec--tight {
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

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

/* ══ Aksesibilitas ════════════════════════════════════════════════════════ */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--s-4);
  z-index: 999;
  padding: 0.75rem 1.25rem;
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--c-ink-deep);
  background: var(--c-primary);
  border-radius: 0 0 var(--r-md) var(--r-md);
  transition: top 0.2s var(--ease);
}

.skip-link:focus {
  top: 0;
}

[hidden] {
  display: none !important;
}

/* ══ Ikon ═════════════════════════════════════════════════════════════════ */
.tms-icon {
  flex: none;
  display: block;
}

/* ══ Tombol ═══════════════════════════════════════════════════════════════ */
.btn {
  --btn-bg: var(--c-primary);
  --btn-fg: var(--c-ink-deep);
  --btn-bd: transparent;
  --btn-sh: var(--sh-sm);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  font-family: var(--f-display);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-align: center;
  white-space: nowrap;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-full);
  box-shadow: var(--btn-sh);
  cursor: pointer;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    background-color var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn--primary {
  --btn-bg: var(--c-primary);
  --btn-fg: var(--c-ink-deep);
  --btn-sh: 0 4px 14px rgba(244, 183, 17, 0.34);
}

.btn--primary:hover {
  --btn-bg: var(--c-primary-deep);
  --btn-sh: var(--sh-brand);
}

.btn--dark {
  --btn-bg: var(--c-ink-deep);
  --btn-fg: #fff;
  --btn-sh: 0 4px 14px rgba(23, 23, 27, 0.22);
}

.btn--dark:hover {
  --btn-bg: var(--c-ink);
  --btn-sh: var(--sh-lg);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--c-ink-deep);
  --btn-bd: var(--c-border);
  --btn-sh: none;
}

.btn--ghost:hover {
  --btn-bg: var(--c-primary-tint);
  --btn-bd: var(--c-primary);
}

.btn--glass {
  --btn-bg: rgba(255, 255, 255, 0.09);
  --btn-fg: #fff;
  --btn-bd: rgba(255, 255, 255, 0.22);
  --btn-sh: none;

  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.btn--glass:hover {
  --btn-bg: rgba(255, 255, 255, 0.16);
  --btn-bd: rgba(255, 255, 255, 0.38);
}

.btn--wa {
  --btn-bg: var(--c-wa);
  --btn-fg: #05341a;
  --btn-sh: 0 4px 14px rgba(37, 211, 102, 0.3);
}

.btn--wa:hover {
  --btn-bg: #1fbb5a;
}

.btn--sm {
  padding: 0.55rem 1.1rem;
  font-size: 0.875rem;
}

.btn--lg {
  padding: 1.02rem 2rem;
  font-size: 1.0625rem;
}

.btn--block {
  width: 100%;
}

.btn[disabled],
.btn.is-loading {
  opacity: 0.55;
  pointer-events: none;
}

/* Panah tombol ikut bergerak saat disentuh — isyarat arah yang halus. */
.btn .tms-icon:last-child {
  transition: transform var(--dur) var(--ease);
}

.btn:hover .tms-icon:last-child {
  transform: translateX(3px);
}

/* ══ Formulir ═════════════════════════════════════════════════════════════ */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
textarea,
select {
  width: 100%;
  padding: 0.8rem 1rem;
  font-size: 0.9375rem;
  color: var(--c-ink-deep);
  background: var(--c-base);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  appearance: none;
}

textarea {
  min-height: 8rem;
  resize: vertical;
}

select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b5b66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.5rem;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-dim);
}

::placeholder {
  color: var(--c-muted);
  opacity: 1;
}

label {
  display: inline-block;
  margin-bottom: 0.35rem;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--c-ink);
}

/* ══ Lencana ══════════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.28rem 0.6rem;
  font-family: var(--f-display);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  border-radius: var(--r-full);
  white-space: nowrap;
}

.badge--sale {
  color: #fff;
  background: var(--c-danger);
}

.badge--oos {
  color: #fff;
  background: rgba(23, 23, 27, 0.78);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.badge--new {
  color: var(--c-ink-deep);
  background: var(--c-primary);
}

/* ══ Kepala seksi ═════════════════════════════════════════════════════════ */
.sec-head {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 620px;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.sec-head--center {
  align-items: center;
  text-align: center;
  margin-inline: auto;
}

.sec-head--left {
  align-items: flex-start;
  text-align: left;
}

.sec-head__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem 0.35rem 0.6rem;
  font-family: var(--f-display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8a6400;
  background: var(--c-primary-tint);
  border: 1px solid rgba(244, 183, 17, 0.35);
  border-radius: var(--r-full);
}

.sec-head__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-primary-deep);
}

.sec-head__title {
  font-size: var(--t-3xl);
  margin: 0;
}

.sec-head__title span {
  color: var(--c-primary-deep);
}

.sec-head__text {
  font-size: var(--t-md);
  color: var(--c-ink-soft);
  margin: 0;
}

.sec-head--dark .sec-head__title {
  color: #fff;
}

.sec-head--dark .sec-head__text {
  color: rgba(255, 255, 255, 0.68);
}

.sec-head--dark .sec-head__eyebrow {
  color: var(--c-primary);
  background: rgba(244, 183, 17, 0.12);
  border-color: rgba(244, 183, 17, 0.3);
}

.sec-head--dark .sec-head__title span {
  color: var(--c-primary);
}

/* Baris judul + aksi di kanan */
.sec__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-6);
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}

/*
 * Basis dibiarkan `auto`, lebarnya diatur lewat min-width. Kalau memakai
 * `flex: 1 1 22rem`, angka 22rem itu berubah jadi basis TINGGI begitu
 * .sec__bar beralih ke flex-direction: column di layar kecil — hasilnya
 * ruang kosong ±140px antara teks dan tombol. min-width tidak punya efek
 * pada sumbu vertikal, jadi aman di kedua arah.
 */
.sec__bar .sec-head {
  margin-bottom: 0;
  flex: 1 1 auto;
  min-width: min(22rem, 100%);
}

.sec__more {
  display: flex;
  justify-content: center;
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* ══ Remah roti ═══════════════════════════════════════════════════════════ */
.crumbs {
  padding-block: var(--s-4);
  font-size: var(--t-sm);
}

.crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  color: var(--c-muted);
}

.crumbs__item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.crumbs__item a:hover {
  color: var(--c-primary-deep);
}

.crumbs__sep {
  color: var(--c-border);
}

.crumbs__item--current {
  color: var(--c-ink);
  font-weight: 600;
}

/* ══ Utilitas ═════════════════════════════════════════════════════════════ */
.u-hide {
  display: none !important;
}

.u-nowrap {
  white-space: nowrap;
}

.u-center {
  text-align: center;
}

/*
 * Muncul saat masuk viewport (dikendalikan app.js).
 *
 * Disembunyikan hanya bila JavaScript benar-benar aktif — kelas `js` dipasang
 * inline di <head>. Tanpa penanda ini, kegagalan memuat app.js akan membuat
 * seluruh isi halaman tak terlihat.
 */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}