/* =============================================================================
   tema-nusantara.css  -  arah desain A: Hangat & Lokal
   Simpan di: assets/css/tema-nusantara.css

   Muat PALING AKHIR di <head> index.php, setelah style.css dan order.css.
   Urutan itu yang membuatnya menang tanpa !important di mana-mana.

   CARA KERJANYA
   order.css sudah memakai variabel --ord-* di semua komponennya
   (keranjang, checkout, lacak, chat, panel penjual). Berkas ini
   mendefinisikan ulang variabel itu - jadi seluruh halaman ikut berganti
   warna tanpa satu per satu disentuh. Beranda, navbar, dan footer punya
   komponen sendiri berawalan .nt- supaya tidak bertabrakan dengan Furni.
   ========================================================================== */


/* ---------------------------------------------------------------- token --- */

:root {
  /* ======================================================================
     PALET

     Dua gradien jadi tulang punggungnya:
       biru  #2F6A8A -> #22466C   (utama: kepala halaman, tombol, bilah)
       emas  #A07B16 -> #FDD977   (penegas: harga, lencana, ajakan)

     Warna dasarnya putih. Permukaan kedua memakai biru yang sangat encer,
     bukan abu-abu netral - supaya putihnya terasa sewarna dengan birunya,
     bukan dua tema yang ditempel.
     ====================================================================== */

  --wn-dasar:      #FFFFFF;
  --wn-dasar-2:    #F2F7FA;   /* panel, bagian berselang-seling */
  --wn-abu:        #E4EEF4;   /* kotak foto sebelum gambar dimuat */
  --wn-abu-2:      #D7E5EE;

  --wn-tua:        #22466C;   /* teks utama & latar gelap */
  --wn-tua-2:      #19344F;

  --wn-biru:       #2F6A8A;   /* warna aksi */
  --wn-biru-tua:   #22466C;

  --wn-emas:       #A07B16;
  --wn-emas-2:     #CBA02D;   /* titik tengah gradien emas pada logo */
  --wn-emas-muda:  #FDD977;

  --wn-teks-2:     #3E566B;
  /* Digelapkan dari #6A8196: nada itu hanya mencapai rasio kontras 4.04
     di atas putih, di bawah ambang 4.5 untuk teks berukuran biasa - nama
     toko dan keterangan kecil jadi sulit dibaca di layar terang atau oleh
     mata yang mulai berkurang ketajamannya. */
  --wn-samar:      #5B7288;
  --wn-garis:      #DCE7EE;
  --wn-garis-2:    #C9DAE5;

  /* Dua gradien disimpan sebagai variabel supaya arah dan titik hentinya
     sama persis di semua tempat. Diulang manual di tiap aturan, cepat
     muncul versi yang sudutnya sedikit berbeda. */
  --wn-gradien:       linear-gradient(135deg, #2F6A8A 0%, #22466C 56.5%);
  /* Tiga titik, bukan dua - mengikuti gradien pada logo. Dengan dua titik
     saja, bagian tengahnya berubah jadi cokelat keruh. */
  --wn-gradien-emas:  linear-gradient(135deg, #A07B16 0%, #CBA02D 45%, #FDD977 100%);

  --wn-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --wn-sans:  'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Motif kawung diwarnai emas muda supaya terbaca di atas latar biru tua. */
  --wn-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cg fill='none' stroke='%23FFD97B' stroke-width='1.4'%3E%3Cellipse cx='36' cy='18' rx='10' ry='16'/%3E%3Cellipse cx='36' cy='54' rx='10' ry='16'/%3E%3Cellipse cx='18' cy='36' rx='16' ry='10'/%3E%3Cellipse cx='54' cy='36' rx='16' ry='10'/%3E%3Ccircle cx='36' cy='36' r='2.6' fill='%23FFD97B'/%3E%3C/g%3E%3C/svg%3E");

  /* ---- Pemetaan ke variabel order.css ----------------------------------
     Satu blok ini yang mengubah keranjang, checkout, lacak pesanan, chat,
     dan panel penjual sekaligus. */
  --ord-green: var(--wn-biru);
  --ord-dark:  var(--wn-tua);
  --ord-muted: var(--wn-samar);
  --ord-line:  var(--wn-garis);
  --ord-bg:    #FFFFFF;
  --ord-soft:  var(--wn-dasar-2);
  --ord-amber: var(--wn-emas);
  --ord-red:   #B3261E;
  /* Hijau dipertahankan untuk status berhasil - itu makna, bukan hiasan.
     Kalau ikut jadi biru, "Sudah dibayar" dan tombol biasa tampak sama. */
  --ord-ok:    #2F6B4F;
}


/* ----------------------------------------------------------------- dasar --- */

body {
  font-family: var(--wn-sans);
  background: var(--wn-dasar);
  color: var(--wn-tua);
}

h1, h2, .section-title, .form-card-title, .order-number, .panel-judul h1 {
  font-family: var(--wn-serif);
  color: var(--wn-tua);
}

a { color: var(--wn-biru); }
a:hover { color: var(--wn-biru-tua); }

:focus-visible { outline: 3px solid var(--wn-emas); outline-offset: 3px; }

.nt-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 64px);
  box-sizing: border-box;
}


/* --------------------------------------------------------------- tombol --- */
/* Menata ulang tombol Furni yang dipakai di semua halaman. */

.btn {
  font-family: var(--wn-sans);
  font-weight: 600;
  border-radius: 999px;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn.btn-primary,
.btn.btn-primary:focus {
  background: var(--wn-biru);
  border-color: var(--wn-biru);
  color: #FFFFFF;
}
.btn.btn-primary:hover {
  background: var(--wn-biru-tua);
  border-color: var(--wn-biru-tua);
  color: #FFFFFF;
}

.btn.btn-black-hover-outline {
  background: transparent;
  border: 1.5px solid var(--wn-tua);
  color: var(--wn-tua);
}
.btn.btn-black-hover-outline:hover {
  background: var(--wn-tua);
  color: var(--wn-dasar);
}

.btn.btn-secondary {
  background: var(--wn-emas);
  border-color: var(--wn-emas);
  color: var(--wn-tua);
}

.btn:focus-visible { outline: 3px solid var(--wn-emas); outline-offset: 3px; }


/* ------------------------------------------------------------ formulir --- */

.form-control,
.form-select {
  border: 1px solid var(--wn-garis-2);
  border-radius: 12px;
  background-color: #FFFFFF;
  color: var(--wn-tua);
  font-family: var(--wn-sans);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--wn-biru);
  box-shadow: 0 0 0 3px rgba(168, 68, 31, 0.15);
}

.form-card {
  border-color: var(--wn-garis);
  border-radius: 22px;
}


/* ------------------------------------------- hero halaman dalam (Furni) --- */
/* Katalog, keranjang, checkout, lacak - semuanya memakai .hero.hero-page. */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--wn-tua);
}

/* Dua kelas sekaligus supaya menang atas <style> di v_shop.php yang masih
   memasang foto latar bunga lama - itu cuma satu kelas. */
.hero.hero-page {
  padding: 56px 0 48px;
  background-color: var(--wn-tua) !important;
  background-image: none !important;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--wn-motif);
  opacity: 0.3;
  pointer-events: none;
}

.hero > .container { position: relative; }

.hero .intro-excerpt h1 {
  font-family: var(--wn-serif);
  font-weight: 700;
  font-size: clamp(32px, 4vw, 48px);
  color: var(--wn-dasar);
  margin: 0;
}


/* ------------------------------------- kartu produk di katalog & detail --- */

.product-section .product-item::before,
.product-item::before { display: none; }

.product-section .product-item,
.untree_co-section .product-item {
  background: #FFFFFF;
  border: 1px solid var(--wn-garis);
  border-radius: 22px;
  padding: 12px 14px 60px;
}

.product-item .product-thumbnail {
  border-radius: 14px;
  background: var(--wn-abu);
}

.product-item .product-title {
  font-family: var(--wn-sans);
  font-weight: 700;
  color: var(--wn-tua);
}

.product-item .product-price {
  font-family: var(--wn-serif);
  color: var(--wn-tua);
}

.product-item .product-cat { color: var(--wn-biru); }

/* Tombol + selalu terlihat. Versi Furni menyembunyikannya sampai kursor
   di atas kartu - di layar sentuh tidak ada kursor, jadi tombolnya tidak
   pernah muncul. */
.product-item .icon-cross {
  width: 44px;
  height: 44px;
  bottom: 12px;
  margin-bottom: 0;
  opacity: 1;
  visibility: visible;
  background: var(--wn-biru);
}
.product-item .icon-cross:hover { background: var(--wn-biru-tua); }


/* ===================================================================== */
/*  NAVBAR                                                               */
/* ===================================================================== */

.nt-strip {
  background: var(--wn-tua);
  color: var(--wn-dasar);
  font-size: 13px;
}

.nt-strip-in {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 40px;
}

.nt-lokasi {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: var(--wn-emas-muda);
  font: inherit;
  font-weight: 600;
  padding: 8px 0;
  cursor: pointer;
}
.nt-lokasi strong { font-weight: 700; }
.nt-lokasi:hover { color: #FFFFFF; }

.nt-nav {
  background: var(--wn-dasar);
  border-bottom: 1px solid var(--wn-garis);
  position: sticky;
  top: 0;
  z-index: 1030;
}

.nt-nav-in {
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: 84px;
}

.nt-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--wn-tua);
  text-decoration: none;
  flex: 0 0 auto;
}
.nt-logo:hover { color: var(--wn-tua); }
.nt-logo span {
  font-family: var(--wn-serif);
  font-size: 24px;
  font-weight: 700;
}

.nt-menu {
  display: flex;
  gap: 26px;
  font-size: 15px;
  font-weight: 500;
}
.nt-menu a {
  color: var(--wn-tua);
  text-decoration: none;
  padding: 8px 0;
  border-bottom: 2px solid transparent;
}
.nt-menu a:hover { color: var(--wn-biru); }
.nt-menu a[aria-current="page"] {
  color: var(--wn-biru);
  border-bottom-color: var(--wn-biru);
}

.nt-cari {
  margin: 0 0 0 auto;
  width: min(340px, 100%);
}
.nt-cari label {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  box-sizing: border-box;
  padding: 0 18px;
  margin: 0;
  background: #FFFFFF;
  border: 1px solid var(--wn-garis-2);
  border-radius: 999px;
  color: var(--wn-samar);
}
.nt-cari label:focus-within {
  border-color: var(--wn-biru);
  box-shadow: 0 0 0 3px rgba(168, 68, 31, 0.15);
}
.nt-cari input {
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: var(--wn-tua);
  width: 100%;
  min-width: 0;
}

.nt-keranjang {
  position: relative;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--wn-tua);
  color: var(--wn-dasar);
}
.nt-keranjang:hover { background: var(--wn-biru); color: #FFFFFF; }

/* .cart-badge dipertahankan - shop.js dan produk.js memperbarui angkanya
   lewat kelas ini. */
.nt-keranjang .cart-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  box-sizing: border-box;
  border-radius: 999px;
  border: 2px solid var(--wn-dasar);
  background: var(--wn-emas);
  color: var(--wn-tua);
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
.nt-keranjang .cart-badge[hidden] { display: none; }

.nt-burger {
  display: none;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border: 1px solid var(--wn-garis-2);
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--wn-tua);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

@media (max-width: 991.98px) {
  .nt-strip-teks { display: none; }
  .nt-strip-in { justify-content: flex-end; }

  .nt-nav-in {
    flex-wrap: wrap;
    gap: 12px 14px;
    min-height: 0;
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .nt-logo { margin-right: auto; }
  .nt-burger { display: flex; }

  /* Kotak cari pindah ke baris sendiri, selebar layar - di HP pencarian
     lebih sering dipakai daripada menu. */
  .nt-cari { order: 5; width: 100%; margin: 0; }

  .nt-menu {
    order: 6;
    width: 100%;
    flex-direction: column;
    gap: 0;
    display: none;
    border-top: 1px solid var(--wn-garis);
  }
  .nt-menu.is-buka { display: flex; }
  .nt-menu a {
    padding: 14px 0;
    border-bottom: 1px solid var(--wn-garis);
  }
  .nt-menu a[aria-current="page"] { border-bottom-color: var(--wn-garis); }
}


/* ===================================================================== */
/*  BERANDA                                                              */
/* ===================================================================== */

/* ---- tombol beranda (tidak memakai .btn Furni supaya tidak saling
        menimpa padding dan tinggi) ---- */

.nt-tombol,
.nt-tombol-garis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  padding: 0 28px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  box-sizing: border-box;
}

.nt-tombol { background: var(--wn-biru); color: #FFFFFF; }
.nt-tombol:hover { background: var(--wn-biru-tua); color: #FFFFFF; }

.nt-tombol-garis {
  border: 1.5px solid var(--wn-tua);
  color: var(--wn-tua);
  font-weight: 600;
}
.nt-tombol-garis:hover { background: var(--wn-tua); color: var(--wn-dasar); }

.nt-tombol-kunyit { background: var(--wn-emas); color: var(--wn-tua); }
.nt-tombol-kunyit:hover { background: var(--wn-emas-muda); color: var(--wn-tua); }


/* ---- hero ---- */

.nt-hero { padding: 64px 0 80px; }

.nt-hero-in {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px;
  align-items: center;
}

.nt-hero-teks {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.nt-kicker {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wn-biru);
}

.nt-hero h1 {
  margin: 0;
  font-family: var(--wn-serif);
  font-size: clamp(40px, 5.2vw, 66px);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.nt-lead {
  margin: 0;
  font-size: 19px;
  line-height: 1.6;
  color: var(--wn-teks-2);
  max-width: 34em;
}

.nt-aksi { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }

.nt-janji {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: var(--wn-teks-2);
}
.nt-janji li { display: flex; align-items: center; gap: 8px; }
.nt-janji svg { color: var(--wn-biru); flex: 0 0 auto; }

/* Panel kanan dengan motif kawung */
.nt-panel {
  position: relative;
  height: 540px;
  border-radius: 32px;
  background: var(--wn-tua);
  overflow: hidden;
}
.nt-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--wn-motif);
  opacity: 0.55;
}

.nt-panel-foto {
  position: absolute;
  left: 48px;
  top: 48px;
  width: 300px;
  height: 360px;
  border-radius: 24px;
  overflow: hidden;
  background: var(--wn-abu);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}
.nt-panel-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.nt-panel-kartu {
  position: absolute;
  right: 40px;
  top: 120px;
  width: 250px;
  box-sizing: border-box;
  padding: 18px;
  border-radius: 20px;
  background: #FFFFFF;
  color: var(--wn-tua);
  text-decoration: none;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.nt-panel-kartu:hover { color: var(--wn-tua); }
.nt-panel-kartu b { font-size: 17px; }

.nt-panel-lencana {
  position: absolute;
  right: 72px;
  bottom: 56px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--wn-emas);
  color: var(--wn-tua);
  font-size: 14px;
  font-weight: 700;
}


/* ---- bagian umum ---- */

.nt-bagian { padding: 0 0 88px; }

.nt-judul-baris {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.nt-judul-baris h2,
.nt-h2 {
  margin: 0;
  font-family: var(--wn-serif);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 700;
}

.nt-sub { margin: 8px 0 0; font-size: 16px; color: var(--wn-teks-2); }

.nt-tautan { font-weight: 600; font-size: 15px; text-decoration: none; }

.nt-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wn-biru);
}

.nt-harga {
  font-family: var(--wn-serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--wn-tua);
}

.nt-meta { font-size: 13px; color: var(--wn-samar); }


/* ---- kategori ---- */

.nt-kategori {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}

.nt-kat {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 20px;
  border-radius: 20px;
  background: #FFFFFF;
  border: 1px solid var(--wn-garis);
  color: var(--wn-tua);
  text-decoration: none;
  transition: border-color 0.15s ease;
}
.nt-kat:hover { border-color: var(--wn-biru); color: var(--wn-tua); }

.nt-kat-ikon {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: #F6E7CF;
  color: var(--wn-biru);
  display: flex;
  align-items: center;
  justify-content: center;
}

.nt-kat b { font-size: 16px; }
.nt-kat small { font-size: 13px; color: var(--wn-samar); }


/* ---- chip filter ---- */

.nt-chips { display: flex; gap: 8px; flex-wrap: wrap; }

.nt-chip {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid var(--wn-garis-2);
  color: var(--wn-tua);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.nt-chip:hover { border-color: var(--wn-tua); color: var(--wn-tua); }
.nt-chip.is-aktif { background: var(--wn-tua); border-color: var(--wn-tua); color: var(--wn-dasar); }


/* ---- kartu produk ---- */

.nt-produk {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.nt-kartu {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  background: #FFFFFF;
  border: 1px solid var(--wn-garis);
  overflow: hidden;
  padding: 12px 14px 60px;
}

.nt-kartu-tautan {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  color: var(--wn-tua);
  text-decoration: none;
}
.nt-kartu-tautan:hover { color: var(--wn-tua); }

.nt-kartu-foto {
  aspect-ratio: 1 / 1;
  background: var(--wn-abu);
}
.nt-kartu-foto img { 
    margin-bottom: 30px;
    position: relative;
    top: 0;
    -webkit-transition: .3s all ease;
    -o-transition: .3s all ease;
    transition: .3s all ease;

    width: 100%;
    aspect-ratio: 1 / 1;
    -o-object-fit: cover;
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
    background: #f5f7f6;
    margin-bottom: 14px;
  }

.nt-kartu-isi {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Ruang bawah untuk tombol tambah yang ditaruh di luar tautan. */
  padding: 18px 20px 76px;
}

.nt-kartu-isi b {
  font-size: 17px;
  line-height: 1.35;
  /* Nama produk dipotong dua baris supaya harga di semua kartu sejajar. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nt-kartu-bawah {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}
.nt-kartu-bawah .btn-add { pointer-events: auto; }

.nt-tambah {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  background: var(--wn-biru);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nt-tambah:hover { background: var(--wn-biru-tua); }

.nt-kosong {
  padding: 48px 24px;
  border-radius: 22px;
  border: 1px dashed var(--wn-garis-2);
  text-align: center;
  color: var(--wn-teks-2);
}


/* ---- toko di sekitarmu ---- */

.nt-pita { background: var(--wn-dasar-2); padding: 80px 0; margin-bottom: 0; }

.nt-toko {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.nt-toko-kartu {
  padding: 24px;
  border-radius: 22px;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.nt-toko-kepala { display: flex; align-items: center; gap: 14px; }

.nt-avatar {
  width: 60px;
  height: 60px;
  flex: 0 0 auto;
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--wn-serif);
  font-size: 22px;
  font-weight: 700;
}
.nt-avatar img { width: 100%; height: 100%; object-fit: cover; }
.nt-avatar-0 { background: var(--wn-tua); color: var(--wn-emas-muda); }
.nt-avatar-1 { background: var(--wn-biru); color: var(--wn-dasar); }
.nt-avatar-2 { background: var(--wn-emas); color: var(--wn-tua); }

.nt-toko-nama { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.nt-toko-nama b { font-size: 18px; }

.nt-jarak {
  flex: 0 0 auto;
  padding: 6px 12px;
  border-radius: 999px;
  background: #F6E7CF;
  color: var(--wn-biru-tua);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.nt-mini {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.nt-mini span {
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  background: var(--wn-abu);
  overflow: hidden;
}
.nt-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }


/* ---- langkah belanja ---- */

.nt-langkah-bagian { padding: 96px 0; }

.nt-langkah-bagian .nt-h2 { text-align: center; margin-bottom: 40px; }

.nt-langkah {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: langkah;
}

.nt-langkah li {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px;
  border-top: 3px solid var(--wn-emas);
  counter-increment: langkah;
}

/* Nomor dari counter CSS, bukan ketikan - urutannya memang berurutan,
   jadi nomornya membawa makna. */
.nt-langkah li::before {
  content: counter(langkah);
  font-family: var(--wn-serif);
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  color: var(--wn-biru);
}

.nt-langkah b { font-size: 20px; }
.nt-langkah span { font-size: 15px; line-height: 1.6; color: var(--wn-teks-2); }


/* ---- ajakan untuk pelaku UMKM ---- */

.nt-cta-wrap { padding-bottom: 96px; }

.nt-cta {
  position: relative;
  padding: 64px;
  border-radius: 32px;
  background: var(--wn-tua);
  color: var(--wn-dasar);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.nt-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--wn-motif);
  opacity: 0.18;
}
.nt-cta > * { position: relative; }

.nt-cta h2 {
  margin: 0 0 14px;
  font-family: var(--wn-serif);
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--wn-dasar);
}
.nt-cta p { margin: 0; font-size: 17px; line-height: 1.6; color: #D8DCE6; max-width: 36em; }


/* ===================================================================== */
/*  FOOTER                                                               */
/* ===================================================================== */

.nt-footer {
  background: var(--wn-tua-2);
  color: #C9CEDB;
  padding: 64px 0 40px;
}

.nt-footer-kolom {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
  gap: 40px;
  margin-bottom: 48px;
}

.nt-footer h2 {
  font-family: var(--wn-serif);
  font-size: 24px;
  color: var(--wn-dasar);
  margin: 0 0 14px;
}

.nt-footer h3 {
  font-family: var(--wn-sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--wn-dasar);
  margin: 0 0 14px;
}

.nt-footer p,
.nt-footer li { font-size: 14px; line-height: 1.7; }

.nt-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.nt-footer a { color: #C9CEDB; text-decoration: none; }
.nt-footer a:hover { color: var(--wn-emas-muda); }

.nt-footer-bawah {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid #2B3654;
  padding-top: 24px;
  font-size: 13px;
}


/* ===================================================================== */
/*  RESPONSIF                                                            */
/* ===================================================================== */

@media (max-width: 1199.98px) {
  .nt-kategori { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nt-produk   { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
  .nt-hero { padding: 40px 0 64px; }
  .nt-hero-in { grid-template-columns: minmax(0, 1fr); gap: 40px; }

  .nt-panel { height: 440px; }
  .nt-panel-foto { left: 32px; top: 32px; width: 56%; height: 300px; }
  .nt-panel-kartu { right: 24px; top: auto; bottom: 88px; }
  .nt-panel-lencana { right: 24px; bottom: 24px; }

  .nt-produk { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .nt-toko { grid-template-columns: minmax(0, 1fr); }
  .nt-langkah { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .nt-langkah li { padding: 24px 0; }

  .nt-cta { flex-direction: column; align-items: flex-start; padding: 44px 32px; }

  .nt-footer-kolom { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
  .nt-lead { font-size: 17px; }
  .nt-aksi { flex-direction: column; }
  .nt-aksi a { width: 100%; }

  .nt-panel { height: 380px; border-radius: 24px; }
  .nt-panel-foto { left: 20px; top: 20px; width: 62%; height: 250px; }
  .nt-panel-kartu { right: 16px; bottom: 16px; width: 64%; padding: 14px; }
  .nt-panel-lencana { display: none; }

  .nt-kategori { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .nt-kat { padding: 18px 16px; }

  .nt-kartu-isi { padding: 14px 14px 68px; }
  .nt-kartu-isi b { font-size: 15px; }
  .nt-kartu-bawah { left: 14px; right: 14px; bottom: 14px; }
  .nt-harga { font-size: 18px; }

  .nt-pita { padding: 56px 0; }
  .nt-langkah-bagian { padding: 64px 0; }

  .nt-footer-kolom { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .nt-kat { transition: none; }
}


/* ===================================================================== */
/*  AKUN - tombol profil & panel di navbar                               */
/* ===================================================================== */

.nt-akun { position: relative; flex: 0 0 auto; }

.nt-akun-tombol {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--wn-garis-2);
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--wn-tua);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  font-family: var(--wn-serif);
  font-size: 19px;
  font-weight: 700;
}
.nt-akun-tombol:hover,
.nt-akun-tombol[aria-expanded="true"] { border-color: var(--wn-biru); }
.nt-akun-tombol img { width: 100%; height: 100%; object-fit: cover; }

.nt-akun-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 1040;
  width: 340px;
  background: #FFFFFF;
  border: 1px solid var(--wn-garis);
  border-radius: 20px;
  box-shadow: 0 18px 44px rgba(31, 42, 68, 0.16);
  overflow: hidden;
}
.nt-akun-panel[hidden] { display: none; }

/* ---- bar profil & bar toko ---- */

.nt-akun-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--wn-garis);
  color: var(--wn-tua);
  text-decoration: none;
}

.nt-akun-bar-toko,
.nt-akun-buka { background: #FBF6EE; }
a.nt-akun-buka:hover { background: var(--wn-dasar-2); color: var(--wn-tua); }

.nt-akun-foto {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border-radius: 999px;
  overflow: hidden;
  background: var(--wn-tua);
  color: var(--wn-emas-muda);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--wn-serif);
  font-size: 19px;
  font-weight: 700;
}
.nt-akun-foto img { width: 100%; height: 100%; object-fit: cover; }

/* Toko memakai sudut membulat, bukan lingkaran - supaya sekilas terbedakan
   dari foto orang, persis seperti di sketsa. */
.nt-akun-foto-toko { border-radius: 12px; background: var(--wn-biru); color: var(--wn-dasar); }

.nt-akun-foto-kosong {
  border-radius: 12px;
  background: transparent;
  border: 1.5px dashed var(--wn-garis-2);
  color: var(--wn-biru);
  font-family: var(--wn-sans);
  font-size: 22px;
  font-weight: 500;
}

.nt-akun-teks {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.nt-akun-teks strong {
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nt-akun-teks em {
  font-style: normal;
  font-size: 12.5px;
  color: var(--wn-samar);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nt-akun-teks em.nt-akun-tunggu { color: #8A5A10; font-weight: 600; }

.nt-akun-ubah {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wn-samar);
}
.nt-akun-ubah:hover { background: var(--wn-dasar-2); color: var(--wn-biru); }

/* ---- daftar menu ---- */

.nt-akun-menu { display: flex; flex-direction: column; padding: 8px 0; }

.nt-akun-menu a {
  padding: 11px 20px;
  font-size: 14.5px;
  color: var(--wn-tua);
  text-decoration: none;
}
.nt-akun-menu a:hover { background: var(--wn-dasar); color: var(--wn-biru); }

.nt-akun-sub {
  padding: 12px 20px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wn-samar);
}

/* ---- keluar, paling bawah ---- */

.nt-akun-keluar { margin: 0; border-top: 1px solid var(--wn-garis); }
.nt-akun-keluar button {
  width: 100%;
  padding: 14px 20px;
  border: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: #B3261E;
  cursor: pointer;
}
.nt-akun-keluar button:hover { background: #FDF1EF; }

/* ---- tamu ---- */

.nt-akun-tamu {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border-bottom: 1px solid var(--wn-garis);
}
.nt-akun-tamu p { margin: 0 0 4px; font-size: 14px; line-height: 1.55; color: var(--wn-teks-2); }
.nt-akun-tamu .nt-tombol,
.nt-akun-tamu .nt-tombol-garis { height: 46px; font-size: 15px; }


/* ---- pesan sukses/info di bawah navbar ---- */

.nt-kabar {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--wn-dasar-2);
  border-left: 3px solid var(--wn-emas);
  font-size: 14px;
  line-height: 1.55;
}
.nt-kabar.is-ok { background: #EAF3EE; border-left-color: var(--ord-ok); }


/* ===================================================================== */
/*  HALAMAN AKUN                                                         */
/* ===================================================================== */

.akun-alih { margin: 18px 0 0; text-align: center; font-size: 14px; color: var(--wn-teks-2); }

/* Jebakan bot di formulir daftar - di luar layar, bukan display:none.
   Sebagian bot sengaja melewati kolom yang display:none. */
.akun-jebakan {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.akun-inisial {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wn-tua);
  color: var(--wn-emas-muda);
  font-family: var(--wn-serif);
  font-size: 28px;
  font-weight: 700;
}
.akun-inisial[hidden] { display: none; }

.akun-setuju {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.6;
  color: var(--wn-teks-2);
  cursor: pointer;
}
.akun-setuju input { margin-top: 4px; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--wn-biru); }

.akun-pesanan { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.akun-pesanan a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--wn-garis);
  border-radius: 16px;
  background: #FFFFFF;
  color: var(--wn-tua);
  text-decoration: none;
}
.akun-pesanan a:hover { border-color: var(--wn-biru); color: var(--wn-tua); }

.akun-pesanan-kiri,
.akun-pesanan-kanan { display: flex; flex-direction: column; gap: 4px; }
.akun-pesanan-kanan { align-items: flex-end; text-align: right; }
.akun-pesanan em { font-style: normal; font-size: 13px; color: var(--wn-samar); }


/* ---- layar sempit ---- */

@media (max-width: 991.98px) {
  .nt-akun { order: 2; }
  .nt-burger { order: 3; }

  /* Di HP panel menempel ke tepi layar, bukan ke tombol - panel 340px
     yang ditambatkan ke tombol di pojok kanan akan terpotong di layar
     360px. */
  .nt-akun-panel {
    position: fixed;
    top: 72px;
    left: 12px;
    right: 12px;
    width: auto;
    max-height: calc(100vh - 88px);
    overflow-y: auto;
  }
}

@media (max-width: 575.98px) {
  .akun-pesanan a { flex-direction: column; align-items: flex-start; }
  .akun-pesanan-kanan { align-items: flex-start; text-align: left; }
}


/* ===================================================================== */
/*  MARKETPLACE - checkout, pengaturan toko, resi                        */
/* ===================================================================== */

/* Perkiraan waktu proses di ringkasan checkout. */
.ringkasan-proses {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--ord-soft);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--wn-teks-2);
}

/* Angka + satuan dalam satu baris: [ 2 ] hari kerja */
.input-satuan { display: flex; align-items: center; gap: 10px; }
.input-satuan .form-control { width: 110px; flex: 0 0 auto; }
.input-satuan span { font-size: 14px; color: var(--wn-teks-2); }

/* Nomor resi - dibuat mudah disalin dan terlihat jelas. */
.resi {
  display: inline-block;
  margin: 4px 0 8px;
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--ord-soft);
  font-size: 14px;
}
.resi strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.04em;
  user-select: all;   /* sekali klik langsung terpilih semua */
}


/* ===================================================================== */
/*  PETA ALAMAT - profil toko, profil pengguna, checkout                 */
/* ===================================================================== */

.peta-blok {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--wn-garis);
}

.peta-aksi {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.peta-info {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--wn-samar);
  /* Ruangnya dipesan sejak awal supaya isian di bawah peta tidak melompat
     setiap kali pesan muncul dan hilang. */
  min-height: 20px;
}
.peta-info.is-ok    { color: var(--ord-ok); }
.peta-info.is-error { color: var(--ord-red); }

/* Kartu "alamat di profilmu" di checkout */
.alamat-profil {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 16px;
  margin-bottom: 18px;
  border-radius: 14px;
  background: var(--ord-soft);
}
.alamat-profil strong { display: block; font-size: 14px; }
.alamat-profil em {
  display: block;
  font-style: normal;
  font-size: 13px;
  color: var(--wn-samar);
  margin-top: 2px;
}

/* Leaflet menaruh kontrol zoom di z-index 1000 - di atas panel akun (1040)
   kalau tidak diturunkan, sehingga tombol + peta menembus menu. */
.leaflet-container { z-index: 1; }

@media (max-width: 575.98px) {
  .peta-aksi .btn { flex: 1 1 100%; }
  .alamat-profil { flex-direction: column; align-items: flex-start; }
}


/* ===================================================================== */
/*  PANEL ADMIN - ringkasan, kategori, akun                              */
/* ===================================================================== */

.adm-angka {
  display: grid;
  /* auto-fit + minmax: jumlah kolom menyesuaikan lebar layar sendiri,
     tanpa titik putus khusus untuk tiap ukuran. */
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  margin-bottom: 36px;
}

.adm-kartu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px;
  border: 1px solid var(--wn-garis);
  border-radius: 18px;
  background: #FFFFFF;
}

.adm-nilai {
  font-family: var(--wn-serif);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--wn-tua);
  /* Angka selebar sama supaya kartu tidak bergeser saat nilainya berubah. */
  font-variant-numeric: tabular-nums;
}

.adm-label { font-size: 13.5px; color: var(--wn-teks-2); line-height: 1.45; }
.adm-catatan { font-size: 12px; color: var(--wn-samar); margin-top: 2px; }
.adm-catatan.is-warn { color: var(--wn-biru); font-weight: 600; }

.panel-bagian { margin-bottom: 36px; }

.panel-sub {
  font-family: var(--wn-serif);
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 14px;
}

/* --- daftar baris (kategori, akun, toko menunggu) --- */

.adm-tabel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.adm-baris {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 18px;
  border: 1px solid var(--wn-garis);
  border-radius: 14px;
  background: #FFFFFF;
}

/* Baris nonaktif diredupkan, bukan disembunyikan - admin tetap perlu
   melihatnya untuk mengaktifkan kembali. */
.adm-baris.is-mati { background: var(--ord-soft); opacity: 0.75; }

.adm-baris strong { display: block; font-size: 15px; }
.adm-baris em {
  display: block;
  font-style: normal;
  font-size: 13px;
  color: var(--wn-samar);
  margin-top: 3px;
  line-height: 1.5;
}

.adm-aksi {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.adm-aksi .btn-sm { padding: 6px 14px; font-size: 13px; }

/* Kolom password + tombol untuk mengatur ulang sandi akun. */
.adm-sandi { display: flex; gap: 6px; align-items: center; }
.adm-sandi .form-control { width: 150px; padding: 6px 12px; font-size: 13px; }

@media (max-width: 767.98px) {
  .adm-baris { flex-direction: column; align-items: stretch; }
  .adm-aksi { justify-content: flex-start; }
  .adm-sandi .form-control { width: 100%; }
}

/* Tautan pindah tampilan di kerangka desktop - hanya muncul untuk
   pengunjung yang perangkatnya memang HP. */
.tukar-tampilan { text-align: center; padding: 16px 0 24px; margin: 0; background: var(--wn-dasar); }
.tukar-tampilan a { font-size: 13px; color: var(--wn-samar); text-decoration: underline; }


/* --- Sakelar tampilan di menu akun -------------------------------------- */

.tampilan-sakelar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 18px;
  border-top: 1px solid var(--wn-garis);
  background: var(--ord-soft);
}

.tampilan-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wn-samar);
}

/* Dua pilihan berdampingan dalam satu alur - bentuk sakelar geser, tapi
   dibuat dari dua tautan supaya tetap berfungsi tanpa JavaScript. */
.tampilan-geser {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 3px;
  border-radius: 999px;
  background: #FFFFFF;
  border: 1px solid var(--wn-garis-2);
}

.tampilan-geser a {
  padding: 8px 10px;
  border-radius: 999px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--wn-samar);
  text-decoration: none;
}
.tampilan-geser a:hover { color: var(--wn-tua); }
.tampilan-geser a.is-aktif { background: var(--wn-tua); color: var(--wn-dasar); }

.tampilan-ket { font-style: normal; font-size: 11.5px; color: var(--wn-samar); }

.tampilan-auto {
  font-size: 12px;
  font-weight: 600;
  color: var(--wn-biru);
  text-decoration: underline;
}

/* Tombol di lembar tamu versi HP */
.mb-sheet-tamu { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-bottom: 1px solid var(--wn-garis); }
.mb-sheet-tamu p { margin: 0 0 4px; font-size: 13.5px; line-height: 1.55; color: var(--wn-teks-2); }

.mb-sheet-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  border-radius: 999px;
  border: 1.5px solid var(--wn-tua);
  color: var(--wn-tua);
  font-weight: 600;
  font-size: 15px;
}
.mb-sheet-btn.is-utama { background: var(--wn-biru); border-color: var(--wn-biru); color: #FFFFFF; }

/* --- Kartu produk: tinggi seragam ---------------------------------------- */

/* Kotak foto tidak boleh ikut memanjang atau memendek mengikuti sisa ruang
   kartu. Tanpa ini, kartu yang teksnya pendek menyisakan ruang kosong dan
   fotonya terlihat berbeda ukuran dari kartu sebelahnya. */
.nt-kartu-foto { flex: 0 0 auto; }

/* Cadangan untuk browser lama yang belum mengenal aspect-ratio: kotak
   dibuat persegi lewat padding, dan fotonya diisi menutupi. */
@supports not (aspect-ratio: 1 / 1) {
  .nt-kartu-foto { position: relative; height: 0; padding-top: 100%; }
  .nt-kartu-foto img { position: absolute; inset: 0; }
}

/* Nama toko dipotong satu baris - nama panjang yang membungkus dua baris
   membuat tinggi isi kartu berbeda-beda dalam satu baris grid. */
.nt-kartu-toko,
.nt-kartu-isi .nt-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* --- Foto produk: tampil utuh ------------------------------------------- */

/* Berkasnya sudah diseragamkan jadi persegi saat diunggah (lihat
   application/helpers/gambar_helper.php), jadi di sini fotonya cukup
   ditampilkan apa adanya - tidak ada yang perlu dipotong lagi.

   contain, bukan cover: foto LAMA yang diunggah sebelum penyeragaman ini
   masih beragam bentuknya, dan dengan cover bagian atas-bawahnya akan
   terpangkas. Dengan contain semuanya tetap utuh. */
/* .nt-kartu-foto img,
.mb-kartu-foto img { object-fit: contain; } */

.nt-kartu-foto,
.mb-kartu-foto { background: #FFFFFF; }


/* --- Bagian produk yang disisipkan di dalam bagian lain ------------------ */

/* .product-section bawaan Furni memberi jarak 7rem atas-bawah. Di beranda,
   bagian ini berada di dalam .nt-bagian yang sudah punya jaraknya sendiri,
   jadi jarak bawaannya dinolkan - kalau tidak, ada ruang kosong sangat
   lebar di atas dan di bawah deretan produk. */
.product-section.is-sisip { padding: 0; }


/* =====================================================================
   GRADIEN

   Dipakai terbatas - hanya pada permukaan besar dan tombol utama. Kalau
   dipasang di mana-mana, matanya tidak punya tempat beristirahat dan
   justru terlihat ramai, bukan mewah.
   ===================================================================== */

/* Tombol utama. Sudut gradien dibuat lebih landai (120deg) daripada
   permukaan lebar, karena tombol itu pendek - pada sudut 135deg
   peralihannya hampir tidak terlihat. */
.nt-tombol,
.btn-primary,
.mb-hero-aksi,
.mb-beli-btn:not(.is-garis) {
  background: linear-gradient(120deg, #2F6A8A 0%, #22466C 100%);
  border-color: #2A5C78;
  color: #FFFFFF;
}

.nt-tombol:hover,
.btn-primary:hover {
  background: linear-gradient(120deg, #35779B 0%, #2A5276 100%);
  color: #FFFFFF;
}

/* Tombol penegas: emas, untuk ajakan yang berdiri di atas latar biru. */
.nt-tombol-kunyit,
.mb-sheet-btn.is-utama {
  background: var(--wn-gradien-emas);
  border-color: #A07B16;
  color: #243B4F;
  font-weight: 700;
}
.nt-tombol-kunyit:hover { filter: brightness(1.05); color: #243B4F; }

/* Permukaan lebar bergradien. */
.nt-hero,
.nt-cta,
.mb-hero,
.mb-cta,
.hero.hero-page {
  background-image: var(--wn-gradien);
  background-color: #22466C;
  color: #FFFFFF;
}

/* Hero katalog memakai foto sebagai latar lewat style sebaris di view.
   Gradien ditumpuk di atasnya supaya warnanya tetap sewarna tema, dan
   tulisannya tetap terbaca di atas foto apa pun. */
.hero.hero-page {
  background-blend-mode: multiply;
  background-size: cover;
  background-position: center;
}

.nt-hero h1, .nt-cta h2, .mb-hero h1, .mb-cta h2,
.hero.hero-page h1 { color: #FFFFFF; }

.nt-hero .nt-lead, .nt-cta p, .mb-hero p, .mb-cta p { color: #D9E6EE; }
.nt-kicker { color: var(--wn-emas-muda); }

/* Motif batik di atas permukaan gelap. */
.nt-hero::before, .nt-cta::before, .mb-hero::before {
  background-image: var(--wn-motif);
}

/* Harga: emas tua. Cukup gelap untuk dibaca di atas putih - emas muda
   hanya terbaca di atas latar gelap. */
.nt-harga, .product-item .product-price, .mb-kartu-harga, .mb-detail-harga {
  color: var(--wn-emas);
}

/* Lencana & penanda kecil. */
.nt-kat-ikon { background: var(--wn-dasar-2); color: var(--wn-biru); }
.nt-kat:hover .nt-kat-ikon { background: var(--wn-gradien); color: #FFFFFF; }

.nt-jarak,
.nt-panel-lencana {
  background: var(--wn-gradien-emas);
  color: #243B4F;
  font-weight: 600;
}

/* Garis emas tipis di bawah kepala halaman - penghubung halus antara dua
   warna tema tanpa menambah blok warna baru. */
.nt-hero { border-bottom: 3px solid transparent; border-image: var(--wn-gradien-emas) 1; }

body { background: #FFFFFF; }


/* =====================================================================
   TEKS DI ATAS LATAR GELAP

   Hero dan CTA kini berlatar biru tua. Beberapa elemen di dalamnya masih
   memakai warna teks untuk latar putih, jadi nyaris tidak terbaca -
   daftar janji dan tombol bergaris sempat hilang sama sekali.

   Diperbaiki dengan menyebut induknya, bukan mengubah warna dasar
   elemennya: elemen yang sama masih dipakai di atas latar putih
   (misalnya tombol bergaris di bagian "Belum ada produk").
   ===================================================================== */

.nt-hero .nt-janji,
.nt-cta .nt-janji { color: #D7E4EE; }

/* Centang diberi emas muda - menegaskan tanpa menambah warna baru. */
.nt-hero .nt-janji svg { color: var(--wn-emas-muda); }

.nt-hero .nt-tombol-garis,
.nt-cta .nt-tombol-garis {
  border-color: rgba(255, 255, 255, 0.6);
  color: #FFFFFF;
}
.nt-hero .nt-tombol-garis:hover,
.nt-cta .nt-tombol-garis:hover {
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: var(--wn-tua);
}

/* Panel foto di hero: sebelumnya biru tua di atas biru tua, jadi tepinya
   tidak terlihat sama sekali. */
.nt-hero .nt-panel {
  background: var(--wn-tua-2);
  box-shadow: 0 18px 50px rgba(10, 30, 50, 0.35);
}

/* Kartu produk unggulan di dalam panel tetap berlatar putih. */
.nt-panel-kartu { background: #FFFFFF; color: var(--wn-tua); }
.nt-panel-kartu .nt-meta { color: var(--wn-samar); }


/* =====================================================================
   JARAK ANTARBAGIAN

   .nt-bagian sebelumnya hanya punya jarak bawah, jadi bagian pertama
   sesudah hero menempel langsung ke tepinya - judul "Jelajahi kategori"
   terasa menabrak garis emas di bawah hero.
   ===================================================================== */

.nt-bagian { padding: 72px 0 88px; }

/* Bagian berlatar warna sudah punya jaraknya sendiri, jadi jangan ditambah
   lagi - kalau ditumpuk, blok warnanya jadi melar dan kosong di dalam. */
.nt-pita + .nt-bagian,
.nt-langkah-bagian + .nt-bagian { padding-top: 0; }

.nt-judul-baris { margin-bottom: 28px; }

@media (max-width: 767.98px) {
  .nt-bagian { padding: 44px 0 52px; }
  .nt-judul-baris { margin-bottom: 20px; }
}

/* Logo */
.nt-logo-img { height: 40px; width: auto; display: block; }
.mb-logo img { height: 30px; width: auto; display: block; }

@media (max-width: 575.98px) {
  .nt-logo-img { height: 34px; }
}


/* =====================================================================
   HALAMAN TOKO
   ===================================================================== */

.tk-kepala {
  background-image: var(--wn-gradien);
  background-color: var(--wn-tua);
  color: #FFFFFF;
  padding: 36px 0 32px;
  position: relative;
  overflow: hidden;
}
.tk-kepala::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--wn-motif);
  background-size: 96px 96px;
  opacity: 0.14;
}
.tk-kepala > * { position: relative; }

.tk-kepala-in {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
}

.tk-avatar {
  width: 92px;
  height: 92px;
  flex: 0 0 auto;
  border-radius: 24px;
  overflow: hidden;
  background: #FFFFFF;
  color: var(--wn-biru);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--wn-serif);
  font-size: 36px;
  font-weight: 700;
  /* Bingkai emas tipis: avatar toko adalah hal pertama yang dicari mata
     di halaman ini. */
  box-shadow: 0 0 0 3px rgba(253, 217, 119, 0.55);
}
.tk-avatar img { width: 100%; height: 100%; object-fit: cover; }

.tk-info h1 { font-size: 30px; font-weight: 700; color: #FFFFFF; margin: 0 0 6px; }

.tk-lokasi {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  font-size: 14px;
  color: #CFE0EC;
}
.tk-lokasi svg { color: var(--wn-emas-muda); }

.tk-deskripsi {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.6;
  color: #D7E4EE;
  max-width: 54ch;
}

.tk-aksi { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tk-form { margin: 0; }

.tk-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  background: transparent;
  color: #FFFFFF;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.tk-btn:hover { background: rgba(255, 255, 255, 0.14); color: #FFFFFF; }

.tk-btn.is-utama {
  background: var(--wn-gradien-emas);
  border-color: transparent;
  color: #243B4F;
  font-weight: 700;
}
.tk-btn.is-utama:hover { filter: brightness(1.05); color: #243B4F; }

/* --- angka --- */

.tk-angka {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
}

.tk-angka-item {
  min-width: 108px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.1);
  text-align: center;
}
.tk-angka-item strong {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-family: var(--wn-serif);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
}
.tk-angka-item span { display: block; margin-top: 4px; font-size: 11.5px; color: #CFE0EC; }
.tk-angka-item.is-rating strong { color: var(--wn-emas-muda); }

/* --- tab --- */

.tk-tab { background: #FFFFFF; border-bottom: 1px solid var(--wn-garis); }
.tk-tab .container { display: flex; gap: 6px; }

.tk-tab a {
  padding: 14px 20px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--wn-samar);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}
.tk-tab a em {
  font-style: normal;
  font-size: 12px;
  color: var(--wn-samar);
  margin-left: 4px;
}
.tk-tab a.is-aktif { color: var(--wn-biru); border-bottom-color: var(--wn-biru); }
.tk-tab a.is-aktif em { color: var(--wn-biru); }

.tk-isi { padding-top: 26px; }

/* --- saringan --- */

.tk-saring {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.tk-chips { display: flex; gap: 8px; flex-wrap: wrap; flex: 1 1 auto; }

.tk-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 15px;
  border-radius: 999px;
  border: 1px solid var(--wn-garis-2);
  background: #FFFFFF;
  font-size: 13px;
  font-weight: 600;
  color: var(--wn-teks-2);
}
.tk-chip em { font-style: normal; font-size: 11.5px; color: var(--wn-samar); }
.tk-chip.is-aktif { background: var(--wn-gradien); border-color: transparent; color: #FFFFFF; }
.tk-chip.is-aktif em { color: var(--wn-emas-muda); }

.tk-urut select {
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--wn-garis-2);
  border-radius: 999px;
  background: #FFFFFF;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--wn-tua);
}

/* Rating kecil di kartu produk */
.product-item .product-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
  margin: 4px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--wn-teks-2);
}
.product-item .product-rating svg { color: #E8B23A; }
.product-item .product-rating span { font-weight: 400; color: var(--wn-samar); }

@media (max-width: 991.98px) {
  .tk-kepala-in { grid-template-columns: auto minmax(0, 1fr); }
  .tk-angka { grid-column: 1 / -1; }
  .tk-angka-item { flex: 1 1 0; min-width: 0; }
}

@media (max-width: 575.98px) {
  .tk-kepala { padding: 22px 0; }
  .tk-avatar { width: 68px; height: 68px; border-radius: 18px; font-size: 26px; }
  .tk-info h1 { font-size: 22px; }
  .tk-deskripsi { display: none; }
  .tk-aksi .tk-btn { flex: 1 1 0; justify-content: center; }
  .tk-tab a { flex: 1 1 0; text-align: center; padding: 12px 8px; }
  .tk-saring { flex-direction: column; align-items: stretch; }
  .tk-chips { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; padding-bottom: 4px; }
  .tk-chips::-webkit-scrollbar { display: none; }
  .tk-chip { flex: 0 0 auto; }
}