/* ==========================================================================
   Mokoworkwear — landing page
   Palet mengikuti tema toko; tipografi: Poppins (heading) + Inter (menu & teks)
   ========================================================================== */

:root {
  --color-foreground: 18, 18, 18;
  --color-background: 255, 255, 255;
  --color-background-contrast: 243, 243, 243;
  --color-accent: 225, 10, 10;
  /* Bar pengumuman: kuning safety di atas hitam tema, kontras 12,4:1. */
  /* Navy logo Engineer Factory (#001F5B), dipakai juga oleh ikon hamburger. */
  --color-brand: 0, 31, 91;
  --color-announcement-bg: 18, 18, 18;
  --color-announcement-fg: 255, 204, 0;
  --color-button: 18, 18, 18;
  --color-button-text: 255, 255, 255;

  --font-heading: "Poppins", "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Tinggi satu baris navbar (ikon 4.4rem + padding 2 x 1rem). */
  --nav-row-h: 6.4rem;
  /* Irama jarak vertikal. Semua section memakai nilai yang sama supaya
     peralihan antarbagian terasa seragam. */
  --space-section: 4rem;   /* padding atas-bawah tiap section */
  --space-heading: 2rem;   /* judul -> isi */
  --space-block: 2.8rem;   /* isi -> tombol penutup */
  --space-text: 1.2rem;    /* judul -> kalimat pengantar */

  /* Bar pengumuman dibuat 2/3 tinggi navbar. */
  --announcement-row-h: calc(var(--nav-row-h) * 2 / 3);

  --page-width: 160rem;
  --page-padding: 1.5rem;
  --media-radius: 10px;
  /* Tombol berbentuk kotak dengan sudut membulat tipis. */
  --buttons-radius: .6rem;

  --duration-short: 100ms;
  --duration-default: 200ms;
  --duration-long: 500ms;
}

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

html { font-size: 62.5%; height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  font-family: var(--font-body);
  font-size: 1.5rem;
  letter-spacing: .06rem;
  line-height: 1.6;
  color: rgb(var(--color-foreground));
  background-color: rgb(var(--color-background));
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  /* Semua judul memakai navy merek; bagian berlatar gelap menimpanya di bawah. */
  color: rgb(var(--color-brand));
  font-weight: 500;
  letter-spacing: .06rem;
  line-height: 1.3;
  margin: 0;
  word-break: break-word;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

.page-width {
  max-width: var(--page-width);
  margin: 0 auto;
  padding-left: var(--page-padding);
  padding-right: var(--page-padding);
}

.center { text-align: center; }

.section { margin: 0; padding: var(--space-section) 0; }

.icon-arrow { display: inline-block; transition: transform var(--duration-default) ease; }
a:hover .icon-arrow { transform: translateX(.4rem); }

/* ---------- Buttons ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 12rem;
  min-height: 4.5rem;
  padding: 0 3rem;
  border: 1px solid transparent;
  border-radius: var(--buttons-radius);
  font-family: var(--font-body);
  font-size: 1.5rem;
  letter-spacing: .06rem;
  cursor: pointer;
  text-align: center;
  transition: box-shadow var(--duration-short) ease, background-color var(--duration-default) ease, color var(--duration-default) ease;
}
.button--primary {
  background-color: rgb(var(--color-button));
  color: rgb(var(--color-button-text));
}
.button--primary:hover { box-shadow: 0 0 0 .2rem rgb(var(--color-button)); }
.button--secondary {
  background-color: transparent;
  color: rgb(var(--color-foreground));
  border-color: rgba(var(--color-foreground), .75);
}
.button--secondary:hover { box-shadow: 0 0 0 .1rem rgb(var(--color-foreground)); }

/* ==========================================================================
   Announcement bar
   ========================================================================== */
.utility-bar {
  /* Tanpa garis bawah: bar pengumuman menyatu dengan navbar di bawahnya.
     Padding atas-bawah sama besar supaya teks duduk di tengah bidang hitamnya. */
  padding: .8rem 0;
  background-color: rgb(var(--color-announcement-bg));
  color: rgb(var(--color-announcement-fg));
}
.utility-bar__grid {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--announcement-row-h);
}

.announcement-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  max-width: 76rem;
}
.announcement-bar__slides { position: relative; flex: 1; min-height: var(--announcement-row-h); }
.announcement-bar__message {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  margin: 0;
  /* Huruf kapital tidak memakai ruang descender, jadi bila hanya ditengahkan
     secara mekanis teksnya tampak naik. Padding atas ini mengoreksinya. */
  padding: .24em 0 0;
  font-family: var(--font-body);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .1rem;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1rem);
  transition: opacity var(--duration-long) ease, transform var(--duration-long) ease;
}
.announcement-bar__message.is-active { opacity: 1; visibility: visible; transform: none; }
/* Semua teks di bar pengumuman berukuran sama, termasuk panah pada tautan. */
.announcement-bar__message a,
.announcement-bar__message span,
.announcement-bar__message .icon-arrow { font-size: 1em; line-height: 1; }

.slider-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgb(var(--color-foreground));
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  transition: opacity var(--duration-default) ease;
}
.slider-button:hover { opacity: .6; }

/* ==========================================================================
   Header
   ========================================================================== */
.header-wrapper {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgb(var(--color-background));
  border-bottom: .1rem solid rgba(var(--color-foreground), .08);
}

.header {
  display: grid;
  grid-template-areas: "left-icons heading icons";
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-top: 1rem;
  padding-bottom: 1rem;
  column-gap: 1rem;
}

.header__heading-link { grid-area: heading; justify-self: center; display: block; }
.header__heading-logo { width: auto; height: 3rem; }

.header__icon {
  grid-area: icons;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgb(var(--color-foreground));
  cursor: pointer;
}
.header__icon:hover { opacity: .65; }
.header__icon--menu { grid-area: left-icons; justify-self: start; color: rgb(var(--color-brand)); }

.header__icons {
  grid-area: icons;
  justify-self: end;
  display: flex;
  align-items: center;
}
.header__icons .header__icon { grid-area: auto; }

.header__inline-menu { display: none; grid-area: navigation; }

.list-menu--inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: .4rem;
}
.header__menu-item {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: 1.2rem;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: .1rem;
  color: rgba(var(--color-foreground), .75);
  cursor: pointer;
}
.header__menu-item:hover,
.header__menu-item.is-active { color: rgb(var(--color-foreground)); text-decoration: underline; text-underline-offset: .3rem; }

/* Mega menu */
.has-mega { position: static; }
.mega-menu__content {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: #fff;
  border-top: .1rem solid rgba(0, 0, 0, .08);
  border-bottom: .1rem solid rgba(0, 0, 0, .08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .07);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-.6rem);
  transition: opacity var(--duration-default) ease, transform var(--duration-default) ease, visibility var(--duration-default);
  max-height: calc(100vh - 12rem);
  overflow-y: auto;
  z-index: 100;
}
.has-mega.is-open .mega-menu__content { opacity: 1; visibility: visible; transform: none; }

.mega-menu__list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  row-gap: 1.6rem;
  padding-top: 2.4rem;
  padding-bottom: 2.4rem;
}
.mega-menu__list > li {
  flex: 0 0 auto;
  min-width: 15rem;
  max-width: 22rem;
  padding-right: 2.2rem;
  margin-right: 2.2rem;
  border-right: .05rem solid rgba(0, 0, 0, .08);
}
.mega-menu__link--level-2 {
  display: block;
  padding-bottom: .8rem;
  margin-bottom: .4rem;
  border-bottom: .05rem solid rgba(0, 0, 0, .1);
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .15rem;
  text-transform: uppercase;
  color: #999;
}
.mega-menu__list > li > ul > li {
  display: flex;
  align-items: center;
  min-height: 3.4rem;
  border-bottom: .05rem solid rgba(0, 0, 0, .06);
}
.mega-menu__list > li > ul > li:last-child { border-bottom: 0; }
.mega-menu__list > li > ul > li > a {
  display: flex;
  align-items: center;
  width: 100%;
  padding: .6rem 0;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: .05rem;
  text-transform: uppercase;
  color: #111;
  line-height: 1.25;
  transition: color .15s ease;
}
.mega-menu__list > li > ul > li > a:hover { color: #555; }

.mega_menu_img { display: none; border-right: 0 !important; }
.mega_menu_img > a > div {
  width: 16rem;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: .3rem;
}
.mega_menu_img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-long) ease; }
.mega_menu_img a:hover img { transform: scale(1.03); }

/* ==========================================================================
   Search modal
   ========================================================================== */
.search-modal {
  position: fixed;
  inset: 0;
  z-index: 130;
  background-color: rgba(0, 0, 0, .45);
}
.search-modal__inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  background-color: #fff;
  padding-top: 2.4rem;
  padding-bottom: 2.4rem;
}
.search-modal__form { flex: 1; display: flex; align-items: center; border-bottom: .1rem solid rgba(var(--color-foreground), .55); }
.search-modal__form input {
  flex: 1;
  border: 0;
  padding: 1.2rem 0;
  font-family: var(--font-body);
  font-size: 1.6rem;
  background: transparent;
}
.search-modal__form input:focus { outline: none; }
.search-modal__form button,
.search-modal__close {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 2.6rem;
  line-height: 1;
  color: rgb(var(--color-foreground));
}

/* ==========================================================================
   Mobile drawer
   ========================================================================== */
.menu-drawer { position: fixed; inset: 0; z-index: 140; }
.menu-drawer__overlay { position: absolute; inset: 0; background-color: rgba(0, 0, 0, .45); }
.menu-drawer__inner {
  position: relative;
  /* Menempel ke kanan, sesisi dengan tombol hamburger. */
  margin-left: auto;
  width: min(40rem, 90vw);
  height: 100%;
  padding: 2rem 2.4rem 4rem;
  background-color: #fff;
  overflow-y: auto;
  animation: drawer-in var(--duration-default) ease;
}
@keyframes drawer-in { from { transform: translateX(100%); } to { transform: none; } }

.menu-drawer__close {
  position: absolute;
  top: 1rem; right: 1.2rem;
  border: 0; background: transparent;
  font-size: 3rem; line-height: 1; cursor: pointer;
}

.drawer-pills { display: flex; gap: .8rem; margin: 3rem 0 2rem; }
.drawer-pill {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  padding: 1rem .6rem;
  border: .1rem solid rgba(var(--color-foreground), .12);
  border-radius: .6rem;
  font-family: var(--font-body);
  font-size: 1.1rem;
  letter-spacing: .05rem;
  text-align: center;
}
.drawer-pill__icon { color: rgb(var(--color-accent)); font-size: 1.4rem; }

.menu-drawer__menu > li { border-bottom: .1rem solid rgba(var(--color-foreground), .08); }
.menu-drawer__menu-item {
  display: block;
  width: 100%;
  padding: 1.4rem 0;
  font-family: var(--font-body);
  font-size: 1.6rem;
  letter-spacing: .1rem;
  cursor: pointer;
  list-style: none;
}
.menu-drawer__menu-item::-webkit-details-marker { display: none; }
.menu-drawer__menu details > summary::after { content: "\203A"; float: right; }
.menu-drawer__menu details[open] > summary::after { content: "\2039"; }
.menu-drawer__submenu { padding: 0 0 1.4rem 1.2rem; }
.menu-drawer__submenu li a {
  display: block;
  padding: .8rem 0;
  font-size: 1.4rem;
  color: rgba(var(--color-foreground), .8);
}

.menu-drawer__utility { margin-top: 3rem; display: grid; gap: 1.8rem; }
.menu-drawer__account { font-family: var(--font-body); letter-spacing: .1rem; }
.menu-drawer__lang { display: flex; align-items: center; gap: .8rem; font-size: 1.3rem; }
.menu-drawer__lang button {
  border: .1rem solid rgba(var(--color-foreground), .2);
  background: transparent;
  padding: .3rem 1rem;
  font: inherit;
  cursor: pointer;
}
.menu-drawer__lang button.is-active { background-color: rgb(var(--color-foreground)); color: #fff; }

.list-social { display: flex; gap: 1.2rem; align-items: center; }
.list-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
  color: rgb(var(--color-foreground));
}
.list-social a:hover { opacity: .6; }

/* ==========================================================================
   Hero slideshow
   ========================================================================== */
.slideshow { position: relative; overflow: hidden; }
.slideshow__slides { position: relative; }
.slideshow__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-long) ease;
}
.slideshow__slide.is-active { position: relative; opacity: 1; visibility: visible; }
.slideshow__slide img { width: 100%; height: auto; }
.slide--desktop { display: none; }

.slideshow__controls {
  position: absolute;
  right: 1.2rem;
  bottom: 1.2rem;
  /* Navigasi (panah, penghitung "1 / dari 3", tombol jeda) disembunyikan;
     autoplay tetap berjalan. Ganti ke `flex` untuk memunculkannya lagi. */
  display: none;
  align-items: center;
  gap: .2rem;
  padding: .2rem .6rem;
  background-color: rgba(255, 255, 255, .85);
  border-radius: 4rem;
}
.slider-counter {
  display: inline-flex;
  gap: .5rem;
  font-family: var(--font-body);
  font-size: 1.3rem;
  letter-spacing: .05rem;
}
.slideshow__controls .slider-button { width: 3.4rem; height: 3.4rem; }
.slider-button--play { font-size: 1.1rem; }

/* ==========================================================================
   Grids
   ========================================================================== */
.grid {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1rem;
  row-gap: 1rem;
  padding: 0;
  margin: 0;
}
/* Lebar dasar sengaja kurang dari separuh: sepotong kartu berikutnya ikut
   terlihat, dan itu petunjuk paling jelas bahwa deretannya bisa digeser.
   flex-grow 1 membuat deretan yang isinya sedikit (mis. 3 artikel) tetap
   memenuhi lebar, jadi tidak menyisakan celah kosong yang tak bisa digeser;
   flex-shrink 0 menjaga lebar itu saat isinya meluap. */
.grid__item { flex: 1 0 calc(44% - .5rem); max-width: 100%; }

/* Horizontal scroller on touch widths */
[data-scroller] {
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /* Scrollbar tipis sengaja dibiarkan tampak sebagai penanda posisi geser. */
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--color-foreground), .28) transparent;
  padding-bottom: 1.2rem;
}
[data-scroller]::-webkit-scrollbar { height: .4rem; }
[data-scroller]::-webkit-scrollbar-track { background: rgba(var(--color-foreground), .07); border-radius: 999px; }
[data-scroller]::-webkit-scrollbar-thumb { background: rgba(var(--color-foreground), .28); border-radius: 999px; }
[data-scroller] > .grid__item { scroll-snap-align: start; }

/* ==========================================================================
   Cards
   ========================================================================== */
.card__inner {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--media-radius);
  background-color: rgb(var(--color-background-contrast));
}
.card__media { position: relative; }
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-long) ease, opacity var(--duration-long) ease;
}
.media--hover-effect > img + img {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.card:hover .media--hover-effect > img + img,
.article-card:hover .media--hover-effect > img + img { opacity: 1; }
.card:hover .media--hover-effect > img:only-child,
.card:hover .card__media img:first-child { transform: scale(1.03); }

/* Product card */
.card--product .card__inner { aspect-ratio: 4 / 5; background-color: #fff; }
.card--product .card__media,
.card--product .card__media img { height: 100%; }
.card--product .card__inner img { object-fit: contain; }

.card__badge { position: absolute; left: 1rem; bottom: 1rem; }
.badge {
  display: inline-block;
  padding: .5rem 1.3rem .6rem;
  border: .1rem solid #fff;
  border-radius: var(--buttons-radius);
  background-color: rgb(var(--color-accent));
  color: #fff;
  font-family: var(--font-body);
  font-size: 1.2rem;
  letter-spacing: .1rem;
  line-height: 1;
}

.card__content { padding: 1rem 0 0; }
.card__heading {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: .06rem;
  line-height: 1.4;
}
.card__heading a:hover { text-decoration: underline; text-underline-offset: .3rem; }

.price { margin-top: .4rem; font-size: 1.4rem; display: flex; flex-wrap: wrap; gap: .8rem; align-items: baseline; }
.price-item--regular { color: rgba(var(--color-foreground), .75); }
.price--on-sale .price-item--regular { color: rgba(var(--color-foreground), .5); }
.price-item--sale { color: rgb(var(--color-accent)); font-weight: 600; }

/* Collection card */
.card--collection { display: block; }
.card--collection .card__inner { aspect-ratio: 1 / 1; }
.card--collection .card__media img { height: 100%; }
.card--collection .card__overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2rem 1.6rem 1.6rem;
  background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0));
  color: #fff;
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity var(--duration-default) ease, transform var(--duration-default) ease;
}
.card--collection:hover .card__overlay { opacity: 1; transform: none; }
.card--collection .card__overlay .card__heading { font-size: 1.8rem; color: #fff; }
.card__caption { margin: .4rem 0 0; font-size: 1.2rem; line-height: 1.4; }
.card--collection .card__content .card__heading { font-size: 1.5rem; letter-spacing: .1rem; }

/* ==========================================================================
   Section: collection list / product grid headings
   ========================================================================== */
.collection__title { margin-bottom: var(--space-heading); }
.title {
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: .06rem;
  text-align: center;
}
.section--collection .center { margin-top: var(--space-block); }

/* ==========================================================================
   Image with text
   ========================================================================== */
.image-with-text { display: flex; flex-direction: column; }
.image-with-text__media {
  overflow: hidden;
  border-radius: var(--media-radius);
  min-height: clamp(20rem, 60vw, 38rem);
}
.image-with-text__media img { width: 100%; height: 100%; object-fit: cover; }
.image-with-text__content { padding: 3rem 0 0; }
.image-with-text__content { text-align: center; }
.image-with-text__text p { text-align: justify; text-justify: inter-word; hyphens: auto; }
.image-with-text__heading {
  font-size: clamp(2.2rem, 3vw + 1.1rem, 4.4rem);
  font-weight: 700;
  line-height: 1.1;
}
.image-with-text__text { font-size: clamp(1.4rem, .6vw + 1.15rem, 1.8rem); margin: 1.5rem 0 2.5rem; }
.image-with-text__text p { margin: 0; }

/* ==========================================================================
   Brand collab — SHOES FORCE
   ========================================================================== */
.brand-collab { border: .1rem solid #c1c1c1; overflow: hidden; }
.brand-collab__container { display: grid; grid-template-columns: 1fr; }
.brand-collab__left {
  order: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  padding: 3.9rem 1.5rem 1.5rem;
}
.brand-collab__content { width: 100%; max-width: 45rem; }
.brand-collab__logos { display: flex; align-items: center; flex-wrap: wrap; gap: 2rem; margin-bottom: 1.75rem; }
.brand-collab__logo { height: 5rem; width: auto; object-fit: contain; }
.brand-collab__x { font-size: 2.4rem; font-weight: 700; color: #121212; }
.brand-collab__eyebrow {
  margin: 0 0 1rem;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #666;
}
.brand-collab__description p { text-align: justify; text-justify: inter-word; hyphens: auto; }
.brand-collab__heading {
  margin: 0 0 2rem;
  font-size: clamp(2.4rem, 2.3rem + 2.4vw, 4rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.1;
  color: #121212;
}
.brand-collab__description { margin-bottom: 2.5rem; font-size: 1.5rem; color: #4a4a4a; line-height: 1.5; }
.brand-collab__description p { margin: 0; }
.brand-collab__button {
  display: inline-block;
  padding: 1.4rem 3rem;
  border-radius: var(--buttons-radius);
  background-color: #000;
  color: #fefefe;
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  transition: background-color .3s ease, transform .2s ease;
}
.brand-collab__button:hover { background-color: #777; transform: translateY(-.2rem); }
.brand-collab__right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: .4rem;
  aspect-ratio: 1 / 1;
  min-height: 28rem;
}
.brand-collab__image-wrapper { overflow: hidden; background-color: #f0f0f0; }
.brand-collab__image-wrapper--large { grid-row: 1 / 3; grid-column: 2 / 3; }
.brand-collab__image-wrapper img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   Image banner
   ========================================================================== */
.image-banner img { width: 100%; }

/* ==========================================================================
   Logo marquee
   ========================================================================== */
.logo-marquee { overflow: hidden; background-color: #fff; }
.logo-marquee__heading {
  margin: 0 0 var(--space-heading);
  font-size: 2.6rem;
  font-weight: 700;
  text-align: center;
  color: #000;
}
.logo-marquee__viewport { overflow: hidden; }
.logo-marquee__track {
  display: flex;
  width: max-content;
  /* Durasi dihitung ulang oleh main.js dari lebar track supaya kecepatannya
     tetap sama (px/detik) di semua ukuran layar. */
  animation: marquee-scroll var(--marquee-duration, 90s) linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}
.logo-marquee__track:hover { animation-play-state: paused; }
.marquee__item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Lebar mengikuti logo: tiap merek punya proporsi berbeda, jadi yang
     diseragamkan adalah ukuran optisnya, bukan lebar kotaknya. */
  width: auto;
  height: var(--marquee-item-h, 6.2rem);
  /* margin, bukan gap: jarak setelah item terakhir harus ikut terhitung
     agar titik loop -50% jatuh persis dan tidak ada lompatan. */
  margin-right: var(--marquee-gap, 2.4rem);
}
.marquee__item img {
  /* --logo-scale diatur per logo dari panel admin; nilainya dihitung agar luas
     tinta tiap logo terlihat sama meski rasio dan bidang kosongnya berbeda. */
  height: calc(var(--marquee-logo-h, 3.4rem) * var(--logo-scale, 1));
  width: auto;
  max-width: none;
  object-fit: contain;
  /* Logo klien tampil dengan warna aslinya. */
  transition: transform .3s ease;
}
.marquee__item:hover img { transform: scale(1.06); }
@keyframes marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

/* ==========================================================================
   Featured blog
   ========================================================================== */
.article-card { display: block; }
.article-card__image {
  position: relative;
  overflow: hidden;
  border-radius: var(--media-radius);
  aspect-ratio: 16 / 9;
  background-color: rgb(var(--color-background-contrast));
}
.article-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-long) ease; }
.article-card:hover .article-card__image img { transform: scale(1.03); }
.article-card__info { padding-top: 1.4rem; }
.article-card__title { font-size: 1.8rem; font-weight: 500; }
.article-card__excerpt {
  margin: .8rem 0 1.2rem;
  font-size: 1.4rem;
  color: rgba(var(--color-foreground), .75);
}
.link-arrow {
  font-size: 1.4rem;
  text-decoration: underline;
  text-underline-offset: .3rem;
}
.section--blog .center { margin-top: var(--space-block); }
/* Jarak judul section ke deretan kartunya, sedikit lebih longgar. */
.section--blog .title { margin-bottom: calc(var(--space-heading) + .8rem); }

/* ==========================================================================
   Multicolumn
   ========================================================================== */
.multicolumn-list { row-gap: 3.5rem; }
.multicolumn-list__item { width: 100%; max-width: 100%; text-align: center; }
.multicolumn-card__image-wrapper {
  display: block;
  overflow: hidden;
  border-radius: var(--media-radius);
  aspect-ratio: 2 / 1;
}
.multicolumn-card__image-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-long) ease; }
.multicolumn-card__image-wrapper:hover img { transform: scale(1.03); }
.multicolumn-card__info { padding: 1.6rem 1rem 0; }
.multicolumn-card__info p { text-align: justify; text-justify: inter-word; hyphens: auto; }
.multicolumn-card__info h3 {
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: .1rem;
}
.multicolumn-card__info h3 a:hover { text-decoration: underline; text-underline-offset: .4rem; }
.multicolumn-card__info p { margin: .8rem 0 0; font-size: 1.4rem; color: rgba(var(--color-foreground), .8); }

/* ==========================================================================
   Rich text (SEO block)
   ========================================================================== */
/* Heading rata tengah, paragraf rata kanan-kiri (justify) untuk teks panjang. */
.rich-text__heading { font-size: 2.1rem; font-weight: 700; margin-bottom: var(--space-heading); text-align: center; }
.rich-text__body h3 { text-align: center; }
.rich-text__body p { text-align: justify; text-justify: inter-word; hyphens: auto; }
.rich-text__body {
  max-height: 14rem;
  overflow: hidden;
  position: relative;
  transition: max-height var(--duration-long) ease;
}
.rich-text__body::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 6rem;
  background: linear-gradient(to top, #fff, rgba(255, 255, 255, 0));
}
.rich-text__body.is-expanded { max-height: 300rem; }
.rich-text__body.is-expanded::after { display: none; }
.rich-text__body h3 { font-size: 1.8rem; font-weight: 500; margin: 2.4rem 0 .8rem; }
.rich-text__body h3:first-child { margin-top: 0; }
.rich-text__body p { margin: 0; font-size: 1.5rem; color: rgba(var(--color-foreground), .85); }
/* Tombol lipat dipusatkan di bawah teksnya. */
.rich-text__toggle { display: block; margin: 2rem auto 0; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
  border-top: .1rem solid rgba(var(--color-foreground), .08);
  padding-top: 4rem;
}
.footer__row-menus {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem 2rem;
  padding-bottom: 4rem;
}
.footer { font-size: 1.5rem; }
.footer-block__heading {
  margin-bottom: 1.6rem;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: .1rem;
}
.footer-block--menu li { margin-bottom: .8rem; }
.footer-block--menu a { font-size: 1.4rem; color: rgba(var(--color-foreground), .78); }
.footer-block--menu a:hover { color: rgb(var(--color-foreground)); text-decoration: underline; text-underline-offset: .3rem; }
.footer-block--tagline { grid-column: 1 / -1; }
.footer-block__details-content h2 {
  font-size: 2.8rem;
  font-weight: 700;
  letter-spacing: .06rem;
}

.newsletter-band {
  background-color: rgb(var(--color-foreground));
  color: #fff;
}
.newsletter-band__inner { display: grid; gap: 2.4rem; }
.newsletter-band__text h2 {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: .08rem;
  text-transform: uppercase;
}
.newsletter-band__text p { margin: 1rem 0 0; font-size: 1.6rem; color: rgba(255, 255, 255, .82); }

.newsletter-form .field { position: relative; display: flex; align-items: center; }
.newsletter-form input {
  width: 100%;
  padding: 1.6rem 5rem 1.6rem 1.6rem;
  border: .1rem solid rgba(255, 255, 255, .45);
  border-radius: var(--buttons-radius);
  background: transparent;
  color: #fff;
  font-family: var(--font-body);
  font-size: 1.5rem;
}
.newsletter-form input:focus { outline: none; border-color: #fff; }
.newsletter-form label {
  position: absolute;
  left: 1.6rem;
  font-size: 1.5rem;
  color: rgba(255, 255, 255, .7);
  pointer-events: none;
  transition: transform var(--duration-default) ease, font-size var(--duration-default) ease;
}
.newsletter-form input:focus + label,
.newsletter-form input:not(:placeholder-shown) + label {
  transform: translateY(-1.5rem);
  font-size: 1.1rem;
}
.newsletter-form button {
  position: absolute;
  right: .6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.footer__bottom-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding-top: 3rem;
  padding-bottom: 1rem;
}
.footer__payment-icons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
}
.footer__payment-icons li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.2rem;
  height: 3.2rem;
}
.footer__payment-icons img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; }

.footer__content-bottom-wrapper { padding-bottom: 3rem; }
.footer__copyright {
  display: flex;
  /* Menurun ke bawah: tiap keterangan menempati barisnya sendiri. */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  font-size: 1.6rem;
  font-weight: 400;
  color: rgba(var(--color-foreground), .7);
}
.footer__copyright a:hover { text-decoration: underline; }
.policies { display: flex; gap: 1.2rem; }

/* ==========================================================================
   Floating WhatsApp
   ========================================================================== */
.whatsapp-float {
  position: fixed;
  right: 1.6rem;
  bottom: 1.6rem;
  z-index: 120;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5.6rem;
  height: 5.6rem;
  border-radius: 50%;
  background-color: #25d366;
  color: #fff;
  box-shadow: 0 .6rem 1.8rem rgba(0, 0, 0, .22);
  transition: transform var(--duration-default) ease;
}
.whatsapp-float:hover { transform: scale(1.06); }
/* Muncul setelah hero terlewati; sebelum itu disembunyikan tanpa mengganggu klik. */
.whatsapp-float {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(1.2rem);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.whatsapp-float.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}
.whatsapp-float.is-visible:hover { transform: scale(1.06); }

/* ==========================================================================
   Breakpoints
   ========================================================================== */
@media screen and (min-width: 750px) {
  :root { --page-padding: 3rem; }

  .grid__item { flex-basis: calc(30% - .667rem); }


  .title { font-size: 3.4rem; }
  .rich-text__heading { font-size: 2.6rem; }

  .image-with-text { flex-direction: row; align-items: center; gap: 0; }
  .image-with-text__media { width: 40%; flex-shrink: 0; }
  .image-with-text__content { width: 60%; padding: 0 0 0 4rem; }

  .brand-collab__container { grid-template-columns: 42% 58%; min-height: 50rem; }
  .brand-collab__left { order: 0; padding: 4.2rem; }
  .brand-collab__right { aspect-ratio: auto; }

  .footer__row-menus { grid-template-columns: repeat(4, 1fr); }
  .footer-block--tagline { grid-column: 1 / -1; }
  .footer__newsletter-band-inner { grid-template-columns: 1fr minmax(32rem, 46rem); align-items: center; gap: 4rem; }
  .footer__bottom-bar { justify-content: space-between; }

  .logo-marquee__heading { font-size: 3.2rem; }
  .logo-marquee { --marquee-gap: 4rem; --marquee-item-h: 8rem; --marquee-logo-h: 4.6rem; }

  .slideshow__controls { right: 2.4rem; bottom: 2.4rem; }
  .slide--desktop { display: block; }
  .slide--mobile { display: none; }

  .multicolumn-list { column-gap: 3rem; }
  .multicolumn-list__item { width: calc(50% - 1.5rem); max-width: calc(50% - 1.5rem); }
}

@media screen and (min-width: 990px) {
  /* Di desktop navbar hanya berpadding atas 1.4rem, jadi barisnya lebih pendek. */
  :root {
    --page-padding: 5rem;
    --nav-row-h: 5.8rem;
    --space-section: 5.5rem;
    --space-heading: 2.6rem;
    --space-block: 3.4rem;
  }

  [data-scroller] { flex-wrap: wrap; overflow: visible; padding-bottom: 0; scrollbar-width: none; }
  [data-scroller]::-webkit-scrollbar { display: none; }
  /* Di desktop grid membungkus: lebar diambil dari kelas kolom, bukan flex. */
  .grid__item { flex: 0 0 auto; }

  .grid--6-col-desktop > .grid__item {
    width: calc(16.66% - 1rem * 5 / 6);
    max-width: calc(16.66% - 1rem * 5 / 6);
  }
  .grid--3-col-desktop > .grid__item {
    width: calc(33.33% - 1rem * 2 / 3);
    max-width: calc(33.33% - 1rem * 2 / 3);
  }
  /* Jumlah kolom grid produk bisa diatur dari panel admin. */
  .grid--2-col-desktop > .grid__item {
    width: calc(50% - 1rem * 1 / 2);
    max-width: calc(50% - 1rem * 1 / 2);
  }
  .grid--4-col-desktop > .grid__item {
    width: calc(25% - 1rem * 3 / 4);
    max-width: calc(25% - 1rem * 3 / 4);
  }
  .grid--5-col-desktop > .grid__item {
    width: calc(20% - 1rem * 4 / 5);
    max-width: calc(20% - 1rem * 4 / 5);
  }
  .grid--7-col-desktop > .grid__item {
    width: calc(14.28% - 1rem * 6 / 7);
    max-width: calc(14.28% - 1rem * 6 / 7);
  }
  .grid--8-col-desktop > .grid__item {
    width: calc(12.5% - 1rem * 7 / 8);
    max-width: calc(12.5% - 1rem * 7 / 8);
  }

  .header {
    grid-template-areas: "left-icons heading icons" "navigation navigation navigation";
    padding-top: 1.4rem;
    padding-bottom: 0;
  }
  .header__icon--menu { display: none; }
  .header__heading-logo { height: 3.6rem; }
  .header__inline-menu { display: block; justify-self: center; }

  .mega_menu_img { display: block; }
  .mega-menu__list > li.mega_menu_img {
    width: 20rem;
    max-width: none;
    border-left: .05rem solid rgba(0, 0, 0, .08);
    padding-left: 2.2rem;
    padding-right: 0;
    margin-right: 0;
  }

  .footer__row-menus { grid-template-columns: repeat(5, 1fr); }
  .footer-block--tagline { grid-column: auto; }

  .card__heading { font-size: 1.4rem; }
  .article-card__title { font-size: 2rem; }
}

@media screen and (min-width: 1200px) {
  .mega-menu__list { padding-left: 4.4rem; padding-right: 4.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  /* Marquee sengaja dikecualikan: animasinya berjalan terus dan memang diminta
     tetap bergerak. Sisanya dimatikan seperti biasa. */
  *:not(.logo-marquee__track) {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .logo-marquee__track { animation-duration: var(--marquee-duration, 90s) !important; }
}

/* ---------------------------------------------------------------- Popup iklan */
.popup-ad {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 2rem;
}
.popup-ad[hidden] { display: none; }
body.popup-open { overflow: hidden; }

.popup-ad__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  animation: popup-fade .25s ease;
}
.popup-ad__dialog {
  position: relative;
  background: rgb(var(--color-background));
  border-radius: var(--media-radius);
  width: min(48rem, 100%);
  max-height: 86svh;
  overflow: auto;
  box-shadow: 0 2rem 6rem rgba(0, 0, 0, .35);
  animation: popup-rise .3s ease;
}
.popup-ad__close {
  position: absolute;
  top: .8rem;
  right: .8rem;
  z-index: 2;
  width: 3.4rem;
  height: 3.4rem;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: rgb(var(--color-foreground));
  font-size: 2.4rem;
  line-height: 1;
  cursor: pointer;
}
.popup-ad__close:hover { background: #fff; }
.popup-ad__link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.popup-ad__media img {
  display: block;
  width: 100%;
  height: auto;
}
.popup-ad__body {
  padding: 2.4rem;
  text-align: center;
}
.popup-ad__heading {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  letter-spacing: .04em;
  margin: 0 0 .8rem;
}
.popup-ad__text {
  margin: 0 0 1.6rem;
  color: rgba(var(--color-foreground), .8);
}
.popup-ad__button { display: inline-block; }

@keyframes popup-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes popup-rise { from { opacity: 0; transform: translateY(2rem); } to { opacity: 1; transform: none; } }

@media screen and (max-width: 749px) {
  .popup-ad { padding: 1.6rem; }
  .popup-ad__body { padding: 1.8rem; }
  .popup-ad__heading { font-size: 2rem; }
}

/* ------------------------------------------------- Header ringkas di mobile */
@media screen and (max-width: 989px) {
  /* Logo rata kiri, hamburger di kanan — searah dengan drawer yang muncul dari
     kanan. Pencarian, akun, dan keranjang ada di dalam drawer. */
  .header {
    grid-template-areas: "heading left-icons";
    grid-template-columns: 1fr auto;
  }
  .header__heading-link { justify-self: start; }
  .header__icons { display: none; }
  .header__icon--menu { grid-area: left-icons; justify-self: end; }
}

.menu-drawer__search {
  display: flex;
  align-items: center;
  gap: .8rem;
  border: .1rem solid rgba(var(--color-foreground), .2);
  padding: .4rem .4rem .4rem 1.2rem;
}
.menu-drawer__search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  padding: .6rem 0;
}
.menu-drawer__search input:focus { outline: none; }
.menu-drawer__search button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.6rem;
  height: 3.6rem;
  flex-shrink: 0;
  border: 0;
  background: rgb(var(--color-foreground));
  color: #fff;
  cursor: pointer;
}
.menu-drawer__links { display: flex; gap: 2.4rem; align-items: center; flex-wrap: wrap; }

/* ------------------------------------------------ Hero fullscreen di mobile */
@media screen and (max-width: 989px) {
  .slideshow__slides {
    /* --hero-offset = tinggi bar pengumuman + navbar, diukur main.js.
       Satuannya svh (small viewport height), bukan dvh: dvh ikut membesar saat
       bilah alamat browser menyusut ketika digulirkan, sehingga tinggi hero
       berubah-ubah di tengah gulungan. svh memakai viewport ketika bilah alamat
       masih tampil, jadi nilainya tetap dan hero selalu muat di layar. */
    height: calc(100vh - var(--hero-offset, 11rem));
    height: calc(100svh - var(--hero-offset, 11rem));
  }
  .slideshow__slide,
  .slideshow__slide.is-active { position: absolute; inset: 0; }
  .slideshow__slide img { width: 100%; height: 100%; object-fit: cover; }
}

/* --------------------------------------------------- Marquee logo: 2 baris */
/* Jarak antar baris logo, mengikuti irama jarak yang lain. */
.logo-marquee__track + .logo-marquee__track { margin-top: calc(var(--space-heading) + .4rem); }
/* Kedua baris searah dan sama cepat; baris kedua digeser setengah item lewat
   animation-delay negatif yang dihitung main.js, jadi posisinya selang-seling. */

/* ========================================================================
   FAQ — pita judul + akordeon per kategori (pola Carhartt)
   ======================================================================== */
.section--faq { padding-top: 0; }
/* Tanpa pita judul, akordeon langsung menempel di tepi atas section. */
.section--faq-bare { padding-top: 0; }
.faq__cover {
  background-color: rgb(var(--color-brand));
  color: #fff;
  padding: 5rem 0;
  margin-bottom: 4rem;
  text-align: center;
}
/* Bila diberi gambar, teks tetap terbaca lewat lapisan gelap. */
.faq__cover--image {
  background-size: cover;
  background-position: center;
  position: relative;
}
.faq__cover--image::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(0, 20, 60, .68);
}
.faq__cover-inner { position: relative; }
.faq__heading {
  font-family: var(--font-heading);
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: .1rem;
  margin: 0;
}
.faq__intro {
  margin: var(--space-text) auto 0;
  max-width: 56rem;
  font-size: 1.5rem;
  color: rgba(255, 255, 255, .82);
}

.faq-accordion { max-width: 90rem; margin: 0 auto; }
.faq-group { border-bottom: .1rem solid rgba(var(--color-foreground), .16); }
.faq-group:first-child { border-top: .1rem solid rgba(var(--color-foreground), .16); }
.faq-group__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  padding: 2.2rem 0;
  cursor: pointer;
  list-style: none;
}
.faq-group__trigger::-webkit-details-marker { display: none; }
.faq-group__title {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: .04rem;
}
.faq-group[open] .faq-group__title,
.faq-group__trigger:hover .faq-group__title { color: rgb(var(--color-brand)); }

/* Penanda plus di dalam lingkaran, berubah jadi minus saat terbuka. */
.faq-group__mark {
  position: relative;
  flex-shrink: 0;
  width: 3.2rem;
  height: 3.2rem;
  border: .15rem solid currentColor;
  border-radius: 50%;
  color: rgb(var(--color-brand));
}
.faq-group__mark::before,
.faq-group__mark::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.4rem;
  height: .2rem;
  background-color: currentColor;
  transform: translate(-50%, -50%);
  transition: transform var(--duration-default) ease;
}
.faq-group__mark::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-group[open] .faq-group__mark::after { transform: translate(-50%, -50%) rotate(0); }

.faq-group__panel { padding: 0 0 2.4rem; max-width: 76rem; }
.faq-q {
  margin: 2rem 0 .6rem;
  font-size: 1.6rem;
  font-weight: 700;
}
.faq-q:first-child { margin-top: 0; }
.faq-a {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.7;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  color: rgba(var(--color-foreground), .8);
}

@media screen and (min-width: 750px) {
  .faq__cover { padding: 7rem 0; margin-bottom: 5rem; }
  .faq__heading { font-size: 3.4rem; }
  .faq__intro { font-size: 1.7rem; }
  .faq-group__title { font-size: 2.1rem; }
  .faq-group__trigger { padding: 2.8rem 0; }
  .faq-q { font-size: 1.7rem; }
  .faq-a { font-size: 1.6rem; }
}

/* ------------------------------------------- Footer: kolom & newsletter */
.footer-block__details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  cursor: pointer;
  list-style: none;
}
.footer-block__details > summary::-webkit-details-marker { display: none; }
/* Tanda plus/minus, hanya tampil selama kolomnya masih bisa dilipat. */
.footer-block__mark { position: relative; width: 1.4rem; height: 1.4rem; flex-shrink: 0; }
.footer-block__mark::before,
.footer-block__mark::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: .2rem;
  background-color: currentColor;
  transition: transform var(--duration-default) ease;
}
.footer-block__mark::after { transform: rotate(90deg); }
.footer-block__details[open] .footer-block__mark::after { transform: rotate(0); }



@media screen and (min-width: 750px) {
  /* Di layar lebar kolom selalu terbuka, jadi kepalanya bukan tombol lagi. */
  .footer-block__details > summary { cursor: default; pointer-events: none; }
  .footer-block__mark { display: none; }
}

/* ========================================================================
   Pita navy: FAQ sampai footer jadi satu bidang warna
   ======================================================================== */
.section--faq,
.footer {
  background-color: rgb(var(--color-brand));
  color: #fff;
}
/* .section punya margin 0.4rem atas-bawah; pada FAQ itu memunculkan sekat putih
   tipis di antara bidang navy. Dinolkan agar warnanya menyambung tanpa putus. */
.section--faq { margin-top: 0; margin-bottom: 0; }
.footer { margin-top: 0; }

/* Pita judul FAQ sudah senada dengan sekelilingnya, jadi tak perlu warna sendiri. */
.section--faq .faq__cover { background-color: transparent; margin-bottom: var(--space-heading); }
.section--faq { padding-bottom: 0; }

.faq-group { border-bottom-color: rgba(255, 255, 255, .22); }
.faq-group:first-child { border-top-color: rgba(255, 255, 255, .22); }
.faq-group__mark { color: #fff; }
.faq-group[open] .faq-group__title,
.faq-group__trigger:hover .faq-group__title { color: rgba(255, 255, 255, .72); }
.faq-a { color: rgba(255, 255, 255, .82); }

.footer { border-top: 0; }
.footer a:hover { color: rgba(255, 255, 255, .7); }
.footer-block__heading { color: #fff; }
.footer-block--menu a { color: rgba(255, 255, 255, .82); }
.footer-block__details-content h2 { color: #fff; }

.footer__copyright, .footer__copyright a { color: rgba(255, 255, 255, .72); }

/* ------------------------------------------------ Logo di atas footer */
.footer__brand { padding: 1rem 0 3.5rem; text-align: center; }
.footer__brand-logo { display: block; margin: 0 auto; width: auto; height: 11rem; }

@media screen and (min-width: 750px) {
  .footer__brand { padding: 1.5rem 0 4.5rem; }
  .footer__brand-logo { height: 15rem; }
  .newsletter-band__text h2 { font-size: 2.8rem; }
}

/* ------------------------------------------- Gambar pengganti teks panjang */
.rich-text__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--media-radius);
}

/* ========================================================================
   Pita ajakan — kartu promo bersudut membulat, dua tema warna
   ======================================================================== */

.cta-banner__wrap {
  width: 100%;
  max-width: 128rem;
  margin: 0 auto;
  padding: 0 1.6rem;
}
.cta-banner__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 25rem;
  padding: 3.4rem 2.4rem;
  border-radius: 2.4rem;
  color: #1a1a1a;
  text-align: center;
}
.cta-banner__card--yellow { background-color: #e5b80b; }
/* Oranye tidak polos: gradasi diagonal plus sorot lembut di sudut atas. */
.cta-banner__card--orange {
  background-color: #f26a1b;
  background-image:
    radial-gradient(120% 90% at 12% 0%, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 55%),
    linear-gradient(135deg, #ff8a3d 0%, #f26a1b 45%, #d94f0d 100%);
  color: #fff;
}
.cta-banner__text { width: 100%; }
.cta-banner__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 6.4vw, 3.4rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: .1rem;
  text-transform: uppercase;
}
.cta-banner__desc {
  max-width: 58rem;
  margin: var(--space-text) auto 0;
  font-size: 1.5rem;
  line-height: 1.6;
  color: rgba(26, 26, 26, .82);
}
.cta-banner__card--orange .cta-banner__desc { color: rgba(255, 255, 255, .92); }

/* Dua pilihan pemesanan di dalam pita. */
.cta-banner__options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 1rem;
  width: 100%;
  max-width: 60rem;
  margin: 3rem auto 0;
}
.cta-card {
  display: flex;
  flex-direction: column;
  padding: 1.6rem 1.4rem;
  border-radius: 1rem;
  background-color: #fff;
  color: #1a1a1a;
  text-align: center;
  transition: transform var(--duration-default) ease, box-shadow var(--duration-default) ease;
}
.cta-card:hover { transform: translateY(-.3rem); box-shadow: 0 .8rem 2rem rgba(0, 0, 0, .18); }
.cta-card__title {
  display: block;
  font-family: var(--font-body);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .04rem;
  text-transform: uppercase;
}
.cta-card__note {
  display: block;
  margin-top: .4rem;
  font-size: 1.25rem;
  color: rgba(26, 26, 26, .7);
}
.cta-card__benefits {
  margin: 1.2rem 0 0;
  padding: 1.2rem 0 0;
  border-top: .1rem solid rgba(26, 26, 26, .18);
  display: grid;
  gap: .5rem;
  text-align: left;
}
.cta-card__benefits li {
  position: relative;
  padding-left: 1.7rem;
  font-size: 1.1rem;
  line-height: 1.35;
}
.cta-card__benefits li::before {
  content: '';
  position: absolute;
  left: .2rem;
  top: .35em;
  width: .5rem;
  height: .9rem;
  border: solid currentColor;
  border-width: 0 .2rem .2rem 0;
  transform: rotate(45deg);
  opacity: .75;
}
/* Varian silang untuk poin yang bersifat kekurangan. */
.cta-card__benefits--cross li::before {
  border: 0;
  top: .5em;
  width: 1rem;
  height: .18rem;
  background-color: currentColor;
  transform: rotate(45deg);
}
.cta-card__benefits--cross li::after {
  content: '';
  position: absolute;
  left: .2rem;
  top: .5em;
  width: 1rem;
  height: .18rem;
  background-color: currentColor;
  transform: rotate(-45deg);
  opacity: .75;
}
.cta-card__benefits--cross li { opacity: .8; }
.cta-card:last-child { background-color: #1a1a1a; color: #e5b80b; }
.cta-card:last-child .cta-card__benefits { border-top-color: rgba(229, 184, 11, .28); }
.cta-banner__card--orange .cta-card:last-child { color: #ffb27a; }

.cta-banner__button {
  display: inline-block;
  margin-top: 2.6rem;
  padding: 1.6rem 3.4rem;
  border: .15rem solid #333;
  /* Kotak dengan sudut sedikit membulat, bukan pil penuh. */
  border-radius: .6rem;
  background-color: #333;
  color: #e5b80b;
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  /* Tanpa huruf kapital: label tombol bisa memuat alamat situs, dan URL
     berhuruf besar semua sulit dibaca. */
  letter-spacing: .04rem;
  transition: background-color var(--duration-default) ease, color var(--duration-default) ease, border-color var(--duration-default) ease;
}
.cta-banner__button:hover {
  background-color: #fff;
  border-color: #fff;
  color: #1a1a1a;
}
.cta-banner__card--orange .cta-banner__button {
  border-color: #fff;
  background-color: #fff;
  color: #d94f0d;
}
.cta-banner__card--orange .cta-banner__button:hover {
  background-color: #1a1a1a;
  border-color: #1a1a1a;
  color: #fff;
}

/* Kartu dengan gambar pendamping. */
.cta-banner__media { width: 100%; margin-top: 2.4rem; }
.cta-banner__media img {
  display: block;
  width: 100%;
  max-width: 20rem;
  height: auto;
  margin: 0 auto;
  /* Mockup ponsel sudah punya sudutnya sendiri, jadi tanpa radius atau latar. */
  filter: drop-shadow(0 1.2rem 2.4rem rgba(0, 0, 0, .28));
}

@media screen and (min-width: 750px) {
  .cta-banner { padding: 3rem 0; }
  .cta-banner__card { padding: 4.4rem 4rem; }
  .cta-banner__title { font-size: clamp(2.8rem, 3.8vw, 4.2rem); letter-spacing: .05rem; }
  .cta-banner__desc { font-size: 1.7rem; margin-top: 1.8rem; }
  .cta-banner__options { gap: 1.6rem; }
  .cta-card { padding: 2.2rem 2.4rem; }
  .cta-card__title { font-size: 1.45rem; }
  .cta-card__benefits li { font-size: 1.25rem; padding-left: 2rem; }
  .cta-banner__button { margin-top: 1.8rem; padding: 1.2rem 2.6rem; font-size: 1.2rem; }

  /* Teks di kiri, gambar di kanan. */
  .cta-banner__card--with-media {
    flex-direction: row;
    align-items: center;
    gap: 4rem;
    text-align: left;
  }
  .cta-banner__card--with-media .cta-banner__text { flex: 1; }
  .cta-banner__card--with-media .cta-banner__desc { margin-left: 0; }
  .cta-banner__card--with-media .cta-banner__options { margin-left: 0; }
  .cta-banner__media { width: auto; margin-top: 0; flex-shrink: 0; }
  .cta-banner__media img { max-width: 23rem; }
}

/* --------------------------------- Gambar di dalam blok teks (rich text) */
.rich-text__body img {
  display: block;
  width: 100%;
  height: auto;
  margin: 2.4rem 0;
  border-radius: var(--media-radius);
  /* Lebar dibatasi agar teks di dalam gambar tetap terbaca di layar lebar. */
  max-width: 62rem;
}

@media screen and (min-width: 750px) {
  .rich-text__body img { margin: 3.2rem 0; }
}

/* ========================================================================
   Testimoni pelanggan — foto bulat, nama perusahaan, nama, jabatan
   ======================================================================== */
.testimonials__heading { text-align: center; margin-bottom: var(--space-heading); }
.testimonial__card { text-align: center; }
/* Screenshot percakapan adalah isi testimoninya, jadi ditampilkan utuh —
   tanpa pemotongan sedikit pun. */
.testimonial__photo {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 1.6rem;
  border-radius: var(--media-radius);
  object-fit: contain;
  background-color: rgb(var(--color-background-contrast));
}
.testimonial__company {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .06rem;
  line-height: 1.3;
  color: rgb(var(--color-brand));
  text-transform: uppercase;
}
.testimonial__name {
  margin: .6rem 0 0;
  font-size: 1.5rem;
  font-weight: 600;
}
.testimonial__role {
  margin: .2rem 0 0;
  font-size: 1.3rem;
  color: rgba(var(--color-foreground), .65);
}

/* Di ponsel: satu tangkapan layar tampil penuh, separuh berikutnya mengintip
   sebagai petunjuk bahwa deretannya bisa digeser. */
.testimonial-list > .grid__item { flex-basis: calc(68% - .5rem); }

/* Grid produk di ponsel: dua kartu utuh plus separuh kartu ketiga.
   Dua penuh (2 x 40%) menyisakan 20% — tepat separuh kartu berikutnya. */
.product-grid > .grid__item { flex-basis: calc(40% - .5rem); }

/* Corporate project: satu artikel utuh plus separuh artikel berikutnya,
   supaya jelas deretannya bisa digeser. */
.blog > .grid__item { flex-basis: calc(68% - .5rem); }

@media screen and (min-width: 750px) {
  .testimonial__company { font-size: 1.5rem; }
  .testimonial-list > .grid__item,
  .blog > .grid__item { flex-basis: calc(46% - .667rem); }
}

@media screen and (min-width: 990px) {
  /* Lebar diambil dari kelas kolom, bukan flex-basis. */
  .testimonial-list > .grid__item,
  .product-grid > .grid__item,
  .blog > .grid__item { flex-basis: auto; }
}

/* ------------------------------------------- Banner lebar dengan tombol */
/* Kerangka sama dengan pita ajakan: wadah selebar halaman, isinya kartu
   bersudut membulat — bukan gambar yang melebar sampai tepi layar. */

.image-banner__wrap {
  width: 100%;
  max-width: 128rem;
  margin: 0 auto;
  padding: 0 1.6rem;
}
.image-banner__inner {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 2.4rem;
}
.image-banner__inner img { display: block; width: 100%; height: auto; }
/* Tombol menumpang di atas gambar. Diberi lapisan gelap tipis di bawahnya
   supaya tetap terbaca apa pun isi gambarnya. */
.image-banner__action {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  padding: 4rem 1.6rem 2rem;
  background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
}
/* Tombol banner memakai navy merek, bukan hitam bawaan tombol utama. */
.image-banner__action .button {
  background-color: rgb(var(--color-brand));
  border-color: rgb(var(--color-brand));
  color: #fff;
}
.image-banner__action .button:hover {
  background-color: #002d80;
  border-color: #002d80;
}
@media screen and (min-width: 750px) {
  .image-banner { padding: 3rem 0; }
  .image-banner__action { padding: 6rem 1.6rem 3rem; }
}

/* --------------------------------- Pita ajakan tanpa kotak berwarna */
.cta-banner__card--plain {
  background: none;
  color: rgb(var(--color-foreground));
  padding-left: 0;
  padding-right: 0;
  min-height: 0;
}
.cta-banner__card--plain .cta-banner__title { color: rgb(var(--color-brand)); }
.cta-banner__card--plain .cta-banner__desc { color: rgba(var(--color-foreground), .78); }
.cta-banner__card--plain .cta-banner__button {
  border-color: rgb(var(--color-brand));
  background-color: rgb(var(--color-brand));
  color: #fff;
}
.cta-banner__card--plain .cta-banner__button:hover {
  background-color: #002d80;
  border-color: #002d80;
  color: #fff;
}


/* ----------------------------------- Judul pada bagian berlatar gelap */
/* Aturan navy di atas berlaku untuk seluruh heading, jadi bagian gelap
   perlu menegaskan warnanya sendiri agar tetap terbaca. */
.faq-group__title,
.newsletter-band__text h2,
.footer-block__heading,
.footer-block__details-content h2,
.card--collection .card__overlay .card__heading { color: #fff; }

.cta-banner__card--yellow .cta-banner__title { color: #1a1a1a; }
.cta-banner__card--orange .cta-banner__title { color: #fff; }
.cta-banner__card--plain .cta-banner__title { color: rgb(var(--color-brand)); }