:root {
    --merah-tua: #b00000;
    --merah: #d81f1f;
    --emas: #f5a623;
    --emas-muda: #ffd98a;
    --abu-bg: #f4f5f7;
    --teks-gelap: #222;
    --putih: #ffffff;
    --hijau-wa: #25D366;
    --radius: 14px;
    --shadow: 0 4px 14px rgba(0,0,0,0.08);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Segoe UI', Roboto, Arial, sans-serif;
    background: var(--abu-bg);
    color: var(--teks-gelap);
}

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

/* ===== HEADER ===== */
.navbar {
    background: linear-gradient(90deg, var(--merah-tua), var(--merah));
    padding: 14px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 4px solid var(--emas);
}

.navbar .brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.navbar .brand img {
    height: 44px;
    width: auto;
    border-radius: 8px;
    background: var(--putih);
    padding: 3px;
}

.navbar .brand-text h1 {
    margin: 0;
    color: var(--putih);
    font-size: 1.3rem;
    line-height: 1.1;
}

.navbar .brand-text span {
    color: var(--emas-muda);
    font-size: 0.75rem;
}

.btn-admin {
    background: var(--emas);
    color: var(--merah-tua);
    font-weight: 700;
    padding: 9px 18px;
    border-radius: 30px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: 0.2s;
}
.btn-admin:hover { background: var(--emas-muda); }

/* ===== TOMBOL OUTLINE MERAH (dipakai utk "Lihat Katalog" / "Kembali ke Katalog") ===== */
.btn-outline-merah {
    background: #fff;
    color: var(--merah-tua);
    border: 1.5px solid var(--merah-tua);
    padding: 8px 18px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: 0.15s;
}
.btn-outline-merah:hover { background: var(--merah-tua); color: #fff; }

/* ===== RUNNING TEXT / MARQUEE ===== */
/* Teknik: .marquee-track diberi padding-left:100% supaya isi teksnya
   "start" tepat di luar sisi kanan bar (belum kelihatan sama sekali),
   lalu animasi menggesernya translateX(-100%) — yaitu sejauh LEBAR
   TRACK ITU SENDIRI (padding 100% + lebar teks) — sampai teksnya benar-benar
   lewat/hilang di sisi kiri. Hasilnya: teks selalu masuk dari kanan,
   menyapu penuh satu bar, lalu keluar habis di kiri (bukan cuma
   nongol di tengah lalu geser dikit seperti sebelumnya).
   Kecepatannya (animation-duration) dihitung otomatis oleh
   assets/marquee.js berdasarkan lebar layar yang sebenarnya, supaya
   konsisten baik di HP maupun di laptop. */
.marquee-bar {
    background: var(--merah-tua);
    border-bottom: 2px solid var(--emas);
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    padding: 8px 0;
}
.marquee-track {
    display: inline-flex;
    gap: 60px;
    white-space: nowrap;
    padding-left: 100%;
    will-change: transform;
    animation-name: marquee-scroll;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 18s; /* nilai awal/cadangan, akan dihitung ulang oleh JS */
}
.marquee-track span {
    color: var(--emas-muda);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    white-space: nowrap;
}
@keyframes marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
    .marquee-track { animation: none; padding-left: 16px; }
}
@media (max-width: 520px) {
    .marquee-track { gap: 40px; }
    .marquee-track span { font-size: 0.78rem; }
}

/* ===== HERO / BANNER ===== */
.hero-banner {
    background: linear-gradient(120deg, var(--merah-tua), var(--merah) 60%, var(--emas));
    padding: 26px 28px 40px;
    color: var(--putih);
}
.hero-banner h2 { margin: 0 0 4px; font-size: 1.5rem; }
.hero-banner p { margin: 0; opacity: 0.9; }

/* ===== FILTER TABS ===== */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

.filter-bar {
    background: var(--putih);
    border-radius: 40px;
    box-shadow: var(--shadow);
    padding: 8px;
    display: flex;
    gap: 8px;
    margin-top: -28px;
    margin-bottom: 28px;
    overflow-x: auto;
}

.filter-bar a {
    padding: 10px 22px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    color: #555;
}

.filter-bar a.active {
    background: linear-gradient(90deg, var(--merah-tua), var(--merah));
    color: var(--putih);
}

/* ===== SECTION TITLE ===== */
.section-title h3 { margin: 0; font-size: 1.4rem; }
.section-title p { margin: 2px 0 20px; color: #777; font-size: 0.9rem; }

/* ===== PRODUCT GRID ===== */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    padding-bottom: 40px;
}

.card {
    background: var(--putih);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
}
.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.12);
}

.card .img-wrap {
    position: relative;
    height: 175px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-bottom: 1px solid #f0f0f0;
    padding: 10px;
}
/* object-fit: contain -> gambar upload apapun ukurannya tampil utuh & proporsional,
   tidak gepeng dan tidak terpotong, menyesuaikan template kartu */
.card .img-wrap img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    transition: transform 0.25s;
}
.card:hover .img-wrap img { transform: scale(1.06); }
.card .img-wrap .no-img { color: #bbb; font-size: 2.5rem; }

.badge-kategori {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0,0,0,0.75);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.badge-diskon {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--merah);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
}

.card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }

.row-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
}

.status-tersedia {
    color: #1a9c4c;
    background: #e5f8ec;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 12px;
    letter-spacing: 0.3px;
}
.status-habis {
    color: #b00000;
    background: #fdeaea;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 12px;
}
.status-menunggu {
    color: #a06a00;
    background: #fff3d6;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 12px;
    letter-spacing: 0.3px;
}

.satuan-label { color: #999; }

.nama-produk {
    font-weight: 600;
    font-size: 0.95rem;
    margin: 2px 0 4px;
    min-height: 40px;
}

.harga-wrap { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.harga-baru { color: var(--merah-tua); font-weight: 800; font-size: 1.1rem; }
.harga-lama { color: #aaa; text-decoration: line-through; font-size: 0.85rem; }
.diskon-hingga { font-size: 0.72rem; color: var(--emas); font-weight: 600; }
.sisa-stok { font-size: 0.72rem; color: #888; margin-top: 2px; }

.btn-wa {
    margin-top: 10px;
    background: var(--hijau-wa);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: 0.2s;
}
.btn-wa:hover { background: #1ebe57; }
.btn-wa.disabled {
    background: #ccc;
    cursor: not-allowed;
    pointer-events: none;
}

/* ===== FOOTER ===== */
.footer {
    background: var(--merah-tua);
    color: var(--emas-muda);
    padding: 34px 24px 0;
    font-size: 0.85rem;
    margin-top: 30px;
}
.footer-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255,255,255,0.15);
}
.footer-col h4 {
    color: var(--putih);
    margin: 0 0 10px;
    font-size: 0.95rem;
    letter-spacing: 0.3px;
    text-align: center;
}
.footer-col p {
    margin: 0 0 6px;
    line-height: 1.5;
    color: var(--emas-muda);
    opacity: 0.95;
    text-align: center;
}
.footer-col a { color: var(--emas-muda); }
.footer-col a:hover { text-decoration: underline; }
.footer-bawah {
    text-align: center;
    padding: 16px 0;
    font-size: 0.78rem;
    opacity: 0.85;
}
@media (max-width: 700px) {
    .footer-grid { grid-template-columns: 1fr; text-align: center; }
}

/* ===== LOGIN & ADMIN ===== */
.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--merah-tua), var(--merah), var(--emas));
    padding: 20px;
}
.login-box {
    background: var(--putih);
    border-radius: var(--radius);
    box-shadow: 0 10px 40px rgba(0,0,0,0.25);
    padding: 34px 30px;
    width: 100%;
    max-width: 360px;
    text-align: center;
}
.login-box img { height: 60px; margin-bottom: 10px; }
.login-box h2 { margin: 0 0 4px; color: var(--merah-tua); }
.login-box p { color: #888; margin-bottom: 20px; font-size: 0.85rem; }
.login-box input {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 12px;
    font-size: 0.95rem;
}
.login-box button {
    width: 100%;
    padding: 11px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(90deg, var(--merah-tua), var(--merah));
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    margin-top: 4px;
}
/* Tombol "Kembali ke Katalog" harus tetap outline kecil, bukan ikut gaya
   tombol submit di atas (.login-box button lebih spesifik dari .btn-outline-merah
   karena ada elemen "button" di selectornya, jadi perlu ditimpa lagi di sini). */
.login-box .btn-outline-merah {
    width: auto;
    background: #fff;
    color: var(--merah-tua);
    border: 1.5px solid var(--merah-tua);
    border-radius: 30px;
    padding: 8px 18px;
    margin-top: 0;
}
.login-box .btn-outline-merah:hover { background: var(--merah-tua); color: #fff; }
.alert-error {
    background: #fdeaea;
    color: #b00000;
    padding: 10px;
    border-radius: 8px;
    font-size: 0.85rem;
    margin-bottom: 14px;
}
.alert-success {
    background: #e5f8ec;
    color: #1a9c4c;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}
.alert-success .btn-lihat-keranjang {
    background: #1a9c4c;
    color: #fff !important;
    padding: 6px 16px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.78rem;
    text-decoration: none;
    white-space: nowrap;
    transition: 0.15s;
}
.alert-success .btn-lihat-keranjang:hover { background: #157e3d; }

/* ADMIN DASHBOARD */
.admin-topbar {
    background: linear-gradient(90deg, var(--merah-tua), var(--merah));
    color: #fff;
    padding: 14px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 4px solid var(--emas);
}
.admin-topbar .brand { display: flex; align-items: center; gap: 10px; }
.admin-topbar img { height: 36px; background: #fff; border-radius: 6px; padding: 2px; }
.btn-logout {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.4);
    padding: 7px 16px;
    border-radius: 20px;
    cursor: pointer;
}
.admin-wrap { max-width: 1100px; margin: 24px auto; padding: 0 20px 40px; }
.panel {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 22px;
    margin-bottom: 24px;
}
.panel h3 { margin-top: 0; color: var(--merah-tua); }

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.form-grid .full { grid-column: 1 / -1; }
.form-group label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 6px; color: #444; }
.form-group input, .form-group select {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 0.9rem;
}
.btn-primary {
    background: linear-gradient(90deg, var(--merah-tua), var(--merah));
    color: #fff;
    border: none;
    padding: 11px 24px;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
}
.btn-secondary {
    background: #eee;
    color: #444;
    border: none;
    padding: 11px 24px;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
}

table.tabel-produk {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}
table.tabel-produk th, table.tabel-produk td {
    padding: 10px 12px;
    border-bottom: 1px solid #eee;
    text-align: left;
    vertical-align: middle;
}
table.tabel-produk th { background: #fafafa; color: #555; }
table.tabel-produk img { width: 46px; height: 46px; object-fit: cover; border-radius: 6px; }

.aksi { display: flex; gap: 8px; flex-wrap: wrap; }
.aksi a {
    margin-right: 0;
    font-weight: 700;
    font-size: 0.76rem;
    padding: 6px 14px;
    border-radius: 20px;
    text-decoration: none;
    display: inline-block;
    color: #fff !important;
    transition: 0.15s;
}
.aksi .edit { background: var(--emas); }
.aksi .edit:hover { background: #d68f10; }
.aksi .hapus {
    background: var(--merah);
    /* .hapus juga dipakai sebagai tombol bundar kecil (x) di keranjang,
       jadi lebar/tinggi tetapnya harus di-reset di sini supaya teks
       "Hapus" di tabel admin tidak kepotong jadi "Ha". */
    width: auto;
    height: auto;
    border-radius: 20px;
}
.aksi .hapus:hover { background: var(--merah-tua); }

.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat-card {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px;
    border-left: 5px solid var(--emas);
}
.stat-card h4 { margin: 0; font-size: 1.6rem; color: var(--merah-tua); }
.stat-card p { margin: 4px 0 0; color: #888; font-size: 0.85rem; }

@media (max-width: 640px) {
    .form-grid { grid-template-columns: 1fr; }
    .navbar .brand-text span { display: none; }
}

/* ===== NAV ACTIONS & KERANJANG ===== */
.nav-actions { display: flex; align-items: center; gap: 10px; }

.btn-keranjang {
    position: relative;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.45);
    color: #fff;
    padding: 9px 18px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: 0.2s;
}
.btn-keranjang:hover { background: rgba(255,255,255,0.28); }

.badge-jumlah {
    background: var(--emas);
    color: var(--merah-tua);
    font-size: 0.72rem;
    font-weight: 800;
    min-width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}

.btn-nav-outline {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.45);
    color: #fff;
    padding: 9px 18px;
    border-radius: 30px;
    font-weight: 600;
    cursor: pointer;
}
.btn-nav-outline:hover { background: rgba(255,255,255,0.28); }

/* ===== SEARCH BOX ===== */
.search-box {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    max-width: 420px;
}
.search-box input {
    flex: 1;
    padding: 11px 16px;
    border: none;
    border-radius: 30px;
    font-size: 0.9rem;
    outline: none;
}
.search-box button {
    background: var(--emas);
    color: var(--merah-tua);
    border: none;
    padding: 11px 24px;
    border-radius: 30px;
    font-weight: 700;
    cursor: pointer;
}
.search-box button:hover { background: var(--emas-muda); }

/* ===== TOMBOL TAMBAH KERANJANG DI KARTU ===== */
.form-tambah {
    display: flex;
    gap: 6px;
    margin-top: 10px;
}
.input-qty-kecil {
    width: 52px;
    padding: 9px 6px;
    border: 1px solid #ddd;
    border-radius: 10px;
    text-align: center;
    font-size: 0.9rem;
}
.btn-keranjang-tambah {
    flex: 1;
    background: linear-gradient(90deg, var(--merah-tua), var(--merah));
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 10px 8px;
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
    transition: 0.2s;
}
.btn-keranjang-tambah:hover { filter: brightness(1.12); }

.btn-wa-kecil {
    margin-top: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid var(--hijau-wa);
    color: var(--hijau-wa);
    border-radius: 10px;
    padding: 8px;
    font-weight: 700;
    font-size: 0.8rem;
    transition: 0.2s;
}
.btn-wa-kecil:hover { background: var(--hijau-wa); color: #fff; }

/* ===== FLOATING CART ===== */
.floating-cart {
    position: fixed;
    bottom: 22px;
    right: 22px;
    background: linear-gradient(90deg, var(--merah-tua), var(--merah));
    color: #fff;
    padding: 14px 24px;
    border-radius: 40px;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 0 6px 20px rgba(176,0,0,0.4);
    z-index: 60;
    border: 2px solid var(--emas);
    transition: 0.2s;
}
.floating-cart:hover { transform: translateY(-3px); }

/* ===== HALAMAN KERANJANG ===== */
.keranjang-layout {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 22px;
    align-items: start;
    padding-bottom: 40px;
}

.panel-checkout { position: sticky; top: 100px; }

table.tabel-keranjang {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}
table.tabel-keranjang th, table.tabel-keranjang td {
    padding: 12px 10px;
    border-bottom: 1px solid #eee;
    text-align: left;
    vertical-align: middle;
}
table.tabel-keranjang th {
    background: #fafafa;
    color: #666;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.thumb-keranjang {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 8px;
    background: #f0f0f0;
}
.thumb-keranjang.no-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #bbb;
}

.input-qty {
    width: 64px;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 8px;
    text-align: center;
}

.ringkasan-baris {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px dashed #e5e5e5;
    font-size: 0.9rem;
}
.ringkasan-baris.total {
    border-bottom: none;
    border-top: 2px solid var(--emas);
    margin-top: 6px;
    padding-top: 14px;
    font-size: 1.05rem;
}
.ringkasan-baris.total strong { color: var(--merah-tua); font-size: 1.25rem; }

.hapus {
    color: #fff;
    background: var(--merah);
    font-weight: 700;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    text-decoration: none;
    transition: 0.15s;
}
.hapus:hover { background: var(--merah-tua); }

/* ===== BADGE HARGA CORET DI ADMIN ===== */
.harga-coret-admin {
    color: #aaa;
    text-decoration: line-through;
    font-size: 0.8rem;
}
.hemat-label {
    display: inline-block;
    background: #fdeaea;
    color: var(--merah);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    margin-top: 3px;
}

@media (max-width: 860px) {
    .keranjang-layout { grid-template-columns: 1fr; }
    .panel-checkout { position: static; }
}

@media (max-width: 520px) {
    .btn-keranjang span.badge-jumlah { position: absolute; top: -4px; right: -4px; }
    table.tabel-keranjang th:nth-child(3),
    table.tabel-keranjang td:nth-child(3) { display: none; }
}

/* ================================================
   KARTU PRODUK STOK HABIS — abu-abu & tidak bisa diklik
   ================================================ */
.card-habis {
    opacity: 0.85;
    pointer-events: none;   /* seluruh kartu tidak bisa diklik */
    user-select: none;
    cursor: not-allowed;
}

/* Gambar dibuat abu-abu (grayscale) + agak redup */
.card-habis .img-wrap img {
    filter: grayscale(100%) brightness(0.92);
}
.card-habis .img-wrap { background: #f3f3f3; }
.card-habis:hover { transform: none; box-shadow: var(--shadow); }
.card-habis:hover .img-wrap img { transform: none; }

/* Teks & badge ikut diredupkan */
.card-habis .nama-produk { color: #888; }
.card-habis .harga-baru { color: #999; }
.card-habis .badge-kategori { background: rgba(0,0,0,0.45); }
.card-habis .no-img { filter: grayscale(100%); }

/* Label melintang di atas gambar */
.overlay-habis {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
}
.overlay-habis span {
    background: rgba(70,70,70,0.9);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    padding: 7px 18px;
    border-radius: 6px;
    transform: rotate(-9deg);
    border: 2px solid rgba(255,255,255,0.75);
}

/* Tombol pada kartu habis */
.card-habis .btn-wa.disabled {
    background: #d5d5d5;
    color: #fff;
}

/* ================================================
   GAMBAR DI DASHBOARD ADMIN & KERANJANG
   ================================================ */
/* Thumbnail admin: gambar utuh, tidak terpotong */
table.tabel-produk img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 3px;
}

.thumb-keranjang {
    object-fit: contain;
    background: #fff;
    border: 1px solid #eee;
    padding: 3px;
}

/* Preview upload di form admin */
#preview {
    object-fit: contain;
    background: #fff;
}

/* Baris produk habis di tabel admin */
table.tabel-produk tr.baris-habis td { background: #fbfbfb; }
table.tabel-produk tr.baris-habis img { filter: grayscale(100%); opacity: 0.7; }
table.tabel-produk tr.baris-habis strong { color: #999; }

/* ================================================
   MENU NAVIGASI ADMIN (tab di bawah topbar)
   ================================================ */
.admin-menu {
    background: #fff;
    border-bottom: 1px solid #eee;
    padding: 0 24px;
    display: flex;
    gap: 4px;
    overflow-x: auto;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    position: sticky;
    top: 0;
    z-index: 40;
}
.admin-menu a {
    padding: 14px 18px;
    font-size: 0.86rem;
    font-weight: 600;
    color: #777;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: 0.15s;
}
.admin-menu a:hover { color: var(--merah-tua); }
.admin-menu a.active {
    color: var(--merah-tua);
    border-bottom-color: var(--merah-tua);
}
.admin-menu .menu-badge {
    background: var(--merah-tua);
    color: #fff;
    font-size: 0.66rem;
    font-weight: 800;
    padding: 1px 7px;
    border-radius: 10px;
}
.admin-menu a.admin-menu-katalog {
    padding: 10px 0;
    border-bottom: none;
    margin-left: auto;
}
.admin-menu a.admin-menu-katalog:hover { border-bottom: none; }

/* ================================================
   STAT CARD DENGAN IKON (dashboard admin)
   ================================================ */
.stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
}
.stat-card .stat-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    background: #fdeaea;
    flex-shrink: 0;
}
.stat-card .stat-text h4 { margin: 0; font-size: 1.55rem; color: var(--merah-tua); }
.stat-card .stat-text p { margin: 2px 0 0; color: #888; font-size: 0.8rem; }
.stat-card.link-card { cursor: pointer; transition: 0.2s; }
.stat-card.link-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.12); }

/* ================================================
   HEADER PANEL DENGAN AKSI DI KANAN
   ================================================ */
.panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}
.panel-head h3 { margin: 0; }
.panel-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* Toolbar cari & filter di atas tabel produk */
.toolbar-produk {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    align-items: center;
}
.toolbar-produk input, .toolbar-produk select {
    padding: 9px 14px;
    border: 1px solid #ddd;
    border-radius: 30px;
    font-size: 0.85rem;
}
.toolbar-produk input { min-width: 210px; flex: 1; }
.toolbar-produk .btn-reset {
    color: #777;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    padding: 8px 14px;
    border-radius: 20px;
    border: 1px solid #ddd;
    background: #fff;
    text-decoration: none;
    transition: 0.15s;
}
.toolbar-produk .btn-reset:hover { background: #f5f5f5; border-color: #ccc; }

.empty-state { text-align: center; padding: 40px 20px; color: #999; }
.empty-state .ikon { font-size: 2.4rem; display: block; margin-bottom: 10px; }

/* ================================================
   LAPORAN BARANG KELUAR
   ================================================ */
.filter-laporan {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: 20px;
    background: #fafafa;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid #eee;
}
.filter-laporan .fg { display: flex; flex-direction: column; gap: 5px; }
.filter-laporan .fg label { font-size: 0.78rem; font-weight: 600; color: #666; }
.filter-laporan .fg input, .filter-laporan .fg select {
    padding: 9px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 0.85rem;
}

.btn-excel {
    background: #1a7d3c;
    color: #fff;
    border: none;
    padding: 11px 20px;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: 0.2s;
}
.btn-excel:hover { background: #156a32; }

.ringkasan-laporan {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}
.ringkasan-laporan .box {
    background: #fff8ec;
    border: 1px solid #f5e2b8;
    border-radius: 12px;
    padding: 14px 16px;
}
.ringkasan-laporan .box h4 { margin: 0; font-size: 1.35rem; color: var(--merah-tua); }
.ringkasan-laporan .box p { margin: 4px 0 0; font-size: 0.78rem; color: #888; }

@media (max-width: 700px) {
    .admin-menu { padding: 0 12px; }
    .filter-laporan { flex-direction: column; align-items: stretch; }
    .panel-head { flex-direction: column; align-items: stretch; }
}

/* ================================================
   POPUP PROMO — komponen kartu (dipakai di preview admin & katalog publik)
   ================================================ */
.popup-promo {
    position: relative;
    width: 100%;
    max-width: 380px;
    background: var(--putih);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0,0,0,0.35);
    border: 3px solid var(--emas);
}
.popup-promo.tema-merah { background: linear-gradient(180deg, #fff 55%, #fff 100%); }
.popup-promo.tema-emas { border-color: var(--merah-tua); }

.popup-promo-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
    background: var(--emas);
    color: var(--merah-tua);
    font-weight: 800;
    font-size: 0.72rem;
    letter-spacing: 0.5px;
    padding: 5px 12px;
    border-radius: 20px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    animation: popup-badge-bounce 1.6s ease-in-out infinite;
}
.tema-emas .popup-promo-badge { background: var(--merah-tua); color: var(--emas-muda); }

@keyframes popup-badge-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.popup-promo-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(0,0,0,0.45);
    color: #fff;
    border: none;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.15s;
}
.popup-promo-close:hover { background: rgba(0,0,0,0.7); transform: scale(1.08); }

.popup-promo-gambar {
    height: 160px;
    background: linear-gradient(135deg, var(--merah-tua), var(--merah) 60%, var(--emas));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.tema-emas .popup-promo-gambar { background: linear-gradient(135deg, var(--emas), #ffcf5c 60%, var(--merah-tua)); }
.popup-promo-gambar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.popup-promo-body { padding: 22px 22px 26px; text-align: center; }
.popup-promo-body h3 {
    margin: 0 0 8px;
    font-size: 1.25rem;
    color: var(--merah-tua);
    line-height: 1.25;
}
.tema-emas .popup-promo-body h3 { color: #a06a00; }
.popup-promo-body p {
    margin: 0 0 18px;
    color: #666;
    font-size: 0.9rem;
    line-height: 1.5;
}
.popup-promo-btn {
    background: linear-gradient(90deg, var(--merah-tua), var(--merah));
    color: #fff;
    border: none;
    padding: 12px 30px;
    border-radius: 30px;
    font-weight: 800;
    font-size: 0.92rem;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(176,0,0,0.35);
    animation: popup-btn-pulse 1.8s ease-in-out infinite;
}
.tema-emas .popup-promo-btn {
    background: linear-gradient(90deg, var(--emas), #f7b733);
    color: var(--merah-tua);
    box-shadow: 0 8px 18px rgba(245,166,35,0.4);
}
@keyframes popup-btn-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}

/* Overlay khusus saat popup tampil di halaman katalog (fixed, backdrop gelap) */
.popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 10, 10, 0.6);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.popup-overlay.tampil { opacity: 1; pointer-events: auto; }
.popup-overlay .popup-promo {
    transform: scale(0.85) translateY(10px);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.popup-overlay.tampil .popup-promo { transform: scale(1) translateY(0); }

/* Layout form popup admin: form + pratinjau berdampingan */
.popup-form-layout {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 24px;
    align-items: start;
}
.popup-preview-wrap { position: sticky; top: 90px; }
.popup-preview-stage {
    background: repeating-linear-gradient(45deg, #f4f5f7, #f4f5f7 10px, #eceef1 10px, #eceef1 20px);
    border-radius: 16px;
    padding: 30px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 420px;
}
.popup-preview-stage .popup-promo { box-shadow: 0 15px 40px rgba(0,0,0,0.2); }

@media (max-width: 900px) {
    .popup-form-layout { grid-template-columns: 1fr; }
    .popup-preview-wrap { position: static; }
}

/* ================================================
   PENYESUAIAN TAMBAHAN UNTUK LAYAR HP YANG SANGAT SEMPIT
   (supaya navbar & topbar admin tidak sesak/terpotong)
   ================================================ */
@media (max-width: 480px) {
    .navbar { padding: 12px 14px; }
    .navbar .brand img { height: 34px; }
    .navbar .brand-text h1 { font-size: 1.05rem; }
    .nav-actions { gap: 6px; }
    .btn-keranjang, .btn-admin, .btn-nav-outline { padding: 8px 12px; font-size: 0.78rem; }

    .hero-banner { padding: 20px 16px 30px; }
    .hero-banner h2 { font-size: 1.2rem; }

    .admin-topbar { flex-wrap: wrap; row-gap: 8px; padding: 12px 14px; }
    .admin-topbar > div:last-child span { display: none; } /* "Halo, username" disembunyikan, tombol Keluar tetap ada */
}