:root {
--hijau: #006B3D;
--emas: #D4AF37;
--krem: #ffffff ;
--abu-lembut: #f4f4f4;
--teks: #333;
--putih: #fff;
--batas: #e0e0e0;
--merah: #E53935;
}
.mode-gelap {
--hijau: #009E57;
--krem: #1a1a1a;
--abu-lembut: #2a2a2a;
--teks: #eee;
--putih: #2c2c2c;
--batas: #444;
--merah: #ff5c5c;
}
* {margin:0; padding:0; box-sizing:border-box; font-family:'Segoe UI',sans-serif;}
body {background:var(--krem); color:var(--teks); line-height:1.6; transition:.3s;}
a {text-decoration:none;}
.container {max-width:1200px; margin:0 auto; padding:0 20px;}
/* === PITA MOTIF PALING ATAS & BAWAH — DIPASTIKAN TAMPIL PENUH === */
.pita-motif,
.pita-bawah {
height: 32px !important;
min-height: 32px !important;
max-height: 32px !important;
display: block !important;
visibility: visible !important;
overflow: visible !important;
line-height: 32px !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
background: linear-gradient(90deg, #8B2323, #D4AF37, #006B3D, #8B2323);
background-size: 200% 100%;
animation: pita-gerak 20s linear infinite;
border-bottom: 2px solid #B8860B;
}
@keyframes pita-gerak {
0% {background-position:0 0;}
100% {background-position:200% 0;}
}
/* === HEADER UTAMA — JARAK KONSISTEN, TIDAK TURUN KE KONTEN === */
.header-baru {
background: var(--putih);
box-shadow: 0 3px 10px rgba(0,0,0,.08);
padding: 14px 0 0 !important; /* ✅ UBAH: 10px → 0px */
position: sticky;
top: 0;
z-index: 990;
margin: 0;
margin-bottom: 20px !important; /* biarkan ini untuk jarak ke konten utama */
min-height: auto !important;
transition: padding 0.3s ease;
}
.header-baru.menu-sembunyi {
padding-bottom: 0 !important;
margin-bottom: 20px !important;
min-height: 80px;
}
.header-baru.menu-sembunyi .header-baris-atas {
margin-bottom: 20px !important;
}
.header-baris-atas {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
margin-bottom: 0; /* ✅ UBAH: 16px → 0px */
transition: margin-bottom 0.3s ease;
}
/* Logo */
.logo-grup {
display: flex;
align-items: center;
gap: 12px;
}
.logo-kki {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.logo-teks {
font-size: 2rem;
font-weight: 900;
color: #a53f04;
letter-spacing: 1px;
text-shadow: 0 0 6px rgba(255,255,255,0.4);
}
/* === Warna Putih di Mode Gelap === */
.mode-gelap .logo-teks {
color: #ffffff !important;
text-shadow: 0 0 6px rgba(255,255,255,0.4);
}
.logo-slogan {
font-size: .75rem;
color: var(--teks);
opacity: 0.7;
}
.logo-pemisah {
width: 2px;
height: 40px;
background: linear-gradient(#8B2323, #D4AF37, #006B3D);
}
.tombol-mode {
background: none;
border: none;
font-size: 20px;
cursor: pointer;
padding: 6px 10px;
border-radius: 6px;
background: var(--abu-lembut);
}
/* === FORM PENCARIAN === */
#formPencarian {
display: flex !important;
align-items: center;
gap: 0;
border: 1px solid var(--batas);
border-radius: 25px;
overflow: hidden;
background: var(--putih);
width: 100%;
max-width: 100%;
}
.pilih-pencarian {
display: inline-block !important;
height: 44px;
padding: 0 12px;
border: none;
border-right: 1px solid var(--batas);
background: var(--putih);
font-size: 14px;
color: var(--teks);
white-space: nowrap;
flex-shrink: 0; /* ✅ Jangan mengecil */
flex: 0 0 auto; /* ✅ Lebar sesuai isi, tidak dipaksa */
min-width: 110px; /* ✅ Lebar aman */
max-width: 140px; /* ✅ Jangan terlalu lebar */
border-radius: 0;
outline: none;
-webkit-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 14px;
padding-right: 30px;
}
.mode-gelap .pilih-pencarian {
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ccc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
}
.input-pencarian {
flex: 1; /* ✅ Ambil sisa ruang */
min-width: 0; /* ✅ Bisa mengecil wajar */
height: 44px;
padding: 0 12px;
border: none;
background: transparent;
font-size: 14px;
color: var(--teks);
outline: none;
box-shadow: none;
}
.tombol-pencarian {
height: 44px;
width: 50px;
min-width: 50px; /* ✅ KUNCI: TIDAK BOLEH mengecil! */
border: none;
background: var(--hijau);
color: #fff;
font-size: 18px;
cursor: pointer;
flex-shrink: 0; /* ✅ Tetap ukuran asli */
border-radius: 0;
display: flex;
align-items: center;
justify-content: center;
}
/* === RESPONSIVE HP === */
@media (max-width: 768px) {
#formPencarian {
flex-wrap: nowrap !important;
}
.pilih-pencarian {
min-width: 90px; /* ✅ Lebar lebih kecil di HP */
max-width: 110px; /* ✅ Batas aman */
padding-left: 8px;
padding-right: 28px;
font-size: 13px;
}
.input-pencarian {
padding: 0 8px;
font-size: 14px;
}
.tombol-pencarian {
width: 48px; /* ✅ Sedikit lebih kecil tapi masih utuh */
min-width: 48px;
}
}
/* === MENU NAVIGASI — TAMPIL PENUH, TIDAK TERPOTONG === */
.menu-atas {
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid var(--batas);
padding-top: 10px;
padding-bottom: 8px !important;
margin-top: 4px;
transition: all 0.3s ease-in-out;
transform: translateY(0);
opacity: 1;
height: auto;
overflow: visible !important;
position: relative;
background: var(--putih); /* ✅ Mengikuti variabel tema */
}
/* ✅ TAMBAHKAN BAGIAN INI DI BAWAHNYA */
/* === Mode Gelap: Menu Latar Gelap + Teks Putih === */
.mode-gelap .menu-atas {
background: var(--putih); /* jadi #2c2c2c */
border-top-color: var(--batas);
}
/* ✅ Teks menu jadi PUTIH di mode gelap */
.mode-gelap .daftar-menu a {
color: var(--teks); /* otomatis jadi #eee dari variabel */
}
/* ✅ Saat hover tetap terlihat jelas */
.mode-gelap .daftar-menu a:hover {
background: rgba(0,158,87,.15);
color: var(--hijau); /* jadi #009E57 */
}
/* ✅ Submenu juga ikut gelap */
.mode-gelap .submenu {
background: #2a2a2a;
border-color: #444;
}
.mode-gelap .submenu a {
color: #eee;
}
.mode-gelap .submenu a:hover {
background: rgba(0,158,87,.15);
color: var(--hijau);
}
.menu-atas.sembunyi {
transform: translateY(-100%);
opacity: 0;
height: 0 !important;
max-height: 0 !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
border-top: none !important;
border-bottom: none !important;
overflow: hidden !important;
pointer-events: none;
line-height: 0;
font-size: 0;
}
.daftar-menu {
display: flex;
list-style: none;
gap: 6px;
flex-wrap: wrap;
}
.daftar-menu > li {position:relative;}
.daftar-menu a {
display: block;
padding: 8px 14px;
color: var(--teks);
font-weight: 500;
border-radius: 6px;
}
.daftar-menu a:hover {
background: var(--abu-lembut);
color: var(--hijau);
}
.label-baru {
background: var(--merah);
color: #fff;
font-size: .7rem;
padding: 1px 6px;
border-radius: 10px;
margin-left: 4px;
}
/* Submenu Turun */
.menu-turun {
position: relative;
}
.menu-turun > a {
cursor: pointer;
}
.submenu {
position: absolute;
top: 100%;
left: 0;
min-width: 200px;
background: var(--putih);
box-shadow: 0 6px 16px rgba(0,0,0,.12);
border-radius: 8px;
padding: 8px 0;
display: none;
z-index: 9999;
}
.menu-turun:hover .submenu {
display: block;
}
.submenu li {
list-style: none;
}
.submenu a {
padding: 8px 16px;
}
/* Wishlist Kanan */
.menu-ikon-kanan {
display: flex;
align-items: center;
gap: 14px;
}
.tombol-wishlist {
padding: 6px 12px;
border: 1px solid var(--batas);
border-radius: 20px;
color: var(--teks);
font-weight: 500;
display: flex;
align-items: center;
gap: 4px;
position: relative;
text-decoration: none;
}
.tombol-wishlist:hover {
background: rgba(255,220,220,.15);
border-color: var(--merah);
}
.lencana-wish {
position: absolute;
top: -8px;
right: -8px;
background: var(--merah);
color: #fff;
font-size: .7rem;
font-weight: bold;
min-width: 18px;
height: 18px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
/* === TATA LETAK === */
.tata-letak {
display: grid;
grid-template-columns: 260px 1fr;
gap: 24px;
margin: 24px auto;
}
.kotak-kategori {
background: var(--putih);
border-radius: 10px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.kotak-kategori h3 {color:var(--hijau); margin-bottom:14px;}
.daftar-kategori li {
padding: 8px 0;
border-bottom: 1px solid var(--batas);
list-style: none;
}
.daftar-kategori a {
display: block;
padding: 4px 6px;
border-radius: 4px;
color: var(--teks);
}
.daftar-kategori a:hover,
.daftar-kategori a.aktif {
background: var(--abu-lembut);
color: var(--hijau);
}
/* === SLIDER — KHUSUS HALAMAN BERANDA DIASET TERSEKARANG === */
.slider-penuh {
width: 100%;
height: 400px !important; /* ✅ Tidak 90vh lagi — ukuran wajar */
min-height: 420px !important;
position: relative;
overflow: hidden;
margin-top: 0 !important;
clear: both !important;
}
.slider-penuh-bungkus {width:100%; height:100%; position:relative;}
.slide-penuh {
width:100%; height:100%; position:absolute; top:0; left:0;
opacity:0; transition:opacity 0.5s ease-in-out;
}
.slide-penuh.aktif {opacity:1;}
.slide-penuh img {
width:100%; height:100%;
object-fit:cover; /* ✅ Gambar penuh tidak terpotong */
display:block;
}
.teks-slide-penuh {
position:absolute; bottom:4px; left:50%; transform:translateX(-50%);
background:rgba(0,0,0,0.6); color:#fff; padding:2px 16px;
font-size:13px; border-radius:4px; white-space:nowrap;
}
.tombol-slide {
position:absolute; top:50%; transform:translateY(-50%);
background:rgba(0,0,0,0.4); color:#fff; border:none;
width:28px; height:28px; border-radius:50%; font-size:12px;
cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:10;
}
.tombol-slide:hover {background:rgba(0,0,0,0.7);}
.tombol-slide.kiri {left:8px;}
.tombol-slide.kanan {right:8px;}
/* === PRODUK === */
.judul-bagian {
font-size:1.4rem;
color:var(--hijau);
margin:30px 0 18px;
padding-bottom:8px;
border-bottom:2px solid var(--emas);
display:inline-block;
}
.produk-kisi {
display: grid;
grid-template-columns:repeat(auto-fill, minmax(220px,1fr));
gap:20px;
}
.produk-kartu {
background:var(--putih);
border-radius:10px;
overflow:hidden;
box-shadow:0 2px 8px rgba(0,0,0,.05);
cursor:pointer;
transition:.2s;
}
.produk-kartu:hover {
transform:translateY(-4px);
box-shadow:0 6px 16px rgba(0,0,0,.1);
}
.produk-gambar {
height:180px;
background:var(--abu-lembut);
display:flex;
align-items:center;
justify-content:center;
font-size:2.5rem;
}
.produk-gambar img {width:100%; height:100%; object-fit:cover;}
.produk-isi {padding:16px;}
.produk-nama {font-weight:600; margin-bottom:6px; color:var(--teks);}
.produk-harga {
color:var(--hijau);
font-weight:bold;
font-size:1.05rem;
margin-bottom:10px;
}
.wishlist-ikon {
border:none;
background:none;
font-size:1.2rem;
cursor:pointer;
color: var(--teks);
}
.wishlist-ikon.aktif {color:var(--merah);}
/* === BLOG === */
.blog-kisi {
display:grid;
grid-template-columns:repeat(auto-fill, minmax(300px,1fr));
gap:20px;
}
.blog-kartu {
background:var(--putih);
border-radius:10px;
overflow:hidden;
box-shadow:0 2px 8px rgba(0,0,0,.05);
}
.blog-gambar {
height:160px;
background:var(--abu-lembut);
display:flex;
align-items:center;
justify-content:center;
font-size:2rem;
}
.blog-gambar img {width:100%; height:100%; object-fit:cover;}
.blog-kategori {
display:inline-block;
background:var(--emas);
color: #111;
font-size:.85rem;
padding:2px 10px;
border-radius:20px;
margin:10px 0 6px 10px;
}
.blog-judul {padding:0 10px; font-size:1.1rem; color:var(--teks);}
.blog-isi {padding:10px; font-size:.95rem; color:var(--teks); opacity: 0.8;}
.baca-selengkapnya {
padding:10px;
color:var(--hijau);
display:inline-block;
font-weight:500;
}
/* === PETA === */
.peta-bingkai {
background:var(--putih);
padding:20px;
border-radius:10px;
margin-bottom:40px;
}
/* === FOOTER === */
.footer {
background:#2c2c2c;
color:#ddd;
padding:20px;
text-align:center;
margin-top:40px;
}
/* === PINTASAN NAVIGASI === */
.pintasan-nav {
position: fixed !important;
z-index: 9999 !important;
background: var(--putih);
box-shadow: 0 -2px 10px rgba(0,0,0,.1);
border-radius: 16px;
padding: 8px 4px;
}
.pintasan-item {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 2px;
color: var(--teks);
opacity: 0.8;
text-decoration: none;
padding: 6px 10px;
border-radius: 8px;
transition: all 0.2s;
}
.pintasan-item:hover {
background: rgba(0,107,61,.08);
color: var(--hijau);
opacity: 1;
}
.pintasan-ikon {
font-size: 20px;
line-height: 1;
}
.pintasan-teks {
font-size: 11px;
}
/* === TOMBOL SCROLL KE ATAS === */
.tombol-scroll-atas {
position: fixed !important;
z-index: 9998 !important;
border: none;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--hijau);
color: #fff;
font-size: 18px;
cursor: pointer;
box-shadow: 0 3px 10px rgba(0,0,0,.2);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.tombol-scroll-atas.tampil {
opacity: 1;
visibility: visible;
}
.tombol-scroll-atas:hover {
filter: brightness(.9);
transform: scale(1.05);
}
/* Mode Gelap untuk Pintasan */
.mode-gelap .pintasan-nav {
background: var(--putih);
box-shadow: 0 -2px 10px rgba(0,0,0,.3);
}
.mode-gelap .pintasan-item {
color: var(--teks);
}
.mode-gelap .pintasan-item:hover {
background: rgba(0,158,87,.15);
color: var(--hijau);
}
/* === RESPONSIF HP — PITA BAWAH TIDAK MENUTUPI NAVIGASI === */
@media (min-width: 769px) {
.pintasan-nav {
right: 16px;
bottom: 24px;
flex-direction: column;
border-radius: 16px;
padding: 10px 6px;
}
.tombol-scroll-atas {
bottom: 24px;
right: 24px;
}
}
@media (max-width: 768px) {
body {
padding-bottom: 85px !important; /* ✅ Beri ruang bawah agar pita tidak tertutup navigasi */
}
.pintasan-nav {
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
display: flex !important;
flex-direction: row !important;
justify-content: space-around !important;
align-items: center !important;
border-radius: 16px 16px 0 0 !important;
padding: 10px 4px !important;
width: 100% !important;
box-shadow: 0 -2px 10px rgba(0,0,0,.15) !important;
}
.pintasan-item {
display: flex !important;
flex-direction: column !important;
padding: 6px 12px !important;
gap: 4px !important;
}
.pintasan-ikon {
font-size: 22px !important;
}
.pintasan-teks {
font-size: 11px !important;
}
.tombol-scroll-atas {
bottom: 90px;
right: 16px;
}
/* ✅ Pita bawah di HP — beri jarak aman */
.pita-bawah {
margin-bottom: 60px !important;
position: relative !important;
z-index: 1 !important;
}
}
@media(max-width:900px){
.tata-letak {grid-template-columns:1fr;}
.header-baris-atas {flex-direction:column; align-items:stretch;}
.menu-atas {flex-direction:column; gap:12px;}
.daftar-menu {justify-content:center;}
.kotak-pencarian {width:100%; min-width:unset;}
}
/* === PERBAIKAN WARNA TEKS WISHLIST DI MODE GELAP === */
.wishlist-nama-toko,
.wishlist-nama-produk,
.wishlist-info,
.wishlist-judul,
.wishlist-total-label,
.wishlist-subtotal-label,
.wishlist-pesan-teks,
.wishlist-breadcrumb,
.wishlist-harga {
color: var(--teks) !important;
}
.wishlist-harga-kanan,
.wishlist-subtotal-nilai,
.wishlist-total-nilai {
color: #ff6b6b !important;
}
.wishlist-produk-baris,
.wishlist-penjual-bungkus {
border-color: var(--batas) !important;
}
/* === PERBAIKAN TEKS HALAMAN DETAIL PRODUK === */
.detail-kategori,
.detail-nama,
.detail-dilihat {
color: var(--teks) !important;
}
.detail-harga {
color: var(--hijau) !important;
font-weight: bold;
}
.mode-gelap .detail-kategori,
.mode-gelap .detail-nama,
.mode-gelap .detail-dilihat {
color: var(--teks) !important;
}
.mode-gelap .detail-harga {
color: var(--hijau) !important;
}
/* === PERBAIKAN TEKS DI KARTU PRODUK KATALOG === */
.produk-nama a,
.produk-nama {
color: var(--teks) !important;
text-decoration: none !important;
}
.produk-nama a:hover {
color: var(--hijau) !important;
}
.produk-harga {
color: var(--hijau) !important;
font-weight: bold;
}
.produk-dilihat {
color: var(--teks) !important;
opacity: 0.75;
}
.mode-gelap .produk-nama a,
.mode-gelap .produk-nama {
color: var(--teks) !important;
}
.mode-gelap .produk-harga {
color: var(--hijau) !important;
}
.mode-gelap .produk-dilihat {
color: var(--teks) !important;
opacity: 0.7;
}
/* === FOOTER SELALU DI BAWAH LAYAR === */
html, body {
height: 100%;
margin: 0;
display: flex;
flex-direction: column;
}
.tata-letak,
.container {
flex: 1;
}
.footer {
background: var(--krem);
color: var(--teks);
padding: 18px 20px;
text-align: center;
margin-top: auto;
border-top: 1px solid var(--batas);
}
.footer p {
margin: 0;
font-size: 14px;
}
/* === PITA MOTIF DI BAWAH FOOTER === */
.pita-bawah {
margin-top: 0;
border-top: none;
border-bottom: none;
}
/* === PEMBATAS MOTIF HALAMAN BERANDA === */
.pembatas-motif {
width: 100% !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
display: block !important;
background: transparent !important;
visibility: visible !important;
}
.pembatas-motif img {
width: 100% !important;
height: auto !important;
max-height: 50px !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
}