/* ============================== */
/* BAGIAN CSS                     */
/* ============================== */
body { font-family: 'Segoe UI', Arial, sans-serif; background: #e0f2fe; text-align: center; padding: 20px; color: #0369a1; margin: 0; }
.card { background: white; padding: 30px 20px; border-radius: 20px; box-shadow: 0 10px 15px rgba(0,0,0,0.1); max-width: 380px; margin: 20px auto; }
.dashboard { display: none; padding: 20px; background: white; border-radius: 20px; max-width: 380px; margin: 20px auto; box-shadow: 0 10px 15px rgba(0,0,0,0.1); }
.dashboard-wide { display: none; padding: 15px; background: white; border-radius: 20px; width: 95%; max-width: 800px; margin: 10px auto; box-shadow: 0 10px 15px rgba(0,0,0,0.1); }
.logo { width: 120px; margin-bottom: 20px; }
h1 { color: #0284c7; font-size: 22px; margin-bottom: 5px; }
h2 { color: #0369a1; font-size: 18px; margin-top: 0; margin-bottom: 15px; text-align: left; border-bottom: 2px solid #bae6fd; padding-bottom: 5px;}
p { color: #64748b; font-size: 14px; margin-bottom: 25px; }
.input-group { text-align: left; margin-bottom: 15px; }
label { font-size: 13px; font-weight: bold; color: #0369a1; display: block; margin-top: 5px; }
input, select { width: 100%; padding: 12px; margin-top: 5px; border: 2px solid #cbd5e1; border-radius: 10px; box-sizing: border-box; font-size: 14px; }
button { width: 100%; padding: 14px; border: none; border-radius: 10px; font-weight: bold; font-size: 15px; cursor: pointer; margin-top: 10px; transition: 0.3s; }

.btn-login { background: #0284c7; color: white; }
.btn-guest { background: #10b981; color: white; }
.btn-chat { background: #25d366; color: white; }
.btn-admin-menu { background: #f8fafc; color: #0f172a; border: 1px solid #cbd5e1; text-align: left; padding: 15px; font-size: 14px; display: flex; justify-content: space-between; align-items: center; }
.btn-admin-menu:hover { background: #f1f5f9; }
.btn-back { background: #94a3b8; color: white; margin-top: 20px; }

/* Tombol Aksi */
.btn-danger { background: #ef4444; color: white; width: auto; padding: 6px 12px; font-size: 12px; margin: 0; }
.btn-warning { background: #f59e0b; color: white; width: auto; padding: 6px 12px; font-size: 12px; margin: 0; } 
button:active { transform: scale(0.98); }

.box-sub { background: #f1f5f9; padding: 15px; border-radius: 12px; margin-bottom: 15px; text-align: left; }
.list-item-admin { background: white; border: 1px solid #e2e8f0; padding: 10px; border-radius: 8px; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; text-align: left; font-size: 13px; }

.katalog-item { display: flex; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px; margin-bottom: 12px; align-items: center; text-align: left; }
.katalog-img { width: 70px; height: 70px; border-radius: 8px; object-fit: cover; margin-right: 15px; }
.katalog-info h3 { margin: 0 0 5px 0; font-size: 16px; color: #0369a1; }
.katalog-info p { margin: 0 0 5px 0; font-size: 12px; color: #64748b; line-height: 1.4; }
.katalog-info .harga { font-weight: bold; color: #10b981; font-size: 13px; }
/* ============================== */
/* CSS VIP OWNER (KASTA TERTINGGI)*/
/* ============================== */
.vip-header { background: linear-gradient(135deg, #0f172a, #1e293b); border-radius: 12px; padding: 20px; color: white; margin-bottom: 20px; text-align: center; box-shadow: 0 4px 10px rgba(0,0,0,0.15); border-bottom: 4px solid #fbbf24; }
.btn-owner-menu { background: #1e293b; color: #f8fafc; border: 1px solid #334155; text-align: left; padding: 16px; font-size: 14px; display: flex; justify-content: space-between; align-items: center; border-radius: 10px; margin-top: 10px; cursor: pointer; transition: 0.3s; box-shadow: 0 2px 5px rgba(0,0,0,0.1); width: 100%; box-sizing: border-box; }
.btn-owner-menu:hover { background: #334155; border-color: #fbbf24; }
.btn-owner-menu span { font-weight: bold; color: #fbbf24; }
.kpi-card { background: white; border: 1px solid #e2e8f0; border-radius: 8px; padding: 15px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; border-left: 4px solid #0ea5e9; box-shadow: 0 2px 4px rgba(0,0,0,0.02); }