/* ===== PEMBOLEH UBAH & TEMA ===== */
:root {
    --coklat: #6F4E37;
    --coklat-muda: #A0785A;
    --krim: #FFF8F0;
    --krim-gelap: #F5E6D0;
    --emas: #C9A96E;
    --hijau: #2D8B4E;
    --hijau-muda: #4CAF50;
    --merah: #D32F2F;
    --merah-muda: #EF5350;
    --biru: #1976D2;
    --kelabu: #666;
    --kelabu-muda: #f5f5f5;
    --putih: #fff;
    --hitam: #1a1a1a;
    --bayang: 0 2px 12px rgba(0,0,0,0.08);
    --bayang-besar: 0 8px 30px rgba(0,0,0,0.12);
    --jejari: 16px;
    --jejari-kecil: 10px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--krim);
    color: var(--hitam);
    min-height: 100vh;
    line-height: 1.6;
}

a { text-decoration: none; color: inherit; }

/* ===== LAMAN UTAMA (HOMEPAGE KEDAI) ===== */

/* Navigasi */
.navbar-home {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding: 0 20px;
}
.nav-dalam {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 64px;
}
.nav-logo {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--coklat);
}
.nav-pautan {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 24px;
}
.nav-pautan li a {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--kelabu);
    transition: color 0.3s;
}
.nav-pautan li a:hover { color: var(--coklat); }
.nav-btn-pesan {
    background: var(--coklat) !important;
    color: var(--putih) !important;
    padding: 8px 18px;
    border-radius: 25px;
    font-weight: 700 !important;
    transition: all 0.3s ease !important;
}
.nav-btn-pesan:hover { background: var(--coklat-muda) !important; }

/* Hero */
.hero {
    background: linear-gradient(160deg, #3E2723 0%, #5D4037 30%, #6F4E37 60%, #8D6E63 100%);
    color: var(--putih);
    padding: 80px 20px 100px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.hero-kandungan {
    max-width: 700px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    animation: fadeInUp 0.8s ease;
}
.hero-tag-arahan {
    display: inline-block;
    background: rgba(255,255,255,0.15);
    padding: 6px 18px;
    border-radius: 20px;
    font-size: 0.85rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.hero h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 16px;
    letter-spacing: -2px;
}
.hero-desc {
    font-size: 1.15rem;
    opacity: 0.85;
    line-height: 1.7;
    margin-bottom: 32px;
}
.hero-butang {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}
.btn-utama {
    display: inline-block;
    background: var(--emas);
    color: #3E2723;
    padding: 14px 32px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 1rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}
.btn-utama:hover { background: #D4B87A; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.2); }
.btn-utama.kecil { padding: 10px 24px; font-size: 0.9rem; }
.btn-kedua {
    display: inline-block;
    background: transparent;
    color: var(--putih);
    padding: 14px 32px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 1rem;
    border: 2px solid rgba(255,255,255,0.4);
    transition: all 0.3s ease;
}
.btn-kedua:hover { border-color: var(--putih); background: rgba(255,255,255,0.1); }
.hero-hiasan { position: absolute; inset: 0; pointer-events: none; }
.hiasan-bulat {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.06);
    top: -50px;
    right: -80px;
}
.hiasan-bulat.kecil {
    width: 150px;
    height: 150px;
    bottom: -30px;
    left: -40px;
    top: auto;
    right: auto;
}

/* Seksyen Umum */
.seksyen {
    padding: 80px 20px;
    max-width: 1100px;
    margin: 0 auto;
}
.seksyen-head {
    text-align: center;
    margin-bottom: 48px;
}
.label-seksyen {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--coklat-muda);
    font-weight: 700;
}
.seksyen-head h2 {
    font-size: 2.2rem;
    color: var(--coklat);
    margin: 8px 0 12px;
}
.seksyen-head p {
    color: var(--kelabu);
    max-width: 500px;
    margin: 0 auto;
}

/* Menu Showcase */
.menu-showcase {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}
.kad-menu-showcase {
    background: var(--putih);
    border-radius: var(--jejari);
    padding: 24px;
    box-shadow: var(--bayang);
    transition: all 0.3s ease;
    border: 1px solid transparent;
}
.kad-menu-showcase:hover {
    border-color: var(--coklat-muda);
    transform: translateY(-3px);
    box-shadow: var(--bayang-besar);
}
.kad-menu-ikon { font-size: 40px; margin-bottom: 12px; }
.kad-menu-showcase h3 { font-size: 1.1rem; color: var(--hitam); margin-bottom: 6px; }
.menu-desc {
    font-size: 0.85rem;
    color: var(--kelabu);
    margin-bottom: 14px;
    min-height: 40px;
}
.menu-harga-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.menu-harga { font-weight: 800; color: var(--coklat); font-size: 1.1rem; }
.menu-kategori {
    font-size: 0.75rem;
    background: var(--krim-gelap);
    color: var(--coklat);
    padding: 3px 10px;
    border-radius: 12px;
    font-weight: 600;
}
.tengah { text-align: center; }

/* Tentang */
.tentang-seksyen { background: var(--putih); max-width: 100%; }
.tentang-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
.tentang-teks h2 { font-size: 2rem; color: var(--coklat); margin: 8px 0 20px; }
.tentang-teks p {
    color: var(--kelabu);
    margin-bottom: 16px;
    font-size: 1rem;
    line-height: 1.7;
}
.tentang-stat { display: flex; gap: 40px; margin-top: 32px; }
.stat-item { text-align: center; }
.stat-angka {
    display: block;
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--coklat);
}
.stat-label { font-size: 0.85rem; color: var(--kelabu); }
.tentang-gambar {
    display: flex;
    justify-content: center;
    align-items: center;
}
.gambar-kotak {
    width: 280px;
    height: 280px;
    background: linear-gradient(135deg, var(--krim-gelap), var(--coklat-muda));
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 100px;
    box-shadow: var(--bayang-besar);
}

/* Lokasi */
.lokasi-seksyen { background: var(--krim-gelap); max-width: 100%; }
.lokasi-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}
.kad-info {
    background: var(--putih);
    border-radius: var(--jejari);
    padding: 28px 24px;
    text-align: center;
    box-shadow: var(--bayang);
}
.kad-info-ikon { font-size: 36px; margin-bottom: 12px; }
.kad-info h3 { color: var(--coklat); margin-bottom: 8px; }
.kad-info p { color: var(--kelabu); font-size: 0.9rem; line-height: 1.6; }

/* Banner QR */
.qr-banner {
    background: linear-gradient(135deg, var(--coklat), #3E2723);
    color: var(--putih);
    padding: 60px 20px;
}
.qr-banner-dalam {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
}
.qr-teks { flex: 1; min-width: 250px; }
.qr-teks h2 { font-size: 1.6rem; margin-bottom: 12px; }
.qr-teks p { opacity: 0.85; line-height: 1.6; }
.qr-visual {
    text-align: center;
    min-width: 150px;
}
.qr-kotak {
    display: block;
    width: 130px;
    height: 130px;
    background: var(--putih);
    color: var(--coklat);
    border-radius: 16px;
    font-weight: 800;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
}
.qr-visual small { font-size: 0.8rem; opacity: 0.7; }

/* Footer */
.footer-home {
    background: #2A1F1A;
    color: rgba(255,255,255,0.7);
    padding: 60px 20px 0;
}
.footer-dalam {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    padding-bottom: 40px;
}
.footer-kolom h3 { font-size: 1.2rem; color: var(--putih); margin-bottom: 12px; }
.footer-kolom h4 { color: var(--putih); margin-bottom: 12px; }
.footer-kolom p { font-size: 0.9rem; line-height: 1.6; }
.footer-kolom ul { list-style: none; }
.footer-kolom ul li { margin-bottom: 6px; }
.footer-kolom ul li a {
    color: rgba(255,255,255,0.6);
    font-size: 0.9rem;
    transition: color 0.3s;
}
.footer-kolom ul li a:hover { color: var(--putih); }
.footer-bawah {
    border-top: 1px solid rgba(255,255,255,0.1);
    text-align: center;
    padding: 20px;
    font-size: 0.85rem;
}

/* ===== SKRIN PILIH MEJA ===== */
.pilih-meja-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #FFF8F0, #F5E6D0);
    padding: 20px;
}
.pilih-meja-kad {
    background: var(--putih);
    border-radius: 20px;
    padding: 40px 32px;
    max-width: 500px;
    width: 100%;
    text-align: center;
    box-shadow: var(--bayang-besar);
    animation: fadeInUp 0.6s ease;
}
.balik-link {
    display: inline-block;
    font-size: 0.9rem;
    color: var(--coklat-muda);
    margin-bottom: 20px;
    font-weight: 600;
    transition: color 0.3s;
}
.balik-link:hover { color: var(--coklat); }
.pilih-meja-icon { font-size: 56px; margin-bottom: 12px; }
.pilih-meja-kad h1 { color: var(--coklat); font-size: 1.6rem; margin-bottom: 8px; }
.pilih-meja-kad > p { color: var(--kelabu); margin-bottom: 28px; }
.meja-grid-pilih {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}
.btn-meja-pilih {
    width: 100%;
    padding: 16px 8px;
    background: var(--krim);
    border: 2px solid var(--krim-gelap);
    border-radius: var(--jejari-kecil);
    cursor: pointer;
    transition: all 0.3s ease;
}
.btn-meja-pilih:hover {
    background: var(--coklat);
    border-color: var(--coklat);
    color: var(--putih);
    transform: translateY(-2px);
}
.meja-nombor {
    font-size: 1rem;
    font-weight: 700;
    color: var(--coklat);
}
.btn-meja-pilih:hover .meja-nombor { color: var(--putih); }
.nota-meja {
    font-size: 0.85rem;
    color: var(--kelabu);
    padding-top: 16px;
    border-top: 1px solid #eee;
}

/* ===== HALAMAN PESAN (PELANGGAN) ===== */
.pesan-container {
    max-width: 900px;
    margin: 0 auto;
    padding-bottom: 40px;
}
.pesan-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: linear-gradient(135deg, #3E2723, #5D4037);
    color: var(--putih);
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
.header-top {
    display: flex;
    align-items: center;
    gap: 12px;
}
.header-icon { font-size: 28px; }
.pesan-header h1 { font-size: 1.3rem; }
.meja-badge {
    font-size: 0.85rem;
    opacity: 0.9;
    margin-top: 2px;
}
.btn-troli {
    position: relative;
    background: var(--emas);
    color: #3E2723;
    border: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 22px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.btn-troli:hover { transform: scale(1.1); }
.badge-troli {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--merah);
    color: var(--putih);
    font-size: 0.7rem;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

/* Panel Troli */
.panel-troli {
    position: fixed;
    top: 0;
    right: -420px;
    width: 400px;
    max-width: 90vw;
    height: 100vh;
    background: var(--putih);
    z-index: 200;
    box-shadow: -4px 0 20px rgba(0,0,0,0.15);
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
}
.panel-troli.buka { right: 0; }
.panel-troli-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #eee;
    background: var(--krim-gelap);
}
.panel-troli-header h3 { font-size: 1.2rem; color: var(--coklat); }
.btn-tutup {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--kelabu);
}
.panel-troli-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}
.troli-kosong {
    text-align: center;
    padding: 60px 20px;
    color: var(--kelabu);
}
.troli-kosong i { font-size: 48px; display: block; margin-bottom: 12px; }
.item-troli {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
    font-size: 0.9rem;
}
.item-info { flex: 1; }
.nota-item { display: block; font-size: 0.78rem; color: var(--kelabu); }
.item-kuantiti {
    display: flex;
    align-items: center;
    gap: 8px;
}
.btn-qty {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #ddd;
    background: var(--putih);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-qty:hover { background: var(--krim-gelap); }
.item-harga { font-weight: 600; min-width: 65px; text-align: right; color: var(--coklat); }
.btn-buang {
    background: none;
    border: none;
    color: var(--merah-muda);
    cursor: pointer;
    font-size: 16px;
}
.troli-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-top: 2px solid var(--coklat);
    margin-top: 12px;
}
.jumlah-besar { font-size: 1.3rem; color: var(--coklat); font-weight: 800; }
.form-hantar { margin-top: 12px; }
.nota-khas-group { margin-bottom: 12px; }
.nota-khas-group label { font-size: 0.85rem; color: var(--kelabu); display: block; margin-bottom: 4px; }
.input-nota {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid #eee;
    border-radius: var(--jejari-kecil);
    font-size: 0.9rem;
    outline: none;
    transition: border 0.3s;
}
.input-nota:focus { border-color: var(--coklat); }
.btn-hantar-pesanan {
    width: 100%;
    padding: 14px;
    background: var(--hijau);
    color: var(--putih);
    border: none;
    border-radius: var(--jejari-kecil);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}
.btn-hantar-pesanan:hover { background: #237A40; }

.overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 150;
    display: none;
}
.overlay.buka { display: block; }

/* Menu */
.menu-container {
    padding: 20px;
}
.kategori-section {
    margin-bottom: 28px;
}
.kategori-tajuk {
    font-size: 1.2rem;
    color: var(--coklat);
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--krim-gelap);
    display: flex;
    align-items: center;
    gap: 8px;
}
.kategori-tajuk::before {
    content: '☕';
    font-size: 1.1rem;
}
.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}
.kad-menu {
    background: var(--putih);
    border-radius: var(--jejari);
    padding: 18px;
    box-shadow: var(--bayang);
    transition: all 0.3s ease;
    border: 1px solid transparent;
}
.kad-menu:hover {
    border-color: var(--coklat-muda);
    transform: translateY(-2px);
}
.kad-ikon {
    font-size: 36px;
    margin-bottom: 8px;
}
.kad-menu-gambar {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 8px;
}
.kad-body h3 {
    font-size: 1rem;
    margin-bottom: 4px;
    color: var(--hitam);
}
.penerangan {
    font-size: 0.8rem;
    color: var(--kelabu);
    margin-bottom: 12px;
    min-height: 20px;
}
.kad-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.harga {
    font-weight: 700;
    color: var(--coklat);
    font-size: 1.05rem;
}
.btn-tambah {
    background: var(--coklat);
    color: var(--putih);
    border: none;
    padding: 7px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}
.btn-tambah:hover { background: var(--coklat-muda); }

/* ===== PESANAN BERJAYA ===== */
.kejayaan-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: linear-gradient(160deg, #E8F5E9, #FFF8F0);
}
.kad-kejayaan {
    background: var(--putih);
    border-radius: var(--jejari);
    padding: 40px 32px;
    max-width: 550px;
    width: 100%;
    box-shadow: var(--bayang-besar);
    text-align: center;
}
.ikon-berjaya {
    font-size: 64px;
    color: var(--hijau);
    margin-bottom: 16px;
    animation: pop 0.5s ease;
}
.kad-kejayaan h1 {
    color: var(--coklat);
    margin-bottom: 8px;
}
.kad-kejayaan > p {
    color: var(--kelabu);
    margin-bottom: 24px;
}
.maklumat-pesanan {
    background: var(--krim-gelap);
    border-radius: var(--jejari-kecil);
    padding: 20px;
    margin-bottom: 24px;
    text-align: left;
}
.row-info {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 0.9rem;
}
.row-info span { color: var(--kelabu); }
.row-info strong { color: var(--hitam); }
.kad-kejayaan h3 {
    color: var(--coklat);
    margin-bottom: 12px;
    text-align: left;
}
.jadual-item {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    font-size: 0.9rem;
}
.jadual-item th {
    background: var(--krim-gelap);
    padding: 10px 8px;
    text-align: left;
    color: var(--coklat);
    font-weight: 700;
}
.jadual-item th:last-child, .jadual-item td:last-child { text-align: right; }
.jadual-item td {
    padding: 10px 8px;
    border-bottom: 1px solid #eee;
}
.jadual-item tfoot td {
    font-weight: 700;
    border-top: 2px solid var(--coklat);
    padding-top: 12px;
}
.nota-khas-box {
    background: #FFF9E6;
    padding: 12px 16px;
    border-radius: var(--jejari-kecil);
    text-align: left;
    margin-bottom: 20px;
    font-size: 0.9rem;
}
.btn-pesan-lagi {
    display: inline-block;
    background: var(--coklat);
    color: var(--putih);
    padding: 12px 28px;
    border-radius: 30px;
    font-weight: 700;
    transition: all 0.3s ease;
}
.btn-pesan-lagi:hover { background: var(--coklat-muda); }

/* Status badge */
.status-badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
}
.status-diterima { background: #FFF3CD; color: #856404; }
.status-sedangdisediakan { background: #CCE5FF; color: #004085; }
.status-telahdihantar { background: #E2D5F1; color: #5A2D82; }
.status-telahdibayar { background: #D4EDDA; color: #155724; }
.status-dibatalkan { background: #F8D7DA; color: #721C24; }

/* ===== PAPAN PESANAN (PEMILIK) ===== */
.papan-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}
.papan-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
    padding: 16px 20px;
    background: var(--putih);
    border-radius: var(--jejari);
    box-shadow: var(--bayang);
}
.papan-header h1 {
    font-size: 1.3rem;
    color: var(--coklat);
}
.header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}
.jam-sekarang {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--coklat);
    background: var(--krim-gelap);
    padding: 6px 14px;
    border-radius: 20px;
}
.btn-nav {
    background: var(--coklat);
    color: var(--putih);
    padding: 8px 18px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.85rem;
    transition: all 0.3s ease;
}
.btn-nav:hover { background: var(--coklat-muda); }

.penapis-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.btn-tapis {
    padding: 8px 18px;
    border: 2px solid #ddd;
    background: var(--putih);
    border-radius: 25px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.3s ease;
}
.btn-tapis:hover, .btn-tapis.aktif {
    border-color: var(--coklat);
    background: var(--coklat);
    color: var(--putih);
}

.pesanan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 18px;
}
.tiada-pesanan {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px;
    color: var(--kelabu);
}
.tiada-pesanan i { font-size: 48px; display: block; margin-bottom: 12px; }

.kad-pesanan {
    background: var(--putih);
    border-radius: var(--jejari);
    box-shadow: var(--bayang);
    overflow: hidden;
    border-left: 5px solid #ddd;
    transition: all 0.3s ease;
}
.kad-pesanan.status-diterima { border-left-color: #FFC107; }
.kad-pesanan.status-sedangdisediakan { border-left-color: #2196F3; }
.kad-pesanan.status-telahdihantar { border-left-color: #9C27B0; }
.kad-pesanan.status-telahdibayar { border-left-color: #4CAF50; }
.kad-pesanan.status-dibatalkan { border-left-color: #F44336; }

.kad-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: var(--kelabu-muda);
    font-size: 0.85rem;
}
.no-pesanan { font-weight: 800; color: var(--coklat); font-size: 1rem; }
.meja-badge-kecil {
    background: var(--coklat);
    color: var(--putih);
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 600;
}
.kad-head .status-badge { margin-left: auto; }

.kad-body-pesanan { padding: 14px 16px; }
.item-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 0.9rem;
    border-bottom: 1px dotted #eee;
}
.item-bar:last-child { border-bottom: none; }
.item-qty { font-weight: 800; color: var(--coklat); min-width: 30px; }
.item-nama { flex: 1; }
.item-nota { font-size: 0.75rem; color: var(--kelabu); font-style: italic; }

.kad-nota {
    padding: 10px 16px;
    background: #FFF9E6;
    font-size: 0.85rem;
    border-top: 1px solid #f0e6c0;
}
.kad-footer-pesanan {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-top: 1px solid #eee;
}
.kad-footer-pesanan .jumlah {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--coklat);
}
.masa { color: var(--kelabu); font-size: 0.85rem; }

.kad-tindakan {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    background: var(--kelabu-muda);
    flex-wrap: wrap;
}
.btn-status, .btn-batal-kecil {
    padding: 7px 14px;
    border: none;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}
.btn-sedia { background: #FFF3CD; color: #856404; }
.btn-sedia:hover { background: #FFE082; }
.btn-hijau { background: #D4EDDA; color: #155724; }
.btn-hijau:hover { background: #A5D6A7; }
.btn-biru { background: #CCE5FF; color: #004085; }
.btn-biru:hover { background: #90CAF9; }
.btn-kelabu { background: #D1ECF1; color: #0C5460; }
.btn-kelabu:hover { background: #B2DFDB; }
.btn-batal-kecil {
    background: #F8D7DA; color: #721C24;
}
.btn-batal-kecil:hover { background: #F5C6CB; }

.form-inline { display: inline; }

/* ===== URUS MENU ===== */
.urus-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}
.urus-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}
.urus-header h1 { color: var(--coklat); font-size: 1.4rem; }

.kad-borang {
    background: var(--putih);
    border-radius: var(--jejari);
    padding: 24px;
    box-shadow: var(--bayang);
    margin-bottom: 30px;
}
.kad-borang h3 { color: var(--coklat); margin-bottom: 16px; }
.borang-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}
.form-group { margin-bottom: 12px; }
.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--coklat);
    font-size: 0.85rem;
}
.form-control {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid #eee;
    border-radius: var(--jejari-kecil);
    font-size: 0.9rem;
    outline: none;
    transition: border 0.3s;
    font-family: inherit;
}
.form-control:focus { border-color: var(--coklat); }
textarea.form-control { resize: vertical; }

.borang-actions {
    display: flex;
    gap: 10px;
    margin-top: 6px;
}
.btn-simpan {
    background: var(--hijau);
    color: var(--putih);
    border: none;
    padding: 10px 24px;
    border-radius: 25px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}
.btn-simpan:hover { background: #237A40; }
.btn-batal {
    padding: 10px 24px;
    border-radius: 25px;
    border: 2px solid #ddd;
    background: var(--putih);
    color: var(--kelabu);
    font-weight: 600;
    cursor: pointer;
}

.kategori-group {
    margin-bottom: 24px;
}
.kategori-head {
    color: var(--coklat);
    font-size: 1rem;
    margin-bottom: 10px;
    padding-left: 10px;
    border-left: 4px solid var(--coklat);
}
.jadual-menu {
    width: 100%;
    border-collapse: collapse;
    background: var(--putih);
    border-radius: var(--jejari);
    overflow: hidden;
    box-shadow: var(--bayang);
    font-size: 0.9rem;
}
.jadual-menu th {
    background: var(--coklat);
    color: var(--putih);
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
}
.jadual-menu td { padding: 10px 12px; border-bottom: 1px solid #eee; }
.jadual-menu tr.tidak-tersedia { opacity: 0.5; }
.tag-hijau { background: #D4EDDA; color: #155724; padding: 3px 10px; border-radius: 12px; font-size: 0.78rem; font-weight: 700; }
.tag-merah { background: #F8D7DA; color: #721C24; padding: 3px 10px; border-radius: 12px; font-size: 0.78rem; font-weight: 700; }

.btn-kecil {
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
}
.btn-edit { background: #CCE5FF; color: #004085; }
.btn-edit:hover { background: #90CAF9; }
.btn-padam { background: #F8D7DA; color: #721C24; }
.btn-padam:hover { background: #F5C6CB; }

/* ===== HALAMAN RALAT ===== */
.error-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: linear-gradient(160deg, #FFF, #FFF8F0);
}
.error-kad {
    text-align: center;
    max-width: 450px;
}
.error-icon { font-size: 64px; margin-bottom: 16px; }
.error-kad h1 { color: var(--merah); margin-bottom: 8px; }
.error-mesej { color: var(--kelabu); margin-bottom: 16px; font-size: 1rem; }
.error-id { font-size: 0.8rem; color: #999; margin-bottom: 20px; }
.btn-kembali {
    display: inline-block;
    background: var(--coklat);
    color: var(--putih);
    padding: 10px 24px;
    border-radius: 25px;
    font-weight: 700;
    transition: all 0.3s ease;
}
.btn-kembali:hover { background: var(--coklat-muda); }

/* ===== ANIMASI ===== */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
@keyframes pop {
    0% { transform: scale(0); }
    70% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* ===== URUS MEJA & QR ===== */
.meja-admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}
.kad-meja-admin {
    background: var(--putih);
    border-radius: var(--jejari);
    padding: 20px;
    text-align: center;
    box-shadow: var(--bayang);
    transition: all 0.3s ease;
}
.kad-meja-admin.tidak-aktif { opacity: 0.5; }
.meja-admin-head {
    margin-bottom: 12px;
}
.meja-admin-nombor {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--coklat);
    display: block;
}
.meja-admin-kod {
    font-size: 0.75rem;
    color: var(--kelabu);
}
.meja-admin-qr {
    margin-bottom: 8px;
}
.meja-admin-qr img {
    border: 1px solid #eee;
    border-radius: 8px;
}
.meja-admin-url {
    font-size: 0.65rem;
    color: var(--kelabu);
    word-break: break-all;
    margin-bottom: 12px;
    background: var(--kelabu-muda);
    padding: 4px 8px;
    border-radius: 6px;
}
.meja-admin-tindakan {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ===== PELANGGAN BADGE (on order cards) ===== */
.pelanggan-badge {
    background: var(--biru);
    color: var(--putih);
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 600;
}

/* ===== PANGKALAN DATA PELANGGAN ===== */
.stat-pelanggan {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.stat-kad {
    background: var(--putih);
    border-radius: var(--jejari);
    padding: 24px;
    text-align: center;
    box-shadow: var(--bayang);
}
.stat-num {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: var(--coklat);
}
.stat-lbl {
    font-size: 0.85rem;
    color: var(--kelabu);
}

/* ===== ADMIN LAYOUT (SIDEBAR) ===== */
.admin-body {
    display: flex;
    min-height: 100vh;
    background: #f0ebe3;
}
.admin-sidebar {
    width: 240px;
    min-width: 240px;
    background: linear-gradient(180deg, #3E2723, #4E342E);
    color: var(--putih);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 100;
}
.sidebar-head {
    padding: 24px 20px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.sidebar-logo {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--putih);
    display: block;
    margin-bottom: 4px;
}
.sidebar-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.5;
}
.sidebar-nav {
    flex: 1;
    padding: 12px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    color: rgba(255,255,255,0.7);
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}
.sidebar-link:hover {
    background: rgba(255,255,255,0.08);
    color: var(--putih);
    border-left-color: var(--emas);
}
.sidebar-link.aktif {
    background: rgba(255,255,255,0.12);
    color: var(--putih);
    border-left-color: var(--emas);
    font-weight: 600;
}
.sidebar-link i { font-size: 18px; width: 22px; text-align: center; }
.sidebar-footer {
    padding: 16px 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
}
.sidebar-back {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,0.6);
    font-size: 0.85rem;
    transition: color 0.2s;
}
.sidebar-back:hover { color: var(--putih); }

/* Admin main content */
.admin-main {
    flex: 1;
    padding: 24px;
    overflow-x: auto;
}

/* Admin Dashboard */
.admin-dashboard h1 {
    color: var(--coklat);
    font-size: 1.6rem;
    margin-bottom: 4px;
}
.admin-subtitle {
    color: var(--kelabu);
    margin-bottom: 28px;
}
.admin-kad-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}
.admin-kad-dash {
    background: var(--putih);
    border-radius: var(--jejari);
    padding: 24px;
    box-shadow: var(--bayang);
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
}
.admin-kad-dash:hover {
    transform: translateY(-3px);
    box-shadow: var(--bayang-besar);
}
.dash-icon { font-size: 36px; }
.dash-info { display: flex; flex-direction: column; }
.dash-num {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--coklat);
}
.dash-lbl {
    font-size: 0.85rem;
    color: var(--kelabu);
}
.admin-pesanan-terkini {
    background: var(--putih);
    border-radius: var(--jejari);
    padding: 24px;
    box-shadow: var(--bayang);
}
.admin-pesanan-terkini h2 {
    color: var(--coklat);
    font-size: 1.1rem;
    margin-bottom: 16px;
}
.admin-kosong {
    color: var(--kelabu);
    text-align: center;
    padding: 30px;
}

/* ===== STATUS BAYARAN ===== */
.kad-bayaran {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 0.85rem;
    border-top: 1px dashed #ddd;
}
.label-bayaran { color: var(--kelabu); font-weight: 600; }
.bayaran-badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
}
.bayaran-belumbayar { background: #FFF3CD; color: #856404; }
.bayaran-tunai { background: #D4EDDA; color: #155724; }
.bayaran-qr { background: #E8DAEF; color: #6C3483; }
.masa-bayaran {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--kelabu);
}
.btn-bayar-tunai { background: #D4EDDA; color: #155724; }
.btn-bayar-tunai:hover { background: #A5D6A7; }
.btn-bayar-qr { background: #E8DAEF; color: #6C3483; }
.btn-bayar-qr:hover { background: #D2B4DE; }

.btn-pesan-menu {
    background: var(--hijau);
    color: var(--putih);
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: 700;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    white-space: nowrap;
}
.btn-pesan-menu:hover { background: #237A40; color: var(--putih); transform: translateY(-1px); }

/* ===== PAPAN PESANAN (JADUAL SENARAI) ===== */
.jadual-pesanan-wrapper {
    background: var(--putih);
    border-radius: var(--jejari);
    overflow: hidden;
    box-shadow: var(--bayang);
}
.jadual-pesanan {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}
.jadual-pesanan th {
    background: var(--coklat);
    color: var(--putih);
    padding: 12px 10px;
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
}
.jadual-pesanan td {
    padding: 10px;
    border-bottom: 1px solid #eee;
}
.baris-pesanan {
    cursor: pointer;
    transition: background 0.2s;
}
.baris-pesanan:hover { background: #fdf6ee; }
.tag-makan { background: #D4EDDA; color: #155724; padding: 3px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: 600; }
.tag-bungkus { background: #FFF3CD; color: #856404; padding: 3px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: 600; }

/* ===== DETAIL PESANAN ===== */
.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    font-size: 0.9rem;
}
.status-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

/* ===== PILIH JENIS PESANAN ===== */
.jenis-grid-pilih {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}
.btn-jenis-pilih {
    width: 100%;
    padding: 28px 16px;
    background: var(--krim);
    border: 2px solid var(--krim-gelap);
    border-radius: var(--jejari);
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}
.btn-jenis-pilih:hover {
    background: var(--coklat);
    border-color: var(--coklat);
    transform: translateY(-3px);
    box-shadow: var(--bayang-besar);
}
.jenis-ikon { display: block; font-size: 48px; margin-bottom: 8px; }
.jenis-label { display: block; font-size: 1.1rem; font-weight: 700; color: var(--coklat); }
.jenis-desc { display: block; font-size: 0.8rem; color: var(--kelabu); margin-top: 2px; }
.btn-jenis-pilih:hover .jenis-label { color: var(--putih); }
.btn-jenis-pilih:hover .jenis-desc { color: rgba(255,255,255,0.7); }

/* ===== BAR KEMAJUAN STATUS ===== */
.status-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 24px 0;
    padding: 24px 16px;
    background: var(--putih);
    border-radius: var(--jejari);
    box-shadow: var(--bayang);
    flex-wrap: wrap;
}
.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 70px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #ccc;
    transition: all 0.3s ease;
}
.progress-step.selesai { color: var(--hijau); }
.progress-step.sedang { color: var(--coklat); font-weight: 700; }
.step-bulatan {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.9rem;
    border: 3px solid #ddd;
    background: var(--putih);
    color: #ccc;
    transition: all 0.3s ease;
}
.progress-step.selesai .step-bulatan {
    border-color: var(--hijau);
    background: var(--hijau);
    color: var(--putih);
}
.progress-step.sedang .step-bulatan {
    border-color: var(--coklat);
    background: var(--coklat);
    color: var(--putih);
    box-shadow: 0 0 0 4px rgba(111,78,55,0.2);
    animation: pulse 2s infinite;
}
.progress-line {
    width: 50px;
    height: 3px;
    background: #ddd;
    margin: 0 4px;
    margin-bottom: 20px;
    transition: background 0.3s ease;
}
.progress-line.selesai { background: var(--hijau); }
.status-dibatalkan-banner {
    text-align: center;
    padding: 16px;
    background: #F8D7DA;
    color: #721C24;
    border-radius: var(--jejari-kecil);
    font-weight: 700;
    margin: 16px 0;
}
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(111,78,55,0.2); }
    50% { box-shadow: 0 0 0 8px rgba(111,78,55,0.1); }
}

/* ===== BUTANG CETAKAN ===== */
.cetak-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.btn-cetak {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    text-decoration: none;
}
.btn-cetak-label {
    background: #FFF3CD;
    color: #856404;
    border: 1px solid #FFE082;
}
.btn-cetak-label:hover { background: #FFE082; color: #6D5300; }
.btn-cetak-resit {
    background: #E8DAEF;
    color: #6C3483;
    border: 1px solid #D2B4DE;
}
.btn-cetak-resit:hover { background: #D2B4DE; color: #4A235A; }

/* ===== RESPONSIF ===== */
@media (max-width: 768px) {
    .hero h1 { font-size: 2.2rem; }
    .nav-pautan { gap: 12px; }
    .nav-pautan li a { font-size: 0.8rem; }
    .nav-btn-pesan { padding: 6px 12px; font-size: 0.8rem; }
    .tentang-grid { grid-template-columns: 1fr; gap: 30px; }
    .tentang-gambar { order: -1; }
    .gambar-kotak { width: 200px; height: 200px; font-size: 70px; }
    .tentang-stat { gap: 20px; }
    .stat-angka { font-size: 1.6rem; }
    .seksyen-head h2 { font-size: 1.6rem; }
    .menu-showcase { grid-template-columns: 1fr; }
    .qr-banner-dalam { flex-direction: column; text-align: center; }
    /* Admin sidebar collapse */
    .admin-body { flex-direction: column; }
    .admin-sidebar {
        width: 100%;
        min-width: 100%;
        height: auto;
        position: relative;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 12px 16px;
        gap: 8px;
        align-items: center;
    }
    .sidebar-head { padding: 0; border: none; display: flex; align-items: center; gap: 8px; }
    .sidebar-label { display: none; }
    .sidebar-nav { flex-direction: row; flex-wrap: wrap; padding: 0; }
    .sidebar-link { padding: 6px 12px; font-size: 0.78rem; border-left: none; border-radius: 16px; }
    .sidebar-link.aktif { background: rgba(255,255,255,0.2); }
    .sidebar-footer { display: none; }
    .admin-main { padding: 16px; }
}

@media (max-width: 640px) {
    .pesanan-grid { grid-template-columns: 1fr; }
    .menu-grid { grid-template-columns: repeat(2, 1fr); }
    .papan-header { flex-direction: column; text-align: center; }
    .panel-troli { width: 100%; max-width: 100%; }
    .borang-grid { grid-template-columns: 1fr; }
    .meja-grid-pilih { grid-template-columns: repeat(3, 1fr); }
    .nav-pautan { display: none; }
    .admin-kad-grid { grid-template-columns: 1fr 1fr; }
}