/* ==========================================================================
   Yateer — stylesheet situs
   Flat colours only. No gradients, no shadows-as-decoration.
   ========================================================================== */

/* --- tokens ---------------------------------------------------------------
   Palet mengikuti referensi desain klien (tenuedeattire.com): kertas putih
   polos, tinta nyaris hitam, dan HANYA DUA aksen — merah untuk harga jual,
   biru untuk tindakan. Batas dua itu disengaja: begitu aksennya jadi tiga,
   merah berhenti berarti "ini sedang diskon" dan cuma jadi dekorasi.

   Abu --kanvas bukan latar seksi, melainkan latar FOTO produk. Di katalog
   fashion, foto dengan latar abu seragam yang menempel rapat satu sama lain
   membentuk satu bidang rata — itu yang membuat grid-nya terbaca sebagai
   rak, bukan sebagai deretan kartu terpisah.
   ========================================================================== */
:root {
  --ink: #1a1a1a;
  --muted: #767676;
  --line: #e5e5e5;
  --paper: #ffffff;
  --kanvas: #f0f0f0;

  --jual: #e2342a;
  --aksi: #1e50a2;
  --awas: #d98518;

  /* Sudut NOL, bukan "kecil". Radius 8px pada kotak sebesar foto produk
     tidak terbaca sebagai pilihan desain — ia terbaca sebagai kelalaian.
     Nama --r-* dipertahankan supaya pemakaian lama tetap berfungsi;
     --r-pill disisakan untuk elemen yang memang bulat penuh (FAB). */
  --r-pill: 999px;
  --r-sm: 0;
  --r-md: 0;
  --r-lg: 0;
  --r-xl: 0;

  --h-header: 88px;
  --h-bar: 48px;

  --shell: 1320px;

  /* --- alias nama lama ----------------------------------------------------
     Berkas ini memakai nama navy, cream, dan steel di ~300 tempat, warisan
     basis kode DalwaCafe. Memetakannya di sini, sekali, membalik seluruh
     palet situs tanpa menyentuh satu per satu — dan yang lebih penting,
     tanpa risiko satu pemakaian terlewat lalu meninggalkan noda navy di
     halaman yang sudah putih.

     Aturan untuk kode baru: pakai nama sebenarnya (--ink, --aksi, --jual),
     jangan menambah pemakaian alias. */
  --navy-900: var(--ink);
  --navy-700: var(--ink);
  --navy-500: var(--aksi);
  --steel: var(--muted);
  --steel-light: var(--line);
  --cream: var(--paper);
  --cream-deep: var(--kanvas);
  --bar: var(--aksi);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }

/* Judul RINGAN, bukan tebal. Ini perbedaan paling menentukan antara tampilan
   lama (kafe: bobot 800, tracking rapat, navy) dan referensi butik: satu
   bobot reguler, tracking netral, hitam. Bobot 800 pada Helvetica berubah
   jadi Helvetica Bold yang lebar dan berat — persis yang tidak dipakai
   merek fashion mana pun untuk nama produk. */
h1, h2, h3, h4 {
  margin: 0;
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.12;
  color: var(--ink);
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* --- layout helpers ------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 24px;
}

.section { padding: 88px 0; }
/* --cream sekarang sama dengan --paper (lihat alias di :root), jadi kelas ini
   tidak lagi mewarnai apa pun. Yang menggantikan pembeda warnanya: satu garis
   rambut di atas seksi. Nama kelasnya sengaja TIDAK diganti — ia dipakai tiga
   halaman, dan mengganti nama kelas hanya demi kerapian berarti tiga berkas
   ikut disentuh tanpa satu pun perubahan yang terlihat pengunjung. */
.section--cream { background: var(--paper); border-top: 1px solid var(--line); }
.section--tight { padding: 56px 0; }

.stack-lg > * + * { margin-top: 24px; }

/* --- buttons -------------------------------------------------------------- */
/* Tombol PERSEGI (radius dari --r-sm yang kini 0) dan berhuruf reguler.
   Warna isinya biru --aksi, bukan warna merek: di toko, tombol biru punya
   satu tugas — "ini yang diklik untuk melanjutkan" — dan itu harus berbeda
   dari warna judul, wordmark, dan harga. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: var(--r-sm);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: .02em;
  line-height: 1;
  transition: background-color .15s linear, color .15s linear, border-color .15s linear, opacity .15s linear;
}
.btn--solid { background: var(--aksi); color: #fff; }
.btn--solid:hover { background: #17407f; }
.btn--ghost { border: 1px solid var(--ink); color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; }
.btn--white { background: #fff; color: var(--aksi); font-size: 14px; padding: 12px 26px; }
.btn--sm { padding: 11px 22px; font-size: 14px; }
/* Tombol selebar kolomnya — dipakai "Tambah ke keranjang"/"Beli di ..." di
   halaman produk. Di sana tombol setengah lebar terbaca sebagai pilihan
   sampingan, padahal ia satu-satunya tindakan utama halaman itu. */
.btn--blok { display: flex; width: 100%; padding-top: 20px; padding-bottom: 20px; }
.chev { width: 14px; height: 14px; flex-shrink: 0; }

/* --- announcement bar -------------------------------------------------------
   Pindah ke PALING ATAS dokumen, di atas header, dan sengaja TIDAK lengket.
   Susunan lama (header lengket di atas, banner lengket menempel di bawahnya)
   memakan 132px tinggi layar selamanya — di ponsel 667px itu seperlima layar
   hilang sebelum satu produk pun terlihat. Banner adalah pesan sekali baca;
   yang pantas mengikuti gulungan cuma navigasinya. */
.announce {
  background: var(--aksi);
  color: #fff;
  min-height: var(--h-bar);
  display: flex;
  align-items: center;
  position: relative;
  z-index: 40;
}
.announce .shell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 8px;
  padding-bottom: 8px;
}
.announce p {
  font-weight: 400;
  font-size: 14px;
  letter-spacing: .02em;
  margin: 0;
  text-align: center;
}
/* Tautan banner tampil sebagai teks bergaris bawah, bukan tombol putih.
   Tombol di dalam pita berwarna penuh adalah dua lapis penekanan untuk satu
   pesan; garis bawah sudah cukup menandai bahwa ia bisa diklik. */
.announce .btn--white {
  background: none;
  color: #fff;
  padding: 0;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .02em;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.announce .btn--white:hover { opacity: .75; }

/* --- header --------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  height: var(--h-header);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
}
/* Grid 3 kolom (bukan flex rata-kanan) supaya nav benar-benar terpusat
   di tengah shell, bukan cuma di antara logo dan aside — meniru pola
   header butik referensi (logo kiri, menu tengah, ikon kanan). */
.header .shell {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
}

.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand__mark { width: 32px; height: 32px; }
/* Wordmark: huruf renggang, bukan tebal rapat. Merek busana menulis namanya
   sebagai label jahitan — lebar, tenang, kecil — bukan sebagai logo aplikasi. */
.brand__name {
  font-weight: 400;
  font-size: 16px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.15;
}
.brand__name span { display: block; font-size: 9px; font-weight: 400; letter-spacing: .22em; color: var(--muted); }

.nav { justify-self: center; }
.nav__list { display: flex; align-items: center; gap: 38px; }
.nav__list a {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 6px 0;
  border-bottom: 1px solid transparent;
}
.nav__list a:hover { border-bottom-color: var(--ink); }
.nav__list a[aria-current="page"] { border-bottom-color: var(--ink); }

/* Kolom kanan header: ikon keranjang (semua lebar layar) + tombol burger
   (hanya di bawah 1080px).

   display SEKARANG flex, dulu none. Dulu benar: isinya cuma burger, dan
   burger memang tidak pernah tampil di desktop. Begitu ikon keranjang masuk
   ke kotak yang sama, `display: none` membuatnya hilang sama sekali di layar
   lebar — dan halaman keranjang jadi tidak punya pintu masuk di desktop.

   grid-column: 3 WAJIB eksplisit. Di bawah 1080px .nav dibuat display:none,
   dan elemen display:none bukan lagi grid item — tanpa baris ini .header__aside
   naik mengisi kolom 2 yang ditinggalkan nav, sehingga isinya mendarat di
   TENGAH header, bukan di kanan. Kolom ketiga tetap dijaga (1fr) walau
   kosong, supaya nav di tengah benar-benar terpusat. */
.header__aside { display: flex; align-items: center; gap: 4px; flex-shrink: 0; grid-column: 3; justify-self: end; }

.burger {
  display: none;
  width: 44px; height: 44px;       /* 44px = target sentuh minimum yang nyaman */
  margin-right: -10px;             /* garis bar tetap lurus dengan tepi shell */
  align-items: center; justify-content: center;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--navy-700);
}
.burger span {
  display: block; position: relative;
  width: 20px; height: 1.5px;
  background: currentColor;
  transition: background-color .18s linear;
}
.burger span::before,
.burger span::after {
  content: ""; position: absolute; left: 0;
  width: 20px; height: 1.5px;
  background: currentColor;
  transition: transform .18s ease, top .18s ease;
}
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }

/* Keadaan terbuka dibaca dari aria-expanded yang sudah diurus main.js —
   tidak perlu kelas tambahan, dan penanda visualnya otomatis sinkron
   dengan yang dibacakan pembaca layar. */
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* --- ghost outline heading ------------------------------------------------ */
.ghost {
  position: absolute;
  left: 0;
  right: 0;
  white-space: nowrap;
  font-weight: 800;
  font-size: clamp(64px, 11vw, 148px);
  letter-spacing: -0.03em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--cream-deep);
  pointer-events: none;
  user-select: none;
  line-height: 1;
}

.has-ghost { position: relative; overflow: hidden; }

/* --- hero -------------------------------------------------------------------
   Foto penuh satu layar dengan panel teks menumpuk di atasnya — bukan lagi
   kotak dua panel (teks-kiri, gambar-kotak-kanan) ala versi lama. .hero__media
   mengisi seluruh .hero__slide sebagai latar; .shell dan .hero__panel duduk
   di atasnya lewat z-index. */
.hero { position: relative; overflow: hidden; background: var(--navy-900); }
.hero__slide { display: none; position: relative; min-height: 640px; }
.hero__slide.is-active { display: block; }
.hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
.hero .shell {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  min-height: 640px;
  padding-top: 56px;
  padding-bottom: 64px;
}
.hero__panel {
  background: rgba(7, 26, 51, .82);
  color: #fff;
  padding: 36px 40px;
  max-width: 460px;
  border-radius: var(--r-sm);
}
.hero__panel h1 { color: #fff; font-size: clamp(36px, 4.6vw, 58px); }
.hero__sub {
  margin-top: 18px;
  font-size: 17px;
  font-weight: 500;
  color: rgba(255, 255, 255, .82);
  max-width: 32ch;
  line-height: 1.4;
}
.hero__cta { margin-top: 28px; }

.hero__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy-700);
}
.hero__nav--prev { left: 24px; }
.hero__nav--next { right: 24px; }

/* --- image placeholders --------------------------------------------------- */
.ph {
  background: var(--cream-deep);
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  color: var(--steel-light);
}
.ph svg { width: 84px; height: 84px; opacity: .85; }
.ph--tall { aspect-ratio: 3 / 4; }
.ph--square { aspect-ratio: 1 / 1; }
.ph--wide { aspect-ratio: 16 / 9; }
.ph--round { border-radius: 50%; }
.ph--paper { background: var(--cream); }

/* --- story ---------------------------------------------------------------- */
.story__ghost { top: 40px; }
.story__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
  margin-top: 40px;
}
.story h2 { font-size: clamp(44px, 5.4vw, 76px); position: relative; }
.story__facts { margin-top: 8px; }
.story__facts li {
  display: flex;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
}
.story__facts dt { font-weight: 700; color: var(--navy-700); min-width: 172px; }
.story__facts dd { margin: 0; color: var(--muted); }
.story__row {
  display: grid;
  grid-template-columns: 172px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.story__row dt { font-weight: 700; color: var(--navy-700); margin: 0; }
.story__row dd { margin: 0; color: var(--muted); }

.center-cta { display: flex; justify-content: center; margin-top: 56px; }

/* --- section head -----------------------------------------------------------
   Dulu: judul raksasa clamp(44px..80px) di kiri, catatan besar di kanan —
   satu baris yang sendirian memakan setinggi layar ponsel. Sekarang: satu
   baris rendah berisi label kecil di kiri dan catatan/tautan di kanan, pola
   yang dipakai referensi ("NEW ARRIVALS" ..... "VIEW ALL →").

   Alasannya bukan selera. Di halaman katalog, yang harus besar adalah
   fotonya; judul seksi cuma penanda tempat. Judul 80px memaksa pengunjung
   membaca kata "Produk Lain" sebelum boleh melihat satu produk pun. */
.head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  position: relative;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.head h2 {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.2;
}
.head__note {
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.35;
  max-width: 42ch;
  text-align: right;
  margin: 0;
}
.eyebrow {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 20px;
}

/* --- news cards ----------------------------------------------------------- */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 56px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }

/* Kartu tanpa bingkai: gambar rapat ke tepi, rasio potret, teks polos di
   bawahnya tanpa kotak/garis pemisah — arah visual dari referensi Tenue de
   Attire (katalog fashion), bukan kartu-dalam-kotak bergaya lama. */
.card {
  background: transparent;
  display: flex;
  flex-direction: column;
}
/* Foto diberi latar --kanvas. Foto produk fashion hampir selalu dipotret di
   atas latar polos; tanpa latar yang sama di kotaknya, foto dengan rasio
   berbeda akan menyisakan celah putih yang tampak seperti kartu rusak. */
.card__media { border-radius: 0; aspect-ratio: 3 / 4; background: var(--kanvas); }
.card__body { padding: 16px 0 0; display: flex; flex-direction: column; flex: 1; }
/* Nama produk HURUF BESAR dan reguler, bukan tebal. Di grid empat kolom,
   judul tebal membuat blok teks di bawah setiap foto tampak lebih berat
   daripada fotonya sendiri — mata jadi membaca daftar nama, bukan melihat
   deretan baju. Huruf besar reguler memberi bentuk yang rata tanpa bobot. */
.card__title {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.45;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card__excerpt {
  font-size: 14px;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 8px;
}
.card__meta {
  margin-top: auto;
  padding-top: 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--ink);
}
/* Harga: nilai sekarang dulu, harga lama menyusul dicoret dan diredupkan.
   Keduanya nowrap supaya "Rp" tidak pernah terpisah dari angkanya saat kolom
   kartu menyempit.

   MERAH HANYA KALAU MEMANG SEDANG DISKON (.card__harga--jual, dipasang
   kartuProduk() cuma saat ada harga coret). Di situs referensi seluruh harga
   tampil merah karena memang seluruh katalognya sedang obral — menyalin itu
   apa adanya akan membuat merah kehilangan artinya di Yateer, yang katalog
   normalnya tidak diskon. Merah harus tetap berarti satu hal. */
.card__harga { white-space: nowrap; }
.card__harga--jual { color: var(--jual); }
.card__harga-coret {
  white-space: nowrap;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  text-decoration: line-through;
}
.card__habis {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- app section ---------------------------------------------------------- */
.app__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.app h2 { font-size: clamp(38px, 4.6vw, 62px); }
.app__lead { margin-top: 24px; color: var(--muted); max-width: 40ch; }
.app__badges { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: #fff;
  border-radius: 10px;
  padding: 10px 18px;
  line-height: 1.15;
}
.badge small { display: block; font-size: 10px; opacity: .8; }
.badge strong { display: block; font-size: 15px; font-weight: 700; }

.phones { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; align-items: center; }
.phone {
  border: 8px solid var(--ink);
  border-radius: 32px;
  aspect-ratio: 9 / 19;
  background: var(--cream);
  padding: 14px;
  overflow: hidden;
}
.phone:first-child { transform: translateY(28px); }
.phone__bar { height: 10px; width: 46px; background: var(--ink); border-radius: 999px; margin: 0 auto 16px; }
.phone__row { height: 44px; background: var(--paper); border-radius: 10px; margin-bottom: 10px; border: 1px solid var(--line); }
.phone__row--tall { height: 92px; }
.phone__row--fill { background: var(--navy-700); border-color: var(--navy-700); }

/* --- promo ---------------------------------------------------------------- */
.promo-panel {
  background: var(--cream);
  border-radius: var(--r-xl);
  padding: 72px 40px 80px;
  position: relative;
  overflow: hidden;
}
.promo-panel .ghost { top: 44px; text-align: center; -webkit-text-stroke-color: #dedbd2; }
.promo__head { text-align: center; position: relative; margin-bottom: 56px; }
.promo__head h2 { font-size: clamp(40px, 5vw, 68px); }
.promo__head p { margin-top: 14px; color: var(--steel); font-size: clamp(17px, 1.5vw, 22px); font-weight: 500; }

.promo-card {
  background: var(--paper);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  padding: 28px;
  aspect-ratio: 4 / 5;
  display: flex;
  flex-direction: column;
}
.promo-card__value { font-size: 56px; font-weight: 800; color: var(--navy-700); letter-spacing: -0.04em; line-height: 1; }
.promo-card__value sup { font-size: 26px; top: -.6em; }
.promo-card__label { font-size: 19px; font-weight: 700; color: var(--ink); margin-top: 10px; }
.promo-card__body { margin-top: 16px; font-size: 15px; color: var(--muted); }
.promo-card__terms { margin-top: auto; font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 14px; }

/* --- testimonials --------------------------------------------------------- */
.testi { text-align: center; }
.testi h2 { font-size: clamp(44px, 5.4vw, 76px); }
.pill-label {
  display: inline-block;
  margin-top: 22px;
  padding: 12px 34px;
  border: 1px dashed var(--steel);
  border-radius: var(--r-pill);
  color: var(--steel);
  font-size: 17px;
  font-weight: 500;
}
.testi__grid { margin-top: 56px; }
.quote {
  background: var(--cream);
  border-radius: var(--r-md);
  padding: 28px;
  text-align: left;
  position: relative;
  font-size: 16px;
  color: var(--ink);
}
.quote::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -13px;
  transform: translateX(-50%) rotate(45deg);
  width: 26px;
  height: 26px;
  background: var(--cream);
  border-radius: 4px;
}
.quote__mark { color: var(--steel-light); font-size: 40px; line-height: .5; display: block; margin-bottom: 14px; font-weight: 800; }
.person { margin-top: 40px; text-align: center; }
.person__logo {
  width: 46px; height: 46px; margin: 0 auto 14px;
  border: 1px solid var(--line); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px; color: var(--navy-700);
}
.person__name { font-weight: 800; font-size: 19px; color: var(--ink); }
.person__role { font-size: 14px; color: var(--muted); margin-top: 4px; }

.dots { display: flex; gap: 10px; justify-content: center; margin-top: 40px; }
.dots button { width: 10px; height: 10px; border-radius: 50%; background: var(--line); padding: 0; }
.dots button[aria-selected="true"] { background: var(--navy-700); }

/* --- social --------------------------------------------------------------- */
.social-block { background: var(--cream); text-align: center; }
.social-block__label { color: var(--steel); font-weight: 700; font-size: 19px; }
.social-block h2 { font-size: clamp(44px, 6vw, 84px); margin-top: 10px; }
.social-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 56px; }
.social-grid .ph { border-radius: var(--r-md); }

/* --- pernyataan merek -------------------------------------------------------
   Satu kalimat di tengah ruang kosong lebar, tepat sebelum footer. Perannya
   bukan hiasan: ia jeda antara katalog yang sibuk dan footer yang penuh
   tautan, dan satu-satunya tempat di situs yang berbicara sebagai merek,
   bukan sebagai toko. */
.pernyataan {
  padding: 96px 24px;
  text-align: center;
  border-top: 1px solid var(--line);
}
.pernyataan p {
  margin: 0;
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 300;
  font-style: italic;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* --- footer -----------------------------------------------------------------
   Putih dan lima kolom teks polos. Ikon per baris kontak dibuang: di footer
   yang seluruhnya teks, ikon kecil berwarna adalah satu-satunya benda
   berwarna di sana dan justru menarik mata ke alamat kantor. */
.footer { background: var(--paper); border-top: 1px solid var(--line); padding: 72px 0 32px; }
.footer__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px; }
.footer h3 {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 20px;
}
.footer__line { display: block; font-size: 15px; color: var(--ink); margin-bottom: 12px; line-height: 1.5; }
.footer__note { font-size: 14px; color: var(--muted); line-height: 1.6; }
.footer__note em { color: var(--muted); }
/* Daftar tautan layanan: satu per baris, jarak longgar, tanpa pemisah. */
.footer__tautan li { margin-bottom: 12px; }
.footer__tautan a { font-size: 15px; color: var(--ink); }
.footer__tautan a:hover { text-decoration: underline; text-underline-offset: 3px; }

.footer__bottom {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
}
.footer__bottom a:hover { color: var(--ink); }
/* Ikon sosial polos tanpa lingkaran pembungkus. */
.footer__social { display: flex; gap: 20px; }
.footer__social a { display: flex; align-items: center; justify-content: center; color: var(--ink); }
.footer__social a:hover { opacity: .6; }
.footer__social svg { width: 20px; height: 20px; }

/* Deretan logo metode pembayaran (BCA, Mandiri, QRIS, GoPay, ...) sengaja
   BELUM ditulis di sini. Di situs referensi itu sinyal kepercayaan yang kuat,
   dan Yateer memang akan membutuhkannya — tapi memasangnya sekarang berarti
   menjanjikan cara bayar yang belum ada: checkout baru dibangun di Fase 2
   bersama Midtrans Snap. Deretan logo bank di footer toko yang belum bisa
   menerima pembayaran adalah klaim palsu, bukan sekadar hiasan yang
   kepagian. Pasang bersama modul checkout, bukan sebelumnya. */

/* --- page hero (halaman dalam) -----------------------------------------------
   Sama bahasa visualnya dengan .hero beranda: foto penuh satu layar, teks
   menumpuk dalam panel navy transparan — bukan lagi kotak dua kolom
   (teks-kiri, gambar-kotak-kanan). .page-hero__media mengisi seluruh
   .page-hero sebagai latar; .page-hero__panel duduk di atasnya. */
/* Rasio DIKUNCI 2:1, sama di semua lebar layar. Ini yang membuat potongan
   foto yang tampil di mobile sama persis dengan yang tampil di desktop:
   object-fit: cover memotong berdasarkan perbandingan kotak terhadap
   sumbernya, jadi selama perbandingan kotaknya sama, potongannya sama —
   cuma skalanya yang berbeda. Kalau tingginya dikunci piksel (min-height)
   seperti sebelumnya, rasio kotak ikut berubah mengikuti lebar layar, dan
   satu titik fokus mustahil benar di dua layar sekaligus.

   max-height adalah satu-satunya kompromi: tanpanya, layar 1920px
   menghasilkan hero setinggi 960px. Batas 760px berarti rasio tetap 2:1
   sampai lebar 1520px — mencakup seluruh ponsel, tablet, dan hampir semua
   laptop. Di atas itu heronya melebar tanpa bertambah tinggi, jadi
   potongannya mulai sedikit berbeda. Disengaja, dan ini satu-satunya
   tempat kesamaan itu dilepas. */
.page-hero {
  position: relative;
  overflow: hidden;
  /* width: 100% WAJIB eksplisit dan bukan basa-basi. Pada kotak ber-
     aspect-ratio yang lebarnya `auto`, batasan tinggi merambat BALIK lewat
     rasio dan ikut membatasi lebar — max-height: 760px berubah jadi
     max-width: 1520px, dan hero yang seharusnya rata penuh berhenti di
     1520px dengan latar menganga di sisinya. Terukur begitu pada layar
     1920px sebelum baris ini ditambahkan. */
  width: 100%;
  aspect-ratio: 2 / 1;
  max-height: 760px;
  display: flex;
  background: var(--navy-900);
}
.page-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hero tanpa foto sama sekali (lihat heroHalamanTampil di inc/komponen.php).
   Rasio 2:1 dilepas dan tingginya dikunci jauh lebih pendek: kunci rasio itu
   ada supaya potongan FOTO sama di semua layar, dan tanpa foto ia tidak
   menjaga apa pun — yang tersisa cuma 720px bidang gelap kosong di puncak
   halaman. 340px cukup untuk kicker, judul dua baris, dan satu subjudul. */
.page-hero--polos {
  aspect-ratio: auto;
  min-height: 340px;
  max-height: none;
}
.page-hero__kolase { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.page-hero__kolase img,
.page-hero__kolase .ph { width: 100%; height: 100%; object-fit: cover; border-radius: 0; aspect-ratio: auto; }
.page-hero .shell {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;     /* kartu duduk di pojok KIRI BAWAH area hero */
  width: 100%;
  padding-top: 32px;
  padding-bottom: 32px;
}

/* Teks duduk LANGSUNG di atas foto, tanpa kartu di belakangnya.

   Patokan lama "luas kartu 1:9 desktop / 1:4 mobile" sudah tidak berlaku dan
   sengaja dihapus bersama kartunya: begitu panelnya tidak punya latar, tidak
   ada lagi bidang yang luasnya bisa diperbandingkan. Yang menggantikannya
   adalah scrim di .page-hero::after — gradien gelap tipis dari bawah yang
   nyaris tak terlihat pada foto gelap, tapi menyelamatkan keterbacaan pada
   foto terang. Ini perlu justru karena fotonya diunggah pengelola: kita
   tidak bisa berasumsi setiap foto hero cukup gelap untuk teks putih. */
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .18) 34%, rgba(0, 0, 0, 0) 62%);
  pointer-events: none;
}
.page-hero__panel {
  position: relative;
  z-index: 1;
  color: #fff;
  width: 100%;
  max-width: 640px;
}
.page-hero__kicker { display: flex; align-items: center; margin-bottom: 14px; }
.page-hero__kicker span {
  font-size: 15px; font-weight: 400; color: rgba(255, 255, 255, .92);
  letter-spacing: .01em; text-transform: none;
}
.page-hero__kicker strong { font-weight: 400; color: #fff; }
/* Dibatasi tiga baris. Tinggi hero sekarang terkunci rasio, jadi kartu yang
   tumbuh terlalu tinggi tidak lagi mendorong heronya membesar — ia akan
   terpotong `overflow: hidden`. Batas baris mencegah itu terjadi diam-diam
   pada nama artikel yang panjang. */
.page-hero__panel h1 {
  color: #fff;
  font-size: clamp(38px, 5.4vw, 78px);
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 1.04;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* :not(.page-hero__kicker) penting — kicker-nya juga sebuah <p> di dalam
   panel yang sama, jadi tanpa pengecualian ini ia ikut kena semua aturan
   deskripsi: display-nya berubah jadi -webkit-box (mengalahkan flex), dan
   `display: none` versi ponsel ikut menghilangkannya. */
.page-hero__panel p:not(.page-hero__kicker) {
  margin-top: 16px;
  font-size: 17px;
  line-height: 1.45;
  max-width: 46ch;
  color: rgba(255, 255, 255, .92);
  /* Dibatasi dua baris. Deskripsi artikel yang panjang tidak boleh tumbuh
     sampai menutupi fotonya — dan sekarang tanpa kartu, teks yang meluber
     ke tengah foto jauh lebih kacau daripada sebelumnya. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.collage { display: grid; grid-template-columns: 1fr 1.2fr; grid-template-rows: 1fr 1fr; gap: 12px; }
.collage .ph { aspect-ratio: auto; height: 100%; min-height: 150px; border-radius: 12px; }
.collage .ph:last-child { grid-row: span 2; }

/* --- store ---------------------------------------------------------------- */
.map-frame {
  height: 520px;
  background: var(--cream-deep);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  color: var(--steel);
  font-weight: 700;
  border: 1px solid var(--line);
}
.map-frame small { font-weight: 500; color: var(--muted); }

.store-card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 22px;
  align-items: start;
  width: 100%;
  text-align: left;
}
.store-card:hover { border-color: var(--steel); }
.store-card .ph { aspect-ratio: 1/1; border-radius: 12px; }
.store-card h3 { font-size: 24px; color: var(--ink); }
.store-card__addr { display: flex; gap: 10px; font-size: 15px; color: var(--muted); margin-top: 14px; }
.store-card__addr svg { width: 16px; height: 16px; color: var(--navy-700); flex-shrink: 0; margin-top: 3px; }
.store-card__link { display: inline-block; margin-top: 10px; color: var(--navy-500); font-weight: 700; font-size: 15px; }
.store-card__hours { display: flex; gap: 10px; align-items: center; font-size: 15px; color: var(--ink); margin-top: 14px; }
.store-card__hours svg { width: 16px; height: 16px; color: var(--navy-700); }
.store-card__go { display: flex; justify-content: flex-end; margin-top: 14px; color: var(--navy-700); }

.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 40px; }
/* Persegi, bukan pil. Pil adalah bentuk tag/label; di sini fungsinya
   penyaring yang bisa ditekan, dan bentuk persegi menyamakannya dengan
   kotak ukuran di halaman produk — satu kosakata bentuk untuk satu
   kosakata tindakan. */
.chip {
  padding: 11px 20px;
  border: 1px solid var(--line);
  border-radius: 0;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

/* --- modal ---------------------------------------------------------------- */
.modal[hidden] { display: none; }
.modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(28, 28, 26, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}
.modal__box {
  background: var(--paper);
  border-radius: var(--r-lg);
  max-width: 1080px;
  width: 100%;
  max-height: 84vh;
  overflow: auto;
  padding: 28px;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 32px;
}
.modal__close {
  position: absolute;
  top: 24px;
  right: 32px;
  width: 36px;
  height: 36px;
  color: #fff;
}
.modal h3 { font-size: 34px; color: var(--ink); margin-bottom: 18px; }

/* --- values carousel ------------------------------------------------------ */
.values { position: relative; }
.values__title { text-align: center; font-size: clamp(44px, 6vw, 82px); }
.values__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 48px) / 3);
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 8px 0 24px;
  scrollbar-width: none;
}
.values__track::-webkit-scrollbar { display: none; }
.value-card {
  scroll-snap-align: start;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  background: var(--paper);
}
.value-card__mark {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--navy-700);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 800;
  margin-bottom: 22px;
}
.value-card h3 { font-size: 26px; color: var(--ink); margin-bottom: 12px; }
.value-card p { font-size: 15px; color: var(--muted); }

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--cream-deep);
  color: var(--navy-700);
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}
.carousel-btn--prev { left: -12px; }
.carousel-btn--next { right: -12px; }

/* --- roles table ---------------------------------------------------------- */
.panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 56px 48px;
}
.roles { width: 100%; border-collapse: collapse; margin-top: 32px; }
.roles th {
  text-align: left;
  font-size: 22px;
  font-weight: 700;
  color: var(--navy-500);
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.roles td { padding: 22px 0; border-bottom: 1px solid var(--line); font-size: 17px; }
.roles td:first-child { font-weight: 700; }
.roles td:last-child { text-align: right; }
.roles .go {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--cream-deep); color: var(--navy-700);
  display: inline-flex; align-items: center; justify-content: center;
}

/* --- menu page ------------------------------------------------------------ */
.menu-nav { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 48px; }
.menu-list { border-top: 1px solid var(--line); }
.menu-item {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: 22px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.menu-item .ph { aspect-ratio: 1/1; border-radius: 12px; }
.menu-item h3 { font-size: 19px; color: var(--ink); }
.menu-item p { font-size: 14px; color: var(--muted); margin-top: 4px; }
.menu-item__price { font-weight: 800; font-size: 18px; color: var(--navy-700); white-space: nowrap; }
.menu-cat { margin-top: 64px; }
.menu-cat:first-child { margin-top: 0; }
.menu-cat h2 { font-size: 34px; margin-bottom: 8px; }
.menu-cat__note { color: var(--muted); font-size: 15px; margin-bottom: 24px; }

/* --- data table (investor / gcg) ------------------------------------------ */
.dtable { width: 100%; border-collapse: collapse; }
.dtable th {
  text-align: left; font-size: 14px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--steel); padding: 0 16px 14px 0; border-bottom: 1px solid var(--line);
}
.dtable td { padding: 18px 16px 18px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.dtable td:first-child { font-weight: 700; color: var(--ink); }
.dtable .num { text-align: right; font-variant-numeric: tabular-nums; }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stat {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
}
.stat__value { font-size: 44px; font-weight: 800; color: var(--navy-700); letter-spacing: -0.03em; line-height: 1; }
.stat__label { margin-top: 12px; font-size: 15px; color: var(--muted); }

.doc-row {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 20px 0; border-bottom: 1px solid var(--line);
}
.doc-row strong { font-size: 17px; }
.doc-row small { display: block; color: var(--muted); font-weight: 400; font-size: 14px; margin-top: 4px; }

/* --- forms ---------------------------------------------------------------- */
.form { display: grid; gap: 18px; }
.field label { display: block; font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
/* border-radius 0, bukan 12px.

   Angka 12px ditulis tetap di sini — bukan lewat var(--r-sm) — jadi ia luput
   dari perombakan token 22 September dan tetap membulat sementara seluruh
   situs sudah persegi. Terukur di pratinjau checkout: kotak isian 12px
   berdampingan dengan tombol "Buat pesanan" bersudut nol.

   Ini menyentuh form Kontak yang sudah tayang juga, dan memang harus. */
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 0;
  font: inherit;
  font-size: 15px;
  background: var(--paper);
  color: var(--ink);
}
/* Fokus bergaris tinta, bukan --steel (yang kini sama dengan --muted dan
   nyaris tak terlihat di atas garis tepi abu). Cincin fokus yang tidak
   terlihat sama saja dengan tidak ada — dan ia satu-satunya penanda posisi
   bagi orang yang mengisi form dengan papan ketik. */
.field input:focus,
.field select:focus,
.field textarea:focus { outline: 2px solid var(--ink); outline-offset: 1px; border-color: var(--ink); }
.field textarea { min-height: 140px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* --- misc ----------------------------------------------------------------- */
.divider { height: 1px; background: var(--line); border: 0; margin: 0; }
.lead { font-size: 19px; color: var(--muted); max-width: 60ch; }
.text-list li { padding: 12px 0 12px 26px; border-bottom: 1px solid var(--line); position: relative; color: var(--muted); }
.text-list li::before { content: ""; position: absolute; left: 0; top: 21px; width: 10px; height: 2px; background: var(--navy-700); }
.text-list strong { color: var(--ink); }

.wa-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--navy-500);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  z-index: 60;
}
.wa-fab svg { width: 26px; height: 26px; }

/* --- responsive ----------------------------------------------------------- */
@media (max-width: 1080px) {
  .nav { display: none; }
  .nav.is-open {
    display: block;
    position: fixed;
    inset: var(--h-header) 0 auto 0;
    /* justify-self: stretch WAJIB di sini. .nav mewarisi justify-self: center
       dari tata letak header di layar lebar; pada kotak position:fixed,
       perataan-diri selain stretch membuat lebarnya shrink-to-fit lalu
       dipusatkan — left:0/right:0 berhenti merentangkannya. Gejalanya: laci
       menu tampil sebagai kolom putih sempit mengambang di tengah layar. */
    justify-self: stretch;
    width: 100%;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 8px 24px 20px;
    box-shadow: 0 18px 32px rgba(7, 26, 51, .10);
    max-height: calc(100vh - var(--h-header));
    overflow-y: auto;
  }
  .nav.is-open .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav.is-open .nav__list a {
    display: block; width: 100%;
    padding: 15px 0;
    font-size: 14px;
    border-bottom: 1px solid var(--line);
  }
  .nav.is-open .nav__list li:last-child a { border-bottom: 0; }
  /* .header__aside tidak perlu disetel di sini — sejak ikon keranjang masuk,
     ia sudah display:flex di semua lebar layar. Yang berubah cuma burgernya. */
  .burger { display: flex; }
  /* Footer lima kolom tidak muat di tablet; dua kolom lebih dulu, baru satu
     kolom di blok 820px di bawah. */
  .footer__grid { grid-template-columns: repeat(2, 1fr); gap: 36px 32px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .social-grid { grid-template-columns: repeat(3, 1fr); }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .values__track { grid-auto-columns: calc((100% - 24px) / 2); }
}

@media (max-width: 820px) {
  .section { padding: 56px 0; }
  .pernyataan { padding: 56px 24px; }
  .story__grid,
  .app__grid,
  .head,
  .footer__grid,
  .grid-3,
  .grid-2,
  .modal__box { grid-template-columns: 1fr; }
  .head__note { justify-self: start; }
  .hero__nav { display: none; }
  /* min-height sengaja TIDAK diatur di sini — rasio 2:1 yang menentukan
     tingginya, dan itulah yang membuat potongan fotonya sama dengan desktop. */
  .page-hero .shell { padding-top: 18px; padding-bottom: 18px; }
  /* Rasio 2:1 tetap TIDAK diutak-atik di sini — itu keputusan lama yang masih
     berlaku dan alasannya ada di komentar .page-hero. Konsekuensinya: pada
     lebar 375px heronya cuma setinggi ~187px, jadi yang harus mengalah adalah
     ukuran hurufnya, bukan rasionya. Angka di bawah dipilih supaya kicker +
     judul dua baris + satu baris deskripsi masih muat di dalam 187px. */
  .page-hero__panel {
    width: 100%;
    min-width: 0;
    max-width: none;
    padding: 0;
  }
  .page-hero__kicker { margin-bottom: 6px; }
  .page-hero__kicker span { font-size: 12px; }
  .page-hero__panel h1 { font-size: clamp(22px, 6.4vw, 34px); -webkit-line-clamp: 2; }
  .page-hero__panel p:not(.page-hero__kicker) { margin-top: 6px; font-size: 13px; -webkit-line-clamp: 1; }
  .grid-4 { grid-template-columns: 1fr; }
  .social-grid { grid-template-columns: repeat(2, 1fr); }
  .values__track { grid-auto-columns: 84%; }
  .carousel-btn { display: none; }
  .promo-panel { padding: 48px 20px 56px; }
  .panel { padding: 32px 22px; }
  .store-card { grid-template-columns: 1fr; }
  .store-card .ph { aspect-ratio: 16/9; }
  .stat-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .menu-item { grid-template-columns: 64px 1fr auto; }
  .phones { grid-template-columns: 1fr; max-width: 300px; margin: 0 auto; }
  .phone:first-child { display: none; }
}

/* --- penyesuaian versi PHP -------------------------------------------------- */

/* .chip kini berupa tautan, bukan tombol.

   gap WAJIB ada di sini. Sebagai inline-flex, nama kategori dan
   <span class="chip__n"> jadi dua item flex terpisah, dan spasi di antara
   keduanya di markup runtuh begitu saja — terukur di pratinjau sebagai
   "KEMEJA8", "GAMIS5". Sebelumnya luput karena huruf kecil menyamarkannya;
   dengan chip huruf besar, angkanya terbaca sebagai bagian dari nama. */
a.chip { display: inline-flex; align-items: center; gap: 7px; }

/* pesan saat daftar kosong */
.cart-empty { text-align: center; color: var(--muted); padding: 72px 0; font-size: 15px; }

/* ==========================================================================
   Aturan kolom: 4 per baris untuk desktop dan tablet, 2 per baris untuk mobile
   Blok ini sengaja diletakkan paling akhir agar menimpa aturan sebelumnya.
   ========================================================================== */

/* .prod-grid dan .prod-grid--3 baru di sini, beda dari .grid-4/.grid-3/
   .social-grid/.stat-grid/.assure yang masing-masing sudah punya
   "display: grid" dari aturan dasarnya sendiri — makanya keduanya perlu
   dinyatakan eksplisit di sini, bukan cuma menimpa jumlah kolomnya saja. */
.prod-grid,
.prod-grid--3 { display: grid; gap: 24px; margin-top: 56px; }

.prod-grid,
.prod-grid--3,
.grid-4,
.grid-3,
.social-grid,
.stat-grid,
.assure { grid-template-columns: repeat(4, 1fr); }

/* Kutipan testimoni dikecualikan: teks panjang jadi tidak terbaca
   kalau dipaksa empat kolom. */
.testi__grid { grid-template-columns: repeat(3, 1fr); }

/* Grid produk (.prod-grid): 4 kolom desktop, 3 tablet, 2 mobile — beda
   sengaja dari .grid-4 (dipakai Journal dkk.) yang tetap 4 sampai ke
   breakpoint mobile. */
@media (max-width: 1080px) and (min-width: 768px) {
  .prod-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
  .prod-grid,
  .prod-grid--3,
  .grid-4,
  .grid-3,
  .social-grid,
  .stat-grid,
  .assure,
  .logo-strip { grid-template-columns: repeat(2, 1fr); }

  .testi__grid { grid-template-columns: 1fr; }

  /* tata letak dua kolom (form berdampingan tabel) tetap menumpuk */
  .grid-2 { grid-template-columns: 1fr; }
}

/* Kartu hero versi ponsel. Dipisah dari breakpoint 820px karena di tablet
   heronya masih setinggi ~384px dan kartu bisa tampil utuh; di ponsel
   tingginya cuma ~188px (konsekuensi rasio 2:1 yang dikunci), jadi
   deskripsi harus disembunyikan supaya kartunya tidak menelan fotonya. */
/* Ponsel. Angka di sini sisa dari hero versi kartu gelap (panel 72% berlatar,
   judul 18px, deskripsi disembunyikan) dan sudah disesuaikan: tanpa kartu,
   panelnya selebar shell dan judulnya boleh jauh lebih besar.

   Deskripsi tetap DISEMBUNYIKAN di bawah 600px, dan itu keputusan sadar, bukan
   sisa yang terlewat. Hero terkunci rasio 2:1, jadi pada lebar 375px tingginya
   cuma 188px; diukur di pratinjau, kicker + judul dua baris sudah memakai 84px
   dari 188px itu. Menambahkan satu baris deskripsi menyisakan celah di bawah
   teks yang terlalu rapat ke tepi foto. Judul dan kickernya sudah menyampaikan
   hal yang sama. */
@media (max-width: 600px) {
  .page-hero .shell { padding-top: 14px; padding-bottom: 14px; }
  .page-hero__panel {
    width: 100%;
    max-width: none;
    padding: 0;
  }
  .page-hero__kicker { margin-bottom: 4px; }
  .page-hero__kicker span { font-size: 12px; }
  .page-hero__panel h1 { font-size: clamp(22px, 6.4vw, 30px); }
  .page-hero__panel p:not(.page-hero__kicker) { display: none; }
}

/* --- tombol tutup pada banner pengumuman ------------------------------------ */
.announce .shell { position: relative; padding-right: 56px; }
.announce__close {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  opacity: .7;
}
.announce__close:hover { opacity: 1; background: rgba(255, 255, 255, .14); }

@media (max-width: 767px) {
  .announce .shell { padding-right: 48px; }
  .announce__close { right: 12px; }
}

/* --- galeri foto produk (produk-detail.php) ---------------------------------
   Thumbnail jadi kolom sempit di KIRI, gambar utama mengisi sisanya di
   kanan — pola halaman produk standar, bukan baris di bawah gambar. */
.produk-galeri { display: flex; gap: 14px; }
.produk-galeri__rel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
  width: 76px;
}
.produk-galeri__t {
  width: 76px; height: 96px;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--line);
  padding: 0;
  background: none;
  cursor: pointer;
}
.produk-galeri__t.is-aktif { border-color: var(--navy-700); border-width: 2px; }
.produk-galeri__t img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Latar abu sama dengan kartu katalog, supaya foto produk yang rasionya tidak
   persis 3:4 tidak menyisakan pita putih yang tampak seperti gambar gagal muat. */
.produk-galeri__utama { flex: 1; min-width: 0; background: var(--kanvas); }

@media (max-width: 767px) {
  /* Di layar sempit thumbnail turun ke bawah gambar, mendatar — kolom
     sempit di samping tidak muat lagi. */
  .produk-galeri { flex-direction: column-reverse; }
  .produk-galeri__rel { flex-direction: row; width: auto; }
  .produk-galeri__t { width: 64px; height: 64px; }
}

/* --- bar filter koleksi.php, menempel di bawah header saat digulung --------
   Satu baris: tiap facet (Urutkan/Kategori/Artikel/Ukuran/Warna) jadi
   <details> ringkas yang membuka panel pilihan di bawahnya saat diklik —
   HTML asli, tanpa JavaScript, dan otomatis rapat jadi satu deret. */
.koleksi-filter {
  position: sticky;
  top: var(--h-header);
  z-index: 30;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
}
.koleksi-filter__baris {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.filter-dd { position: relative; }
.filter-dd summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 0;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.filter-dd summary::-webkit-details-marker { display: none; }
.filter-dd summary::after { content: '\25BE'; font-size: 11px; color: var(--muted); }
.filter-dd[open] summary { border-color: var(--navy-700); color: var(--navy-700); }
.filter-dd__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 14px;
  min-width: 260px;
  max-width: 320px;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* --- video produk (produk-detail.php) ---------------------------------------- */
.produk-video {
  margin-top: 14px;
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-sm);
  overflow: hidden;
}
.produk-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --- pilihan ukuran/warna (produk-detail.php) ------------------------------- */
.varian-opsi { margin-top: 26px; }
.varian-opsi__label { display: block; font-size: 14px; color: var(--ink); margin-bottom: 12px; }

.varian-ukuran { display: flex; flex-wrap: wrap; gap: 8px; }
.varian-ukuran a,
.varian-ukuran span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 68px; height: 52px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 0;
  color: var(--ink); text-decoration: none; font-size: 14px;
}
.varian-ukuran a:hover { border-color: var(--ink); }
/* Aktif = GARIS tepi gelap, bukan kotak terisi. Kotak terisi gelap terbaca
   sebagai tombol yang siap ditekan; padahal ukuran yang sedang dipilih
   justru satu-satunya yang TIDAK perlu diklik lagi. */
.varian-ukuran a.is-aktif { border-color: var(--ink); border-width: 2px; background: none; color: var(--ink); }

/* Ukuran habis tetap DITAMPILKAN, dicoret menyilang — tidak dihilangkan.
   Ini menyimpang dari keputusan #1 di YATEER-BRIEF.md ("kombinasi yang tidak
   diproduksi cukup tidak punya baris") dan penyimpangannya disengaja untuk
   sumbu ukuran: pembeli yang tidak menemukan XL tidak bisa membedakan
   "sedang habis" dari "memang tidak pernah dibuat". Yang pertama membuatnya
   menunggu restock, yang kedua membuatnya pergi. Rentang ukuran penuh
   datang dari daftar ukuran produk, coretannya dari stok varian. */
.varian-ukuran .is-habis {
  color: var(--muted);
  cursor: not-allowed;
  /* Coretannya memakai --muted, bukan --line. Diukur di pratinjau: dengan
     --line (#e5e5e5) garisnya nyaris tidak terlihat di atas kotak putih, jadi
     ukuran habis tampak sekadar redup — persis salah paham yang seharusnya
     dicegah oleh coretan ini. */
  background-image: linear-gradient(to top right, transparent calc(50% - 1px), var(--muted) calc(50% - 1px), var(--muted) calc(50% + 1px), transparent calc(50% + 1px));
}

.varian-warna { display: flex; flex-wrap: wrap; gap: 10px; }
.varian-warna a {
  display: block; width: 56px; height: 56px;
  border-radius: 0; overflow: hidden;
  border: 1px solid var(--line);
}
.varian-warna a:hover { border-color: var(--muted); }
.varian-warna a.is-aktif { border-color: var(--ink); border-width: 2px; }
.varian-warna img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- kolom keterangan produk (produk-detail.php) ---------------------------- */
.pdp__judul { font-size: clamp(24px, 2.6vw, 34px); text-transform: uppercase; letter-spacing: .01em; line-height: 1.22; }
.pdp__harga { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; margin-top: 20px; font-size: 22px; }
.pdp__harga-coret { font-size: 18px; color: var(--muted); text-decoration: line-through; }
.pdp__harga--jual { color: var(--jual); }
/* Peringatan stok: oranye dan miring, bukan merah. Merah di halaman ini sudah
   dipakai harga diskon; memakainya lagi untuk stok membuat dua pesan berbeda
   berteriak dengan suara yang sama. */
.pdp__stok { margin-top: 14px; font-size: 14px; font-style: italic; color: var(--awas); }
.pdp__stok--habis { color: var(--muted); font-style: normal; }
.pdp__garis { border: 0; border-top: 1px solid var(--line); margin: 26px 0; }

/* Tautan panduan ukuran: teks bergaris bawah berikon, sejajar harga. */
.panduan { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.panduan svg { width: 18px; height: 18px; flex-shrink: 0; }
.panduan:hover { color: var(--muted); }

/* --- tambah ke keranjang (produk-detail.php) --------------------------------
   Kotak jumlah dan tombol berdampingan, tombolnya mengisi sisa lebar. Kotak
   jumlah dibuat setinggi tombol (60px) supaya keduanya duduk pada satu garis
   dasar — kotak yang lebih pendek membuat barisnya terlihat miring. */
.pdp__beli { margin-top: 32px; }
.pdp__jumlah { display: flex; gap: 10px; align-items: stretch; }
.pdp__jumlah input {
  width: 84px;
  flex-shrink: 0;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 0;
  font: inherit;
  font-size: 15px;
  text-align: center;
  color: var(--ink);
  background: var(--paper);
}
.pdp__jumlah input:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
/* btn--blok memasang width:100%; di dalam flex itu cukup untuk mengisi sisa. */
.pdp__jumlah .btn--blok { flex: 1; min-width: 0; }

/* --- tautan marketplace (produk-detail.php) --------------------------------- */
.pdp__pasar { margin-top: 24px; display: grid; gap: 10px; }
.pdp__pasar-label {
  margin: 0;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- akordeon keterangan ----------------------------------------------------
   <details>/<summary> asli, bukan tiruan berbasis JavaScript. Kalau skripnya
   gagal dimuat, akordeon bawaan peramban tetap bisa dibuka-tutup — dan isinya
   (bahan, ukuran, cara rawat) termasuk keterangan yang paling sering dicari
   pembeli busana, jadi ia tidak boleh bergantung pada skrip. */
.lipat { border-top: 1px solid var(--line); }
.lipat:last-of-type { border-bottom: 1px solid var(--line); }
.lipat > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  font-size: 14px;
  letter-spacing: .02em;
  color: var(--ink);
}
.lipat > summary::-webkit-details-marker { display: none; }
/* Penanda +/− dibuat dari isi pseudo-element, bukan gambar atau SVG: ia harus
   berubah mengikuti atribut [open] yang diurus peramban sendiri. */
.lipat > summary::after { content: "+"; font-size: 20px; line-height: 1; color: var(--muted); }
.lipat[open] > summary::after { content: "\2212"; }
.lipat__isi { padding: 0 0 24px; font-size: 15px; line-height: 1.7; color: var(--muted); }
.lipat__isi p { margin: 0 0 1em; }
.lipat__isi p:last-child { margin-bottom: 0; }

/* Blok "Complete the Look" dari situs referensi sengaja TIDAK ditiru.

   Di sana isinya kurasi manual — celana dan kaus yang dipilih orang untuk
   menemani kemeja itu. Yateer belum punya data semacam itu; satu-satunya
   daftar yang tersedia adalah produkTerkait(), yaitu "produk lain di kategori
   yang sama", dan itu sudah tampil sebagai grid di bawah halaman. Memasangnya
   dua kali pada satu halaman dengan dua judul berbeda bukan fitur tambahan,
   cuma pengulangan yang menyamar. Pasang kalau kurasinya sudah ada datanya. */

/* --- hanya untuk pembaca layar ----------------------------------------------
   Label yang perlu dibacakan tapi tidak perlu terlihat — mis. "Jumlah Kemeja
   Flanel" pada kotak angka di keranjang, yang bagi mata sudah jelas dari
   posisinya di samping nama barang, tapi bagi pembaca layar cuma terdengar
   sebagai "kotak angka" tanpa keterangan.

   clip-path + ukuran 1px, bukan display:none maupun visibility:hidden —
   keduanya justru MENGHILANGKAN elemen dari pembaca layar, yang persis
   kebalikan dari yang diinginkan. */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- keranjang --------------------------------------------------------------
   Dua kolom: daftar barang di kiri, ringkasan lengket di kanan. Ringkasan
   dibuat sticky supaya total dan tombol pesan tetap terlihat saat daftar
   barangnya panjang — di ponsel ia turun ke bawah daftar dan sticky dilepas. */
.kj {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 56px;
  align-items: start;
  margin-top: 40px;
}

.kj__kabar {
  margin-top: 20px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink);
}
.kj__kabar--awas { border-color: var(--awas); color: var(--awas); }

/* Satu baris barang: gambar, keterangan, kendali. Dipisah garis rambut, bukan
   kotak berbingkai — kosakata bentuk yang sama dengan seluruh situs. */
.kj__baris {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.kj__baris:first-child { border-top: 1px solid var(--line); }
/* Baris yang stoknya habis diredupkan, tapi TIDAK disembunyikan: pembeli
   perlu melihat barangnya masih ada di keranjang supaya tahu apa yang harus
   dihapus sebelum melanjutkan. */
.kj__baris--habis .kj__gambar,
.kj__baris--habis .kj__isi { opacity: .5; }

.kj__gambar { display: block; }
.kj__media { width: 96px; aspect-ratio: 3 / 4; object-fit: cover; background: var(--kanvas); border-radius: 0; }

.kj__isi { min-width: 0; }
.kj__nama {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.45;
}
.kj__varian { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.kj__harga { margin: 10px 0 0; font-size: 14px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.kj__stok { margin: 10px 0 0; font-size: 13px; font-style: italic; color: var(--awas); }
.kj__stok--habis { color: var(--jual); font-style: normal; }

.kj__kendali { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.kj__jumlah { display: flex; align-items: center; gap: 8px; }
.kj__jumlah input {
  width: 72px;
  height: 44px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 0;
  font: inherit;
  font-size: 14px;
  text-align: center;
  color: var(--ink);
  background: var(--paper);
}
.kj__jumlah input:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.kj__subtotal { margin: 0; font-size: 15px; white-space: nowrap; }

/* "Hapus" sebagai teks bergaris bawah, bukan tombol merah. Menghapus satu
   baris keranjang bukan tindakan berbahaya — ia gampang dibatalkan dengan
   menambahkannya lagi — dan tombol merah di samping setiap barang membuat
   halaman terbaca seperti daftar peringatan. */
.kj__hapus {
  font-size: 13px;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0;
}
.kj__hapus:hover { color: var(--jual); }

.kj__ringkas {
  position: sticky;
  top: calc(var(--h-header) + 24px);
  border: 1px solid var(--line);
  padding: 28px;
}
.kj__ringkas-judul {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.kj__baris-nilai {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 12px;
  font-size: 14px;
}
.kj__baris-nilai--samar { color: var(--muted); }
.kj__total {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  font-size: 17px;
}
.kj__catatan { margin: 14px 0 0; font-size: 13px; line-height: 1.6; color: var(--muted); }
.kj__lanjut { display: inline-block; margin-top: 20px; font-size: 14px; color: var(--ink); }
.kj__lanjut:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --- checkout ---------------------------------------------------------------
   Dua kolom isian di dalam kolom kiri .kj; kotak yang butuh lebar penuh
   (alamat, surel) memakai .ck__lebar. */
.ck__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ck__lebar { grid-column: 1 / -1; }
.ck__bantu { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); line-height: 1.5; }

/* Satu baris barang di ringkasan pesanan. Nama dibiarkan membungkus, harga
   tidak — harga yang patah jadi dua baris membuat kolom kanan terbaca sebagai
   dua angka berbeda. */
.ck__item {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.5;
}
.ck__item > span:last-child { white-space: nowrap; }
.ck__item em { display: block; font-style: normal; font-size: 13px; color: var(--muted); }

/* --- pilihan pengiriman (checkout) ------------------------------------------
   Radio, bukan dropdown: jumlah layanannya sedikit dan harganya harus terbaca
   sekaligus. Dropdown menyembunyikan perbandingan harga di balik satu klik,
   padahal membandingkan harga itulah pekerjaan pembeli di baris ini.

   Radio bawaannya disembunyikan dari mata (bukan dari pembaca layar — lihat
   .sr) dan yang menandai pilihan adalah garis tepi tinta pada kotaknya. Pola
   bentuk yang sama dengan kotak ukuran di halaman produk. */
.ok__daftar { display: grid; gap: 8px; }
.ok__opsi {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: border-color .15s linear;
}
.ok__opsi:hover { border-color: var(--muted); }
/* :has() memilih label berdasarkan keadaan radio di dalamnya. Peramban yang
   belum mendukungnya tetap aman: radionya sendiri masih terlihat lewat
   outline fokus bawaan, dan pilihannya tetap terkirim — yang hilang cuma
   penebalan garis tepinya. */
.ok__opsi:has(input:checked) { border-color: var(--ink); border-width: 2px; padding: 15px 17px; }
.ok__opsi:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.ok__opsi input { width: 16px; height: 16px; flex-shrink: 0; margin: 0; accent-color: var(--ink); }
.ok__isi { flex: 1; min-width: 0; }
.ok__nama { display: block; font-size: 14px; letter-spacing: .04em; }
.ok__est { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }
.ok__tarif { font-size: 15px; white-space: nowrap; }

/* --- halaman pesanan selesai & lacak ---------------------------------------- */
.ps__eyebrow {
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
/* Nomor pesanan dicetak besar dan diberi kotak. Ini satu-satunya benda di
   halaman yang harus disalin atau difoto pembeli — kalau ia tenggelam di
   antara paragraf, ia akan hilang, dan pembeli yang kehilangan nomornya tidak
   punya cara lain membuka pesanannya. */
.ps__nomor {
  border: 1px solid var(--ink);
  padding: 22px 24px;
  margin-top: 24px;
  text-align: center;
}
.ps__nomor span { display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ps__nomor strong {
  display: block;
  margin: 10px 0 8px;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 400;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}
.ps__nomor small { display: block; font-size: 13px; color: var(--muted); }

.ps__subjudul {
  margin-top: 36px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
}
.ps__langkah { margin: 16px 0 0; padding-left: 22px; }
.ps__langkah li { margin-bottom: 12px; font-size: 15px; line-height: 1.65; color: var(--muted); }
.ps__langkah strong { color: var(--ink); }
/* Kotak bayar Midtrans. Bergaris TINTA, bukan --line seperti kotak rekening
   di bawahnya — keduanya berdampingan di halaman yang sama, dan yang satu
   adalah tindakan utama sedangkan yang lain cadangan. Perbedaan berat garis
   yang menyampaikan itu tanpa perlu satu kata pun. */
.ps__bayar { margin-top: 28px; border: 1px solid var(--ink); padding: 24px; }
.ps__bayar-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin: 0 0 18px;
  font-size: 14px;
}
.ps__bayar-total strong { font-size: 22px; font-weight: 400; white-space: nowrap; }

.ps__bank { margin-top: 24px; border: 1px solid var(--line); padding: 24px; }
.ps__ringkas { margin-top: 16px; }
.ps__alamat { margin: 12px 0 0; font-size: 15px; line-height: 1.7; color: var(--muted); }

/* Status pesanan di halaman lacak. Warna hanya untuk dua keadaan yang benar-
   benar berbeda artinya: dibatalkan (merah) dan selesai (hijau tua). Sisanya
   hitam — memberi warna berbeda pada setiap tahap membuat halaman terbaca
   seperti papan peringatan, padahal "sedang disiapkan" adalah kabar biasa. */
.lc__status {
  margin: 20px 0 0;
  padding: 16px 20px;
  border: 1px solid var(--line);
  font-size: 17px;
  text-align: center;
}
.lc__status--batal { border-color: var(--jual); color: var(--jual); }
.lc__status--selesai { border-color: #1f7a3d; color: #1f7a3d; }

@media (max-width: 560px) {
  .ck__grid { grid-template-columns: 1fr; gap: 16px; }
}

/* --- ikon keranjang di header ------------------------------------------------ */
.keranjang-ikon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--ink);
}
.keranjang-ikon svg { width: 22px; height: 22px; }
.keranjang-ikon:hover { opacity: .65; }
/* Angka jumlah. min-width + padding, bukan lebar tetap: keranjang berisi 12
   potong tidak boleh membuat angkanya terpotong jadi "1". */
.keranjang-ikon__n {
  position: absolute;
  top: 3px;
  right: 0;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--jual);
  color: #fff;
  font-size: 10px;
  line-height: 17px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .kj { grid-template-columns: 1fr; gap: 32px; }
  .kj__ringkas { position: static; }
}
@media (max-width: 560px) {
  /* Kendali turun ke bawah keterangan; tiga kolom tidak muat di 375px. */
  .kj__baris { grid-template-columns: 72px 1fr; gap: 16px; }
  .kj__media { width: 72px; }
  .kj__kendali { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
}

/* --- halaman Tentang --------------------------------------------------------
   Dua ukuran judul saja, dipakai berulang. Sebelumnya halaman ini menyetel
   font-size lewat atribut style= di empat tempat dengan tiga angka berbeda
   (38px, 38px, 26px) — angka dari tata rupa lama yang bobotnya masih 800. */
.tt__judul {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.tt__subjudul {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
}
/* .lead bawaan 60ch dan rata kiri. Di kolom sempit yang dipusatkan, 56ch
   lebih rapat dan `margin: auto` di markup yang memusatkannya. Pemilih
   berbasis atribut style= sengaja TIDAK dipakai di sini — mencocokkan isi
   atribut style adalah aturan yang diam-diam rusak begitu seseorang mengubah
   spasi atau urutan properti di markup. */
.shell--sempit .lead { max-width: 56ch; }

/* --- lookbook ---------------------------------------------------------------
   Judul terpusat berbobot ringan lalu grid tiga kolom foto potret yang rapat,
   mengikuti tenuedeattire.com/pages/lookbook.

   Judulnya jauh lebih besar daripada .head di halaman katalog, dan itu
   disengaja: di katalog judul seksi cuma penanda tempat karena fotonya yang
   harus bicara, sedangkan di sini judul album ADALAH keterangan satu-satunya
   yang dipunyai halaman ini. Tidak ada tanggal, penulis, atau ringkasan yang
   bisa menjelaskan album selain namanya. */
.lb__judul {
  text-align: center;
  font-size: clamp(32px, 4.4vw, 56px);
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.lb__catatan {
  text-align: center;
  margin: 16px auto 0;
  max-width: 56ch;
  font-size: 16px;
  color: var(--muted);
}

/* gap 14px, bukan 24px seperti .prod-grid. Foto lookbook dibaca sebagai satu
   bentangan, bukan sebagai kartu-kartu terpisah — jarak yang lebar memotong
   bentangan itu jadi potongan-potongan. */
.lb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 48px;
}

.lb-kartu { display: block; color: inherit; }
.lb-kartu__media { aspect-ratio: 3 / 4; border-radius: 0; background: var(--kanvas); object-fit: cover; }
.lb-kartu:hover .lb-kartu__media { opacity: .88; }
.lb-kartu:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.lb-kartu__isi { padding: 16px 0 0; }
.lb-kartu__judul {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.3;
}
.lb-kartu__catatan { margin: 8px 0 0; font-size: 14px; color: var(--muted); line-height: 1.5; }

/* Foto di dalam satu album. <figure> tanpa margin bawaan peramban. */
.lb-foto { margin: 0; position: relative; display: block; color: inherit; }
.lb-foto__media { width: 100%; aspect-ratio: 3 / 4; border-radius: 0; background: var(--kanvas); object-fit: cover; }
.lb-foto--tautan:hover .lb-foto__media { opacity: .88; }
.lb-foto--tautan:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.lb-foto__label {
  display: block;
  padding: 12px 0 0;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
}
.lb-foto--tautan:hover .lb-foto__label { text-decoration: underline; text-underline-offset: 3px; }

/* Remah di halaman lookbook duduk di tengah, di atas judul — bukan rata kiri
   seperti di halaman produk, karena seluruh kepala halaman ini terpusat.

   Hanya justify-content yang disetel di sini. Aturan .remah sendiri ada jauh
   di bawah dalam berkas ini dan spesifisitasnya sama (sama-sama satu kelas),
   jadi apa pun yang keduanya atur akan dimenangkan .remah. Membiarkannya
   mengurus jarak dan ukuran huruf justru yang diinginkan — yang khas halaman
   ini cuma perataannya. */
.remah--tengah { justify-content: center; }

@media (max-width: 820px) {
  .lb-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 32px; }
}
@media (max-width: 480px) {
  /* Satu kolom di ponsel. Foto lookbook adalah citra mode yang harus terbaca
     detail bahannya; dua kolom pada lebar 375px menyisakan 180px per foto,
     dan pada ukuran itu lookbook berhenti jadi lookbook. */
  .lb-grid { grid-template-columns: 1fr; }
}

/* --- tombol kembali ke atas -------------------------------------------------
   Duduk persis di atas FAB WhatsApp. Halaman katalog bisa sangat panjang
   (koleksi.php tanpa halaman berikutnya), dan di ponsel menggulung balik ke
   filter di puncak halaman itu perjalanan yang mahal. Disembunyikan sampai
   pengunjung benar-benar menggulung — lihat main.js. */
.ke-atas {
  position: fixed;
  right: 24px;
  bottom: 96px;
  z-index: 45;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s linear, visibility .18s linear;
}
/* Tanpa FAB WhatsApp, tidak ada yang perlu dihindari di bawahnya. */
.ke-atas--sendiri { bottom: 24px; }
.ke-atas.is-tampil { opacity: 1; visibility: visible; }
.ke-atas:hover { border-color: var(--ink); }
.ke-atas svg { width: 18px; height: 18px; }

/* Badge "Hemat X%" pada kartu produk DIHAPUS, bukan cuma disembunyikan —
   aturannya dan markup-nya di kartuProduk() ikut dibuang.

   Alasannya: diskon sudah tersampaikan dua kali di kartu yang sama (harga
   merah + harga lama dicoret). Badge menjadi pengulangan ketiga yang
   menutupi sudut foto, dan di grid empat kolom sederetan kotak merah
   membuat halaman terbaca seperti lapak flash sale, bukan katalog busana.
   Situs referensi pun tidak memakainya: kotak merah "START FROM 177K" di
   sana bagian dari foto bannernya, bukan komponen yang ditempel kode. */
.card { position: relative; }

/* --- galeri gaya hidup beranda (index.php), pakai ulang mekanisme
   [data-carousel] yang tadinya untuk karusel nilai kerja -------------------- */
.galeri-carousel { position: relative; }
.galeri-carousel .values__track { grid-auto-columns: 78%; gap: 20px; }
.galeri-foto { margin: 0; }
.galeri-foto__img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--r-lg); display: block; }
.galeri-foto figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); }

/* ==========================================================================
   Variabel yang dikendalikan panel admin
   Nilai di bawah ini hanya cadangan; :root dari <style> yang dicetak PHP
   akan menimpanya bila pengaturan sudah diisi.
   ========================================================================== */
:root {
  /* Judul memakai Helvetica, teks memakai Plus Jakarta Sans. Pembagiannya
     disengaja: Helvetica memberi nama produk bentuk netral dan sedikit dingin
     yang tepat untuk katalog busana, sementara Plus Jakarta Sans punya tinggi-x
     yang lebih besar dan jauh lebih nyaman untuk paragraf panjang di Journal.

     Nilai judul ditulis sebagai tumpukan penuh, bukan satu nama: Helvetica
     tidak ada di Windows, dan Arial adalah padanan bermetrik sama sehingga
     tata letak tidak bergeser saat berkasnya ditukar. Nilai yang sama
     dihasilkan fontSistem() di inc/admin.php — dua tempat ini harus tetap
     sejalan. */
  --font-judul: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-teks: 'Plus Jakarta Sans';
  --header-bg: #ffffff;
  --header-teks: #1a1a1a;
  --footer-bg: #ffffff;
  --footer-teks: #1a1a1a;
  --logo-tinggi: 32px;
}

body { font-family: var(--font-teks), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
h1, h2, h3, h4,
.brand__name,
.btn,
.nav__list a { font-family: var(--font-judul), -apple-system, BlinkMacSystemFont, sans-serif; }

.header { background: var(--header-bg); }
.header .brand__name,
.header .nav__list a,
.header .keranjang-ikon,
.header .cart-btn { color: var(--header-teks); }
.header .cart-btn { border-color: var(--header-teks); }
/* Warna burger diwariskan lewat color, bukan ditimpa per-batang lewat
   background. Kalau ditimpa per-batang, penimpa itu juga mengalahkan
   `background: transparent` pada keadaan terbuka — batang tengahnya tetap
   terlihat dan silangnya jadi bintang tiga garis, bukan X. */
.header .burger { color: var(--header-teks); }
.header--bergaris { border-bottom-color: var(--line); }
.header--lepas { position: static; }

.footer { background: var(--footer-bg); }
.footer,
.footer .footer__line,
.footer h3 { color: var(--footer-teks); }

/* Logo unggahan.
   var() diberi nilai cadangan langsung, supaya tingginya tetap terkendali
   meski --logo-tinggi belum sempat tercetak. max-height dan max-width adalah
   pagar terakhir: berapa pun ukuran asli berkas, logo tidak bisa merusak
   tata letak header. */
.brand__logo {
  height: var(--logo-tinggi, 32px);
  width: auto;
  max-height: 56px;
  max-width: 240px;
  object-fit: contain;
  display: block;
}
.brand { min-width: 0; overflow: hidden; }
.footer .brand__logo { max-height: 48px; }

/* gambar dari pustaka media */
.gbr { width: 100%; height: auto; border-radius: var(--r-lg); object-fit: cover; }

/* Foto latar hero HARUS setinggi heronya.

   Kenapa perlu ditulis ulang di sini: .gbr adalah utilitas umum yang duduk
   jauh DI BAWAH aturan komponen dalam berkas ini, dan spesifisitasnya sama
   (sama-sama satu kelas). Yang menang jadi yang terakhir — `.gbr { height:
   auto }` mengalahkan `.page-hero__media { height: 100% }`.

   Akibatnya tidak kelihatan seperti bug tata letak, tapi fatal untuk titik
   fokus: fotonya dirender setinggi rasio aslinya, bukan setinggi hero, jadi
   kotak gambar dan kotak sumber punya rasio yang sama persis dan
   `object-fit: cover` tidak punya apa pun untuk dipotong. Tanpa potongan,
   `object-position` tidak berpengaruh sama sekali. Terukur di 1280px: foto
   4:3 dirender 1280x960 di dalam hero setinggi 460 — 500px bagian bawahnya
   cuma terpotong `overflow: hidden`, selalu dari atas, apa pun titik
   fokusnya. Di 375px kebalikannya: foto cuma 375x281 di hero setinggi 360,
   menyisakan 79px jalur kosong di bawah.

   border-radius ikut dikembalikan ke 0 — var(--r-lg) dari .gbr membulatkan
   sudut foto yang seharusnya rata penuh ke tepi layar. */
.gbr.page-hero__media,
.gbr.hero__media {
  height: 100%;
  border-radius: 0;
}
/* Harus sama persis dengan .card__media milik blok penampung (3/4, --r-sm).
   Sebelumnya foto sungguhan dipaksa 4/3 (lanskap) sementara penampungnya 3/4
   (potret), jadi tinggi kartu berbeda-beda dalam satu grid tergantung produk
   mana yang sudah punya foto. */
.gbr.card__media { border-radius: var(--r-sm); aspect-ratio: 3 / 4; }
.menu-item .gbr { aspect-ratio: 1 / 1; border-radius: 12px; }
.store-card .gbr { aspect-ratio: 1 / 1; border-radius: 12px; }
.gbr.ph--square { aspect-ratio: 1 / 1; }
.gbr.ph--wide { aspect-ratio: 16 / 9; }

/* Gambar sungguhan di dalam kolase hero, sejajar dengan blok penggantinya. */
.collage .gbr {
  aspect-ratio: auto;
  height: 100%;
  min-height: 150px;
  border-radius: 12px;
}
.collage > *:last-child { grid-row: span 2; }

/* ============================================================================
   Sisa modul blog yang ternyata BUKAN milik blog

   Blok "Modul blog" (215 baris: .sorot*, .artikel*, .tetangga*, .card__label)
   dibuang 23 September 2026 bersama berita.php dan berita-detail.php. Lima
   aturan di bawah ikut tertulis di sana karena kebetulan lahir bersamaan —
   dan ketahuan saat diperiksa satu per satu sebelum blok itu dipotong, bukan
   sesudahnya.

   Menghapus blok itu bulat-bulat akan mencopot gaya SETIAP kartu produk di
   situs: .card--tautan tidak didefinisikan di tempat lain mana pun.
   ========================================================================== */

/* Kolom baca. Lebar 760px kira-kira 70 karakter per baris — batas nyaman
   sebelum mata kesulitan menemukan awal baris berikutnya.
   Dipakai keranjang, checkout, pesanan-selesai, lacak, dan tentang. */
.shell--sempit { max-width: 760px; }

/* Kartu yang seluruh badannya satu <a>. Dipakai kartuProduk(). */
.card--tautan { color: inherit; text-decoration: none; }
.card--tautan .card__media { transition: opacity .15s linear; }
.card--tautan:hover .card__media { opacity: .85; }
.card--tautan:focus-visible { outline: 2px solid var(--navy-700); outline-offset: 3px; }

/* baseline, bukan center: harga sekarang dan harga coret beda ukuran huruf,
   jadi yang harus sejajar adalah garis duduk hurufnya. */
.card__meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 8px; }

/* Angka jumlah di dalam chip penyaring. Dipakai produk.php, koleksi.php,
   dan admin/pesanan.php. */
.chip__n { font-variant-numeric: tabular-nums; opacity: .65; }

/* Remah halaman. Dipakai produk-detail.php dan lookbook-detail.php —
   .remah--tengah di bagian lookbook bersandar pada aturan ini.
   Reguler dan sewarna tinta, bukan biru tebal. Remah adalah jalan pulang,
   bukan ajakan — dan --aksi sekarang warna tombol, jadi remah biru tebal
   terbaca sepenting tombol beli di halaman yang sama. */
.remah { display: flex; gap: 10px; font-size: 14px; color: var(--muted); margin-bottom: 24px; }
.remah a { color: var(--ink); font-weight: 400; }
.remah a:hover { text-decoration: underline; text-underline-offset: 3px; }