/* ==========================================================
   OMNI STORE - QUIET LUXURY / MINIMALIST ENTERPRISE
   ========================================================== */
.shop-container { padding: 20px 15px; min-height: 85vh; background: #0f172a; font-family: 'Inter', sans-serif; }

/* HEADER */
.shop-header { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 1px solid rgba(255,255,255,0.06); padding-bottom: 20px; margin-bottom: 25px; }
.shop-title { margin: 0; color: #f8fafc; font-size: 1.25rem; font-weight: 300; letter-spacing: 3px; }
.shop-subtitle { font-size: 0.6rem; color: #64748b; margin-top: 6px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; }
.shop-balance-box { text-align: right; }
.balance-label { font-size: 0.55rem; color: #64748b; font-weight: 700; letter-spacing: 1px; margin-bottom: 4px; }
.balance-value { color: #e2e8f0; font-size: 1.1rem; font-weight: 300; letter-spacing: 1px; }

/* TABS NAVIGASI */
.shop-tabs { display: flex; gap: 15px; margin-bottom: 25px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.shop-tab { flex: 1; background: transparent; color: #64748b; border: none; padding: 12px 0; font-weight: 600; font-size: 0.65rem; letter-spacing: 1px; transition: 0.3s; border-bottom: 2px solid transparent; cursor: pointer; text-transform: uppercase; }
.shop-tab.active { color: #e2e8f0; border-bottom: 2px solid #e2e8f0; }

/* LAYOUT KARTU LIST (Dimensi 3D & Kaca Es) */
.shop-grid { display: flex; flex-direction: column; gap: 12px; }

.shop-card { 
    /* Warna papan dinaikkan agar tidak menyatu dengan background */
    background: rgba(30, 41, 59, 0.6); 
    /* Garis tepi dipertegas sedikit */
    border: 1px solid rgba(255, 255, 255, 0.08); 
    border-radius: 10px; 
    padding: 20px 15px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    transition: all 0.3s ease;
    /* Tambahan efek bayangan dan kaca blur agar kartu terasa "mengambang" */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4); 
    backdrop-filter: blur(10px);
}

.shop-card:active { 
    background: rgba(30, 41, 59, 0.9); 
    transform: translateY(2px); /* Efek ditekan masuk ke dalam */
}

.highlight-card { 
    border: 1px solid rgba(250, 204, 21, 0.3); 
    background: linear-gradient(145deg, rgba(250, 204, 21, 0.06), rgba(30, 41, 59, 0.7)); 
}

/* TIPOGRAFI KARTU */
.shop-card-info { flex: 1; padding-right: 15px; }
.shop-card-title { color: #f1f5f9; font-size: 0.85rem; font-weight: 500; margin-bottom: 6px; letter-spacing: 0.5px; }
.shop-card-desc { color: #64748b; font-size: 0.65rem; line-height: 1.5; font-weight: 400; }
.text-gold { color: #facc15; font-weight: 600; }

/* TOMBOL MINIMALIS */
.shop-btn-outline { background: transparent; border: 1px solid rgba(255,255,255,0.15); color: #cbd5e1; padding: 8px 18px; font-size: 0.7rem; border-radius: 6px; font-weight: 500; letter-spacing: 0.5px; white-space: nowrap; }
.shop-btn-gold { background: #facc15; border: 1px solid #facc15; color: #0f172a; padding: 8px 18px; font-size: 0.7rem; border-radius: 6px; font-weight: 700; letter-spacing: 0.5px; white-space: nowrap; }
.shop-btn-back { width: 100%; margin-top: 40px; padding: 15px; border-radius: 8px; background: transparent; color: #64748b; border: 1px solid rgba(255,255,255,0.1); font-weight: 600; letter-spacing: 2px; font-size: 0.7rem; transition: 0.3s; text-transform: uppercase; }
.shop-btn-back:active { background: rgba(255,255,255,0.05); color: white; }