/* ======================
GLOBAL
====================== */
body{
    font-family:'Poppins',Arial;
    margin:0;
    background:#111;
    color:white;
    transition:0.3s;
    line-height:1.6;
}

/* ======================
LIGHT MODE
====================== */
body.light{
    background:#ffffff;
    color:#000;
}
body.light header{ background:#ffffff; }
body.light nav a{ color:#000; }
body.light .stats{ background:#f3f3f3; }
body.light .card{ background:#ffffff; }
body.light footer{ background:#f3f3f3; }
body.light .testimoni{ background:#f5f5f5; color:black; }

/* ======================
HEADER / NAVBAR
====================== */
header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:15px 30px;
    background:#000;
    position:sticky;
    top:0;
    z-index:1000;
    box-shadow:0 3px 10px rgba(0,0,0,0.4);
}
.logo{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:600;
    font-size:18px;
}
.logo img{
    width:32px;
    height:32px;
    border-radius:50%;
    object-fit:cover;
}
nav{ display:flex; gap:20px; }
nav a{
    text-decoration:none;
    color:white;
    font-size:14px;
    font-weight:500;
    transition:0.2s;
}
nav a:hover{ color:gold; }
#modeToggle{
    background:none;
    border:none;
    font-size:18px;
    cursor:pointer;
    color:white;
}

/* ======================
HERO
====================== */
.hero{
    width:100%;
    aspect-ratio:1536/1024;
    background:url("img/hero-dark.jpg") center/cover no-repeat;
    position:relative;
    transition:0.4s;
}
body.light .hero{ background:url("img/hero-light.jpg") center/cover no-repeat; }
.hero::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.55);
}
.hero-info{ text-align:center; padding:60px 20px; }
.hero-logo{
    width:140px;
    height:140px;
    border-radius:50%;
    object-fit:cover;
    border:3px solid gold;
    box-shadow:0 0 15px rgba(255,215,0,0.6);
    margin-bottom:20px;
}
.status{ color:#00ff6a; font-weight:bold; margin:10px 0; }

/* ======================
BUTTON
====================== */
.btn{
    display:inline-block;
    padding:10px 20px;
    border-radius:6px;
    text-decoration:none;
    background:#444;
    color:white;
    margin:6px;
    transition:0.25s;
}
.btn:hover{ transform:scale(1.05); opacity:0.9; }
.gold{ background:gold; color:black; }

/* ======================
STATS
====================== */
.stats{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:40px;
    padding:35px 20px;
    background:#1a1a1a;
    text-align:center;
}
.stats h2{ margin:0; font-size:26px; }

/* ======================
PRODUK
====================== */
.produk{ padding:70px 20px; text-align:center; }
.produk-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:22px;
    margin-top:35px;
    max-width:1100px;
    margin-left:auto;
    margin-right:auto;
}
.card{
    background:#1a1a1a;
    padding:20px;
    border-radius:12px;
    position:relative;
    transition:0.3s;
}
.card:hover{
    transform:translateY(-6px);
    box-shadow:0 0 12px rgba(255,215,0,0.4);
}
.card img{ width:100%; border-radius:8px; }
.card h3{ margin:10px 0 5px; }
.card.best{ box-shadow:0 0 12px gold; }

/* ======================
BUTTON PRODUK
====================== */
.order, .buy{
    display:block;
    margin-top:12px;
    background:gold;
    color:black;
    padding:9px;
    border-radius:6px;
    text-decoration:none;
    font-weight:bold;
    transition:0.25s;
}
.order:hover, .buy:hover{ transform:scale(1.05); opacity:0.9; }

/* ======================
BADGE
====================== */
.badge{
    position:absolute;
    top:10px;
    left:10px;
    background:gold;
    color:black;
    padding:4px 7px;
    font-size:12px;
    border-radius:4px;
}

/* ======================
TESTIMONI
====================== */
.testimoni{ text-align:center; padding:50px 20px; background:#111; }
.testimoni-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:15px;
    max-width:900px;
    margin:auto;
}
.testimoni-grid img{ width:100%; border-radius:10px; transition:0.3s; }
.testimoni-grid img:hover{ transform:scale(1.05); }

/* ======================
FAQ
====================== */
.faq{ max-width:700px; margin:auto; text-align:left; }
.faqBtn{
    width:100%;
    padding:12px;
    margin-top:10px;
    border:none;
    background:#222;
    color:white;
    cursor:pointer;
    text-align:left;
    border-radius:6px;
}
.faqText{
    display:none;
    padding:10px;
    background:#1a1a1a;
    border-radius:6px;
}

/* ======================
FOOTER
====================== */
footer{ text-align:center; padding:25px 20px; background:#000; font-size:14px; }

/* ======================
IMAGE ZOOM
====================== */
.zoom{ cursor:pointer; transition:0.25s; }
.zoom:hover{ transform:scale(1.05); }
#imgModal{
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.9);
    justify-content:center;
    align-items:center;
    z-index:999;
}
#modalImg{ max-width:90%; max-height:90%; border-radius:10px; }

/* ======================
LOADER
====================== */
#loader{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#111;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    z-index:9999;
    transition:opacity .4s ease;
}
.loader-logo{ width:120px; height:120px; border-radius:50%; margin-bottom:15px; border:3px solid gold; }
.loader-text{ color:white; margin-bottom:15px; font-size:14px; }
.loading-bar{ width:200px; height:6px; background:#333; border-radius:10px; overflow:hidden; }
.loading-progress{
    height:100%;
    width:0%;
    background:gold;
    animation:loading 2s linear forwards;
}
@keyframes loading{ 0%{width:0%} 100%{width:100%} }

@media (max-width:768px){
    header{ flex-direction:column; gap:10px; padding:15px; }
    nav{ flex-wrap:wrap; justify-content:center; gap:12px; }
    nav a{ font-size:13px; }
    .logo{ font-size:16px; text-align:center; }
}

/* =========================================
   SISTEM GRID & PRODUK SOLD (FINAL STABIL)
   ========================================= */

/* Wadah gambar agar stempel terkunci di foto & ukuran kartu seragam */
.img-container {
    position: relative;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    background: #222; /* Warna dasar kalau gambar telat muat */
    aspect-ratio: 1/1; /* Biar kartu tingginya sama semua */
}

.img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Hanya jika ada class 'sold', jalankan efek ini */
.card.sold {
    position: relative;
    pointer-events: none; 
}

.card.sold img {
    filter: grayscale(100%) brightness(40%) blur(1px);
}

/* Memasang stempel sold.png */
.card.sold .img-container::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-10deg);
    width: 80%;
    aspect-ratio: 1/1;
    background: url("img/sold.png") center/contain no-repeat;
    z-index: 10;
    opacity: 0.9;
}

/* Tombol mati untuk produk sold */
.card.sold .buy, .card.sold .order {
    background: #333 !important;
    color: #666 !important;
    border: none !important;
    box-shadow: none !important;
}

/* Grid Responsif (Android 2 Kolom) */
.produk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    max-width: 1100px;
    margin: 35px auto 0;
    padding: 0 10px;
}

@media (max-width: 480px) {
    .produk-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .card { padding: 10px; }
    .card h3 { font-size: 14px; }
}