:root{
    --main-color: #e72463;
    --box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    outline: none;
    text-transform: capitalize;
    transition: all .2s linear;
}
*::selection{
    background-color: var(--main-color);
    color: #fff;
}
html{
    font-size: 62.5%;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scroll-padding-top: 4rem;
}
section{
    padding: 3rem 9%;
}
.btn{
    display: inline-block;
    padding: 1rem 3rem;
    margin-top: 1rem;
    background-color: #e72463;
    color: #fff;
    cursor: pointer;
    width: 200px;
    text-align: center;
    position: relative;
    z-index: 100;
    font-size: 1.7rem;
}
/* Style untuk tombol Login */
.btn-login {
    background: #27ae60;
    color: #fff !important;
    border-radius: .5rem;
    padding: .5rem 1.5rem;
}
.btn-login:hover {
    background: #2ecc71;
}

/* Style untuk tombol Logout */
.btn-logout {
    background: #c0392b;
    color: #fff !important;
    border-radius: .5rem;
    padding: .5rem 1.5rem;
}
.btn-logout:hover {
    background: #e74c3c;
}
.btn::before{
    position: absolute;
    content: '';
    width: 0%;
    height: 100%;
    background-color: #000;
    left: 0;
    top: 0;
    transition: .5s;
    z-index: -10;
}
.btn:hover::before{
    width: 100%;
}
.heading{
    text-align: center;
    color: var(--main-color);
    font-size: 3rem;
    padding: 1rem 0;
}
header{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 9%;
    transition: .5s;
    transform: translateY(0); /* Posisi default (terlihat) */
    transition: transform 0.3s ease-out
}
/* Class ini akan ditambahkan oleh JavaScript saat scroll ke bawah */
header.header-hidden {
    transform: translateY(-100%); /* Geser header ke atas (sembunyi) */
}


header .navbar a{
    font-size: 2rem;
    margin-left: 2.5rem;
    color: var(--main-color);
}
header .navbar a:hover,
header i:hover,
header #menu-bar:hover{
    color: #000;
}
header .icon{
    display: flex;
}
header .icon i{
    font-size: 2rem;
    margin: 0 .5rem;
    color: var(--main-color);
    cursor: pointer;
}
.menu-bar{
    font-size: 2rem;
    color: var(--main-color);
    cursor: pointer;
    margin-left: .6rem;
    display: none; /* Sembunyikan di layar besar */
}

.menu-bar {
  color: #e84393; /* samakan warna dengan icon lain */
  cursor: pointer; /* biar kelihatan bisa diklik */
  margin-left: 10px; /* kasih jarak */
}
/* ==== STYLE BARU UNTUK SECTION HOME (2 KOLOM) ==== */

/* Ini adalah style untuk section 'home-new' yang Anda gunakan di index.php */
.home-new {
    display: flex;
    flex-wrap: wrap; /* Agar responsif di HP */
    align-items: center;
    gap: 3rem;
    padding-top: 15rem; /* PENTING: Memberi jarak dari header fixed Anda */
    padding-bottom: 5rem;
    min-height: 90vh;
}

.home-new-content {
    flex: 1 1 50rem; /* Konten teks mengambil 50% ruang */
}

.home-new-content h1 {
    font-size: 5rem;
    color: #333;
    line-height: 1.2;
}
.home-new-content h2 {
    font-size: 2.5rem;
    color: var(--main-color);
    margin-bottom: 1rem;
}
.home-new-content p {
    font-size: 1.6rem;
    color: #666;
    line-height: 1.8;
    margin-bottom: 2rem;
    text-transform: none;
}

/* Style untuk keunggulan baru */
.usp-list-new {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin: 2rem 0;
}
.usp-item-new {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.usp-item-new i {
    font-size: 2.2rem;
    color: var(--main-color);
    width: 30px;
    text-align: center;
}
.usp-item-new span {
    font-size: 1.6rem;
    color: #333;
    font-weight: 600;
    text-transform: none;
}

/* Tombol Hijau (seperti Azka Florist) */
.btn-green {
    background: #27ae60;
    width: auto;
    color: #fff; /* Pastikan teksnya putih */
}
.btn-green:hover {
    background: #2ecc71;
}

/* Kolom Gambar */
.home-new-image {
    flex: 1 1 20rem; /* Gambar mengambil 40% ruang */
    text-align: center;
}
.home-new-image img {
    width: 90%;
    max-width: 400px; /* Batasi lebar gambar */
    border-radius: 1rem;
    box-shadow: var(--box-shadow);
}
.home-new-content {
    flex: 1 1 50rem; 
}

/* ==== STYLE BARU UNTUK SECTION HOME (2 KOLOM) ==== */
.home-new {
    display: flex;
    flex-wrap: wrap; 
    align-items: center;
    gap: 3rem;
    min-height: 90vh;
    
    /* Latar belakang dipindahkan ke sini */
    background: rgba(230, 230, 250, 0.5); /* Contoh: Lavender transparan (ganti warnanya) */
    
    /* Padding untuk seluruh section, TERMASUK padding-top 15rem */
    padding: 15rem 9% 5rem 9%; 
}
.home .detail {
    display: none; /* Sembunyikan kotak transparan lama */
}

/* ==== AKHIR STYLE BARU ==== */
.services{
    padding: 6%;
}
.services .box-container{
    display: grid;
    /* Kita buat 2 kolom, minimal 40rem */
    grid-template-columns: repeat(auto-fit, minmax(40rem, 1fr));
    gap: 1.5rem; /* Jarak antar kotak */
    align-items: center;
    justify-content: center;
}
.services .box-container .box{
    box-shadow: var(--box-shadow);
    border-radius: .5rem;
    margin-top: 3rem;
    display: flex;
    align-items: center; /* Teks dan gambar rata tengah vertikal */
    padding: 2rem;
    border-bottom: 5px solid var(--main-color);
}
.services .box-container .box .icon {
    width: 250px;       /* <-- KITA TETAPKAN LEBARNYA 250px */
    flex-shrink: 0;   /* <-- Jangan biarkan kotaknya 'menciut' */
    padding-right: 2rem; /* Jarak dari gambar ke garis */
}

/* Ini mengatur GAMBAR di dalam kotak gambar */
.services .box-container .box .icon img{
    width: 100%;       /* <-- Lebar 100% DARI KOTAK (yaitu 250px) */
    height: auto;      /* <-- TINGGI OTOMATIS (INI KUNCINYA AGAR TIDAK TEPOTONG) */
    border-radius: .5rem;
    display: block; /* Mencegah spasi aneh di bawah gambar */
}
.services .box-container .box .detail{
    flex: 1; /* Teks mengambil sisa ruang */
    border-left: 1px solid #ccc; /* Garis pemisah */
    padding-left: 2rem;
}
.services .box-container .box h4{
    font-size: 2.2rem;
    color: var(--main-color);
    text-transform: capitalize;
}
.services .box-container .box span{
    font-size: 1.6rem;
    color: #666;
    text-transform: none; /* Agar deskripsi tidak 'capitalize' */
}

.about{
    padding: 8% 3%;
}
.about .row{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(40rem, 1fr));
    align-items: center;
    text-align: center;
}
.about .row .box{
    display: flex;
    gap: 1rem;
    align-items: stretch; /* Ini membuat container gambar sama tinggi */
}
.about .row .box img{
    width: 50%;
    /* height: 100%; <-- INI SALAH, JANGAN PAKAI INI */
    object-fit: cover; /* <-- INI YANG BENAR, agar gambar tidak gepeng */
}
.about .row .box .img1{
    margin-top: -5rem; /* Perbaikan typo spasi */
}
.about .row .content{
    margin: 1rem;
    padding-left: 3rem; /* Ini untuk menggeser teks menjauhi gambar */
}
.about .row .content span{
    color: #76a713;
    font-size: 1.7rem;
}
.about .row .content h3{
    font-weight: 500;
    color: var(--main-color);
    font-size: 4.5rem;
}
.about .row .content p{
    color: #000;
    font-size: 1.8rem;
    padding: 1rem;
    font-style: italic;
    line-height: 1.8;
}
.about .row .content .buttons{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.about .row .content .buttons .btn{
    margin: 1rem;
}
.shop .box-container{
    margin: 3rem 0;
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(35rem, 1fr));
    gap: 1rem;
    align-items: center;
}
.shop .box-container .box{
    position: relative;
    width: 100%;
    overflow: hidden;
    cursor: pointer;
    transition: .5s;
    margin: 1rem;
    text-align: center;
    box-shadow: var(--box-shadow);
    height: 450px;
}
.shop .box-container .box img{
    width: 100%;
    height: 350px;
    margin: .7rem;
    border-radius: 15px;
    display: inline-block;
    transition: .5s;
}
.shop .box-container .box:hover img{
    transform: scale(1.1);
}
.shop .box-container .box .price{
    position: absolute;
    text-align: center;
    top: 5%;
    padding: .5rem 1rem;
    font-size: 16px;
    color: #fff;
    background-color: var(--main-color);
}
.shop .box-container .box .detail{
    width: 100%;
    position: relative;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem 1rem 1rem;
    padding-top: 15px;
}
.shop .box-container .box h1{
    font-size: 2rem;
    color: #000;
}

/* ==== INI PERBAIKAN UNTUK KARTU PRODUK DI KATEGORI ==== */
.shop .box-container .box .detail .icon {
    display: flex; /* Memposisikan ikon di tengah */
    justify-content: center;
    align-items: center;
    gap: 1.5rem; /* Jarak antar ikon */
    padding-bottom: 1rem;
    border-bottom: 1px solid #eee; /* Garis pemisah rapi */
    margin-bottom: 1rem;
}
.shop .box-container .box .detail .icon i,
.shop .box-container .box .detail .icon button {
    font-size: 1.5rem; /* Samakan ukuran font */
    cursor: pointer;
    margin: 0; /* Hapus margin lama */
    color: #666; /* Warna ikon default */
}
.shop .box-container .box .detail .icon i:hover,
.shop .box-container .box .detail .icon button:hover {
    color: var(--main-color);
}

/* Mengatur Tombol Admin (Edit, Hapus) */
.shop .box-container .box .detail .admin-buttons {
    display: flex; /* PENTING: Membuat "Edit" dan "Hapus" berdampingan */
    gap: 1rem; /* Memberi jarak antar tombol */
    margin-top: 0; /* Hapus margin atas */
}

/* Mengatur ukuran tombol di dalam .admin-buttons */
.shop .box-container .box .detail .admin-buttons .btn {
    flex: 1; /* Tombol berbagi ruang secara merata */
    font-size: 1.5rem; /* Sedikit perkecil font */
    padding: 0.8rem; /* Perkecil padding */
    margin-top: 0; /* Hapus margin atas default dari .btn */
}
/* ==== AKHIR PERBAIKAN ==== */
.blog .box .img-box {
    overflow: hidden; /* Sembunyikan gambar yg 'luber' */
    height: 300px;    /* Atur tinggi KOTAK gambar */
    width: 100%;
}
.blog .box:hover img{
    transform: scale(1.1);
}
.blog .box .img-box img {
    width: 100%;       /* Buat gambar LEBAR 100% */
    height: 100%;      /* Buat gambar TINGGI 100% */
    object-fit: cover;  /* Paksa gambar mengisi kotak (crop, jangan gepeng) */
    transition: .5s;  /* Ini agar animasi hover tetap jalan */
}
.blog .box-container{
    display: flex;
    padding: 4rem 0;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.blog .box-container .box{
    text-align: center;
    margin: 1rem;
    flex: 1 1 33rem;
    position: relative;
    transition: .5s;
}
.blog .box-container .box:hover .detail{
    height: 27rem;
}
.blog .box-container .box:hover img{
    transform: scale(1.1);
}
.blog .box-container .box .img-box{
    transition: .5s;
    overflow: hidden;
    box-shadow: var(--box-shadow);
}
.blog .box-container .box .img-box img{
    width: 100%;
    height: 100%;
    transition: .5s;
}
.blog .box-container .box .detail{
    position: absolute;
    bottom: 0;
    left: 0;
    height: 9rem;
    background-color: #ffffff88;
    transition: .5s;
    overflow: hidden;
    padding: 2rem 0;
}
.blog .box-container .box h1{
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: #0009;
}
.blog .box-container .box .date{
    position: absolute;
    left: 5%;
    top: 5%;
    text-transform: uppercase;
    font-size: 1.5rem;
    margin: 1rem 0;
    color: #fff;
    background-color: var(--main-color);
    padding: .5rem;
}
.blog .box-container .box p{
    font-size: 16px;
    margin: 1rem 0;
    line-height: 1.5;
    color: #666;
}
/* --- FOOTER COMPACT & MODERN --- */
.footer {
    background-color: #800000; /* Merah Maroon */
    color: #f9f9f9;
    padding: 3rem 5% 2rem;
    margin-top: 3rem; 
    font-family: 'Poppins', sans-serif;
    margin-top: 8rem;
}

.footer-container {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem; /* Jarak antar kolom */
    justify-content: space-between;
    align-items: flex-start; /* Agar elemen rata atas */
}

/* Kolom Footer */
.footer-col {
    flex: 1; 
    min-width: 200px; 
    margin-bottom: 2rem;
    text-align: left;
    text-align: center !important;
}

/* Judul Kolom */
.footer-col h3 {
    font-size: 1.4rem; /* [PERUBAHAN] Diperkecil dari 1.6rem */
    margin-bottom: 0.8rem; /* Jarak ke bawah dikurangi */
    position: relative;
    padding-bottom: 0.3rem;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Garis bawah judul */
.footer-col h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 2px;
    background-color: #ffc107;
}

/* Isi Teks & Link */
.footer-col p, 
.footer-col a {
    font-size: 1.1rem; /* [PERUBAHAN] Diperkecil dari 1.3rem */
    color: #e0e0e0;
    display: block;
    margin-bottom: 0.3rem; /* [PERUBAHAN] Jarak antar baris dirapatkan */
    text-decoration: none;
    line-height: 1.3; /* [PERUBAHAN] Baris lebih rapat */
    transition: all 0.3s ease;
    
    /* Mempertahankan rata kiri-kanan yang Anda minta sebelumnya */
    text-align: justify; 
}
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    text-align: center;
    
    /* [PERUBAHAN] Jarak diperkecil */
    padding-top: 0.8rem; 
    margin-top: 1rem;
    
    font-size: 1rem; /* Font sangat kecil tapi terbaca */
    color: #ccc;
    padding-bottom: 1rem; /* Tambahan jarak aman di paling bawah */
}
.footer-col a:hover {
    color: #ffc107;
    padding-left: 3px;
}

/* Ikon Kontak & Sosmed */
.footer-col i {
    color: #ffc107;
    margin-right: 0.8rem;
    width: 15px; /* Lebar ikon fix agar teks rata */
    text-align: center;
}

/* Sosmed di bawah deskripsi (Horizontal) */
.social-links {
    margin-top: 1rem;
}
.social-links a {
    display: inline-block;
    margin-right: 1rem;
    font-size: 1.5rem;
}

/* Logo Pembayaran (Dibuat lebih kecil) */
.payment-methods {
    display: flex;
    justify-content: center !important;
    gap: 0.5rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.payment-img {
    background: #fff;
    padding: 3px;
    border-radius: 3px;
    height: 25px; /* [DIUBAH] Tinggi logo diperkecil */
    width: auto;
}

/* Copyright Bar */
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    text-align: center;
    padding-top: 1rem; /* [DIUBAH] Padding dikurangi */
    margin-top: 1.5rem;
    font-size: 1.2rem;
    color: #ccc;
}

/* Menggeser kolom ke-2 (Navigasi) sedikit ke kanan */
.footer-container .footer-col:nth-child(2) {
    padding-left: 8rem; /* Anda bisa ubah angka ini (misal: 3rem atau 4rem) sesuai selera */
}
/* Menggeser kolom ke-4 (Pembayaran) agar lebih ke kanan */
.footer-container .footer-col:nth-child(4) {
    padding-left: 0 !important; /* Semakin besar angka, semakin geser ke kanan */
}

/* Opsional: Jika di HP ingin tetap rata kiri/tengah, matikan geseran ini */
@media (max-width: 768px) {
    .footer-container .footer-col:nth-child(2) {
        padding-left: 0;
    }
}

/* ==== STYLE UNTUK MODAL DETAIL PRODUK ==== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}
/* Style saat modal aktif */
.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: #fff;
    padding: 3rem;
    border-radius: .5rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    position: relative;
    width: 90%;
    max-width: 600px; /* Lebar modal */
    max-height: 80vh; /* Tinggi maksimum */
    overflow-y: auto; /* Bisa di-scroll jika deskripsi panjang */
}
.modal-close-btn {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    font-size: 3rem;
    color: #aaa;
    cursor: pointer;
}
.modal-close-btn:hover {
    color: #000;
}
#modal-body img {
    width: 100%;
    height: 300px; /* Tinggi gambar modal (tetap) */
    object-fit: cover; /* Mode: potong agar pas */
    border-radius: .5rem;
    margin-bottom: 1.5rem;
    cursor: zoom-in; /* Ubah kursor menjadi ikon zoom */
    transition: all 0.3s ease; /* Animasi halus */
}
#modal-body img.zoomed {
    height: auto; /* Biarkan tinggi gambar otomatis */
    max-height: 70vh; /* Batasi tinggi maks 70% layar */
    object-fit: contain; /* Mode: tampilkan utuh (jangan potong) */
    cursor: zoom-out; /* Ubah kursor menjadi ikon zoom-out */
}
#modal-body #modal-title {
    font-size: 2.5rem;
    color: var(--main-color);
    margin-bottom: 1rem;
}
#modal-body #modal-price {
    font-size: 2rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 1.5rem;
}
#modal-body #modal-description {
    font-size: 1.6rem;
    color: #666;
    line-height: 1.7;
    text-transform: none; /* Deskripsi tidak perlu capitalize */
}
/* ==== AKHIR STYLE MODAL ==== */

/* Style untuk tombol Favorit di menu */
.btn-fav {
    font-weight: 500;
    color: #333; /* Warna sama seperti link menu lainnya */
}
.btn-fav:hover {
    color: var(--main-color);
}

/* Style untuk tombol Favorit di TAMPILAN MOBILE */
@media (max-width:768px){
    header .navbar .btn-fav {
        display: block !important;
        margin: 1.5rem 0 !important;
        padding: 1rem !important;
        background-color: #000 !important; /* Samakan dengan tombol lain */
        text-align: center !important;
        border-radius: .5rem !important;
        color: #fff !important; /* Warna teks putih */
        transition: .5s !important;
        font-size: 2rem !important;
        margin-left: 0 !important; 
    }
    header .navbar .btn-fav:hover {
        background-color: var(--main-color) !important;
    }
}


/* Ini untuk 'container' link Kategori */
header .navbar .dropdown {
    position: relative;
    display: inline-block;
}

/* Ini untuk link "Kategori" itu sendiri */
header .navbar .dropdown .dropbtn {
    font-size: 2rem;
    margin-left: 2.5rem;
    color: var(--main-color);
}
header .navbar .dropdown .dropbtn:hover {
    color: #000;
}

/* Ini adalah kotak dropdown yang tersembunyi */
header .navbar .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 200px; /* Lebar dropdown */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    border-radius: .5rem;
}

/* Ini adalah link di dalam dropdown */
header .navbar .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 1.6rem; /* Ukuran font di dalam dropdown */
    margin-left: 0; /* Reset margin */
}

/* Ganti warna link dropdown saat disentuh */
header .navbar .dropdown-content a:hover {
    background-color: #ddd;
    color: var(--main-color);
}

/* TAMPILKAN dropdown saat link "Kategori" disentuh */
header .navbar .dropdown:hover .dropdown-content {
    display: block;
}

/* ==== 2. CSS UNTUK EFEK KEDIP (FLASH) ==== */
@keyframes flash-animation {
    0% { background-color: transparent; }
    50% { background-color: #eca8c3; } /* Warna flash kuning muda */
    100% { background-color: transparent; }
}

.flash-effect {
    /* Jalankan animasi 'flash-animation' selama 1 detik */
    animation: flash-animation 1s;
}
/* ==== Notifikasi Toast Admin ==== */
.admin-toast-notification {
    position: fixed; /* Tetap di layar */
    top: 20px;
    right: 20px;
    background-color: #2ecc71; /* Warna hijau (sesuai tombol admin) */
    color: white;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 10000; /* Tampil di paling atas */
    font-size: 1.6rem;
    
    /* Ini untuk transisi halus */
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out, top 0.5s ease-out;
}

/* Class ini akan ditambahkan oleh JavaScript untuk menghilangkannya */
.admin-toast-notification.fade-out {
    opacity: 0;
    visibility: hidden;
    top: -50px; /* Bergerak ke atas saat menghilang */
}
/* ==== PERBAIKAN UNTUK MENU MOBILE ==== */
@media (max-width:768px){
    
    /* 1. Atur style tombol "Kategori" (.dropbtn) agar sama */
    header .navbar .dropdown .dropbtn {
        display: block;
        margin: 1.5rem 0;
        padding: 1rem;
        background-color: #000; /* Warna hitam sama seperti tombol lain */
        text-align: center;
        border-radius: .5rem;
        color: #fff; /* Warna teks putih */
        transition: .5s;
        font-size: 2rem; /* Samakan font-size */
        margin-left: 0; /* Hapus margin-left dari style desktop */
    }

    /* 2. Samakan hover-nya */
    header .navbar .dropdown .dropbtn:hover {
        background-color: var(--main-color);
        color: #fff;
    }
}
/* Styling untuk Best Seller */
.best-seller-container {
    display: grid;
    /* Membuat 2-3 kolom responsif */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 2rem;
    padding: 1rem 0;
}

.best-seller-box {
    background: #fff;
    border-radius: .5rem;
    box-shadow: var(--box-shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem;
    overflow: hidden;
}

.best-seller-box .image-wrapper {
    width: 100%;
    max-width: 300px; /* Batas maks gambar */
    height: 300px; /* Tinggi kotak gambar */
    margin-bottom: 1.5rem;
    overflow: hidden;
    border-radius: .5rem;
}

.best-seller-box .image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Memastikan gambar rapi */
}

.best-seller-box .content {
    width: 100%;
}

.best-seller-box .product-title {
    font-size: 2.2rem;
    color: var(--main-color);
    margin-bottom: 0.5rem;
}

.best-seller-box .harga {
    font-size: 1.8rem;
    color: #333;
    margin-bottom: 1.5rem;
    font-weight: 600;
}
.best-seller-box .icon {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    color: #666;
}
.best-seller-box .icon i,
.best-seller-box .icon button {
    font-size: 2rem;
    cursor: pointer;
    transition: .2s ease;
}

.best-seller-box .icon i:hover,
.best-seller-box .icon button:hover {
    color: var(--main-color);
}

.best-seller-box .admin-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

.best-seller-box .admin-buttons .btn {
    flex: 1; /* Tombol akan berbagi ruang secara merata */
    font-size: 1.6rem;
    padding: 0.8rem 1.5rem;
}
/* ==== STYLE BINTANG (DI SAMPING JUDUL) - HANYA ADMIN ==== */

/* Ini membungkus Judul dan Bintang agar rapi */
.best-seller-box .title-wrapper {
    display: flex;
    justify-content: center; /* Posisikan judul & bintang di tengah */
    align-items: center;
    gap: 1rem; /* Jarak antara judul dan bintang */
    margin-bottom: 0.5rem;
}

/* Hapus margin bawah default dari judul */
.best-seller-box .product-title {
    margin-bottom: 0; 
}

/* Ini adalah style untuk ikon bintangnya */
.bestseller-star {
    font-size: 2.2rem;
    color: #f39c12; /* Warna Kuning Emas */
    transition: transform 0.2s;
    line-height: 1; /* Pastikan tidak merusak tinggi baris */
}
.bestseller-star:hover {
    transform: scale(1.2); /* Efek hover membesar */
}
/* ==== AKHIR STYLE BINTANG ==== */
/* ==== PERBAIKAN TAMPILAN SECTION HOME ("BERANDA") ==== */

/* 1. Atur container .detail agar lebih menarik */
.home .detail {
    /* Beri latar belakang agar teks terbaca di atas gambar */
    background: rgba(255, 255, 255, 0.85); 
    backdrop-filter: blur(5px);
    padding: 3rem;
    border-radius: .5rem;
    box-shadow: var(--box-shadow);
    max-width: 550px; /* Batasi lebar container */
    margin-left: 9%; /* Beri jarak dari kiri (samakan dengan padding section) */
    text-align: left; /* Teks rata kiri */
}

/* 2. Atur paragraf utama */
.home .detail > p {
    font-size: 1.8rem;
    color: #333;
    font-weight: 600;
    line-height: 1.6;
    margin-bottom: 2.5rem;
    text-transform: none; /* Izinkan teks normal */
}

/* 3. Atur daftar keunggulan (USP) */
.home .detail .usp-list {
    margin-bottom: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* Jarak antar item */
}

/* 4. Atur item keunggulan (INI YANG ANDA MINTA) */
.home .detail .usp-item {
    display: flex; /* Membuat ikon dan teks bersebelahan */
    align-items: center; /* Menjaga tetap rapi */
    gap: 1.5rem; /* Jarak antara ikon dan teks */
}

.home .detail .usp-item i {
    font-size: 2.5rem;
    color: var(--main-color);
    flex-shrink: 0; /* Mencegah ikon mengecil */
    width: 30px; /* Beri lebar tetap agar rapi */
    text-align: center;
}

.home .detail .usp-item p {
    font-size: 1.6rem;
    color: #555;
    font-weight: 600;
    margin: 0;
    padding: 0;
    text-transform: none; /* Izinkan teks normal */
}

/* 5. Atur Tombol */
.home .detail .btn {
    width: auto; /* Tombol tidak full width */
    display: inline-block;
}
/* ==== AKHIR PERBAIKAN ==== */


/* Penyesuaian untuk tampilan mobile */
@media (max-width: 768px) {
    .best-seller-container {
        grid-template-columns: 1fr; /* Satu kolom di layar kecil */
    }
}
/* Style untuk tombol Keranjang (Mobile) */
@media (max-width:768px){
    header .navbar .btn-cart {
        display: block !important;
        margin: 1.5rem 0 !important;
        padding: 1rem !important;
        background-color: #3498db !important; /* Biru */
        text-align: center !important;
        border-radius: .5rem !important;
        color: #fff !important;
        transition: .5s !important;
        font-size: 2rem !important;
        margin-left: 0 !important; 
    }
    header .navbar .btn-cart:hover {
        background-color: #2980b9 !important;
    }
}

/* ==== INI ADALAH STYLE YANG ANDA HAPUS SEBELUMNYA ==== */
.box-container {
    display: grid;
    /* Membuat 3 kolom, responsif */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 2rem;
    padding: 2rem 0;
}

.product-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: .5rem;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    padding: 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: box-shadow 0.3s;
}

.product-card:hover {
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

.product-card .img-wrapper {
    width: 100%;
    height: 250px; /* Tinggi gambar yang konsisten */
    overflow: hidden;
    margin-bottom: 1rem;
    border-radius: .5rem;
}

.product-card .img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Memastikan gambar FULL TANPA TERPOTONG */
    transition: transform 0.3s;
}

.product-card .product-title {
    font-size: 1.8rem;
    color: var(--main-color);
    margin: 0.5rem 0;
}

.product-card .product-price {
    font-size: 1.6rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 1rem;
}

.product-card .product-actions {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: auto; /* Mendorong tombol ke bawah */
}

.product-card .action-btn {
    font-size: 2rem;
    color: #666;
    transition: color 0.2s;
    background: none;
    border: none;
    cursor: pointer;
}

.product-card .action-btn:hover {
    color: var(--main-color);
}
/* ==== AKHIR STYLE YANG HILANG ==== */


/*-------------media screen-------------*/
@media (max-width:991px){
    html{
        font-size: 55%;
    }
    header{
        padding: 2rem 4%;
    }
    section{
        padding: 3rem 4%;
    }
}
@media (max-width:768px){
    .menu-bar{
        display: block; /* Munculkan di layar kecil */
    }
    header .navbar{
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: #fff;
        border-top: .1rem solid #000;
        padding: 1rem 2rem;
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    }
    header .navbar.nav-toggle{
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
    header .navbar a{
        display: block;
        margin: 1.5rem 0;
        padding: 1rem;
        background-color: #000;
        text-align: center;
        border-radius: .5rem;
        color: #fff;
        transition: .5s;
    }
    header .navbar a:hover{
        background-color: var(--main-color);
        color: #fff;
    }
    .fa-times{
        transform: rotate(180deg);
    }
    .home .content h3{
        font-size: 3rem;
    }
    .home .content p{
        font-size: 1.5rem;
    }
    .about .buttons a{
        width: 95%;
        text-align: center;
    }
    .about .buttons a:last-child{
        margin: 1rem 0;
    }
}
@media (max-width:400px){
    html{
        font-size: 50%;
    }
    .heading{
        font-size: 3.5rem;
    }
}
/* ========================================= */
/* RESPONSIF KHUSUS HP (Layar Kecil)         */
/* ========================================= */
@media (max-width: 768px) {

    /* 1. Ubah susunan menjadi vertikal (atas-bawah) */
    .footer-container {
        flex-direction: column;
        align-items: center; /* Rata tengah secara horizontal */
        gap: 2.5rem; /* Jarak antar kelompok */
    }

    /* 2. Atur setiap kolom agar memenuhi lebar layar */
    .footer-col {
        width: 100%;
        text-align: center; /* Paksa semua teks rata tengah */
        flex: 1 1 40%; 
        margin-bottom: 2rem;
    }

    /* 3. RESET geseran (padding) yang kita buat sebelumnya */
    /* Ini PENTING agar tidak miring ke kanan */
    .footer-container .footer-col:nth-child(2),
    .footer-container .footer-col:nth-child(3) {
        padding-left: 0 !important;
    }

    /* 4. Atur garis bawah judul agar pas di tengah */
    .footer-col h3::after {
        left: 50%;
        transform: translateX(-50%);
        width: 60px; /* Sedikit lebih lebar di HP biar manis */
    }

    /* 5. Paksa teks paragraf (alamat, dll) rata tengah di HP */
    /* (Menggantikan justify/left agar rapi di layar kecil) */
    /* [PERBAIKAN] Terapkan rata tengah untuk paragraf (p) DAN link (a) */
    .footer-col p,
    .footer-col a {
        text-align: center !important;
        padding: 0 1rem;
        justify-content: center; /* Jaga-jaga jika link menggunakan flex */
        display: block; /* Pastikan mengambil lebar penuh agar bisa dicenter */
    }
    /* Reset margin ikon saat di HP */
    .footer-col i {
        margin-right: 0.5rem; /* Jarak standar */
        margin-left: 0;
    }

    /* 6. Kurangi padding container footer agar tidak terlalu tinggi */
    .footer {
        padding: 3rem 2rem 2rem; 
    }
}
/* Memastikan logo pembayaran rata tengah */
.payment-methods {
    display: flex;
    justify-content: center; /* Kunci untuk menengahkan logo */
    gap: 0.5rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

/* Opsional: Jika ingin logo sedikit lebih rapi */
.payment-img {
    display: inline-block; /* Pastikan img dianggap blok inline */
}
/* --- KHUSUS TAMPILAN HP (Agar jadi 2 Kolom) --- */
@media (max-width: 768px) {
    .footer-col {
        /* Di HP, kita paksa lebarnya jadi mendekati 50% */
        /* flex: grow shrink basis */
        flex: 0 0 45%; 
        min-width: auto; /* Matikan min-width desktop */
    }
    
    .footer-container {
        /* Pastikan space-between aktif agar ada jarak di tengah */
        justify-content: space-between; 
        gap: 1rem; /* Jarak antar baris */
    }
}

/* --- KHUSUS HP SANGAT KECIL (Opsional) --- */
@media (max-width: 400px) {
    .footer-col {
        flex: 0 0 100%; /* Kalau HP sangat kecil, tumpuk 1 kolom saja */
    }
}
/* ========================================= */
/* PERBAIKAN TAMPILAN KATEGORI (FIXED)       */
/* ========================================= */
@media (max-width: 768px) {

    /* Target class 'services' dan 'box' */
    .services .box-container .box {
        display: flex !important;
        flex-direction: column !important; /* Tumpuk Atas-Bawah */
        align-items: center !important;    /* Rata tengah */
        text-align: center !important;     /* Teks rata tengah */
        height: auto !important;           /* Tinggi otomatis */
        padding: 2rem !important;
    }

    /* Target bagian gambar (class 'icon') */
    .services .box-container .box .icon {
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 1.5rem !important;
        display: flex !important;
        justify-content: center !important;
        height: auto !important; /* Reset tinggi agar gambar proporsional */
    }

    /* Target gambar di dalam icon */
    .services .box-container .box .icon img {
        width: 100% !important;
        max-width: 250px !important; /* Batasi agar tidak terlalu raksasa */
        height: auto !important;
        object-fit: cover !important;
    }

    /* Target bagian teks (class 'detail') */
    .services .box-container .box .detail {
        width: 100% !important;
        padding: 0 !important;
    }

    /* Target judul (h4) */
    .services .box-container .box .detail h4 {
        font-size: 2rem !important;
        margin-bottom: 1rem !important;
    }

    /* Target tombol */
    .services .box-container .box .detail .btn {
        width: 100% !important;
        display: block !important;
        margin-top: 1.5rem !important;
    }
}
/* Pastikan kode ini ada di dalam @media (max-width: 768px) */

@media (max-width: 768px) {

    /* 1. Paksa container dropdown agar memenuhi lebar layar */
    header .navbar .dropdown {
        width: 100%;
        display: block; /* Pastikan dia berperilaku sebagai blok, bukan baris */
        margin: 0;      /* Hapus margin aneh jika ada */
    }

    /* 2. Paksa tombol link "Kategori" agar memenuhi container-nya */
    header .navbar .dropdown .dropbtn {
        width: 100% !important;      /* Paksa lebar penuh */
        display: block !important;   /* Paksa jadi blok */
        text-align: center;          /* Teks rata tengah */
        margin: 1rem 0;              /* Samakan margin dengan tombol lain (sesuaikan jika perlu) */
        box-sizing: border-box;      /* Agar padding tidak membuat tombol melebihi layar */
    }
}