/* ========================================================== watchwatch.store — stylesheet bersama untuk semua halaman Fondasi awal diambil dari prototipe statis, DIPERBARUI 2026-07-13 mengikuti referensi Figma "CONTOH BERANDA FIGMA.zip" yang dikirim user -- palet biru marketplace (#0066CC) menggantikan navy gelap, font Inter menggantikan Nunito. --navy/--navy-dark DIPERTAHANKAN NAMANYA (bukan di-rename ke --blue dkk) supaya ratusan pemakaian var(--navy) di seluruh file CSS/inline style TIDAK perlu diubah satu-satu -- cuma NILAI hex-nya yang berubah, jadi otomatis konsisten ke semua halaman begitu file ini di-load. Hanya berlaku untuk halaman pelanggan (file ini) -- assets/css/dashboard.css (admin/mitra) SENGAJA tidak ikut diubah, di luar cakupan permintaan/referensi yang diberikan. ========================================================== */ :root{ --navy:#0066CC; --navy-dark:#004499; --accent:#64B5F6; --bg:#F1F5F9; --card:#ffffff; --text:#1c1c1e; --muted:#6b7280; --border:#e5e7eb; --green:#16a34a; --red:#dc2626; --amber:#d97706; } /* Tema gelap (2026-07-28, permintaan pemilik: "buat dan tambahkan tema gelap yang bisa di ubah di menu akun") -- diaktifkan lewat atribut data-theme="dark" di elemen , diset oleh assets/js/theme.js (baca localStorage, dipasang paling awal di supaya tidak sempat "kedip" tema terang sebelum berganti). Sebagian besar komponen situs SUDAH memakai var(--card)/var(--text)/var(--muted)/ var(--border) (bukan warna hex langsung) sejak awal, jadi otomatis ikut berubah cuma dengan override variabel ini -- termasuk puluhan `background:#fff` yang sebelumnya hex literal, sudah dikonversi ke var(--card) di seluruh file supaya ikut tema (lihat riwayat 2026-07-28). Elemen yang SENGAJA dibiarkan putih literal (kolom pencarian topbar, tombol Google, tombol CTA di atas banner warna, titik kecil dekoratif, kenop toggle switch) TIDAK diubah -- itu memang harus putih di kedua tema, bukan terlewat. */ [data-theme="dark"]{ --bg:#0d1220; --card:#1b2436; --text:#e8eaf0; --muted:#9aa5b8; --border:#2e3850; --navy:#3b82f6; --navy-dark:#2563eb; --accent:#60a5fa; --green:#22c55e; --red:#f87171; --amber:#fbbf24; } /* Bayangan kartu di tema terang (rgba(0,0,0,...) tipis) nyaris tidak kelihatan di atas kartu yang sudah gelap -- garis tepi tipis dipakai sebagai pengganti supaya batas antar kartu tetap jelas tanpa perlu menulis ulang setiap box-shadow satu per satu di seluruh file. */ [data-theme="dark"] .card, [data-theme="dark"] .product-card, [data-theme="dark"] .auction-card, [data-theme="dark"] .lelang-row, [data-theme="dark"] .po-row, [data-theme="dark"] .flash-card, [data-theme="dark"] .promo-member-card, [data-theme="dark"] .section-card, [data-theme="dark"] .trust-row, [data-theme="dark"] .spec-table, [data-theme="dark"] .desc-box, [data-theme="dark"] .seller-box, [data-theme="dark"] .social-box, [data-theme="dark"] .review-card, [data-theme="dark"] .video-card, [data-theme="dark"] .seller-group, [data-theme="dark"] .pd-info-card{ border:1px solid var(--border); } /* Bug ditemukan 2026-07-29 -- .icon-circle (tombol bulat kembali/wishlist/share melayang di atas foto produk) terlewat saat migrasi tema gelap 2026-07-28 karena background-nya hex literal #f0f0f0 (bukan #fff yang sudah dikonversi ke var(--card)) -- akibatnya di tema gelap warna ikon (var(--text), jadi terang) nyaris tidak kelihatan di atas lingkaran abu-abu terang yang sama sekali tidak ikut menggelap, ikon jadi nyaris tak terlihat (terang di atas terang). */ [data-theme="dark"] .icon-circle{ background:var(--card); } [data-theme="dark"] img{ opacity:.92; } /* foto produk sedikit diredupkan -- putih polos di latar produk placeholder jadi tidak menyilaukan di tema gelap */ *{ box-sizing:border-box; margin:0; padding:0; } html, body{ overflow-x:hidden; width:100%; } body{ font-family:'Inter', sans-serif; background:var(--bg); color:var(--text); display:flex; justify-content:center; } a{ text-decoration:none; color:inherit; } .phone{ width:100%; max-width:480px; /* dinaikkan dari 430px (2026-07-15) -- di HP dengan viewport lebih lebar dari 430px (mis. Pro Max terbaru), 430px sisakan strip putih tipis di kiri-kanan. 480px aman untuk seluruh rentang lebar HP yang ada tanpa menabrak breakpoint desktop di 900px. */ min-height:100vh; background:var(--bg); padding-bottom:76px; /* bottomnav rata menempel bawah (2026-07-14) -- lebih rendah dari versi pil mengambang sebelumnya */ position:relative; } /* ---------- top bar ---------- */ .topbar{ background:linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%); color:#fff; display:flex; align-items:center; gap:12px; padding:14px 16px; position:sticky; top:0; z-index:20; } /* Versi 3-baris (search + strip lokasi) dipakai includes/topbar.php -- kelas TAMBAHAN di atas .topbar dasar (bukan pengganti), supaya halaman yang masih pakai .topbar versi sederhana (akun.php dkk: judul+tombol kembali) tidak ikut berubah jadi kolom. Lihat catatan lengkap di includes/topbar.php. */ .topbar.topbar-full{ flex-direction:column; align-items:stretch; gap:0; padding:10px 0 0; } .topbar-row1{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 16px 8px; } .topbar-full .search-wrap{ margin:0 16px 12px; } .location-strip{ display:flex; align-items:center; gap:6px; padding:8px 16px; background:rgba(0,0,0,.15); } .location-strip span{ color:rgba(191,219,254,.9); font-size:11px; } .location-strip b{ color:#fff; font-weight:700; } .icon-btn{ width:22px; height:22px; flex-shrink:0; cursor:pointer; } .topbar .icon-btn{ color:#fff; } .topbar h1{ font-size:17px; font-weight:700; flex:1; } .topbar .logo{ height:22px; } .wordmark{ font-size:15px; font-weight:800; letter-spacing:-.2px; white-space:nowrap; } .wordmark .w1{ color:#fff; } .wordmark .w2{ color:var(--accent); } .wordmark .dom{ color:rgba(255,255,255,.55); font-size:10px; font-weight:600; display:block; } .topbar .search-wrap{ flex:1; min-width:0; background:#fff; border-radius:24px; display:flex; align-items:center; gap:0; padding:4px 4px 4px 14px; position:relative; /* jangkar untuk .search-saran (2026-07-27) */ } .topbar .search-wrap input{ border:none; outline:none; font-size:13px; font-family:'Inter',sans-serif; flex:1; min-width:0; width:100%; color:var(--text); background:transparent; } .topbar .search-wrap svg{ color:var(--muted); flex-shrink:0; } /* Tombol cari bulat terintegrasi (2026-07-27, referensi Blibli -- sebelumnya cuma ikon kaca pembesar polos di kiri, sekarang tombol submit sungguhan bulat penuh warna aksen di ujung kanan pill, konsisten dengan pola marketplace besar). */ .search-submit{ flex-shrink:0; width:34px; height:34px; border-radius:50%; border:none; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; } .search-submit svg{ color:#fff; } /* Saran pencarian (2026-07-27, permintaan pemilik: "kolom search menetik satu dua huruf ... ada opsi kayak saran nama produk yang sudah ada") -- dropdown melayang di bawah kolom pencarian, muncul/hilang lewat JS di includes/topbar.php. */ .search-saran{ position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:50; background:var(--card); border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.15); overflow:hidden; max-height:280px; overflow-y:auto; } .search-saran-item{ display:flex; align-items:center; gap:8px; padding:10px 14px; font-size:12.5px; color:var(--text); cursor:pointer; text-align:left; } .search-saran-item:hover, .search-saran-item.aktif{ background:#f0f2f5; } .search-saran-item svg{ color:var(--muted); flex-shrink:0; } .topbar .right-icons{ display:flex; align-items:center; gap:14px; flex-shrink:0; } .topbar .cart-badge{ position:relative; } .topbar .cart-badge .count{ position:absolute; top:-6px; right:-8px; background:var(--red); color:#fff; font-size:9px; font-weight:700; width:15px; height:15px; border-radius:50%; display:flex; align-items:center; justify-content:center; } .topbar .btn-masuk{ flex-shrink:0; display:flex; align-items:center; gap:6px; background:var(--accent); color:var(--navy-dark); font-weight:800; font-size:13px; padding:8px 14px; border-radius:12px; } /* logo topbar (dipakai includes/topbar.php) -- menggantikan .wordmark bertulisan supaya kolom pencarian lebih lebar; .wordmark lama TETAP ada (masih dipakai akun.php, produk_detail.php, dan halaman auth yang tidak include topbar.php ini) */ .topbar-brand{ display:flex; align-items:center; flex-shrink:0; } .topbar-logo{ height:30px; width:auto; display:block; border-radius:50%; } /* menu horizontal khusus desktop (900px+), lihat topbar.php -- tersembunyi di mobile, pakai destinasi sama persis dengan includes/bottom_nav.php supaya konsisten */ .topbar-desktop-nav{ display:none; } .topbar-desktop-nav a{ color:rgba(255,255,255,.75); font-size:13px; font-weight:700; } .topbar-desktop-nav a:hover{ color:#fff; } /* icon kanan topbar bergaya "chip" bulat semi-transparan -- gaya marketplace besar (Blibli dkk), menggantikan ikon polos langsung di atas background navy */ .right-icons .icon-circle{ position:relative; width:34px; height:34px; border-radius:50%; flex-shrink:0; background:rgba(255,255,255,.14); color:#fff; display:flex; align-items:center; justify-content:center; } .right-icons .icon-circle .count{ position:absolute; top:-4px; right:-4px; background:var(--red); color:#fff; font-size:9px; font-weight:800; min-width:16px; height:16px; border-radius:50%; padding:0 3px; display:flex; align-items:center; justify-content:center; border:2px solid var(--navy); } /* ---------- generic layout ---------- */ .section{ padding:14px 16px 0; } .card{ background:var(--card); border-radius:16px; padding:16px; box-shadow:0 1px 3px rgba(0,0,0,0.06); margin-bottom:14px; } .section-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; } .section-head h2{ font-size:15px; font-weight:700; display:flex; align-items:center; } .section-head a{ font-size:12.5px; color:var(--navy); font-weight:700; } /* badge ikon kotak-membulat bergradasi, pengganti emoji mentah di judul section (beranda.php) -- lebih konsisten dengan bahasa desain ikon SVG di seluruh situs */ .head-icon{ width:26px; height:26px; border-radius:9px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; margin-right:7px; color:#fff; box-shadow:0 2px 6px rgba(0,0,0,.12); } .head-icon.bg-lelang{ background:linear-gradient(135deg,#dc2626,#f87171); } .head-icon.bg-flash{ background:linear-gradient(135deg,#f59e0b,#fde047); } .head-icon.bg-produk{ background:linear-gradient(135deg,var(--navy),var(--accent)); } .head-icon.bg-po{ background:linear-gradient(135deg,#6d28d9,#a855f7); } /* Banner intro po.php (2026-07-28, modernisasi, revisi ke-2 sama hari -- versi teal/hijau pertama nyeleneh, versi navy kedua terasa terlalu "sama dengan semua section lain" jadi tidak menonjol sebagai identitas PO sendiri) -- pengganti kartu putih polos + emoji 📦 mentah. Ungu dipilih karena belum dipakai section manapun (Lelang=merah, Flash Sale=oranye, beranda-hero/topbar=navy), kesan "premium/terjamin" cocok untuk positioning PO (harga tetap, tidak naik-turun). */ .po-hero{ background:linear-gradient(135deg,#5b21b6 0%,#7c3aed 55%,#6d28d9 100%); border-radius:16px; padding:14px 16px 16px; margin:0 0 14px; box-shadow:0 4px 14px rgba(109,40,217,.28); } .po-hero-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; } .po-hero-title{ display:flex; align-items:center; gap:8px; } .po-hero-title h2{ font-size:16px; font-weight:800; color:#fff; } .po-hero-badge{ background:rgba(255,255,255,.18); color:#fff; font-size:9.5px; font-weight:800; letter-spacing:.3px; padding:3px 9px; border-radius:20px; text-transform:uppercase; } .po-hero-cta{ flex-shrink:0; background:#fff; color:#6d28d9; font-size:12px; font-weight:800; padding:7px 14px; border-radius:20px; white-space:nowrap; } .po-hero-desc{ font-size:11.5px; color:rgba(255,255,255,.85); line-height:1.6; } .po-hero-desc a{ color:#fff; font-weight:800; text-decoration:underline; text-underline-offset:2px; } /* ---------- buttons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--navy); color:#fff; border:none; border-radius:12px; padding:13px 20px; font-size:14px; font-weight:700; font-family:'Inter', sans-serif; cursor:pointer; width:100%; } .btn:active{ background:var(--navy-dark); } .btn-outline{ background:var(--card); color:var(--navy); border:1.5px solid var(--navy); } .btn-outline:active{ background:#f5f7ff; } /* ---------- badges ---------- */ .badge-verif{ display:inline-flex; align-items:center; gap:3px; background:#e6f1fb; color:var(--navy); font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:20px; } /* ---------- product grid (belanja, beranda) ---------- */ .product-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .product-card{ background:var(--card); border-radius:10px; overflow:hidden; box-shadow:0 1px 2px rgba(15,32,66,.08); cursor:pointer; display:block; min-width:0; border:1px solid rgba(15,32,66,.06); transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease; } /* Hover elevation (2026-07-27, modernisasi) -- cuma berlaku kalau perangkat punya mouse sungguhan (media hover:hover), supaya tidak ada efek "nyangkut aktif" aneh di layar sentuh yang tidak punya konsep hover sungguhan. */ @media (hover:hover){ .product-card:hover{ box-shadow:0 10px 24px rgba(15,32,66,.16); transform:translateY(-3px); border-color:rgba(15,32,66,.12); } } .product-card .thumb-wrap{ position:relative; } .product-card img{ width:100%; aspect-ratio:1; object-fit:cover; display:block; background:#eee; } /* Pita diskon merah gaya marketplace besar (2026-07-28, referensi Blibli) -- sebelumnya cuma kotak kecil melayang di sudut, sekarang pita rata menempel ke sudut kartu (flush corner ribbon) dengan gradasi+bayangan supaya lebih menonjol dan terasa "festival diskon", bukan label datar polos. */ .product-card .badge-diskon{ position:absolute; top:0; right:0; background:linear-gradient(135deg,#ff3b30,#e53935); color:#fff; font-size:10.5px; font-weight:800; padding:3px 8px; border-radius:0 10px 0 10px; letter-spacing:.2px; box-shadow:0 2px 5px rgba(229,57,53,.4); } .product-card .wishlist{ position:absolute; bottom:8px; right:8px; width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,0.9); display:flex; align-items:center; justify-content:center; color:var(--muted); box-shadow:0 1px 3px rgba(0,0,0,.15); } .product-card .badge-corner{ position:absolute; top:8px; left:8px; font-size:10px; font-weight:700; padding:3px 8px; border-radius:20px; box-shadow:0 1px 4px rgba(0,0,0,.12); } .product-card .badge-sponsor{ background:rgba(255,255,255,.95); color:#546e7a; } .product-card .badge-verified{ background:rgba(255,255,255,.95); color:var(--navy); display:inline-flex; align-items:center; gap:3px; } .product-card .info{ padding:9px 10px 11px; } .product-card .name{ font-size:12.5px; font-weight:600; line-height:1.35; min-height:34px; overflow-wrap:break-word; color:var(--text); } /* Harga tebal hitam-kebiruan (2026-07-28, referensi Blibli: harga selalu warna paling gelap/kontras di kartu, BUKAN warna brand -- warna brand dipakai untuk aksen/CTA, bukan angka harga) menggantikan var(--navy) yang sebelumnya membuat harga terasa "sama pentingnya" dengan elemen brand lain, kurang menonjol. */ .product-card .price{ font-size:15px; font-weight:800; color:var(--text); margin-top:5px; letter-spacing:-.2px; } .product-card .price-old{ font-size:11px; color:var(--muted); text-decoration:line-through; margin-left:5px; font-weight:500; } .product-card .meta{ font-size:10.5px; color:var(--muted); margin-top:5px; display:flex; align-items:center; gap:4px; } .product-card .meta svg{ color:#fbbf24; flex-shrink:0; } .product-card .lokasi{ font-size:10px; color:var(--muted); margin-top:2px; display:flex; align-items:center; gap:3px; } /* ---------- bottom navigation ---------- */ /* Bar rata menempel penuh di tepi bawah layar (2026-07-14, diminta user "jangan floating seperti itu") -- kembali ke pola bottom-tab standar seperti referensi Figma src/components/BottomNav.tsx: full width, background putih, garis tipis di atas, bayangan naik, TANPA border-radius/jarak dari tepi. */ .bottomnav{ position:fixed; left:50%; bottom:0; transform:translateX(-50%); width:100%; max-width:430px; background:var(--card); border-top:1px solid var(--border); display:flex; z-index:30; box-shadow:0 -4px 20px rgba(0,0,0,.08); padding-bottom:env(safe-area-inset-bottom); } .bottomnav a{ flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:10px 2px; color:var(--muted); font-size:10.5px; font-weight:600; position:relative; } .bottomnav a.active{ color:var(--navy); } .bottomnav a svg{ width:21px; height:21px; } /* ---------- fixed bottom action bar (product detail, checkout) ---------- */ .actionbar{ position:fixed; bottom:0; left:0; right:0; margin:0 auto; width:100%; max-width:430px; background:var(--card); border-top:1px solid var(--border); box-shadow:0 -2px 10px rgba(0,0,0,0.06); padding:10px 16px calc(10px + env(safe-area-inset-bottom)); display:flex; align-items:center; gap:10px; z-index:30; } /* .msg (tombol "Pesan" via WhatsApp di produk_detail.php) tidak pernah punya style sendiri sebelumnya -- tampil tanpa kotak/padding sama sekali, beda tinggi dari .btn/.btn-outline di sebelahnya. Kolom ikon+label kecil, tinggi disamakan lewat padding vertikal yang setara dengan .btn punya (13px atas-bawah). */ .actionbar .msg, .pd-desktop-actions .msg{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; flex-shrink:0; width:60px; padding:9px 4px; border:1.5px solid var(--border); border-radius:12px; color:var(--navy); font-size:9.5px; font-weight:700; text-align:center; } .actionbar .msg svg, .pd-desktop-actions .msg svg{ color:var(--navy); } /* ---------- helpers ---------- */ .hscroll{ display:flex; gap:10px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; } .hscroll::-webkit-scrollbar{ display:none; } .pill{ padding:8px 16px; border-radius:20px; font-size:12.5px; font-weight:700; background:var(--card); color:var(--muted); border:1px solid var(--border); white-space:nowrap; flex-shrink:0; cursor:pointer; } .pill.active{ background:var(--navy); color:#fff; border-color:var(--navy); } .filter-row{ display:flex; gap:8px; overflow-x:auto; padding:10px 0 12px; scrollbar-width:none; } .filter-row::-webkit-scrollbar{ display:none; } .verif-toggle{ display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:20px; font-size:12.5px; font-weight:700; background:var(--card); color:var(--text); border:1px solid var(--border); white-space:nowrap; flex-shrink:0; cursor:pointer; } .verif-toggle.active{ background:#e6f1fb; color:var(--navy); border-color:var(--navy); } .load-more{ margin:16px 0 4px; } .empty-state{ text-align:center; padding:40px 24px; color:var(--muted); } .empty-state svg{ color:var(--border); margin-bottom:12px; } .empty-state p{ font-size:13px; } /* ========================================================== Komponen tambahan khusus beranda.php versi lengkap (rujukan visual: zip Figma "Beranda", src/app/App.tsx) ========================================================== */ /* Refresh visual beranda (2026-07-12) -- "jangan terlalu polos, kontainer rapi seperti Blibli". Semua kelas di bawah ADITIF dan dipakai HANYA di beranda.php; .cat-row/.trust-row/.section polos punya markup yang sama persis di belanja.php/lelang.php/po.php/produk_detail.php (lihat catatan proyek), jadi sengaja tidak menyentuh definisi kelas dasarnya supaya halaman lain tidak ikut bergeser tampilannya. */ /* Zona header gradasi navy yang membungkus topbar+cat-row -- pengganti "abu polos langsung ketemu grey background" begitu topbar berakhir. */ .beranda-hero{ background:linear-gradient(160deg,var(--navy) 0%,#26319e 55%,var(--navy-dark) 100%); padding-bottom:20px; position:relative; overflow:hidden; } .beranda-hero::before{ content:""; position:absolute; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle,rgba(79,195,247,.25),transparent 70%); top:-90px; right:-60px; pointer-events:none; } .beranda-hero .cat-row{ position:relative; z-index:1; padding-top:10px; } .beranda-hero .cat-item span{ color:#fff; } .beranda-hero .cat-item .ic{ box-shadow:0 6px 14px rgba(0,0,0,.22); } /* Balon dekoratif header biru (2026-07-28, permintaan pemilik: "biar lebih berwarna, header biru itu ada balonnya") -- murni digambar CSS (gradient+shape), TIDAK butuh file gambar/API eksternal. pointer-events:none + aria-hidden supaya murni dekoratif, tidak menghalangi klik ikon kategori di baliknya. */ .hero-balloons{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; } .balon{ position:absolute; border-radius:50% 50% 50% 50% / 58% 58% 42% 42%; box-shadow:inset -8px -10px 16px rgba(0,0,0,.14), inset 6px 8px 14px rgba(255,255,255,.4); animation:balonMelayang 5s ease-in-out infinite; opacity:.9; } .balon::after{ content:""; position:absolute; left:50%; bottom:-22px; width:1px; height:24px; background:rgba(255,255,255,.4); transform:translateX(-50%); } .balon.b1{ width:32px; height:41px; background:#ff6b6b; top:-8px; left:2%; animation-delay:.2s; } .balon.b2{ width:22px; height:28px; background:#ffd166; top:46px; left:14%; animation-delay:1.1s; } .balon.b3{ width:28px; height:36px; background:#4dd0e1; top:-10px; right:20%; animation-delay:.6s; } .balon.b4{ width:18px; height:24px; background:#c084fc; top:42px; right:3%; animation-delay:1.6s; } .balon.b5{ width:15px; height:19px; background:#69db7c; top:-6px; left:47%; animation-delay:2s; } @keyframes balonMelayang{ 0%, 100%{ transform:translateY(0) rotate(-3deg); } 50%{ transform:translateY(-10px) rotate(3deg); } } @media (prefers-reduced-motion: reduce){ .balon{ animation:none; } } /* Di desktop hero jauh lebih lebar -- balon dasar (persentase kiri/kanan) otomatis ikut melebar mengikuti persen yang sama, jadi tidak perlu override khusus di breakpoint 900px+ manapun. */ /* Riwayat jarak banner (2026-07-13/14): dulu banner ditarik naik lewat margin-top negatif supaya "melayang" tipis ke zona navy, tapi setelah dicoba di server sungguhan tetap terlihat mepet (foto banner gelap menyatu visual dengan navy). 2026-07-14: solusinya bukan lagi ngoprek margin -- ditambah section sungguhan (.promo-member-strip, "Promo Khusus Member Baru") di antara hero dan banner, jadi pemisahnya nyata bukan sekadar spasi. .beranda-hero padding-bottom diturunkan lagi (20px, cukup untuk kondisi promo-member-strip kosong/tidak ada produk polos tanpa latar/bayangan sendiri (Lelang, Flash Sale, Produk Unggulan) -- beda dengan .trust-row yang sudah jadi kartu putih sendiri sejak awal, jadi TIDAK dipakai di situ supaya tidak jadi kartu-di-dalam-kartu. */ .section-card{ background:var(--card); border-radius:20px; padding:16px; margin:0 16px 14px; box-shadow:0 2px 10px rgba(23,31,97,.07); border:1px solid rgba(23,31,97,.04); } .section-card .section-head{ margin-bottom:12px; } /* semburat warna tipis khusus section yang sifatnya "mendesak/waktu terbatas", Produk Unggulan sengaja dibiarkan putih polos (bukan promo, jadi tidak perlu kesan urgent) */ .section-card.tint-lelang{ background:linear-gradient(180deg,#fff5f5 0%,#ffffff 60%); } .section-card.tint-flash{ background:linear-gradient(180deg,#fffbeb 0%,#ffffff 60%); } /* Tab kategori produk beranda (2026-07-19) -- gaya teks+underline biru, SENGAJA beda dari .pill/.dash-tab yang sudah ada (pill terisi navy penuh) -- permintaan eksplisit pemilik "warna BIRU teks dan/atau underline", bukan pill terisi. */ .produk-tab-row{ display:flex; gap:18px; overflow-x:auto; scrollbar-width:none; padding:0 0 2px; } .produk-tab-row::-webkit-scrollbar{ display:none; } .produk-tab{ background:none; border:none; padding:0 0 8px; margin:0; font-size:13px; font-weight:700; color:var(--muted); white-space:nowrap; flex-shrink:0; cursor:pointer; border-bottom:2px solid transparent; } .produk-tab.active{ color:var(--navy); border-bottom-color:var(--navy); } /* kategori dengan lingkaran warna per kategori */ .cat-row{ display:flex; gap:16px; overflow-x:auto; padding:4px 16px 10px; scrollbar-width:none; } .cat-row::-webkit-scrollbar{ display:none; } .cat-item{ display:flex; flex-direction:column; align-items:center; gap:6px; flex-shrink:0; width:56px; } .cat-item .ic{ width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 3px 8px rgba(0,0,0,.10); transition:transform .15s ease; overflow:hidden; } .cat-item .ic img{ width:100%; height:100%; object-fit:cover; } .cat-item:active .ic{ transform:scale(.92); } .cat-item span{ font-size:10.5px; color:var(--text); font-weight:700; text-align:center; } /* banner slider otomatis */ /* rasio 16:9 (2026-07-14, sebelumnya tinggi tetap 170px) -- proporsional otomatis di lebar layar berapa pun, tidak lagi kepotong/lonjong di HP yang lebih sempit. Margin kiri-kanan DIHAPUS (2026-07-14, revisi) -- 16px di tiap sisi bikin banner kelihatan "kurang lebar" di HP dibanding elemen lain yang lebih lebar (cat-row, product-grid dst) -- sekarang full-bleed rata ke kedua tepi layar, radius juga dilepas di mobile (radius di ujung yang menempel tepi layar malah aneh). Radius dan margin kiri-kanan kembali di desktop (lihat @media 900/1280/1600px) karena di sana .phone sudah lebar dan konten lain (topbar-full dst) juga berjarak dari tepi, jadi banner full-bleed di desktop justru janggal sendirian. */ .banner-slider{ position:relative; overflow:hidden; aspect-ratio:16/9; margin:0 0 14px; } .banner-slide{ position:absolute; inset:0; background:linear-gradient(135deg,var(--navy),var(--navy-dark)); display:flex; align-items:center; padding:0 22px; opacity:0; transform:translateX(30px); transition:opacity .6s ease, transform .6s ease; pointer-events:none; } .banner-slide.active{ opacity:1; transform:translateX(0); pointer-events:auto; } .banner-slide img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; /* foto asli ditampilkan penuh -- sebelumnya cuma tekstur redup (opacity .32) di belakang teks */ } /* Gradasi gelap DIHAPUS (2026-07-19, permintaan eksplisit pemilik: "banner ga da shadow atau menggelap di gambar banner") -- foto banner sekarang tampil terang penuh tanpa overlay apa pun. Keterbacaan teks di atas foto (alasan overlay itu ada sebelumnya) dijaga lewat text-shadow pada teks itu sendiri, bukan menggelapkan seluruh foto. */ .banner-slide .txt{ position:relative; color:#fff; z-index:2; max-width:75%; } .banner-slide .tag{ font-size:10px; font-weight:800; letter-spacing:.4px; background:rgba(79,195,247,.25); color:var(--accent); border:1px solid rgba(79,195,247,.4); display:inline-block; padding:3px 10px; border-radius:20px; margin-bottom:8px; text-shadow:none; } .banner-slide h2{ font-size:19px; font-weight:800; line-height:1.25; margin-bottom:4px; text-shadow:0 1px 6px rgba(0,0,0,.55); } .banner-slide p{ font-size:12px; opacity:.9; margin-bottom:10px; text-shadow:0 1px 5px rgba(0,0,0,.55); } .banner-slide .cta{ display:inline-block; background:var(--accent); color:var(--navy-dark); font-size:12.5px; font-weight:800; padding:8px 18px; border-radius:12px; } .banner-dots{ position:absolute; bottom:10px; left:50%; transform:translateX(-50%); z-index:5; display:flex; gap:5px; } .banner-dots span{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.4); transition:all .25s; } .banner-dots span.active{ width:18px; border-radius:4px; background:#fff; } /* baris trust badge (2026-07-28, modernisasi ikon+kartu -- permintaan pemilik "bisa ga lebih modern termasuk iconnya") -- kotak lebih besar & rounded, gradasi lembut dua-nada pengganti tint datar 15% opacity yang terasa flat, plus bayangan+cincin tipis di baliknya supaya terasa "melayang", dan hover lift halus di desktop (mouse sungguhan saja, sama pola dengan .product-card:hover). */ .trust-row{ display:flex; justify-content:space-between; gap:4px; background:var(--card); border-radius:18px; padding:16px 8px; margin:0 16px 14px; box-shadow:0 4px 18px rgba(15,32,66,.08); } .trust-item{ display:flex; flex-direction:column; align-items:center; gap:8px; flex:1; } .trust-item svg{ color:var(--navy); } .trust-item span{ font-size:10px; color:var(--text); text-align:center; font-weight:700; line-height:1.3; } /* Ikon berwarna dalam kotak membulat pastel (dipakai beranda.php) -- .ic-wrap murni aditif, trust-item TANPA .ic-wrap (statistik lelang.php/po.php yang isinya angka bukan ikon) tidak terpengaruh sama sekali. Warna 2026-07-13 disamakan persis dengan referensi Figma (teal/blue/purple/orange) -- nama kelas ikut diganti dari c-green/c-amber jadi c-teal/c-orange dkk supaya nama kelas tetap cocok dengan warna sesungguhnya (lihat pemakaiannya di beranda.php).*/ .trust-item .ic-wrap{ width:48px; height:48px; border-radius:16px; display:flex; align-items:center; justify-content:center; box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 3px 8px rgba(15,32,66,.08); transition:transform .18s ease, box-shadow .18s ease; } .trust-item .ic-wrap svg{ color:inherit; } @media (hover:hover){ .trust-item:hover .ic-wrap{ transform:translateY(-3px) scale(1.05); box-shadow:0 8px 16px rgba(15,32,66,.16); } } .trust-item.c-teal .ic-wrap{ background:linear-gradient(150deg,#e3f6f2,#c3ece3); color:#00897B; } .trust-item.c-blue .ic-wrap{ background:linear-gradient(150deg,#e6f2fe,#cbe6fc); color:#1E88E5; } .trust-item.c-purple .ic-wrap{ background:linear-gradient(150deg,#f3e8fc,#e6cdf8); color:#7B1FA2; } .trust-item.c-orange .ic-wrap{ background:linear-gradient(150deg,#fff1de,#ffdfb0); color:#F57C00; } /* Item ke-5 "Garansi Uang Kembali" (2026-07-28, permintaan pemilik) -- hijau dipilih karena asosiasi umum "uang kembali/refund" di UI e-commerce, dan belum dipakai warna lain di baris ini (teal/blue/purple/orange). */ .trust-item.c-green .ic-wrap{ background:linear-gradient(150deg,#e3f7e9,#c2edd0); color:#1f9d55; } /* Section promo (Lelang/Flash Sale) sebagai banner gradasi PENUH (2026-07-13, ikut referensi Figma) -- kelas baru semua (promo-*), SENGAJA tidak dicampur dengan .section-head/.head-icon/.live-badge yang dipakai halaman lain (produk_detail, po, lelang, artikel_detail, akun) supaya tidak menabrak apa pun di luar beranda.php. Dua bagian: .promo-band (kepala berwarna) + .promo-body (badan putih) -- pengganti .section-card.tint-lelang/.tint-flash yang lama (kelas itu masih ada di CSS untuk kompatibilitas tapi sudah tidak dipakai markup manapun). */ .promo-section{ margin:0 16px 14px; border-radius:16px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.08); } /* Bug ditemukan 2026-07-30 (audit responsif HP jadul layar kecil, ~320px) -- .promo-title ("Flash Sale JSM"/"Lelang") dan .promo-countdown (3 kotak angka) sebelumnya cuma flex row polos tanpa flex-wrap, jadi di layar sesempit ini judulnya kepepet sampai kepotong tengah kata ("Flash Sale" lalu "JSM" turun sendirian) alih-alih rapi. flex-wrap:wrap membiarkan countdown pindah ke baris sendiri di bawah judul kalau memang tidak muat sejajar -- tidak berpengaruh sama sekali di lebar HP normal (375px+) yang memang sudah cukup lega. */ .promo-band{ padding:14px 16px 12px; display:flex; flex-wrap:wrap; row-gap:6px; align-items:center; justify-content:space-between; } .promo-band.band-red{ background:linear-gradient(135deg,#C62828 0%,#EF5350 100%); } .promo-band.band-orange{ background:linear-gradient(135deg,#FF6B00 0%,#FF9A00 100%); } .promo-title{ display:flex; align-items:center; gap:8px; } .promo-title span{ color:#fff; font-weight:800; font-size:14.5px; } .promo-live{ display:flex; align-items:center; gap:5px; background:rgba(255,255,255,.2); border-radius:999px; padding:4px 10px; } .promo-live .dot{ width:5px; height:5px; border-radius:50%; background:#fff; animation:blink 1.2s infinite; } .promo-live span{ color:#fff; font-size:9.5px; font-weight:800; letter-spacing:.5px; } .promo-countdown{ display:flex; align-items:center; gap:4px; } .promo-countdown .lbl{ color:rgba(255,255,255,.8); font-size:10px; margin-right:2px; } .promo-countdown .d{ display:inline-flex; align-items:center; justify-content:center; width:27px; height:27px; border-radius:7px; background:rgba(255,255,255,.25); color:#fff; font-weight:800; font-size:12px; font-variant-numeric:tabular-nums; backdrop-filter:blur(4px); } .promo-countdown .sep{ color:#fff; font-weight:800; font-size:11px; } .promo-body{ background:var(--card); padding:12px; } .promo-cta{ display:flex; align-items:center; justify-content:center; gap:6px; width:100%; margin-top:10px; border-radius:11px; padding:10px; font-weight:700; font-size:12.5px; border:none; cursor:pointer; } .promo-cta.cta-red{ border:2px solid #C62828; color:#C62828; background:var(--card); } .promo-cta.cta-orange{ background:linear-gradient(135deg,#FF6B00,#FF9A00); color:#fff; } .promo-empty-jsm{ font-size:11.5px; color:var(--muted); text-align:center; padding:18px 12px; line-height:1.5; } /* Ticker pengumuman pemenang lelang (2026-07-14) -- baris tipis full-bleed dari ujung kiri ke ujung kanan layar, isi contoh/placeholder dulu (bagian 1 dokumen tidak merinci fitur ini). Border di KEEMPAT sisi (bukan cuma atas-bawah seperti percobaan pertama) supaya kelihatan jelas sebagai kontainer persegi panjang, walau tetap menempel rata ke kedua sisi layar (tidak ada margin kiri-kanan) -- beda dari .promo-section yang dibungkus radius+shadow+margin. Teks berjalan (marquee) beneran, bukan cuma dipotong "...": isi teks digandakan dua kali (satu disembunyikan dari screen reader lewat aria-hidden) lalu digeser translateX(-50%) tanpa henti -- karena kontennya persis dua salinan berdampingan, pas salinan pertama habis di kiri, salinan kedua sudah pas menyambung, jadi putarannya kelihatan mulus tanpa jeda/lompatan. */ .winner-ticker{ display:flex; align-items:center; gap:8px; background:#fff7e6; border:1px solid #ffe4b3; padding:8px 16px; color:#92620a; overflow:hidden; } .winner-ticker svg{ flex-shrink:0; color:#d97706; } .ticker-viewport{ flex:1; overflow:hidden; } .ticker-track{ display:flex; width:max-content; animation:winner-ticker-scroll 16s linear infinite; } .ticker-track span{ font-size:11px; font-weight:600; white-space:nowrap; padding-right:56px; } @keyframes winner-ticker-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } @media (prefers-reduced-motion: reduce){ .ticker-track{ animation:none; } } /* baris lelang */ .auction-card{ min-width:180px; max-width:180px; background:var(--card); border-radius:14px; overflow:hidden; flex-shrink:0; box-shadow:0 1px 3px rgba(0,0,0,0.06); } .auction-card .thumb{ position:relative; } .auction-card img{ width:100%; height:110px; object-fit:cover; display:block; background:#eee; } .auction-card .status-badge{ position:absolute; top:7px; left:7px; font-size:9px; font-weight:800; color:#fff; padding:2px 7px; border-radius:20px; letter-spacing:.3px; } .auction-card .kondisi-badge{ position:absolute; top:7px; right:7px; font-size:9px; font-weight:700; color:#fff; background:rgba(0,0,0,.55); padding:2px 6px; border-radius:20px; } .auction-card .body{ padding:10px; } .auction-card .name{ font-size:11.5px; font-weight:700; min-height:32px; line-height:1.3; } .auction-card .bid-row{ display:flex; align-items:flex-end; justify-content:space-between; margin:6px 0; } .auction-card .bid-label{ font-size:9px; color:var(--muted); text-transform:uppercase; } .auction-card .bid{ font-size:14px; font-weight:800; color:var(--navy); } .auction-card .bid-count{ font-size:10px; color:var(--muted); } .auction-card .countdown{ display:flex; align-items:center; gap:4px; background:rgba(26,35,126,.06); border-radius:10px; padding:6px 8px; margin-bottom:8px; } .auction-card .countdown.urgent{ background:#fef2f2; } .auction-card .countdown .seg-h, .auction-card .countdown .seg-m, .auction-card .countdown .seg-s{ font-size:11px; font-weight:800; color:var(--navy); font-variant-numeric:tabular-nums; } .auction-card .countdown.urgent .seg-h, .auction-card .countdown.urgent .seg-m, .auction-card .countdown.urgent .seg-s{ color:var(--red); } .auction-card .countdown .sep{ font-size:10px; font-weight:700; color:var(--navy); } .auction-card .countdown.urgent .sep{ color:var(--red); } .auction-card .btn-tawar{ width:100%; background:var(--navy); color:#fff; border:none; border-radius:10px; padding:8px; font-size:11px; font-weight:800; font-family:'Inter',sans-serif; cursor:pointer; } .live-badge{ background:var(--red); color:#fff; font-size:9px; font-weight:800; padding:2px 8px; border-radius:20px; animation:blink 1.4s infinite; } @keyframes blink{ 50%{ opacity:.45; } } /* lelang.php: kartu horizontal (spec 5.4) -- markup baru terpisah dari .auction-card (carousel horizontal-scroll di beranda.php), nilai visual sengaja diselaraskan */ .lelang-row{ display:flex; gap:12px; background:var(--card); border-radius:14px; padding:10px; box-shadow:0 1px 3px rgba(0,0,0,0.06); margin-bottom:12px; transition:box-shadow .18s ease, transform .18s ease; } @media (hover:hover){ .lelang-row:hover{ box-shadow:0 8px 20px rgba(15,32,66,.12); transform:translateY(-2px); } } .lelang-row .thumb{ position:relative; width:92px; height:92px; flex-shrink:0; border-radius:10px; overflow:hidden; } .lelang-row .thumb img{ width:100%; height:100%; object-fit:cover; display:block; background:#eee; } .lelang-row .status-badge{ position:absolute; top:6px; left:6px; font-size:9px; font-weight:800; color:#fff; padding:2px 7px; border-radius:20px; letter-spacing:.3px; } .lelang-row .status-badge.ending{ background:var(--red); } .lelang-row .status-badge.hot{ background:var(--amber); } .lelang-row .status-badge.new{ background:var(--accent); color:var(--navy); } .lelang-row .status-badge.verified{ background:var(--green); } .lelang-row .kondisi-badge{ position:absolute; bottom:6px; right:6px; font-size:9px; font-weight:700; color:#fff; background:rgba(0,0,0,.55); padding:2px 6px; border-radius:20px; } .lelang-row .body{ flex:1; min-width:0; display:flex; flex-direction:column; } .lelang-row .name{ font-size:12.5px; font-weight:700; line-height:1.3; margin-bottom:4px; } .lelang-row .bid-row{ display:flex; align-items:flex-end; justify-content:space-between; margin:0 0 6px; } .lelang-row .bid-label{ font-size:9px; color:var(--muted); text-transform:uppercase; } .lelang-row .bid{ font-size:14px; font-weight:800; color:var(--navy); } .lelang-row .bid-count{ font-size:10px; color:var(--muted); } .lelang-row .countdown{ display:flex; align-items:center; gap:4px; background:rgba(26,35,126,.06); border-radius:10px; padding:6px 8px; margin-bottom:8px; } .lelang-row .countdown.urgent{ background:#fef2f2; } .lelang-row .countdown .seg-h, .lelang-row .countdown .seg-m, .lelang-row .countdown .seg-s{ font-size:11px; font-weight:800; color:var(--navy); font-variant-numeric:tabular-nums; } .lelang-row .countdown.urgent .seg-h, .lelang-row .countdown.urgent .seg-m, .lelang-row .countdown.urgent .seg-s{ color:var(--red); } .lelang-row .countdown .sep{ font-size:10px; font-weight:700; color:var(--navy); } .lelang-row .countdown.urgent .sep{ color:var(--red); } .lelang-row .btn-tawar{ width:100%; background:var(--navy); color:#fff; border:none; border-radius:10px; padding:8px; font-size:11px; font-weight:800; font-family:'Inter',sans-serif; cursor:pointer; } .lelang-row .btn-tawar:disabled{ opacity:.6; cursor:not-allowed; } /* po.php: kartu horizontal PO (bagian 5.5) -- markup sendiri turunan .lelang-row, progress bar kuota mengikuti pola .flash-card di beranda.php */ .po-row{ display:flex; gap:12px; background:var(--card); border-radius:14px; padding:10px; box-shadow:0 1px 3px rgba(0,0,0,0.06); margin-bottom:12px; transition:box-shadow .18s ease, transform .18s ease; } @media (hover:hover){ .po-row:hover{ box-shadow:0 8px 20px rgba(15,32,66,.12); transform:translateY(-2px); } } .po-row .thumb{ position:relative; width:92px; height:92px; flex-shrink:0; border-radius:10px; overflow:hidden; } .po-row .thumb img{ width:100%; height:100%; object-fit:cover; display:block; background:#eee; } .po-row .badge-tetap{ position:absolute; top:6px; left:6px; font-size:9px; font-weight:800; color:#fff; background:var(--navy); padding:2px 7px; border-radius:20px; letter-spacing:.3px; } .po-row .body{ flex:1; min-width:0; display:flex; flex-direction:column; } .po-row .name{ font-size:12.5px; font-weight:700; line-height:1.3; margin-bottom:4px; } .po-row .harga{ font-size:14px; font-weight:800; color:var(--navy); } .po-row .deposit-label{ font-size:9.5px; color:var(--muted); font-weight:700; margin-bottom:6px; } .po-row .progress-kuota{ height:6px; background:var(--border); border-radius:10px; overflow:hidden; margin-bottom:4px; } .po-row .progress-bar{ height:100%; background:var(--navy); border-radius:10px; } .po-row .progress-label{ font-size:9.5px; color:var(--muted); font-weight:700; margin-bottom:8px; } .po-row .btn-pesan{ width:100%; background:var(--navy); color:#fff; border:none; border-radius:10px; padding:8px; font-size:11px; font-weight:800; font-family:'Inter',sans-serif; cursor:pointer; text-align:center; text-decoration:none; display:block; box-sizing:border-box; } .po-row .btn-pesan:disabled{ opacity:.6; cursor:not-allowed; } .po-alert{ display:flex; align-items:center; gap:10px; background:#fef9c3; color:#854d0e; border-radius:12px; padding:10px 12px; margin-bottom:12px; font-size:11.5px; font-weight:700; text-decoration:none; } .po-alert svg{ flex-shrink:0; } /* ========================================================== Komponen tambahan khusus produk_detail.php (fondasi: produk_detail.html prototipe; tab/video/sosmed/ulasan mengikuti zip Figma "Detail Product Menu") ========================================================== */ .pd-topbar{ background:var(--card); display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; position:sticky; top:0; z-index:20; border-bottom:1px solid var(--border); } .icon-circle{ width:34px; height:34px; border-radius:50%; background:#f0f0f0; border:none; display:flex; align-items:center; justify-content:center; color:var(--text); cursor:pointer; flex-shrink:0; } .pd-icons{ display:flex; align-items:center; gap:8px; flex-shrink:0; } .pd-tabs{ display:flex; border-bottom:1px solid var(--border); } .pd-tab{ flex:1; padding:11px; text-align:center; font-size:13px; font-weight:700; color:var(--muted); background:none; border:none; border-bottom:2px solid transparent; cursor:pointer; font-family:'Inter',sans-serif; } .pd-tab.active{ color:var(--navy); border-bottom-color:var(--navy); } .pd-pane{ display:none; } .pd-pane.active{ display:block; } /* Layout dua kolom produk_detail.php di desktop (2026-07-29) -- lihat override di @media min-width:900px untuk versi sungguhan (grid kiri-kanan); di mobile/ tablet sempit ini cuma div polos (block, urut ke bawah seperti sebelumnya), TIDAK mengubah apa pun di layar sempit. */ .pd-layout{ display:block; } .pd-desktop-actions{ display:none; } /* tombol Pesan/Keranjang/Beli Sekarang inline -- cuma dipakai di desktop, mobile tetap pakai .actionbar mengambang di bawah */ .btn-kontak-seller{ display:flex; align-items:center; justify-content:center; gap:8px; background:#25d366; color:#fff; font-weight:700; font-size:13px; border-radius:12px; padding:12px; margin-bottom:14px; text-decoration:none; } /* Lightbox foto produk_detail.php (2026-07-29) -- overlay fullscreen, zoom (pinch 2 jari di HP, scroll-wheel/klik-dobel di desktop) + geser (1 jari/drag mouse) ditangani penuh lewat JS (lihat script di bawah produk_detail.php), CSS di sini cuma kerangka visual + transisi transform-nya. */ .pd-lightbox{ display:none; position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.95); align-items:center; justify-content:center; touch-action:none; overscroll-behavior:contain; } .pd-lightbox.active{ display:flex; } .pd-lightbox-stage{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; overflow:hidden; } .pd-lightbox-stage img{ max-width:100%; max-height:100%; object-fit:contain; user-select:none; transform-origin:center center; will-change:transform; /* transisi dimatikan SAAT drag/pinch aktif lewat kelas .no-anim (JS toggle) -- kalau transisi tetap aktif selama jari bergerak, foto terasa "kelambatan"/ lag mengikuti jari, transisi cuma dipakai untuk snap-back yang mulus setelah jari dilepas (balik ke batas zoom/posisi wajar). */ transition:transform .25s ease; } .pd-lightbox-stage img.no-anim{ transition:none; } .pd-lightbox-close, .pd-lightbox-nav{ position:absolute; z-index:201; background:rgba(255,255,255,.12); color:#fff; border:none; border-radius:50%; width:42px; height:42px; cursor:pointer; display:flex; align-items:center; justify-content:center; } .pd-lightbox-close{ top:16px; right:16px; } .pd-lightbox-nav.prev{ left:16px; top:50%; transform:translateY(-50%); } .pd-lightbox-nav.next{ right:16px; top:50%; transform:translateY(-50%); } .pd-lightbox-counter{ position:absolute; bottom:20px; left:50%; transform:translateX(-50%); background:rgba(255,255,255,.15); color:#fff; font-size:12px; font-weight:600; padding:4px 12px; border-radius:20px; } @media (max-width:599px){ /* Panah prev/next disembunyikan di HP -- di layar sempit itu cuma menutupi foto, swipe jari sudah cukup jadi satu-satunya cara pindah foto. */ .pd-lightbox-nav{ display:none; } } .pd-gallery{ position:relative; background:var(--card); } .pd-gallery img{ width:100%; aspect-ratio:1; object-fit:cover; display:block; background:#eee; } .pd-counter{ position:absolute; bottom:10px; right:10px; background:rgba(0,0,0,.55); color:#fff; font-size:11px; font-weight:600; padding:2px 9px; border-radius:20px; } .pd-thumbs{ display:flex; gap:8px; padding:10px 16px; overflow-x:auto; scrollbar-width:none; } .pd-thumbs::-webkit-scrollbar{ display:none; } .pd-thumb{ width:52px; height:52px; border-radius:10px; object-fit:cover; flex-shrink:0; border:2px solid transparent; cursor:pointer; background:#eee; } .pd-thumb.active{ border-color:var(--navy); } /* Galeri gabungan foto+video (2026-07-12) -- slide video ditandai kotak gelap berikon play, main area /