* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; }

:root {
    --primary-blue: #004a99;
    --dark-blue: #002d5a;
    --teal-gradient: linear-gradient(135deg, #44b0b8 0%, #3498db 100%);
    --bg-gray: #f8fafd;
}

body { 
    background-color: #2c3e50; display: flex; justify-content: center; 
    /* Mencegah user menyeleksi teks (biasanya tidak ada di aplikasi native) */
    -webkit-user-select: none;
    user-select: none;
    
    /* Mencegah menu pop-up saat menahan klik pada gambar/link */
    -webkit-touch-callout: none;
    
    /* Mencegah "bounce effect" yang berlebihan saat scroll di iOS */
    overflow: hidden;
    position: fixed;
    width: 100%;
}

.app-container {
    width: 100%;
    max-width: 414px;
    height: 100vh;
    background: var(--bg-gray);
    overflow-y: auto;
    position: relative;
    -webkit-overflow-scrolling: touch;
}

/* Header */
.header {
    background: radial-gradient(circle at top right, #1e3c72, #004a99);
    padding: 20px 20px 80px 20px;
    color: white;
}

/* Menyesuaikan padding untuk iPhone dengan Notch (Safe Area) */
.header, .activity-header, .foryou-header, .account-header, .header-blue {
    padding-top: env(safe-area-inset-top);
}

.top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.logo { font-size: 24px; font-weight: 800; }
.logo span { font-weight: 400; font-style: italic; }
.header-icons { display: flex; gap: 15px; }
.header-icons i { width: 20px; cursor: pointer; }

.greeting { font-size: 13px; font-weight: 300; }
.greeting span { font-weight: 700; }

/* Account Card */
.account-card {
    margin: -60px 20px 0 20px;
    background: white;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.card-top {
    background: var(--teal-gradient);
    padding: 15px;
    color: white;
}

.bca-id-badge {
    background: rgba(255,255,255,0.2);
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    gap: 5px;
    margin-bottom: 10px;
}

.account-number { font-size: 14px; display: flex; align-items: center; gap: 8px; }
.small-icon { width: 14px; opacity: 0.8; }

.card-bottom { padding: 15px; color: #444; }
.label { font-size: 12px; color: #888; }
.balance-row { 
    display: flex; justify-content: space-between; align-items: center; 
    padding: 10px 0; border-bottom: 1px solid #eee; margin-bottom: 10px;
}
.currency {
    font-size: 18px;
    font-weight: 800;
    color: #333;
    display: inline-block;
    min-width: 150px; /* Menjaga agar layout tidak goyang saat angka muncul */
}
.eye-icon { color: var(--primary-blue); width: 20px; }
.account-action { font-size: 13px; color: var(--primary-blue); font-weight: 600; display: flex; align-items: center; gap: 8px; }

/* Menu Section */
.menu-section { padding: 20px; }
.section-header { display: flex; justify-content: space-between; margin-bottom: 20px; color: var(--dark-blue); }
.section-header h2 { font-size: 16px; }
.edit-btn { font-size: 13px; color: var(--primary-blue); font-weight: 600; display: flex; align-items: center; gap: 5px; }

.menu-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 10px; }
.menu-item { text-align: center; }
.menu-item p { font-size: 10px; margin-top: 8px; font-weight: 500; color: #555; line-height: 1.2; }

.icon-circle {
    width: 55px; height: 55px; border-radius: 50%; margin: 0 auto;
    display: flex; align-items: center; justify-content: center; color: white;
    position: relative;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.bg-blue { background: #e3f2fd; color: #007aff; }
.bg-light-blue { background: #e0f7fa; color: #00acc1; }
.bg-navy { background: #e8eaf6; color: #3949ab; }
.bg-blue-grad { background: linear-gradient(to bottom, #ffffff, #e3f2fd); color: #004a99; border: 1px solid #d1e9ff; }

.badge-new {
    position: absolute; top: -5px; background: #ff9800; color: white;
    font-size: 7px; padding: 2px 5px; border-radius: 4px; font-weight: bold;
}

/* Pagination */
.pagination-dots { display: flex; justify-content: center; gap: 5px; margin-top: 20px; }
.dot { width: 12px; height: 4px; background: #ddd; border-radius: 2px; }
.dot.active { background: #00acc1; width: 24px; }

/* Bottom Nav */
.bottom-nav {
    position: fixed; bottom: 0; width: 100%; max-width: 414px;
    background: var(--primary-blue); display: flex; justify-content: space-around;
    padding: 10px 0 25px 0; border-radius: 20px 20px 0 0; color: rgba(255,255,255,0.6);
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(70px + env(safe-area-inset-bottom));
}

.nav-item { text-align: center; }
.nav-item.active { color: white; }
.nav-item i { width: 22px; }
.nav-item p { font-size: 10px; margin-top: 4px; }

.qris-container { margin-top: -40px; text-align: center; }
.qris-box {
    width: 55px; height: 55px; background: #00acc1; border: 4px solid var(--bg-gray);
    border-radius: 15px; display: flex; align-items: center; justify-content: center; color: white;
}
.qris-label { color: white; font-size: 11px; font-weight: 800; margin-top: 4px; display: block; }

#balance-value {
    letter-spacing: 1px; /* Membuat tanda bintang terlihat lebih rapi */
}

.promo-banner {
    margin: 20px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    /* Menyesuaikan tinggi banner agar proporsional */
    height: 70px; 
    background: #f0f0f0; /* Warna cadangan jika gambar gagal load */
    cursor: pointer;
}

.banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Memastikan gambar memenuhi area tanpa gepeng */
    display: block;
}

.promo-text {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5); /* Supaya teks terbaca meski gambar terang */
}

.promo-text i {
    width: 14px;
}

/* Kontainer utama untuk mengatur margin dan jarak */
.bottom-promo-container {
    margin: 20px 0 100px 0; /* Memberi jarak bawah agar tidak tertutup bottom nav */
    width: 100%;
    overflow: hidden;
}

/* Area scroll horizontal */
.bottom-promo-scroll {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory; /* Efek magnet saat geser */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* Scroll halus di iOS */
    padding: 0 15px; /* Memberi ruang di kiri kanan agar slide selanjutnya terlihat sedikit */
    gap: 12px;
}

/* Menghilangkan scrollbar tapi tetap bisa digeser */
.bottom-promo-scroll::-webkit-scrollbar {
    display: none;
}

/* Setiap item slide */
.promo-slide {
    flex: 0 0 85%; /* Setiap slide mengambil 85% lebar layar */
    scroll-snap-align: center; /* Berhenti di tengah */
    border-radius: 15px;
    overflow: hidden;
    height: 160px; /* Sesuaikan tinggi dengan gambar kamu */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.promo-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Gambar tetap proporsional */
    display: block;
}