@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap'); :root { --bg-dark: #17110a; --bg-card: #241b12; --bg-card-2: #2e2317; --brand: #c6a878; --brand-light: #e4d2ac; --brand-gradient: linear-gradient(135deg, #f0deb6 0%, #c6a878 45%, #8a6f47 100%); --text-white: #f6f4f0; --text-muted: #a89a86; --border-color: #3a2c1c; --radius: 16px; --shadow-elegant: 0 18px 40px rgba(15,9,3,0.45); --shadow-soft: 0 6px 18px rgba(15,9,3,0.32); --brand-glow: rgba(198,168,120,0.32); } /* ================= MODE TERANG ================= Diaktifkan lewat atribut data-theme="light" di (lihat toggleTheme() di js/script.js). Semua styling situs sudah pakai variable di atas, jadi tema terang cukup override nilainya di sini — tidak perlu duplikasi CSS. */ [data-theme="light"] { --bg-dark: #f4f2ee; --bg-card: #ffffff; --bg-card-2: #f0ece3; --brand: #8a6f47; --brand-light: #b09872; --brand-gradient: linear-gradient(135deg, #d2bd97 0%, #8a6f47 100%); --text-white: #201d18; --text-muted: #766f61; --border-color: #e6e0d4; --shadow-elegant: 0 18px 40px rgba(80,65,30,0.14); --shadow-soft: 0 6px 18px rgba(80,65,30,0.10); --brand-glow: rgba(138,111,71,0.18); } /* ================= SKEMA WARNA: OREN MEWAH ================= Diaktifkan lewat atribut data-color-theme="orange" di (Admin > Pengaturan > Skema Warna Tema). Sama seperti mode terang, cukup override variable :root — semua styling situs (termasuk Flash Sale & Pop Up yang dibuat belakangan) otomatis ikut berubah karena sudah konsisten pakai variable ini. */ [data-color-theme="orange"] { --bg-dark: #1a0f06; --bg-card: #271707; --bg-card-2: #33200a; --brand: #e2913f; --brand-light: #ffcf94; --brand-gradient: linear-gradient(135deg, #ffd9a0 0%, #f2994a 45%, #c96a1a 100%); --text-white: #fbf3ea; --text-muted: #cba983; --border-color: #4a2c10; --shadow-elegant: 0 18px 40px rgba(20,10,2,0.5); --shadow-soft: 0 6px 18px rgba(20,10,2,0.35); --brand-glow: rgba(242,153,74,0.32); } [data-theme="light"][data-color-theme="orange"] { --bg-dark: #fff6ec; --bg-card: #ffffff; --bg-card-2: #fdebd8; --brand: #c96a1a; --brand-light: #e2914a; --brand-gradient: linear-gradient(135deg, #ffcd94 0%, #c96a1a 100%); --text-white: #241505; --text-muted: #8a6440; --border-color: #f0d9bc; --shadow-elegant: 0 18px 40px rgba(120,70,10,0.14); --shadow-soft: 0 6px 18px rgba(120,70,10,0.10); --brand-glow: rgba(201,106,26,0.18); } /* ================= SKEMA WARNA: BIRU MEWAH ================= Diaktifkan lewat atribut data-color-theme="blue" di . */ [data-color-theme="blue"] { --bg-dark: #0a121c; --bg-card: #101d2c; --bg-card-2: #142538; --brand: #5b8dd6; --brand-light: #a8c8f0; --brand-gradient: linear-gradient(135deg, #cfe4ff 0%, #6fa8dc 45%, #2d5f99 100%); --text-white: #eef4fb; --text-muted: #93aac2; --border-color: #1c3350; --shadow-elegant: 0 18px 40px rgba(2,8,20,0.5); --shadow-soft: 0 6px 18px rgba(2,8,20,0.35); --brand-glow: rgba(111,168,220,0.32); } [data-theme="light"][data-color-theme="blue"] { --bg-dark: #eef4fb; --bg-card: #ffffff; --bg-card-2: #e4edf8; --brand: #2d5f99; --brand-light: #5b8dd6; --brand-gradient: linear-gradient(135deg, #a8c8f0 0%, #2d5f99 100%); --text-white: #101d2c; --text-muted: #5c7288; --border-color: #d3e2f2; --shadow-elegant: 0 18px 40px rgba(20,50,90,0.14); --shadow-soft: 0 6px 18px rgba(20,50,90,0.10); --brand-glow: rgba(45,95,153,0.18); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; background: var(--bg-dark); color: var(--text-white); line-height: 1.5; overflow-x: hidden; } a { text-decoration: none; color: inherit; } img { max-width: 100%; display: block; } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* ============ HEADER ============ */ .site-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; gap: 14px; background: var(--bg-dark); border-bottom: 1px solid var(--border-color); position: sticky; top: 0; z-index: 100; transition: box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease; } .site-header.is-scrolled { background: color-mix(in srgb, var(--bg-dark) 88%, transparent); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); box-shadow: var(--shadow-soft); border-bottom-color: transparent; position: relative; } .site-header.is-scrolled::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--brand-glow) 30%, var(--brand-glow) 70%, transparent); } .logo { display: flex; align-items: center; font-weight: 700; font-size: 16px; letter-spacing: 0.4px; flex-shrink: 0; min-width: 0; background: linear-gradient(100deg, var(--brand) 0%, var(--brand-light) 20%, #ffffff 42%, var(--brand-light) 49%, var(--brand) 65%, var(--brand-light) 85%, var(--brand) 100%); background-size: 240% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--brand); animation: logoShimmer 5s linear infinite; } /* Wordmark "MVGames" berkilau pelan — highlight terang bergeser melintasi teks, memberi kesan logo brand yang "hidup" tanpa jadi berisik. */ @keyframes logoShimmer { to { background-position: -240% center; } } /* Nama web di header atas dibuat sedikit lebih besar dari sebelumnya supaya lebih terbaca, tapi tetap ringkas dibanding logo di drawer menu. */ .site-header .logo { font-size: 16px; letter-spacing: 0.3px; } /* Logo gambar (upload dari Admin > Pengaturan > Logo & Favicon) — dibatasi tingginya supaya rapi di header/drawer walau file aslinya besar. Kalau fitur ini nonaktif, .logo tetap tampil sebagai tulisan seperti sebelumnya. */ .logo img { height: 32px; width: auto; max-width: 160px; object-fit: contain; display: block; -webkit-text-fill-color: initial; } .header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } /* ============ WELCOME BAR (sapaan "Selamat Datang, ..." + Login) ============ */ .welcome-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 20px; background: var(--bg-dark); border-bottom: 1px solid var(--border-color); } .welcome-bar-left { display: flex; align-items: center; gap: 10px; min-width: 0; } .welcome-bar-badge { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--brand-gradient); color: #241a0a; } .welcome-bar-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; } .welcome-bar-label { font-size: 11px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-muted); } .welcome-bar-name { font-size: 16px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .welcome-bar-right { flex-shrink: 0; } .welcome-login-btn { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 18px; border-radius: 999px; background: var(--brand-gradient); color: #241a0a; font-size: 13.5px; font-weight: 800; white-space: nowrap; box-shadow: 0 6px 16px var(--brand-glow); transition: transform 0.2s ease, box-shadow 0.2s ease; } .welcome-login-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px var(--brand-glow); } @media (max-width: 480px) { .welcome-bar { padding: 12px 14px; } .welcome-bar-badge { width: 34px; height: 34px; } .welcome-bar-name { font-size: 14.5px; } .welcome-login-btn { height: 36px; padding: 0 14px; font-size: 12.5px; } } .icon-btn { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-color); border-radius: 12px; background: transparent; color: var(--text-white); cursor: pointer; flex-shrink: 0; transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } .icon-btn svg { width: 19px; height: 19px; } .icon-btn:hover { border-color: var(--brand); color: var(--brand-light); transform: translateY(-1px); } /* ============ PILL ID / IDR (mirip referensi) ============ */ .region-pill { position: relative; flex-shrink: 0; } .region-pill-btn { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px; border: 1px solid var(--border-color); border-radius: 12px; background: transparent; color: var(--text-white); font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; } .region-pill-btn:hover { border-color: var(--brand); color: var(--brand); } .region-pill-flag { width: 20px; height: 14px; border-radius: 2px; overflow: hidden; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(255,255,255,0.15); } .region-pill-flag svg { display: block; width: 100%; height: 100%; } .region-dropdown { display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 240px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.35); z-index: 120; } .region-dropdown.open { display: block; animation: fadeInUp 0.15s ease both; } .region-dropdown-item { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--brand); background: rgba(176, 152, 114,0.1); } .region-dropdown-item svg { margin-left: auto; flex-shrink: 0; } .region-dropdown-note { padding: 8px 10px 4px; font-size: 11.5px; color: var(--text-muted); line-height: 1.4; } /* ============ BANNER / HERO ============ */ /* Rasio 2.55 / 1 mengikuti dimensi asli gambar banner (±2000x785px) supaya tidak terpotong (cover) atau ada ruang kosong (contain-jelek). */ .hero-banner { margin: 16px auto; border-radius: var(--radius); overflow: hidden; max-width: 1100px; } .hero-banner img { display: block; width: 100%; aspect-ratio: 2.55 / 1; object-fit: cover; border-radius: var(--radius); } @media (max-width: 480px) { .hero-banner { margin: 12px auto; } .hero-banner img { aspect-ratio: 2.55 / 1; } } .hero-banner-scroll { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; max-width: 1100px; margin: 0 auto; } .hero-banner-scroll .hero-banner { flex: 0 0 100%; scroll-snap-align: start; margin: 16px 0; } .hero-banner-scroll::-webkit-scrollbar { display: none; } .hero-banner-scroll { scroll-behavior: smooth; } .hero-banner-dots { display: flex; justify-content: center; gap: 8px; margin: -6px 0 14px; } .hero-banner-dot { width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0; background: rgba(176, 152, 114, 0.35); cursor: pointer; transition: width 0.2s ease, background 0.2s ease; } .hero-banner-dot.active { width: 22px; border-radius: 4px; background: var(--brand); } /* ============ CATEGORY NAV ============ */ .category-nav { display: flex; align-items: center; gap: 8px; padding: 10px 20px 18px; overflow-x: auto; scrollbar-width: none; } .category-nav::-webkit-scrollbar { display: none; } .category-nav .nav-arrow { flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; background: var(--brand-gradient); color: #241a0a; display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; box-shadow: 0 4px 14px var(--brand-glow); } .category-nav .nav-arrow:hover { filter: brightness(1.08); } .category-nav .nav-arrow:active { transform: translateY(1px); } @media (max-width: 640px) { /* Referensi tampilan mobile tidak menampilkan tombol panah, pill kategori cukup discroll dengan jari. Tombol tetap ada di DOM (tidak mengubah fungsi JS-nya), cuma disembunyikan secara visual di layar sempit. */ .category-nav .nav-arrow { display: none; } } .category-pill { flex-shrink: 0; padding: 10px 18px; border-radius: 14px; background: var(--bg-card-2); color: var(--text-white); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap; cursor: pointer; border: 1.5px solid transparent; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, color 0.15s ease, background 0.15s ease; } .category-pill:hover { border-color: var(--brand); color: var(--brand-light); transform: translateY(-1px); } .category-pill.active { background: linear-gradient(180deg, rgba(198,168,120,0.14), rgba(198,168,120,0.04)); color: var(--brand-light); font-weight: 700; border: 1.5px solid var(--brand); box-shadow: 0 4px 14px var(--brand-glow); transform: none; } /* ============ HALAMAN 404 ============ */ .not-found-wrap { max-width: 560px; text-align: center; padding: 70px 20px 90px; } .not-found-code { font-size: 84px; font-weight: 800; line-height: 1; background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: 2px; } .not-found-title { font-size: 22px; font-weight: 700; margin: 14px 0 10px; } .not-found-desc { color: var(--text-muted); font-size: 14px; margin-bottom: 28px; } .not-found-search { position: relative; display: flex; align-items: center; gap: 8px; max-width: 420px; margin: 0 auto 18px; } .not-found-search svg { position: absolute; left: 14px; color: var(--text-muted); pointer-events: none; } .not-found-search input { flex: 1; padding: 13px 16px 13px 42px; border-radius: 12px; border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-white); font-family: inherit; font-size: 14px; outline: none; } .not-found-search input:focus { border-color: var(--brand) !important; box-shadow: 0 0 0 3px rgba(176, 152, 114,0.18); } .not-found-search .btn-primary { flex-shrink: 0; padding: 13px 20px; } .not-found-home { display: inline-block; background: transparent; border: 1px solid var(--border-color); color: var(--text-white); box-shadow: none; } .not-found-home:hover { border-color: var(--brand); color: var(--brand-light); box-shadow: none; } /* ============ HALAMAN 404 — versi "Oops! 404 ERROR" pakai ilustrasi sendiri ============ */ .nf-oops { font-size: clamp(28px, 8vw, 40px); font-weight: 800; text-align: center; color: var(--text-white); margin-bottom: -8px; } .nf-404-row { display: flex; align-items: center; justify-content: center; gap: 2px; margin: 0 auto 4px; } .nf-404-digit { font-size: clamp(56px, 20vw, 130px); font-weight: 800; line-height: 1; background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } .nf-404-row .not-found-illustration { max-width: 190px; margin: 0 -6px; } .nf-error-bubble { position: absolute; top: 2%; right: -14%; background: var(--bg-card); color: var(--text-white); border: 2px solid var(--brand); border-radius: 16px; padding: 5px 14px; font-weight: 700; font-size: 12px; letter-spacing: 0.5px; box-shadow: 0 8px 18px rgba(0,0,0,0.35); white-space: nowrap; animation: fadeInUp 0.5s ease 0.3s both; } .nf-error-bubble::after { content: ''; position: absolute; left: 18px; bottom: -8px; width: 14px; height: 14px; background: var(--bg-card); border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand); transform: rotate(45deg); } .nf-kembali-btn { display: block; width: 100%; max-width: 320px; margin: 6px auto 16px; padding: 16px; font-size: 16px; text-align: center; } .nf-search-small { max-width: 320px; opacity: 0.85; transition: opacity 0.2s ease; } .nf-search-small:hover, .nf-search-small:focus-within { opacity: 1; } .nf-search-small input { font-size: 13px; padding: 11px 14px 11px 38px; } .nf-search-small .btn-primary { padding: 11px 16px; font-size: 13px; } @media (max-width: 380px) { .nf-404-row .not-found-illustration { max-width: 150px; } .nf-error-bubble { font-size: 11px; padding: 4px 10px; right: -8%; } } /* ============ HALAMAN 404 v2 — full animasi & ilustrasi baru ============ */ .nf-wrap-v2 { position: relative; overflow: hidden; } .not-found-wrap.nf-wrap-v2 > * { position: relative; z-index: 1; } /* Entrance stagger: setiap elemen fade-up satu per satu lewat --d (delay) */ .nf-anim { animation: nfFadeUp 0.7s cubic-bezier(.22,.61,.36,1) both; animation-delay: var(--d, 0s); } @keyframes nfFadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } /* Blob dekoratif di belakang konten, melayang pelan */ .nf-bg-blob { position: absolute; z-index: 0; border-radius: 50%; filter: blur(60px); opacity: 0.35; pointer-events: none; animation: nfBlobDrift 9s ease-in-out infinite; } .nf-bg-blob-1 { width: 220px; height: 220px; top: -50px; left: -60px; background: radial-gradient(circle, rgba(176,152,114,0.55), transparent 70%); } .nf-bg-blob-2 { width: 260px; height: 260px; bottom: -70px; right: -80px; background: radial-gradient(circle, rgba(110,140,255,0.4), transparent 70%); animation-delay: 2s; } [data-theme="light"] .nf-bg-blob { opacity: 0.16; } @keyframes nfBlobDrift { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(14px,-12px) scale(1.08); } } /* Ilustrasi melayang pelan + bayangan yang ikut "bernapas" di bawahnya */ .nf-float { animation: nfFloat 4.5s ease-in-out infinite; } @keyframes nfFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } .nf-illustration-shadow { position: absolute; left: 50%; bottom: -2%; width: 58%; height: 14px; background: radial-gradient(ellipse, rgba(0,0,0,0.4) 0%, transparent 72%); transform: translateX(-50%); animation: nfShadowPulse 4.5s ease-in-out infinite; z-index: -1; } [data-theme="light"] .nf-illustration-shadow { background: radial-gradient(ellipse, rgba(0,0,0,0.18) 0%, transparent 72%); } @keyframes nfShadowPulse { 0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.9; } 50% { transform: translateX(-50%) scale(0.8); opacity: 0.5; } } /* Kelap-kelip kecil di sekitar ilustrasi */ .nf-sparkle { position: absolute; color: var(--brand); font-size: 14px; line-height: 1; opacity: 0; pointer-events: none; animation: nfTwinkle 2.6s ease-in-out infinite; } .nf-sparkle-1 { top: 4%; left: 6%; animation-delay: 0s; } .nf-sparkle-2 { top: 58%; left: 93%; font-size: 11px; animation-delay: 0.8s; } .nf-sparkle-3 { top: 84%; left: 2%; font-size: 10px; animation-delay: 1.5s; } @keyframes nfTwinkle { 0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(90deg); } } @media (prefers-reduced-motion: reduce) { .logo, .dev-avatar-ring, .dev-eyebrow-dot, .drawer-link-dev svg { animation: none !important; } .nf-anim, .nf-float, .nf-illustration-shadow, .nf-bg-blob, .nf-sparkle { animation: none !important; opacity: 1 !important; transform: none !important; } } /* ============ SECTION TITLE ============ */ .section { padding: 14px 20px 22px; max-width: 1200px; margin: 0 auto; } .section-title { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 700; text-transform: none; margin-bottom: 16px; letter-spacing: 0.2px; } .section-title::before { content: ""; display: inline-block; width: 4px; height: 18px; border-radius: 3px; background: var(--brand-gradient); flex-shrink: 0; } .section-title .emoji { font-size: 20px; } .section-subtitle { color: var(--text-muted); font-size: 14px; margin-bottom: 20px; } /* ============ PRODUCT SEARCH BOX ============ */ .product-search-box { position: relative; max-width: 420px; margin-bottom: 18px; } .product-search-box input { width: 100%; padding: 13px 16px 13px 42px; border-radius: 12px; border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-white); font-family: inherit; font-size: 14px; outline: none; transition: border-color .15s ease, box-shadow .15s ease; } .product-search-box input::placeholder { color: var(--text-muted); } .product-search-box input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(176, 152, 114,0.18); } .product-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--text-muted); pointer-events: none; } .product-search-empty { display: none; color: var(--text-muted); font-size: 14px; margin: -6px 0 16px; } /* ============ PRODUCT GRID (ubin kecil ala "PILIH GAME / LAYANAN") ============ */ .product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; width: 100%; } @media (min-width: 640px) { .product-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px 14px; } } @media (min-width: 900px) { .product-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } } /* Kartu produk kecil: thumbnail persegi dengan badge pojok, nama produk kecil di BAWAH gambar (bukan overlay) — meniru ubin ikon aplikasi top-up (lihat renderProductCard() di config.php). Kartu masuk dengan animasi fade+slide bertahap (staggered) supaya grid terasa hidup saat halaman dibuka, tanpa butuh JavaScript apa pun. */ .product-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; cursor: pointer; transition: transform 0.3s cubic-bezier(.2,.8,.2,1); animation: pcFadeIn 0.55s cubic-bezier(.2,.8,.2,1) backwards; } @keyframes pcFadeIn { from { opacity: 0; transform: translateY(16px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .product-card:nth-child(1) { animation-delay: 0.02s; } .product-card:nth-child(2) { animation-delay: 0.06s; } .product-card:nth-child(3) { animation-delay: 0.10s; } .product-card:nth-child(4) { animation-delay: 0.14s; } .product-card:nth-child(5) { animation-delay: 0.18s; } .product-card:nth-child(6) { animation-delay: 0.22s; } .product-card:nth-child(7) { animation-delay: 0.26s; } .product-card:nth-child(8) { animation-delay: 0.30s; } .product-card:nth-child(9) { animation-delay: 0.34s; } .product-card:nth-child(10) { animation-delay: 0.38s; } .product-card:nth-child(n+11) { animation-delay: 0.4s; } .product-card:hover { transform: translateY(-5px) scale(1.015); z-index: 2; } .product-card:hover .pc-thumb { box-shadow: 0 16px 32px rgba(0,0,0,0.4), 0 0 0 1px var(--brand-glow), 0 0 22px var(--brand-glow); } .product-card:hover .pc-thumb img { transform: scale(1.1) rotate(0.3deg); } .product-card:hover .pc-name { color: var(--brand-light); } .product-card:active { transform: translateY(-2px) scale(0.98); } .pc-thumb { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 14px; overflow: hidden; background: var(--bg-card-2); box-shadow: var(--shadow-soft); transition: box-shadow 0.35s ease; } .pc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s cubic-bezier(.2,.8,.2,1); } /* Efek "kilau" (shine sweep) yang lewat pelan-pelan di atas thumbnail saat di-hover — bikin kartu terasa premium/mengkilap tanpa JS. */ .pc-thumb::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.28) 50%, transparent 60%); background-size: 220% 220%; background-position: 130% 130%; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .product-card:hover .pc-thumb::after { opacity: 1; animation: pcShine 1.1s ease forwards; } @keyframes pcShine { from { background-position: 130% 130%; } to { background-position: -30% -30%; } } /* Kartu yang sedang FLASH SALE dapat cincin gradien berputar pelan di sekeliling thumbnail supaya langsung mencolok dibanding kartu biasa. */ .product-card--flash .pc-thumb { box-shadow: 0 0 0 2px rgba(255,90,90,0.55), 0 10px 24px rgba(0,0,0,0.35); animation: fsThumbPulse 1.8s ease-in-out infinite; } @keyframes fsThumbPulse { 0%, 100% { box-shadow: 0 0 0 2px rgba(255,90,90,0.55), 0 10px 24px rgba(0,0,0,0.35); } 50% { box-shadow: 0 0 0 2px rgba(255,90,90,0.9), 0 10px 30px rgba(255,90,90,0.35); } } /* Fitur baru: tombol hati (favorit/wishlist) di pojok kartu produk */ .pc-fav-btn { position: absolute; top: 6px; right: 6px; z-index: 2; width: 28px; height: 28px; border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(20,18,14,0.55); backdrop-filter: blur(4px); color: #fff; cursor: pointer; transition: transform 0.2s ease, color 0.2s ease, background 0.2s ease; } .pc-fav-btn:hover { transform: scale(1.12); } .pc-fav-btn:active { transform: scale(0.92); } .pc-fav-btn.pc-fav-active { color: #e2536b; animation: pcFavPop 0.35s ease; } @keyframes pcFavPop { 0% { transform: scale(0.7); } 50% { transform: scale(1.25); } 100% { transform: scale(1); } } [data-theme="light"] .pc-fav-btn { background: rgba(255,255,255,0.75); color: #555; } [data-theme="light"] .pc-fav-btn.pc-fav-active { color: #e2536b; } .pc-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; width: 100%; max-width: 100%; overflow: hidden; text-align: center; color: var(--text-white); font-weight: 700; font-size: 13px; line-height: 1.32; letter-spacing: 0.1px; text-transform: uppercase; transition: color 0.25s ease; } /* ============ BADGE RIBBON (produk) ============ */ /* Ditempel di pojok kiri-atas thumbnail kalau admin memasang badge (HOT/TERLARIS/TERMURAH/BARU/DISKON/custom) di admin/produk-form.php, atau otomatis "POPULER" untuk produk yang ditandai populer. */ .product-badge-ribbon { position: absolute; top: 6px; left: 6px; z-index: 3; display: inline-flex; align-items: center; gap: 2px; padding: 2.5px 7px; border-radius: 999px; font-size: 9px; font-weight: 800; letter-spacing: 0.3px; line-height: 1.6; color: #1a1208; box-shadow: 0 2px 6px rgba(0,0,0,0.35); white-space: nowrap; } .product-badge-ribbon.badge-hot { background: linear-gradient(135deg, #ff8a3d, #ff5a5a); color: #fff; } .product-badge-ribbon.badge-terlaris { background: linear-gradient(135deg, #ffe08a, #ffc400); } .product-badge-ribbon.badge-termurah { background: linear-gradient(135deg, #b6f5b6, #7ee787); } .product-badge-ribbon.badge-baru { background: linear-gradient(135deg, #a9d2ff, #60a5fa); color: #0b2036; } .product-badge-ribbon.badge-diskon { background: linear-gradient(135deg, #f0c3ff, #d88dff); color: #2c0b3a; } .product-badge-ribbon.badge-custom { background: linear-gradient(135deg, #e7d3ae, var(--brand)); } /* Badge "Flash Sale" — beda gaya dari ribbon status biasa: gradien merah-oranye menyala dengan kilau bergerak (shimmer) & ikon kilat yang sedikit "berkedip", supaya jelas ini promo mendesak/waktu terbatas. */ .product-badge-ribbon.badge-flashsale { background: linear-gradient(120deg, #ff3d54, #ff7a30, #ff3d54); background-size: 220% 100%; color: #fff; animation: fsBadgeShimmer 2.2s linear infinite; box-shadow: 0 2px 10px rgba(255,61,84,0.55); } .fs-badge-bolt { width: 9px; height: 9px; flex-shrink: 0; animation: fsBoltFlicker 1.4s ease-in-out infinite; } @keyframes fsBadgeShimmer { 0% { background-position: 0% 50%; } 100% { background-position: 220% 50%; } } @keyframes fsBoltFlicker { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.65; transform: scale(0.88); } } /* Dipakai inline di sebelah judul produk (halaman detail), bukan ribbon absolut */ .pd-title-badge { position: static; display: inline-block; vertical-align: middle; margin-left: 8px; box-shadow: none; } /* ============ POPULER SEKARANG (section terpisah di beranda) ============ Grid 2 kolom berisi kartu horizontal (thumbnail + nama/publisher), meniru gaya kartu "produk populer" pada aplikasi top-up kebanyakan. Dipakai oleh renderPopularCard() di config.php. */ .popular-grid-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; } @media (min-width: 640px) { .popular-grid-2col { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } } @media (min-width: 1000px) { .popular-grid-2col { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .popular-card { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px; border-radius: 16px; background: var(--bg-card-2); box-shadow: var(--shadow-soft); cursor: pointer; overflow: hidden; transition: transform 0.3s cubic-bezier(.2,.8,.2,1), box-shadow 0.3s ease; animation: pcFadeIn 0.55s cubic-bezier(.2,.8,.2,1) backwards; } .popular-card:nth-child(1) { animation-delay: 0.02s; } .popular-card:nth-child(2) { animation-delay: 0.07s; } .popular-card:nth-child(3) { animation-delay: 0.12s; } .popular-card:nth-child(4) { animation-delay: 0.17s; } .popular-card:nth-child(5) { animation-delay: 0.22s; } .popular-card:nth-child(6) { animation-delay: 0.27s; } .popular-card:nth-child(7) { animation-delay: 0.32s; } .popular-card:nth-child(8) { animation-delay: 0.37s; } .popular-card:nth-child(n+9) { animation-delay: 0.4s; } .popular-card:hover { transform: translateY(-4px) scale(1.01); box-shadow: 0 14px 30px rgba(0,0,0,0.4), 0 0 0 1px var(--brand-glow), 0 0 20px var(--brand-glow); } .popular-card:active { transform: translateY(-1px) scale(0.99); } .popular-card:hover .poc-name { color: var(--brand-light); } .popular-card:hover .poc-thumb img { transform: scale(1.1); } /* Efek kilau (shine sweep) yang melintas pelan di seluruh kartu populer saat di-hover, senada dengan kartu grid produk. */ .popular-card::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.10) 50%, transparent 60%); background-size: 220% 220%; background-position: 130% 130%; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .popular-card:hover::after { opacity: 1; animation: pcShine 1.1s ease forwards; } /* Kartu populer yang sedang FLASH SALE dapat cincin gradien menyala di sekeliling kartu, senada dengan kartu grid "Semua Produk". */ .popular-card--flash { box-shadow: 0 0 0 2px rgba(255,90,90,0.5), var(--shadow-soft); animation: pcFadeIn 0.55s cubic-bezier(.2,.8,.2,1) backwards, fsCardPulse 1.8s ease-in-out infinite; } @keyframes fsCardPulse { 0%, 100% { box-shadow: 0 0 0 2px rgba(255,90,90,0.5), var(--shadow-soft); } 50% { box-shadow: 0 0 0 2px rgba(255,90,90,0.85), 0 0 22px rgba(255,90,90,0.35); } } .poc-thumb { position: relative; flex-shrink: 0; width: 56px; height: 56px; border-radius: 12px; overflow: hidden; background: var(--bg-card); } .poc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s cubic-bezier(.2,.8,.2,1); } /* Ribbon diskon di thumbnail kecil "Populer Sekarang" perlu lebih mungil supaya tidak menutupi gambar di kotak 56x56px (48x48px di mobile). */ .poc-thumb .product-badge-ribbon { top: 3px; left: 3px; padding: 1.5px 4px; font-size: 7px; border-radius: 6px; } .poc-thumb .product-badge-ribbon .fs-badge-bolt { width: 6px; height: 6px; } .poc-body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .poc-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-width: 100%; overflow: hidden; color: var(--text-white); font-weight: 800; font-size: 15px; line-height: 1.28; text-transform: uppercase; transition: color 0.25s ease; } .poc-publisher { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-muted); font-size: 12px; line-height: 1.3; } @media (max-width: 380px) { .popular-card { padding: 8px; gap: 10px; } .poc-thumb { width: 48px; height: 48px; border-radius: 10px; } .poc-name { font-size: 13.5px; } .poc-publisher { font-size: 11px; } } /* Hormati preferensi pengguna yang minta animasi diminimalkan — grid produk & section populer tetap tampil normal, cuma tanpa gerakan/kilau. */ @media (prefers-reduced-motion: reduce) { .product-card, .popular-card { animation: none !important; opacity: 1 !important; transform: none !important; } .pc-thumb::after, .popular-card::after { display: none !important; } .product-card--flash .pc-thumb, .popular-card--flash, .product-badge-ribbon.badge-flashsale, .fs-badge-bolt { animation: none !important; } } .show-more-btn { display: block; margin: 26px auto 0; padding: 12px 34px; border: 1.5px solid var(--brand); border-radius: 999px; background: transparent; color: var(--brand-light); font-weight: 600; font-size: 13.5px; letter-spacing: 0.2px; cursor: pointer; transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .show-more-btn:hover { background: rgba(198,168,120,0.1); box-shadow: 0 6px 16px var(--brand-glow); transform: translateY(-1px); } /* ============ NEWS SECTION ============ */ .news-header h2 { font-size: 22px; font-weight: 800; text-transform: uppercase; margin-bottom: 10px; } .news-header p { color: var(--text-muted); font-size: 14px; margin-bottom: 20px; max-width: 700px; } .news-grid { display: grid; grid-template-columns: 1fr; gap: 20px; } @media (min-width: 640px) { .news-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .news-grid { grid-template-columns: repeat(3, 1fr); } } .news-card { border-radius: var(--radius); overflow: hidden; background: var(--bg-card); } .news-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; } .news-card .news-body { padding: 14px; } .news-card h3 { font-size: 16px; font-weight: 600; margin-bottom: 10px; } .news-card hr { border: none; border-top: 1px solid var(--border-color); margin: 10px 0; } .news-card .author { font-size: 12px; color: var(--brand); font-weight: 600; } .news-card .headline { font-size: 12px; color: var(--text-muted); margin-top: 4px; } /* ============ FOOTER ============ */ .site-footer { background: var(--bg-dark); padding: 28px 20px 20px; border-top: 1px solid var(--border-color); } .footer-hero { background: var(--brand-gradient); border-radius: var(--radius); padding: 28px 20px; text-align: center; color: #ffffff; font-size: 21px; font-weight: 800; max-width: 1200px; margin: 0 auto 24px; letter-spacing: 0.5px; line-height: 1.4; } .footer-content { max-width: 1200px; margin: 0 auto; } .footer-brand { display: flex; align-items: center; gap: 10px; color: var(--brand); font-weight: 700; font-size: 22px; margin-bottom: 16px; } .footer-brand img { width: 40px; } .footer-desc { color: var(--text-muted); font-size: 14px; max-width: 600px; margin-bottom: 20px; } .newsletter-box { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; padding: 16px 18px; max-width: 460px; margin-bottom: 20px; } .newsletter-box h4 { color: var(--brand); margin: 0 0 6px; font-size: 15px; } .newsletter-form { display: flex; gap: 10px; flex-wrap: wrap; } .newsletter-form input[type="email"] { flex: 1 1 200px; padding: 12px 14px; background: var(--bg-card-2); border: 1px solid var(--border-color); border-radius: 10px; color: var(--text-white); font-size: 14px; } .newsletter-form .btn-primary { flex: 0 0 auto; padding: 12px 20px; } .newsletter-msg { margin-top: 10px; font-size: 13px; } .newsletter-msg.success { color: #3ec97a; } .newsletter-msg.error { color: #e05252; } .footer-social { display: flex; gap: 14px; margin-bottom: 30px; } .footer-social a { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--bg-card); color: var(--text-muted); transition: color 0.2s, background 0.2s; } .footer-social a:hover { color: var(--brand); background: var(--bg-card-2); } .footer-columns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; } @media (min-width: 640px) { .footer-columns { grid-template-columns: repeat(3, 1fr); } } .footer-columns h4 { color: var(--brand); font-size: 15px; font-weight: 700; margin-bottom: 16px; text-transform: uppercase; } .footer-columns ul { list-style: none; } .footer-columns ul li { margin-bottom: 12px; } .footer-columns ul li a { color: var(--text-white); font-size: 14px; } .footer-columns ul li a:hover { color: var(--brand); } .footer-bottom { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--text-muted); flex-wrap: wrap; gap: 10px; } /* ============ FLOATING CS BUTTON ============ */ .cs-float { position: fixed; bottom: 20px; right: 20px; width: 56px; height: 56px; border-radius: 16px; background: var(--brand-gradient); color: #ffffff; display: flex; align-items: center; justify-content: center; z-index: 200; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,0.4); transition: transform 0.2s ease, box-shadow 0.2s ease; } .cs-float:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0,0,0,0.45); } /* ============ TOMBOL KEMBALI KE ATAS ============ */ .back-to-top { position: fixed; bottom: 20px; right: 88px; width: 44px; height: 44px; border-radius: 14px; background: var(--bg-card); color: var(--text-white); border: 1px solid var(--border-color); display: flex; align-items: center; justify-content: center; z-index: 199; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,0.3); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s, border-color 0.2s ease, color 0.2s ease; } .back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top:hover { border-color: var(--brand); color: var(--brand-light); transform: translateY(-3px); } @media (max-width: 480px) { .back-to-top { width: 40px; height: 40px; bottom: 14px; right: 72px; } } /* ============ SIDE DRAWER MENU ============ */ .drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 300; display: none; } .drawer-overlay.active { display: block; } .drawer-menu { position: fixed; top: 0; left: 0; bottom: 0; width: 320px; max-width: 85vw; background: var(--bg-card); color: var(--text-white); z-index: 301; transform: translateX(-100%); transition: transform 0.25s ease; padding: 20px; overflow-y: auto; } .drawer-menu.active { transform: translateX(0); } .drawer-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid var(--border-color); margin-bottom: 10px; } .drawer-close { background: none; border: none; color: var(--text-white); font-size: 22px; cursor: pointer; } .drawer-link { display: flex; align-items: center; padding: 16px 4px; border-bottom: 1px solid var(--border-color); color: var(--text-white); font-size: 16px; font-weight: 500; cursor: pointer; letter-spacing: 0.3px; } .drawer-link:hover { color: var(--brand); } .drawer-link-dev { gap: 10px; color: var(--brand-light); } .drawer-link-dev svg { animation: devIconPulse 2.4s ease-in-out infinite; } @keyframes devIconPulse { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.15); opacity: 1; } } /* ============ PRODUCT DETAIL PAGE ============ */ .detail-wrap { max-width: 900px; margin: 20px auto; padding: 0 20px; } .detail-head { display: flex; gap: 16px; align-items: center; background: var(--bg-card); padding: 16px; border-radius: var(--radius); margin-bottom: 20px; } .detail-head img { width: 80px; height: 80px; border-radius: 12px; object-fit: cover; } .form-group { margin-bottom: 20px; } .form-group label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; color: var(--brand); } .form-group input, .form-group select { width: 100%; padding: 12px 14px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px; color: var(--text-white); font-size: 14px; } .item-list { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; } @media (min-width: 640px) { .item-list { grid-template-columns: repeat(3,1fr); } } .item-option { padding: 14px; border-radius: 12px; border: 1px solid var(--border-color); background: var(--bg-card); cursor: pointer; text-align: center; } .item-option.selected { border-color: var(--brand); background: rgba(176, 152, 114,0.1); } .item-option .item-name { font-weight: 600; font-size: 14px; margin-bottom: 6px; } .item-option .item-price { color: var(--brand); font-weight: 700; font-size: 14px; } .btn-primary { display: block; width: 100%; padding: 14px; border: none; border-radius: 12px; background: var(--brand-gradient); color: #ffffff; font-weight: 700; font-size: 15px; cursor: pointer; margin-top: 10px; position: relative; overflow: hidden; isolation: isolate; transition: transform 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 4px 14px rgba(176, 152, 114,0.25); } .btn-primary::after { content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent); transform: skewX(-20deg); transition: left 0.6s ease; z-index: 1; } .btn-primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(176, 152, 114,0.4); } .btn-primary:hover:not(:disabled)::after { left: 130%; } .btn-primary:active:not(:disabled) { transform: translateY(0); } .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; } /* ================= BANNER & HEAD ================= */ .pd-banner { width: 100%; aspect-ratio: 16/8; object-fit: cover; border-radius: 0 0 var(--radius) var(--radius); } .pd-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 20px; max-width: 900px; margin: 0 auto; } /* Kalau produk belum punya banner_image (admin belum upload), jangan tampilkan gambar placeholder besar yang kurang rapi — cukup beri jarak atas yang wajar dan lepas efek "menumpuk di atas banner" pada ikon. */ .pd-head-no-banner { padding-top: 26px; } .pd-head img.pd-icon { width: 108px; height: 108px; border-radius: 24px; object-fit: contain; background: var(--bg-card-2); margin-top: -50px; margin-bottom: 8px; border: 3px solid var(--bg-dark); box-shadow: var(--shadow-soft); flex-shrink: 0; } /* Kalau tidak ada banner_image, ".pd-head img.pd-icon" di atas (yang punya selector lebih spesifik: 2 class + 1 element) akan selalu menang atas ".pd-head-no-banner .pd-icon" (2 class saja) walau ditulis belakangan — akibatnya margin-top:-50px tetap kepakai dan ikon produk "naik" ke bawah header sticky lalu ikut terpotong olehnya. Naikkan spesifisitasnya di sini (3 class + 1 element) supaya reset margin-top INI yang menang. */ .pd-head.pd-head-no-banner img.pd-icon { margin-top: 0; } .pd-head .pd-title { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 7px; font-size: 21px; font-weight: 800; text-transform: none; } .pd-title-text { text-transform: uppercase; } .pd-verified-badge { width: 19px; height: 19px; color: var(--brand); flex-shrink: 0; } .pd-head .pd-publisher { color: var(--text-muted); font-size: 13px; margin-top: -1px; } .pd-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; font-size: 12.5px; font-weight: 600; color: var(--text-white); } .pd-trust span { display: flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; background: var(--bg-card-2); border: 1px solid var(--border-color); } .pd-trust-icon { width: 15px; height: 15px; flex-shrink: 0; color: var(--brand-light); } /* Animasi "kilatan petir" pada ikon Proses Instan: berkedip dan sedikit membesar seolah menyala, mirip efek petir pada referensi desain. */ .pd-trust-icon.icon-bolt { color: #ffd23f; animation: pdBoltFlash 1.8s ease-in-out infinite; } @keyframes pdBoltFlash { 0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 0 rgba(255, 210, 63, 0)); } 45% { opacity: 1; transform: scale(1.22) rotate(-6deg); filter: drop-shadow(0 0 6px rgba(255, 210, 63, 0.85)); } 60% { opacity: 0.55; transform: scale(0.92) rotate(4deg); filter: drop-shadow(0 0 1px rgba(255, 210, 63, 0.4)); } } .pd-hero-desc { margin-top: 16px; max-width: 560px; } .pd-hero-desc p { margin: 0; color: var(--text-muted); font-size: 13px; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .pd-hero-desc-more { display: inline-block; margin-top: 6px; color: var(--brand); font-weight: 700; font-size: 13px; cursor: pointer; } .pd-hero-desc-more:hover { color: var(--brand-light); } /* Tabs Transaksi / Keterangan */ .pd-tabs { display: flex; gap: 10px; max-width: 900px; margin: 0 auto 20px; padding: 0 20px; } .pd-tab-btn { flex: 1; text-align: center; padding: 14px; border-radius: 12px; background: var(--bg-card); font-weight: 600; font-size: 15px; cursor: pointer; border: none; color: var(--text-white); } .pd-tab-btn.active { background: var(--brand-gradient); color: #ffffff; } .pd-tab-panel { display: none; } .pd-tab-panel.active { display: block; } /* Step blocks */ .step-block { max-width: 900px; margin: 0 auto 20px; padding: 0 20px; } .step-header { display: flex; align-items: center; border-radius: 14px 14px 0 0; overflow: hidden; background: var(--bg-card-2); } .step-number { width: 44px; height: 44px; flex-shrink: 0; background: var(--brand-gradient); color: #ffffff; font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 16px; } .step-title { padding: 12px 16px; font-weight: 700; font-size: 15px; letter-spacing: 0.1px; } .step-header:not(:has(.step-number)) .step-title { border-left: 3px solid var(--brand); } .step-body { background: var(--bg-card); border-radius: 0 0 14px 14px; box-shadow: var(--shadow-soft); padding: 16px; } .account-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .account-fields.single { grid-template-columns: 1fr; } .account-fields label { display:flex; align-items:center; gap:6px; font-size: 13px; color: var(--text-muted); margin-bottom: 6px; } .account-fields input { width: 100%; padding: 12px 14px; background: var(--bg-card-2); border: 1px solid var(--border-color); border-radius: 10px; color: var(--text-white); font-size: 14px; } .field-error { margin-top: 10px; padding: 10px 14px; border: 1px solid #a33; background: rgba(163,51,51,0.15); color: #ff8080; border-radius: 8px; font-size: 13px; font-style: italic; display: none; } .field-error.show { display: flex; align-items:center; justify-content: space-between; } .nickname-check { margin-top: 10px; padding: 10px 14px; border-radius: 8px; font-size: 13px; display: none; align-items: center; gap: 8px; } .nickname-check.show { display: flex; } .nickname-check.loading { border: 1px solid var(--border-color); background: rgba(255,255,255,0.04); color: var(--text-muted); } .nickname-check.success { border: 1px solid #2e8b57; background: rgba(46,139,87,0.15); color: #7be0a5; } .nickname-check.error { border: 1px solid #a33; background: rgba(163,51,51,0.15); color: #ff8080; } /* Badge deteksi otomatis operator (khusus produk Pulsa/Paket Data) */ .operator-check { margin-top: 10px; padding: 10px 14px; border-radius: 8px; font-size: 13px; display: none; align-items: center; gap: 10px; } .operator-check.show { display: flex; } .operator-check.match { border: 1px solid #2e8b57; background: rgba(46,139,87,0.15); color: #7be0a5; } .operator-check.mismatch { border: 1px solid #c99a2e; background: rgba(201,154,46,0.15); color: #f0c766; } .operator-check-logo { width: 26px; height: 26px; border-radius: 6px; object-fit: cover; flex-shrink: 0; background: rgba(255,255,255,0.08); } .operator-check-text { flex: 1; } .operator-check-link { color: inherit; font-weight: 600; text-decoration: underline; white-space: nowrap; } /* Nominal grid */ .special-label { font-weight: 600; font-size: 14px; margin-bottom: 12px; } .nominal-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; } .nominal-search-box { flex: 1 1 180px; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; background: var(--bg-card-2); border: 1px solid var(--border-color); } .nominal-search-box svg { width: 17px; height: 17px; color: var(--text-muted); flex-shrink: 0; } .nominal-search-box input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--text-white); font-family: inherit; font-size: 13.5px; } .nominal-search-box input::placeholder { color: var(--text-muted); } .nominal-view-toggle { display: flex; gap: 6px; flex-shrink: 0; } .nv-btn { width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--border-color); background: var(--bg-card-2); color: var(--text-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; } .nv-btn svg { width: 17px; height: 17px; } .nv-btn.active { background: var(--brand-gradient); color: #241a0a; border-color: transparent; box-shadow: 0 4px 12px var(--brand-glow); } .nominal-search-empty { display: none; color: var(--text-muted); font-size: 13px; padding: 14px 0; text-align: center; } .nominal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; } @media (min-width: 640px) { .nominal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Tampilan daftar (list): satu kolom, tiap item jadi baris memanjang dengan harga rata kanan -- ditoggle lewat JS (menambah class .view-list). */ .nominal-grid.view-list { grid-template-columns: 1fr; } .nominal-card { display: grid; grid-template-columns: 30px 1fr; column-gap: 9px; row-gap: 2px; min-width: 0; border-radius: 12px; padding: 10px 12px; background: var(--bg-card-2); border: 1px solid var(--border-color); box-shadow: 0 2px 8px rgba(0,0,0,0.08); cursor: pointer; position: relative; } .nominal-card.selected { border-color: var(--brand); background: rgba(176, 152, 114,0.12); } .n-icon { grid-column: 1; grid-row: 1 / 3; width: 30px; height: 30px; border-radius: 9px; object-fit: cover; align-self: start; background: var(--bg-card); } .nominal-card .n-name { grid-column: 2; grid-row: 1; font-size: 12px; font-weight: 600; color: var(--text-white); line-height: 1.25; align-self: end; text-transform: uppercase; min-width: 0; overflow-wrap: break-word; word-break: break-word; } .nominal-card .n-code { grid-column: 2; grid-row: 2; font-size: 10px; font-weight: 500; color: var(--text-muted); letter-spacing: 0.2px; min-width: 0; overflow-wrap: break-word; word-break: break-word; } .nominal-card .n-price-wrap { grid-column: 1 / -1; margin-top: 8px; } .nominal-card .n-price { color: var(--brand); font-weight: 700; font-size: 13.5px; display:flex; align-items:center; gap:6px; } .nominal-card .n-strike { color: var(--text-muted); font-size: 10.5px; text-decoration: line-through; margin-left: 4px; } /* Tampilan daftar: ikon+nama+kode di kiri, harga rata kanan di baris yang sama, meniru referensi (satu baris per item, bukan kartu kotak). */ .nominal-grid.view-list .nominal-card { grid-template-columns: 34px 1fr auto; align-items: center; } .nominal-grid.view-list .n-icon { grid-row: 1 / 3; } .nominal-grid.view-list .n-price-wrap { grid-column: 3; grid-row: 1 / 3; margin-top: 0; text-align: right; } .nominal-grid.view-list .instant-badge { margin-top: 4px; } @media (max-width: 400px) { .nominal-grid { gap: 8px; } .nominal-card { padding: 9px 10px; column-gap: 8px; } .n-icon { width: 26px; height: 26px; border-radius: 8px; } .nominal-card .n-name { font-size: 11px; } .nominal-card .n-code { font-size: 9.5px; } .nominal-card .n-price { font-size: 12.5px; } .instant-badge { font-size: 9px; padding: 3px 6px; } } .instant-badge { display: inline-flex; align-items: center; gap: 4px; background: var(--brand-gradient); color: #241a0a; font-size: 9.5px; font-weight: 800; padding: 3px 7px; border-radius: 6px; margin-top: 8px; letter-spacing: 0.2px; } /* Quantity stepper */ .qty-stepper { display: flex; align-items: center; gap: 10px; } .qty-stepper input { flex: 1; padding: 12px 14px; background: var(--bg-card-2); border: 1px solid var(--border-color); border-radius: 10px; color: var(--text-white); font-size: 14px; text-align: center; } .qty-btn { width: 46px; height: 46px; border-radius: 10px; background: var(--brand-gradient); border: none; color: #ffffff; font-size: 20px; font-weight: 700; cursor: pointer; flex-shrink: 0; } /* Payment categories */ .pay-category { position: relative; border-radius: 12px; background: var(--bg-card-2); border: 1px solid var(--border-color); margin-bottom: 12px; overflow: hidden; cursor: pointer; } .pay-category.selected { border-color: var(--brand); } .pay-category-head { display: flex; align-items: center; justify-content: space-between; padding: 16px; } .pay-category-left { display: flex; align-items: center; gap: 12px; } .pay-icon-circle { width: 40px; height: 40px; border-radius: 50%; background: var(--brand-gradient); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; color: #ffffff; letter-spacing: 0; } .pay-name { font-weight: 600; font-size: 14px; } .pay-limit { font-size: 12px; color: #ff8a8a; margin-top: 4px; } .best-price-ribbon { position: absolute; top: 10px; right: -30px; background: var(--brand-gradient); color: #ffffff; font-size: 10px; font-weight: 800; padding: 4px 34px; transform: rotate(35deg); } .pay-logos { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 16px; } .pay-logos span { background: #fff; color: #222; font-size: 10px; font-weight: 700; padding: 6px 10px; border-radius: 6px; } .pay-category-body { display: none; padding: 0 16px 16px; flex-direction: column; gap: 8px; } .pay-category-body.open { display: flex; } .pay-chevron { transition: transform 0.2s; } .pay-chevron.rotated { transform: rotate(180deg); } .pay-method-item { display: flex; align-items: center; justify-content: space-between; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; padding: 10px 12px; cursor: pointer; } .pay-method-item.selected { border-color: var(--brand); background: rgba(176, 152, 114, 0.1); } .pay-method-item.pay-method-disabled { opacity: 0.45; cursor: not-allowed; } .pay-method-name { font-size: 13px; font-weight: 600; } .pay-method-fee { font-size: 11px; color: var(--text-muted); } .pay-method-hint { font-size: 11px; color: #ff8a8a; margin-left: 8px; white-space: nowrap; } /* Contact fields */ .contact-note { display: flex; gap: 10px; background: var(--bg-card-2); border-radius: 10px; padding: 12px 14px; font-size: 13px; color: var(--text-muted); margin-top: 10px; } .phone-input { display: flex; gap: 8px; } .phone-flag { display: flex; align-items: center; gap: 6px; padding: 0 12px; background: var(--bg-card-2); border: 1px solid var(--border-color); border-radius: 10px; font-size: 14px; flex-shrink: 0; } /* Promo */ .promo-input-group { display: flex; gap: 10px; margin-bottom: 12px; } .promo-input-wrap { flex: 1; display: flex; align-items: center; gap: 10px; padding: 0 14px; background: var(--bg-card-2); border: 1px solid var(--border-color); border-radius: 10px; color: var(--text-muted); min-width: 0; } .promo-input-wrap:focus-within { border-color: var(--brand); } .promo-input-wrap svg { flex-shrink: 0; color: var(--brand); } .promo-input-wrap input { flex: 1; min-width: 0; border: none; background: transparent; padding: 12px 0; color: var(--text-white); font-size: 14px; font-family: inherit; outline: none; } .btn-outline-gold { padding: 12px 20px; border-radius: 10px; border: 1px solid var(--brand); background: transparent; color: var(--brand); font-weight: 600; cursor: pointer; white-space: nowrap; } .btn-promo-apply { padding: 0 22px; border-radius: 10px; border: none; background: var(--brand-gradient); color: #ffffff; font-weight: 700; font-size: 14px; cursor: pointer; white-space: nowrap; flex-shrink: 0; } .btn-promo-apply:hover { filter: brightness(1.06); } .btn-block-outline { display: flex; align-items: center; gap: 8px; justify-content: center; width: 100%; padding: 12px; border-radius: 10px; border: 1px dashed var(--brand); background: rgba(176, 152, 114, 0.06); color: var(--brand); font-weight: 600; font-size: 13.5px; cursor: pointer; } .btn-block-outline:hover { background: rgba(176, 152, 114, 0.12); } .btn-block-outline span { flex-shrink: 0; } .promo-chevron { margin-left: auto; transition: transform 0.2s ease; flex-shrink: 0; } .promo-chevron.rotated { transform: rotate(180deg); } .help-box { display: flex; align-items: center; gap: 14px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; padding: 14px 16px; margin: 16px auto 0; font-size: 14px; max-width: 900px; text-decoration: none; color: inherit; transition: border-color 0.2s ease, transform 0.15s ease; } .help-box:hover { border-color: var(--brand); transform: translateY(-1px); } .help-box-icon { width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; background: var(--brand-gradient); color: #ffffff; display: flex; align-items: center; justify-content: center; } .help-box-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .help-box-text strong { font-size: 14.5px; } .help-box-text span { font-size: 12.5px; color: var(--text-muted); } .help-box-arrow { color: var(--brand); flex-shrink: 0; } .promo-list { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; max-height: 240px; overflow-y: auto; } .promo-list-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--bg-card-2); border: 1px dashed var(--brand); border-radius: 10px; padding: 10px 12px; cursor: pointer; color: var(--text-white); transition: background 0.15s ease; } .promo-list-item:hover { background: rgba(176, 152, 114, 0.12); } .promo-code-tag { display: flex; align-items: center; gap: 6px; flex-shrink: 0; color: var(--brand); } .promo-list-item .promo-code { font-weight: 700; color: var(--brand); flex-shrink: 0; } .promo-list-item .promo-desc { font-size: 12px; color: var(--text-muted); text-align: right; } .promo-list-empty { font-size: 13px; color: var(--text-muted); padding: 8px 0; } /* Sticky bottom bar */ .sticky-bottom { position: sticky; bottom: 0; left: 0; width: 100%; background: var(--bg-dark); padding: 14px 20px 20px; border-top: 1px solid var(--border-color); box-shadow: 0 -8px 20px rgba(0,0,0,0.15); z-index: 50; /* Naikkan ke layer GPU sendiri supaya tidak "tembus pandang"/tabrakan dengan konten yang di-scroll di bawahnya -- glitch compositing yang cukup umum untuk position:sticky di Chrome Android. */ transform: translateZ(0); isolation: isolate; } .sticky-bottom > * { max-width: 900px; margin: 0 auto; } .summary-box { border: 1px dashed var(--border-color); border-radius: 10px; padding: 12px; text-align: center; font-size: 13px; color: var(--text-muted); margin-bottom: 12px; } .summary-box.has-item { color: var(--text-white); display: flex; justify-content: space-between; align-items: center; border-style: solid; } .summary-box .summary-total { color: var(--brand); font-weight: 700; font-size: 16px; } /* Deskripsi tab */ .desc-block { max-width: 900px; margin: 0 auto 20px; padding: 0 20px; } .desc-body { background: var(--bg-card); border-radius: 0 0 10px 10px; padding: 16px; font-size: 14px; color: var(--text-white); white-space: pre-line; } /* Ulasan */ .rating-summary { text-align: center; padding: 16px; } .rating-summary .big-star { font-size: 30px; } .rating-summary .rating-number { font-size: 26px; font-weight: 800; } .rating-summary .rating-out { color: var(--text-muted); font-size: 16px; } .rating-summary .rating-desc { color: var(--text-muted); font-size: 13px; margin-top: 6px; } .rating-bars { padding: 0 16px 16px; } .rating-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 13px; } .rating-bar-row .bar-track { flex: 1; height: 8px; border-radius: 6px; background: var(--border-color); overflow: hidden; } .rating-bar-row .bar-fill { height: 100%; background: var(--brand); } .rating-bar-row .bar-count { width: 50px; text-align: right; color: var(--text-muted); } .review-item { padding: 16px; border-bottom: 1px solid var(--border-color); } .review-item:last-child { border-bottom: none; } .review-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .review-name { font-weight: 600; font-size: 14px; } .review-stars { color: var(--brand); font-size: 13px; } .review-item-name { color: var(--text-muted); font-size: 13px; margin-bottom: 4px; } .review-date { color: var(--text-muted); font-size: 12px; } .review-quote { font-style: italic; font-size: 14px; } /* FAQ accordion */ .faq-section { max-width: 900px; margin: 20px auto; padding: 0 20px; } .faq-title { font-size: 18px; font-weight: 700; margin-bottom: 16px; } .faq-item { background: var(--bg-card); border-radius: 10px; margin-bottom: 10px; overflow: hidden; } .faq-question { display: flex; justify-content: space-between; align-items: center; padding: 16px; cursor: pointer; font-weight: 600; font-size: 14px; } .faq-answer { display: grid; grid-template-rows: 0fr; overflow: hidden; opacity: 0; padding: 0 16px; color: var(--text-muted); font-size: 13px; transition: grid-template-rows 0.3s ease, opacity 0.25s ease, padding 0.3s ease; } .faq-item.open .faq-answer { grid-template-rows: 1fr; opacity: 1; padding: 0 16px 16px; } .faq-item.open .faq-chevron { transform: rotate(180deg); } .faq-chevron { transition: transform 0.2s; } /* ============ HEADER: SALDO BADGE (login state) ============ */ .balance-badge { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 16px; background: rgba(176, 152, 114, 0.12); border: 1px solid var(--brand); color: var(--brand); font-size: 12px; font-weight: 700; white-space: nowrap; flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* ============ DRAWER: USER CARD (login state) ============ */ .drawer-user { display: flex; align-items: center; gap: 12px; padding: 14px 4px; margin-bottom: 6px; border-bottom: 1px solid var(--border-color); } .drawer-user-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--brand-gradient); color: #ffffff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; flex-shrink: 0; } .drawer-user-name { font-weight: 700; font-size: 15px; } /* ============ AUTH PAGES (login / register) ============ */ .auth-wrap { display: flex; justify-content: center; } .auth-card { width: 100%; max-width: 440px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 28px 22px; animation: authCardIn 0.5s cubic-bezier(.22,.61,.36,1); } @keyframes authCardIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .auth-card { animation: none; } } .auth-title { font-size: 20px; font-weight: 800; margin-bottom: 6px; } .auth-subtitle { font-size: 13px; color: var(--text-muted); margin-bottom: 22px; } /* Halaman login admin: full-viewport, glass-card, aksen emas */ .admin-login-wrap { min-height: 100vh; align-items: center; padding: 24px; background: radial-gradient(circle at 20% 15%, rgba(176,152,114,0.12), transparent 45%), radial-gradient(circle at 80% 85%, rgba(176,152,114,0.08), transparent 45%); } .admin-login-card { position: relative; text-align: center; padding: 40px 32px 34px; box-shadow: 0 24px 60px -24px rgba(0,0,0,0.65); } .admin-login-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: var(--radius) var(--radius) 0 0; background: var(--brand-gradient); } .admin-login-card .form-group { text-align: left; } .admin-login-card .btn-primary { margin-top: 6px; } .auth-switch { margin-top: 18px; text-align: center; font-size: 13px; color: var(--text-muted); } .auth-switch a { color: var(--brand); font-weight: 600; } /* ============ VERIFY EMAIL BANNER ============ */ .verify-email-banner { background: rgba(176, 152, 114, 0.14); border-bottom: 1px solid rgba(176, 152, 114, 0.35); color: var(--text-white); font-size: 13px; text-align: center; padding: 10px 16px; } .verify-email-banner a { color: var(--brand); font-weight: 700; margin-left: 6px; text-decoration: underline; } /* ============ ALERT ============ */ .alert { border-radius: 10px; padding: 12px 14px; font-size: 13px; margin-bottom: 18px; line-height: 1.5; } .alert-error { background: rgba(163, 51, 51, 0.15); border: 1px solid #a33; color: #ff8080; } .alert-success { background: rgba(126, 231, 135, 0.12); border: 1px solid #3a7d44; color: #7ee787; } /* ============ SALDO PAGE ============ */ .balance-hero { background: var(--brand-gradient); border-radius: var(--radius); padding: 24px 20px; margin-bottom: 20px; color: #ffffff; text-align: center; } .balance-hero-label { font-size: 13px; font-weight: 600; opacity: 0.75; } .balance-hero-amount { font-size: 30px; font-weight: 800; margin: 6px 0; } .balance-hero-name { font-size: 13px; font-weight: 600; opacity: 0.8; } .loyalty-card { display: flex; align-items: center; gap: 14px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 20px; position: relative; overflow: hidden; } .loyalty-card::before { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(120deg, transparent, rgba(176, 152, 114,0.16), transparent); animation: loyaltyShine 5s ease-in-out infinite; pointer-events: none; } @keyframes loyaltyShine { 0% { left: -60%; } 45% { left: 130%; } 100% { left: 130%; } } .loyalty-card-icon { flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; background: var(--brand-gradient); color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 20px; box-shadow: 0 4px 14px rgba(176, 152, 114,0.35); } .loyalty-card-info { position: relative; z-index: 1; } .loyalty-card-label { font-size: 12px; color: var(--text-muted); font-weight: 600; } .loyalty-card-amount { font-size: 20px; font-weight: 800; color: var(--brand-light); margin: 2px 0; } .loyalty-card-hint { font-size: 12px; color: var(--text-muted); } .saldo-hint { font-size: 13px; color: var(--text-muted); background: var(--bg-card-2); border: 1px dashed var(--border-color); border-radius: 10px; padding: 10px 12px; margin-bottom: 14px; } .saldo-hint a { color: var(--brand); font-weight: 600; } .deposit-history-item { display: flex; justify-content: space-between; align-items: center; padding: 14px 4px; border-bottom: 1px solid var(--border-color); cursor: pointer; } .deposit-history-item:last-child { border-bottom: none; } .deposit-history-invoice { font-weight: 600; font-size: 14px; } .deposit-history-date { font-size: 12px; color: var(--text-muted); margin-top: 2px; } .deposit-history-amount { font-weight: 700; font-size: 14px; } .deposit-history-status { font-size: 12px; margin-top: 2px; } .deposit-history-status.status-pending { color: #e0b84a; } .deposit-history-status.status-success { color: #7ee787; } .deposit-history-status.status-expired, .deposit-history-status.status-failed, .deposit-history-status.status-cancelled { color: #ff8a8a; } /* ========================================================= HALAMAN INFORMASI (Artikel, Leaderboard, Kalkulator, dst) ========================================================= */ .page-header { margin-bottom: 20px; } .page-header h2 { font-size: 22px; font-weight: 800; margin-bottom: 6px; } .page-header p { color: var(--text-muted); font-size: 14px; } .article-content { font-size: 14px; color: var(--text-white); line-height: 1.8; } .article-content h3 { font-size: 16px; font-weight: 700; color: var(--brand-light); margin: 20px 0 8px; } .article-content p { margin-bottom: 10px; } .article-content a { color: var(--brand); text-decoration: underline; } .contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .contact-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 16px; display: block; } .contact-card-title { font-weight: 700; color: var(--brand-light); margin-bottom: 4px; } .contact-card-desc { font-size: 13px; color: var(--text-muted); } .review-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; } .review-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; } .review-card-name { font-weight: 700; } .review-card-stars { color: var(--brand); letter-spacing: 2px; } .review-card-product { font-size: 13px; color: var(--text-muted); margin-bottom: 8px; } .review-card-product a { color: var(--brand); } .review-card-comment { font-size: 14px; } .rank-badge { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--bg-card-2); font-weight: 700; font-size: 13px; } .rank-badge.rank-1 { background: var(--brand-gradient); color: #ffffff; } .rank-badge.rank-2 { background: #b0b0b0; color: #1a1a1a; } .rank-badge.rank-3 { background: #a9825a; color: #1a1a1a; } .calc-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 18px; } .calc-card .form-group:last-child { margin-bottom: 0; } /* ========================================================= PANEL ADMIN ========================================================= */ .admin-body { background: var(--bg-dark); } .admin-shell { display: flex; min-height: 100vh; } .admin-sidebar { width: 240px; flex-shrink: 0; background: var(--bg-card); border-right: 1px solid var(--border-color); padding: 20px 16px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; box-shadow: 4px 0 24px -18px rgba(0,0,0,0.6); } .admin-logo { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 24px; } .admin-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; } .admin-nav-link { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--text-muted); transition: background .15s ease, color .15s ease; } .admin-nav-icon { flex-shrink: 0; opacity: 0.85; } .admin-nav-link:hover { background: var(--bg-card-2); color: var(--text-white); } .admin-nav-link.active { background: var(--brand-gradient); color: #ffffff; box-shadow: 0 6px 16px -6px rgba(176,152,114,0.6); } .admin-nav-link.active .admin-nav-icon { opacity: 1; } .admin-sidebar-footer { display: flex; flex-direction: column; gap: 4px; padding-top: 12px; border-top: 1px solid var(--border-color); } .admin-logout { color: #ff8a8a; } .admin-main { flex: 1; min-width: 0; } .admin-topbar { display: flex; align-items: center; gap: 14px; padding: 16px 24px; border-bottom: 1px solid var(--border-color); position: sticky; top: 0; background: var(--bg-dark); z-index: 20; } .admin-topbar .icon-btn { display: none; } .admin-page-title { font-size: 18px; font-weight: 800; flex: 1; } .admin-user-chip { font-size: 12px; font-weight: 600; color: var(--brand); background: rgba(176, 152, 114,0.12); padding: 6px 12px; border-radius: 999px; } .admin-maint-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: #ffb44d; background: rgba(255,180,77,0.12); border: 1px solid rgba(255,180,77,0.3); padding: 6px 12px; border-radius: 999px; text-decoration: none; white-space: nowrap; } .admin-maint-dot { width: 7px; height: 7px; border-radius: 50%; background: #ffb44d; box-shadow: 0 0 0 rgba(255,180,77,0.6); animation: adminMaintPulse 1.8s infinite; } @keyframes adminMaintPulse { 0% { box-shadow: 0 0 0 0 rgba(255,180,77,0.6); } 70% { box-shadow: 0 0 0 6px rgba(255,180,77,0); } 100% { box-shadow: 0 0 0 0 rgba(255,180,77,0); } } .admin-content { padding: 20px 24px; max-width: 1100px; } .admin-dash-greeting { margin-bottom: 18px; } .admin-dash-greeting h2 { font-size: 20px; font-weight: 800; margin-bottom: 2px; } .admin-dash-greeting p { font-size: 13px; color: var(--text-muted); } .admin-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; } .admin-stat-card { position: relative; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 16px; box-shadow: 0 10px 24px -18px rgba(0,0,0,0.5); transition: transform .15s ease, box-shadow .15s ease; } .admin-stat-card:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -16px rgba(0,0,0,0.55); } .admin-stat-icon { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; background: rgba(176,152,114,0.14); color: var(--brand); } .admin-stat-card.accent-gold .admin-stat-icon { background: rgba(176,152,114,0.16); color: var(--brand); } .admin-stat-card.accent-blue .admin-stat-icon { background: rgba(96,165,250,0.14); color: #60a5fa; } .admin-stat-card.accent-green .admin-stat-icon { background: rgba(126,231,135,0.14); color: #7ee787; } .admin-stat-card.accent-purple .admin-stat-icon { background: rgba(216,141,255,0.14); color: #d88dff; } .admin-stat-card.accent-red .admin-stat-icon { background: rgba(255,138,138,0.14); color: #ff8a8a; } .admin-stat-value { font-size: 24px; font-weight: 800; color: var(--brand-light); } .admin-stat-label { font-size: 12px; color: var(--text-muted); margin-top: 4px; } .admin-panel { position: relative; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 22px 20px 20px; margin-bottom: 22px; box-shadow: 0 10px 30px -18px rgba(0,0,0,0.55); overflow: hidden; } .admin-panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--brand-gradient); opacity: 0.85; } .admin-panel-title { font-size: 16px; font-weight: 700; margin-bottom: 6px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; } .admin-panel-title::before { content: ''; display: inline-block; width: 4px; height: 15px; border-radius: 3px; background: var(--brand-gradient); margin-right: 4px; } .admin-panel-desc { font-size: 13px; color: var(--text-muted); margin-bottom: 16px; } .admin-quick-actions { display: flex; flex-wrap: wrap; gap: 10px; } .btn-secondary { display: inline-block; padding: 12px 18px; border: 1px solid var(--border-color); border-radius: 12px; background: var(--bg-card-2); color: var(--text-white); font-weight: 700; font-size: 14px; cursor: pointer; text-decoration: none; text-align: center; } .admin-quick-actions .btn-primary, .admin-quick-actions .btn-secondary, .admin-actions-bar .btn-primary, .admin-actions-bar .btn-secondary { width: auto; display: inline-block; margin-top: 0; } .admin-actions-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .sync-steps { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; font-size: 13px; font-weight: 700; color: var(--text-muted); } .sync-step { padding: 6px 14px; border-radius: 999px; background: var(--bg-card-2); } .sync-step.active { background: var(--brand-gradient); color: #ffffff; } .sync-step-arrow { color: var(--border-color); } .select-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; } .check-card { display: flex; align-items: flex-start; gap: 10px; background: var(--bg-card-2); border: 1px solid var(--border-color); border-radius: 12px; padding: 12px; cursor: pointer; } .check-card input[type="checkbox"] { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--brand); flex-shrink: 0; } .check-card-title { display: block; font-weight: 700; font-size: 14px; } .check-card-meta { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; } .admin-search-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .admin-search-bar input[type="text"] { flex: 1; min-width: 180px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--bg-card-2); color: var(--text-white); } .admin-search-bar-cta { width: auto; margin-top: 0; margin-left: auto; } .admin-inline-add-form { display: flex; gap: 10px; } .admin-inline-add-form input[type="text"] { flex: 1; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--bg-card-2); color: var(--text-white); } /* Baris reset (reset per kategori + reset semua) di admin/produk.php */ .admin-reset-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; } .admin-reset-category-form { flex: 1; min-width: 260px; margin: 0; } .admin-select { flex: 1; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--bg-card-2); color: var(--text-white); font-size: 13px; } /* Bar aksi hapus produk massal */ .admin-bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 14px 20px; } .admin-bulk-select-all { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-white); cursor: pointer; } .admin-bulk-select-all input { width: 16px; height: 16px; accent-color: var(--brand); } .admin-bulk-count { font-size: 13px; color: var(--text-muted); } .admin-bulk-bar .btn-danger { margin-left: auto; } .admin-bulk-bar .btn-danger:disabled { opacity: 0.4; cursor: not-allowed; } /* Tombol reset kecil per baris kategori di admin/kategori.php */ .btn-reset-mini { border: 1px solid rgba(255,196,0,0.35); background: rgba(255,196,0,0.1); color: #ffc400; border-radius: 8px; padding: 6px 12px; font-size: 12px; font-weight: 700; cursor: pointer; } .btn-reset-mini:hover { background: rgba(255,196,0,0.18); } .admin-table-wrap { overflow-x: auto; } .admin-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 640px; } .admin-table th { text-align: left; padding: 10px 12px; color: var(--text-muted); font-weight: 600; border-bottom: 1px solid var(--border-color); white-space: nowrap; } .admin-table td { padding: 10px 12px; border-bottom: 1px solid var(--border-color); vertical-align: middle; } .admin-table tbody tr { transition: background .15s ease; } .admin-table tbody tr:hover { background: var(--brand-glow); } .admin-table tr:last-child td { border-bottom: none; } .admin-table-title { font-weight: 700; } .admin-table-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; } .admin-table-empty { text-align: center; color: var(--text-muted); padding: 24px 0; } .admin-order-input { width: 64px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-dark); color: var(--text-white); text-align: center; } .inline-form { display: inline-block; } .badge-btn { border: none; border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 700; cursor: pointer; letter-spacing: 0.2px; } .badge-btn-on { background: rgba(126,231,135,0.15); color: #7ee787; box-shadow: 0 0 0 1px rgba(126,231,135,0.18) inset; } .badge-btn-off { background: rgba(255,138,138,0.15); color: #ff8a8a; box-shadow: 0 0 0 1px rgba(255,138,138,0.18) inset; } /* Badge kecil di tabel admin (preview badge produk) */ .mini-badge { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.3px; white-space: nowrap; } .mini-badge-hot { background: rgba(255,90,90,0.18); color: #ff5a5a; } .mini-badge-terlaris { background: rgba(255,196,0,0.18); color: #ffc400; } .mini-badge-termurah { background: rgba(126,231,135,0.18); color: #7ee787; } .mini-badge-baru { background: rgba(96,165,250,0.18); color: #60a5fa; } .mini-badge-diskon { background: rgba(216,141,255,0.18); color: #d88dff; } .mini-badge-custom { background: rgba(176,152,114,0.22); color: var(--brand); } .admin-link-danger { background: none; border: none; color: #ff8a8a; font-size: 13px; font-weight: 600; cursor: pointer; } .btn-danger { display: inline-block; padding: 10px 16px; border: 1px solid rgba(255,138,138,0.35); border-radius: 12px; background: rgba(255,138,138,0.1); color: #ff8a8a; font-weight: 700; font-size: 13px; cursor: pointer; } .btn-danger:hover { background: rgba(255,138,138,0.18); } .admin-link-back { color: var(--brand); font-weight: 600; font-size: 14px; } .admin-link { color: var(--brand); font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; } /* ============ ADMIN FORM (produk manual, promo, banner, artikel) ============ */ .admin-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; } .admin-form-grid .form-group.full { grid-column: 1 / -1; } .admin-form-grid .admin-checkbox-row.full { grid-column: 1 / -1; } .admin-panel .form-group { margin-bottom: 0; } .admin-panel .form-group textarea { width: 100%; padding: 12px 14px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px; color: var(--text-white); font-size: 14px; font-family: inherit; resize: vertical; } .admin-checkbox-row { display: flex; align-items: center; gap: 8px; padding-top: 30px; } .admin-checkbox-row input { width: auto; } .admin-checkbox-row label { margin: 0; color: var(--text-white); font-weight: 500; font-size: 14px; } .server-auto-badge { display: inline-flex; align-items: center; gap: 4px; background: rgba(176, 152, 114, 0.15); color: var(--brand); font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; margin-left: 4px; } .admin-form-actions { grid-column: 1 / -1; display: flex; gap: 10px; margin-top: 6px; } .admin-form-actions .btn-primary, .admin-form-actions .btn-secondary { width: auto; margin-top: 0; } .admin-form-note { font-size: 12px; color: var(--text-muted); margin-top: -6px; } /* ============ ADMIN REPORT (laporan.php) ============ */ .admin-report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-bottom: 20px; } .admin-bar-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13px; } .admin-bar-label { width: 90px; flex-shrink: 0; color: var(--text-muted); } .admin-bar-track { flex: 1; background: var(--bg-card-2); border-radius: 6px; overflow: hidden; height: 18px; } .admin-bar-fill { height: 100%; background: var(--brand-gradient); border-radius: 6px; } .admin-bar-value { width: 130px; flex-shrink: 0; text-align: right; font-weight: 700; color: var(--brand-light); } .admin-tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; } .admin-tab-link { padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--text-muted); background: var(--bg-card-2); text-decoration: none; } .admin-tab-link.active { background: var(--brand-gradient); color: #ffffff; } .admin-status-pill { padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; display: inline-block; } .admin-status-pending { background: rgba(255,193,7,0.15); color: #ffc107; } .admin-status-processing { background: rgba(97,175,254,0.15); color: #61affe; } .admin-status-success { background: rgba(126,231,135,0.15); color: #7ee787; } .admin-status-failed { background: rgba(255,138,138,0.15); color: #ff8a8a; } .admin-mini-form { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .admin-mini-form input[type="text"] { padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-dark); color: var(--text-white); font-size: 12px; width: 110px; } .btn-tiny { border: none; border-radius: 8px; padding: 6px 10px; font-size: 12px; font-weight: 700; cursor: pointer; } .btn-tiny-success { background: rgba(126,231,135,0.15); color: #7ee787; } .btn-tiny-danger { background: rgba(255,138,138,0.15); color: #ff8a8a; } @media (max-width: 700px) { .admin-form-grid { grid-template-columns: 1fr; } .admin-checkbox-row { padding-top: 0; } } /* ============ RAPIKAN TAMPILAN LAYAR SEMPIT (Android/HP) ============ */ @media (max-width: 480px) { .site-header { padding: 13px 14px; gap: 10px; } .site-header .logo { font-size: 13.5px; } .header-actions { gap: 6px; } .icon-btn { width: 40px; height: 40px; border-radius: 11px; } .icon-btn svg { width: 16.5px; height: 16.5px; } .region-pill-btn { height: 40px; padding: 0 11px; font-size: 12.5px; gap: 6px; } .region-pill-flag { width: 18px; height: 13px; } .region-dropdown { min-width: 200px; right: -8px; } .balance-badge { padding: 6px 9px; font-size: 11.5px; max-width: 80px; } .popular-list { gap: 10px 8px; } .product-grid { gap: 10px 8px; } .pc-name { font-size: 12px; } .product-badge-ribbon { font-size: 8.5px; padding: 2px 6px; top: 5px; left: 5px; } .category-pill { padding: 8px 14px; font-size: 11.5px; } .section { padding: 10px 14px 16px; } .section-title { font-size: 18px; } .cs-float { width: 48px; height: 48px; bottom: 14px; right: 14px; } } /* ============ TOAST NOTIFIKASI KECIL ============ */ .global-toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%) translateY(20px); background: var(--bg-card-2); border: 1px solid var(--border-color); color: var(--text-white); padding: 10px 18px; border-radius: 10px; font-size: 13px; box-shadow: 0 4px 16px rgba(0,0,0,0.4); z-index: 500; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; max-width: 86vw; text-align: center; } .global-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ============ OVERLAY SIDEBAR ADMIN (mode Android) ============ */ .admin-sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 199; } .admin-sidebar-overlay.active { display: block; } @media (max-width: 900px) { .admin-stat-grid { grid-template-columns: repeat(2, 1fr); } .admin-sidebar { position: fixed; left: 0; top: 0; transform: translateX(-100%); z-index: 200; transition: transform 0.2s ease; box-shadow: 0 0 30px rgba(0,0,0,0.5); } .admin-sidebar.open { transform: translateX(0); } .admin-topbar .icon-btn { display: inline-flex; } .admin-content { padding: 16px; } .contact-grid { grid-template-columns: 1fr; } .admin-topbar { flex-wrap: wrap; row-gap: 8px; } .admin-page-title { flex-basis: 100%; order: 1; } } @media (max-width: 480px) { .admin-maint-label { display: none; } } /* ========================================================= POLISH ELEGAN & MEWAH — sentuhan akhir tema gelap-emas Semua pakai variable :root yang sudah ada, jadi otomatis ikut menyesuaikan saat mode terang (data-theme="light") aktif. ========================================================= */ /* Scrollbar tipis bertema emas (WebKit: Chrome/Edge/Safari) */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--brand); border-radius: 8px; opacity: 0.6; } ::-webkit-scrollbar-thumb:hover { background: var(--brand-light); } * { scrollbar-width: thin; scrollbar-color: var(--brand) transparent; } /* Transisi tema gelap/terang yang halus, bukan berkedip mendadak */ body, .site-header, .bg-card, .step-block, .product-card, .loyalty-card, .balance-hero, .icon-btn { transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease; } /* Focus state konsisten & elegan untuk aksesibilitas (keyboard nav) */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, .icon-btn:focus-visible, .btn-primary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 8px; } /* Tombol ikon (search, tema, dsb) sedikit lebih hidup saat disentuh */ .icon-btn { transition: border-color 0.2s ease, transform 0.15s ease, color 0.2s ease; } .icon-btn:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-2px); } .icon-btn:active { transform: translateY(0); } /* Input & textarea: border emas halus saat fokus, terasa lebih premium */ input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="tel"]:focus, textarea:focus, select:focus { border-color: var(--brand) !important; box-shadow: 0 0 0 3px rgba(176, 152, 114, 0.15); } /* ============ PROTEKSI GAMBAR ============ Bikin gambar situs (produk, banner, ikon game, dll) lebih susah di-drag/ diseleksi/di-"tahan-simpan" lewat cara biasa (klik-kanan, drag ke desktop, long-press di HP). CATATAN JUJUR: ini cuma memperberat, BUKAN mengunci 100% — orang yang cukup niat tetap bisa screenshot atau buka lewat DevTools/"View Source". Kombinasikan dengan proteksi hotlink di .htaccess (lihat file itu) untuk hasil yang lebih maksimal. */ img { -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none; /* matikan popup "Simpan Gambar" saat tap-tahan di iOS/Safari */ -webkit-user-select: none; user-select: none; } /* Gambar yang memang perlu tetap bisa diklik normal (ikon tombol dsb.) tidak terganggu — aturan di atas hanya soal drag/simpan, bukan klik. */ /* Fade-in halus untuk gambar produk/banner/artikel saat selesai dimuat, menghindari kesan "lompat" tiba-tiba dan terasa lebih elegan. */ .img-fade { opacity: 0; transition: opacity 0.4s ease; background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-card-2) 37%, var(--bg-card) 63%); background-size: 400% 100%; animation: imgShimmer 1.4s ease-in-out infinite; } .img-fade.img-fade-in { opacity: 1; animation: none; background: none; } @keyframes imgShimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } } @media (prefers-reduced-motion: reduce) { .img-fade { animation: none; opacity: 1; } } /* Fade-in halus untuk section utama saat halaman dimuat, kesan lebih "mahal" */ .container > *, .detail-wrap > * { animation: fadeInUp 0.5s ease both; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .container > *, .detail-wrap > *, .loyalty-card::before, .btn-primary::after { animation: none !important; transition: none !important; } } /* ================================================================ FULL ANIMASI — HALAMAN CUSTOMER (fade, hover, transisi lembut) Skema: elemen mulai tersembunyi (.reveal), lalu JS (script.js) menambahkan .reveal-in saat elemen masuk viewport (IntersectionObserver). Kalau JS mati/gagal, fallback CSS memastikan elemen tetap terlihat. ================================================================ */ html { scroll-behavior: smooth; overflow-x: hidden; } .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.55s ease, transform 0.55s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; } .reveal.reveal-in { opacity: 1; transform: translateY(0); } /* Stagger halus untuk grid/list (kartu produk, artikel, nominal, dll) */ .reveal-stagger > .reveal:nth-child(1) { transition-delay: 0.02s; } .reveal-stagger > .reveal:nth-child(2) { transition-delay: 0.06s; } .reveal-stagger > .reveal:nth-child(3) { transition-delay: 0.10s; } .reveal-stagger > .reveal:nth-child(4) { transition-delay: 0.14s; } .reveal-stagger > .reveal:nth-child(5) { transition-delay: 0.18s; } .reveal-stagger > .reveal:nth-child(6) { transition-delay: 0.22s; } .reveal-stagger > .reveal:nth-child(n+7) { transition-delay: 0.26s; } /* Transisi masuk/keluar antar halaman (fade lembut, bukan "lompat") */ body.page-fade { opacity: 0; transition: opacity 0.28s ease; } body.page-fade.page-fade-in { opacity: 1; } body.page-fade-out { opacity: 0 !important; transition: opacity 0.22s ease !important; } /* Hover halus tambahan untuk kartu/elemen yang belum punya efek — dibuat generik supaya berlaku di semua kartu halaman customer. */ .news-card, .nominal-card, .step-block, .pay-method-item, .review-item, .summary-box, .help-box, .promo-list-item, .hero-banner { transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .news-card:hover, .nominal-card:hover:not(.selected), .step-block:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,0.28); } /* Tab & accordion: transisi konten lembut, bukan langsung "cetak" */ .pd-tab-panel { animation: fadeInUp 0.35s ease both; } .pd-tab-btn { transition: color 0.2s ease, border-color 0.2s ease; } .desc-body { transition: opacity 0.3s ease; } /* Nominal/paket card: sedikit "naik & menyala" saat dipilih, terasa responsif */ .nominal-card { transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .nominal-card.selected { transform: translateY(-2px) scale(1.01); } /* Category pill aktif: transisi warna/border lembut saat berpindah */ .category-pill { transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, color 0.15s ease, background-color 0.2s ease; } /* Badge "Pengiriman INSTAN" & ribbon "BEST PRICE": kedip halus, bukan statis */ .instant-badge, .best-price-ribbon { animation: badgeGlow 2.4s ease-in-out infinite; } @keyframes badgeGlow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.12); } } /* Sticky bar bawah (ringkasan checkout): masuk dari bawah secara halus */ .sticky-bottom { animation: stickyIn 0.4s ease both; } @keyframes stickyIn { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } body.page-fade, body.page-fade-out { opacity: 1 !important; transition: none !important; } .instant-badge, .best-price-ribbon, .sticky-bottom, .pd-tab-panel { animation: none !important; } .news-card:hover, .nominal-card:hover, .step-block:hover { transform: none !important; } } /* ================================================================ ILUSTRASI "MAVA" — dipakai khusus di halaman 404. Di mode gelap: mata & wajah, serta tulisan MAVA di layar laptop diberi efek "menyala" (glow) berdenyut halus. Di mode terang, glow dimatikan supaya tidak aneh di atas background terang. ================================================================ */ .hero-illustration-wrap { position: relative; width: 100%; max-width: 320px; margin: 0 auto 8px; } .hero-illustration-wrap img { display: block; width: 100%; height: auto; filter: drop-shadow(0 14px 26px rgba(0,0,0,0.35)); } .not-found-illustration { max-width: 280px; margin: 0 auto 12px; } /* Titik-titik glow (posisi dalam % relatif terhadap gambar) */ .hero-glow-spot { position: absolute; border-radius: 50%; pointer-events: none; opacity: 0; filter: blur(10px); mix-blend-mode: screen; transition: opacity 0.6s ease; } .hero-glow-face-1 { top: 11%; left: 37%; width: 15%; height: 11%; background: radial-gradient(circle, rgba(255,244,214,0.95) 0%, rgba(212,175,120,0.5) 45%, transparent 75%); } .hero-glow-face-2 { top: 8%; left: 66%; width: 15%; height: 11%; background: radial-gradient(circle, rgba(255,244,214,0.95) 0%, rgba(212,175,120,0.5) 45%, transparent 75%); } .hero-glow-laptop { top: 45%; left: 44%; width: 22%; height: 14%; background: radial-gradient(ellipse, rgba(110,140,255,0.95) 0%, rgba(90,110,255,0.4) 45%, transparent 78%); } /* Mode gelap (default, tanpa data-theme="light"): nyalakan glow, berdenyut halus */ html:not([data-theme="light"]) .hero-glow-spot { animation: heroGlowPulse 3.4s ease-in-out infinite; } html:not([data-theme="light"]) .hero-glow-face-1 { animation-delay: 0s; } html:not([data-theme="light"]) .hero-glow-face-2 { animation-delay: 0.3s; } html:not([data-theme="light"]) .hero-glow-laptop { animation-delay: 0.6s; } @keyframes heroGlowPulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.9; } } /* Mode terang: glow dimatikan total */ [data-theme="light"] .hero-glow-spot { opacity: 0 !important; animation: none !important; } @media (prefers-reduced-motion: reduce) { .hero-glow-spot { animation: none !important; opacity: 0.55 !important; } } /* ============ HALAMAN DEVELOPER (developer.php) ============ Reuse "bahasa visual" dari halaman 404/maintenance (.nf-* di atas) supaya konsisten: kartu tengah, blob dekoratif, entrance fade-up bertahap, dan elemen yang melayang pelan. Dibungkus dalam .dev-wrap sendiri supaya nggak nabrak style .not-found-wrap yang sudah ada. */ .dev-wrap { max-width: 640px; margin: 0 auto; padding: 48px 20px 90px; position: relative; overflow: hidden; text-align: center; } .dev-wrap > * { position: relative; z-index: 1; } .dev-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 999px; background: var(--bg-card); border: 1px solid var(--border-color); color: var(--brand-light); font-size: 12px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; margin-bottom: 22px; } .dev-eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: #3ddc7a; box-shadow: 0 0 0 3px rgba(61,220,122,0.22); animation: devDotPulse 1.6s ease-in-out infinite; } @keyframes devDotPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: 0.7; } } /* Avatar bulat dengan inisial, melayang pelan + cincin glow berputar */ .dev-avatar-wrap { position: relative; width: 128px; height: 128px; margin: 0 auto 18px; } .dev-avatar-ring { position: absolute; inset: -10px; border-radius: 50%; background: conic-gradient(from 0deg, var(--brand), transparent 30%, transparent 70%, var(--brand)); animation: devRingSpin 5s linear infinite; opacity: 0.7; } [data-theme="light"] .dev-avatar-ring { opacity: 0.4; } @keyframes devRingSpin { to { transform: rotate(360deg); } } .dev-avatar { position: absolute; inset: 0; border-radius: 50%; background: var(--brand-gradient); display: flex; align-items: center; justify-content: center; font-size: 48px; font-weight: 800; color: var(--bg-dark); border: 4px solid var(--bg-dark); box-shadow: 0 12px 30px var(--brand-glow); } .dev-avatar-photo { object-fit: cover; font-size: 0; } .dev-name { font-size: 26px; font-weight: 800; color: var(--text-white); margin-bottom: 4px; } .dev-role { color: var(--brand-light); font-weight: 600; font-size: 14px; margin-bottom: 10px; } .dev-location { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 13px; margin-bottom: 20px; } .dev-location svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--brand); } .dev-bio { color: var(--text-muted); font-size: 14px; line-height: 1.7; max-width: 480px; margin: 0 auto 26px; } /* Ikon sosial media: bulat, hover terangkat + glow warna brand */ .dev-social { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; } .dev-social a { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-white); transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } .dev-social a:hover { transform: translateY(-3px) scale(1.06); border-color: var(--brand); color: var(--brand-light); box-shadow: 0 8px 18px var(--brand-glow); } .dev-social a[aria-disabled="true"] { opacity: 0.35; pointer-events: none; } .dev-social svg { width: 18px; height: 18px; } /* Kartu skill/stack teknologi */ .dev-skills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 32px; } .dev-skill-chip { padding: 7px 14px; border-radius: 999px; background: var(--bg-card-2); border: 1px solid var(--border-color); color: var(--text-muted); font-size: 12px; font-weight: 600; transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } .dev-skill-chip:hover { border-color: var(--brand); color: var(--brand-light); transform: translateY(-2px); } /* Kartu proyek yang dibangun */ .dev-projects { display: grid; gap: 12px; text-align: left; margin-bottom: 10px; } .dev-project-card { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--radius); background: var(--bg-card); border: 1px solid var(--border-color); text-decoration: none; color: inherit; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .dev-project-card:hover { transform: translateY(-3px); border-color: var(--brand); box-shadow: var(--shadow-soft); } .dev-project-arrow { margin-left: auto; flex-shrink: 0; width: 16px; height: 16px; color: var(--text-muted); transition: transform 0.2s ease, color 0.2s ease; } .dev-project-card:hover .dev-project-arrow { transform: translate(3px, -3px); color: var(--brand-light); } .dev-project-badge { width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; background: var(--brand-gradient); display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--bg-dark); font-size: 15px; } .dev-project-badge-alt { background: linear-gradient(135deg, #6e8cff 0%, #4256c4 100%); color: #f6f4f0; } .dev-project-title { font-weight: 700; color: var(--text-white); font-size: 14.5px; } .dev-project-desc { color: var(--text-muted); font-size: 12.5px; margin-top: 2px; } .dev-footnote { color: var(--text-muted); font-size: 12px; margin-top: 26px; } .dev-footnote strong { color: var(--brand-light); } @media (max-width: 380px) { .dev-avatar-wrap { width: 108px; height: 108px; } .dev-avatar { font-size: 40px; } .dev-name { font-size: 22px; } } /* ================================================================ FITUR BARU: Cookie/Privacy Consent Banner ================================================================ */ .cookie-consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 999; max-width: 520px; margin: 0 auto; background: var(--bg-card, #1c1a16); border: 1px solid var(--border-color, rgba(198,168,120,0.3)); border-radius: 16px; padding: 16px 18px; box-shadow: 0 20px 50px -18px rgba(0,0,0,0.6); display: none; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: space-between; animation: cookieSlideUp 0.5s cubic-bezier(.22,.61,.36,1) both; } .cookie-consent.cookie-consent-show { display: flex; } .cookie-consent p { margin: 0; font-size: 13px; color: var(--text-muted); flex: 1 1 260px; } .cookie-consent a { color: var(--brand); text-decoration: underline; } .cookie-consent .btn-primary { flex: 0 0 auto; padding: 10px 18px; font-size: 13px; } @keyframes cookieSlideUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .cookie-consent { animation: none; } } /* ================================================================ FITUR BARU: Halaman Produk Favorit — status kosong ================================================================ */ .wishlist-empty { text-align: center; padding: 60px 20px; color: var(--text-muted); } .wishlist-empty svg { color: var(--brand); opacity: 0.6; margin-bottom: 14px; } .wishlist-empty a.btn-primary { display: inline-block; margin-top: 16px; } /* ================================================================ FITUR BARU: Tombol Cetak/Unduh Invoice ================================================================ */ .invoice-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; } .invoice-actions button, .invoice-actions a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-white); font-size: 13px; cursor: pointer; transition: background 0.2s, transform 0.15s; } .invoice-actions button:hover, .invoice-actions a:hover { background: var(--bg-card-2); transform: translateY(-1px); } @media print { .site-header, .welcome-bar, .drawer-menu, .drawer-overlay, .cs-float, .back-to-top, .site-footer, .cookie-consent, .invoice-actions, .verify-email-banner { display: none !important; } body { background: #fff !important; color: #111 !important; } } /* ========================================================= FLASH SALE — banner promo + countdown timer di beranda (admin/flash-sale.php, tabel flash_sales). Tema mengikuti variable :root yang sudah ada (gelap + emas / mode terang). ========================================================= */ .flash-sale-banner { position: relative; overflow: hidden; max-width: 1100px; margin: 0 auto; padding: 18px 20px; border-radius: var(--radius); background: linear-gradient(135deg, var(--bg-card-2) 0%, var(--bg-dark) 55%, var(--bg-card) 100%); border: 1px solid var(--brand-glow); box-shadow: var(--shadow-elegant), 0 0 0 1px var(--brand-glow) inset; display: flex; flex-direction: column; gap: 14px; animation: fsBannerIn 0.5s ease; } [data-theme="light"] .flash-sale-banner { border: 1px solid var(--brand-glow); } @keyframes fsBannerIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .flash-sale-glow { position: absolute; inset: -40% -10% auto auto; width: 260px; height: 260px; background: radial-gradient(circle, var(--brand-glow) 0%, transparent 70%); pointer-events: none; animation: fsGlowPulse 3.2s ease-in-out infinite; } @keyframes fsGlowPulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } .flash-sale-top { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .flash-sale-heading { display: flex; align-items: center; gap: 12px; } .flash-sale-bolt { flex: none; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--brand-gradient); color: #241a0e; box-shadow: 0 6px 16px var(--brand-glow); animation: fsBoltPulse 1.8s ease-in-out infinite; } .flash-sale-bolt svg { width: 22px; height: 22px; } @keyframes fsBoltPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } .flash-sale-title { font-size: 18px; font-weight: 800; letter-spacing: 0.3px; color: var(--text-white); line-height: 1.25; } .flash-sale-subtitle { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; } .flash-sale-badge { flex: none; align-self: center; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: var(--brand-gradient); color: #241a0e; white-space: nowrap; box-shadow: 0 4px 12px var(--brand-glow); } .flash-sale-bottom { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .flash-sale-countdown { display: flex; align-items: center; gap: 6px; } .fs-unit { display: flex; flex-direction: column; align-items: center; min-width: 46px; padding: 6px 4px 5px; border-radius: 10px; background: rgba(255,255,255,0.05); border: 1px solid var(--brand-glow); } [data-theme="light"] .fs-unit { background: rgba(140,100,30,0.07); } .fs-num { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--brand-light); line-height: 1.1; } .fs-label { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-top: 2px; } .fs-colon { font-size: 16px; font-weight: 700; color: var(--brand-light); opacity: 0.7; padding-bottom: 12px; } .flash-sale-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 11px 22px; border-radius: 999px; background: var(--brand-gradient); color: #241a0e; font-weight: 800; font-size: 13.5px; text-decoration: none; box-shadow: 0 8px 20px var(--brand-glow); transition: transform 0.15s ease, box-shadow 0.15s ease; white-space: nowrap; } .flash-sale-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px var(--brand-glow); } @media (max-width: 480px) { .flash-sale-banner { padding: 14px 14px; border-radius: 14px; } .flash-sale-title { font-size: 15.5px; } .flash-sale-subtitle { font-size: 11.5px; } .flash-sale-bottom { justify-content: center; } .flash-sale-countdown { justify-content: center; flex: 1 1 100%; } .flash-sale-btn { flex: 1 1 100%; } .fs-unit { min-width: 42px; } .fs-num { font-size: 16px; } } @media (prefers-reduced-motion: reduce) { .flash-sale-bolt, .flash-sale-glow { animation: none; } } /* ========================================================= POP UP SAMBUTAN (welcome popup) — admin/popup.php, tampil otomatis di semua halaman lewat includes/header.php selama diaktifkan admin. "Jangan tampilkan" disimpan di localStorage pengunjung (lihat script di includes/header.php). ========================================================= */ .popup-overlay { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(10,7,3,0.68); backdrop-filter: blur(2px); align-items: center; justify-content: center; padding: 18px; animation: popupOverlayIn 0.2s ease; } @keyframes popupOverlayIn { from { opacity: 0; } to { opacity: 1; } } .popup-card { position: relative; width: 100%; max-width: 420px; max-height: 92vh; overflow-y: auto; background: var(--bg-card); border: 1px solid var(--brand-glow); border-radius: 20px; box-shadow: var(--shadow-elegant); padding: 20px 20px 22px; animation: popupCardIn 0.25s ease; } @keyframes popupCardIn { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .popup-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .popup-card-head h3 { margin: 0; font-size: 18px; font-weight: 800; color: var(--text-white); line-height: 1.3; } .popup-close-x { flex: none; width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(255,255,255,0.06); color: var(--text-muted); font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s ease, color 0.15s ease; } .popup-close-x:hover { background: rgba(255,255,255,0.12); color: var(--text-white); } .popup-card-image { border-radius: 14px; overflow: hidden; margin-bottom: 14px; border: 1px solid var(--brand-glow); } .popup-card-image img { display: block; width: 100%; height: auto; } .popup-card-desc { font-size: 13.5px; line-height: 1.55; color: var(--text-muted); margin: 0 0 16px; } .popup-card-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px 18px; border-radius: 999px; background: var(--brand-gradient); color: #241a0e; font-weight: 800; font-size: 14.5px; text-decoration: none; box-shadow: 0 8px 20px var(--brand-glow); transition: transform 0.15s ease, box-shadow 0.15s ease; } .popup-card-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px var(--brand-glow); } .popup-card-hide { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 12.5px; color: var(--text-muted); cursor: pointer; } .popup-card-hide input { width: 15px; height: 15px; accent-color: var(--brand); cursor: pointer; } .popup-card-tutup { display: block; width: 100%; margin-top: 16px; background: none; border: none; text-align: center; font-size: 13.5px; font-weight: 700; color: var(--text-muted); text-decoration: underline; cursor: pointer; } .popup-card-tutup:hover { color: var(--text-white); } @media (max-width: 420px) { .popup-card { padding: 16px 16px 18px; border-radius: 16px; } .popup-card-head h3 { font-size: 16px; } }