@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif;}
body{background:#f4f6fb;color:#333;transition:.3s;}
a{color:inherit;}

.loader{position:fixed;inset:0;background:#3e2723;color:white;z-index:9999;display:flex;justify-content:center;align-items:center;flex-direction:column;}
.cup{font-size:70px;animation:floatCup 1s infinite alternate;}
@keyframes floatCup{from{transform:translateY(0)}to{transform:translateY(-12px)}}

.login-body{height:100vh;display:flex;justify-content:center;align-items:center;background:linear-gradient(135deg,#3e2723,#8d6e63);}
.login-box{width:400px;background:white;padding:40px;border-radius:25px;text-align:center;box-shadow:0 15px 40px rgba(0,0,0,.25);}
.login-box h1{font-size:55px;}
.login-box h2{color:#5d4037;margin-bottom:10px;}
.login-box p{margin-bottom:22px;color:#777;}
.login-box input{width:100%;padding:14px;margin:10px 0;border:1px solid #ddd;border-radius:12px;outline:none;}
.login-box button{width:100%;padding:14px;margin-top:10px;border:none;border-radius:12px;background:#5d4037;color:white;font-weight:600;cursor:pointer;}
.small-text{font-size:14px;margin-top:18px;}
.small-text a{color:#5d4037;font-weight:700;}

.landing-nav{display:flex;justify-content:space-between;align-items:center;padding:22px 8%;background:white;box-shadow:0 4px 18px rgba(0,0,0,.08);position:sticky;top:0;z-index:10;}
.landing-nav h2{color:#5d4037;}
.landing-nav a{text-decoration:none;color:#5d4037;margin-left:18px;font-weight:600;}
.mode-btn{border:none;background:#5d4037;color:white;padding:10px 14px;border-radius:10px;cursor:pointer;}
.hero{min-height:80vh;display:grid;grid-template-columns:1.3fr .7fr;gap:30px;align-items:center;padding:60px 8%;background:linear-gradient(rgba(62,39,35,.65),rgba(62,39,35,.65)),url('https://images.unsplash.com/photo-1509042239860-f550ce710b93?q=80&w=1600&auto=format&fit=crop');background-size:cover;background-position:center;color:white;}
.hero-text span{background:rgba(255,255,255,.2);padding:8px 16px;border-radius:20px;}
.hero-text h1{font-size:58px;margin:22px 0;}
.hero-text p{max-width:600px;line-height:1.8;margin-bottom:25px;}
.hero-btn{background:white;color:#5d4037;padding:14px 22px;border-radius:15px;text-decoration:none;font-weight:700;}
.hero-card{background:rgba(255,255,255,.18);backdrop-filter:blur(10px);border-radius:25px;padding:35px;box-shadow:0 10px 30px rgba(0,0,0,.25);}
.landing-section{padding:60px 8%;}
.landing-section h2{color:#5d4037;margin-bottom:25px;font-size:32px;}

.sidebar{width:250px;height:100vh;background:linear-gradient(180deg,#3e2723,#6d4c41);position:fixed;left:0;top:0;padding:30px 20px;color:white;box-shadow:5px 0 20px rgba(0,0,0,.15);}
.sidebar h2{text-align:center;margin-bottom:35px;}
.sidebar a{display:block;width:100%;color:white;text-decoration:none;padding:14px 16px;border-radius:12px;margin-bottom:12px;transition:.3s;text-align:left;}
.sidebar a:hover{background:rgba(255,255,255,.15);transform:translateX(6px);}

.main{margin-left:250px;padding:30px;}
.topbar{background:white;padding:22px;border-radius:20px;display:flex;justify-content:space-between;align-items:center;margin-bottom:25px;box-shadow:0 5px 15px rgba(0,0,0,.08);}
.topbar h1{color:#5d4037;}
.welcome{background:linear-gradient(135deg,#6d4c41,#a1887f);color:white;padding:35px;border-radius:25px;margin-bottom:25px;box-shadow:0 8px 20px rgba(0,0,0,.12);}
.card-box{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:25px;margin-bottom:35px;}
.card{background:white;padding:30px;border-radius:25px;box-shadow:0 5px 15px rgba(0,0,0,.08);transition:.3s;}
.card:hover{transform:translateY(-7px);}
.card h3{color:#5d4037;margin-bottom:12px;}
.card p{font-size:32px;font-weight:700;color:#6d4c41;}
.section-title{margin:30px 0 20px;color:#5d4037;}

.anggota-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:25px;}
.anggota-card{background:white;padding:20px;border-radius:22px;text-align:center;box-shadow:0 5px 15px rgba(0,0,0,.08);transition:.3s;}
.anggota-card:hover{transform:translateY(-6px);}
.anggota-card img{width:120px;height:120px;object-fit:cover;border-radius:50%;margin-bottom:15px;border:4px solid #d7ccc8;}

.landing-menu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px;}
.landing-menu-card{background:white;border-radius:22px;overflow:hidden;box-shadow:0 8px 25px rgba(0,0,0,.08);}
.landing-menu-card img,.no-img{width:100%;height:180px;object-fit:cover;}
.no-img{display:flex;justify-content:center;align-items:center;font-size:70px;background:#efebe9;}
.landing-menu-card div{padding:18px;}
.landing-menu-card span{color:#8d6e63;font-weight:600;}
.landing-menu-card h3{margin:8px 0;color:#5d4037;}
.landing-menu-card input{width:100%;padding:10px;border:1px solid #ddd;border-radius:10px;margin:8px 0;}
.landing-menu-card button{width:100%;padding:10px;background:#5d4037;color:white;border:none;border-radius:10px;cursor:pointer;}

.search-form{display:flex;gap:10px;margin-bottom:25px;}
.search-form input{flex:1;padding:13px;border:1px solid #ddd;border-radius:12px;}
.search-form button{padding:13px 20px;background:#5d4037;color:white;border:none;border-radius:12px;}
table{width:100%;border-collapse:collapse;background:white;border-radius:20px;overflow:hidden;box-shadow:0 5px 15px rgba(0,0,0,.08);}
th{background:#5d4037;color:white;padding:16px;}
td{padding:15px;border-bottom:1px solid #eee;text-align:center;}
tr:hover{background:#f7f1eb;}
.table-img{width:70px;height:70px;object-fit:cover;border-radius:12px;}

.btn,.btn-detail,.btn-hapus,.btn-back,.btn-edit{display:inline-block;padding:10px 15px;border-radius:10px;text-decoration:none;color:white;margin:3px;border:none;}
.btn,.btn-detail{background:#5d4037;}
.btn-edit{background:#d68910;}
.btn-hapus{background:#c0392b;}
.btn-back{background:#777;}

.form-box,.detail-box{max-width:650px;background:white;padding:30px;border-radius:25px;box-shadow:0 5px 15px rgba(0,0,0,.08);}
.form-box h1,.detail-box h1{color:#5d4037;margin-bottom:20px;}
.form-box label{display:block;margin-top:15px;font-weight:600;}
.form-box input,.form-box select{width:100%;padding:13px;margin-top:8px;border:1px solid #ddd;border-radius:12px;}
.form-box button{width:100%;padding:14px;margin-top:20px;background:#5d4037;border:none;border-radius:12px;color:white;font-weight:600;}
.preview-img,.detail-img{width:180px;height:150px;object-fit:cover;border-radius:18px;margin:15px 0;}

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:25px;}
.foto-card{background:white;padding:20px;border-radius:22px;box-shadow:0 5px 15px rgba(0,0,0,.08);text-align:center;}
.foto-card img{width:100%;height:220px;object-fit:cover;border-radius:15px;}
.foto-card h3{margin:15px 0;color:#5d4037;}
.foto-card a{display:inline-block;background:#5d4037;color:white;text-decoration:none;padding:10px 16px;border-radius:10px;}

@media(max-width:768px){
    .sidebar{width:100%;height:auto;position:relative;}
    .main{margin-left:0;}
    .topbar{flex-direction:column;gap:10px;align-items:flex-start;}
    .search-form{flex-direction:column;}
    .hero{grid-template-columns:1fr;padding:50px 6%;}
    .hero-text h1{font-size:38px;}
    .landing-nav{flex-direction:column;gap:15px;}
    table{font-size:13px;}
}
.customer-hero{
    min-height:330px;
    background:
    linear-gradient(rgba(62,39,35,0.65), rgba(62,39,35,0.65)),
    url('https://images.unsplash.com/photo-1509042239860-f550ce710b93?q=80&w=1600&auto=format&fit=crop');

    background-size:cover;
    background-position:center;
    border-radius:30px;
    padding:45px;
    color:white;
    display:flex;
    align-items:center;
    margin-bottom:30px;
    box-shadow:0 12px 30px rgba(0,0,0,0.18);
}

.customer-hero span{
    background:rgba(255,255,255,0.2);
    padding:8px 16px;
    border-radius:30px;
    font-size:14px;
}

.customer-hero h1{
    font-size:42px;
    margin:20px 0 10px;
}

.customer-hero p{
    max-width:600px;
    line-height:1.8;
    margin-bottom:25px;
}

.customer-hero .hero-btn{
    background:white;
    color:#5d4037;
    padding:13px 22px;
    border-radius:14px;
    text-decoration:none;
    font-weight:700;
    display:inline-block;
}
.notif-card{
    border:2px solid #c0392b;
    animation:pulseNotif 1.2s infinite;
}

.notif-card p{
    color:#c0392b;
}

@keyframes pulseNotif{

    0%{
        box-shadow:0 0 0 rgba(192,57,43,0.4);
    }

    50%{
        box-shadow:0 0 25px rgba(192,57,43,0.5);
    }

    100%{
        box-shadow:0 0 0 rgba(192,57,43,0.4);
    }

}
body{
    overflow-x:hidden;
}

.landing-nav{
    width:100%;
}

.hero{
    width:100%;
    min-height:80vh;
}

.landing-menu-grid{
    max-width:1200px;
    margin:auto;
}

.landing-menu-card img,
.no-img{
    width:100%;
    height:220px;
    object-fit:cover;
}

@media(min-width:769px){
    .landing-menu-grid{
        grid-template-columns:repeat(3,1fr);
    }

    .hero{
        grid-template-columns:1.2fr 0.8fr;
    }
}

@media(max-width:768px){
    .landing-nav{
        flex-direction:column;
        gap:12px;
        text-align:center;
    }

    .hero{
        grid-template-columns:1fr;
        min-height:auto;
    }

    .landing-menu-grid{
        grid-template-columns:1fr;
    }

    .landing-menu-card img,
    .no-img{
        height:200px;
    }
}
.dark-mode{
    background:#121212;
    color:white;
}

.dark-mode .sidebar{
    background:#1e1e1e;
}

.dark-mode .card,
.dark-mode table,
.dark-mode .topbar{
    background:#1f1f1f;
    color:white;
}

.dark-mode input,
.dark-mode select{
    background:#2a2a2a;
    color:white;
    border:1px solid #444;
}
@media(max-width:768px){

.sidebar{
    width:100%;
    height:auto;
    position:relative;
}

.main{
    margin-left:0;
    padding:15px;
}

.card-box{
    flex-direction:column;
}

table{
    display:block;
    overflow-x:auto;
}

}
.best-seller-section{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:30px;
    margin:60px 0;
    align-items:center;
}

.best-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
    margin-top:25px;
}

.best-card{
    background:white;
    padding:15px;
    border-radius:20px;
    box-shadow:0 5px 15px rgba(0,0,0,0.1);
    text-align:center;
    transition:0.3s;
}

.best-card:hover{
    transform:translateY(-8px);
}

.best-card img{
    width:100%;
    height:200px;
    object-fit:cover;
    border-radius:15px;
}

.best-card h3{
    margin-top:15px;
    color:#5d4037;
}

.qr-box{
    background:white;
    padding:30px;
    border-radius:25px;
    text-align:center;
    box-shadow:0 5px 15px rgba(0,0,0,0.1);
}

.qr-box img{
    width:250px;
    margin:20px 0;
}

.mini-title{
    background:#5d4037;
    color:white;
    padding:8px 16px;
    border-radius:30px;
    font-size:14px;
}

@media(max-width:768px){

.best-seller-section{
    grid-template-columns:1fr;
}

}
/* ===== FIX LANDING PAGE BIAR CANTIK ===== */

.landing-section{
    max-width:1200px;
    margin:auto;
    padding:70px 30px;
}

.best-seller-section{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:30px;
    align-items:start;
}

.best-left{
    background:white;
    padding:30px;
    border-radius:25px;
    box-shadow:0 8px 25px rgba(0,0,0,0.08);
}

.best-left h1{
    font-size:34px;
    color:#5d4037;
    margin:15px 0 8px;
}

.best-left p{
    color:#666;
    margin-bottom:25px;
}

.best-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}

.best-card{
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 6px 20px rgba(0,0,0,0.1);
    transition:0.3s;
}

.best-card:hover{
    transform:translateY(-8px);
}

.best-card img,
.best-card .no-img{
    width:100%;
    height:180px;
    object-fit:cover;
}

.best-card h3{
    font-size:18px;
    color:#5d4037;
    margin:15px 15px 5px;
}

.best-card p,
.best-card small{
    display:block;
    margin:0 15px 12px;
    color:#555;
}

.qr-box{
    background:white;
    padding:30px;
    border-radius:25px;
    text-align:center;
    box-shadow:0 8px 25px rgba(0,0,0,0.08);
    position:sticky;
    top:100px;
}

.qr-box h2{
    color:#5d4037;
    margin-bottom:15px;
}

.qr-box img{
    width:220px;
    height:220px;
    margin:15px auto;
    display:block;
}

.mini-title{
    display:inline-block;
    background:#5d4037;
    color:white;
    padding:8px 16px;
    border-radius:30px;
    font-size:14px;
}

.landing-menu-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

.landing-menu-card{
    background:white;
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 8px 25px rgba(0,0,0,0.08);
}

.landing-menu-card img,
.landing-menu-card .no-img{
    width:100%;
    height:220px;
    object-fit:cover;
}

.landing-menu-card div{
    padding:18px;
}

@media(max-width:768px){

    .best-seller-section{
        grid-template-columns:1fr;
    }

    .best-grid,
    .landing-menu-grid{
        grid-template-columns:1fr;
    }

    .qr-box{
        position:static;
    }
}
.stok-tersedia{
    color:#2ecc71;
    font-weight:700;
}

.stok-habis{
    background:#c0392b;
    color:white;
    padding:10px;
    border-radius:10px;
    text-align:center;
    font-weight:700;
}
.aksi-btn{
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:wrap;
}

.btn{
    background:#6f4e37;
    color:white !important;
    padding:12px 18px;
    border-radius:12px;
    text-decoration:none;
    display:inline-block;
    font-weight:600;
}

.btn-warning{
    background:#f39c12;
    color:white !important;
    padding:12px 18px;
    border-radius:12px;
    text-decoration:none;
    display:inline-block;
    font-weight:600;
}

.btn-struk{
    background:#2ecc71;
    color:white !important;
    padding:12px 18px;
    border-radius:12px;
    text-decoration:none;
    display:inline-block;
    font-weight:600;
}

.btn:hover,
.btn-warning:hover,
.btn-struk:hover{
    transform:translateY(-3px);
    opacity:0.9;
}
.btn-hapus{
    background:#c0392b;
    color:white;
    padding:14px 22px;
    text-decoration:none;
    border-radius:12px;
    display:inline-block;
    transition:0.3s;
    font-weight:bold;
}

.btn-hapus:hover{
    background:#922b21;
    transform:translateY(-3px);
}