html { box-sizing: border-box; }r *, *:before, *:after { box-sizing: inherit; } /* --- Variabel & Global Styles --- */ :root { --bg-main: #1B160D; --bg-card: #2F2A22; --text-primary: #FFFFFF; --text-secondary: #A0A0A0; --accent-orange: #b87841; --border-color: #3A3A3A; --font-body: 'Poppins', sans-serif; } body { margin: 0; font-family: var(--font-body); background-color: var(--bg-main); background-size: cover; background-position: center; background-attachment: fixed; color: var(--text-secondary); -webkit-user-select: none; /* Safari */ -ms-user-select: none; /* IE 10+ */ user-select: none; /* Standar */ /* Mencegah pembesaran teks otomatis di iOS dan browser lain */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } input, textarea, [contenteditable="true"] { -webkit-user-select: text; /* Safari */ -ms-user-select: text; /* IE 10+ */ user-select: text; /* Standar */ } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* ========================================= */ /* STYLING PAGE TRANSITION / LOADING OVERLAY */ /* ========================================= */ .loading-overlay { position: fixed; /* Tetap di posisi yang sama meskipun di-scroll */ top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(27, 22, 13, 0.9); /* Warna latar utama Anda dengan sedikit transparansi */ z-index: 9999; /* Pastikan berada di lapisan paling atas */ display: flex; justify-content: center; align-items: center; /* Atur state awal (tersembunyi) */ visibility: hidden; opacity: 0; /* Tambahkan transisi agar muncul & hilang dengan halus */ transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s; } /* Style saat loading aktif, kita tambahkan class 'is-loading' ke */ body.is-loading .loading-overlay { visibility: visible; opacity: 1; transition-delay: 0s; } /* Animasi Spinner (bisa disesuaikan) */ .spinner { width: 50px; height: 50px; border: 5px solid rgba(255, 255, 255, 0.2); border-top-color: var(--accent-orange, #D37F3A); /* Warna aksen Anda */ border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ======================================================= */ /* === STYLING ANNOUNCEMENT BAR (VERSI DESAIN BARU) === */ /* ======================================================= */ /* --- Keyframe untuk animasi denyut ikon --- */ @keyframes pulse-soft { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } } /* --- Wadah utama bar --- */ .announcement-bar-v2 { position: sticky; top: 0; width: 100%; z-index: 1050; background-color: var(--bg-card, #2F2A22); /* Warna lebih gelap, menyatu dengan tema */ padding: 12px 0; font-size: 0.9rem; font-weight: 500; } /* --- Konten di dalam bar (menggunakan flexbox) --- */ .announcement-bar-content-v2 { display: flex; justify-content: space-between; /* <-- KUNCI untuk mendorong item ke kiri dan kanan */ align-items: center; gap: 20px; } /* --- Bagian teks pengumuman di sisi kiri --- */ .announcement-bar-v2 .announcement-text-v2 { display: flex; align-items: center; gap: 10px; color: var(--text-secondary); } .announcement-bar-v2 .announcement-text-v2 a, .announcement-bar-v2 .announcement-text-v2 span { color: var(--text-primary); font-weight: 600; text-decoration: none; transition: color 0.2s ease; } .announcement-bar-v2 .announcement-text-v2 a:hover { color: var(--accent-orange); } /* --- Bagian timer di sisi kanan --- */ .timer-wrapper-v2 { display: flex; align-items: center; gap: 8px; background-color: #FD3A23; padding: 6px 14px; border-radius: 4px; color: var(--text-secondary); } .timer-wrapper-v2 strong { color: var(--text-primary); font-weight: 700; font-size: 1rem; letter-spacing: 1px; min-width: 90px; /* Agar layout tidak "lompat" saat angka berubah */ text-align: center; } /* --- Tampilan Mobile --- */ @media (max-width: 768px) { .nav-links .btn { font-size: 0.85rem; font-weight: 600; /* --- TAMBAHAN UNTUK PERBAIKAN --- */ display: flex; /* Membuat konten di dalamnya bisa di-align */ align-items: center; /* Membuat konten (ikon/teks) di tengah secara vertikal */ justify-content: center;/* Membuat konten di tengah secara horizontal */ white-space: nowrap; /* PENTING: Mencegah teks turun baris */ text-align: center; /* Memastikan teks selalu di tengah */ } .announcement-bar-content-v2 { justify-content: center; /* Kembali ke tengah di mobile agar rapi */ flex-direction: column; /* Tumpuk secara vertikal */ gap: 8px; } .timer-wrapper-v2 { width: 50%; justify-content: center; } } /* --- Header & Navbar --- */ .main-branding-header { padding: 30px 0; text-align: center; position: relative; /* Diperlukan untuk menumpuk pseudo-element */ z-index: 1; /* Diperlukan untuk menumpuk pseudo-element */ } .main-branding-header::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('../images/background.png'); background-size: cover; /* Pastikan gambar menutupi area */ background-position: center; /* Posisikan gambar di tengah */ z-index: -1; /* Di sini keajaibannya terjadi */ } @keyframes pulse-animation { 0% { transform: scale(1); /* Ukuran normal */ } 50% { transform: scale(1.05); /* Sedikit lebih besar */ } 100% { transform: scale(1); /* Kembali ke ukuran normal */ } } .main-logo { max-height: 300px; width: auto; animation-name: pulse-animation; animation-duration: 3s; /* Durasi satu siklus animasi (3 detik) */ animation-timing-function: ease-in-out; /* Membuat gerakan lebih halus */ animation-iteration-count: infinite; /* Mengulang animasi selamanya */ } .navbar { background-color: #1A150F ; padding: 30px 0; } .navbar-container { display: flex; justify-content: space-between; align-items: center; } .navbar-profile { display: flex; align-items: center; gap: 15px; } .navbar-profile img { width: 48px; height: 48px; border-radius: 5px; } .navbar-profile span { font-size: 0.9rem; line-height: 1.7; color: #737373; font-weight: 600; font-family: 'Montserrat', sans-serif; } .navbar-profile span strong { font-size: 1rem; color: var(--text-primary); font-weight: 600; } .nav-links { list-style: none; margin: 0; padding: 0; display: flex; gap: 15px; } .btn { padding: 15px 30px; text-decoration: none; font-weight: 600; border-radius: 5px; transition: all 0.2s ease; cursor: pointer; border: none; font-family: 'Poppins', sans-serif; } .btn-secondary { background-color: #4B3420; color: #fff; } .btn-secondary:hover { background-color: #3a2818; } .btn-primary { background-color: #664529; color: white; } .btn-primary:hover { background-color: #462f1b } .btn-apply {background-color: #664529; font-family: 'Poppins', sans-serif;} .btn-apply:hover {background-color: #462f1b;} .main-cards-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* Responsif */ gap: 30px; margin: 40px 0; } .main-cards-container { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin: 40px 0; margin-top: 30px; } .main-card { height: 220px; border-radius: 5px; position: relative; overflow: hidden; text-decoration: none; color: var(--text-primary); transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; /* align-items: center; Dihapus agar teks tidak di tengah */ padding: 30px 50px; box-sizing: border-box; } .main-card-content i { transition: all 0.3s ease; } /* Saat card di-hover, panah geser ke kanan */ .main-card:hover .main-card-content i { transform: translateX(6px); } /* Card hover efek existing */ .main-card:hover { transform: translateY(-8px); box-shadow: 0 15px 30px rgba(0,0,0,0.3); } /* === PERUBAHAN WARNA LATAR GRADASI BARU === */ .main-card.card-ranks { background-image: linear-gradient(to bottom right, #FFA21F, #D78503); } .main-card.card-bucks { background-image: linear-gradient(to bottom right, #016121, #064B1D); } .main-card.card-upgrades { background-image: linear-gradient(to bottom right, #FD3A23, #B83323); } .main-card.card-bundles { background-image: linear-gradient(to bottom right, #400959, #A222AB); } .main-card-content { position: relative; z-index: 2; /* Pastikan teks di atas gambar overlay */ /* Posisi teks sekarang akan otomatis di kiri atas */ } .main-card-content h2 { font-size: 2.5rem; margin: 0; font-weight: 400; color: white; font-family: 'Rubik One', sans-serif; } .main-card-content p { margin: 0px 0 0 0; font-weight: 600; color: rgba(255, 255, 255, 0.8); margin-top: 10px; } .main-card-bg-image-ranks { position: absolute; right: -70px; bottom: -60px; height: 150%; width: auto; z-index: 1; pointer-events: none; transition: opacity 0.3s ease; } .main-card-bg-image-bucks { position: absolute; right: -60px; bottom: -100px; height: 150%; width: 300px; height: auto; z-index: 1; pointer-events: none; transition: all 0.3s ease; } .main-card-bg-image { opacity: 0.9; transition: all 0.4s ease; } .main-card:hover .main-card-bg-image { transform: scale(1.1); /* Besar 10% */ opacity: 1.0; } /* --- Footer Info --- */ .footer-section { max-width: 100%; background-color: #1A140F; padding: 40px 20px; margin-top: 60px; justify-content: center; align-items: center; } .info-footer-container { display: grid; grid-template-columns: 1fr 1fr; gap: 180px; padding: 40px 0; max-width: 1200px; justify-content: center; align-items: center; justify-self: center; } .info-footer-container h3 { font-size: 20px; margin-top: 0; font-family: 'Rubik One', sans-serif; color: #fff; font-weight: 400; } .info-footer-container p { line-height: 29px; font-size: 16px; font-weight: 600; font-family: 'Montserrat', sans-serif; color: rgba(255, 255, 255, 0.698); } .btn-discord { display: inline-flex; align-items: center; gap: 10px; background-color: #93421F; color: white; margin-top: 24px; transition: all 0.3s ease; font-family: 'Rubik One', sans-serif; font-weight: 400; } .btn-discord:hover { background-color:#FF7D10; transform: translateY(-8px); } .btn-discord img { height: 20px; } /* --- Footer Utama --- */ .main-footer { position: relative; text-align: center; padding: 30px 20px; margin-top: 0; font-size: 0.9rem; line-height: 150%; background-color: #1A140F; } .main-footer::before { content: ""; max-width: 1200px; /* panjang border yang kamu mau */ width: 100%; height: 1px; background-color: #211B15; position: absolute; top: 0; left: 50%; transform: translateX(-50%); } .main-footer p { margin: 5px 0; line-height: 1.6; font-family: 'Montserrat', sans-serif; font-weight: 600; color: rgba(255, 255, 255, 0.698); } /* Responsif */ @media (max-width: 900px) { .main-cards-container, .info-footer-container { grid-template-columns: 1fr; } } /* ========================================= */ /* STYLING POPUP LOGIN USERNAME */ /* ========================================= */ /* Overlay di-style dengan 'flex' agar sesuai dengan JS Anda */ /* Aturan baru untuk menyembunyikan dan menampilkan popup */ .popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); z-index: 1050; display: flex; justify-content: center; align-items: center; backdrop-filter: blur(5px); /* Sembunyikan secara default */ visibility: hidden; opacity: 0; transition: visibility 0s linear 0.3s, opacity 0.3s ease; } /* Aturan untuk menampilkan popup ketika memiliki class .show */ .popup-overlay.show { visibility: visible; opacity: 1; transition: visibility 0s linear 0s, opacity 0.3s ease; } @keyframes fadeInPopup { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } /* Body & Form */ .popup-body .form-group { margin-bottom: 20px; } .form-control-custom { width: 490px; background-color: #241A0F; border: none; border-radius: 5px; padding: 20px 0px; padding-left: 24px; color: #ffffff; font-size: 1rem; transition: border-color 0.3s, box-shadow 0.3s; font-family: 'Poppins', sans-serif; } .form-control-custom::placeholder { color: #888; padding: 0 0px; font-family: 'Poppins', sans-serif; } .form-control-custom:focus { outline: none; } /* Tombol Submit */ .btn-custom-primary { width: 100%; padding: 14px; color: #121212; border: none; border-radius: 5px; font-size: 1.1rem; font-weight: bold; text-transform: uppercase; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; } .btn-custom-primary:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4); } /* Tombol Close (X) */ .popup-close { display: none; top: 10px; right: 15px; font-size: 28px; font-weight: 300; color: #aaa; cursor: pointer; transition: color 0.3s, transform 0.3s; } .popup-close:hover { transform: rotate(90deg); } /* ========================================= */ /* STYLING POPUP LOGIN BARU (PLATFORM) */ /* ========================================= */ .login-popup-container { width: 100%; /* Ubah agar lebarnya fleksibel */ max-width: 650px; /* Beri batas lebar maksimal agar tidak terlalu besar di desktop */ padding: 30px 40px; /* Sesuaikan padding agar lebih seimbang */ background-color: #291E12; background-size: cover; background-position: center; overflow: hidden; border-radius: 5px; box-sizing: border-box; /* Tambahkan ini untuk kalkulasi padding yang lebih baik */ } /* Cari selector ini dan ganti isinya */ .login-popup-header .popup-title { color: #FFFFFF; font-size: 2.2rem; /* Ukuran font bisa disesuaikan */ margin: 0; line-height: 1.2; /* Tambahkan ini agar tidak ada jarak berlebih jika teks wrap */ } .login-popup-header { padding: 30px 40px; text-align: center; } .login-popup-header .popup-subtitle { color: #ccc; font-size: 0.95rem; margin: 5px 0 0 0; font-weight: 600; margin-bottom: 24px; } /* Kontainer untuk dua tombol platform */ .platform-buttons-container { display: grid; grid-template-columns: 1fr 1fr; /* 2 kolom */ gap: 15px; } /* Gaya umum untuk tombol platform */ .platform-btn { padding: 20px 15px; background-color: #93421F; color: #eee; font-size: 1rem; font-weight: 700; border-radius: 5px; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 10px; border: none; font-family: 'Poppins', sans-serif; margin-bottom: 48px; } .platform-btn:hover { background-color: #77361a; transform: translateY(-3px); border: none; } .platform-btn i { font-size: 1.2rem; color: #ffffff; /* Warna ikon */ display: none; } /* ========================================= */ /* STYLING POPUP REALM BARU (V2) */ /* (CSS Anda dengan modifikasi) */ /* ========================================= */ .realm-popup-container-v2 { width: 100%; /* MODIFIKASI: Mengurangi lebar maks untuk 2 kartu */ max-width: 700px; /* MODIFIKASI: Menyesuaikan padding */ padding: 40px 60px 60px 60px; background-color: #291E12; border-radius: 5px; overflow: hidden; } .realm-popup-header-v2 { text-align: center; margin-bottom: 24px; } .realm-popup-header-v2 .popup-title { color: #FFFFFF; font-size: 36px; margin-bottom: -5px; } .realm-popup-header-v2 .popup-subtitle { color: #ccc; font-size: 0.95rem; font-weight: 600; } /* MODIFIKASI: Grid untuk 2 kartu */ .realm-grid-v2 { display: grid; /* Diubah dari repeat(3, 1fr) menjadi repeat(2, 1fr) */ grid-template-columns: repeat(2, 1fr); /* 2 kolom */ gap: 20px; } /* Styling Kartu Realm */ .realm-card-v2 { position: relative; height: 300px; border-radius: 5px; overflow: hidden; text-decoration: none; color: white; transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid transparent; /* border awal transparan */ } .realm-card-v2:hover { transform: translateY(-5px); border-color: #D37F3A; /* Border muncul saat hover */ } /* Background/Ikon Kartu */ .realm-card-bg-v2 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: 80%; /* Ikon tidak terlalu besar */ background-position: center 45%; /* Posisikan ikon sedikit ke atas */ background-repeat: no-repeat; transition: transform 0.4s ease; background-color: #4B3420; } .realm-card-v2:hover .realm-card-bg-v2 { transform: scale(1.05); } /* Overlay Gelap di Atas Gambar */ .realm-card-overlay-v2 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* Judul di Bawah Kartu */ .realm-card-title-v2 { position: absolute; /* MODIFIKASI: Memberi jarak 20px dari bawah agar tidak menempel */ bottom: -10px; left: 50%; transform: translateX(-50%); z-index: 2; font-size: 1.5rem; font-weight: 700; width: 100%; text-align: center; } /* ========================================= */ /* STYLING HALAMAN PRODUK (PRODUCTS_VIEW) */ /* ========================================= */ /* Header Halaman (Back, Judul, More Info) */ .page-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; margin-top: 40px; margin-bottom: 40px; border-bottom: 1px solid #2e2013; } .page-header h1 { color: rgba(255, 255, 255, 0.9); font-size: 2rem; margin: 0; text-align: center; flex-grow: 1; /* Membuat judul mengisi ruang tersisa */ font-family: 'Rubik One', sans-serif; font-weight: 400; } .page-header .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; /* Padding lebih kecil untuk tombol header */ font-size: 0.9rem; } /* Grid untuk Produk */ .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* 4 kolom di desktop, 2 di tablet, 1 di mobile */ gap: 30px; } /* Kartu Produk Utama */ .product-card-v2 { text-align: center; background-color: #291E12; border-radius: 5px; overflow: hidden; display: flex; flex-direction: column; /* Mengatur layout vertikal */ transition: transform 0.3s ease, box-shadow 0.3s ease; align-items: center; } .product-card-v2:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); } @keyframes product-img-animation { 0% { transform: scale(1); /* Ukuran normal */ } 50% { transform: scale(1.05); /* Sedikit membesar */ } 100% { transform: scale(1); /* Kembali ke ukuran normal */ } } .product-image { width: 70%; overflow: hidden; } .product-image img { width: 100%; height: 100%; object-fit: cover; /* Memastikan gambar mengisi area tanpa distorsi */ z-index: 2; animation: product-img-animation 2.5s ease-in-out infinite; position: relative; /* [PASTIKAN INI ADA] Ini mengaktifkan z-index: 2 */ } .product-details { padding: 20px; flex-grow: 1; /* Membuat detail mengisi sisa ruang */ border-top: 1px solid #2e2013; text-align: center; top: 15px; /* [DIUBAH] Disesuaikan agar lebih pas di sudut */ left: 15px; /* [DIUBAH] Disesuaikan agar lebih pas di sudut */ /* [DIHAPUS] display: none; */ z-index: 3; /* [BARU] Pastikan di atas gambar */ /* [DIHAPUS] transform: translateZ(0); */ } .product-title { font-size: 1.5rem; color: var(--text-primary); font-weight: 600; margin: 0 0 10px 0; text-align: center; } .product-price { font-size: 1.3rem; font-weight: 700; color: #ECCA01; display: flex; align-items: center; flex-wrap: wrap; /* Agar badge bisa turun jika tidak muat */ gap: 7px; text-align: center; justify-content: center; /* TAMBAHKAN BARIS INI */ } .product-price span { font-size: 1rem; } .original-price s { font-size: 1rem; color: #C52E2E; font-weight: 600; font-family: 'Montserrat', sans-serif; } .discount-badge { background-color: #DB4845; /* [DIUBAH] Warna merah sesuai permintaan */ color: white; padding: 4px 8px; border-radius: 4px; font-size: 0.8rem; font-weight: 700; position: absolute; top: 24px; left: 24px; z-index: 999; /* [BARU] Pastikan z-index lebih tinggi dari gambar (2) */ } /* Tombol Aksi di Bawah Kartu */ .product-actions { display: flex; gap: 10px; padding: 0 20px 20px 20px; } .btn-info { padding: 12px 24px; background-color: #4B3420; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 1.1rem; /* Ukuran ikon */ flex-shrink: 0; /* Mencegah tombol menyusut */ transition: background-color 0.2s ease; margin-bottom: 24px; } .btn-info:hover{ background-color: #3a2818; } .btn-add-to-cart { flex-grow: 1; /* Tombol ini mengisi sisa ruang */ padding: 12px 72px; background-color: #93421F; color: white; border: none; border-radius: 5px; cursor: pointer; text-align: center; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background-color 0.2s ease; margin-bottom: 24px; } .btn-add-to-cart:hover { background-color: #753419; } /* Style untuk tombol jika produk sudah dimiliki */ .btn-add-to-cart[disabled] { background-color: #04A40F; /* Warna hijau yang sama dengan badge diskon */ cursor: not-allowed; opacity: 0.8; } .btn-add-to-cart[disabled]:hover { background-color: #04A40F; /* Warna tidak berubah saat hover */ } /* ========================================= */ /* STYLING HALAMAN KERANJANG (CART_VIEW) */ /* ========================================= */ /* Wadah Utama Keranjang */ .cart-container { background-color: #20180e; /* Warna background utama */ padding: 40px 40px; border-radius: 5px; margin-top: 40px; font-family: 'Montserrat', sans-serif; } .cart-container h2 { font-size: 2rem; color: rgba(255, 255, 255, 0.9); font-family: 'Rubik One', sans-serif; margin-top: 0; margin-bottom: 8px; display: flex; align-items: center; font-weight: 400; gap: 15px; } .cart-empty { text-align: center; } .cart-empty h2 { justify-content: center; } .cart-no-empty { text-align: left; } .cart-no-empty p, p.cart-no-empty { margin: 0 !important; /* hapus auto-center */ width: auto !important; /* biar ikut layout kiri */ text-align: left; /* pastikan kiri */ } .cart-container p { font-family: 'Montserrat', sans-serif; font-weight: 600; width: 350px; line-height: 30px; margin: 0 auto; } .btn-belanja { margin-bottom: 24px !important; } /* Mengubah tampilan tabel menjadi seperti list kartu */ .cart-table { width: 100%; border-collapse: separate; /* Penting untuk membuat jarak antar baris */ border-spacing: 0 15px; /* Memberi jarak vertikal 15px antar baris */ } .cart-table thead { display: none; /* Sembunyikan header tabel sesuai desain */ } .cart-table td { background-color: #1B160D; /* Background untuk setiap baris item */ padding: 20px; vertical-align: middle; } .cart-table tr td:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; font-weight: 600; color: var(--text-primary); } .cart-table tr td:last-child { border-top-right-radius: 8px; border-bottom-right-radius: 8px; } .cart-price .original-price-cart { color: #C52E2E; font-size: 0.9rem; font-weight: 600; margin-right: 10px; } .cart-price .final-price { color: #ECCA01; /* Warna harga kuning */ font-weight: 700; } .remove-btn { display: inline-block; width: 28px; height: 28px; line-height: 28px; text-align: center; background-color: #CE2B28; color: white; border-radius: 5px; text-decoration: none; font-size: 1.2rem; font-weight: 700; transition: background-color 0.2s, transform 0.2s; } .remove-btn:hover { background-color: #a82f2d; transform: scale(1.1); } /* Layout 2 Kolom (Bawah Tabel) */ .cart-bottom-section { display: grid; grid-template-columns: 2fr 1fr; /* Kolom kiri lebih besar */ gap: 30px; margin-top: 20px; align-items: flex-start; } /* Panel Kiri (Promo & Hadiah) */ .cart-left-panel { display: flex; flex-direction: column; gap: 30px; } .promo-form-container, .gift-panel { background-color: #1B160D; padding: 20px; border-radius: 5px; } .promo-form-container label, .gift-panel .toggle-switch-label { display: block; margin-bottom: 15px; font-weight: 600; color: var(--text-primary); } .promo-form { display: flex; gap: 10px; } .promo-form input[type="text"] { flex-grow: 1; background-color: #241A0F; border: none; color: white; padding: 0 15px; border-radius: 5px; font-family: var(--font-body); } .promo-form::placeholder { font-family: 'Poppins', sans-serif; } /* Panel Kanan (Ringkasan Belanja) */ .cart-summary { background-color: #1B160D; padding: 20px; border-radius: 5px; position: sticky; /* Agar tetap terlihat saat scroll */ top: 20px; } .cart-summary h3 { margin-top: 12px; color: var(--text-primary); } .summary-row { display: flex; justify-content: space-between; margin-bottom: 16px; font-size: 0.95rem; } .summary-row.total { font-weight: 700; font-size: 1.2rem; color: var(--text-primary); padding-top: 24px; } .summary-row.discount { color: #19b80b; } .summary-row.total span:last-child { color: #ECCA01; } .checkout-btn-container { margin-top: 24px; padding-bottom: 12px; } .checkout-btn-container .btn-primary { padding: 15px; font-size: 1.1rem; } /* Tombol Toggle Hadiah */ .toggle-switch-label { display: flex; align-items: center; gap: 10px; cursor: pointer; } .toggle-switch { position: relative; display: inline-block; width: 50px; height: 28px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #4B3420; transition: .4s; border-radius: 28px; } .slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; } input:checked + .slider { background-color: #04A40F; /* Warna hijau saat aktif */ } input:checked + .slider:before { transform: translateX(22px); } /* Form untuk username penerima hadiah */ .gift-recipient-form { display: none; /* Sembunyi secara default */ margin-top: 20px; padding-top: 20px; border-top: 1px solid #2e2013; } .gift-recipient-form .form-group label { font-size: 0.9rem; margin-bottom: 16px; } .gift-recipient-form .form-group input { width: 90%; padding: 12px 15px; background-color: #241A0F; border: none; color: white; border-radius: 5px; font-family: 'Poppins', sans-serif; margin-top: 16px; } /* Menargetkan semua input teks yang relevan di situs Anda */ .form-control-custom:focus, .promo-form input[type="text"]:focus, .gift-recipient-form .form-group input:focus { /* 1. Hilangkan outline biru bawaan browser */ outline: none; /* 2. Ganti dengan efek yang lebih sesuai tema (WAJIB sebagai pengganti) */ } /* ========================================= */ /* KUSTOMISASI POPUP LOADING (SWEETALERT) */ /* ========================================= */ /* Membuat kotak popup-nya sendiri menjadi tidak terlihat */ .swal2-popup.custom-loading-popup { background: transparent !important; box-shadow: none !important; } /* Mengubah warna spinner/loader menjadi coklat (warna aksen Anda) */ .swal2-loader.custom-loading-loader { width: 60px; /* Ukuran loader */ height: 60px; /* Ukuran loader */ border-width: 6px; /* Ketebalan garis loader */ border-color: #D37F3A transparent #D37F3A transparent !important; } /* Mengatur warna teks judul */ .swal2-title.custom-loading-title { color: #FFFFFF !important; font-size: 1.3rem; } /* Mengatur warna teks deskripsi */ .swal2-html-container.custom-loading-text { color: #DDDDDD !important; font-size: 1rem; } /* Wadah utama popup */ .swal2-popup.custom-success-popup { background: #291E12 !important; /* Warna background dari style Anda */ border-radius: 5px !important; } /* Mengatur warna teks judul */ .swal2-title.custom-success-title { color: #FFFFFF !important; } /* Mengatur warna teks deskripsi */ .swal2-html-container.custom-success-text { color: #DDDDDD !important; } /* Kustomisasi Ikon Centang (Bagian Paling Penting) */ .swal2-icon.custom-success-icon { border-color: #D37F3A !important; /* Warna lingkaran luar */ color: #D37F3A !important; /* Warna untuk garis centang */ width: 80px !important; height: 80px !important; margin: 25px auto !important; } /* Mengubah warna garis centang animasi */ .swal2-icon.custom-success-icon .swal2-success-line-tip, .swal2-icon.custom-success-icon .swal2-success-line-long { background-color: #D37F3A !important; } /* Mengubah warna lingkaran animasi */ .swal2-icon.custom-success-icon .swal2-success-ring { border-color: rgba(211, 127, 58, 0.3) !important; } /* ======================================================= */ /* KUSTOMISASI POPUP NOTIFIKASI FLASHDATA (SUCCESS, ERROR, INFO) */ /* ======================================================= */ /* -- Styling Umum untuk Semua Notifikasi -- */ .custom-success-popup, .custom-error-popup, .custom-info-popup { background: #291E12 !important; border-radius: 5px !important; border: 1px solid #4B3420 !important; box-shadow: none !important; /* TIDAK MENGGUNAKAN BOX SHADOW */ } .custom-success-title, .custom-error-title, .custom-info-title { color: #FFFFFF !important; } .custom-success-text, .custom-error-text, .custom-info-text { color: #DDDDDD !important; } /* -- Styling Spesifik untuk Notifikasi SUCCESS -- */ .swal2-icon.custom-success-icon { border-color: #04A40F !important; /* Warna hijau sukses */ color: #04A40F !important; } .custom-success-icon .swal2-success-line-tip, .custom-success-icon .swal2-success-line-long { background-color: #04A40F !important; } .custom-success-icon .swal2-success-ring { border-color: rgba(4, 164, 15, 0.3) !important; } /* -- Styling Spesifik untuk Notifikasi ERROR -- */ .swal2-icon.custom-error-icon { border-color: #D33 !important; /* Warna merah error */ color: #D33 !important; } .custom-error-icon .swal2-x-mark-line-left, .custom-error-icon .swal2-x-mark-line-right { background-color: #D33 !important; } /* -- Styling Spesifik untuk Notifikasi INFO -- */ .swal2-icon.custom-info-icon { border-color: #3AB0E5 !important; /* Warna biru info */ color: #3AB0E5 !important; } /* ========================================= */ /* STYLING POPUP KEUNTUNGAN (PERKS) */ /* ========================================= */ /* Kita bisa menggunakan kembali style .popup-overlay yang sudah ada. Kita hanya perlu men-style bagian konten dalamnya. */ /* Konten utama di dalam popup */ #perksPopup .popup-content { width: 100%; max-width: 600px; /* Lebar yang pas untuk daftar teks */ background-color: #291E12; /* Warna background yang konsisten */ padding: 30px 40px; border-radius: 5px; position: relative; /* Diperlukan untuk tombol close */ max-height: 80vh; /* Batas tinggi agar tidak terlalu panjang di layar kecil */ display: flex; flex-direction: column; } /* Tombol Close (X) */ #perksPopup .close-btn { position: absolute; top: 15px; right: 20px; font-size: 32px; font-weight: 300; color: #aaa; background: none; border: none; cursor: pointer; line-height: 1; padding: 0; transition: color 0.3s, transform 0.3s; } #perksPopup .close-btn:hover { color: var(--accent-orange, #D37F3A); transform: rotate(90deg); } /* Judul Popup (misal: "Titan Rank Perks") */ #perksPopupTitle { color: var(--text-primary); text-align: center; font-size: 2rem; margin-top: 0; margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px solid #4B3420; } /* List Keuntungan (UL) */ #perksPopupList { list-style: none; padding: 0; margin: 0; overflow-y: auto; /* Aktifkan scroll jika kontennya panjang */ flex-grow: 1; /* Agar list mengisi ruang yang tersedia */ } /* Judul Kategori di dalam list (misal: General, Commands, dll) */ .perks-category-title { color: #ECCA01; /* Warna kuning agar menonjol */ font-size: 1.3rem; margin-top: 25px; margin-bottom: 15px; padding-left: 5px; } #perksPopupList li:first-child .perks-category-title { margin-top: 0; /* Hapus margin atas untuk kategori pertama */ } /* Setiap item keuntungan (LI) */ #perksPopupList li { color: #ccc; font-size: 1rem; padding: 10px 0; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #2e2013; } #perksPopupList li:last-child { border-bottom: none; /* Hapus border untuk item terakhir */ } /* Ikon centang di setiap item */ #perksPopupList li .fa-check-circle { color: #04A40F; /* Warna hijau sukses */ font-size: 1.2rem; display: none; } /* ========================================= */ /* STYLING HALAMAN STATUS PEMBAYARAN (REVISI V2) */ /* ========================================= */ .payment-status-wrapper { display: flex; justify-content: center; align-items: center; min-height: 70vh; /* Mengisi tinggi layar */ padding: 40px 20px; } .payment-status-container { width: 100%; max-width: 650px; padding: 50px 40px; text-align: center; /* Efek Kaca Buram (Glassmorphism) */ background: rgba(41, 30, 18, 0.6); /* Warna coklat sangat transparan */ backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); /* Untuk support Safari */ border-radius: 8px; border: 1px solid rgba(211, 127, 58, 0.2); /* Border oranye transparan */ box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; align-items: center; } .payment-status-container .status-icon { font-size: 5rem; line-height: 1; margin-bottom: 25px; animation: pop-in 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; } /* Warna ikon SUKSES */ .payment-status-container.success .status-icon { color: var(--color-green, #22C55E); } /* Warna ikon GAGAL */ .payment-status-container.failed .status-icon { color: var(--color-red, #EF4444); } .payment-status-container h1 { font-size: 2.8rem; color: var(--text-primary); margin: 0 0 15px 0; font-weight: 700; } .payment-status-container p { font-size: 1.1rem; color: #D1D5DB; /* Warna abu-abu terang agar lebih kontras */ max-width: 90%; line-height: 1.7; margin-bottom: 35px; } .payment-status-container .btn { padding: 14px 35px; font-size: 1rem; font-weight: 600; } /* ======================================================= */ /* STYLING SEKSI SUPPORTERS - LAYOUT HORIZONTAL (REVISI V3) */ /* ======================================================= */ .supporters-section-v2 { display: grid; grid-template-columns: 1fr 1.5fr; /* Kolom kiri lebih kecil dari kanan */ gap: 30px; margin-bottom: 80px; align-items: stretch; /* Membuat kedua kolom sama tinggi */ } .top-supporter-card, .recent-supporters-panel { background-color: #20180e; padding: 25px 30px; border-radius: 5px; display: flex; flex-direction: column; } .supporter-v2-title { color: #b87841; font-size: 0.9rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-top: 0; margin-bottom: 20px; } /* --- Kolom Top Supporter --- */ .top-supporter-info { display: flex; align-items: center; gap: 20px; margin-top: auto; /* Mendorong konten ke bawah agar vertikal center */ margin-bottom: auto; } .top-supporter-info img { width: 45px; height: 45px; border-radius: 4px; } .top-supporter-details { line-height: 1.5; } .top-supporter-details strong { font-size: 1.3rem; color: var(--text-primary); font-weight: 700; } .top-supporter-details span { display: block; color: #929292; font-weight: 600;] font-family: 'Montserrat', sans-serif; } /* --- Kolom Recent Supporters --- */ .recent-supporters-avatars { display: flex; flex-wrap: wrap; /* Agar avatar turun baris jika tidak muat */ gap: 12px; flex-grow: 1; align-content: flex-start; /* Konten mulai dari atas */ } .recent-supporter-item img { width: 45px; height: 45px; border-radius: 4px; cursor: pointer; transition: all 0.2s ease; border: 2px solid transparent; } .recent-supporter-item img:hover { transform: scale(1.1); } /* --- Kustomisasi Tema untuk Tooltip Tippy.js --- */ .tippy-box[data-theme~='minehive-dark'] { background-color: #1B160D; color: #b87841; border: 1px solid var(--admin-accent-primary); border-radius: 4px; font-family: var(--font-admin); } .tippy-box[data-theme~='minehive-dark'][data-placement^='top'] > .tippy-arrow::before { border-top-color: var(--admin-accent-primary); } .tippy-box[data-theme~='minehive-dark'][data-placement^='bottom'] > .tippy-arrow::before { border-bottom-color: var(--admin-accent-primary); } .tippy-box[data-theme~='minehive-dark'] .tippy-content { padding: 8px 12px; line-height: 1.5; text-align: center; } /* Responsif untuk mobile */ @media (max-width: 900px) { .supporters-section-v2 { grid-template-columns: 1fr; } } .scrollbar-transparent { /* Untuk browser Firefox */ scrollbar-width: none; /* Untuk browser Internet Explorer, Edge (versi lama) */ -ms-overflow-style: none; } /* Untuk browser berbasis WebKit (Chrome, Safari, Edge baru, Opera) */ .scrollbar-transparent::-webkit-scrollbar { width: 0; height: 0; } /* ======================================================= */ /* === KODE RESPONSIF UNTUK TAMPILAN MOBILE (768px kebawah) === */ /* ======================================================= */ @media (max-width: 768px) { /* --- Penyesuaian Global & Header --- */ .container { padding: 0 32px; /* Kurangi padding samping container utama */ } .main-logo { max-height: 180px; /* Perkecil logo utama di header */ } .navbar { padding: 20px 0; /* Kurangi padding navbar */ } /* --- Halaman Utama (Kartu Kategori & Supporters) --- */ .main-cards-container, .supporters-section-v2, .info-footer-container { grid-template-columns: 1fr; /* Paksa semua layout grid utama menjadi 1 kolom */ margin-top: 40px; margin-bottom: 40px; gap: 20px; /* Kurangi jarak antar elemen grid */ } .main-card { height: auto; min-height: 180px; padding: 25px 30px; /* Kurangi padding di dalam kartu */ } .card-soon { display: none; } .main-card-content h2 { font-size: 2.2rem; /* Perkecil ukuran font judul kartu */ } /* --- Semua Jenis Popup (Login, Realm, Perks) --- */ .login-popup-container, .realm-popup-container-v2, #perksPopup .popup-content { width: 90%; /* Buat popup mengisi 90% layar, bukan lebar tetap */ max-width: 500px; /* Beri batas max agar tidak terlalu lebar di tablet */ padding: 25px; /* Kurangi padding di dalam popup */ box-sizing: border-box; } .login-popup-header .popup-title, .realm-popup-header-v2 .popup-title, #perksPopupTitle { font-size: 1.8rem; /* Perkecil judul di dalam popup */ } .platform-buttons-container, .realm-grid-v2 { grid-template-columns: 1fr; /* Buat semua grid di dalam popup menjadi 1 kolom */ gap: 16px; } .realm-card-title-subtitle-card { display: grid; } .realm-card-title-subtitle-card h3 { font-size: 1.5rem; margin-bottom: -10px; margin-left: -25px; font-weight: 700; z-index: 999; } .realm-card-title-subtitle-card p { margin-bottom: 0px; margin-left: -25px; color: #B9B9B9; font-size: 14px; font-weight: 600; font-family: 'Montserrat', sans-serif; z-index: 999; } .realm-card-v2 { height: 200px; /* Kurangi tinggi kartu realm */ } .form-control-custom { width: 100%; /* Buat input mengisi lebar popup */ box-sizing: border-box; } /* --- Halaman Produk (products_view) --- */ .page-header { flex-direction: column; /* Tumpuk elemen header secara vertikal */ gap: 15px; margin-bottom: 20px; } .page-header h1 { font-size: 1.8rem; /* Perkecil judul halaman produk */ order: 2; /* Posisikan judul di antara tombol Back dan More Info */ } .page-header .btn:first-child { order: 1; } .page-header .btn:last-child { order: 3; } /* Ini adalah aturan desktop Anda yang sudah benar */ .product-actions { display: flex; gap: 10px; padding-bottom: 8px; } .btn-info { flex-shrink: 0; /* Mencegah tombol ini menyusut */ } .btn-add-to-cart { flex-grow: 1; /* Membuat tombol ini mengisi sisa ruang */ font-size: 14px; padding: 16px 56px; /* <-- PERBAIKAN: Mengurangi padding horizontal */ white-space: nowrap; /* <-- TAMBAHAN: Memaksa teks jadi 1 baris */ } /* --- Halaman Keranjang (cart_view) --- */ .cart-container { padding: 20px 10px; /* Kurangi padding di halaman keranjang */ } .cart-container h2 { margin-bottom: 16px; } .cart-no-empty { text-align: center; justify-content: center; } .cart-no-empty p, p.cart-no-empty { margin: 0 !important; /* hapus auto-center */ width: auto !important; /* biar ikut layout kiri */ text-align: left; /* pastikan kiri */ display: none !important; } .cart-container p { width: 300px; margin: 0 auto; padding-bottom: 16px; } .cart-table { border-spacing: 0 10px; /* Kurangi jarak antar item */ } /* Transformasi tabel keranjang menjadi list di mobile */ .cart-table td { display: block; /* Ubah sel tabel menjadi blok agar bisa ditumpuk */ width: 100%; text-align: center !important; /* Ratakan semua ke tengah */ box-sizing: border-box; padding: 10px 15px; } .cart-table tr { display: block; margin-bottom: 15px; border-radius: 8px; /* Terapkan radius ke baris */ background-color: var(--bg-main); } .cart-table td:first-child { padding-top: 20px; font-size: 1.1rem; border-radius: 8px 8px 0 0; /* Radius hanya di sudut atas */ } .cart-table td:last-child { padding-bottom: 20px; border-radius: 0 0 8px 8px; /* Radius hanya di sudut bawah */ } .cart-bottom-section { grid-template-columns: 1fr; /* Buat layout bawah menjadi 1 kolom */ gap: 20px; } .login-popup-header .popup-title { font-size: 24px; } /* --- Footer --- */ .footer-section { padding: 30px 48px; /* Kurangi padding */ margin-top: 40px; } .info-footer-container { gap: 40px; /* Kurangi jarak vertikal antar 2 blok info */ padding: 20px 0; text-align: center; /* Pusatkan teks agar rapi */ } .info-footer-container h3 { font-size: 1.2rem; } /* Konten utama di dalam popup */ #perksPopup .popup-content { max-height: 65vh; } } /* Breakpoint tambahan untuk ponsel yang sangat sempit */ @media (max-width: 768px) { .main-card-content h2 { font-size: 1.8rem; /* Perkecil lagi judul kartu utama */ } .page-header h1 { font-size: 1.5rem; /* Perkecil lagi judul halaman produk */ } .product-title { font-size: 1.2rem; } .payment-status-container h1 { font-size: 2rem; } .payment-status-container p { font-size: 1rem; } .recent-supporter-item img { width: 30px; height: 30px; } .page-header a:last-child { display: none; } /* --- Penyesuaian Navbar Profile (Mobile) --- */ .navbar-container { gap: 15px; /* Kurangi jarak antar elemen di navbar */ } .navbar-profile { gap: 10px; /* Kurangi jarak antara avatar dan teks */ } .navbar-profile img { width: 40px; /* Perkecil ukuran avatar */ height: 40px; } .navbar-profile span { font-size: 10px; /* Tambahan: Pastikan span ini bisa menampung elemen block di dalamnya */ line-height: 1.5; } .navbar-profile span strong { font-size: 0.8rem; /* Perkecil sedikit font username */ font-weight: 600; } /* --- PERBAIKAN UNTUK BADGE AFILIASI DI MOBILE --- */ /* Target badge HANYA yang ada di navbar profile */ .navbar-profile .aff-badge { display: block; /* 1. Jadikan block agar turun ke baris baru */ margin-left: 0; /* 2. Hapus margin kiri (dari aturan global) */ margin-top: 4px; /* 3. Beri sedikit jarak atas dari username */ position: static; /* 4. Reset position (dari aturan global) */ width: fit-content; /* 5. Sesuaikan lebar */ } /* --- AKHIR PERBAIKAN --- */ /* Penyesuaian untuk tombol di sebelah kanan */ .nav-links { gap: 8px; /* Kurangi jarak antar tombol */ } .nav-links .btn { padding: 10px 14px; /* Kurangi padding tombol agar lebih ringkas */ font-size: 0.85rem; /* Perkecil font di dalam tombol */ font-weight: 600; } /* Trik untuk menyembunyikan teks "View" di tombol cart */ .nav-links .btn-view-cart .view-text { display: none; /* Sembunyikan hanya tulisan "View" */ } .main-card-bg-image-bucks { position: absolute; right: -60px; bottom: -80px; height: 150%; width: 250px; height: auto; z-index: 1; pointer-events: none; transition: all 0.3s ease; } /* ======================================================= */ /* === Penyesuaian Popup Login (Mobile) === */ /* ======================================================= */ .login-popup-container { padding: 32px 32px; /* Kurangi padding samping agar tidak sempit */ } .login-popup-header { padding: 10px 0 25px 0; /* Kurangi padding atas dan bawah header */ } .login-popup-header .popup-subtitle { margin-bottom: 20px; /* Kurangi jarak setelah subjudul */ } /* Ubah layout tombol menjadi 1 kolom (vertikal) */ .platform-buttons-container { grid-template-columns: 1fr; gap: 16px; /* Jarak antar tombol */ } /* Ini adalah perbaikan utama untuk jarak */ .platform-btn { margin-bottom: 0; /* Hapus margin bawah yang besar dari tampilan desktop */ padding: 18px 15px; /* Sedikit sesuaikan padding tombol */ } /* Beri jarak antara grup tombol dengan form input di bawahnya */ .form-control-custom { margin-top: 25px; } /* ======================================================= */ /* === Penyesuaian Popup Notifikasi (SweetAlert) === */ /* ======================================================= */ .swal2-popup.custom-success-popup, .swal2-popup.custom-error-popup, .swal2-popup.custom-info-popup { /* Lebar popup adalah 100% layar dikurangi 32px (16px kiri, 16px kanan) */ width: calc(100% - 32px) !important; padding-left: 15px !important; /* Sedikit kurangi padding internal */ padding-right: 15px !important; /* agar pas dengan lebar baru */ } /* Perkecil juga font di dalam popup agar lebih proporsional */ .custom-success-title, .custom-error-title, .custom-info-title { font-size: 1.3rem !important; } .custom-success-text, .custom-error-text, .custom-info-text { font-size: 0.95rem !important; } /* ======================================================= */ /* === Penyesuaian Popup Pilih Realm (Mobile) === */ /* ======================================================= */ /* Kontainer utama popup */ .realm-popup-container-v2 { width: 90%; max-width: 500px; padding: 24px; box-sizing: border-box; } /* Grid yang menampung kartu-kartu realm */ .realm-grid-v2 { grid-template-columns: 1fr; /* Paksa menjadi 1 kolom */ gap: 15px; /* Jarak antar kartu */ } /* Kartu untuk setiap pilihan realm (wadah utama) */ .realm-card-v2 { height: auto; /* Tinggi menyesuaikan konten di dalamnya */ display: flex; /* Aktifkan Flexbox untuk menata ikon dan teks */ flex-direction: row; /* Susun item secara horizontal (kiri-kanan) */ align-items: center; /* Sejajarkan ikon dan teks secara vertikal di tengah */ padding: 15px; gap: 20px; /* Jarak antara ikon dan teks */ background-color: #4B3420; /* Warna latar kartu */ border: 1px solid transparent; } .realm-card-v2:hover { border-color: var(--accent-orange); /* Beri border saat di-hover */ transform: none; /* Matikan efek naik-turun di mobile */ } /* Kotak untuk Ikon Realm */ .realm-card-bg-v2 { position: relative; /* Bukan absolute, agar tetap di dalam alur flexbox */ width: 120px; height: 120px; background-size: 65%; /* Ukuran ikon di dalam kotaknya */ background-position: center; border-radius: 5px; flex-shrink: 0; /* Mencegah ikon menjadi lebih kecil jika teksnya panjang */ transform: none; /* Hapus semua transform dari versi desktop */ } /* Teks Judul Realm */ .realm-card-title-v2 { position: static; /* Bukan absolute, agar di samping ikon */ transform: none; text-align: left; /* Teks rata kiri */ font-size: 1.2rem; font-weight: 600; width: auto; flex-grow: 1; /* Biarkan teks mengisi sisa ruang yang tersedia */ margin: 0; /* Hapus margin agar rapi */ } /* Sembunyikan overlay gelap yang tidak diperlukan lagi di tampilan ini */ .realm-card-overlay-v2 { display: none; } .btn-view-cart .view-text { display: none; } /* =================================================================== */ /* === PENATAAN ULANG TOTAL HALAMAN KERANJANG (FIX OVERFLOW) === */ /* =================================================================== */ /* 1. WADAH UTAMA & JUDUL */ .cart-container { padding: 20px 0; background: transparent; width: 100%; } .cart-container h2 { font-size: 1.8rem; padding: 0 15px 20px 15px; /* Beri padding di sini */ } /* ======================================================== */ /* === Penataan Final Item Keranjang (Menggunakan CSS Grid) === */ /* ======================================================== */ .cart-table { border-spacing: 0; margin: 0 15px; /* Beri margin pada pembungkus tabel */ } .cart-table thead { display: none; } /* Jadikan baris sebagai GRID CONTAINER */ .cart-table tr { display: grid; grid-template-columns: 1fr auto auto; /* Nama (fleksibel) | Harga (auto) | Tombol (auto) */ gap: 15px; /* Jarak antar kolom */ align-items: center; /* Sejajarkan semua item di tengah secara vertikal */ padding: 15px; margin-bottom: 12px; background-color: #20180e; border-radius: 8px; } /* Atur ulang semua sel (TD) */ .cart-table td { padding: 0; border: none; background: none; text-align: left !important; /* Override inline style jika perlu */ } /* Kolom NAMA: Atur agar tidak overlap jika teks terlalu panjang */ .cart-table td:first-child { font-size: 1rem; font-weight: 600; color: var(--text-primary); /* Mencegah teks tumpang tindih jika nama produk sangat panjang */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Kolom HARGA */ .cart-price .final-price { white-space: nowrap; /* Pastikan harga tidak turun baris */ font-size: 0.95rem; } .cart-table .remove-btn { vertical-align: initial; } /* Kolom TOMBOL HAPUS */ .cart-table td:last-child { display: flex; align-items: center; /* Sejajarkan vertikal di TENGAH */ justify-content: center; /* Sejajarkan horizontal di TENGAH */ padding-left: 40px; } /* 3. BAGIAN BAWAH (PROMO, GIFT, SUMMARY) */ .cart-bottom-section { grid-template-columns: 1fr; gap: 15px; /* Kurangi gap sedikit */ padding: 20px 15px 0 15px; /* Beri padding pada pembungkusnya */ } /* Form input tidak boleh menyebabkan overflow */ .promo-form input[type="text"], .gift-recipient-form .form-group input { min-width: 0; /* Izinkan input menyusut */ width: 100%; box-sizing: border-box; } /* Tombol Bayar Sekarang */ .checkout-btn-container .btn { width: 100%; box-sizing: border-box; } .cart-container p { padding-left: 20px; } } .info-box { padding: 12px 0 12px 24px; } .info-box p { width: 100% !important; text-align: left !important; } /* Breakpoint tambahan untuk ponsel yang sangat sempit */ @media (max-width: 768px) { .main-card-content h2 { font-size: 1.8rem; /* Perkecil lagi judul kartu utama */ } .main-card-content p { margin-top: 10px; font-size: 0.9rem; /* Perkecil lagi judul kartu utama */ } .page-header h1 { font-size: 1.5rem; /* Perkecil lagi judul halaman produk */ } .product-title { font-size: 1.2rem; } .payment-status-container h1 { font-size: 2rem; } .payment-status-container p { font-size: 1rem; } .recent-supporter-item img { width: 30px; height: 30px; } .page-header a:last-child { display: none; } /* --- Penyesuaian Navbar Profile (Mobile) --- */ .navbar-container { gap: 15px; /* Kurangi jarak antar elemen di navbar */ } .navbar-profile { gap: 10px; /* Kurangi jarak antara avatar dan teks */ } .navbar-profile img { width: 40px; /* Perkecil ukuran avatar */ height: 40px; } .navbar-profile span { font-size: 10px; } .navbar-profile span strong { font-size: 0.8rem; /* Perkecil sedikit font username */ font-weight: 600; } /* Penyesuaian untuk tombol di sebelah kanan */ .nav-links { gap: 8px; /* Kurangi jarak antar tombol */ } .nav-links .btn { padding: 10px 14px; /* Kurangi padding tombol agar lebih ringkas */ font-size: 0.85rem; /* Perkecil font di dalam tombol */ font-weight: 600; } /* Trik untuk menyembunyikan teks "View" di tombol cart */ .nav-links .btn-view-cart .view-text { display: none; /* Sembunyikan hanya tulisan "View" */ } .main-card-bg-image-bucks { position: absolute; right: -60px; bottom: -80px; height: 150%; width: 250px; height: auto; z-index: 1; pointer-events: none; transition: all 0.3s ease; } /* ======================================================= */ /* === Penyesuaian Popup Login (Mobile) === */ /* ======================================================= */ .login-popup-container { padding: 32px 32px; /* Kurangi padding samping agar tidak sempit */ } .login-popup-header { padding: 10px 0 25px 0; /* Kurangi padding atas dan bawah header */ } .login-popup-header .popup-subtitle { margin-bottom: 20px; /* Kurangi jarak setelah subjudul */ } /* Ubah layout tombol menjadi 1 kolom (vertikal) */ .platform-buttons-container { grid-template-columns: 1fr; gap: 16px; /* Jarak antar tombol */ } /* Ini adalah perbaikan utama untuk jarak */ .platform-btn { margin-bottom: 0; /* Hapus margin bawah yang besar dari tampilan desktop */ padding: 18px 15px; /* Sedikit sesuaikan padding tombol */ } /* Beri jarak antara grup tombol dengan form input di bawahnya */ .form-control-custom { margin-top: 25px; } /* ======================================================= */ /* === Penyesuaian Popup Notifikasi (SweetAlert) === */ /* ======================================================= */ .swal2-popup.custom-success-popup, .swal2-popup.custom-error-popup, .swal2-popup.custom-info-popup { /* Lebar popup adalah 100% layar dikurangi 32px (16px kiri, 16px kanan) */ width: calc(100% - 32px) !important; padding-left: 15px !important; /* Sedikit kurangi padding internal */ padding-right: 15px !important; /* agar pas dengan lebar baru */ } /* Perkecil juga font di dalam popup agar lebih proporsional */ .custom-success-title, .custom-error-title, .custom-info-title { font-size: 1.3rem !important; } .custom-success-text, .custom-error-text, .custom-info-text { font-size: 0.95rem !important; } /* ======================================================= */ /* === Penyesuaian Popup Pilih Realm (Mobile) === */ /* ======================================================= */ /* Kontainer utama popup */ .realm-popup-container-v2 { width: 90%; max-width: 500px; padding: 24px; box-sizing: border-box; } /* Grid yang menampung kartu-kartu realm */ .realm-grid-v2 { grid-template-columns: 1fr; /* Paksa menjadi 1 kolom */ gap: 15px; /* Jarak antar kartu */ } /* Kartu untuk setiap pilihan realm (wadah utama) */ .realm-card-v2 { height: auto; /* Tinggi menyesuaikan konten di dalamnya */ display: flex; /* Aktifkan Flexbox untuk menata ikon dan teks */ flex-direction: row; /* Susun item secara horizontal (kiri-kanan) */ align-items: center; /* Sejajarkan ikon dan teks secara vertikal di tengah */ padding: 15px; gap: 20px; /* Jarak antara ikon dan teks */ background-color: #4B3420; /* Warna latar kartu */ border: 1px solid transparent; } .realm-card-v2:hover { border-color: var(--accent-orange); /* Beri border saat di-hover */ transform: none; /* Matikan efek naik-turun di mobile */ } /* Kotak untuk Ikon Realm */ .realm-card-bg-v2 { position: relative; /* Bukan absolute, agar tetap di dalam alur flexbox */ width: 120px; height: 120px; background-size: 65%; /* Ukuran ikon di dalam kotaknya */ background-position: center; border-radius: 5px; flex-shrink: 0; /* Mencegah ikon menjadi lebih kecil jika teksnya panjang */ transform: none; /* Hapus semua transform dari versi desktop */ } /* Teks Judul Realm */ .realm-card-title-v2 { position: static; /* Bukan absolute, agar di samping ikon */ transform: none; text-align: left; /* Teks rata kiri */ font-size: 1.2rem; font-weight: 600; width: auto; flex-grow: 1; /* Biarkan teks mengisi sisa ruang yang tersedia */ margin: 0; /* Hapus margin agar rapi */ } /* Sembunyikan overlay gelap yang tidak diperlukan lagi di tampilan ini */ .realm-card-overlay-v2 { display: none; } .btn-view-cart .view-text { display: none; } /* =================================================================== */ /* === PENATAAN ULANG TOTAL HALAMAN KERANJANG (FIX OVERFLOW) === */ /* =================================================================== */ /* 1. WADAH UTAMA & JUDUL */ .cart-container { padding: 20px 0; background: transparent; width: 100%; } .cart-container h2 { font-size: 1.8rem; padding: 0 0 20px 0; /* <-- DIUBAH DI SINI */ } /* ======================================================== */ /* === Penataan Final Item Keranjang (Menggunakan CSS Grid) === */ /* ======================================================== */ .cart-table { border-spacing: 0; margin: 0; /* <-- DIUBAH DI SINI */ } .cart-table thead { display: none; } /* Jadikan baris sebagai GRID CONTAINER */ .cart-table tr { display: grid; /* Kita tetap pakai 2 kolom: Kolom 1 untuk Nama & Harga (fleksibel) Kolom 2 untuk Tombol (otomatis) */ grid-template-columns: 1fr auto; gap: 0 15px; /* 0px jarak baris, 15px jarak kolom */ align-items: center; /* Sejajarkan item di tengah secara vertikal */ /* Style lama biarkan */ padding: 15px; padding-bottom: 8px; margin-bottom: 8px; background-color: #20180e; border-radius: 8px; } /* Atur ulang semua sel (TD) */ .cart-table td { padding: 0; border: none; background: none; text-align: left !important; /* Override inline style jika perlu */ } /* 2. Aturan untuk NAMA PRODUK (td ke-1) */ .cart-table td:first-child { padding-left: 12px; grid-column: 1 / 2; grid-row: 1; text-align: center; /* <-- TAMBAHKAN INI */ font-size: 1rem; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transform: translateY(-8px); } /* 3. Aturan untuk HARGA (td ke-2) */ .cart-table td:nth-child(2) { padding-left: 12px; grid-column: 1 / 2; /* Tempatkan di Kolom 1 (di bawah nama) */ grid-row: 2 / 3; /* Tempatkan di Baris 2 */ /* Beri jarak sedikit dari nama produk di atasnya */ padding-top: 0; /* Paksa rata kiri, override inline style dari PHP */ text-align: left !important; transform: translateY(-8px); } .cart-table td:last-child { grid-column: 2 / 3; /* Tempatkan di Kolom 2 */ /* UBAH BARIS INI: Buat dia merentang dari baris 1 sampai akhir baris 2 (ditulis sbg '3') */ grid-row: 2 / 3; /* Sejajarkan tombol di tengah areanya (sekarang area-nya 2 baris) */ align-self: center; display: flex; align-items: center; justify-content: center; padding-left: 0; padding-right: 4px; transform: translateY(-14px); } /* Kolom HARGA */ .cart-price .final-price { white-space: nowrap; /* Pastikan harga tidak turun baris */ font-size: 0.95rem; } .cart-table .remove-btn { vertical-align: initial; } /* 3. BAGIAN BAWAH (PROMO, GIFT, SUMMARY) */ .cart-bottom-section { grid-template-columns: 1fr; gap: 15px; /* Kurangi gap sedikit */ padding: 20px 0 0 0; /* <-- DIUBAH DI SINI */ } /* ... (sisa .promo-form-container, .promo-form, .checkout-btn-container tetap sama) ... */ /* 4. PANEL KIRI & KANAN */ .promo-form-container, .gift-panel, .info-box, .cart-summary { background-color: #20180e; padding: 20px; width: 100%; /* Pastikan semua panel ini 100% dari parentnya */ box-sizing: border-box; /* WAJIB */ } .info-box { padding: 20px 0 12px 24px !important; } .info-box p { width: 100% !important; text-align: left !important; } /* Form input tidak boleh menyebabkan overflow */ .promo-form input[type="text"], .gift-recipient-form .form-group input { min-width: 0; /* Izinkan input menyusut */ width: 100%; box-sizing: border-box; } /* Tombol Bayar Sekarang */ .checkout-btn-container .btn { width: 100%; box-sizing: border-box; } .cart-container p { padding-left: 0; /* <-- DIUBAH DI SINI */ text-align: center; /* (Opsional) Pusatkan teks "Keranjang kosong" */ } } /* ======================================================= */ /* === STYLING HALAMAN PERATURAN (REVISI MINIMALIS) === */ /* ======================================================= */ .rules-wrapper { max-width: 900px; margin: 40px auto; padding: 20px; } .rules-header { text-align: center; padding: 20px 24px; margin-bottom: 30px; } .rules-header h1 { color: var(--text-primary); font-size: 2.2rem; margin: 0 0 10px 0; font-weight: 700; } .rules-header p { font-size: 1.1rem; color: var(--text-secondary); max-width: 700px; margin: 0 auto; line-height: 1.6; } /* Navigasi Tab */ .tab-nav { display: flex; gap: 10px; margin-bottom: 30px; border-bottom: 2px solid #664529; } .tab-nav-link { flex-grow: 1; padding: 14px 20px; background-color: transparent; border: none; border-bottom: 3px solid transparent; /* Border bawah transparan */ color: var(--text-secondary); font-size: 1.1rem; font-weight: 600; font-family: 'Poppins', sans-serif; cursor: pointer; transition: all 0.3s ease; text-align: center; } .tab-nav-link:hover { color: var(--text-primary); } .tab-nav-link.active { color: var(--accent-orange); border-bottom-color: var(--accent-orange); } /* Konten Tab */ .tab-pane { display: none; /* Sembunyikan semua panel secara default */ animation: fadeIn 0.5s ease; } .tab-pane.active { display: block; /* Tampilkan hanya panel yang aktif */ } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Menggunakan style .content-card yang sudah ada */ .tab-pane .content-card { background-color: #3a2818; padding: 30px 40px; border-radius: 5px; } /* Menggunakan style h3 yang sudah ada */ .tab-pane .content-card h3 { font-size: 1.3rem; color: var(--text-primary); margin-top: 0; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #664529; } /* Beri jarak untuk h3 yang bukan pertama */ .tab-pane .content-card h3:not(:first-of-type) { margin-top: 35px; } /* Styling untuk list peraturan */ .rule-list { padding-left: 20px; margin: 0; color: #EDE7E7; font-size: 1rem; line-height: 1.8; } .rule-list li { margin-bottom: 12px; padding-left: 8px; } .rule-list li::marker { color: var(--accent-orange); font-weight: 700; } .rule-list li a { color: var(--accent-orange); } /* Tampilan Mobile */ @media (max-width: 768px) { .rules-wrapper { padding: 15px; margin: 20px auto; } .rules-header h1 { font-size: 1.8rem; } .rules-header p { font-size: 1rem; } .tab-nav-link { font-size: 1rem; padding: 12px 10px; } .tab-pane .content-card { padding: 25px 20px; } } /* ========================================= */ /* STYLING CROSS-SELL DI HALAMAN KERANJANG */ /* ========================================= */ .cross-sell-section { margin-top: 50px; padding-top: 30px; border-top: 1px solid #2e2013; } .cross-sell-title { text-align: left; font-size: 1.8rem; color: var(--text-primary); margin-bottom: 5px; font-family: 'Rubik One', sans-serif; font-weight: 400; } .cross-sell-subtitle { text-align: left; color: var(--text-secondary); margin-bottom: 30px; font-family: 'Montserrat', sans-serif; font-weight: 600; } .cross-sell-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; } .cross-sell-card { background-color: var(--bg-secondary); border-radius: 8px; padding: 15px; display: flex; align-items: center; gap: 15px; border: 1px solid var(--border-color); transition: transform 0.2s ease, box-shadow 0.2s ease; } .cross-sell-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.2); } .cross-sell-card .product-image img { width: 64px; height: 64px; border-radius: 5px; object-fit: cover; } .cross-sell-card .product-details { flex-grow: 1; } .cross-sell-card .product-details h4 { margin: 0 0 5px 0; font-size: 1rem; color: var(--text-primary); } .cross-sell-card .product-details .price { margin: 0; font-size: 0.9rem; color: var(--accent-orange); font-weight: 600; } .cross-sell-card .btn-sm { padding: 8px 12px; font-size: 0.8rem; } /* ======================================================= */ /* === STYLING FLASH SALE (V5 - GAYA 'MOST POPULAR') === */ /* ======================================================= */ .flash-sale-section { background-color: #20180e; border-radius: 8px; padding: 25px 30px; padding-bottom: 65px !important; margin: 48px 0; } .flash-sale-main-title { font-size: 1.5rem; font-weight: 700; color: #b87841; text-align: left; margin-top: 0; margin-bottom: 20px; letter-spacing: 1px; text-transform: uppercase; } .fs-grid-v2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; } /* Kartu utama sekarang menjadi link, tidak perlu di-style */ .fs-card-v2-link { text-decoration: none; } /* Ini adalah style untuk konten di dalam link */ .fs-card-v2 { background-color: rgba(219, 72, 69, 0.1); border: 1px solid #c53a3a; border-radius: 6px; padding: 12px; display: flex; /* Menggunakan flexbox untuk layout kiri-kanan */ align-items: center; /* Menjaga gambar dan teks di tengah secara vertikal */ gap: 20px; height: 100%; transition: all 0.2s ease-in-out; } .fs-card-v2-link:hover .fs-card-v2 { transform: translateY(-5px); background-color: rgba(219, 72, 69, 0.2); } .fs-card-image-v2 { position: relative; /* Diperlukan untuk badge diskon */ flex-shrink: 0; /* Mencegah gambar menyusut */ } .fs-card-image-v2 img { width: 80px; /* Ukuran gambar ikon */ height: 80px; object-fit: contain; } .fs-discount-badge { position: absolute; top: -10px; right: -10px; background: linear-gradient(45deg, #e73453, #db4845); color: white; padding: 4px 8px; font-size: 0.8rem; font-weight: 700; border-radius: 4px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); } .flash-sale-countdown { font-weight: 600 !important; font-family: 'Montserrat', sans-serif !important; } .fs-card-body-v2 { text-align: left; flex-grow: 1; display: grid; /* Gunakan Grid untuk layout yang lebih baik */ grid-template-areas: "title" "price" "timer"; gap: 5px; /* Jarak antar elemen */ } .fs-title-v2 { grid-area: title; font-size: 1.1rem; color: var(--text-primary); font-weight: 600; margin: 0; } .fs-price-v2 { grid-area: price; font-size: 1rem; color: #ECCA01; font-weight: 600; margin: 0; } .fs-timer { display: inline-flex; /* Membuat lebar sesuai konten */ align-items: start; gap: 6px; font-size: 0.85rem; /* Ukuran font sedikit lebih besar */ font-weight: 600 !important; font-family: 'Montserrat', sans-serif !important; color: var(--text-secondary); background-color: transparent; /* Hapus background */ padding: 0; /* Hapus padding */ border: none; /* Hapus border */ margin-top: 8px; /* Sedikit jarak dari harga */ margin-left: -5px; } .fs-timer i { color: var(--text-secondary); /* Warna ikon abu-abu agar tidak terlalu menonjol */ font-size: 1em; } .fs-timer strong { color: #DC4546; /* Warna angka timer dibuat kuning agar serasi dengan harga */ font-family: 'Fira Code', monospace; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.5px; } /* Penyesuaian untuk Mobile */ @media (max-width: 768px) { .fs-grid-v2 { grid-template-columns: 1fr; /* Paksa 1 kolom di mobile */ row-gap: 0; /* Nonaktifkan gap baris dari grid */ column-gap: 0; /* Nonaktifkan juga gap kolom */ } /* Tambahkan aturan ini untuk memberi jarak antar link kartu */ .fs-card-v2-link { margin-bottom: 60px; /* Beri jarak bawah 20px antar kartu */ } /* Hapus margin-bottom pada elemen terakhir agar rapi */ .fs-card-v2-link:last-child { margin-bottom: 0; } .fs-card-v2 { /* Aturan ini kosong di kode Anda, bisa dihapus jika tidak ada isinya */ } } /* Jika Anda ingin agar 1 atau 2 produk tetap di kiri saat layar besar */ @media (min-width: 1200px) { .fs-grid-v2 { justify-content: flex-start; } } /* =========================== */ /* === RESPONSIVE: TABLET === */ /* =========================== */ @media (min-width: 769px) and (max-width: 1100px) { .fs-grid-v2 { grid-template-columns: repeat(2, 1fr); /* tampil 2 kolom di tablet */ gap: 25px; } /* Tambahkan aturan ini untuk memberi jarak antar link kartu */ .fs-card-v2-link { margin-bottom: 35px; /* Beri jarak bawah 20px antar kartu */ } /* Hapus margin-bottom pada elemen terakhir agar rapi */ .fs-card-v2-link:last-child { margin-bottom: 0; } .fs-card-v2 { padding: 18px; gap: 15px; } .fs-card-image-v2 img { width: 70px; height: 70px; } .fs-title-v2 { font-size: 1rem; } .fs-price-v2 { font-size: 0.95rem; } .fs-timer { font-size: 0.8rem; } /* --- Footer --- */ .footer-section { padding: 30px 48px; /* Kurangi padding */ margin-top: 40px; } .info-footer-container { gap: 40px; /* Kurangi jarak vertikal antar 2 blok info */ padding: 20px 0; text-align: center; /* Pusatkan teks agar rapi */ } .info-footer-container h3 { font-size: 1.2rem; } } /* Styling untuk Live Avatar di Popup Login */ /* GANTI KODE LAMA ANDA DENGAN INI */ .username-input-container { display: flex; align-items: center; /* Kunci utama: Menyejajarkan item secara vertikal */ gap: 15px; } #login-avatar-preview { width: 52px; height: 52px; border-radius: 5px; background-color: #1B160D; flex-shrink: 0; transition: all 0.3s ease; } #username-input-field { flex-grow: 1; /* PERBAIKAN: Samakan tinggi input dengan tinggi avatar */ height: 52px; /* Hapus padding vertikal agar teks bisa ditengahkan dengan line-height */ padding: 0 20px; /* Sesuaikan dengan style .form-control-custom Anda */ background-color: #241A0F; border: none; border-radius: 5px; color: #ffffff; font-size: 1rem; font-family: 'Poppins', sans-serif; } @media (max-width: 768px) { #login-avatar-preview { margin-bottom: -20px; } } /* Pastikan placeholder juga rapi */ #username-input-field::placeholder { color: #888; } /* ======================================================= */ /* === STYLING BADGE AFILIASI (TAMBAHAN BARU) === */ /* ======================================================= */ .aff-badge { display: inline-block; padding: 2px 8px; font-size: 0.45rem; font-weight: 700; line-height: 1.5; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .25rem; margin-left: 8px; text-transform: uppercase; position: relative; top: -1px; /* Sedikit penyesuaian posisi vertikal */ } .aff-badge.badge-bronze { color: #fff; background-color: #cd7f32; /* Warna Perunggu */ } .aff-badge.badge-gold { color: #212529; /* Warna teks gelap agar kontras */ background-color: #ffd700; /* Warna Emas */ } .aff-badge.badge-platinum { color: #212529; /* Warna teks gelap */ background-color: #e5e4e2; /* Warna Platinum */ border: 1px solid #c0c0c0; /* Border silver */ } .cart-upsell-notice { /* GANTI WARNA LATAR DAN BORDER */ background-color: rgba(4, 164, 15, 0.1); /* Latar hijau transparan */ border: 1px solid #04A40F; /* Border hijau */ border-left: 1px solid #04A40F; /* Tambah aksen border kiri tebal */ border-radius: 5px; padding: 15px 20px; /* HAPUS MARGIN ATAS & BAWAH (agar rapi di layout baru) */ margin-bottom: 0; margin-top: 0; display: flex; align-items: center; gap: 15px; color: #EAEAEA; /* Warna teks utama */ font-weight: 500; line-height: 30px; } .cart-upsell-notice i { color: #04A40F; /* GANTI WARNA IKON jadi hijau */ font-size: 1.2rem; } .cart-upsell-notice strong { color: #FFFFFF; /* Warna angka (Rp) */ font-weight: 700; } /* ========================================= */ /* STYLING SOCIAL PROOF POPUP */ /* ========================================= */ .social-proof-popup { position: fixed; bottom: 20px; left: 20px; /* Glassmorphism (pakai warna dari generator) */ background: rgba(48, 31, 16, 0.64); border-radius: 7px; backdrop-filter: blur(7.2px); -webkit-backdrop-filter: blur(7.2px); border: 1px solid rgba(82, 43, 17, 0.36); padding: 15px 20px; z-index: 1040; display: flex; align-items: center; gap: 15px; opacity: 0; transform: translateX(-100%); visibility: hidden; transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1); max-width: 350px; } .social-proof-popup.show { /* ... (CSS yang sudah ada) ... */ opacity: 1; transform: translateX(0); visibility: visible; } .social-proof-popup .avatar img { /* ... (CSS yang sudah ada) ... */ width: 40px; height: 40px; border-radius: 5px; } .social-proof-popup .content p { margin: 0; font-size: 0.85rem; /* [DIUBAH] Warna teks dibuat lebih terang */ color: #EAEAEA; line-height: 1.5; font-weight: 600; font-family: 'Montserrat', sans-serif; } .social-proof-popup .content p strong { /* ... (CSS yang sudah ada) ... */ color: var(--text-primary, #FFFFFF); font-weight: 600; } .social-proof-popup .content p .item-name { /* [DIUBAH] Warna item disamakan dengan border */ color: #F9B536; font-weight: 600; } /* Responsif di Mobile */ /* ... (CSS yang sudah ada) ... */ @media (max-width: 768px) { .social-proof-popup { left: 50px; /* ... (CSS yang sudah ada) ... */ right: 50px; bottom: 18px; width: auto; /* Otomatis mengisi lebar */ } .social-proof-popup .content p { font-size: 0.85rem; font-weight: 600; } .social-proof-popup .avatar img { /* ... (CSS yang sudah ada) ... */ width: 35px; height: 35px; border-radius: 4px; } } /* ========================================= */ /* ANIMASI HARGA KERANJANG (BARU) */ /* ========================================= */ @keyframes price-flash { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.15); /* Membesar sedikit */ opacity: 0.7; } 100% { transform: scale(1); opacity: 1; } } .price-update-flash { /* Terapkan animasi */ animation: price-flash 0.4s ease-out; /* Pastikan elemen punya display blocsasask/inline-block */ display: inline-block; } /* Target spesifik untuk grand total */ #summary-grand-total.price-update-flash { animation: price-flash 0.6s ease-out; /* Animasi grand total lebih lambat */ } /* [BARU] Untuk "Damage Text" Diskon */ .cart-summary { /* Perlu relative agar damage text bisa di-posisikan */ position: relative; /* Mencegah damage text keluar dari box */ overflow: hidden; } .damage-text-popup { position: absolute; /* 'top' akan di-set oleh JavaScript (cth: 80px, 110px, 140px) */ left: 50%; transform: translateX(-50%); /* Pusatkan horizontal */ padding: 4px 12px; border-radius: 20px; /* Bentuk pil */ font-size: 1rem; /* Ukuran lebih kecil */ font-weight: 700; z-index: 10; pointer-events: none; /* Biar tidak bisa diklik */ white-space: nowrap; /* Pastikan tidak terpotong jadi 2 baris */ /* Animasi */ /* 'forwards' berarti style di 100% akan tetap berlaku setelah animasi selesai */ animation: floatAndFade 1.5s ease-out forwards; } /* [BARU] Keyframe untuk "Damage Text" */ @keyframes floatAndFade { 0% { /* Mulai dari posisi 'top' yang di-set JS, opacity penuh */ transform: translate(-50%, 0); opacity: 1; } 100% { /* Selesai 50px di atas posisi awal, dan hilang */ transform: translate(-50%, -50px); opacity: 0; } } /* ======================================================= */ /* === [FITUR BARU] STYLING POPUP KARTU GOSOK === */ /* ======================================================= */ .scratch-card-container { width: 100%; max-width: 450px; padding: 30px 40px; background-color: #291E12; border-radius: 5px; overflow: hidden; text-align: center; } .scratch-header .popup-title { color: #ECCA01; /* Kuning Emas */ font-size: 2.2rem; margin: 0; } .scratch-header .popup-subtitle { color: var(--text-secondary); font-size: 1rem; margin: 5px 0 25px 0; font-weight: 500; } .scratch-body { display: flex; flex-direction: column; align-items: center; } /* Wadah untuk Canvas Gosok & Hasil */ .scratch-card-canvas { position: relative; width: 300px; height: 150px; border-radius: 5px; overflow: hidden; cursor: grab; border: 2px dashed var(--accent-orange); } .scratch-card-canvas:active { cursor: grabbing; } /* Tampilan Hasil (di Bawah Canvas) */ .scratch-card-result { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #1B160D; /* Background di balik gosokan */ z-index: 1; /* Di bawah canvas */ } /* Canvas (cover gosokan) harus di atas hasil */ .scratch-card-canvas > canvas { position: relative; z-index: 2; } .scratch-card-result .bxs-gift { font-size: 3rem; color: #ECCA01; } .scratch-card-result h3 { color: var(--text-primary); font-size: 1.3rem; margin: 10px 0 5px 0; } .scratch-card-result p { color: var(--text-secondary); font-size: 1rem; font-weight: 600; margin: 0; font-family: 'Fira Code', monospace; } #scratchCardCopyButton { margin-top: 10px; padding: 8px 15px; font-size: 0.9rem; } #scratchCardDoneButton { padding: 12px 30px; font-size: 1rem; } @media (max-width: 768px) { .scratch-card-container { width: 90%; padding: 25px; } .scratch-header .popup-title { font-size: 1.8rem; } } .server-stats-bar { /* Efek Glass Morphism Coklat */ background: #1A150F; /* Latar coklat semi-transparan */ backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid #1D1812; /* Border coklat muda transparan */ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); padding: 12px 0; /* Posisi: Menempel di bawah navbar */ /* Default top 0 jika tidak ada announcement bar */ top: 0; z-index: 1040; /* Di bawah announcement bar (1050), di atas konten */ } /* [DIUBAH] Jika announcement bar ada, sesuaikan 'top' */ .announcement-bar-v2 + .server-stats-bar { /* Tinggi standar announcement bar ~40px */ top: 40px; } .stats-bar-container { display: flex; /* [DIUBAH] Ganti 'center' menjadi 'space-between' */ justify-content: space-between; align-items: center; /* gap: 40px; */ /* Gap ini sudah tidak diperlukan lagi */ } .stat-item { display: flex; align-items: center; gap: 12px; color: #564A3C; font-weight: 600; font-size: 1rem; } .stat-item i { font-size: 1.1rem; color: #564A3C; } .stat-item strong { color: var(--text-primary); font-weight: 700; font-size: 1.1rem; } /* Responsif untuk Mobile */ @media (max-width: 768px) { .stats-bar-container { gap: 25px; /* Kurangi jarak di mobile */ } .stat-item { gap: 8px; /* Kurangi jarak ikon & teks */ font-size: 0.85rem; } .stat-item strong { font-size: 1rem; } .stat-item i { font-size: 1rem; } /* [DIUBAH] Penyesuaian 'top' sticky di mobile */ .announcement-bar-v2 + .server-stats-bar { /* Di mobile, announcement bar bisa jadi 2 baris (tinggi ~64px) */ top: 64px; } } /* ======================================================= */ /* === [BARU] STYLING BOX SALE (SESUAI GAMBAR) === */ /* ======================================================= */ .sale-announcement-box { /* [MODIFIKASI] Hapus semua properti background-image dari sini */ position: relative; /* Diperlukan untuk overlay ::before */ border-radius: 5px; padding: 55px 55px; margin-top: 40px; /* Jarak dari navbar */ margin-bottom: 0px; /* Jarak ke flash sale/cards */ color: white; z-index: 0; /* Atur stacking context */ overflow: hidden; /* Pastikan overlay tidak tumpah */ } /* [BARU] Lapisan 1 (Paling Bawah): Gambar Background Hitam-Putih */ .sale-bg-image { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; /* Layer 1: Gambar Anda */ background-image: url('../images/skull.png'); opacity: 1.0; /* Layer 2: Warna gelap untuk di-blend */ /* Anda bisa ganti 'black' dengan warna lain atau 'rgba(0,0,0,0.5)' */ background-size: cover; background-position: center; border-radius: 5px; z-index: -2; } /* [MODIFIKASI] Lapisan 2 (Tengah): Gradient Overlay */ .sale-announcement-box::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; /* Gunakan CSS Variabel dari PHP, dengan fallback hijau jika gagal */ background: linear-gradient(90deg, var(--grad-1, #1A823C), var(--grad-2, #1A823C)); /* [PERUBAHAN UTAMA DI SINI] Kita ganti 'mix-blend-mode' kembali ke 'opacity'. Ini akan membuat gradient-nya 85% transparan, sehingga gambar hitam-putih di 'sale-bg-image' (z-index: -2) akan terlihat. */ /* mix-blend-mode: color; */ /* <-- HAPUS INI */ opacity: 0.45; /* <-- TAMBAHKAN INI */ border-radius: 5px; /* Samakan dengan parent */ z-index: -1; /* Letakkan di belakang konten, tapi DI ATAS background image */ } .sale-announcement-content { display: flex; justify-content: space-between; align-items: center; gap: 20px; } /* [STYLE BARU] Ini adalah highlight box untuk diskon */ .sale-highlight { background-color: #EE1616; /* Warna merah dari gambar */ color: #FFFFFF; /* Teks putih */ padding: 2px 10px; /* Sedikit padding */ border-radius: 4px; /* Sudut agak bulat */ display: inline-block; /* Agar padding terlihat */ /* Pastikan font-nya sama */ font-family: 'Rubik One', sans-serif; font-weight: 400 !important; } .sale-text h2 { font-family: 'Rubik One', sans-serif; /* Font RubikOne */ font-size: 2.2rem; font-weight: 400 !important; margin: 0 0 5px 0; line-height: 1.2; width: 80%; color: rgba(255, 255, 255, 0.9); /* Warna putih, opacity 90% */ /* Warna angka putih */ } .sale-text p { font-size: 1.5rem; font-weight: 700; margin: 0; opacity: 0.9; } .sale-timer { text-align: right; flex-shrink: 0; /* Mencegah timer menyusut */ } .sale-timer p { font-family: 'Montserrat', sans-serif; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 8px 0; color: rgba(255, 255, 255, 0.5); /* Warna putih, opacity 90% */ /* Warna angka putih */ } .timer-grid { display: flex; gap: 15px; } /* [PERUBAHAN] timer-cell sekarang menjadi KOTAK */ .timer-cell { display: flex; flex-direction: column; align-items: center; background-color: rgba(0, 0, 0, 0.2); border-radius: 8px; /* Sudut membulat */ padding: 15px 15px; /* Padding di dalam kotak */ min-width: 70px; /* Lebar minimum kotak */ } /* [PERUBAHAN] span (angka) menggunakan font RubikOne */ .timer-cell span { font-family: 'Rubik One', sans-serif; /* Font RubikOne */ font-size: 2.8rem; font-weight: 400; /* RubikOne sudah tebal, 800 tidak perlu */ line-height: 1.1; color: rgba(255, 255, 255, 0.9); /* Warna putih, opacity 90% */ /* Warna angka putih */ } /* [PERUBAHAN] label (teks) sedikit transparan */ .timer-cell label { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); /* Warna putih, opacity 90% */ /* Warna angka putih */ opacity: 0.8; /* Sedikit transparan */ margin-top: 2px; /* Jarak kecil dari angka */ } /* === [BARU] STYLING RESPONSIVE BOX SALE === */ @media (max-width: 768px) { .sale-announcement-box { padding: 35px 20px; /* Kurangi padding di mobile */ } .sale-announcement-content { flex-direction: column; /* Tumpuk vertikal */ text-align: center; /* Pusatkan semua */ gap: 25px; } .sale-text h2 { font-size: 1.8rem; width: 100%; } .sale-text p { font-size: 0.8rem; } .sale-timer { text-align: center; width: 100%; } .timer-grid { justify-content: center; /* Pusatkan timer grid */ gap: 10px; } .timer-cell span { font-size: 1.2rem; } .timer-cell { min-width: 20px; /* Lebar minimum kotak */ padding: 10px 15px; /* Padding di dalam kotak */ } } /* --- Typography override for summary rows & applied code --- */ .cart-summary, .cart-summary * , /* ensure nested spans/labels inherit */ .applied-code-display, .applied-code-display * { font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; } /* Target specific summary elements to be safe */ .summary-row, .summary-row span, #summary-subtotal, #summary-cart-discount-amount, #summary-promo-discount-amount, #summary-referral-discount-amount, #summary-grand-total { font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; } /* Applied promo/referral code box */ .applied-code-display { font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; } /* --- Placeholder text (promo input & gifting username) --- */ /* Standard */ #promo_code::placeholder, input[name="gifting_username"]::placeholder { font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; } /* WebKit */ #promo_code::-webkit-input-placeholder, input[name="gifting_username"]::-webkit-input-placeholder { font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; } /* Mozilla Firefox */ #promo_code::-moz-placeholder, input[name="gifting_username"]::-moz-placeholder { font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; } /* IE 10+ */ #promo_code:-ms-input-placeholder, input[name="gifting_username"]:-ms-input-placeholder { font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; } /* Edge / old IE */ #promo_code::-ms-input-placeholder, input[name="gifting_username"]::-ms-input-placeholder { font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; } .gift-recipient-form label, .gift-recipient-form input[type="text"] { font-family: 'Montserrat', sans-serif; font-weight: 600; } /* Semua teks utama section Battlepass */ .battlepass-container, .battlepass-container * { font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; } /* Counter angka (1) */ .level-counter-display, .level-counter button { font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; } /* Tombol increment cepat (+10 +25 +50 +100) */ .quick-add-btn, .quick-add-btn button, .bulk-level-btn { font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; } /* Price per Level */ .price-row span { font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; } /* Grand Total */ .total-row span { font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; } .featured-grid { display: grid; /* Desktop: Paksa 2 kolom untuk tampilan grid kotak (misal 4 item jadi 2 baris x 2 kolom) */ grid-template-columns: repeat(2, 1fr); /* [DIUBAH] Jarak baris (atas-bawah) diperbesar jadi 40px, kolom (samping) tetap 20px */ gap: 40px 20px; width: 100%; } /* Penyesuaian di Mobile: Tetap 1 kolom ke bawah */ @media (max-width: 768px) { .featured-grid { grid-template-columns: 1fr; /* Di mobile, jarak antar kartu ke bawah juga pakai 40px biar konsisten */ gap: 0px; } } /* ======================================================= */ /* === [FITUR BARU] STYLING POPUP EVENT BONUS TOP UP === */ /* ======================================================= */ /* Kontainer Utama */ .event-popup-container { width: 90%; max-width: 500px; background-color: #291E12; /* Warna card tema */ border-radius: 12px; padding: 35px 30px; position: relative; text-align: center; animation: pop-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; /* [MODIFIKASI] Hapus overflow hidden agar tombol close absolut tidak terpotong jika keluar */ /* overflow: hidden; */ } /* [TAMBAHAN] Wrapper Gambar Popup */ .event-popup-image-wrapper { /* Sesuaikan margin agar gambar menempel ke tepi atas container yang memiliki padding */ margin: -37px -32px 25px -32px; /* Margin negatif sedikit lebih besar dari padding container + border */ max-height: 250px; /* Batasi tinggi gambar */ overflow: hidden; border-radius: 10px 10px 0 0; /* Radius atas mengikuti container */ } /* [TAMBAHAN] Gambar Popup */ .event-popup-image { width: 100%; height: auto; display: block; object-fit: cover; /* Agar gambar memenuhi area tanpa distorsi */ } /* Tombol Close (X) di pojok kanan atas */ .event-popup-close { position: absolute; top: 10px; /* Sedikit lebih ke atas */ right: 10px; /* Sedikit lebih ke kanan */ background: rgba(0,0,0,0.6); /* Background transparan lebih gelap agar terlihat di atas gambar terang */ border-radius: 50%; width: 36px; /* Ukuran sedikit diperbesar */ height: 36px; border: 2px solid rgba(255,255,255,0.2); /* Border tipis */ color: #FFF; font-size: 1.5rem; cursor: pointer; transition: all 0.2s; line-height: 1; z-index: 20; /* Pastikan di atas gambar (yang z-index default) */ display: flex; align-items: center; justify-content: center; } .event-popup-close:hover { background-color: #C52E2E; color: #FFF; border-color: #C52E2E; } /* Header */ /* ... (sisa kode header, icon, body text, tiers, buttons, animations sama seperti sebelumnya) ... */ .event-popup-header { margin-bottom: 20px; } .event-icon { font-size: 3rem; color: #ECCA01; margin-bottom: 10px; display: block; animation: bounce 2s infinite; } .event-popup-header h2 { font-family: 'Rubik One', sans-serif; color: #FFC300; font-size: 1.8rem; margin: 0; margin-top: 20px; text-transform: uppercase; font-weight: 400; } /* Body Text */ .event-popup-body p { color: #EAEAEA; font-size: 1rem; line-height: 1.6; margin-bottom: 50px; font-family: 'Montserrat', sans-serif; font-weight: 600; max-width: 420px; margin: 0 auto; } /* ======================================================= */ /* === [UPDATE] STYLING POPUP EVENT BONUS (TIER LIST) === */ /* ======================================================= */ /* === [UPDATE V2] POPUP EVENT BONUS (SCROLLABLE) === */ /* ======================================================= */ /* Container List Tier (Area yang bisa discroll) */ .event-popup-tiers { background-color: rgba(0, 0, 0, 0.25); /* Background wadah list lebih gelap */ border-radius: 8px; padding: 12px; /* Padding di dalam agar konten tidak mepet */ margin-top: 20px; margin-bottom: 20px; border: 1px solid rgba(255, 255, 255, 0.05); /* --- LOGIKA SCROLL --- */ max-height: 240px; /* Batas tinggi maksimal (kira-kira 3 item) */ overflow-y: auto; /* Aktifkan scroll jika konten lebih panjang */ display: flex; flex-direction: column; gap: 10px; /* Jarak antar kartu */ text-align: left; } /* --- Kustomisasi Scrollbar (Biar Lebih Cantik) --- */ /* Lebar scrollbar */ .event-popup-tiers::-webkit-scrollbar { width: 6px; } /* Track (Jalur scrollbar) */ .event-popup-tiers::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.2); border-radius: 3px; margin: 5px 0; /* Jarak atas bawah */ } /* Thumb (Batang scrollbar) */ .event-popup-tiers::-webkit-scrollbar-thumb { background-color: #4B3420; /* Warna Coklat Gelap */ border-radius: 3px; border: 1px solid rgba(255, 255, 255, 0.05); } /* Thumb saat dihover */ .event-popup-tiers::-webkit-scrollbar-thumb:hover { background-color: #ECCA01; /* Berubah jadi Emas */ cursor: pointer; } /* --- Styling Kartu Item Tier --- */ .event-tier-item { /* Design Card Modern Minimalis */ background-color: #1B150F; border: 2px solid rgba(236, 202, 1, 0.15); /* Border emas sangat tipis & transparan */ border-radius: 6px; padding: 12px 15px; transition: all 0.2s ease-in-out; position: relative; } /* Efek Hover pada Kartu */ .event-tier-item:hover { background-color: rgba(236, 202, 1, 0.08); /* Sedikit terang saat hover */ border-color: #FFC300; transform: translateX(3px); /* Geser sedikit ke kanan */ } /* Judul Tier (Rp 100K - 149K) */ .tier-title { color: #ECCA01; /* Warna Emas */ font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 0.95rem; margin-bottom: 6px; text-transform: uppercase; display: flex; align-items: center; gap: 8px; letter-spacing: 0.5px; } .tier-highlight { color: #FFD700; /* Kuning Emas Cerah */ font-weight: 700; /* Bold */ text-shadow: 0 0 8px rgba(255, 215, 0, 0.2); /* Sedikit efek glow */ } /* Deskripsi Hadiah */ .tier-desc { color: #fff; /* Abu-abu perak */ font-size: 0.85rem; font-weight: 600; line-height: 1.5; font-family: 'Montserrat', sans-serif; } /* Mobile Responsiveness */ @media (max-width: 480px) { .event-popup-tiers { max-height: 200px; /* Lebih pendek di HP */ } .tier-title { font-size: 0.9rem; } } /* Buttons */ .event-popup-actions { display: flex; flex-direction: column; gap: 10px; } .btn-event-action { width: 100%; padding: 14px; font-size: 1.1rem; font-weight: 700; text-transform: uppercase; background-color: #ECCA01; /* Emas */ color: #1A140F; /* Gelap */ border: none; } .btn-event-action:hover { background-color: #d4b500; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(236, 202, 1, 0.3); } .btn-event-close { width: 100%; padding: 12px; background-color: #B81818; border: 1px solid #C52E2E; color: #FFFFFF; font-weight: 600; } .btn-event-close:hover { background-color: #931010; color: #FFFFFF; border-color: #C52E2E; } /* Animations */ @keyframes pop-in { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 40% {transform: translateY(-10px);} 60% {transform: translateY(-5px);} } /* Mobile Adjustments */ @media (max-width: 480px) { .event-popup-container { padding: 25px 20px; width: 85%; /* Sedikit lebih lebar di mobile */ } .event-popup-image-wrapper { margin: -27px -22px 20px -22px; /* Sesuaikan margin negatif untuk mobile (padding 25px + border 2px) */ } .event-popup-header h2 { font-size: 1.5rem; } .event-popup-body p { font-size: 0.9rem; } .event-tier-item { font-size: 0.85rem; } } /* ========================================= */ /* STYLING QUANTITY SELECTOR (PRODUCT CARD) */ /* ========================================= */ .product-quantity-wrapper { display: flex; justify-content: center; align-items: center; margin-bottom: 15px; /* Jarak ke tombol Add to Cart */ gap: 8px; } .qty-btn { width: 32px; height: 32px; background-color: #4B3420; border: 1px solid #63432d; color: #fff; border-radius: 4px; font-weight: 700; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; } .qty-btn:hover { background-color: #63432d; } .qty-input { width: 50px; height: 32px; background-color: #1B160D; border: 1px solid #4B3420; color: #ECCA01; text-align: center; font-weight: 700; border-radius: 4px; font-family: 'Poppins', sans-serif; -moz-appearance: textfield; } .qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* ========================================= */ /* STYLING CART TOAST NOTIFICATION (RE-DESIGN) */ /* ========================================= */ .cart-toast { position: fixed; top: 20px; /* Posisi awal dari atas */ left: 50%; transform: translateX(-50%) translateY(-150%); /* Geser ke tengah dan sembunyikan di atas */ z-index: 9999; /* Paling atas */ /* Tampilan Ala Social Proof (Glassmorphism) */ background: rgba(48, 31, 16, 0.85); /* Coklat tua semi-transparan */ backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(211, 127, 58, 0.3); /* Border oranye tipis */ border-radius: 8px; /* Sudut membulat */ padding: 12px 20px; display: flex; align-items: center; gap: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.4); opacity: 0; visibility: hidden; transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1); width: auto; max-width: 90%; /* Responsif di mobile */ min-width: 300px; } .cart-toast.show { transform: translateX(-50%) translateY(0); /* Turun ke posisi normal */ opacity: 1; visibility: visible; } /* Bagian Ikon Bulat di Kiri */ .cart-toast-avatar { width: 45px; height: 45px; background-color: #04A40F; /* Hijau sukses */ border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 2px solid rgba(255, 255, 255, 0.1); } .cart-toast-avatar i { color: white; font-size: 1.5rem; } /* Bagian Konten Teks */ .cart-toast-content p { margin: 0; font-size: 0.9rem; color: #EAEAEA; line-height: 1.4; font-family: 'Montserrat', sans-serif; font-weight: 500; } .cart-toast-content strong { color: #FFFFFF; font-weight: 700; display: block; /* Judul di baris sendiri */ margin-bottom: 2px; } /* Warna khusus untuk angka */ .cart-toast-content span { font-weight: 700; } /* Mobile Adjustments */ @media (max-width: 768px) { .cart-toast { top: 15px; min-width: auto; padding: 12px 15px; width: 90%; } .cart-toast-avatar { width: 38px; height: 38px; } .cart-toast-avatar i { font-size: 1.2rem; } .cart-toast-content p { font-size: 0.85rem; } } /* ========================================= */ /* KHUSUS POPUP FEATURED & BATTLEPASS */ /* ========================================= */ /* Pastikan tombol Add To Cart di popup Featured/Battlepass bagus */ #ftSubmitButton, #bpSubmitButton { background-color: #93421F; /* Warna utama */ color: white; font-weight: 700; text-transform: uppercase; border: none; border-radius: 5px; padding: 15px 0; /* Padding atas bawah cukup besar */ width: 100%; /* Full width */ cursor: pointer; transition: background-color 0.2s; display: flex; align-items: center; justify-content: center; gap: 10px; font-family: 'Poppins', sans-serif; font-size: 1rem; margin-top: 20px; /* Jarak dari total harga */ } #ftSubmitButton:hover, #bpSubmitButton:hover { background-color: #763618; /* Gelap saat hover */ } /* [BARU] Styling Icon Produk di Popup */ .popup-product-icon { display: block; margin: 10px auto 15px auto; /* Tengah horizontal, jarak atas bawah */ width: 80px; /* Ukuran gambar */ height: 80px; object-fit: contain; /* Agar gambar tidak gepeng */ filter: drop-shadow(0 5px 10px rgba(0,0,0,0.3)); /* Efek bayangan */ animation: pop-in 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } /* Memperbaiki container harga di popup agar rapi */ .bp-price-summary { background-color: #1B160D; border-radius: 5px; padding: 15px 20px; margin-bottom: 10px; /* Jarak ke tombol */ } /* Memastikan quantity selector rapi */ .bp-quantity-selector { display: flex; justify-content: center; align-items: center; margin-bottom: 20px; gap: 10px; } .bp-btn { width: 40px; height: 40px; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; background-color: #4B3420; border: none; color: white; border-radius: 5px; cursor: pointer; } #bpInputQty, #ftInputQty { width: 60px; height: 40px; text-align: center; font-size: 1.2rem; font-weight: 700; background-color: #1B160D; border: 1px solid #4B3420; color: white; border-radius: 5px; }