/* =============================================================================
   IMMERO UI — SISTEM DESAIN BERSAMA
   =============================================================================
   Satu berkas yang mengubah GAYA seluruh situs, bukan sekadar warnanya.
   Dimuat lewat satu baris <link> di akhir <head> tiap halaman (toko maupun
   admin), sengaja SETELAH blok <style> bawaan halaman supaya nilai di sini
   yang berlaku bila keduanya mengatur properti yang sama.

   Kenapa lewat berkas terpusat, bukan menyunting kelas di 44 berkas satu per
   satu: kelas Tailwind ditulis inline di ribuan tempat. Menyentuhnya satu per
   satu berisiko besar dan mustahil dijaga konsistensinya. Dengan berkas ini,
   satu perubahan berlaku ke seluruh situs — dan bisa dibatalkan dengan menghapus
   satu baris <link>.

   ATURAN KEKHUSUSAN (specificity) yang dipakai di sini:
   - Selector ELEMEN (button, input) sengaja dipakai untuk nilai dasar. Kelas
     Tailwind yang ditulis eksplisit di HTML (mis. `rounded-full`) punya
     kekhususan lebih tinggi, jadi tetap menang. Itu memang yang diinginkan:
     nilai di sini hanya mengisi yang belum diatur, bukan memaksa.
   - Hanya `.tracking-wide2` yang ditimpa dengan kekhususan setara — lihat
     alasannya di bagian TIPOGRAFI.

   REVISI PALET & FONT (2026-10-29, permintaan pemilik: "sesuaikan semua desain dari awal sampai akhir"):
   oranye merek kini #F26522 (permukaan) / #C2410C (teks) dan navy #133E68, mengikuti desain acuan
   immerocn.com. Nilai warna di berkas ini, tailwind-built.css, dan semua halaman sudah disamakan.
   Font seluruh situs = Poppins (lihat @import di bawah).
   ============================================================================= */

/* Font Poppins untuk SELURUH situs (publik + admin): chael-ui.css dimuat semua halaman, jadi satu @import
   di sini cukup — tidak perlu menyisipkan <link> font ke puluhan berkas. @import harus mendahului aturan lain. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

:root {
    --ui-font: 'Poppins', 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    /* Sudut membulat. Dikembalikan membesar (4/6/10 -> 10/14/20) mengikuti
       arahan pemilik beserta tangkapan layar acuan: marketplace yang bersih
       dan ramah, bukan etalase bergaris tajam. Tombol utama memakai pil penuh
       (lihat .im-btn-*), kartu memakai --ui-radius. */
    --ui-radius-sm: 10px;
    --ui-radius:    14px;
    --ui-radius-lg: 20px;

    /* ---- ORANYE: SATU NILAI UNTUK SEMUA YANG MEMBAWA TEKS --------------
       Acuan memakai oranye sangat cerah. Diukur dengan rumus WCAG, oranye
       merek #FF6B35 cuma 2,84:1 terhadap putih — gagal di KEDUA arah (teks
       putih di atasnya, maupun ia sebagai teks di atas putih). Harga dan
       tombol "Masuk" tidak boleh begitu.
       #CB430D adalah oranye PALING CERAH yang masih lulus di SEMUA tempat ia
       muncul: 4,83:1 di atas putih (dua arah) dan 4,60:1 di atas dasar abu
       --ui-fog. Disapu dari #D9480F ke bawah; #D0450E sempat dipakai tapi
       jatuh ke 4,41:1 begitu ia duduk di atas dasar abu, jadi diturunkan lagi.
       Jadi: --im-or untuk permukaan hias saja, --im-or-act untuk apa pun yang
       membawa atau berupa teks. */
    --im-or:     #F26522;   /* permukaan hias: oranye merek cerah (desain acuan) */
    --im-or-act: #C2410C;   /* TEKS & cincin fokus: oranye lebih gelap, 5,2:1 di atas putih */
    --im-or-fill:#F26522;   /* LATAR tombol/lencana/pil aktif (teks putih besar-tebal di atasnya) */
    /* Tint dicerahkan dari #FFF1EC ke #FFF6F3 (2026-10-01): tombol
       "+ Keranjang" di kartu katalog memakai TEKS oranye di atas tint ini, dan
       di #FFF1EC rasionya cuma 4,38:1 — meleset tipis dari ambang 4,5:1. Di
       #FFF6F3 jadi 4,54:1. Bedanya hampir tak terlihat, tapi tombolnya muncul
       di setiap kartu produk, jadi yang tipis pun layak dibenahi. */
    --im-or-tint:#FFF1E8;

    /* Bayangan berlapis: satu garis tipis + satu sebaran lembut. Lebih hidup
       daripada satu bayangan pekat, dan tidak membuat halaman terlihat kotor. */
    --ui-shadow-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
    --ui-shadow:    0 2px 4px rgba(16, 24, 40, .04), 0 8px 24px -8px rgba(16, 24, 40, .12);
    --ui-shadow-lg: 0 4px 8px rgba(16, 24, 40, .04), 0 20px 40px -12px rgba(16, 24, 40, .18);

    /* PENYERAGAMAN WARNA SELURUH SITUS (2026-10-01, atas permintaan pemilik:
       "warnanya semua disamakan dengan index, jangan beda-beda").
       Biru merek #0F52BA dan oranye lama #FF6B35 DIPENSIUNKAN. Nilainya diganti
       di tiga tempat sekaligus supaya tidak ada satu pun halaman yang tertinggal:
         1. assets/css/tailwind-built.css — semua kelas bg-/text-/border-brand &
            -gold beserta seluruh varian opasitasnya (bg-brand/5 dst). Berkas itu
            statis, jadi nilainya diganti langsung; tidak bisa dikompilasi ulang
            karena itu butuh Node.
         2. tailwind.config.js — supaya kompilasi ulang di masa depan menghasilkan
            warna yang sama, tidak mengembalikan biru.
         3. hex & rgba sebaris di berkas *.php dan *.js (gradasi, SVG, badan email).
       Token di bawah ikut disamakan supaya komponen .im-* dan kelas Tailwind
       lama tidak pernah berbeda sedikit pun. */
    --ui-brand:      #C2410C;   /* dipakai terutama untuk TEKS (lihat .im-store-verified dst.) */
    --ui-brand-deep: #A8360A;
    --ui-accent:     #F26522;
    --ui-ink:        #16161D;
    --ui-ink-soft:   #5A5A6B;
    --ui-line:       #E6E6EF;
    --ui-fog:        #F7FAFA;
}

/* =============================================================================
   1. TIPOGRAFI — perubahan gaya yang paling terasa
   =============================================================================
   Desain lama memakai kombinasi HURUF BESAR SEMUA + jarak antar huruf sangat
   lebar (`tracking-wide2` = 0.22em) di hampir setiap label, tombol, dan judul
   kecil. Itulah yang membuat situs terasa seperti katalog butik, bukan tempat
   belanja: teks jadi lambat dibaca dan setiap label berteriak sama kerasnya.

   Jarak hurufnya dipangkas drastis (0.22em -> 0.04em). Ini SATU-SATUNYA
   penimpaan berbasis kelas di berkas ini, dan disengaja: kelas itu dipakai di
   ratusan tempat, jadi mengubah nilainya di sini adalah cara paling aman
   mengubah karakter tipografi seluruh situs sekaligus. */
.tracking-wide2 { letter-spacing: .04em !important; }

body {
    font-family: var(--ui-font);   /* Poppins — menimpa 'Archivo' yang ditulis sebaris di <style> tiap halaman (berkas ini dimuat setelahnya) */
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.006em;
}

/* Judul lebih tebal & rapat — bahasa visual antarmuka modern, menggantikan
   judul serif tipis berjarak lebar. */
h1, h2, h3, h4 {
    letter-spacing: -0.02em;
    font-weight: 800;
}

/* Angka (harga, saldo, hitung mundur) memakai lebar digit seragam supaya tidak
   "bergoyang" saat berubah dan mudah dibandingkan antar baris. */
.tabular-nums, .adm-money, td, th { font-variant-numeric: tabular-nums; }

/* =============================================================================
   2. TOMBOL
   =============================================================================
   Dasar: sudut membulat, teks tidak lagi renggang, dan umpan balik sentuh yang
   terasa (naik sedikit saat disorot, turun saat ditekan). */
button, .btn, input[type="submit"], input[type="button"] {
    border-radius: var(--ui-radius-sm);
    transition: background-color .16s ease, color .16s ease,
                box-shadow .16s ease, transform .12s ease, border-color .16s ease;
}

button:not(:disabled):hover,
.btn:not(:disabled):hover { transform: translateY(-1px); }

button:not(:disabled):active,
.btn:not(:disabled):active { transform: translateY(0); }

/* Cincin fokus yang terlihat jelas untuk pengguna keyboard — sebelumnya banyak
   tombol/tautan tidak punya penanda fokus sama sekali. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--im-or-act);
    outline-offset: 2px;
    border-radius: var(--ui-radius-sm);
}

/* =============================================================================
   3. FORM
   ============================================================================= */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
    border-radius: var(--ui-radius-sm);
    transition: border-color .16s ease, box-shadow .16s ease;
}

input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--im-or-act);
    box-shadow: 0 0 0 3px rgba(242, 101, 34, .18);
}

/* Kotak centang & radio ikut warna brand tanpa perlu kelas tambahan. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--im-or-act); }

::placeholder { color: #A0A0B0; opacity: 1; }

/* =============================================================================
   4. KARTU & PERMUKAAN
   =============================================================================
   Kartu produk di katalog: sudut membulat + bayangan yang tumbuh saat disorot,
   menggantikan blok bersudut tajam tanpa kedalaman. */
/* Kartu produk: sudut membulat + bayangan lembut yang tumbuh saat disorot,
   mengikuti acuan. Kartu tetap TIDAK bergeser naik — di grid padat sepuluh
   kartu melompat berbarengan bikin gelisah, dan di ponsel pergeseran itu
   memicu salah sentuh. Sinyal sorot datang dari bayangan + tepi, bukan gerak. */
.product-card {
    border-radius: var(--ui-radius) !important;
    box-shadow: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.product-card:hover {
    border-color: #E0E0E6 !important;
    box-shadow: 0 6px 20px -6px rgba(16, 24, 40, .14);
    transform: none !important;
}

/* Kartu panel admin & dasbor. */
.card, .adm-card, .glass-card {
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-sm);
}
.card:hover, .adm-card:hover { box-shadow: var(--ui-shadow); }

/* Gambar produk tidak lagi menempel di sudut tajam kartu. */
.card-media { border-radius: var(--ui-radius-sm); overflow: hidden; }

/* =============================================================================
   5. MODAL & PANEL GESER
   ============================================================================= */
#modal-invoice, #modal-produk, .modal-panel {
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-lg);
}

/* =============================================================================
   6. TABEL (panel admin, penjual, driver)
   ============================================================================= */
table { border-collapse: separate; border-spacing: 0; }
table tbody tr { transition: background-color .12s ease; }

/* =============================================================================
   7. DETAIL KECIL YANG MENAIKKAN KESAN RAPI
   ============================================================================= */
/* Sembunyikan batang gulir horizontal pada baris produk yang digeser. */
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* Teks terpotong dua baris dipakai di banyak kartu; didefinisikan sekali di
   sini supaya tidak bergantung pada plugin Tailwind yang belum tentu dimuat. */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Blok gambar yang belum termuat tidak "melompat" saat gambarnya datang. */
img { max-width: 100%; height: auto; }

/* Seleksi teks memakai warna brand — sentuhan kecil yang membuat situs terasa
   dirancang, bukan bawaan browser. */
::selection { background: rgba(242, 101, 34, .2); color: var(--ui-ink); }

/* =============================================================================
   8. GERAKAN & MICRO-INTERACTION (lapisan modernisasi kedua)
   =============================================================================
   Bagian 1-7 di atas menata bentuk (sudut, bayangan, tipografi). Bagian ini
   menata GERAK: bagaimana elemen muncul, ditekan, dan berpindah — hal yang
   paling terasa sebagai "modern" tapi paling gampang terlewat karena tidak
   mengubah tampilan diam sama sekali, cuma transisinya.

   Trik yang dipakai di seluruh bagian ini: elemen yang berpindah dari
   `display:none` (kelas `.hidden`) ke terlihat otomatis MEMUTAR ULANG animasi
   CSS-nya setiap kali browser me-render ulang node itu — tidak perlu
   menyentuh JS mana pun yang men-toggle `.hidden`, di halaman mana pun,
   asalkan modal/panelnya sudah memakai kelas yang ditarget di sini. */
@keyframes chaelFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes chaelPopIn {
    from { opacity: 0; transform: scale(.95) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Konten utama tidak lagi "muncul begitu saja" saat halaman selesai dimuat —
   sangat singkat (.35s) supaya tidak terasa lambat, cuma menghaluskan kesan
   pertama. */
body { animation: chaelFadeIn .35s ease; }

/* Backdrop modal (elemen `id="modal-xxx"` — pola yang dipakai di seluruh
   situs, toko maupun admin) memudar masuk alih-alih muncul mendadak, dan
   kotak kontennya (kelas `.glass-card`/`.shadow-2xl`/`.modal-panel` — sudah
   dipakai di hampir setiap modal yang ada) membesar lembut dari sedikit
   lebih kecil. Backdrop mobile sidebar admin memakai animasi yang sama. */
[id^="modal-"] { animation: chaelFadeIn .18s ease; }
[id^="modal-"] .glass-card,
[id^="modal-"] .shadow-2xl,
[id^="modal-"] .modal-panel {
    animation: chaelPopIn .28s cubic-bezier(.16, 1, .3, 1);
}
#mobileBackdrop:not(.hidden) { animation: chaelFadeIn .2s ease; }

/* Tombol hapus/blokir massal (fitur checklist) tidak lagi "meloncat" muncul
   begitu baris pertama dicentang. */
.bulk-delete-btn:not(.hidden) { animation: chaelPopIn .2s ease; }

/* Umpan balik tekan yang lebih terasa di layar sentuh: bukan cuma naik saat
   disorot (sudah ada di bagian 2), tapi juga sedikit "menyusut" saat ditekan
   — meniru tombol fisik, paling terasa bedanya di HP. */
button:not(:disabled):active,
.btn:not(:disabled):active { transform: translateY(0) scale(.98); }

/* Utilitas shimmer untuk status "memuat…" — dipasang manual lewat class
   `skeleton` pada blok placeholder (mis. sebelum chat/riwayat termuat),
   menggantikan teks polos "Memuat..." yang terasa kaku. */
.skeleton {
    position: relative;
    overflow: hidden;
    background: #EDEDF2;
    border-radius: var(--ui-radius-sm);
}
.skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
    animation: chaelShimmer 1.4s ease-in-out infinite;
}
@keyframes chaelShimmer { to { transform: translateX(100%); } }

/* Pengguna yang mematikan animasi di sistemnya tidak dipaksa melihat transisi. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    button:hover, .btn:hover, .product-card:hover { transform: none !important; }
    .skeleton::after { animation: none !important; }
}

/* =============================================================================
   PERBAIKAN TAMPILAN PONSEL — PANEL GESER (OFF-CANVAS)
   =============================================================================
   Masalah yang diperbaiki (ditemukan lewat pengukuran di lebar 420px):
   panel keranjang (#cart-sidebar) dan menu samping diposisikan di LUAR layar
   sebelah kanan memakai `translate-x-full`. Posisi di luar layar itu tetap
   dihitung sebagai lebar halaman, sehingga seluruh beranda ikut melar ~2x lebar
   layar: judul terpotong, kartu keluar batas, dan halaman bisa digeser ke
   samping. Di ponsel — mayoritas pembeli — ini membuat situs terasa rusak.

   Perbaikannya: kunci lebar dokumen ke lebar layar. Panel tetap bisa muncul
   karena ia `position: fixed` (tidak terpengaruh overflow induknya).
   ========================================================================== */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Panel yang sedang tertutup tidak boleh bisa diklik atau dibaca pembaca layar. */
#cart-sidebar.translate-x-full,
#menu-sidebar.-translate-x-full {
    pointer-events: none;
}

/* =============================================================================
   9. LAPISAN MARKETPLACE — PEMBENAHAN DESAIN 2026-10-01
   =============================================================================
   Masalah yang diperbaiki: IMMERO adalah marketplace MULTI-PENJUAL (toko mitra,
   lini makanan + driver, digital/PPOB, reseller), tapi tampilannya memakai
   kosakata visual baku marketplace global — deret ikon beremoji di dalam
   lingkaran, sabuk lencana jaminan, harga berwarna merek, dan kartu mengambang.
   Dua akibatnya: (1) situsnya tidak punya wajah sendiri, (2) nama TOKO PENJUAL
   tidak pernah muncul di kartu produk, padahal justru itu yang membedakan
   marketplace dari toko tunggal.

   Pendekatannya: tetap PADAT (marketplace harus sanggup memajang ratusan
   produk), tapi ditata dengan tipografi dan garis rambut, bukan dengan warna
   dan bayangan. Kelas di sini ditulis tangan — BUKAN kelas Tailwind baru —
   supaya tidak perlu kompilasi ulang tailwind-built.css.

   CATATAN: paragraf disiplin warna yang dulu ada di sini sudah TIDAK BERLAKU.
   Ia menyebut tiga warna (tinta untuk aksi, biru untuk tautan, oranye hanya
   untuk hal mendesak). Sejak penyeragaman 2026-10-01 situs memakai SATU warna
   aksi, #CB430D, untuk semuanya — lihat blok --im-or-act di bagian atas berkas
   ini. Komentar lama dibiarkan terhapus daripada menyesatkan pembaca
   berikutnya.
   ========================================================================== */

/* ---- 9.1 TIPOGRAFI -------------------------------------------------------
   Playfair Display + Plus Jakarta Sans adalah pasangan yang dipakai di ribuan
   template, jadi ia justru MENEGASKAN kesan generik. Instrument Serif (judul)
   + Archivo (antarmuka) memberi karakter sendiri sekaligus lebih rapat —
   penting untuk halaman yang padat daftar. Didefinisikan di sini supaya satu
   berkas mengubah seluruh situs; berkas ini dimuat paling akhir di tiap
   halaman, jadi nilai ini menang atas blok <style> sebaris maupun
   tailwind-built.css tanpa perlu !important.
   Catatan: tailwind.config.js ikut diperbarui agar kompilasi ulang di masa
   depan tidak mengembalikan Playfair — tapi situs tidak menunggu kompilasi. */
.font-serif {
    /* Dulu Instrument Serif (era butik). Kini Poppins tebal — seragam dengan desain acuan. */
    font-family: var(--ui-font);
}

/* Judul serif tidak boleh ikut aturan "tebal & rapat" di bagian 1: Instrument
   Serif hanya punya berat 400, dan huruf serif bergaris tipis jadi kotor kalau
   dipaksa tebal lewat sintesis browser. */
h1.font-serif, h2.font-serif, h3.font-serif, h4.font-serif, .font-serif {
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* ---- 9.2 KARTU PRODUK ---------------------------------------------------- */

/* Harga memakai oranye aksi, mengikuti acuan. Nilainya --im-or-act (bukan
   oranye merek yang lebih cerah) karena harga adalah teks kecil-tebal: pada
   15-17px keringanan "teks besar" belum berlaku, jadi ia wajib >= 4,5:1.
   Lebar digit diseragamkan supaya satu kolom harga sejajar rapi ke bawah. */
.im-price {
    color: var(--im-or-act);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.015em;
}
/* Harga sebelum diskon. Warnanya DIGELAPKAN dari #9A9AA8 ke #6B6B79: diukur
   dengan rumus WCAG, #9A9AA8 di atas putih hanya 2,78:1 — di bawah ambang 4,5:1
   untuk teks. Ini bukan hiasan: angka itu memberi tahu pembeli berapa harga
   aslinya, jadi ia harus benar-benar terbaca. #6B6B79 terukur 5,24:1. */
.im-price-was {
    color: #6B6B79;
    text-decoration: line-through;
    font-variant-numeric: tabular-nums;
}

/* Nama toko penjual — inti marketplace multi-penjual. Sebelumnya kartu hanya
   menampilkan KOTA, sehingga lima produk dari lima toko berbeda tampak seperti
   stok satu penjual. */
.im-store {
    color: var(--ui-ink-soft);
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}
.im-store-name {
    color: var(--ui-ink);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.im-store-verified { color: var(--ui-brand); flex-shrink: 0; }

/* Lencana tenang: teks berbatas garis rambut, tanpa blok warna dan tanpa
   emoji. Dulu "⭐ Star Seller" (pil kuning) dan "🚚 Gratis Ongkir" (pil hijau)
   berebut perhatian dengan nama produk di setiap kartu. */
.im-badge {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--ui-line);
    color: var(--ui-ink-soft);
    background: #FFFFFF;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .02em;
    padding: 2px 6px;
    border-radius: 3px;
    white-space: nowrap;
}
.im-badge-star { border-color: #D8C38A; color: #8A6A1F; }

/* Penanda diskon: persegi di sudut, bukan bendera bersudut membulat. Oranye
   dipakai DI SINI — ini memang informasi mendesak. */
/* Oranye penanda diskon DIGELAPKAN dari #E8622C ke #C2410C. Alasannya terukur:
   teks putih di atas #E8622C hanya 3,38:1 — gagal ambang 4,5:1 untuk teks kecil
   (labelnya 10-11px, jadi keringanan "teks besar" tidak berlaku). Di atas
   #C2410C jadi 5,18:1. Sekalian menyatukan oranye jadi SATU nilai di seluruh
   situs, supaya warna mendesak tidak punya tiga versi yang mirip-mirip. */
.im-disc {
    background: var(--im-or-fill);
    color: #FFFFFF;
    border-bottom-right-radius: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

/* Tombol "+ Keranjang" di kartu katalog: oranye MUDA (latar tint, teks oranye
   aksi), bukan oranye penuh. Alasannya kepadatan — di grid berisi puluhan
   kartu, tombol penuh warna di setiap kartu membuat halaman terbaca sebagai
   deretan iklan. Tombol oranye PENUH disimpan untuk aksi tunggal yang memang
   utama di halamannya (Mulai Belanja, Masuk) — lihat .im-btn-or. */
.im-cta {
    background: var(--im-or-tint);
    color: var(--im-or-act);
    border: 1px solid transparent;
    font-weight: 700;
    border-radius: 999px;
    transition: background-color .16s ease, color .16s ease;
}
.im-cta:hover { background: var(--im-or-fill); color: #FFFFFF; }

/* Tombol sekunder sepadan (dipakai di hero & petak layanan). */
.im-cta-ghost {
    background: #FFFFFF;
    color: var(--ui-ink);
    border: 1px solid var(--ui-ink);
    font-weight: 600;
    border-radius: var(--ui-radius-sm);
    transition: background-color .16s ease;
}
.im-cta-ghost:hover { background: var(--ui-fog, #F7FAFA); }

/* Tombol wishlist tidak lagi bulat-oranye mengambang di atas foto; ia jadi
   kotak putih bergaris rambut di sudut, hanya menonjol saat disorot. */
.btn-wishlist {
    border-radius: 999px !important;
    border: 1px solid var(--ui-line);
    box-shadow: none !important;
}
.btn-wishlist:hover { border-color: var(--im-or-act); transform: none !important; }

/* ---- 9.3 PETAK KATEGORI & LAYANAN ---------------------------------------
   Pengganti lingkaran beremoji. Persegi bergaris rambut dengan nama kategori
   diset serif: dua kategori berbeda tidak pernah tampak sama (dulu belasan
   kategori jatuh ke ikon umum yang sama), dan polanya sanggup menampung
   kategori sebanyak apa pun tanpa perlu aset gambar. */
.im-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--ui-line);
    background: #FFFFFF;
    border-radius: var(--ui-radius-sm);
    padding: 13px 14px;
    transition: border-color .18s ease;
    min-width: 0;
}
.im-tile:hover { border-color: var(--ui-ink); }
.im-tile-mark {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ui-fog, #F7FAFA);
    border: 1px solid var(--ui-line);
    border-radius: 3px;
    font-family: var(--ui-font); font-weight: 700;
    font-size: 17px;
    line-height: 1;
    color: var(--ui-ink);
}
.im-tile:hover .im-tile-mark { border-color: var(--ui-ink); }

/* Petak kategori ringkas (tanpa keterangan) untuk rel kategori. */
.im-cat {
    display: flex;
    flex-direction: column;
    gap: 9px;
    border: 1px solid var(--ui-line);
    background: #FFFFFF;
    border-radius: var(--ui-radius-sm);
    padding: 12px;
    transition: border-color .18s ease;
    min-width: 0;
}
.im-cat:hover { border-color: var(--ui-ink); }
.im-cat-mark {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ui-fog, #F7FAFA);
    border: 1px solid var(--ui-line);
    border-radius: 3px;
    font-family: var(--ui-font); font-weight: 700;
    font-size: 14px;
    line-height: 1;
    color: var(--ui-ink);
}
.im-cat-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--ui-ink);
    line-height: 1.3;
}
.im-cat:hover .im-cat-name { color: var(--ui-brand); }

/* ---- 9.4 LABEL & GARIS -------------------------------------------------- */
.im-eyebrow {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.im-rule { height: 1px; background: var(--ui-line); }

/* ---- 9.5 HERO ------------------------------------------------------------
   Hero lama: satu bidang BIRU MEREK penuh selebar layar dengan teks putih,
   tombol kapsul, dan tiga kartu jaminan bertanda centang. Itu tata letak hero
   baku marketplace. Sekarang: dasar kertas, judul serif tinta, tombol persegi
   — dan jaminan jadi tiga baris tipografi, bukan kartu kaca.
   Mode gelap tetap dipertahankan untuk kasus pemilik mengunggah foto banner:
   teks putih butuh dasar gelap. Gelapnya dibuat NETRAL (tinta), bukan biru. */
.im-hero-ink {
    background:
        linear-gradient(90deg, rgba(14,14,18,.94) 0%, rgba(14,14,18,.80) 48%, rgba(14,14,18,.30) 100%),
        linear-gradient(0deg, rgba(14,14,18,.88) 0%, rgba(14,14,18,0) 55%);
}
.im-trust-line {
    display: flex;
    gap: 13px;
    padding: 14px 0;
    border-top: 1px solid var(--ui-line);
}
.im-trust-no {
    flex-shrink: 0;
    font-family: var(--ui-font); font-weight: 700;
    font-size: 15px;
    line-height: 1.4;
    color: var(--ui-brand);
    font-variant-numeric: tabular-nums;
    width: 20px;
}

/* Di atas foto banner, garis & nomor harus terang supaya tetap terlihat. */
.im-hero-dark .im-trust-line { border-color: rgba(255, 255, 255, .18); }
.im-hero-dark .im-trust-no   { color: #F0B429; }

/* Tombol utama versi terbalik — dipakai HANYA di atas dasar gelap, tempat
   tombol hitam akan hilang. */
.im-cta-invert {
    background: #FFFFFF;
    color: var(--ui-ink);
    border: 1px solid #FFFFFF;
    font-weight: 600;
    border-radius: var(--ui-radius-sm);
    transition: background-color .16s ease;
}
.im-cta-invert:hover { background: #EDEDF2; color: var(--ui-ink); }

.im-cta-ghost-invert {
    background: transparent;
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, .45);
    font-weight: 600;
    border-radius: var(--ui-radius-sm);
    transition: border-color .16s ease, background-color .16s ease;
}
.im-cta-ghost-invert:hover { border-color: #FFFFFF; background: rgba(255, 255, 255, .08); }

/* ---- 9.6 PEMBERSIHAN WARNA ----------------------------------------------
   Bayangan oranye menyala yang dipasang pada petak layanan beranda
   (`hover:shadow-[...rgba(203, 67, 13,.85)]`) ditiadakan: nilai rgba di dalam
   kelas arbitrer Tailwind itu mengandung SPASI, jadi sebagiannya bahkan tidak
   pernah terkompilasi — dan yang sempat jadi, membuat petaknya menyala seperti
   tombol promo. Garis rambut sudah cukup sebagai umpan balik. */
a.im-tile:hover, .im-tile:hover { box-shadow: none; transform: none; }

/* =============================================================================
   10. TATA LETAK MARKETPLACE MENGIKUTI ACUAN PEMILIK (2026-10-01, revisi)
   =============================================================================
   Pemilik mengirim tangkapan layar acuan dan meminta beranda dibuat seperti
   itu. Pola yang diambil dari acuan, berurutan dari atas:

     1. Header PUTIH tipis — bukan bidang biru merek. Logo berupa persegi
        membulat oranye + nama merek tinta, kotak cari berbentuk PIL abu muda
        di tengah, dan di kanan: Jualan, keranjang, lalu satu tombol pil oranye.
     2. Hero dua kolom. Kiri: pil keterangan kecil, judul tebal sangat besar
        dengan sebagian kalimat berwarna oranye, dua tombol pil, lalu tiga
        jaminan sebaris beserta ikon garis oranye. Kanan: petak 2x2 kartu
        produk dengan satu kartu mengambang di atasnya.
     3. Pita kategori di atas dasar abu: kartu putih membulat berisi lencana
        ikon oranye muda, yang aktif bertepi oranye.

   Satu hal dari acuan yang SENGAJA tidak ditiru mentah: oranye sangat cerah
   untuk teks kecil. Lihat catatan --im-or-act di atas — nilainya diturunkan
   secukupnya agar harga dan tombol tetap terbaca.
   ========================================================================== */

/* ---- 10.1 HEADER PUTIH --------------------------------------------------- */
.im-hdr {
    background: #FFFFFF;
    border-bottom: 1px solid var(--ui-line);
    color: var(--ui-ink);
}
.im-logo-mark {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: var(--im-or-fill);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Huruf monogram di dalam kotak logo (dipakai bila pemilik BELUM mengunggah
   logo, atau berkas logonya hilang dari disk — lihat logo_kustom_bila_ada()).
   Sebelumnya ditulis sebagai kelas Tailwind arbitrer text-[12px] langsung di
   partials/marketplace-header.php. Kelas arbitrer yang belum pernah dipakai
   TIDAK ADA di assets/css/tailwind-built.css (CSS statis, tidak bisa
   dikompilasi ulang di lingkungan ini), jadi aturannya gagal tanpa pesan dan
   hurufnya tampil seukuran teks badan di dalam kotak 34x34 px. */
.im-logo-mark > span {
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* Kotak cari berbentuk pil. Kaca pembesar jadi tombol kirim di dalam pil
   sebelah kiri (seperti acuan), bukan tombol blok besar di kanan. */
.im-search {
    display: flex;
    align-items: center;
    background: #F4F4F6;
    border: 1.5px solid transparent;
    border-radius: 999px;
    height: 42px;
    transition: border-color .16s ease, background-color .16s ease;
}
.im-search:focus-within { background: #FFFFFF; border-color: var(--im-or-act); }
.im-search input {
    flex-grow: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: none;
    background: transparent;
    font-size: 13.5px;
    color: var(--ui-ink);
    padding: 0 16px 0 2px;
    border-radius: 999px;
}
.im-search input::placeholder { color: #6B6B79; }
.im-search button {
    width: 42px;
    height: 100%;
    background: none;
    border: 0;
    cursor: pointer;
    color: #8A8A95;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    flex-shrink: 0;
}
.im-search button:hover { color: var(--im-or-act); transform: none; }

/* Lebar & pemusatan kolom pencarian di layar lebar. */
@media (min-width: 768px) {
    .im-search-wrap { max-width: 560px; margin-left: auto; margin-right: auto; }
}
/* Teks promo di bilah atas dipotong, tidak mendorong tautan di sebelahnya. */
.im-promo-txt { max-width: 30vw; }

/* Tautan/tombol header yang berubah oranye saat disorot. Ditulis sebagai kelas
   nyata karena `hover:text-[#CB430D]` adalah kelas arbitrer yang TIDAK ada di
   tailwind-built.css — ia tidak akan melakukan apa pun. */
.im-or-link { color: var(--ui-ink); transition: color .16s ease; }
.im-or-link:hover { color: var(--im-or-act); }

/* Berkas ini dimuat SETELAH tailwind-built.css, jadi .im-or-link akan menang
   atas .text-ink-soft yang kekhususannya sama. Padahal pada navigasi bawah
   ponsel, butir yang TIDAK aktif memang harus abu. Aturan dua-kelas di bawah
   mengembalikannya, tanpa mengorbankan sorot oranye. */
.im-or-link.text-ink-soft { color: var(--ui-ink-soft); }
.im-or-link.text-ink-soft:hover { color: var(--im-or-act); }

/* Butir navigasi bawah ponsel yang sedang aktif. */
.im-nav-aktif { color: var(--im-or-act); font-weight: 600; }

/* Bayangan di atas navigasi bawah ponsel, supaya ia terpisah dari isi halaman
   saat digulir. Sebelumnya ditulis sebagai `shadow-[0_-2px_12px_rgba(...)]` —
   kelas arbitrer yang tidak pernah ikut terkompilasi ke tailwind-built.css,
   jadi bayangannya TIDAK PERNAH muncul sama sekali. */
.im-bottomnav { box-shadow: 0 -2px 12px rgba(0, 0, 0, .06); }

/* =============================================================================
   11. AKIBAT PENYERAGAMAN WARNA — PERBAIKAN YANG WAJIB IKUT
   =============================================================================
   Dulu situs punya DUA warna: biru merek untuk permukaan, oranye untuk aksen di
   atasnya. Begitu keduanya disamakan jadi satu oranye, pasangan itu runtuh:

     - `text-gold` dipakai sebagai aksen DI ATAS header biru. Sekarang header
       itu oranye, jadi teksnya oranye-di-atas-oranye — HILANG sama sekali.
     - `hover:text-gold` pada tautan di header yang sama: sorotnya tak terlihat.
     - Tombol `bg-gold text-ink` dulu oranye terang dengan teks gelap. Oranye
       barunya jauh lebih pekat, jadi teks gelap di atasnya jatuh di bawah
       ambang keterbacaan.

   Ketiganya dibenahi di sini secara KONTEKSTUAL — hanya ketika elemennya benar
   benar duduk di atas permukaan oranye/gelap. `text-gold` di atas dasar putih
   tidak disentuh: di sana ia sudah 4,83:1 dan memang seharusnya oranye.
   ========================================================================== */

/* Aksen di atas permukaan oranye/gelap -> putih. */
.bg-brand .text-gold,       .bg-brand-deep .text-gold,       .bg-ink .text-gold,
.bg-brand .text-gold-deep,  .bg-brand-deep .text-gold-deep,
[class*="from-brand"] .text-gold,
[class*="from-brand"] .text-gold-deep { color: #FFFFFF; }

/* Sorot tautan di atas permukaan oranye/gelap -> putih. */
.bg-brand .hover\:text-gold:hover,
.bg-brand-deep .hover\:text-gold:hover,
.bg-ink .hover\:text-gold:hover,
[class*="from-brand"] .hover\:text-gold:hover { color: #FFFFFF; }

/* Teks gelap DI ATAS tombol oranye -> putih. Dua kelas, jadi menang atas
   .text-ink yang kekhususannya satu kelas. */
.bg-gold.text-ink,       .bg-gold-deep.text-ink,
.bg-brand.text-ink,      .bg-brand-deep.text-ink,
.hover\:bg-gold:hover.text-ink { color: #FFFFFF; }

/* Garis tepi "gold" di atas permukaan oranye juga lenyap; dibuat putih samar. */
.bg-brand .border-gold, .bg-brand-deep .border-gold { border-color: rgba(255, 255, 255, .45); }

/* Lencana/tombol ber-LATAR gold yang kebetulan duduk DI DALAM header oranye
   (mis. chip "Food" dan tombol cari di food.php) kini sewarna dengan
   latarnya — bentuknya hilang sama sekali. Dibalik jadi chip PUTIH dengan
   teks oranye: tetap menonjol, dan rasionya 4,83:1.
   Harus datang SETELAH aturan .bg-gold.text-ink di atas, karena kekhususannya
   sama (0,2,0) sehingga urutan sumber yang menentukan. */
.bg-brand .bg-gold,       .bg-brand-deep .bg-gold,
.bg-brand .bg-gold-deep,  .bg-brand-deep .bg-gold-deep,
.bg-brand .bg-brand,      .bg-brand-deep .bg-brand {
    background-color: #FFFFFF;
    color: var(--im-or-act);
}
.bg-brand .bg-gold:hover, .bg-brand-deep .bg-gold:hover { background-color: #F4F4F6; color: var(--im-or-act); }

/* Lencana angka (notifikasi, isi keranjang) — oranye, satu-satunya tempat
   warna mendesak muncul di header. */
.im-badge-count {
    background: var(--im-or-fill);
    color: #FFFFFF;
    font-size: 9px;
    font-weight: 800;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Nama merek di header. */
.im-wordmark { font-weight: 800; font-size: 18px; letter-spacing: -0.03em; line-height: 1; color: var(--ui-ink); }
@media (min-width: 768px) { .im-wordmark { font-size: 21px; } }

/* Paragraf pengantar hero: ukurannya naik sedikit di layar sedang ke atas. */
@media (min-width: 768px) { .im-lede { font-size: 15px; } }

/* ---- 10.2 TOMBOL PIL ----------------------------------------------------- */
.im-btn-or {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--im-or-fill);
    color: #FFFFFF;
    border: 1.5px solid var(--im-or-fill);
    border-radius: 999px;
    font-weight: 700;
    line-height: 1;
    transition: background-color .16s ease, border-color .16s ease;
}
.im-btn-or:hover { background: #DD5410; border-color: #DD5410; color: #FFFFFF; }

.im-btn-line {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #FFFFFF;
    color: var(--ui-ink);
    border: 1.5px solid #E2E2E8;
    border-radius: 999px;
    font-weight: 700;
    line-height: 1;
    transition: border-color .16s ease, background-color .16s ease;
}
.im-btn-line:hover { border-color: var(--ui-ink); background: #FFFFFF; color: var(--ui-ink); }

/* ---- 10.3 HERO ----------------------------------------------------------- */

/* Pil keterangan kecil di atas judul. */
.im-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #F4F4F6;
    border: 1px solid #ECECF0;
    border-radius: 999px;
    padding: 6px 13px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ui-ink-soft);
}
.im-chip svg { color: var(--im-or-act); flex-shrink: 0; }

/* Judul hero: sans sangat tebal & rapat, seperti acuan — bukan serif.
   Bagian kalimat yang diberi warna memakai .im-hl (lihat index.php). */
/* PENTING — kenapa ukuran ditulis di sini, bukan sebagai kelas Tailwind:
   assets/css/tailwind-built.css adalah berkas STATIS hasil kompilasi. Kelas
   arbitrer yang belum pernah dipakai di mana pun (mis. `lg:text-[54px]`,
   `w-[88px]`, `bottom-[22%]`) TIDAK ada di dalamnya, jadi ia tidak melakukan
   apa pun dan gagal TANPA PESAN apa-apa. Diperiksa satu per satu terhadap
   berkas itu: 11 kelas yang sempat dipakai ternyata tidak terkompilasi.
   Karena itu semua ukuran komponen baru ditulis sebagai CSS biasa di sini. */
.im-display {
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.05;
    color: var(--ui-ink);
    font-size: 34px;
}
@media (min-width: 640px) { .im-display { font-size: 44px; } }
@media (min-width: 1024px) { .im-display { font-size: 54px; } }
.im-hl { color: var(--im-or-act); }

/* Paragraf pengantar di bawah judul hero. */
.im-lede { max-width: 32rem; }

/* Ukuran tombol pil besar (hero). */
.im-btn-lg { font-size: 13.5px; height: 48px; padding-left: 28px; padding-right: 28px; }

/* Tiga jaminan sebaris beserta ikon garis oranye. */
.im-trust {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--ui-ink-soft);
    white-space: nowrap;
}
.im-trust svg { color: var(--im-or-act); flex-shrink: 0; }

/* Kartu produk kecil di petak 2x2 sebelah kanan hero. */
.im-shot {
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius);
    overflow: hidden;
    transition: box-shadow .18s ease;
}
.im-shot:hover { box-shadow: 0 8px 24px -8px rgba(16, 24, 40, .16); }
.im-shot-img { aspect-ratio: 1 / 1; background: #F4F4F6; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.im-shot-img img { width: 100%; height: 100%; object-fit: cover; }

/* Kartu mengambang di atas petak — penarik perhatian seperti di acuan.
   Posisinya ditulis di sini (bukan `bottom-[22%]`, yang tidak terkompilasi). */
.im-float {
    position: absolute;
    left: 8px;
    bottom: 22%;
    background: #FFFFFF;
    border-radius: var(--ui-radius);
    box-shadow: 0 16px 40px -12px rgba(16, 24, 40, .28);
    padding: 13px 18px;
    z-index: 10;
    max-width: 190px;
}
@media (min-width: 768px) { .im-float { left: 24px; } }
.im-float-nilai { font-size: 19px; line-height: 1; }
.im-float-ket   { font-size: 11px; line-height: 1.35; margin-top: 4px; color: var(--ui-ink-soft); }

/* ---- 10.4 PITA KATEGORI -------------------------------------------------- */
.im-catcard {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: #FFFFFF;
    border: 1.5px solid transparent;
    border-radius: var(--ui-radius);
    padding: 14px 8px;
    text-align: center;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.im-catcard:hover { border-color: #E2E2E8; box-shadow: 0 4px 14px -6px rgba(16, 24, 40, .16); }
.im-catcard.is-active { border-color: var(--im-or-act); }
/* Lebar tetap supaya pita kategori tetap rapi saat digeser mendatar. */
.im-catcard { flex: 0 0 auto; width: 88px; }
@media (min-width: 768px) { .im-catcard { width: 96px; } }

.im-catmark {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--im-or-tint);
    color: var(--im-or-act);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.im-catcard.is-active .im-catmark { background: var(--im-or-fill); color: #FFFFFF; }

.im-catname {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ui-ink);
    line-height: 1.25;
}

/* ---- 10.5 PENYESUAIAN LAMA ----------------------------------------------
   Kelas dari revisi sebelumnya yang masih dipakai halaman lain disesuaikan
   agar tidak bentrok dengan bahasa baru ini. */
/* Petak layanan (Makanan / Digital / Koin / Driver) disamakan dengan pita
   kategori: sudut membulat, lencana ikon beroranye muda, tepi menggelap saat
   disorot. Sebelumnya ia masih memakai gaya dari revisi tajam — garis rambut
   dan lencana abu — sehingga satu-satunya baris di beranda yang tampak dari
   desain berbeda. */
.im-tile, .im-cat { border-radius: var(--ui-radius); }
.im-tile:hover, .im-cat:hover { border-color: #E2E2E8; box-shadow: 0 4px 14px -6px rgba(16, 24, 40, .16); }
.im-tile-mark, .im-cat-mark {
    border-radius: 12px;
    background: var(--im-or-tint);
    color: var(--im-or-act);
    border-color: transparent;
}
.im-tile:hover .im-tile-mark, .im-cat:hover .im-cat-mark { border-color: transparent; }

/* Pil saringan kategori di bagian katalog. Keadaan aktifnya dipasang oleh
   assets/js/storefront.js dengan menambahkan kelas `bg-brand` (biru merek).
   Warnanya diubah jadi oranye DI SINI, bukan di JS: JS itu menyentuh pil induk
   maupun sub-kategori di beberapa tempat, dan mengubahnya berisiko membuat
   keadaan aktif tidak sinkron. Satu aturan CSS menangkap semuanya, apa pun
   urutan kelas yang dipasang. */
.cat-parent-btn.bg-brand,
.cat-sub-btn.bg-brand {
    background-color: var(--im-or-fill) !important;
    border-color: var(--im-or-fill) !important;
    color: #FFFFFF !important;
}
.cat-parent-btn:hover, .cat-sub-btn:hover { border-color: var(--im-or-act); color: var(--im-or-act); }
.cat-parent-btn.bg-brand:hover, .cat-sub-btn.bg-brand:hover { color: #FFFFFF !important; }

/* Lingkaran/kotak kecil penanda beroranye muda — dipakai di modal produk
   (lencana "%") dan di mana pun sebuah angka/simbol perlu ditonjolkan tanpa
   memakai blok warna penuh. */
.im-mark-or { background: var(--im-or-tint); color: var(--im-or-act); }

/* Kotak lambang merek di atas permukaan putih — dipakai brand_mark_html()
   varian 'gelap' (menu samping, kaki halaman, navigasi bawah ponsel). */
.im-mark-sq { background: var(--im-or-fill); color: #FFFFFF; }

/* Tombol & gelembung "gold-gradient" (digital, seller, reseller, topup_koin). Dulu gradien
   "logam" oranye -> PUTIH -> oranye yang ditulis ulang di <style> tiap halaman; kini oranye
   polos seperti tombol di desain acuan. Dimuat setelah <style> halaman itu, jadi menang.
   Teks gelap bawaannya (text-slate-950) dipertahankan: 6,6:1 di atas #F26522 (putih hanya 3,15:1). */
.gold-gradient { background: var(--im-or-fill); }
.gold-gradient:hover { background: #DD5410; }
/* Di dalam bilah navigasi ORANYE (halaman lain yang masih berbilah oranye) tombol oranye menyatu dengan latarnya -> putih
   berteks navy. Bilah halaman layanan (body.pg-dark / body.pg-top) berlatar navy, di sana oranye justru paling jelas. */
body:not(.pg-dark):not(.pg-top) nav .gold-gradient { background: #FFFFFF; color: #133E68; }
body:not(.pg-dark):not(.pg-top) nav .gold-gradient:hover { background: #FFF1E8; }

/* Gelembung pesan MILIK SENDIRI di chat. Dipasang oleh chat-widget.php lewat
   JS; dibuat sebagai kelas supaya warnanya ikut sistem, bukan biru merek. */
.im-bubble-me { background: var(--im-or-fill); }

/* Tab bagian "Origins". Sama seperti pil kategori, keadaan aktifnya dipasang
   oleh storefront.js — di sini lewat kelas `border-brand`. Warnanya ditimpa
   di CSS supaya JS tidak perlu tahu soal warna sama sekali.
   (switchTab() MENIMPA seluruh className, jadi daftar kelas di storefront.js
   ikut diperbarui agar cocok dengan markup; kalau tidak, gaya lama kembali
   begitu tab pertama kali diklik.) */
.im-tab.border-brand { border-color: var(--im-or-act) !important; }

/* Pola titik dekoratif (hero about.php). Ditulis sebagai CSS biasa karena
   `bg-[radial-gradient(...)]` adalah kelas arbitrer yang tidak pernah ikut
   terkompilasi ke tailwind-built.css — jadi polanya tidak pernah muncul. */
.im-pola-titik {
    background-image: radial-gradient(#262626 1px, transparent 1px);
    background-size: 16px 16px;
}

/* -----------------------------------------------------------------------------
   §12. KELAS ARBITRER YANG TIDAK IKUT TERKOMPILASI
   -----------------------------------------------------------------------------
   assets/css/tailwind-built.css adalah CSS STATIS; di lingkungan ini Tailwind
   tidak bisa dikompilasi ulang (perlu Node). Kelas nilai-arbitrer yang belum
   pernah dipakai saat berkas itu dibuat TIDAK ADA di dalamnya dan gagal tanpa
   pesan apa pun. Diaudit 2026-10-07: dari 81 kelas arbitrer yang dipakai di
   seluruh situs, 80 sudah ada; satu ini tidak.
   md:text-[19px] — slogan hero di lang/index.php (id/en/fr). Tanpa aturan ini
   teksnya berhenti di text-[17px] dan tidak membesar di layar >= 768px. */
@media (min-width: 768px) {
    .md\:text-\[19px\] { font-size: 19px; }
}

/* Dipakai oleh panel admin yang ditambahkan 2026-10-07 (spanduk "email belum
   terverifikasi" di Pelanggan, dan form Uji Kirim Email di Log Galat). Keduanya
   TIDAK ada di assets/css/tailwind-built.css karena belum pernah dipakai saat
   berkas statis itu dibuat, dan Tailwind tidak bisa dikompilasi ulang di sini. */
.hover\:bg-amber-800:hover { background-color: #92400e; }
.min-w-\[220px\]           { min-width: 220px; }

/* Dipakai panel "Foto Produk Saat Ini" (admin/manage_products.php, 2026-10-08)
   untuk memotong nama berkas panjang seperti prd_1777967614_2391_0.jpeg agar
   tidak melebar keluar kartunya. Tidak ada di tailwind-built.css karena belum
   pernah dipakai sebelumnya, dan Tailwind tak bisa dikompilasi ulang di sini. */
.break-all { word-break: break-all; }


/* =============================================================================
   KONTRAS TEKS DI ATAS ORANYE / NAVY (go-live 2026-10-29)
   -----------------------------------------------------------------------------
   Utilitas teks transparan (text-white/60 ... /90) dan teks "oranye tua" ditulis ketika latarnya oranye GELAP
   (#CB430D). Setelah merek memakai oranye lebih terang #F26522 dan bilah "night" menjadi navy, hasil ukur di Chrome:
     - putih transparan di atas #F26522 turun ke 2,0-2,8:1 (judul kecil, tautan "Kembali", pengalih bahasa);
     - text-brand/text-gold (#C2410C, oranye tua untuk latar PUTIH) di atas navy hanya 2,1:1;
     - tombol putih di atas emerald-500 hanya 2,5:1.
   Perbaikan dipasang di sini sekali (kelas Tailwind statis, tak bisa dikompilasi ulang): di dalam blok berlatar oranye teks
   transparan dibuat putih penuh; di atas navy teks oranye tua diganti oranye muda.
   ========================================================================== */
.bg-brand [class*="text-white/"], .bg-brand-deep [class*="text-white/"], .bg-gold [class*="text-white/"],
.bg-brand[class*="text-white/"], .bg-brand-deep[class*="text-white/"] { color: #FFFFFF; }
.bg-night .text-gold, .bg-night .text-brand, .bg-night .text-brand-deep,
.bg-navy .text-gold, .bg-navy .text-brand { color: #FFB68A; }
.bg-emerald-500.text-white { background-color: #047857; }
.bg-emerald-500.text-white:hover { background-color: #065F46; }
/* Chip/tombol kaca (bg-white/10..20) di atas blok oranye (mis. kepala halaman toko: "Chat", bahasa): putih transparan di atas
   oranye membuat latarnya LEBIH TERANG sehingga teks putihnya hanya 2,7:1. Dibuat gelap-kebiruan agar teks putih terbaca (>=4,5:1). */
.bg-brand .bg-white\/10, .bg-brand .bg-white\/15, .bg-brand .bg-white\/20,
.bg-brand-deep .bg-white\/10, .bg-brand-deep .bg-white\/15, .bg-brand-deep .bg-white\/20 { background-color: rgba(13, 47, 82, .38); }