/* css/modern.css (LENGKAP - Perbaikan Grid Mobile & Font) */

/* === 1. GAYA GLOBAL === */
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;margin:0;padding:0;background-color:#f7f9fc;color:#333;display:flex;flex-direction:column;min-height:100vh}a{color:#007bff;text-decoration:none}a:hover{text-decoration:underline}

/* === 2. HEADER (PERBAIKAN FINAL) === */
.main-header{background-color:#fff;border-bottom:1px solid #e0e0e0;width:100%;box-sizing:border-box;position:sticky;top:0;z-index:100}.header-container{max-width:1200px;margin:0 auto;padding:0 1rem;display:flex;justify-content:space-between;align-items:center;height:70px;gap:1rem}.header-logo{flex-shrink:0}.header-logo a{font-size:1.25rem;font-weight:700;color:#111;text-decoration:none;flex-shrink:0}.header-search{display:none;flex-grow:1;max-width:600px;position:relative}.header-search input{width:100%;padding:.75rem 1rem;padding-right:3rem;border:1px solid #ddd;border-radius:8px;font-size:1rem}.header-search button{position:absolute;right:0;top:0;height:100%;width:3rem;border:none;background:#007bff;color:#fff;border-radius:0 8px 8px 0;cursor:pointer;font-size:1rem}.header-spacer{flex-grow:1;display:none}.header-actions{display:flex;align-items:center;gap:.75rem;flex-shrink:0;order:3}.header-icon-link{font-size:1.5rem;color:#555;padding:.5rem}.header-icon-link:hover{color:#007bff;text-decoration:none}@media (min-width: 769px){#search-modal-trigger{display:none}}.header-mobile-toggle{display:none;font-size:1.5rem;cursor:pointer;color:#333;order:4;padding:.5rem}.mobile-menu{display:none;position:fixed;top:70px;left:0;width:100%;background:#fff;border-bottom:1px solid #eee;z-index:99;flex-direction:column;padding:1rem 0;box-shadow:0 5px 10px rgba(0,0,0,.05)}.mobile-menu.active{display:flex}.mobile-menu a{padding:.75rem 1.5rem;font-size:1.1rem;color:#333;text-decoration:none}.mobile-menu a:hover{background:#f8f8f8}@media (max-width: 768px){.header-search{display:none}.header-spacer{display:block}.main-nav{display:none}.header-mobile-toggle{display:block}}@media (min-width: 769px){.header-search{display:flex;order:2;min-width:100px}.header-spacer{display:none}}

/* === 3. HERO SLIDER (DINAMIS) - DENGAN OPACITY === */
.hero-slider.swiper{width:100%;height:400px;background-color:#1a1a1a;position:relative}.hero-slide{width:100%;height:100%;background-size:cover;background-position:center;display:flex;align-items:center;padding:2rem;box-sizing:border-box;position:relative}.hero-slide::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.4);z-index:1}.hero-content{max-width:1200px;margin:0 auto;color:#fff;position:relative;z-index:2}.hero-content h1{font-size:3rem;font-weight:800;margin:0}.hero-content p{font-size:1.25rem;margin:.5rem 0 1.5rem 0}.hero-btn{padding:.75rem 1.5rem;background-color:#007bff;color:#fff;text-decoration:none;font-weight:600;border-radius:8px;transition:background-color .2s}.hero-btn:hover{background-color:#0056b3}.hero-slider .swiper-pagination{bottom:20px!important}.hero-slider .swiper-pagination-bullet{width:10px;height:10px;background-color:rgba(255,255,255,.5);opacity:1}.hero-slider .swiper-pagination-bullet-active{background-color:#fff}

/* ========================================================== */
/* === 4. KOMPONEN HOMEPAGE (PERBAIKAN KATEGORI) === */
/* ========================================================== */
.section-title{font-size:1.8rem;font-weight:700;margin-bottom:1.5rem;text-align:left}
.card-container{background:#fff;border-radius:12px;border:1px solid #eee;box-shadow:0 4px 15px rgba(0,0,0,.05);padding:2rem}
@media (max-width: 480px){.card-container{padding:1.5rem}}
.card-container .section-title{margin-top:0;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid #eee}

.category-grid {
    display: flex;
    overflow-x: auto; /* Memungkinkan scroll ke samping */
    overflow-y: hidden;
    gap: 1.5rem;
    padding: 0.5rem 0.25rem 1rem 0.25rem; /* Padding untuk scrollbar di bawah */
    -webkit-overflow-scrolling: touch; /* Scrolling halus di iOS */
}
.category-grid::-webkit-scrollbar { height: 8px; }
.category-grid::-webkit-scrollbar-thumb { background-color: #ddd; border-radius: 4px; }
.category-grid::-webkit-scrollbar-track { background: transparent; }
.category-grid { scrollbar-width: thin; scrollbar-color: #ddd transparent; }
.category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #333;
    padding: 1rem;
    border: 1px solid #eee;
    border-radius: 12px;
    background: #fff;
    transition: box-shadow .2s,transform .2s;
    flex: 0 0 150px; /* Tidak membesar, tidak mengecil, basis 150px */
    width: 150px;
    box-sizing: border-box; /* Agar padding tidak menambah lebar */
}
.category-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,.08); text-decoration: none; }
.category-card img {
    width: 100px;
    height: 100px;
    object-fit: cover; /* <-- Diubah ke cover */
    margin-bottom: .5rem;
    border-radius: 10px; /* Sudut lengkung (PERMINTAAN ANDA) */
}
.category-card span { font-weight: 600; text-align: center; }
/* ========================================================== */
/* === AKHIR PERUBAHAN SEKSI 4 === */
/* ========================================================== */

/* ========================================================== */
/* === 5. EVENT DISKON & COUNTDOWN (PERBAIKAN MOBILE) === */
/* ========================================================== */
.sale-event-card{
    display:grid;
    grid-template-columns: 1.5fr 1fr;
    gap:2rem;
    background:#fff;
    border-radius:12px;
    padding:2rem;
    /* align-items:center; */ /* <-- DIHAPUS, biarkan default 'stretch' */
    border:1px solid #eee;
    box-shadow:0 4px 15px rgba(0,0,0,.05)
}
@media (min-width: 768px){
    .sale-event-card:not(.no-image){
        padding:2.5rem 3rem
    }
}
.sale-event-card.no-image{grid-template-columns:1fr}
.sale-event-details h2{font-size:2rem;font-weight:700;margin-top:0;margin-bottom:.5rem}.sale-event-details p{font-size:1.1rem;color:#555;margin-bottom:1.5rem}.promo-code{color:#d9534f;font-weight:700;background:#fdf2f2;padding:2px 6px;border-radius:4px}.countdown-timer{display:flex;gap:.75rem}.timer-box{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#f4f4f4;border-radius:8px;padding:.75rem;min-width:60px;text-align:center;font-size:.8rem;color:#777;font-weight:500}.timer-box span{font-size:1.75rem;font-weight:700;color:#333;display:block}.timer-box-expired{font-size:1.2rem;font-weight:600;color:#d9534f}

.sale-event-image{
    display:block;
    text-align:center;
    height: 100%; /* <-- DITAMBAHKAN, agar div ini meregang */
}
@media (min-width: 768px){.sale-event-card:not(.no-image) .sale-event-image{display:block}.sale-event-card.no-image .sale-event-image{display:none}}
.sale-event-image img{ max-width: 100%; width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
@media (max-width: 480px){
    .sale-event-card{ padding: 1rem; gap: 1rem; }
    .sale-event-details h2{ font-size: 1.2rem; }
    .sale-event-details p{ font-size: 0.9rem; margin-bottom: 1rem; }
    .timer-box{ padding:.5rem; min-width:0; flex-basis:0; flex-grow:1; font-size:.7rem }
    .timer-box span{ font-size:1.25rem }
}
/* ========================================================== */
/* === AKHIR PERUBAHAN SEKSI 5 === */
/* ========================================================== */

/* === 6. LAYOUT KONTEN UTAMA === */
.main-content{flex-grow:1;width:100%}.page-container{max-width:1200px;margin:0 auto;padding:2rem 1.5rem;box-sizing:border-box;background-color:transparent}.page-header{display:none}.search-results-title{font-size:2rem;font-weight:700;margin-bottom:2rem;border-bottom:1px solid #ddd;padding-bottom:1rem}.static-page-content{background:#fff;padding:2.5rem;border-radius:12px;box-shadow:0 4px 15px rgba(0,0,0,.05);max-width:900px;margin:0 auto}.static-page-content h1{margin-top:0;font-size:2.2rem}.static-page-content .content-body{font-size:1.1rem;line-height:1.7;color:#444}.static-page-content .content-body p{margin-bottom:1.5rem}.static-page-content .content-body h2{font-size:1.8rem;margin-top:2.5rem;margin-bottom:1rem;border-bottom:1px solid #eee;padding-bottom:.5rem}.static-page-content .content-body ul,.static-page-content .content-body ol{padding-left:2rem;margin-bottom:1.5rem}

/* ========================================================== */
/* === 7. GRID & KARTU PRODUK (PERBAIKAN TOMBOL) === */
/* ========================================================== */
.product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 kolom di mobile */
    gap: 0.75rem; /* Jarak lebih kecil di mobile */
}
.product-card{background-color:#fff;border-radius:12px;box-shadow:0 4px 15px rgba(0,0,0,.05);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.product-card:hover{transform:translateY(-5px);box-shadow:0 8px 25px rgba(0,0,0,.08)}
.product-image-wrapper{position:relative;width:100%;padding-top:75%;overflow:hidden}
.product-card-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;background-color:#eee}
.discount-badge{position:absolute;top:0.5rem;left:0.5rem;background-color:#d9534f;color:#fff;padding:3px 6px;font-size:.7rem;font-weight:600;border-radius:4px;z-index:2}
.wishlist-icon{position:absolute;top:0.5rem;right:0.5rem;background:rgba(255,255,255,.8);border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:.8rem;color:#555;cursor:pointer;z-index:2;transition:color .2s}
.wishlist-icon:hover{color:#d9534f}
.wishlist-icon.active{color:#d9534f}
.product-card-body{padding:0.75rem;flex-grow:1}
.product-title-link{text-decoration:none;color:#333}.product-title-link:hover{text-decoration:underline}
.product-card-body h3{font-size:0.9rem;font-weight:600;color:#333;margin-top:0;margin-bottom:.25rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;min-height:2.4em;line-height:1.2}
.product-rating{font-size:.7rem;color:#f0ad4e;margin-bottom:.25rem}
.product-stock{font-size:.75rem;color:#28a745;font-weight:500}
.product-stock i{margin-right:4px}

/* !! PERUBAHAN: Menghapus display:flex dari footer !! */
.product-card-footer {
    padding: 0.75rem;
    border-top: 1px solid #f0f0f0;
    /* display:flex; */ /* <-- DIHAPUS */
    /* justify-content:space-between; */ /* <-- DIHAPUS */
    /* align-items:center; */ /* <-- DIHAPUS */
}

.price-wrapper{display:flex;flex-direction:column;gap:1px}
.price-wrapper del{font-size:.75rem;color:#999;text-decoration:line-through}
.price-wrapper ins{font-size:1rem;font-weight:700;color:#007bff;text-decoration:none}

/* !! PERUBAHAN: Menjadikan tombol 100% width !! */
.btn-add-to-cart {
    padding: .4rem .75rem;
    border: none;
    border-radius: 6px;
    background-color: #28a745;
    color: #fff!important;
    font-size: .75rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s;
    
    /* Properti BARU untuk membuatnya full-width */
    display: block;
    width: 100%;
    margin-top: 0.5rem; /* Jarak antara harga dan tombol */
    box-sizing: border-box; /* Agar padding tidak merusak width 100% */
}
.btn-add-to-cart:hover{background-color:#218838;text-decoration:none}

/* Media Query untuk Desktop (Tidak perlu diubah, akan mewarisi style di atas) */
@media (min-width: 768px) {
    .product-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.5rem;
    }
    .discount-badge {
        top: 1rem; left: 1rem; padding: 4px 8px; font-size: .8rem;
    }
    .wishlist-icon {
        top: 1rem; right: 1rem; width: 32px; height: 32px; font-size: 1rem;
    }
    .product-card-body {
        padding: 1rem;
    }
    .product-card-body h3 {
        font-size: 1.1rem;
        margin-bottom: .5rem;
    }
    .product-rating {
        font-size: .9rem;
        margin-bottom: .5rem;
    }
    .product-stock {
        font-size: .9rem;
    }
    .product-card-footer {
        padding: 1rem;
    }
    .price-wrapper {
        gap: 2px;
    }
    .price-wrapper del {
        font-size: .9rem;
    }
    .price-wrapper ins {
        font-size: 1.2rem;
    }
    .btn-add-to-cart {
        padding: .6rem 1rem;
        font-size: .9rem;
        margin-top: 0.75rem; /* Jarak sedikit lebih besar di desktop */
    }
}
/* ======================================= */
/* === AKHIR PERUBAHAN SEKSI 7 === */
/* ======================================= */


/* Tombol Aksi (untuk kupon, dll) */
.action-btn{padding:6px 12px;text-decoration:none;border-radius:6px;color:#fff!important;margin-right:5px;display:inline-block;margin-bottom:5px;font-size:.9rem;font-weight:500;transition:opacity .2s;border:none;cursor:pointer}.action-btn:hover{text-decoration:none;opacity:.8}.btn-edit{background-color:#f0ad4e}.btn-delete{background-color:#d9534f}
/* === 8. FORMULIR (Login, Register) === */
.form-container{background-color:#fff;padding:2rem;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.05);width:100%;max-width:400px;box-sizing:border-box;margin:2rem auto}.form-container h2{text-align:center;color:#333;margin-top:0;margin-bottom:1.5rem}.form-group{margin-bottom:1rem}.form-group label{display:block;margin-bottom:.5rem;color:#555;font-weight:600}.form-group input[type=text],.form-group input[type=email],.form-group input[type=password],.form-group input[type=number],.form-group textarea,.form-group select{width:100%;padding:.75rem;border:1px solid #ddd;border-radius:4px;box-sizing:border-box;font-size:1rem;font-family:inherit}.form-group button{width:100%;padding:.75rem;border:none;border-radius:4px;background-color:#007bff;color:#fff;font-size:1rem;font-weight:600;cursor:pointer;transition:background-color .2s}.form-group button:hover{background-color:#0056b3}.form-link{text-align:center;margin-top:1rem;color:#777}
/* === 9. PESAN ERROR/SUKSES === */
.message{padding:1rem;border-radius:4px;margin-bottom:1rem;text-align:center}.message.error{background-color:#f8d7da;color:#721c24;border:1px solid #f5c6cb}.message.success{background-color:#d4edda;color:#155724;border:1px solid #c3e6cb}

/* ========================================================== */
/* === 10. CHECKOUT CONTAINER (DIMODIFIKASI) === */
/* Style lama ini (.checkout-container) tidak lagi digunakan di halaman checkout 2 kolom, */
/* tapi tetap di sini untuk halaman lain jika ada. */
/* ========================================================== */
.checkout-container{max-width:600px;margin:2rem auto;background-color:#fff;padding:2rem;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.05)}
/* Style di bawah ini (header, summary, dll) sekarang digunakan di dalam .checkout-summary-card */
.checkout-header{border-bottom:1px solid #eee;padding-bottom:1rem;margin-bottom:1.5rem}.checkout-header h2{margin:0;color:#333}.summary-item{display:flex;justify-content:space-between;margin-bottom:1rem;font-size:1rem; /* Dikecilkan sedikit */}.summary-item .label{color:#555}.summary-item .value{font-weight:600;color:#333}.total{border-top:1px solid #eee;padding-top:1rem;margin-top:1.5rem}.total .label{font-size: 1.1rem;}.total .value{font-size:1.3rem;font-weight:700;color:#007bff}

/* ========================================================== */
/* !! PERBAIKAN 2 (Tombol Kupon) !! */
/* Mengembalikan style asli kotak kupon */
/* ========================================================== */
.coupon-form-container{background:#f9f9f9;padding:1rem 1.5rem;border-radius:8px;border:1px dashed #ddd}
.coupon-form-container .form-group label{font-weight:600;color:#333;font-size:1rem}
.coupon-form-container .action-btn{width:100px;padding:.75rem 1rem;font-size:.9rem;height:100%;margin:0}.coupon-form-container input[type=text]{flex-grow:1}
.payment-btn{display:block;width:100%;padding:.75rem;border:none;border-radius:4px;background-color:#28a745;color:#fff;font-size:1.1rem;font-weight:600;text-align:center;text-decoration:none;cursor:pointer;transition:background-color .2s;margin-top:2rem}.payment-btn:hover{background-color:#218838}

/* === 11. PILIHAN (VARIAN & PEMBAYARAN) === */
.payment-options,.variant-options{display:flex;flex-direction:column;gap:.75rem}.payment-label,.variant-label{display:block;border:1px solid #ddd;border-radius:8px;padding:1rem;cursor:pointer;transition:border-color .2s,box-shadow .2s}.payment-label:hover,.variant-label:hover{border-color:#aaa}.payment-label input[type=radio],.variant-label input[type=radio]{display:none}.payment-label:has(input[type=radio]:checked),.variant-label:has(input[type=radio]:checked){border-color:#007bff;box-shadow:0 0 0 2px rgba(0,123,255,.25)}.payment-details{display:flex;align-items:center}.payment-details img{width:40px;height:40px;object-fit:contain;margin-right:1rem}.payment-details .payment-name{font-size:1.1rem;font-weight:600}.variant-details{display:flex;justify-content:space-between;align-items:center}.variant-details .variant-name{font-size:1.1rem;font-weight:600}.variant-details .variant-price{font-size:1.2rem;font-weight:700;color:#007bff}

/* ========================================================== */
/* === 12. HALAMAN DETAIL PRODUK (DIPERBARUI) === */
/* ========================================================== */
.product-detail-layout{display:grid;grid-template-columns:1fr;gap:2rem;background-color:#fff;padding:2rem;border-radius:12px;box-shadow:0 4px 15px rgba(0,0,0,.05)}
@media (min-width: 768px){
    .product-detail-layout{
        grid-template-columns: 1fr 1fr; /* 2 Kolom di desktop */
        gap: 2.5rem; /* Jarak lebih besar */
        padding: 2.5rem;
    }
    .product-info {
        position: sticky; /* !! BARU: Buat kolom info sticky !! */
        top: 90px; /* 70px header + 20px jarak */
        align-self: start; /* Mencegah kolom melar */
        
        /* ========================================================== */
        /* !! PERBAIKAN 1 (Tombol Terpotong) !! */
        /* Menghapus max-height dan overflow-y */
        /* ========================================================== */
        /* max-height: calc(100vh - 110px); */ /* DIHAPUS */
        /* overflow-y: auto; */ /* DIHAPUS */
        
        padding-right: 1rem; /* Jarak untuk scrollbar (opsional) */
    }
}
.product-media .main-product-image{width:100%;border-radius:8px;background-color:#f0f0f0; border: 1px solid #eee;}.video-container{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin-top:1.5rem;border-radius:8px}.video-container iframe{position:absolute;top:0;left:0;width:100%;height:100%}.product-info h1{font-size:2rem;font-weight:700;margin-top:0;margin-bottom:1rem}.product-description-short{font-size:1rem;line-height:1.6;color:#555;margin-bottom:1.5rem; /* Ini untuk deskripsi singkat */}.product-info h3{font-size:1.25rem;margin-bottom:1rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #eee;}

/* !! BARU: Style untuk Box Harga Utama !! */
.product-main-price {
    background-color: #f7f9fc;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1rem 1.5rem;
    margin: 1.5rem 0;
}
.product-main-price .price-wrapper {
    align-items: flex-start;
}
.product-main-price .price-wrapper del {
    font-size: 1.1rem;
    color: #999;
    text-decoration: line-through;
}
.product-main-price .price-wrapper ins {
    font-size: 2.2rem;
    font-weight: 700;
    color: #007bff;
    text-decoration: none;
    line-height: 1.1;
}

.backtest-section{margin-top:3rem;padding:2rem;background-color:#fff;border-radius:12px;box-shadow:0 4px 15px rgba(0,0,0,.05)}.backtest-section h2{text-align:center;margin-top:0}.backtest-section img{width:100%;max-width:100%;display:block;margin:0 auto;border-radius:8px}

/* === 13. FOOTER (DESAIN BARU) === */
.main-footer{background-color:#222;color:#ccc;padding:3rem 1.5rem 2rem 1.5rem;margin-top:3rem}.footer-content-container{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:2rem;margin-bottom:2rem}@media (min-width: 576px){.footer-content-container{grid-template-columns:repeat(2,1fr)}}@media (min-width: 992px){.footer-content-container{grid-template-columns:repeat(4,1fr)}}.footer-column h4{font-size:1.1rem;font-weight:600;color:#fff;margin-top:0;margin-bottom:1rem}.footer-column p{font-size:.9rem;line-height:1.6;margin-bottom:1rem}.social-icons{display:flex;gap:.75rem}.social-icons a{display:flex;align-items:center;justify-content:center;width:36px;height:36px;background-color:#444;color:#fff;border-radius:50%;text-decoration:none;transition:background-color .2s}.social-icons a:hover{background-color:#007bff}.footer-links,.footer-contact{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.75rem}.footer-links li a{font-size:.9rem;color:#ccc;text-decoration:none}.footer-links li a:hover{color:#fff;text-decoration:underline}.footer-contact li{display:flex;align-items:center;gap:.75rem;font-size:.9rem;color:#ccc}.footer-contact li i{font-size:1.1rem;color:#007bff}.footer-bottom{max-width:1200px;margin:0 auto;border-top:1px solid #444;padding-top:2rem;text-align:center;font-size:.9rem}.footer-container{display:none}
/* === 14. CHECKOUT TABS === */
.checkout-tabs{display:flex;border-bottom:1px solid #ddd;margin-bottom:1.5rem}.tab-link{padding:1rem 1.5rem;cursor:pointer;font-size:1.1rem;font-weight:600;color:#777;border-bottom:3px solid transparent;background-color:transparent;border-top:none;border-left:none;border-right:none}.tab-link.active{color:#007bff;border-bottom-color:#007bff}.tab-content{display:none}.tab-content.active{display:block}
/* === 15. MODAL PEMBAYARAN (SWEETALERT) === */
.swal-payment-options{display:flex;flex-direction:column;gap:.75rem;max-height:300px;overflow-y:auto;margin-top:1rem}.swal-payment-label{display:block;border:1px solid #ddd;border-radius:8px;padding:1rem;cursor:pointer;transition:border-color .2s,box-shadow .2s}.swal-payment-label:hover{border-color:#aaa}.swal-payment-label input[type=radio]{display:none}.swal-payment-label:has(input[type=radio]:checked){border-color:#007bff;box-shadow:0 0 0 2px rgba(0,123,255,.25)}.swal-payment-details{display:flex;align-items:center}.swal-payment-details img{width:40px;height:40px;object-fit:contain;margin-right:1rem}.swal-payment-details .swal-payment-name{font-size:1.1rem;font-weight:600;color:#333}.swal2-popup{font-size:1rem!important}.swal2-title{font-size:1.5rem!important}
/* === 16. AUTH MODAL (POP-UP) BARU === */
.auth-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:2000}.auth-modal-overlay.active{display:flex}.auth-modal-content{background:#fff;padding:1.5rem 2rem;border-radius:12px;width:100%;max-width:400px;position:relative;box-shadow:0 5px 20px rgba(0,0,0,.2);margin:1rem}.auth-modal-close{position:absolute;top:10px;right:15px;font-size:2rem;font-weight:300;color:#999;background:none;border:none;cursor:pointer}.auth-modal-close:hover{color:#333}.auth-modal-tabs{display:flex;border-bottom:1px solid #ddd;margin-bottom:1.5rem}.auth-tab-link{padding:.75rem 1rem;cursor:pointer;font-size:1.1rem;font-weight:600;color:#777;border-bottom:3px solid transparent;background:none;border-top:none;border-left:none;border-right:none;flex-grow:1}.auth-tab-link.active{color:#007bff;border-bottom-color:#007bff}.auth-tab-content{display:none}.auth-tab-content.active{display:block}#auth-modal-message{margin-bottom:1rem}#auth-modal-message .message{margin-bottom:0;text-align:left;padding:.75rem 1rem}
/* === 17. TAB PROMO (BARU) - DIPERBAIKI POSISI BAWAH === */
.floating-promo-tab{
    position:fixed;
    /* FIX POSISI: Ganti top:50% ke bottom: 85px untuk memberi ruang pada tombol chat */
    bottom:130px; 
    right:0;
    
    /* FIX ROTASI: Transformasi harus disesuaikan agar rotasi tetap berada di bawah */
    transform:rotate(270deg) translateX(100%); 
    transform-origin: bottom right; 

    background-color:#007bff;
    color:#fff;
    padding:.5rem 1.5rem;
    font-weight:600;
    font-size:1rem;
    border-radius:8px 8px 0 0;
    z-index:998;
    cursor:pointer;
    box-shadow:-2px -2px 10px rgba(0,0,0,.1)
}
/* ========================================================== */
/* === 18. CHECKOUT 2-COLUMN (PROFESSIONAL) - BARU === */
/* ========================================================== */
.checkout-page-container{display:grid;grid-template-columns:2fr 1fr;gap:2rem;align-items:flex-start}
.checkout-column-main-card{background:#fff;border-radius:8px;padding:2rem;box-shadow:0 4px 12px rgba(0,0,0,.05)}

/* ========================================================== */
/* !! PERBAIKAN 3 (Badge Terenkripsi) !! */
/* Membuat seluruh sidebar (card + badge) menjadi sticky */
/* ========================================================== */
.checkout-column-sidebar{
    position: sticky;
    top: 90px;
}
.checkout-summary-card{
    background:#fff;
    border-radius:8px;
    padding:1.5rem;
    border:1px solid #e0e0e0;
    box-shadow:0 4px 12px rgba(0,0,0,.05);
    /* Hapus sticky dari card, pindah ke parent */
    /* position:sticky; */ /* DIHAPUS */
    /* top:90px; */ /* DIHAPUS */
}
.checkout-summary-card h3{margin-top:0;border-bottom:1px solid #eee;padding-bottom:1rem;margin-bottom:1rem}
.checkout-summary-product{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}
.checkout-summary-product-image{width:80px;height:80px;object-fit:cover;border-radius:8px;border:1px solid #eee;flex-shrink:0}
.checkout-summary-product-info{display:flex;flex-direction:column}
.checkout-summary-product-info .product-name{font-weight:600;color:#333;line-height:1.3}
.checkout-summary-product-info .variant-name{font-size:.9rem;color:#555}
.checkout-trust-badge{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-top:1.5rem;padding:1rem;background-color:#f7f9fc;border-radius:8px;color:#555;font-weight:500;font-size:.9rem}
.checkout-trust-badge i{color:#28a745;font-size:1.1rem}

/* ========================================================== */
/* !! PERBAIKAN 2 (Tombol Kupon) !! */
/* Menambahkan style untuk form kupon di dalam sidebar */
/* ========================================================== */
.checkout-summary-card .coupon-form-container {
    padding: 1rem; /* Mengembalikan padding abu-abu */
    margin-bottom: 1rem;
}
.checkout-summary-card .coupon-form-container .form-group div {
    display: flex;
    gap: 0.5rem;
}
.checkout-summary-card .coupon-form-container input[type="text"] {
    flex-grow: 1; /* Input mengambil sisa ruang */
    padding: .6rem .75rem; /* Menyamakan padding dengan form lain */
    font-size: 0.9rem;
    margin: 0;
}
.checkout-summary-card .coupon-form-container .action-btn {
    flex-shrink: 0; /* Mencegah tombol menyusut */
    width: auto;
    padding: 0 1.25rem; /* Padding horizontal untuk tombol */
    font-size: 0.9rem;
    height: auto; /* Biarkan height diatur oleh padding internal */
    margin: 0;
}


@media (max-width: 992px){
    .checkout-page-container{
        grid-template-columns:1fr;
        gap:1.5rem
    }
    .checkout-column-sidebar{
        order:-1;
        position: static; /* Hapus sticky di mobile */
    }
    .checkout-summary-card{
        position:static
    }
    .checkout-column-main-card{
        padding:1.5rem
    }
}

/* ========================================================== */
/* === 19. TAB KONTEN PRODUK (BARU) === */
/* ========================================================== */
.product-tabs-section {
    margin-top: 2rem;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,.05);
    padding: 1.5rem 2rem;
}
.product-tabs-section .checkout-tabs {
    margin-bottom: 0; /* Hapus margin bawah dari tab */
}
/* Pastikan konten tab deskripsi memiliki style yang baik */
.product-tabs-section .static-page-content {
    box-shadow: none;
    padding: 0;
}
.product-tabs-section .backtest-section {
    box-shadow: none;
    padding: 0;
    margin-top: 0;
}

@media (max-width: 768px) {
    .product-tabs-section {
        padding: 1rem 1.5rem;
    }
    .product-tabs-section .tab-link {
        font-size: 1rem;
        padding: 0.75rem 0.5rem;
        flex-grow: 1; /* Buat tab memenuhi lebar */
        text-align: center;
    }
}

/* ========================================================== */
/* === 20. OPSI BUNDLE VPS (BARU) === */
/* ========================================================== */
.vps-bundle-option {
    background: #f7f9fc;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1.5rem;
}
.vps-bundle-option label {
    display: flex;
    align-items: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    cursor: pointer;
}
.vps-bundle-option input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-right: 0.75rem;
    accent-color: #007bff; /* Warna centang biru */
}
.vps-bundle-option p {
    font-size: 0.85rem;
    color: #555;
    line-height: 1.5;
    margin-top: 0.5rem;
    margin-bottom: 0;
    padding-left: 28px; /* Sejajarkan dengan teks label */
}
/* ========================================================== */
/* === 20. CHECKOUT ORDER BUMP (BARU) === */
/* ========================================================== */
.checkout-order-bump {
    background: #fff;
    border: 2px dashed #007bff; /* Garis putus-putus biru */
    border-radius: 8px;
    margin-bottom: 2rem;
    box-shadow: 0 4px 15px rgba(0,123,255,.1);
    animation: pulse-blue 2s infinite;
}
.order-bump-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #f0f7ff;
    padding: 1rem 1.5rem;
    border-bottom: 2px dashed #007bff;
}
.order-bump-header i {
    font-size: 1.5rem;
    color: #007bff;
}
.order-bump-header div {
    display: flex;
    flex-direction: column;
}
.order-bump-header strong {
    font-size: 1.1rem;
    color: #333;
}
.order-bump-header span {
    font-size: 0.9rem;
    color: #555;
}
.order-bump-body {
    padding: 1.5rem;
}
.order-bump-body label {
    display: flex;
    align-items: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    cursor: pointer;
}
.order-bump-body input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-right: 0.75rem;
    accent-color: #007bff;
}
.order-bump-body p {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.5;
    margin-top: 0.5rem;
    margin-bottom: 0;
    padding-left: 31px; /* Sejajarkan dengan teks label */
}
/* Animasi border */
@keyframes pulse-blue {
    0% { box-shadow: 0 0 0 0 rgba(0,123,255, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(0,123,255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0,123,255, 0); }
}

/* ========================================================== */
/* === 20. CHECKOUT ORDER BUMP (BARU) === */
/* ========================================================== */
.checkout-order-bump {
    background: #fff;
    border: 2px dashed #007bff; /* Garis putus-putus biru */
    border-radius: 8px;
    margin-bottom: 2rem;
    box-shadow: 0 4px 15px rgba(0,123,255,.1);
    animation: pulse-blue 2s infinite;
}
.order-bump-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #f0f7ff;
    padding: 1rem 1.5rem;
    border-bottom: 2px dashed #007bff;
}
.order-bump-header i {
    font-size: 1.5rem;
    color: #007bff;
}
.order-bump-header div {
    display: flex;
    flex-direction: column;
}
.order-bump-header strong {
    font-size: 1.1rem;
    color: #333;
}
.order-bump-header span {
    font-size: 0.9rem;
    color: #555;
}
.order-bump-body {
    padding: 1.5rem;
}

/* Style untuk dropdown */
.order-bump-body .form-group-select {
    width: 100%;
    padding: .75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 1rem;
    font-family: inherit;
    background-color: #f7f9fc;
}
.order-bump-body .form-group-select:focus {
    border-color: #007bff;
    outline: none;
}

/* Animasi border */
@keyframes pulse-blue {
    0% { box-shadow: 0 0 0 0 rgba(0,123,255, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(0,123,255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0,123,255, 0); }
}

/* ========================================================== */
/* === 21. KARTU PROMO BROKER (BARU) === */
/* ========================================================== */
.broker-promo-card {
    background: var(--card-bg, #fff);
    border-radius: 12px;
    border: 1px solid var(--border-color, #eee);
    box-shadow: 0 4px 15px rgba(0,0,0,.05);
    padding: 2rem;
    display: flex;
    align-items: center;
    gap: 2rem;
}
.broker-promo-icon {
    flex-shrink: 0;
    font-size: 3rem;
    color: #fff;
    background-color: var(--primary-color, #007bff);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.broker-promo-details {
    flex-grow: 1;
}
.broker-promo-details h2 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-dark, #333);
}
.broker-promo-details p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-medium, #555);
}
.broker-promo-btn {
    flex-shrink: 0;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    background-color: var(--primary-color, #007bff);
    color: #fff !important;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s;
}
.broker-promo-btn:hover {
    background-color: var(--primary-hover, #0056b3);
}

/* Tampilan Mobile */
@media (max-width: 768px) {
    .broker-promo-card {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
        padding: 1.5rem;
    }
    .broker-promo-details h2 {
        font-size: 1.25rem;
    }
    .broker-promo-btn {
        width: 100%;
    }
}

/* ... (Seksi 1 sampai 22 Anda) ... */

/* ========================================================== */
/* === 23. FOOTER LOGO (BARU) === */
/* ========================================================== */
.footer-logo {
    /* Menggantikan margin h4 */
    margin-top: 0;
    margin-bottom: 1rem;
}
.footer-logo a {
    display: inline-block;
    text-decoration: none;
}
.footer-logo img {
    max-height: 40px; /* Batasi tinggi logo */
    width: auto;
    max-width: 200px; /* Pastikan tidak terlalu lebar */
    display: block; /* Agar tidak ada spasi di bawahnya */
}
.footer-logo span {
    /* Meniru style h4 sebelumnya */
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
}