:root {
    --bg-main: #0a0a0a; --card-bg: rgba(22, 22, 22, 0.85); --primary-red: #b33939; --primary-red-hover: #cd6133;
    --accent-gold: #d4af37; --text-light: #f5f5f5; --text-muted: #aaaaaa; --border-light: rgba(212, 175, 55, 0.2); --input-bg: #0a0a0a;
}
[data-theme="light"] {
    --bg-main: #f0f2f5; --card-bg: rgba(255, 255, 255, 0.9); --primary-red: #d32f2f; --primary-red-hover: #b71c1c;
    --accent-gold: #b38515; --text-light: #222222; --text-muted: #666666; --border-light: rgba(0, 0, 0, 0.1); --input-bg: #ffffff;
}

body { font-family: 'Poppins', sans-serif; margin: 0; background-color: var(--bg-main); color: var(--text-light); transition: background 0.3s, color 0.3s; overflow-x: hidden; }
.bg-cinematic { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; background: radial-gradient(circle at 15% 50%, rgba(179, 57, 57, 0.15), transparent 30%), radial-gradient(circle at 85% 30%, rgba(212, 175, 55, 0.15), transparent 30%); filter: blur(40px); transition: 0.5s; }

header { background-color: var(--card-bg); padding: 15px 50px; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--border-light); backdrop-filter: blur(10px); }
header h1 { margin: 0; font-family: 'Playfair Display', serif; color: var(--accent-gold); font-size: 24px; cursor: pointer; }
.header-actions { display: flex; gap: 15px; align-items: center; }
.theme-toggle, .cart-trigger, .track-trigger { background: transparent; border: 1px solid var(--border-light); color: var(--text-light); padding: 8px 15px; border-radius: 20px; cursor: pointer; transition: 0.3s; font-weight: 600; display: flex; align-items: center; gap: 8px;}
.cart-trigger { border-color: var(--accent-gold); color: var(--accent-gold); }
.theme-toggle:hover, .track-trigger:hover, .cart-trigger:hover { border-color: var(--accent-gold); color: var(--bg-main); background: var(--accent-gold);}
#cart-count { background-color: var(--primary-red); color: white; border-radius: 50%; padding: 2px 7px; font-size: 12px; }

.container { max-width: 1300px; margin: 40px auto; padding: 0 20px; }

/* MODALS POPUP */
.overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.7); display: none; opacity: 0; transition: 0.3s; z-index: 2000; }
.overlay.show { display: block; opacity: 1; }

.track-modal, .cart-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.9); background: var(--card-bg); border-radius: 12px; border: 1px solid var(--border-light); padding: 25px; display: none; opacity: 0; transition: 0.3s; box-shadow: 0 10px 30px rgba(0,0,0,0.5); backdrop-filter: blur(10px); z-index: 2001; box-sizing: border-box; flex-direction: column;}
.track-modal { width: 400px; max-width: 90%; }
.cart-modal { width: 500px; max-width: 95%; max-height: 85vh; overflow-y: auto; }
.track-modal.show, .cart-modal.show { display: flex; opacity: 1; transform: translate(-50%, -50%) scale(1); }
.track-header, .cart-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-light); padding-bottom: 15px; margin-bottom: 20px;}
.track-header h3, .cart-header h3 { margin: 0; color: var(--accent-gold); font-family: 'Playfair Display', serif;}
.close-cart { background: none; border: none; color: var(--text-muted); font-size: 28px; cursor: pointer; }
.close-cart:hover { color: var(--primary-red); }

#isi-keranjang { width: 100%; } 
.cart-item { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; border-bottom: 1px solid var(--border-light); padding-bottom: 15px; }
.cart-item b { color: var(--text-light); font-size: 16px; }
.cart-item small { color: var(--text-muted); display: block; margin-top:3px;}
.item-price { color: var(--accent-gold); font-weight: 600; text-align: right;}
.btn-hapus { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 12px; padding: 0; text-decoration:underline;}
.btn-hapus:hover { color: var(--primary-red); }
.cart-total { font-size: 22px; font-weight: bold; margin: 25px 0; text-align: right; color: var(--text-light); border-top: 1px solid var(--border-light); padding-top: 15px; }

input, textarea, select { width: 100%; padding: 12px; background: var(--input-bg); border: 1px solid var(--border-light); color: var(--text-light); border-radius: 6px; box-sizing: border-box; font-family: 'Poppins', sans-serif;}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent-gold); }

/* KATALOG */
#view-katalog { display: block; }
.produk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 30px; }
.card { background-color: var(--card-bg); border-radius: 12px; overflow: hidden; transition: 0.4s ease-in-out; border: 1px solid var(--border-light); cursor: pointer; position: relative; backdrop-filter: blur(10px);}
.card:hover { transform: translateY(-8px); border: 1px solid var(--accent-gold); box-shadow: 0 10px 30px rgba(212, 175, 55, 0.2); }
.card-img-wrapper { width: 100%; height: 200px; overflow: hidden; position: relative;}
.card img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s ease; }
.card:hover .card-img-wrapper img { transform: scale(1.1); }
.card-body { padding: 20px; }
.card-title { font-size: 18px; font-weight: 600; margin: 0 0 5px 0; font-family: 'Playfair Display', serif; }
.card-rating-sum { font-size: 13px; color: #f1c40f; margin-bottom: 5px; font-weight:bold;}
.card-price { color: var(--accent-gold); font-weight: bold; font-size: 18px; margin-top: 10px;}
.card.oos { opacity: 0.6; filter: grayscale(100%); cursor: not-allowed; }
.badge-oos { position: absolute; top: 15px; right: 15px; background: rgba(200, 0, 0, 0.9); color: white; padding: 5px 12px; border-radius: 5px; font-weight: bold; font-size: 12px; z-index: 2; border: 1px solid white;}

/* VIEW DETAIL */
.detail-top-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.breadcrumb { font-size: 14px; color: var(--text-muted); cursor: pointer; margin: 0;}
.btn-back-top { background: transparent; color: var(--accent-gold); border: 1px solid var(--accent-gold); padding: 8px 15px; border-radius: 6px; cursor: pointer; font-weight: bold; transition: 0.3s; }
.btn-back-top:hover { background: var(--accent-gold); color: var(--bg-main); }

.detail-wrapper { display: flex; gap: 30px; align-items: flex-start; }
.detail-kiri { flex: 1; background: var(--card-bg); padding: 20px; border-radius: 12px; border: 1px solid var(--border-light); backdrop-filter: blur(10px); box-sizing: border-box; overflow:hidden;}
.img-wrapper-main { position: relative; width: 100%; }
#dtl-img-main { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 10px; border: 1px solid var(--border-light); margin-bottom: 15px; transition: 0.3s; box-sizing: border-box;}
.logo-halal { position: absolute; top: 10px; right: 10px; width: 60px; height: auto; z-index: 5; border: none !important;}

.dtl-thumbnails { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 10px; width: 100%; box-sizing: border-box; flex-wrap: nowrap; -webkit-overflow-scrolling: touch;}
.dtl-thumbnails img { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; border: 2px solid transparent; box-sizing: border-box; flex-shrink: 0; cursor: pointer; transition: 0.3s; opacity: 0.6; display: block;}
.dtl-thumbnails img.aktif { border-color: var(--accent-gold); opacity: 1; transform: scale(1.05); }

.share-container { padding-top: 15px; margin-top: 15px; border-top: 1px solid var(--border-light); text-align: center;}
.share-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.soc-icon { width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer; font-size: 18px; color: white; display: flex; justify-content: center; align-items: center; transition: 0.3s; }
.soc-icon.wa { background: #25D366; } .soc-icon.fb { background: #1877F2; } .soc-icon.tg { background: #0088cc; } .soc-icon.ig { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.soc-icon.copy { background: var(--text-muted); color: var(--bg-main); border: 1px solid var(--border-light);}
.soc-icon:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.3);}

.rek-section-kiri { padding-top: 15px; margin-top: 25px; border-top: 1px dashed var(--border-light); }
.rek-section-kiri h3 { font-size: 16px; color: var(--accent-gold); margin: 0 0 15px 0; text-align: center;}
.rek-grid-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 10px;}
.card-mini { background: rgba(0,0,0,0.2); border: 1px solid var(--border-light); border-radius: 8px; cursor: pointer; overflow: hidden; transition:0.3s;}
.card-mini:hover { border-color: var(--accent-gold); }
.card-mini img { width: 100%; height: 100px; object-fit: cover;}
.card-mini .cm-title { font-size: 12px; padding: 5px 10px; color: var(--text-light); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.detail-tengah { flex: 1.5; padding: 10px 0; min-width: 0;}
.detail-title { font-family: 'Playfair Display', serif; font-size: 28px; margin: 0; color: var(--text-light);}
.detail-price { font-size: 32px; color: var(--accent-gold); font-weight: bold; margin: 10px 0 20px 0; }
.varian-container { display: flex; gap: 10px; margin-bottom: 25px; flex-wrap: wrap; }
.btn-varian { background: transparent; border: 1px solid var(--text-muted); color: var(--text-light); padding: 8px 15px; border-radius: 6px; cursor: pointer; transition: 0.3s; }
.btn-varian:hover { border-color: var(--accent-gold); color: var(--accent-gold); }
.btn-varian.aktif { background: rgba(212, 175, 55, 0.1); border-color: var(--accent-gold); color: var(--accent-gold); font-weight: bold; }
.info-ongkir { padding: 15px 0; border-bottom: 1px solid var(--border-light); border-top: 1px solid var(--border-light); margin-bottom: 25px; }

/* TABS DESKRIPSI & REVIEW */
.tab-section { background: var(--card-bg); border: 1px solid var(--border-light); padding: 20px; border-radius: 12px; backdrop-filter: blur(10px); }
.tab-headers { display: flex; border-bottom: 1px solid var(--border-light); margin-bottom: 20px; gap: 20px; }
.tab-link { background: none; border: none; color: var(--text-muted); padding: 10px 0; cursor: pointer; font-weight: bold; font-size: 16px; border-bottom: 2px solid transparent; transition: 0.3s; }
.tab-link.aktif { color: var(--accent-gold); border-bottom-color: var(--accent-gold); }
.tab-pane { display: none; animation: fadeIn 0.3s; }
.tab-pane.aktif { display: block; }
.detail-desc { font-size: 14px; color: var(--text-muted); line-height: 1.6; }
.review-form-box { background: var(--card-bg); padding: 20px; border-radius: 8px; border: 1px dashed var(--border-light); margin-bottom: 20px;}
.review-item { border-bottom: 1px solid var(--border-light); padding: 15px 0; }
.review-item h5 { margin: 0 0 5px 0; color: var(--text-light); font-size: 15px; }
.review-item .rating { color: #f1c40f; font-size: 12px; margin-bottom: 8px;}
.review-item p { margin: 0 0 10px 0; font-size: 13px; color: var(--text-muted); line-height: 1.5;}
.review-media-thumb { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border-light); box-sizing: border-box; cursor: pointer; transition: 0.3s; }
.admin-reply { background: rgba(212, 175, 55, 0.1); border-left: 3px solid var(--accent-gold); padding: 10px; border-radius: 4px; font-size: 12px; margin-top: 10px; color: var(--text-light);}
.review-empty { text-align: center; padding: 30px; border: 1px dashed var(--border-light); border-radius: 8px; color: var(--text-muted); }
.btn-lihat-semua { background: transparent; color: var(--accent-gold); border: 1px solid var(--accent-gold); padding: 8px 15px; border-radius: 6px; cursor: pointer; font-weight: bold; width: 100%; margin-top: 15px;}
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

/* BOX KANAN QTY (DESKTOP) */
.detail-kanan { flex: 0.8; background: var(--card-bg); padding: 25px; border-radius: 12px; border: 1px solid var(--border-light); position: sticky; top: 100px; backdrop-filter: blur(10px); box-sizing: border-box;}
.detail-kanan h3 { margin: 0 0 15px 0; border-bottom: 1px solid var(--border-light); padding-bottom: 10px; color: var(--accent-gold);}
#stok-info { font-size: 14px; color: var(--text-muted); margin-bottom: 10px; display:block;}

.qty-and-btn { display: flex; flex-direction: column; gap: 15px; } 
.qty-box { display: flex; align-items: center; border: 1px solid var(--border-light); border-radius: 8px; width: fit-content; overflow: hidden; margin: 15px 0; }
.qty-btn { background: transparent; border: none; color: var(--text-light); width: 40px; height: 40px; font-size: 20px; cursor: pointer; }
.qty-btn:hover { background: var(--accent-gold); color: var(--bg-main); }
.qty-input { width: 80px; text-align: center; background: transparent; border: none; color: var(--text-light); font-size: 18px; font-weight: bold; }
.qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.subtotal-box { display: flex; justify-content: space-between; align-items: center; margin: 20px 0; font-size: 18px; }
.btn-beli { padding: 15px; width:100%; background: var(--primary-red); color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: bold; text-transform: uppercase; transition: 0.3s; }
.btn-beli:hover { background: var(--primary-red-hover); box-shadow: 0 5px 15px rgba(179, 57, 57, 0.4); }
.btn-outline { padding: 10px; width:100%; background: transparent; color: var(--accent-gold); border: 1px solid var(--accent-gold); border-radius: 8px; cursor: pointer; font-weight: bold; margin-top:10px; transition: 0.3s;}
.btn-outline:hover { background: var(--accent-gold); color: #000; }

/* KUPON LIST TAB DI FRONTEND (FIXED) */
.promo-list { background: #111; padding: 15px; border-radius: 8px; margin-bottom: 15px; border: 1px dashed var(--accent-gold);}
.promo-item { cursor: pointer; background: #1a1a1a; padding: 10px 15px; border-radius: 8px; border: 1px dashed var(--accent-gold); margin-bottom: 10px; transition: 0.3s;}
.promo-item:hover { background: #333; }

@media (max-width: 900px) {
    header { padding: 15px 20px; flex-direction: column; gap: 10px; }
    .header-actions { width: 100%; justify-content: space-between; }
    .container { padding: 0 15px; padding-bottom: 20px;} 
    
    .produk-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 15px; } 
    .card-img-wrapper { height: 140px; }
    
    .detail-wrapper { flex-direction: column; gap: 20px; padding-bottom: 20px;}
    .detail-kiri, .detail-tengah { width: 100%; flex: none; position: static; padding: 15px;}
    
    .cart-modal { width: 92%; max-width: 100%; max-height: 80vh; padding: 20px; }
    .track-modal { width: 92%; max-width: 100%; padding: 20px; }
    
    .rek-grid-mini { grid-template-columns: 1fr 1fr; } 
    
    .detail-kanan { position: relative !important; top: 0 !important; bottom: auto !important; left: 0 !important; width: 100% !important; background: var(--card-bg) !important; border: 1px solid var(--border-light) !important; border-radius: 12px !important; padding: 20px !important; margin-top: 20px !important; z-index: 1 !important; display: block !important; box-shadow: none !important; box-sizing: border-box; }
    .detail-kanan h3 { display: block !important; font-size: 18px; margin-bottom: 10px;} 
    #stok-info { position: static !important; background: transparent !important; padding: 0 !important; border: none !important; color: var(--text-muted) !important; display: block; margin-bottom: 10px;}
    .subtotal-box { display: flex !important; font-size: 16px; margin-bottom: 15px;} 
    
    .qty-and-btn { display: flex; flex-direction: column; gap: 15px; align-items: stretch; width: 100%;}
    .qty-box { margin: 0 auto; width: fit-content; justify-content: space-between; padding: 5px 15px;}
    .qty-btn { width: 45px; height: 45px; font-size: 20px;} 
    .qty-input { width: 60px; font-size: 16px;}
    .btn-beli { width: 100%; padding: 15px; font-size: 14px; margin: 0;}
}