/* Import Font dari Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

/* Pengaturan Dasar */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: #f4f7f9;
    color: #333;
    line-height: 1.6;
}

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

/* HEADER & NAVIGASI (DENGAN HAMBURGER) */
header {
    background-color: #ffffff;
    padding: 15px 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

h1.logo a {
    text-decoration: none;
    color: inherit;
    font-size: 28px;
    font-weight: 700;
}

h1.logo span {
    color: #3498db;
}

/* Navigasi Desktop */
.main-nav.desktop-nav {
    display: flex;
    gap: 30px;
    align-items: center;
}
.main-nav a {
    text-decoration: none;
    color: #34495e;
    font-weight: 600;
    font-size: 16px;
    padding-bottom: 5px;
    position: relative;
    transition: color 0.3s ease;
}
.main-nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #3498db;
    transition: width 0.3s ease-in-out;
}
.main-nav a:hover {
    color: #3498db;
}
.main-nav a:hover::after,
.main-nav a.active::after {
    width: 100%;
}
.main-nav a.active {
    color: #3498db;
}

/* Header Bagian Kanan (Keranjang & Hamburger) */
.header-right {
    display: flex;
    align-items: center;
    gap: 25px;
}

.cart-icon-wrapper {
    position: relative;
    cursor: pointer;
    font-size: 24px;
    color: #333;
}
.cart-count {
    position: absolute; top: -8px; right: -12px;
    background-color: #e74c3c; color: white; border-radius: 50%;
    padding: 2px 7px; font-size: 12px; font-weight: bold;
    line-height: 1; display: flex; justify-content: center; align-items: center;
}

/* Tombol Hamburger */
.hamburger {
    display: none; /* Sembunyikan di desktop */
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #34495e;
}

/* Navigasi Mobile */
.mobile-nav {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
    background-color: #fff;
}
.mobile-nav.active {
    max-height: 500px;
    border-top: 1px solid #f0f0f0;
}
.mobile-nav a {
    display: block;
    text-align: center;
    padding: 15px;
    text-decoration: none;
    color: #34495e;
    font-weight: 600;
    border-bottom: 1px solid #f0f0f0;
}
.mobile-nav a.active {
    background-color: #f8f9fa;
    color: #3498db;
}

/* Tampilan Responsif untuk Navigasi */
@media (max-width: 992px) {
    .main-nav.desktop-nav {
        display: none;
    }
    .hamburger {
        display: block;
    }
}

/* Hero Section */
.hero, .about-hero, .page-hero {
    background: linear-gradient(to right, #3498db, #2980b9);
    color: #fff;
    padding: 60px 20px;
    text-align: center;
}
.about-hero, .page-hero {
    background: linear-gradient(to right, #2c3e50, #46627f);
}
.hero h2, .about-hero h1, .page-hero h1 { font-size: 38px; margin-bottom: 10px; }
.hero p, .about-hero p, .page-hero p { font-size: 18px; font-weight: 400; color: #ecf0f1; }

/* Fitur Pencarian */
.search-container {
    position: relative;
    max-width: 600px;
    margin: 0 auto 40px;
}
#product-search {
    width: 100%; padding: 15px 20px 15px 50px;
    font-size: 16px; border-radius: 30px; border: 1px solid #ddd;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); transition: all 0.3s ease;
}
#product-search:focus {
    outline: none; border-color: #3498db;
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.2);
}
.search-icon {
    position: absolute; top: 50%; left: 20px;
    transform: translateY(-50%); color: #aaa; font-size: 18px;
}

/* Products Section */
.products { padding: 60px 0; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }
.product-card {
    background-color: #fff; border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); text-align: center;
    display: flex; flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease; overflow: hidden;
}
.product-card:hover { transform: translateY(-8px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12); }
.product-image { width: 100%; height: 180px; object-fit: contain; background-color: #f8f9fa; padding: 10px; }
.product-name { font-size: 20px; font-weight: 600; margin: 15px 10px 10px; color: #2c3e50; }
.product-description { font-size: 14px; color: #7f8c8d; margin: 0 15px 15px; flex-grow: 1; }
.product-price { font-size: 22px; font-weight: 700; color: #3498db; margin-bottom: 15px; }
.btn-add-to-cart {
    background-color: #3498db; color: #fff; border: none; padding: 12px 25px;
    font-size: 16px; font-weight: 600; cursor: pointer;
    transition: background-color 0.3s ease; margin: 15px; border-radius: 8px;
}
.btn-add-to-cart i { margin-right: 8px; }
.btn-add-to-cart:hover { background-color: #2980b9; }

/* Sidebar Keranjang Belanja & Modal */
.cart-sidebar {
    position: fixed; top: 0; right: -100%; width: 380px; height: 100%;
    background-color: #fff; box-shadow: -4px 0 15px rgba(0,0,0,0.1);
    z-index: 1100; transition: right 0.4s ease-in-out; display: flex; flex-direction: column;
}
@media (max-width: 480px) { .cart-sidebar { width: 100%; } }
.cart-sidebar.active { right: 0; }
.cart-sidebar h2 { padding: 20px; border-bottom: 1px solid #eee; font-size: 22px; text-align: center; }
.close-cart-btn {
    position: absolute; top: 15px; left: 20px; background: none; border: none;
    font-size: 28px; cursor: pointer; color: #95a5a6;
}
.cart-items { flex-grow: 1; overflow-y: auto; padding: 10px 20px; }
.cart-empty-msg { text-align: center; margin-top: 40px; color: #999; }
.cart-summary { padding: 20px; border-top: 1px solid #eee; background-color:#f8f9fa; }

.cart-total {
    display: flex; justify-content: space-between; font-size: 18px;
    margin-bottom: 15px; margin-top: 10px; padding-top: 10px;
    border-top: 1px solid #ddd;
}

.btn-checkout {
    width: 100%; padding: 15px; background-color: #2ecc71; color: white; border: none;
    border-radius: 8px; font-size: 16px; font-weight: bold; cursor: pointer; transition: background-color 0.3s;
}
.btn-checkout:hover { background-color: #27ae60; }
.btn-checkout:disabled { background-color: #bdc3c7; cursor: not-allowed; }
.btn-checkout i { margin-right: 8px; }
.sidebar-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5);
    z-index: 1050; opacity: 0; visibility: hidden; transition: opacity 0.4s, visibility 0.4s;
}
.sidebar-overlay.active { opacity: 1; visibility: visible; }

/* UI BARU: Keranjang & Ringkasan Pesanan */
.cart-item, .summary-item { display: flex; align-items: center; gap: 15px; padding: 15px 5px; border-bottom: 1px solid #f0f0f0; }
.summary-item { padding: 10px 0; gap: 10px; }
.cart-item-image { width: 50px; height: 50px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.summary-item-image { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.cart-item-details, .summary-item-details { flex-grow: 1; }
.cart-item-name, .summary-item-name { font-weight: 600; margin-bottom: 4px; font-size: 14px; }
.cart-item-price, .summary-item-price { color: #555; font-size: 13px; }
.summary-item-price { font-weight: bold; color: #333; }
.cart-item-actions { display: flex; align-items: center; gap: 10px; }
.quantity-selector { display: flex; align-items: center; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; }
.qty-btn { background-color: #f8f9fa; border: none; cursor: pointer; font-size: 16px; font-weight: bold; width: 30px; height: 30px; color: #333; }
.qty-btn:hover { background-color: #f1f1f1; }
.item-quantity-input {
    width: 40px; height: 30px; text-align: center; border: none;
    border-left: 1px solid #ddd; border-right: 1px solid #ddd;
    font-family: 'Poppins', sans-serif; font-weight: 600; -moz-appearance: textfield;
}
.item-quantity-input::-webkit-outer-spin-button,
.item-quantity-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cart-item-remove {
    background: transparent; color: #e74c3c; border: none; border-radius: 50%;
    cursor: pointer; font-size: 16px; width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center; transition: background-color 0.2s;
}
.cart-item-remove:hover { background-color: #f9ebea; }
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.7); display: flex;
    justify-content: center; align-items: center; z-index: 2000; padding: 20px;
}
.modal-content {
    background-color: #fff; padding: 25px; border-radius: 15px;
    max-width: 450px; width: 100%; text-align: center; position: relative;
    animation: fadeIn 0.3s ease;
}
@keyframes fadeIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
.close-modal {
    position: absolute; top: 15px; right: 20px; background: none; border: none;
    font-size: 28px; color: #95a5a6; cursor: pointer; z-index: 10;
}
.modal-content h2 { margin-bottom: 10px; color: #2c3e50; }
#modal-product-summary { text-align: left; margin-bottom: 15px; max-height: 120px; overflow-y: auto; font-size: 14px; padding: 10px; border: 1px solid #eee; border-radius: 8px; }
.modal-price { font-size: 22px; color: #3498db; margin-top: 10px; margin-bottom: 15px; }

/* Payment Tabs Styling (RESPONSIVE) */
.payment-tabs { display: flex; margin-bottom: 15px; -ms-overflow-style: none; scrollbar-width: none; overflow-x: auto; border-bottom: 1px solid #ddd; }
.payment-tabs::-webkit-scrollbar { display: none; }
.tab-link {
    flex-shrink: 0; padding: 12px 18px; cursor: pointer; font-size: 14px;
    font-weight: 600; color: #7f8c8d; background-color: transparent; border: none;
    border-bottom: 3px solid transparent; transition: all 0.3s ease; white-space: nowrap;
}
.tab-link:hover { background-color: #f8f9fa; color: #3498db; }
.tab-link.active { color: #3498db; border-bottom-color: #3498db; }
.tab-content { display: none; padding: 10px; animation: fadeInContent 0.5s; text-align: left; }
.tab-content.active { display: block; }
@keyframes fadeInContent { from { opacity: 0; } to { opacity: 1; } }
.tab-content h4 { text-align: center; margin-bottom: 10px; }
.tab-content p { text-align: center; color: #555; margin-bottom: 15px; font-size: 14px; }
.qris-image { max-width: 180px; margin: 10px auto; display: block; }
.qris-name { text-align: center; font-size: 12px; color: #777; margin-top: -5px; margin-bottom: 10px; }
.payment-details { background-color: #f8f9fa; border: 1px dashed #ddd; border-radius: 8px; padding: 15px; margin-top: 10px; text-align: center; }
.payment-details strong { font-size: 18px; color: #2c3e50; letter-spacing: 1px; }
.payment-details p { margin-top: 5px; font-size: 14px; }
.copy-target { display: flex; align-items: center; justify-content: center; position: relative; }
.copy-icon { margin-left: 10px; cursor: pointer; color: #3498db; font-size: 16px; }
.copy-icon:hover { color: #2980b9; }
.copy-icon .copy-feedback {
    position: absolute; background-color: #2c3e50; color: white; padding: 4px 8px;
    border-radius: 4px; font-size: 12px; bottom: 120%; left: 50%;
    transform: translateX(-50%); opacity: 0; transition: opacity 0.3s; white-space: nowrap;
}
.btn-whatsapp { display: block; width: 100%; background-color: #25D366; color: #fff; padding: 14px; border-radius: 8px; text-decoration: none; font-weight: 600; transition: background-color 0.3s ease; margin-top: 20px; }
.btn-whatsapp:hover { background-color: #128C7E; }
.btn-whatsapp i { margin-right: 8px; }

/* Notifikasi Pop Up (Toast) */
#notification-container { position: fixed; top: 20px; right: 20px; z-index: 1500; display: flex; flex-direction: column; align-items: flex-end; }
.toast-notification {
    background-color: #2c3e50; color: #fff; padding: 15px 20px; border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2); margin-bottom: 10px; display: flex;
    align-items: center; animation: slideInRight 0.4s ease forwards;
}
.toast-notification.fade-out { animation: fadeOut 0.5s ease forwards; }
.toast-notification i { color: #2ecc71; margin-right: 10px; font-size: 20px; }
@keyframes slideInRight { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; transform: scale(0.9); } }

/* Style untuk Tombol Sold Out */
.btn-sold-out {
    background-color: #bdc3c7; color: #7f8c8d; border: none; padding: 12px 25px;
    font-size: 16px; font-weight: 600; cursor: not-allowed; margin: 15px; border-radius: 8px;
}
.btn-sold-out i { margin-right: 8px; }

/* STYLE UNTUK HALAMAN ADMIN */
.login-container, .admin-container {
    max-width: 900px; margin: 40px auto; padding: 30px;
    background-color: #fff; border-radius: 12px; box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}
.login-form, .product-form { max-width: 500px; margin: 0 auto; }
.login-form h2, .product-form h2 { text-align: center; margin-bottom: 25px; color: #2c3e50; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; font-weight: 600; }
.form-group input, .form-group textarea, .form-group select { /* Tambahkan select */
    width: 100%; padding: 12px; border-radius: 8px;
    border: 1px solid #ddd; font-family: 'Poppins', sans-serif;
    font-size: 14px;
    background-color: #fff; /* Pastikan select punya background */
}
.form-group small { font-size: 12px; color: #7f8c8d; margin-top: 5px; display: block; }
textarea { resize: vertical; }
.btn-login, .btn-back, .btn-add, .btn-manage-users, .btn-manage-vouchers { /* Tambahkan .btn-manage-vouchers */
    padding: 12px; border: none; color: white; font-size: 16px;
    font-weight: 600; border-radius: 8px; cursor: pointer; text-decoration: none;
    display: inline-block; text-align: center;
    width: auto; /* Ubah agar tidak full width secara default */
    margin-bottom: 5px; /* Tambahkan margin bawah jika perlu */
}
/* Tombol full width hanya jika diperlukan */
.product-form .btn-login, .login-form .btn-login {
     width: 100%;
}

.btn-login { background-color: #3498db; }
.btn-back { background-color: #7f8c8d; display: inline-flex; align-items: center; gap: 8px; } /* Sesuaikan btn-back */
.btn-add { background-color: #2ecc71; display: inline-flex; align-items: center; gap: 8px; }
.btn-manage-users { background-color: #9b59b6; display: inline-flex; align-items: center; gap: 8px; }
/* Tambahkan style btn-manage-vouchers di akhir */

.error-message, .success-message {
    color: white; padding: 10px 15px; border-radius: 8px;
    margin-bottom: 20px; border: 1px solid; text-align: center;
    font-size: 0.95em; /* Sedikit lebih kecil */
}
.error-message { background-color: #e74c3c; border-color: #e74c3c; }
.success-message { background-color: #d4edda; color: #155724; border-color: #c3e6cb; }
.admin-header {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px;
    flex-wrap: wrap; gap: 15px; padding-bottom: 20px; border-bottom: 1px solid #eee;
}
.admin-header h1 { color: #2c3e50; font-size: 1.8em; } /* Sedikit kecilkan H1 */
.admin-header div { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } /* Tambah align-items */
.btn-logout {
    background-color: #e74c3c; color: white; padding: 10px 15px;
    text-decoration: none; border-radius: 8px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.9em; /* Kecilkan sedikit font tombol header */
}
.btn-manage-users, .btn-manage-vouchers, .btn-add {
     padding: 10px 15px; font-size: 0.9em; /* Kecilkan sedikit tombol header lain */
}
.welcome-message {
    margin-bottom: 25px; font-size: 16px; background-color: #eaf6ff;
    color: #3498db; padding: 15px; border-radius: 8px; border-left: 5px solid #3498db;
}
.form-section {
    background-color: #fdfdfd; border: 1px solid #eee;
    border-radius: 12px; padding: 25px; margin-top: 30px;
}
.form-section h2 {
     margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #eee;
     text-align: left; color: #2c3e50; font-size: 1.4em; /* Sedikit kecilkan H2 */
     display: flex; align-items: center; gap: 10px; /* Icon H2 */
}
.table-wrapper { overflow-x: auto; }
.stock-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 15px; } /* Tambah margin-top */
.stock-table th, .stock-table td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #eee; vertical-align: middle; } /* Kurangi padding */
.stock-table th { background-color: #f8f9fa; font-weight: 600; color: #555; }
.admin-product-img { width: 60px; height: 60px; object-fit: cover; border-radius: 8px; }
.current-product-img { max-width: 150px; height: auto; display: block; margin: 10px 0 20px 0; border: 1px solid #ddd; border-radius: 8px; }
.status { padding: 5px 12px; border-radius: 20px; font-weight: bold; font-size: 12px; text-transform: uppercase; }
.status.available { background-color: #eafaf1; color: #2ecc71; }
.status.sold_out { background-color: #f9ebea; color: #e74c3c; }
.action-buttons { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-toggle-stock, .btn-delete, .btn-edit {
    padding: 8px 12px; border: none; border-radius: 8px; color: white;
    cursor: pointer; font-weight: 600; font-size: 12px;
    display: inline-flex; align-items: center; gap: 5px; text-decoration: none;
    transition: opacity 0.3s;
}
.btn-toggle-stock:hover, .btn-delete:hover, .btn-edit:hover { opacity: 0.8; }
.btn-toggle-stock { background-color: #34495e; }
.btn-delete { background-color: #c0392b; }
.btn-edit { background-color: #3498db; }
.empty-product-message { text-align: center; padding: 40px; color: #7f8c8d; }
.empty-product-message a { color: #3498db; font-weight: 600; }
.current-user-tag { font-style: italic; color: #7f8c8d; font-size: 14px; padding: 8px; }

/* STYLE UNTUK HALAMAN STATIS (FAQ, TUTORIAL, KONTAK) */
.content-section { padding: 60px 20px; }
.faq-container { max-width: 800px; margin: 0 auto; }
.faq-item { background-color: #fff; margin-bottom: 15px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); overflow: hidden; border: 1px solid #e0e0e0; }
.faq-question {
    width: 100%; background-color: #fff; border: none; padding: 20px;
    font-size: 18px; font-weight: 600; text-align: left; cursor: pointer;
    display: flex; justify-content: space-between; align-items: center; color: #2c3e50;
    transition: background-color 0.2s;
}
.faq-question:hover { background-color: #f8f9fa; }
.faq-question i { transition: transform 0.3s ease; }
.faq-question.active { background-color: #f8f9fa; }
.faq-question.active i { transform: rotate(180deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-in-out; }
.faq-answer p { padding: 0 20px 20px; line-height: 1.7; color: #555; }
.tutorial-container { display: flex; flex-direction: column; gap: 30px; max-width: 800px; margin: 0 auto; }
.tutorial-step { display: flex; align-items: flex-start; gap: 25px; background-color: #fff; padding: 25px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.step-icon {
    flex-shrink: 0; width: 60px; height: 60px; border-radius: 50%;
    background-color: #eaf6ff; color: #3498db; display: flex;
    align-items: center; justify-content: center; font-size: 24px;
}
.step-content h3 { font-size: 20px; margin-bottom: 8px; color: #2c3e50; }
.step-content p { color: #555; }
.contact-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; max-width: 1000px; margin: 0 auto; }
.contact-card {
    background-color: #fff; padding: 35px 30px; border-radius: 12px;
    text-align: center; box-shadow: 0 4px 20px rgba(0,0,0,0.07);
    border: 1px solid #e0e0e0; transition: transform 0.3s, box-shadow 0.3s;
}
.contact-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); }
.contact-card i { font-size: 40px; color: #3498db; margin-bottom: 20px; }
.contact-card h3 { font-size: 22px; margin-bottom: 10px; color: #2c3e50; }
.contact-card p { color: #7f8c8d; margin-bottom: 25px; min-height: 60px; }
.contact-button {
    display: inline-block; background-color: #3498db; color: white;
    padding: 12px 30px; border-radius: 8px; text-decoration: none;
    font-weight: 600; transition: background-color 0.3s;
}
.contact-button:hover { background-color: #2980b9; }

@media (max-width: 768px) {
    /* Responsive About Us */
    .about-section, .about-section.reverse { flex-direction: column; }
    .about-image, .about-text { width: 100%; }
    .about-text h2 { font-size: 28px; }

    /* Responsive Admin Header Buttons */
     .admin-header div { justify-content: flex-start; } /* Rata kiri tombol di mobile */
     .btn-manage-users, .btn-manage-vouchers, .btn-add, .btn-logout { font-size: 0.85em; padding: 8px 12px; }
}

/* FOOTER DENGAN SCROLLING PAYMENT */
footer {
    margin-top: 40px; padding-top: 40px; background-color: #f4f7f9;
}
.payment-marquee {
    background-color: #fff; padding: 15px 0; overflow: hidden;
    white-space: nowrap; border-top: 1px solid #eee; border-bottom: 1px solid #eee;
}
.payment-marquee:hover .marquee-content { animation-play-state: paused; }
.marquee-content {
    display: flex; align-items: center; width: fit-content;
    animation: marquee 25s linear infinite;
}
/* Duplikasi konten untuk loop yang mulus */
.marquee-content > * { flex-shrink: 0; }
.marquee-content img { height: 25px; margin: 0 30px; vertical-align: middle; }
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* Bergerak sejauh setengah lebar */
}
.footer-copyright {
    background-color: #2c3e50; color: #ecf0f1; text-align: center;
    padding: 15px 0; font-size: 14px;
}


/* === STYLE BARU UNTUK VOUCHER (DI KERANJANG) === */
.voucher-section {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}
#voucher-input {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
}
#apply-voucher-btn {
    padding: 0 15px;
    border: none;
    border-radius: 8px;
    background-color: #34495e;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s;
    flex-shrink: 0; /* Agar tombol tidak mengecil */
}
#apply-voucher-btn:hover {
    background-color: #2c3e50;
}
.voucher-message {
    font-size: 13px;
    font-weight: 600;
    margin-top: -5px; /* Lebih dekat ke input */
    margin-bottom: 10px;
    text-align: center;
    padding: 5px;
    border-radius: 4px;
    min-height: 25px; /* Beri tinggi agar layout tidak lompat */
}
.voucher-message.error {
    color: #e74c3c;
    background-color: #f9ebea;
}
.voucher-message.success {
    color: #27ae60;
    background-color: #eafaf1;
}
/* Style untuk baris subtotal, diskon */
.cart-summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    margin-bottom: 8px;
}
.cart-summary-row span:first-child {
    color: #555;
}
.cart-summary-row span:last-child {
    font-weight: 600;
}
#cart-discount-row span:last-child {
    color: #27ae60; /* Warna hijau untuk diskon */
}
/* === AKHIR STYLE VOUCHER KERANJANG === */


/* === STYLE BARU UNTUK MANAJEMEN VOUCHER ADMIN === */
.voucher-table th:nth-child(1), .voucher-table td:nth-child(1) { width: 20%; } /* Kolom Kode */
.voucher-table th:nth-child(2), .voucher-table td:nth-child(2) { width: 20%; } /* Kolom Tipe */
.voucher-table th:nth-child(3), .voucher-table td:nth-child(3) { width: 15%; } /* Kolom Nilai */
.voucher-table th:nth-child(4), .voucher-table td:nth-child(4) { width: 20%; } /* Kolom Min Belanja */
.voucher-table th:nth-child(5), .voucher-table td:nth-child(5) { width: 15%; text-align: center;} /* Kolom Aksi */

.voucher-table td:nth-child(3), .voucher-table td:nth-child(4) { text-align: right; } /* Rata kanan angka */
.voucher-table .btn-delete { font-size: 11px; padding: 6px 10px; } /* Tombol hapus lebih kecil */

.form-section h3 {
    margin-top: 25px; /* Jarak antara daftar dan form tambah */
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #eee;
    color: #555;
    font-size: 1.1em;
}

/* Form yang lebih ringkas untuk voucher */
.compact-form .form-group {
    margin-bottom: 15px;
}
.compact-form label {
    margin-bottom: 5px;
    font-size: 0.9em;
}
.compact-form input, .compact-form select {
    padding: 10px;
    font-size: 0.95em;
}
.compact-form small {
    margin-top: 3px;
    font-size: 0.8em;
}
.compact-form button.btn-login { /* Target spesifik tombol tambah voucher */
    margin-top: 10px;
    width: 100%; /* Buat full width lagi */
}

/* Style untuk Tombol Kelola Voucher (mirip Kelola Admin) */
.btn-manage-vouchers {
    background-color: #f39c12; /* Warna Oranye */
    color: white;
    padding: 10px 15px; /* Samakan dengan tombol header lain */
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.3s;
    font-size: 0.9em; /* Samakan dengan tombol header lain */
}
.btn-manage-vouchers:hover {
    background-color: #e67e22;
}

/* Pastikan tombol admin header wrap dengan baik */
.admin-header div {
    display: flex;
    flex-wrap: wrap; /* Izinkan wrap */
    gap: 10px;
    align-items: center; /* Sejajarkan */
    justify-content: flex-end; /* Mulai dari kanan */
}

/* === STYLE BARU UNTUK POP-UP BANNER === */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Latar belakang semi-transparan */
    display: flex; /* Menggunakan flexbox untuk centering */
    justify-content: center;
    align-items: center;
    z-index: 2000; /* Pastikan di atas elemen lain */
    opacity: 0; /* Mulai tersembunyi */
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Transisi halus */
}

.popup-overlay.show {
    opacity: 1;
    visibility: visible;
}

.popup-content {
    background-color: #fff;
    padding: 0; /* Hapus padding jika hanya gambar */
    border-radius: 10px;
    max-width: 90%; /* Maksimum lebar pop-up */
    max-height: 80%; /* Maksimum tinggi pop-up */
    width: auto; /* Lebar menyesuaikan gambar, maksimal 500px */
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    overflow: hidden; /* Sembunyikan bagian gambar yg keluar */
    transform: scale(0.9); /* Efek zoom saat muncul */
    transition: transform 0.3s ease;
}

.popup-overlay.show .popup-content {
    transform: scale(1); /* Kembali ke ukuran normal saat muncul */
}

.popup-content img {
     display: block; /* Hapus spasi bawah default gambar */
     max-width: 100%;
     height: auto;
     max-height: 75vh; /* Batasi tinggi gambar agar tidak terlalu besar */
     object-fit: contain; /* Pastikan gambar terlihat utuh */
}


.close-popup {
    position: absolute;
    top: 10px;
    right: 15px;
    background: rgba(0, 0, 0, 0.5); /* Background agar terlihat jelas di atas gambar */
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 20px;
    line-height: 30px; /* Center vertikal */
    text-align: center;
    cursor: pointer;
    z-index: 2010; /* Di atas gambar */
    transition: background-color 0.2s;
}

.close-popup:hover {
    background: rgba(0, 0, 0, 0.8);
}

/* Opsional: Style untuk tombol di dalam pop-up (jika ada) */
.popup-button {
     display: inline-block;
     margin-top: 15px;
     padding: 10px 20px;
     background-color: #3498db;
     color: white;
     text-decoration: none;
     border-radius: 5px;
     transition: background-color 0.3s;
}
.popup-button:hover {
     background-color: #2980b9;
}

/* Penyesuaian untuk layar kecil */
@media (max-width: 600px) {
     .popup-content {
         max-width: 95%;
         max-height: 85%;
     }
     .close-popup {
          top: 5px;
          right: 10px;
          width: 25px;
          height: 25px;
          font-size: 16px;
          line-height: 25px;
     }
}

/* ... (Kode CSS yang sudah ada) ...

h1.logo span {
    color: #3498db;
}

/* === MODIFIKASI UNTUK GAMBAR LOGO DIMULAI DARI SINI === */
h1.logo a {
    /* Atur font-size ke 0 untuk menghilangkan spasi sisa dari font properties */
    font-size: 0; 
    /* Gunakan flex untuk memastikan logo terpusat secara vertikal jika ada padding */
    display: flex;
    align-items: center;
}

.header-logo-img {
    height: 40px; /* Atur tinggi logo sesuai keinginan */
    width: auto;
    vertical-align: middle;
}
/* === MODIFIKASI UNTUK GAMBAR LOGO BERAKHIR DI SINI === */

/* ... (Kode CSS lainnya) ...
/* === AKHIR STYLE BARU VOUCHER ADMIN === */