/* ===== Reset dasar ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    background: #ffffff;
    color: #222;
    line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 16px; }

/* ===== Bar area jangkauan ===== */
.bar-area {
    background: #4d1319;
    color: #f4d9db;
    font-size: 0.8rem;
    text-align: center;
    padding: 5px 0;
}

/* ===== Header ===== */
.site-header {
    background: #7a1f2b;
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.header-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    gap: 8px;
}
.logo { font-size: 1.3rem; font-weight: 700; color: #fff; }
.main-nav { display: flex; gap: 18px; flex-wrap: wrap; }
.main-nav a { font-size: 0.95rem; opacity: 0.95; }
.main-nav a:hover { text-decoration: underline; }

.main-content { padding: 24px 16px 60px; }

/* ===== Judul halaman ===== */
.judul-halaman { font-size: 1.5rem; margin-bottom: 16px; color: #7a1f2b; }
.deskripsi-toko { margin-bottom: 20px; color: #555; }

/* ===== Banner info promosi ===== */
.banner-info {
    background: #fbe9e9;
    color: #7a1f2b;
    border: 1px solid #f0c9cb;
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 20px;
    font-weight: 600;
    text-align: center;
}

/* ===== Kotak filter & pencarian ===== */
.kotak-filter {
    background: #fff;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 22px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.form-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.form-filter input[type="text"],
.form-filter select {
    flex: 1 1 200px;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
}
.form-filter button {
    padding: 10px 20px;
    background: #7a1f2b;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
}
.form-filter button:hover { background: #5c141d; }

/* ===== Grid produk ===== */
.grid-produk {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
@media (min-width: 640px) {
    .grid-produk { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
    .grid-produk { grid-template-columns: repeat(4, 1fr); }
}

.kartu-produk {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    transition: transform 0.15s ease;
}
.kartu-produk:hover { transform: translateY(-3px); }
.kartu-produk .foto-produk {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: #e8e8e0;
}
.kartu-produk .foto-kosong {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #e8e8e0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 0.85rem;
    text-align: center;
    padding: 8px;
}
.info-kartu { padding: 10px 12px 14px; flex: 1; display: flex; flex-direction: column; }
.nama-produk-kartu { font-size: 0.95rem; font-weight: 600; margin-bottom: 4px; }
.harga-produk-kartu { color: #d3661a; font-weight: 700; margin-bottom: 6px; }
.stok-produk-kartu { font-size: 0.8rem; color: #777; margin-bottom: 10px; }
.tombol-detail {
    margin-top: auto;
    display: block;
    text-align: center;
    background: #7a1f2b;
    color: #fff;
    padding: 8px;
    border-radius: 6px;
    font-size: 0.9rem;
}
.tombol-detail:hover { background: #5c141d; }

.baris-muat-lebih { text-align: center; margin-top: 22px; }
.tombol-muat-lebih {
    padding: 12px 28px;
    background: #7a1f2b;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}
.tombol-muat-lebih:hover { background: #5c141d; }
.tombol-muat-lebih:disabled { opacity: 0.7; cursor: default; }

.kosong-info {
    background: #fff;
    border-radius: 10px;
    padding: 30px 20px;
    text-align: center;
    color: #777;
}

/* ===== Halaman detail produk ===== */
.detail-produk {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
@media (min-width: 800px) {
    .detail-produk { grid-template-columns: 1fr 1fr; }
}

.galeri-foto .foto-utama {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 10px;
    background: #e8e8e0;
    margin-bottom: 10px;
    cursor: zoom-in;
}
.daftar-thumbnail { display: flex; gap: 8px; flex-wrap: wrap; }
.daftar-thumbnail img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.75;
}
.daftar-thumbnail img.aktif { border-color: #7a1f2b; opacity: 1; }

.info-detail .kategori-badge {
    display: inline-block;
    background: #fbe9e9;
    color: #7a1f2b;
    font-size: 0.8rem;
    padding: 4px 10px;
    border-radius: 20px;
    margin-bottom: 10px;
}
.info-detail h1 { font-size: 1.4rem; margin-bottom: 10px; }
.info-detail .harga-detail { font-size: 1.6rem; color: #d3661a; font-weight: 700; margin-bottom: 10px; }
.info-detail .stok-detail { color: #555; margin-bottom: 16px; }
.info-detail .deskripsi-detail { margin-bottom: 20px; white-space: pre-line; }

.tombol-wa-besar {
    display: inline-block;
    background: #25d366;
    color: #fff;
    font-weight: 700;
    padding: 14px 22px;
    border-radius: 8px;
    text-align: center;
    width: 100%;
}
.tombol-wa-besar:hover { background: #1fb455; }

.link-kembali { display: inline-block; margin-bottom: 16px; color: #7a1f2b; font-weight: 600; }

/* ===== Tombol WA mengambang ===== */
.tombol-wa-mengambang {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #25d366;
    color: #fff;
    font-weight: 700;
    padding: 12px 18px;
    border-radius: 30px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.25);
    z-index: 60;
}
.tombol-wa-mengambang:hover { background: #1fb455; }

/* ===== Halaman barang tidak terpakai ===== */
.form-box {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    max-width: 560px;
    margin: 0 auto;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.form-box label { display: block; font-weight: 600; margin: 14px 0 6px; }
.form-box input, .form-box textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
    font-family: inherit;
}
.form-box .tombol-kirim {
    margin-top: 20px;
    width: 100%;
    padding: 14px;
    background: #25d366;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
}
.form-box .tombol-kirim:hover { background: #1fb455; }
.catatan-form { color: #777; font-size: 0.85rem; margin-top: 10px; }

/* ===== Footer ===== */
.site-footer {
    text-align: center;
    padding: 18px 0 40px;
    color: #888;
    font-size: 0.85rem;
}

/* ===== Lightbox sederhana ===== */
.lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    z-index: 100;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.lightbox-overlay.tampil { display: flex; }
.lightbox-overlay img { max-width: 100%; max-height: 90vh; border-radius: 8px; }
.lightbox-tutup {
    position: absolute;
    top: 16px;
    right: 20px;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
}